The MediaCast System

This is the login page for the SaaS based CMS/Portal component of the MediaCast System. Without a valid login it is not possible to access any features of this site. The entire platform is built in object oriented PHP 5.x on top of CentOS Linux with Apache 2.4.x delivering the front end, and MySQL 5.x underlying the back end. There are multiple components of the back end and automation systems written in PHP, Perl, and various shell scripts.

The portal application is built on a custom PHP web application framework of my design. The benefit is an expandable platform closely tied to the application's needs that is well insulated from the security risks and which maximizes code reuse between front end and back end components. I specified, prototyped, architected, and managed the production of the remainder of the application while personally making substantial contributions to the production code base along side the rest of the team.

The Admin channel supports groupings of users and displays as "alert groups" - any problem with any displays in the display group will result in an alert email transmission to all the users associated with the alert group.

The alert email notification subsystem is part of the automation platform that runs in the background on one of several utility servers. It is responsible for monitoring netwokr activity as well as disk utilization and other characteristics of the digital signage network. It supports autonomous mechanisms for both raising and cancelling alert status on individual displays as conditions change. Alert emails transmitted contain an informative message as to what caused the alert in order to draw an operator's attention to the situation.

The Admin channel of the portal provides numerous features for operators to customize their portal and digital signage network configuration. While important, most of the features grouped together under the Admin channel are used rather infrequently.

User management is one of the most important Admin channel features where operators may create and manage users authorized to log in and perform actions on their portal. The user management system includes a high granularity ACL type regulation for to determine what capabilities users get permission for. There is a role-based macro model where an operator can define a role such as "natwork manager" that contains all the ACL actions needed for a person in this role and which may then be applied to any number of users.

The Displays Channel is a major administrative resource for MediaCast portal users. Here is where all the digital signage media players are designated and listed for access. The directory of media players shows the current status of every digital sign on the network and highlights those that are in an alert state as a result of not checking in with the portal in time.

One of the characteristics of this view shows what the media player is doing now such as "now playing" some media asset. Because playlists and Multi-Zone Playlists support both mutltiple assets running back to back and several assets running in parallel, this information changes to simply show the name of the playlist or the Multi-Zone Playlist that is running.

The Groups directory of the displays channel shows the list of groupings that users have created for media players on their portal. Groups were introduced early in the MediaCast portall application in order to facilitate mass operation directives across many digital signs insead of one at a time. Over time display groups evolved somewhat to include a group type which is used to selectively enable certain features within the mediaCast system for groups of specific types. As an example, there is a "bookings" system that enables facilities such as hotels with conference rooms to create event schedules for the conference rooms. If the facility operator places a digital sign at the entrance to each conference room as well as one in the lobby, the lobby unit can host a display showing way-finding directions to the other two locations. The interface for managing the direction mapping is based on the digital signs at the conference rooms being of type "locations".

The homepage dashboard is the first seen upon logging in to the system. The dashboard is a customizeable personalization featuer that users may configure to their liking on the My Settings page.

The navigation bar in the top right was inspired by Apple's OSX "dockbar" and has icons that magnify and illuminate on rollover actions. The entire user interface is built on strict XHTML with CSS controlling all aspects of appearance, but a tabular design to ensure strict cross-browser conformity for the layout.

The application's major features are broken down into a number of "channels", each of which is accessible in the primary dockbar navigation.

The MediaCast portal features an online content creation tool called Composer that allows users to select from predefined templates and fill them up with custom text and rich media assets on their portal. It is possible to show live streams, static videos and images, Flash content, RSS, and more within the media containers of the Composer templates.

Originally designed as a multi-slide Power Point killer, the current incarnation of Composer is limited to a single slide per asset, however a simple flag would enable multi-slide support. The need for Composer stemmed from the desire of users to produce Power Point like content while the media player can only show real Power Point assets in full screen mode due to limitations of Microsoft's Active x control for Power POint Viewer - no Playlist or Multi-Zone PLaylist support.

