Replace params text status to icon

web_interface/src/wui/getJson.cgi

@@ -9,7 +9,7 @@ A1  = str(random.choice([0,1]))
 A2  = str(random.choice([0,1]))
 A3  = str(random.choice([0,1]))
 A4  = str(random.choice([0,1]))
-A5  = str(1)
+A5  = str(0)
 A6  = str(random.choice([0,1]))
 A7  = str(random.choice([0,1]))
 
@@ -28,8 +28,8 @@ JSON = {
   "bat_time_left": 230.0,
   "batsym": "Норма",
   "mode": "Профилактика сульфатации",
-  "alarm": bitmask,
+  "alarm": "33",
   "utc": "3.0",
   "netsettings_changed": "false"
 }
-print(json.dumps(JSON))
+print(json.dumps(JSON))

web_interface/src/wui/index.html

@@ -25,7 +25,7 @@
 <!--START-->
 <h1>Параметры</h1>
   <div class="panel panel-default">
-    <div class="panel-heading" id="sPower" style="color: #ff5050;"><span class="mark-almaj"></span> Источник питания (Выключение)</div>
+    <div class="panel-heading" id="sPower">Источник питания<div id="pstate_icons" style="float: right;"></div></div>
     <div class="panel-body">
       <table class="table tb-stat">
         <tr>
@@ -52,17 +52,17 @@
           <td>Текущий режим</td>
           <td ><span id="pmode"></span></td>
         </tr>
-        <tr class="hidden">
+<!--         <tr class="">
           <td>Текущее состояние</td>
           <td ><span id="pstate"></span></td>
-        </tr>
+        </tr> -->
         <tr class="hidden">
           <td>Индикация аварийных ситуаций</td>
           <td><span id="alarm"></span></td>
         </tr>
       </table>
     </div>
-    <div class="panel-heading" id="sBattery" style="color: #33cc00;"><span class="mark-ok"></span> Аккумуляторные батареи</div>
+    <div class="panel-heading" id="sBattery">Аккумуляторные батареи<div id="bstate_icons" style="float: right;"></div></div>
     <div class="panel-body">
       <table class="table tb-stat">
         <tr>
@@ -91,4 +91,4 @@
   dataFadeIn();
   paramsRefresh();
 </script>
-</html>
+</html>

web_interface/src/wui/main.js

@@ -56,6 +56,13 @@ function dataFadeIn(){
   }
 }
 
+//Useful Functions
+function checkDec(n){return/^[0-9]{1,64}$/.test(n);}
+
+//Decimal operations
+function Dec2Bin(n){if(!checkDec(n)||n<0)return 0;return n.toString(2);}
+
+
 // Alarm colors
 var ALARM_RED    = '#ff5050',
     ALARM_YELLOW = '#f0ad4e',
@@ -232,35 +239,6 @@ function ValidateAlphanumeric(uadd, z) {
   return false;
 }
 
