Уменьшить размер кода и работа setInterval.
Добрый день, делаю запросы серверу он отвечает в формате json, (значение температуры и статус(норма/авария)).
Далее это отображаю в div (на картинке svg) И в случае аварии надо сделать мигание текста. Так как про объекты и классы мало что знаю код получился такой:
GetSettingTimeout3('GetVar.CGI',CYCLIC,function () {
var objJSON = eval('(' + this + ')');
var TempHot = document.getElementById("IdT_Hot");
var TextStatusT_Hot = document.getElementById("Id_StatusT_Hot");
//--------------------------------------------------------------------------------------
TempHot.innerHTML="Т горячая="+objJSON.T_Hot+" \u2103";
//--------------------------------------------------------------------------------------
clearInterval(TimerID_blink[0]);
if(objJSON.T_ST_Hot==0){ //Статус температуры
TempHot.setAttribute("fill",RGB_STATUS_NORM); //зеленый
TextStatusT_Hot.setAttribute("fill",RGB_STATUS_NORM); //зеленый
TextStatusT_Hot.innerHTML="Норма";
}
if(objJSON.T_ST_Hot==1){ //Статус температуры
TempHot.setAttribute("fill",RGB_STATUS_ADMONITION); //желтый
TextStatusT_Hot.setAttribute("fill",RGB_STATUS_ADMONITION); //желтый
TextStatusT_Hot.innerHTML="Норма";
}
if(objJSON.T_ST_Hot==2){ //Статус температуры
TimerID_blink[0]=setInterval(TextBlink,300);
}
}
var ModeBlink=0;
function TextBlink(){
var TempHot = document.getElementById("IdT_Hot");
var TextStatusT_Hot = document.getElementById("Id_StatusT_Hot");
if(ModeBlink==0){
//-------------------------------
TempHot.innerHTML="Т горячая="+"80"+" \u2103";
TempHot.setAttribute("fill",RGB_STATUS_ERROR); //Красный
TextStatusT_Hot.setAttribute("fill",RGB_STATUS_ERROR); //Красный
TextStatusT_Hot.innerHTML="Авария";
//-------------------------------
ModeBlink=1;
}else{
//-------------------------------
TempHot.innerHTML=""
TextStatusT_Hot.innerHTML="";
//-------------------------------
ModeBlink=0;
}
}
И тут возникает 3 вопроса: 1) Во что это можно завернуть это всё что бы применить к другим принимаемым данным. 2) Правильно ли я использую setInterval ? (не будет ли происходит накопление, и в следствии чего при изменении статуса аварии в норму мигание не остановится) 3) Как сделать асинхронную функцию TextBlink. Что бы можно было использовать в остальных авариях. И мигание происходило везде по своему таймеру. Ps: Всего параметров около 10, и для каждого городить такой код не вариант, так как сильно увеличится размер файла, что для меня очень критично. |
pokk,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<svg height="30" width="200">
<text id="IdT_Hot" x="0" y="15" fill="#00FF00"></text>
<text id="Id_StatusT_Hot" x="0" y="30" fill="#00FF00"></text>
</svg>
<script>
function TextBlink(arr) {
var b = true;
return function() {
arr.forEach(function(item) {
item.el.textContent = b ? item.text : "";
item.el.setAttribute("fill", RGB_STATUS_ERROR);
});
b = !b
}
}
var TempHot = document.getElementById("IdT_Hot");
var TextStatusT_Hot = document.getElementById("Id_StatusT_Hot");
var RGB_STATUS_ERROR = "#FF0000";
var arr = [{
el: TempHot,
text: "Т горячая=" + "80" + " \u2103"
}, {
el: TextStatusT_Hot,
text: "Авария"
}]
var fn = TextBlink(arr)
setInterval(fn, 300);
</script>
</body>
</html>
|
Цитата:
|
pokk,
if (objJSON.T_ST_Hot == 2) { //Статус температуры
arr.push({
el: TempHot,
text: "Т горячая=" + "80" + " \u2103"
}, {
el: TextStatusT_Hot,
text: "Авария"
})
}
|
Т.е имеете ввиду, что сначала пройтись по все параметрам найти те которые в аварии, из них собрать массив и запустить его на мигание?
А как быть с
if(objJSON.T_ST_Hot==0){...
if(objJSON.T_ST_Hot==1){...
if(objJSON.T_ST_Hot==2){...
Их можно куда нибудь завернуть в класс, объект и после применять его ко всем последующим параметрам? |
pokk,
параметры это тоже температура? какая структура objJSON и svg |
4 температуры пару статусов и пару других параметров (аналогичных температуре)
|
pokk,
не зная вашей структуры могу только предложить это
if (objJSON.T_ST_Hot == 2) arr.push({
el: TempHot,
text: "Т горячая=" + "80" + " \u2103"
}, {
el: TextStatusT_Hot,
text: "Авария"
});
else {
TempHot.setAttribute("fill", [RGB_STATUS_NORM, RGB_STATUS_ADMONITION][objJSON.T_ST_Hot]);
TextStatusT_Hot.setAttribute("fill", [RGB_STATUS_NORM, RGB_STATUS_ADMONITION][objJSON.T_ST_Hot]);
TextStatusT_Hot.innerHTML = "Норма"
};
|
Возможно я выбрал не очень удачную структуру objJSON
Она примерно такая(пишу по памяти с названием могу наврать)
{
T_Hot:XX, // Значение температуры
T_ST_Hot:X, // Статус
T_Cold:XX, //Значение
T_ST_Cold:XX, //Статус
T_Out:XX,
T_ST_Out:XX,
//----------------------
StatusPump1:X, // 0/1
StatusPump2:X, // 0/1
//----------------------
ModeFan:X // Режим 1,2,3,выкл
}
Изначально температуру хотел передавать в виде массива (значение,статус), но потом отказался от этой затеи ввиду того что можно напутать с порядком температуры в массиве и отобразить не туда. По этому каждому значению присвоил имя, что бы было сложее ошибиться, и теперь это вылазеет боком так как не нельзя(или можно?) прокрутить в цикле принимаемые значения. а svg, рисуется отдельно в Openoffice и потом руками добавляю id в нужные места для вывода. |
svg вывод показаний датчиков
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>
|
| Часовой пояс GMT +3, время: 07:07. |