There is some support for audio only formats including WMA and MP3; a playlist constructed of audio only assets may be placed within a hidden "background" zone of a multizone playlist and used as a background audio track for whatever visuals are running in the other zones. Creative usage of this capability is up to the end user, however the audio may contain a combination of music and narration.

The properties of a given media asset may be viewed by clicking the thumbnail in the directory. We use lightbox.js to darken the surrounding page and prevent stray clicks on the underlying page while an overlay appears on top of the directory with the asset information. With the variety of types of media assets that are supported by the system, the properties visible will differ depending on what type is being viewed.

The thumbnail generation system randomly extracts frames from video and Flash based assets. If the random thumbnail that was chosen is found to be an inadequate representation of the asset then the usr may request a new thumbnail for the asset on this page. There is a small assortment of toolbar actions at the top of the overlay that allow editing, copying, playback on a digital sign, and downloading to the local PC.

The Media Channel is one of the primary functional destinations of the portal. This is where customers upload, define, create, manage, and organize their media assets for their digital signage network. Here we see the directory of video assets that this customer has uploaded to their portal. The white links above the directory are handled as "tabs" to switch between views of what type of media asset directory is showing.

Each content asset is represented in the directory as a user selected title and thumbnail image. Thumbnails are created automatically using a combination of PHP functions, ffmpeg, and an external Windows application called Flash 2 Video Command Line to generate thumbnails from static images, videos, and Flash content. A custom scroll bar is used to prevent downloading thumbnails that are not yet scrolled within view.

External Video in a Zone (EVZ) as it is called enabled the MediaCast platform to incorporate external NTSC signals into the digital signage presentation whether composite video, S-video, or digital or analog television antenna/cable tuning. This capability depends upon supported hardware to be present on the digital sign's media player, in this case a TV tuner/input device from Hauppauge.

EVZ, though represented as if it were an asset in order to fit with users' normal interactions with the portal environment, is really just a set of configuration information that provides direction to the media player at the time of playback based on the user's selections. Placing an EVZ "asset" into a Multi-Zone Playlist results in directives to Windows Direct Show to display the external video source in the zone.

There are several places within the portal where a user needs to select a color to use for some type of asset. I produced a standardized color chooser component with RGB sliders, text entry override, and predefined "swatches" for commonly used colors. I planned a personalization extension that would allow the user to customize the swatches so that their custom color selections would be remembered.

Each time a selectable color is clicked, the color chooser appears showing the current color selection. When the user hits "OK" the color chooser closes, and JavaScript is used to pass the final selection back into the hidden form field that holds the active RGB value. I integrated several different third party slider controls before settling on the Tigra slider seen here which enjoyed the best reliability across browsers over time.

MediaCast provides for automatically generated "dynamic" content types where the user need not necessarily upload any files to the portal. When dynamic content is created, the user simply selects the type of content to create such as an RSS ticker or weather asset, and then make selections for all the customizeable aspects of the asset.

These special assets are handled as an internally supplied SWF file which at delivery time is transmitted to the digital signs with an XML file containing all the selections made by the user. Every type of dynamic content operates in this manner and, accordingly, every SWF is coded in-house with Actionscript libraries that seek out a specially named XML fiel containing the settings at the time that it is played on the digital sign.

MediaCast allows users to create QR codes to show on their digital signs. The CMS allows the user to enter a URL and the system automatically generates the QR code graphics using the PHP based open source QR code library. QR codes make it possible for the digital signage audience to take some aspect of their session/experience with them when they leave. Several provisions have been made to facilitate embedding of QR Codes into other types of media assets.

The MediaCast QR code system includes a unique tracking mechanism that I designed to modify the URL that the user enters such that every time the QR code is scanned and followed, the CMS captures a "hit" for access tracking.

Multi-Zone Playlists (MZPL) allow a user to subdivide their display real estate into multiple zones and then place different content in each of the zones. A zone can have a single media asset or a playlist of static or dynamic content assets as well as External Video in a Zone to run television content along side the digital signage promotions.

