Customize an Elementi widget

Introduction

This page contains examples of how to customize widgets included in Elementi. They are usually referencing operations performed within the "XML Tree" view included into Elementi X. If you don't have Elementi X, then you need to modify the SVG / JavaScript code inside the file - for instance, using a text editor like Notepad++.

 

See also how to create an Elementi widget from a regular SVG file.

Data feed widgets

 

See full article on how to customize a data-driven widget.

Date time widget with different font sizes

The Date time widget automatically computes the font size to best fit the available space. This has the disadvantage that you cannot use different font sizes within the specified format. If this is needed, then you can edit the widget as following:

1. Import the "date_time" widget into your project and open it.
2. Go the XML Tree view.
3. Open the <spx:properties> element and then the <spx:json-text> element underneath.
4. Delete the fontSize child / attribute which is set to "ignore" (i.e. fontSize = ignore). Or rename it to something like "fontSize_".
5. Open the <defs> element and then the <title> element underneath (i.e. the one having xml:id = jsonParams).
6. Click on the CDATA in green. An editing box will open.
7. Change the constructor to be "textArea" (i.e. from "ctor": "headlineTextArea", to "ctor": "textArea",).
8. Press OK to save the changes.
9. Go back to the "Properties" view and change the "Text template" to an explicit format (for instance "EEEE, MMMM d, y hh:mm a") where you can set a specific font size for any date time pattern.

Pass properties through the query string

Let's say you want to use a widget multiple times, each time setting its properties differently. One way is to make copies of that widget and configure each accordingly. In some cases, the widget properties might need to be dynamically modified, so that would involve a lot of work creating countless copies of that widget...

A better solution would be to change the widget properties by passing those properties within the query string, like widget.svg?dur=15s (changing the duration to 15 seconds) or widget.svg?id=[[id]] (when the widget is used as a layer within a data-driven widget).

To accommodate this, change the widget code as following:

var uri = document.documentURI || ( document.location && document.location.href ) || ( window.location && window.location.href );

jsonParams = $.parseJSON( $('#jsonParams').text() );
$.extend( true, jsonParams, $.decodeURIQueryString( uri ) );

 

Find out more about JSignage API methods used in this example: $.parseJSON, $.extend and $.decodeURIQueryString.