If the user activates the transparency checkbox, then the App is rendered in an offscreen buffer, and then copied to the screen. This results in a low refresh rate for the App contents. Keep that in mind when you create Apps.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 App, just add the following CSS to your App code. Transparency CSS
html, body {
background-color: transparent;
}For the Simple Clock, modify the App 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>