In January I was given the opportunity to design and build a new website to help colleagues in the retail store where I worked. This website serves as a demonstration on how I took my website and server knowledge to create a low cost solution to an issue I was confronted with.
This occurred when working in a retail store but can be re-purposed to suit other needs.
What I came up with was Canton TV, a website written in ASP.NET C# and hosted on my home server, it served as a tool for colleagues of varying technological skills create messages and upload images for display in video format on screen in a communal area of the store.
Read on for the full story…
The Premise
During a store meeting the subject of communication amongst staff was brought to light and management were tasked to find a way to address this. An idea suggested was to have a digital display in a high traffic staff area (Near the Clocking machines) that could show information on upcoming events, celebrate success and an update on current store performance.
The caveat was that it had to be implemented for as little cost as possible; thankfully the store stocked a line of television on special offer that had media playing capabilities. So this and a USB flash drive could be written off the stock records to facilitate this, but nothing more.
Not being able to acquire any more hardware, the next challenge was getting content onto the display. The process for creating content needed to be accessible for users with a varying range of IT capability, so converting PowerPoint slides to jpeg manually would be out of reach for many of the user base.
Another issue was in finding a device to create content, security restrictions to the in store computers prevented installing software, ruling out 3rd party software as an answer.
The Solution
Calling on my previous experience, I put forward a plan to create a website that would take the user input, format the information into a visually appealing display, and serve a file that can simply be transferred to the USB drive ready for display.
This satisfied a number of issues faced. Firstly a sympathetically laid out website will accessible and useable by anyone wanting to use it, plus the flexibility of designing a layout of a site means I can adjust it to suit the user’s needs.
A website also negates the need for client based software, circumventing the restrictions on the store computers and allowing all the machines access to the application. Plus with use of a USB adaptor, Android devices could also be used to create content for display.
The How
Already running a home server made hosting an easy and free choice, and after some research I discovered that my preferred asp.NET had the power to manipulate images using the System.Drawing library.
To make the length of time each image was on display content appropriate, I could gain control over the televisions slideshow settings by converting each image to a video file, specifying the time during content creation. For this I can employ FFMpeg, a utility that can be controlled via a command line, plus the ability to stitch audio into the output gave scope for added appeal to the messages displayed.
The Build
An alpha build was quickly built to establish the feasibility of the program, with most of the pain coming from finding a format the television would play in 1080p resolution, with the result being in .vob format.
With a simple site operational I spent time with a sample of the user base and monitor them using the site. This gave me chance to discover how others would use the site, any layout issues they encounter, what improvements I can make to aid the experience, and importantly, if they can break the site from exploiting any coding errors.
This one-on-one time proved invaluable, as I could make simple changes that made a lot to the user experience. These included setting the logo as a link to the home page, adding a quick links menu to the final step for improved productivity, and since the browser used was Internet Explorer 8, adding code to force the download dialog box to display, giving users a change to specify a download location.
With the amendments made, some more styling was added to make the site more inviting to the less computer centric user, security on the server end tightened and temporary file removed, leaving a fully fledged website behind.
The Pseudo
After experimenting with layouts and processes involved, I came up with the following steps for the user to create content, with what the code runs behind the scenes:
Step 1: Enter Content – User selects a section of the site and inputs information into a form, based on the section, can also choose elements such as background images, text size and audio options.
The page will send the inputted variables to the next page.
Step 2: Preview Image – A chance for the user to see a preview on the image, with a chance to return to the input page and make changes.
This page draws the image, adds the text from step one and stores it to disk. The saved image is then displayed on the page as a preview. Any variables needed for the next step are reloaded ready to be passed on. Depending on the section, any elements needed for conversion but do not change are hard coded and passed to the next page.
Step 3: Converting –A loading screen is displayed while the video is created.
On load the page calls FFMpeg with arguments to use the image created on the previous page, with variables either taken from the previous or carried over from the first. Getting FFMpeg to return results to .Net is difficult due to the amount of output it displays, so to save a lot of parsing the loading screen is a 7 second countdown resulting in redirecting to the next step.
Step 4: Preparing File – A similar loading screen appears, with minor updates to keep the user informed that the process is still running.
This page does the housekeeping, starting by reading the system time to a variable. The image from step 2 is deleted and the newly created video is moved to a download folder, and renamed with the system timestamp to give it a unique identifier.
Step 5: Download – A link to download the completed video, with instructions on how to save to a USB stick and display on the TV.
The timestamp variable is read and added to the download URL so it points to the correct file, plus a workaround added to force a download dialog box in IE.
The Result
I’m pleased to say that the communication screen has been widely accepted, with the greatest satisfaction coming from colleagues referring to information on the screen and submitting topics to be displayed in future.
Soon after its creation my time in the store came to an end, with 14 years’ service I was made redundant and left the company. With more time I would have loved to refine the site and add more features, at its final version I would have liked to add the following:
- YouTube integration, download corporate videos for display on the screen
- Token system to allow the site to be multiuser
- Topic and Dated filenames to allow easier management of SD card
- Add ambient music choices to all topics
- FFMpeg to add animation to images on conversion