Tag Archives: CSS

Menupatch, Free Digital Signage

An evolution of the Student Notices V2 project, completely re-written again to allow for multiple user accounts, media uploads, and an algorithmic digital signage system.  This was released for free to complement the commercial Signchro product.

Notable Features:

  • Fully responsive layout using Bootstrap CSS.
  • Paypal API integration to keep track of accounts and payments.
  • Dedicated Digital Signage interface, with complex weighted calculations to use all available display face in the most optimal manner.
  • Media optimisation on upload to multiple sizes, for optimal display and bandwidth usage throughout.
  • UUID based database and file storage.
  • DOM manipulation for Multi-use Modals.
  • MVC framework for ease of maintenance.

Social Network

This was a complex social network platform which was heavily based on nested reusable functions.  After 5 months of development it was discovered it was no longer what the client was after, and the project was ended.

  • API hooks with flickr, youtube/google
  • Advanced templating engine allowing on-the-fly modification of CSS rules
  • Real-time efficient multiple thumbnail engine from uploaded & linked media
  • Highly recursive branched functions
  • Customised tools were also developed for the staff.

Some of the technologies used were:

  • google / youtube api
  • flickr api
  • dojo
  • ajax
  • javascript
  • css
  • html5
  • php / codeigniter / MVC
  • mysql
  • ubuntu server
  • bash scripting
  • rsync backups

Due to the policies of the project manager, no screenshots are available.

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

FlexiFi v2

This was a huge product, designed to replace the FlexiFi Digital Media System.  There were a few key points considered when developing this software:

  • It must allow for almost limitless client configurations (display orientation & placement, showing menus and slideshows on one display, etc)
  • The client must be presented with a logical interface to easily modify and create content for their displays
  • Reduce the amount of network traffic needed for the editing interface to increase the speed of which remote support could be achieved, along with remote (off-site) editing for the client.
  • Keep the structure modular in order to easily add new objects in as clients requested them.
  • It must use the existing support systems (VPN) as close as possible to reduce complications of having to learn new systems for support staff.

It ended up being a commercially successful system replacing most FlexiFi systems while utilising the existing nationwide support VPN, and is still in use at many sites nationwide.

If you are using FlexiFi2 (or any digital signage system) please visit signagebank.com for pre-made stock slides and animations for your displays.