Analog Clock

Table of Contents

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

The app’s HTML code

The following app does the following:

  1. creates html svg tags for the clock’s frame and hands.
  2. reads the app’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.

The app’s json schema

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

  1. bgcolor: a color picker field that defines the app’s background color.
  2. fill: a color picker field that defines the app’s font color.
  3. stroke: a color picker field that defines the app’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"
    }
  }
}

App creation

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

  • Download the ZIP file here.

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