Creating customized widget for SignApps Express

*Please download the weather-sample.wgt in attachment.

This article is introducing how to create fields in SignApps Express customized widget.

1. Use config.xml to create fields in SignApps Express customized widget

Basically the config.xml is just for SignApps Express to draw the parameter on setting panel, those parameters will then pass into widget through SMIL, for example:

<seq repeatCount="indefinite">
  <ref dur="indefinite" src="weather-sample.wgt" region="FullScreen" systemComponent="http://www.w3.org/1999/xhtml" type="application/widget"/>
    <param name="cities" value="New York" />
    <param name="scale" value="F" />
    <param name="color" value="teal" />
    <param name="foreColor" value="white" />
    <param name="key" value="" />
    <param name="key-type" value="Free" />
    <param name="margin" value="0" />
    <param name="noTransform" value="true" />
  </ref>
 </seq>

2. Pass values to widget

Then HTML5 files such as index.html should reads it (e.g. in the example, it was read in weather.html). For example, this is how they read in the example in init() function:

function init()
 {
 var conf = adapi.getConfiguration() ;

 g_cities = getCities( conf ) ;
 g_key = conf.param[ "key" ];
 if (conf.param["key-type"])
 {
 g_isPremium = (conf.param["key-type"].localeCompare("Premium") == 0) ? true : false;
 }

 var margin = ( conf.param[ "margin" ] || adapi.widget.DefaultMargin) ;

 w = new adapi.widget( "wWeather", {
 layout: "pTt",
 margin: margin,
 backgroundColor: conf.param[ "color" ],
 foreColor: conf.param[ "foreColor" ],
 content: [
 { data: "", doLoad: getWeatherIcon },
 { data: "", doLoad: getTemperature },
 { data: "Updating...", doLoad: getDetail }
 ],
 update: {
 interval: 30 * 60,
 doUpdate: doUpdate
 },
 pages: {
 count: g_cities.length,
 interval: 11,
 transition: "SlideUpDown"
 },
 tLinesSetting: "noLineHeight",
 noTransform: (conf.param["noTransform"] == "true")
 } ) ;
 
 checkHeight();
 }

3. Save modified widget as default options in SignApps Express

After modifying the files, archive to .wgt again and save it in the folder: C:\Program Files (x86)\SignApps Express\AppData\content\widget

4. Check the fields on SignApps Express: