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:RichTextWidget.zip For any questions, you may have, reach out and our development team can help you out.