Customize an Elementi widget

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

This page contains examples of how to customize some of the 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

Note
See examples of how to customize a data-driven widget.

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 15 November 2017, at 14:08.