Analog Clock (sample Widget)

In this guide, you will build a Custom Widget, the “digital_clock”. This widget displays the player’s local time.

The widget’s HTML code

The following widget does the following:

  1. creates html svg tags for the clock’s frame and hands.
  2. reads the widget’s configuration and applies the required CSS for background color, fill color (clock’s face), stroke color (hands and clock frame color).
  3. gets and displays the time every second by rotating the clock hands.

here is the zip with the required code:

analog_clock.zip

The widget’s json schema

we need the declare a schema for the required configuration fields:

  1. bgcolor: a color picker field that defines the widget’s background color.
  2. fill: a color picker field that defines the widget’s font color.
  3. stroke: a color picker field that defines the widget’s font color.
  4. fields: a list defining the order of the above fields (json objects have no order)

analog clock schema.jsonExpand source

{
  "fields": [
    "bgcolor",
    "fill",
    "stroke"
  ],
  "schema": {
    "bgcolor": {
      "title": "Background Color",
      "type": "SpectrumColorPicker"
    },
    "fill": {
      "title": "Fill",
      "type": "SpectrumColorPicker"
    }
    "stroke": {
      "title": "Stroke",
      "type": "SpectrumColorPicker"
    }
  }
}

Widget creation

In the upload widget page we create a new widget, upload the attached zip file and enter the schema given above.

After that we can create analog clock widgets with the desired styling/configuration.

For any questions you may have, reach out and our dev team can help you out.