Wednesday, July 11, 2012

Spinetix

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 ) {
        name=y.localName;
        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" )
            day="tomorrow";
        }
      }
    }
  }
  remap( map, "code", "media", "title" );
  remap( map, "today_code", "today_media", "today_title" );
  remap( map, "tomorrow_code", "tomorrow_media", "tomorrow_title" );
  records.push( map );
}


remap_table=[];


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


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" )
      id=y.textContent;
    else if ( name=="image" )
      media=y.firstElementChild.getAttributeNS( "http://www.w3.org/1999/xlink", "href" );
    else if ( name=="text" )
      title=y.textContent;
  }
  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!!!!