Table of Contents
The app’s HTML code
We also include a “js” folder with the jQuery library for easier HTML DOM manipulation.
index.htmlExpand source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Digital Signage Widget</title>
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/ace.min.css" type="text/css">
<style type="text/css">
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
margin: 0px;
background-color: transparent;
}
table{
width:100%;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=s8d065emx2lbf29uhhbshz2eix0eyrpmcxycbklhilw9bjx9"></script>
<script type="text/javascript" charset="utf-8">
function init_widget(config) {
if (!config) {
console.log("no json configuration found");
return;
}
window.options = config;
if('bgcolor' in config){
var rgba = hexToRGBA(config.bgcolor)
if (rgba) {
//$('body').css('background-color', 'rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + opacity + ')')
$('body').css('background-color', rgba)
} else {
$('body').css('background-color', config.bgcolor);
}
}
//config.editor_width = 1469;
//config.editor_height= 232;
config.editor_height = config.text.height;
config.editor_width = config.text.width;
//if('region_size' in config && !config.region_size){
if(!('region_size' in config) || !config.region_size || config.region_size == 'false'){
config.editor_height = window.innerHeight;
config.editor_width = window.innerWidth;
}
var zoom = applyZoomFactor(config);
var text = config.text.value;
$('body').html('<div class="main" style="padding:10px; zoom: ' + zoom.zoomFactor + '%; width: ' + config.editor_width + 'px !important; height: ' + config.editor_height + 'px !important;">' + text + '</div>');
}
function start_widget() {
}
function stop_widget() {
}
function applyZoomFactor(config){
var editor_width = parseInt(config.editor_width);
var editor_height = parseInt(config.editor_height);
window.editor_height = editor_height;
window.editor_width = editor_width
var window_height = window.innerHeight;
var window_width = window.innerWidth;
var screen_width = window.screen.availWidth;
var screen_height = window.screen.availHeight;
var zoomFactorWidth = (window_width / editor_width) * 100
var zoomFactorHeight = (window_height / editor_height) * 100
var zoomFactor = 100;
if(zoomFactorHeight < zoomFactorWidth) zoomFactor = zoomFactorHeight;
else zoomFactor = zoomFactorWidth
var div_width = (zoomFactor/100) * editor_width;
return {zoomFactor:zoomFactor, div_width: div_width};
}
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //if filename is a external JavaScript file
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
} else if (filetype == "css") { //if filename is an external CSS file
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r : parseInt(result[1], 16),
g : parseInt(result[2], 16),
b : parseInt(result[3], 16)
} : null;
}
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);
console.log(a)
a= a/100
var rgba='rgba('+r+','+g+','+b+','+a+')'
return rgba;
}
function test_widget() {
init_widget({
bgcolor : '00000000',
text : ''
});
}
</script>
</head>
<body>
</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.
- region_size: a resolution picker
- text: information about the Rich text
rich text schema.jsonExpand source
{
"fields": [
"bgcolor",
"region_size",
"text"
],
"schema": {
"bgcolor": {
"onChange": {
"editor": "text"
},
"type": "SpectrumColorPicker",
"title": "Background color"
},
"region_size": {
"disabled": true,
"relation": "text",
"type": "resolution",
"help": "Scale editor to fit in the region. Resize the editor and manage the content. If toggled OFF editor will take the resolution of the region.",
"title": "Scale editor to fit"
},
"text": {
"relation_classname": ".note-editor",
"type": "summerNote",
"title": "Editor"
}
}
}
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 apps 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.