2. Add Options to the Clock Widget

Posted by on October 16th, 2020

Most Widgets will require some form of configuration options. This configuration can be different for each instance of your Widget (that is, each time you actually use your Widget).

For our Simple Clock Widget, let’s say we want to add the following configuration options:

  • Clock Font Size : specify the exact font size in pixels (Integer)
  • Show Seconds : an option to show the seconds part of the clock or not (Boolean)

To add these options to your Widget, you need to do 3 things:

  1. Modify the Widget code to accept the configuration values.
  2. Add an init_widget(config) function that is called by the player when the widget has finished loading and passes the JSON configuration parameters.
  3. Provide a UI form specification, so that Yodeck will create a form for editing these options for your Widget instances.

Modify the Widget Code

Modify the Widget code as follows:

index.html

<!DOCTYPE html>
<html>
<head>
<script>

var use_seconds = true;
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = 0
    m = checkTime(m);
	txtEl = document.getElementById('txt')

	if(use_seconds){
		s = today.getSeconds();
    	s = checkTime(s);
		txtEl.innerHTML = h + ":" + m + ":" + s;
	}
	else{
    	txtEl.innerHTML = h + ":" + m;
	}
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function init_widget(config) {
		if (!config) {
			return;
		}
	
		if("clock_font_size" in config){
			var pixels = config.clock_font_size + "px"
			document.getElementById('txt').style.fontSize = pixels;
		}

		if("use_seconds" in config){
			use_seconds = config.use_seconds;
		}
		
		startTime()
		
}
</script>
</head>
<body>

<div id="txt" style="font-size: 48px"></div>

</body>
</html>

Provide a UI Configuration Form for your widget

To allow Yodeck to configure your Widget, you must provide a detailed specification of your configuration fields. To do this, you use the JSON Schema. You just paste the JSON Schema text to the text area.

For the 2 configuration values, we need now,

  • the “schema” value defines the editors for each of your fields,
  • the “fields” value is optional and defines the order the fields will appear in the form.

Here is the JSON Schema to use:

UI Configuration

{
  "fields": [
    "clock_font_size",
    "use_seconds"
  ],
  "schema": {
    "clock_font_size": {
      "editorAttrs": {
        "max": 999,
        "min": 1,
        "step": 1
      },
      "title": "Clock Font Size",
      "type": "Number",
      "validators": [
        "required",
        "number"
      ]
    },
    "use_seconds": {
      "title": "Use Seconds",
      "type": "Checkbox"
    }
  }
}