Rich Text Widget (Sample Widget)

The widget’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 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. region_size: a resolution picker
  3. 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 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:

RichTextWidget.zip

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