Wednesday, July 11, 2012


We just received and installed two Spinetix modules and I felt compelled to write about them.
We have chosen Spinetix for the easiness of manipulation for the end user. However, I was surprised to find out that the core editing requires extensive time and abilities in programming, debugging and learning when  no documentation is provided.
I hope to have time to write about it more but here is an example. Spinetix, as any public display system, has a module for weather. By default, it links back to Yahoo Weather and requires a user to know the universal region code in order to get local conditions. However, it does not work for Montreal! If we dive into code we find two interesting files: one a java script and one an svg. The svg file is the one controlling the content and the visual aspect of the widget. The java file is used to decode the RSS feed that gives real time conditions.

This is Java file in question:

function custom_parser( response, records ) {
  var rss=parseXML( response ).documentElement;
  var channel=rss.firstElementChild;
  var day="today", map=[];
  for ( var x=channel.firstElementChild; x!=null; x=x.nextElementSibling ) {
    var name=x.localName;
    if ( name=="location" ) {
      map["city"]=x.getAttribute( "city" );
      map["region"]=x.getAttribute( "region" );
      map["country"]=x.getAttribute( "country" );
    } else if ( name=="units" ) {
      map["temperatureUnits"]=x.getAttribute( "temperature" );
      map["distanceUnits"]=x.getAttribute( "distance" );
      map["pressureUnits"]=x.getAttribute( "pressure" );
      map["speedUnits"]=x.getAttribute( "speed" );
    } else if ( name=="wind" ) {
      map["windChill"]=x.getAttribute( "chill" );
      map["windDirection"]=x.getAttribute( "direction" );
      map["windSpeed"]=x.getAttribute( "speed" );
    } else if ( name=="atmosphere" ) {
      map["humidity"]=x.getAttribute( "humidity" );
      map["visibility"]=x.getAttribute( "visibility" );
      map["pressure"]=x.getAttribute( "pressure" );
      map["rising"]=x.getAttribute( "rising" );
    } else if ( name=="astronomy" ) {
      map["sunrise"]=x.getAttribute( "sunrise" );
      map["sunset"]=x.getAttribute( "sunset" );
    } else if ( name=="item" ) {
      for ( var y=x.firstElementChild; y!=null; y=y.nextElementSibling ) {
        if ( name=="condition" ) {
          map["text"]=y.getAttribute( "text" );
          map["code"]=y.getAttribute( "code" );
          map["temperature"]=y.getAttribute( "temp" );
        } else if ( name=="forecast" ) {
          map[day+"_low"]=y.getAttribute( "low" );
          map[day+"_high"]=y.getAttribute( "high" );
          map[day+"_text"]=y.getAttribute( "text" );
          map[day+"_code"]=y.getAttribute( "code" );
          if ( day=="today" )
  remap( map, "code", "media", "title" );
  remap( map, "today_code", "today_media", "today_title" );
  remap( map, "tomorrow_code", "tomorrow_media", "tomorrow_title" );
  records.push( map );


function remap( map, key_var, media_var, title_var ) {
  if ( key_var in map ) {
    var key=map[key_var];
    if ( key in remap_table ) {

for ( var x=document.getElementById( "conditions" ).firstElementChild; x!=null; x=x.nextElementSibling ) {
  var id=null, title=null, media=null;
  for ( var y=x.firstElementChild; y!=null; y=y.nextElementSibling ) {
    var name=y.localName;
    if ( name=="id" )
    else if ( name=="image" )
      media=y.firstElementChild.getAttributeNS( "", "href" );
    else if ( name=="text" )
  if ( id!=null )
    remap_table[id] = [ media, title ];

For any one with some programming skills, this code looks more or less easy. However, we know that you cannot easily debug it locally and that it is used on the machine in tandem with the svg file. 
So the solution would be to get their editing software. Oh, wait! HMD Lite does not edit the scripts either. It only offers the options to see the results live without any debugging options. 
And the story gets more complicated because we want the weather to work in french! However, this widget does not offer localisation. Good luck with that!
Any ways, we(the tech team) are having lots of fun with our new "toy". One thing is sure: once we set it up, templates will never change no matter what!!!! 


  1. Hi,
    You may want to have a look at the support wiki ( There is quite a lot of information in there.
    There is also another example of weather display with more explanation at

    Concerning the weather for Montreal, you can use the following city code (see here for finding city code s CAXX0301

    For localization, inside the svg file, you can find a large table which map the weather condition code to a string and an icon. This can be modified so that French names are used.

    Alternatively, as yahoo has changed slightly its API for the weather feed you may do the following:
    - In the main svg file with the script for retrieving the weather, you need to find the line creating the URI, which should look like the following depending on the version you are using:
    rss_uri + "?p=" + encodeURIComponent( locations[i] ) + "&u=" + units
    - Replace the URI generation with the new yahoo API format (see
    rss_uri + "?w=" + encodeURIComponent( locations[i] ) + "&u=" + units
    - The you can enter the Montreal WOEID in the configuration of the weather (see here for instance to find WOEID ( 3534

    I hope this helps,

    1. Hi Julien,

      Thank you for your suggestions! We have found all this info but I haven't tested it yet.

      The main reason is simple: The person responsible for content management is quite busy and uses the basic approach: Prepare everything in PowerPoint-->Convert into video-> post using the web interface. The choice was made as to "no real time data gets to Spinetix" for now.
      Given this process, there is no point to continue and work with custom templates.
      We will come back to it when we see some interest.