pokk,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #D3D3D3;
}
</style>
</head>
<body>
<svg height="45" width="200" class="Hot">
<text class="title" x="0" y="15" fill="#00FF00"></text>
<text class="value" x="0" y="30" fill="#00FF00"></text>
<text class="status" x="0" y="45" fill="#00FF00"></text>
</svg>
<svg height="45" width="200" class="Cold">
<text class="title" x="0" y="15" fill="#00FF00"></text>
<text class="value" x="0" y="30" fill="#00FF00"></text>
<text class="status" x="0" y="45" fill="#00FF00"></text>
</svg>
<svg height="45" width="200" class="Pump">
<text class="title" x="0" y="15" fill="#00FF00"></text>
<text class="value" x="0" y="30" fill="#00FF00"></text>
<text class="status" x="0" y="45" fill="#00FF00"></text>
</svg>
<svg height="45" width="200" class="Fan">
<text class="title" x="0" y="15" fill="#00FF00"></text>
<text class="value" x="0" y="30" fill="#00FF00"></text>
<text class="status" x="0" y="45" fill="#00FF00"></text>
</svg>
<script>
function TextBlink(arr) {
var b = true;
return function() {
arr.forEach(function(el) {
el.style.visibility = b ? "hidden" : "visible";
});
b = !b
}
}
var timer;
var data = {
Hot: {
title: "Т горячая",
value: 120 + " \u2103",
status: "Авария",
blink: true,
color: "#FF0000"
},
Cold: {
title: "Т холодная",
value: 40 + " \u2103",
status: "Норма",
blink: false,
color: "#008000"
},
Pump: {
title: "Pump",
value: 0,
status: "",
blink: false,
color: "#000000"
},
Fan: {
title: "Вентилятор",
value: 0,
status: "",
blink: false,
color: "#000000"
}
}
function foo(data) {
var arr = [];
clearInterval(timer);
Object.keys(data).forEach(function(key) {
var el = document.querySelector('.' + key);
el.style.visibility = "visible";
['title', 'value', 'status'].forEach(function(item) {
var txt = el.querySelector('.' + item)
txt.textContent = data[key][item];
txt.setAttribute("fill", data[key]["color"]);
});
data[key]["blink"] && arr.push(el);
});
timer = setInterval(TextBlink(arr), 300);
}
foo(data)
data = {
Hot: {
title: "Т горячая",
value: 99 + " \u2103",
status: "Норма",
blink: false,
color: "#008000"
},
Cold: {
title: "Т холодная",
value: 70 + " \u2103",
status: "Норма",
blink: false,
color: "#FFFF00"
},
Pump: {
title: "Pump",
value: 0,
status: "",
blink: false,
color: "#000000"
},
Fan: {
title: "Вентилятор",
value: 0,
status: "",
blink: false,
color: "#000000"
}
}
window.setTimeout(function() {
foo(data) //пришли новые данные
}, 3000)
</script>
</body>
</html>