Customize an Elementi widget
From SpinetiX Support Wiki
Data feed widgets
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:
- Import the "date_time" widget into your project and open it.
- Go the XML Tree view.
- Open the
<spx:properties>element and then the
- Delete the
fontSizechild / attribute which is set to "ignore" (i.e.
fontSize = ignore). Or rename it to something like "fontSize_".
- Open the
<defs>element and then the
<title>element underneath (i.e. the one having
xml:id = jsonParams).
- Click on the CDATA in green. An editing box will open.
- Change the constructor to be "textArea" (i.e. from
- Press OK to save the changes.
- 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 ) );