Jeśli użytkownik aktywuje pole wyboru przeźroczystości, Widget zostaje wyrenderowany w buforze offscreen, a następnie skopiowany na ekran. Jest to skutkiem niskiego tempa odświeżania zawartości Widgetu. Weź to pod uwagę przy tworzeniu Widgetów.
Weź pod uwagę, że nie działa to z silnikiem renderującym „Chromium”. Musisz wyłączyć ten przełącznik, aby obsłużyć przeźroczystość.
Aby włączyć przeźroczystość tła w Twoim Widgetu, po prostu dodaj następujący CSS do kodu Widgetu.
CSS przeźroczystości
html, body {
background-color: transparent;
}
Dla Simple Clock, zmodyfikuj kod Widgetu w następujący sposób:
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>