Tutorial:Customizing widgets

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

This page contains tutorials showing how to create custom widgets, starting from the built-in Elementi widgets.

The tutorials are usually referencing operations performed within the XML Tree view, which is only included into Elementi X. If you don't have Elementi X, then you will need to modify the SVG / JavaScript code inside the file (for instance, using a text editor like Notepad++).

See also the "Elementi widget authoring" page for more details about how to transform a regular SVG file into a widget.

Data feed widgets

For several examples about how to customize the data feed widgets, see "Customizing data feed widgets" tutorial page.

Interactive widgets

Using a default media for "Click to Switch"

The "Click to Switch" interactive widget is using a text layer as default "page". The text layer can be edited from the "Switched Layer" property. To customize this widget to allow for a media layer to be used as default "page", follow these steps:

  1. Import the "Click to Switch" widget into your project and open it.
  2. Go the the XML Tree view.
  3. Open the second <title> element under the <defs> element. (i.e. the one having xml:id = jsonParams)
  4. Click on the CDATA in green. An editing box will open.
  5. Change the constructor to be "media" (i.e. "ctor": "media",).
  6. Delete this line: "textContent": "Switched Layer" and the comma sign on the preceding line.
  7. Press OK to save the changes.
  8. Go back to the "Properties" view and drag & drop a media on top of the "Switched Layer" media container.

Time 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:

  1. Import the "date_time" widget into your project and open it.
  2. Go the 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.
This page was last modified on 16 October 2015, at 15:37.