Tag Archives: Javascript

Enable cross-origin resource sharing for AJAX

A common problem when dealing with AJAX scripts is that the server script (or API) which javascript is calling is required to be on exactly the same domain (subdomain included).  To open up your server script / API to all domains the following headers are required to be sent before any content:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With

In PHP the code would be:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');

If you are using a single script that contains both the API and the regular page (even with includes), the headers must be sent before it is determined whether it is an API call or not.  This is due to a ‘pre-flight request‘ the browser does to test that the impending AJAX call is all approved and above board.  Once it receives the a-ok it will do a second call with the full AJAX credentials.

Daily Updates Console

Daily Updates console is a streamlined version of one that was existing.  Previously staff had to edit through an old perl-based web interface which wasn’t user friendly or intuitive (required training), had many unnecessary steps, and sent all the information at 3am at night.  The new console solved all of these problems with the following changes:

  • bringing the backend & frontend in to modern web technologies (dojo, php)
  • separated the editing in to logical sections (sports, news, weather) and in logical order
  • combined the editing (left column) and web preview (right column) in to one single interface rather than across two browser windows – bringing the content to the staff member as opposed to them having to find it
  • built the transfer script in to the interface itself so staff would not need any command line training/access and could send as soon as the data was input.

The result cut editing times in half & allowed for multiple staff to take on the task with almost no learning curve.

Kids Activity Centre

This is a plugin-based javascript application for children to use on tablets.

Click here to try it out online.

Only a few plugins were written.  These are outlined below:

Puzzles
A drag & drop style picture matchup game, where a child would drag parts of an image over the top of the template.  Once complete, a sound matching the image would play allowing them to move on to the next image.

Piano
Working piano.  As the child presses each key, a xylophone sound is made.

Paint
HTML5 Canvas based paint application with different colours.

Scenes
Intended to allow the child to click on various areas and objects within the scene, to see it animate and hear the sound.  This plugin remains incomplete.

The entire application was developed to be packaged as a phonegap application, but works fine when accessed on its own.  It utilises the dojo framework.

Dangerous to Fish

A game written in full JavaScript & CSS.  It has a number of interesting features:

  • Relies heavily on sine waves for the waterline, swimming, bubbles, and jumping.
  • True health system reflected by the hearts and colour of the water.
  • Utilises only html canvas, no flash.
  • Audio events.
  • Borrows heavily from a number of previous fishtank & bubble simulations, such as my underh20 flash banner.

Click here to play the game.

Workshop

chart
A dynamic chart to see if your life is in order.  Utilising Chart.js, Dojo, along with a lot of raw Javascript and CSS trickery.  Split in to logical files to have the settings excluded from the code.
click here to view.

weather
Shows a snapshot of the local weather including rainfall, temperature, radar and wind speed.
click here to view.

html simulated flame effect
Written a long time ago, has been updated & optimised slightly. Could be converted to HTML5 to increase speed & appearance again.
click here to view.

actionscript fishtank
Originally written in javascript, this fishtank with heavy use of sine waves & intersecting circles was converted over to actionscript for a flash banner.
click here to view

tetris concept
Early attempt at writing tetris within javascript.
click here to view

inspiration machine
Displays random images created from text characters, to help the graphical mind get some ideas of where to start.
click here to view

webcam
PHP script to show the latest (named) image file no matter how deep within folders it is nested.  For webcams that create a new dated folder each day, in addition to dated names.

info
Anything that is freely available about your internet connection, browser, etc.
click here to view

random
Random generator for passwords, keys, uuids, etc.
click here to view

researching

links

Intranets & Remote Support

Previously to support clients there were a mix of different servers & different support technologies, controlled via a complex set of Shell Scripts which was only available to administrators. This was solved by streamlining all the different technologies in to one simple OpenVPN server based on common hardware with pfSense, with a simple graphically appealing interface for all staff to use from anywhere. This also opened up the ability for staff to work remotely, with the added benefit of drastically reduced technical issues & calls.

A second version was developed but never released, written from scratch in Dojo with mobile in mind. This had a few advantages:

  • More efficient in regards to loading speeds, as it only loads what it needs at any one time rather than everything.
  • Mobile-friendly interface, for technicians in the field to get instant feedback on the systems they are working on.
  • More informative at a glance with data arranged more logical to the workflow of support staff

GiST Linux

Custom linux distribution that started out as a heavily customised Slackware build, which transitioned over to a completely new Linux based on the Linux From Scratch project. Designed to run from CD and provide a number of different interfaces depending on the intended use:

  • an instant useable desktop with common applications
  • web-based touchscreen interface for car & multimedia use
  • server with web-based configuration area for firewall/proxy/file storage use

The system was able to be run “live” direct from a CD or usb key, or installed from the “live” environment to the systems harddrive.  Each instance could be pre-configured by way of a global config file to match the systems intended use (eg. Car PC installs would run the multimedia touchscreen interface by default).

GiST contained automatic build scripts (Bash) which built the entire system for a chosen architecture (i386 for compatibility with VIA Eden boards) automatically, resulting in a bootable ISO over a period of around 8 hours (circa 2006).  This built all facets of the system from the sources of the applications, including all libraries, chroot bootstrap environment, & highly optimised SMP kernel.

Features include:

  • Desktop Interface (Gnome)
    • Evolution
    • OpenOffice
    • Gimp
    • Inkscape
    • Firefox
    • VideoLan
    • Etc
  • Multimedia Interface
    • Internet connectivity via bluetooth enabled mobile phone
    • Digital TV
    • Media playback of all common formats
    • Weather & Clock display
    • Web browsing
    • TV guide
    • WIFI connectivity
    • On-screen volume controls
  • Server
    • iptables firewall
    • squid proxy
    • ppp / isdn / adsl internet connection manager with auto-redial
    • dns forwarding with cache
    • dyndns
    • samba / smbd fileshares
    • ftp server
    • printer sharing
    • DHCP/BootP/tftp server (allowing for instant diskless computer labs)

Development stalled once a shift to i686 architecture became increasingly necessary & other ‘easy’ distributions such as Smoothwall & SME Server became more mainstream.