Table of Contents
This app displays the player’s local time.
The app’s HTML code
The following app does the following:
- reads the app’s configuration and applies the required CSS for background color, font color, font family, font style, font weight
- resizes text to fit the available window
- 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 app’s JSON Schema
we need the declare a schema for the required configuration fields:
- bgcolor: a color picker field that defines the widget’s background color.
- color: a color picker field that defines the widget’s font color.
- fontfamily: a select field with the available fonts
- fontstyle: a select field with the available font styles (normal, italic …)
- fontweight: a select field with the available font weight (normal, bold …)
- 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 app page we create a new app, upload the attached zip file and enter the schema given above. After that we can create digital clock app with the desired styling/configuration.
You can download the complete ZIP file for the App from here:
For any questions you may have, reach out and our development team can help you out.