Digital Clock (sample Widget)

This widget displays the player’s local time.

The widget’s HTML code

The following widget does the following:

  1. reads the widget’s configuration and applies the required CSS for background color, font color, font family, font style, font weight
  2. resizes text to fit the available window
  3. gets and displays time every second

We also include a “js” folder with the jQuery library for easier HTML DOM manipulation.

index.htmlExpand source

<!DOCTYPE html>
<html>
<head>
<title>DClock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
	background-color: transparent;
	font-family: tahoma;
	font-size: 90%;
	height: 100%;
	width: 100%;
}

* {
	margin: 0;
	padding: 0;
}

#clock {
	height: 100%;
	text-align: center;
}
</style>
<script src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

    /*function that starts the clock*/
	function startTime() {
    	/*get current time*/
		var today = new Date();
		/*get hours from time*/
		var h = today.getHours();
		/*get minutes from time*/
		var m = today.getMinutes();
		/*get seconds from time*/
		var s = today.getSeconds();
		m = checkTime(m);
		s = checkTime(s);
		$('#clock>span').text(h + ":" + m + ":" + s);

		if (window.t) {
			clearTimeout(window.t)
		}
		/*repeat after one second*/
		window.t = setTimeout(startTime, 1000);
	}
    /*function that appends a zero to single digit numbers*/
	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;
		}

		/*apply css based on configuration*/
		
		if ("bgcolor" in config) {
			var bgcolor = hexToRGBA(config.bgcolor)
			if (bgcolor) {
				$('body').css('background-color', bgcolor)

			}
		}
		if ("color" in config) {
			var color = hexToRGBA(config.color)
			if (color) {
				$('#clock').css('color', color)

			}
		}
		if ('fontfamily' in config) {
			$('#clock').css('font-family', config['fontfamily'])
		}

		if ('fontstyle' in config) {
			$('#clock').css('font-style', config['fontstyle'])
		}

		if ('fontweight' in config) {
			$('#clock').css('font-weight', config['fontweight'])
		}

	}

	function start_widget() {
		$('#clock').show()
		
		/*resize text*/
		$('#clock').textfill({
			maxFontPixels : $('#clock').height()
		})
		startTime()
	}

	function stop_widget() {

	}
	
	/*test function to test while developing*/
	function test_widget() {
		init_widget({
			bgcolor : "00000055",
			color : "ff0000cc",
			fontfamily : "arial",
			fontstyle : "normal",
			fontweight : "bold",
		})

		start_widget()

	}
	
	/*function that turns an rgba hex to rgba css*/
	function hexToRGBA(hex) {
		var r = parseInt(hex.substr(0, 2), 16);
		var g = parseInt(hex.substr(2, 2), 16);
		var b = parseInt(hex.substr(4, 2), 16);
		var a = Math.round((parseInt(hex.substr(6, 2), 16) / 255) * 100);

		a = a / 100

		var rgba = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
		return rgba;
	}
	
	/*function to resize text so that it fits to its container*/
	(function($) {
		$.fn.textfill = function(options) {
			var fontSize = options.maxFontPixels;
			var ourText = $('span:first', this);
			var maxHeight = $(this).height();
			var maxWidth = $(this).width();
			var textHeight;
			var textWidth;
			do {
				ourText.css('font-size', fontSize);
				textHeight = ourText.height();
				textWidth = ourText.width();
				fontSize = fontSize - 1;
			} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
			return this;
		}
	})(jQuery);
</script>
</head>

<body>

	<div id="clock" hidden>
		<span>00:00:00</span>
	</div>

</body>
</html>

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. color: a color picker field that defines the widget’s font color.
  3. fontfamily: a select field with the available fonts
  4. fontstyle: a select field with the available font styles (normal, italic …)
  5. fontweight: a select field with the available font weight (normal, bold …)
  6. fields: a list defining the order of the above fields (json objects have no order)

digital clock schema.jsonExpand source

{
  "fields": [
    "bgcolor",
    "color",
    "fontfamily",
    "fontstyle",
    "fontweight"
  ],
  "schema": {
    "bgcolor": {
      "title": "Background Color",
      "type": "SpectrumColorPicker"
    },
    "color": {
      "title": "Font Color",
      "type": "SpectrumColorPicker"
    },
    "fontfamily": {
      "options": [
        "Arial",
        "Courier",
        "Comic Sans MS",
        "Georgia",
        "Times New Roman",
        "Trebuchet MS",
        "Verdana"
      ],
      "title": "Font",
      "type": "Select",
      "validators": [
        "required"
      ]
    },
    "fontstyle": {
      "options": [
        "normal",
        "italic",
        "oblique"
      ],
      "title": "Font Style",
      "type": "Select",
      "validators": [
        "required"
      ]
    },
    "fontweight": {
      "options": [
        "normal",
        "bold",
        "bolder",
        "lighter"
      ],
      "title": "Font Style",
      "type": "Select",
      "validators": [
        "required"
      ]
    }
  }
}

Complete ZIP Package

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 digital clock widgets with the desired styling/configuration.

You can download the complete ZIP file for the Widget from here:

digital_clock.zip

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