4. Adding Transparency (Optional)

Last updated on February 11th, 2022

If the user activates the transparency checkbox, then the Widget is rendered in an offscreen buffer, and then copied to the screen. This results in a low refresh rate for the Widget contents. Keep that in mind when you create Widgets.

Keep in mind that this does NOT work with the “Chromium” web rendering engine. You need to have that toggle disabled in order to support transparency.

To enable background transparency in your Widget, just add the following CSS to your Widget code.

Transparency CSS

html, body {
        background-color: transparent;
}

For the Simple Clock, modify the Widget code as follows:

index.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	  html, body {
        background-color: transparent;
      }
</style>
<script>

var use_seconds = true;

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = 0
    m = checkTime(m);
	txtEl = document.getElementById('txt')

	if (use_seconds) {
		s = today.getSeconds();
    	s = checkTime(s);
		txtEl.innerHTML = h + ":" + m + ":" + s;
	}
	else {
    	txtEl.innerHTML = h + ":" + m;
	}
    window.t = setTimeout(startTime, 500);
}
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;
		}
		if("clock_font_size" in config){
			var pixels = config.clock_font_size + "px"
			document.getElementById('txt').style.fontSize = pixels;
		}
		if("use_seconds" in config){
			use_seconds = config.use_seconds;
		}
}

function start_widget(){
	startTime()
}

function stop_widget(){
	if(window.t){
		clearTimeout(window.t);
	}
}

</script>
</head>

<body>

<div id="txt" style="font-size: 48px"></div>

</body>
</html>