-// function ValidateTemperature(minTemp, maxTemp) {
-//   var warn = document.createElement('li');
-//   warn.innerHTML = 'Верхняя граница температуры должна превышать нижнюю!';
-//   if (Number(minTemp.value) < Number(maxTemp.value)) {
-//     return true;
-//   }
-//   $('validation-box').appendChild(warn);
-//   return false;
-// }
-
-// function ValidateMinMax(elem, ID, name) {
-//   var warn = document.createElement('li');
-//   var minValue = elem.options.minimum;
-//   var maxValue = elem.options.maximum;
-//   var curValue = $(ID).childNodes[0].value;
-//   var boolVale = true;
-//   if (curValue < minValue) {
-//     warn.innerHTML = 'Значение ' + name + ' не может быть ниже ' + minValue;
-//     $('validation-box').appendChild(warn);
-//     boolVale = false;
-//   }
-//   else if (curValue > maxValue) {
-//     warn.innerHTML = 'Значение ' + name + ' не может быть выше ' + maxValue;
-//     $('validation-box').appendChild(warn);
-//     boolVale = false;
-//   } else { boolVale = true; }
-//   return boolVale;
-// }
-
 
 function submitForms() {
   if (confirm('Вы уверены что хотите применить настройки?')) {
@@ -277,57 +255,6 @@ function submitForms() {
   }
 }
 
-// var loadXMLDoc = function(){};
-// var pwdIsCorrect;
-// function loadXMLDoc(url, method, callback) {
-//   var xmlhttp;
-//   if (window.XMLHttpRequest) {
-//     xmlhttp = new XMLHttpRequest();
-//   } else {
-//     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
-//   }
-//   xmlhttp.open(method, url, true);
-//   var status;
-//   xmlhttp.onreadystatechange = function () {
-//     if (xmlhttp.readyState == 4) {
-//       status = xmlhttp.status;
-//       if (status == 200) {
-//         pwdIsCorrect = xmlhttp.responseText;
-//         if (typeof callback == 'function') {
-//           callback.apply(xmlhttp);
-//         }
-//       } else {
-//         console.log('Error');
-//       }
-//     }
-//   };
-//   xmlhttp.send();
-// }
-// function checkPWD(){
-//   var pass = $('pwd').value;
-//   var letter = /^[0-9a-zA-Z]+$/;
-//   var postPass;
-//   if (letter.test(pass)) {
-//     loadXMLDoc(
-//       'checkpwd.cgi?password='+pass,
-//       'POST',
-//       function() {
-//         postPass  = parseInt(this.responseText);
-//         if (postPass == 1) {
-//           $('checkUpdatePass').style.display = 'none';
-//           $('countdown').style.display = 'block';
-//           countdown();
-//         } else {
-//           alert('Пароль задан неправильно');
-//         }
-//       }
-//     );
-//   } else if (pass.length === 0){
-//     alert('Введите пароль');
-//   }else {
-//     alert('Пароль задан неправильно');
-//   }
-// }
 function checkPWD(){
   // $('checkUpdatePass').style.display = 'none';
   $('count-wrap').style.display = 'block';
@@ -508,55 +435,51 @@ function Alarm(bitmask, num) {
   return answ;
 }
 
-// function panelState(stateControl, panelID){
-//   var title = panelID.textContent;
-//   if (stateControl){
-//     panelID.style.color = ALARM_GREEN;
-//     panelID.innerHTML = '<span class="mark-ok"></span>' + title;
-//     return;
-//   } else {
-//     panelID.style.color = ALARM_RED;
-//     panelID.innerHTML = '<span class="mark-almaj"></span>' + title;
-//     return;
-//   }
-// }
 
+// var UPSstates = [
+//   {mark: '<span class="mark-ok"></span>', color: ALARM_GREEN}, // Normal
+//   {mark: '<span class="mark-almaj"></span>', color: ALARM_RED}, // Alarm
+//   {mark: '<span class="mark-almin"></span>', color: ALARM_YELLOW} // Standby
+// ];
 
-var states = {
-  alarm_shutdown: {mark: '<span class="mark-almaj"></span>', color: ALARM_RED },
-  alarm_standby: {mark: '<span class="mark-almin"></span>', color: ALARM_YELLOW },
-  shutdown: {},
-};
+// var BATstates = [
+//   {mark: '<span class="mark-ok"></span>', color: ALARM_GREEN}, // Normal
+//   {mark: '<span class="mark-almaj"></span>', color: ALARM_RED}, // Battery Low
+//   {mark: '<span class="mark-almin"></span>', color: ALARM_YELLOW} //  Test in progress
+// ];
 
-function getState(i) {
-  switch(i) {
-  case 0:
-    break;
-  case 1:
-    break;
-  default:
-    break;
-  }
-}
+// function setStateToPanel(state, text, panelID){
+//   panelID.style.color = state.color;
+//   panelID.innerHTML = state.mark + text;
+// }
+function setIcons(containerID, icnName) {
+  $(containerID).innerHTML ='';
 
-function setStateToPanel(state, panelID){
-  var title = panelID.textContent;
-  panelID.style.color = state.color;
-  panelID.innerHTML = state.mark + title;
+  var icons = typeof icnName === 'string' ? [icnName] : icnName;
+
+  for (var i = 0; i < icons.length; i++) {
+    var icnContainer = document.createElement('i');
+    icnContainer.innerHTML = Icons[icons[i]]['icn'];
+    icnContainer.style.paddingLeft = '10px';
+    icnContainer.title = Icons[icons[i]]['title'];
+    $(containerID).appendChild(icnContainer);
+  }
 }
 
 function paramsRefresh() {
   getJSON('getJson.cgi'+'?'+Math.random(), function (data) {
-    var ups_bypass =   Alarm(data.alarm, 5),
-        ups_alarm =    Alarm(data.alarm, 4) || Alarm(data.alarm, 7),
-        ups_standby =  Alarm(data.alarm, 3),
-        ups_shutdown = Alarm(data.alarm, 1),
-        bat_alarm =    Alarm(data.alarm, 1),
-        bat_low =      Alarm(data.alarm, 6),
-        bat_test =     Alarm(data.alarm, 2);
-
-    // panelState(ups_shutdown, $('sPower'));
-    // panelState(bat_alarm, $('sBattery'));
+    var alrm = Dec2Bin(data.alarm);
+    var pstate = [];
+    var bstate = [];
+    // var alrm = data.alarm;
+    var ups_bypass =   Alarm(alrm, 5),
+      ups_alarm =    Alarm(alrm, 4) || Alarm(alrm, 7),
+      ups_standby =  Alarm(alrm, 3),
+      ups_shutdown = Alarm(alrm, 1),
+
+      bat_alarm =    Alarm(alrm, 1),
+      bat_low =      Alarm(alrm, 6),
+      bat_test =     Alarm(alrm, 2);
     // PPS
     $('AC').innerHTML            = parseFloat(data.AC) + ' В';
     $('DC').innerHTML            = parseFloat(data.DC) + ' В';
@@ -564,14 +487,23 @@ function paramsRefresh() {
     $('out_freq').innerHTML      = parseFloat(data.out_freq) + ' Гц';
     $('pwr').innerHTML           = parseFloat(data.pwr) + ' %';
     $('pmode').innerHTML         = ups_bypass ? 'Шунтирование (Bypass)' : 'Буферизация (Boost or Buck)';
-    $('pstate').innerHTML        = (Alarm(data.alarm, 3) ? 'Норма' : 'Режим ожидания')
-    + (Alarm(data.alarm, 4) || Alarm(data.alarm, 7) ? ' | Авария ' : '')
-    + (Alarm(data.alarm, 1) ? ' | Выключение' : '');
+    // pstate = ('(') + (bat_test ? 'Норма' : 'Режим ожидания') + (ups_alarm ? ' | Авария ' : '') + (ups_shutdown ? ' | Выключение' : '') + (')');
+    bat_test ? pstate.push('normal') : pstate.push('clock');
+    ups_alarm ? pstate.push('exclamination') : null;
+    ups_shutdown ? pstate.push('shutdown') : '';
+
+    bat_low ? bstate.push('batteryLow') : bstate.push('normal');
+    // console.log(pstate);
+    setIcons('pstate_icons', pstate);
+    setIcons('bstate_icons', bstate);
+    // setStateToPanel(UPSstates[ups_alarm || ups_shutdown ? 1 : 0 ], 'Источник питания ' + pstate, $('sPower'));
+    // setStateToPanel(BATstates[bat_alarm], 'Аккумуляторные батареи', $('sBattery'));
+    // setStateToPanel(states.alarm_standby, $('sPower'));
     // ACB
     $('bat_cap').innerHTML       = parseFloat(data.bat_cap) + ' %';
     $('inner_temp').innerHTML    = parseFloat(data.inner_temp) + ' °C';
     $('bat_time_left').innerHTML = parseFloat(data.bat_time_left) + ' мин';
-    $('bstate').innerHTML        = Alarm(data.alarm, 1);
+    $('bstate').innerHTML        = bat_alarm;
     // State
     // $('alarm').innerHTML         = data.alarm;
     // General
@@ -1493,3 +1425,29 @@ DYN_WEB.Tabs = (function () {
   /* global-define */
 
 }((typeof window === 'undefined' ? {} : window)));
+
+
+// Icons
+
+var Icons = {
+  clock: {
+    icn: '<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="'+ ALARM_YELLOW +'"/></svg>',
+    title: 'Режим ожидания'
+  },
+  exclamination: {
+    icn: '<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1088 1248v224q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-224q0-26 19-45t45-19h256q26 0 45 19t19 45zm30-1056l-28 768q-1 26-20.5 45t-45.5 19h-256q-26 0-45.5-19t-20.5-45l-28-768q-1-26 17.5-45t44.5-19h320q26 0 44.5 19t17.5 45z" fill="'+ ALARM_RED +'"/></svg>',
+    title: 'Авария'
+  },
+  normal: {
+    icn: '<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="'+ ALARM_GREEN +'"/></svg>',
+    title: 'Норма'
+  },
+  shutdown: {
+    icn: '<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61-298-61-245-164-164-245-61-298q0-182 80.5-343t226.5-270q43-32 95.5-25t83.5 50q32 42 24.5 94.5t-49.5 84.5q-98 74-151.5 181t-53.5 228q0 104 40.5 198.5t109.5 163.5 163.5 109.5 198.5 40.5 198.5-40.5 163.5-109.5 109.5-163.5 40.5-198.5q0-121-53.5-228t-151.5-181q-42-32-49.5-84.5t24.5-94.5q31-43 84-50t95 25q146 109 226.5 270t80.5 343zm-640-768v640q0 52-38 90t-90 38-90-38-38-90v-640q0-52 38-90t90-38 90 38 38 90z" fill="'+ ALARM_RED +'"/></svg>',
+    title: 'Выключение'
+  },
+  batteryLow: {
+    icn: '<svg width="30" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1920 576q53 0 90.5 37.5t37.5 90.5v384q0 53-37.5 90.5t-90.5 37.5v160q0 66-47 113t-113 47h-1856q-66 0-113-47t-47-113v-960q0-66 47-113t113-47h1856q66 0 113 47t47 113v160zm0 512v-384h-128v-288q0-14-9-23t-23-9h-1856q-14 0-23 9t-9 23v960q0 14 9 23t23 9h1856q14 0 23-9t9-23v-288h128z" fill="'+ ALARM_RED +'"/></svg>',
+    title: 'Низкий уровень заряда'
+  }
+};