MZPL support stems from a set of XML templates that predefine options for subdividing the zones in such a way as to maximize reuse of preexisting assets with standard aspect ratios. This XML drives the user interface to use jquery.js for drag and drop media placement within the zones. It is also sent to media players along with the media assets to fill the screen with each of the zones operating independently.

Like that of regular playlists, the Multi-Zone PLaylist editor allows users to preview the MZPL they are editing as if it were to play on a display that they select to simulate playback on. This is a crucial step for users to take in order to verify that the content they have placed into the various zones is well matched to the aspect ratio of the zone - and that there are no conflicts with audio running in more than one zone at a time.

Again the principal component that enables the previewer is a piece of Flash/ActionScript, however the MZPL XML template is also used here to create an HTML representation of the zone layout described with a Flash previewer placed into each zone. There are several interesting things that can be done in custom content such as cross-zone inspection allowing an asset in one zone to see what is going on in another.

Dating back to the first version of MediaCast, playlist support entails a sorted list of individual media assets to play in the order assembled. The content producer selects which content to put into the playlist and in what order and, when played on a digital sign, all the assets are delivered and played back in the sequence specified.

This version of the playlist editor features a drag and drop interface that was custom built for the MediaCast portal. The first version was written with prototype.js, but later was swapped out for jquery.js which more features of the site were using. This is one of the most demanding aspects of the portal user interface to keep working reliably and predictably across multiple browsers.

The playlist editor features a preview capability that represents the playlist as it would appear on a digital sign. In order to be truly representative of how the playlist would run, the user needs to select a media player from their portal to simulate the playback on - this ensures the aspect ratio and other locality information is as it should be were this playlist to actually run on that display.

The playlist previewer is predominantly a smart piece of Flash/ActionScript which is fed by XML data from the portal to describe the playlist as well as cooked "preview quality" media assets to prevent downloading of full size high definition images and videos for purposes of previewing timing, sequencing, and appearance. The previewer has a subtle, one-pixel progress meter that runs per asset to visually cue asset transition points.

The Schedule channel is the user's front end to the Mediacast scheduling automation system. While the portal enables users to fully operate their digital signage network manually, without using the automation it would require a person to be logged into the portal and manually issuing commands every time they want the content to change.

Inspired by Google Maps infinite scrolling capability, the schedule view uses a custom click-drag scrolling view that slides left and right in time and a zoom feature. I personally designed and implemented this using all custom JavaScript code with an AJAX based "page" loader to bring pages into memory before they appear within view.

Schedule Ranges are the name I coined early on for what later came to be more commonly known as "Day Parts" in the digital signage industry. An element of the scheduling system, day parts represent a slice of time during a day that is expected to repeat on a daily, weekly, or monthly basis. Taking the time to organize a schedule into repeating pieces of day parts substantially reduces the amount of repetetive activity for customers that make extensive use of the scheduling features.

The directory of schedule ranges is partially dynamic in that it uses AJAX to turn the red/green X/check icons into active toggle that both show the current state of day of week inclusion but also enable change with a single click.

The Reports channel offers several types of report request forms to enable users to pull raw data about various activities on their portal. One of the most often used is the proof of play report which identifies how often and how many times given media assets have played on the digital signage network, useful for advertising accountability and billing. Report data is delivered as a formatted web page or CSV/XML raw data either paginated or fully downloadable.

The portal features a RESTful API on the back end that enables remote applications to apply the same degree of control as a user operating directly through the user interface in a browser. Report data retrieval is also possible through the API which facilitates integration with other digital signage or network platforms.

The Reports channel has a special report for QR Codes that tracks how many times a scanned QR Code is followed by a mobile device to the site it links to. It is not possible to capture the number of times a QR Code has been scanned by a device; only when the link inside the QR Code is followed to the destination site will it register trackable activity.

I devised a method of URL encoding such that the original URL an operator enters into the MediaCast QR Code asset is manipulated to redirect through a MediaTile owned domain which registers hits, captures mobile agent information, then redirects the user to the originally intended destination - all while showing a URL that looks enough like the original as not to draw suspicion.