Новости
Пошуком в коді знайти все _121 і замінити на свій номер елемента щоб зберегти унікальність імен.
Об'ект.Свойства:
UPS.batCharge - Рівень заряду батареї у відсотках. Значення має бути від 0 до 100.
UPS.load - Рівень завантаження ДБЖ в процентах. Значення має бути від 0 до 100.
UPS.outVoltage - Вольти. Вимірювані стрілкою значення 210-240 (можна буде редагувати). цифровий індикатор - будь-яке значення.
UPS.frequency - Цифровий індикатор частоти струму. Корисний при роботі від генератора.
UPS.inTemp - Цифровий індикатор температури ДБЖ. Корисний для потужних ДБЖ при тривалій роботі від батарей.
UPS.alive - Стандартний ознака, що об'єкт ДБЖ оновлюється.
UPS.status - Комплексне значення статусів ДБЖ. Поки читається тільки перша цифра. 0-мережу, 1-батарея.
заточене під UPS Assistant Але переробити зовсім просто.
Елемент не реагує на поставлені йому ширину і висоту. Ці значення прописані в коді. <! [CDATA [... width: 110px; ...]]> задає ширину всього елемента. задає висоту. Всі елементи малюються в тезі. Потім use виводить їх на екран. У тегів use можна змінити координати датчиків.
Code: Select all
<Style> div.element_121 {border-radius: 10px; padding: 5px; width: 110px; background-color: DarkTurquoise; } </ Style> <script> var r, p, fx, fy, v, f, d; // Заряд батареї r = 20; p =% UPS.batCharge%; if (p> = 100) {p = 99.999; } F = (p / 50 - 0.5) * Math.PI; fx = Math.sin (f) * r + r; fy = Math.cos (f) * r; v = Math.floor (p / 50); d = "M-11,7 a" + r + "," + r + "0" + v + ", 0" + fx + "," + fy; document.getElementById ( 'e_121batsegment'). setAttribute ( 'd', d); // Напруга p =% UPS.outVoltage%; // p =% ThisComputer.textBoxTest%; document.getElementById ( 'e_121voltval'). innerHTML = Math.round (p); // встановимо обмеження, щоб стрілка не вийшла за межі if (p <210) {p = 210; } If (p> 240) {p = 240; } // Коректуємо значення кута. множник це ціна ділення. // Від'ємник як та крутилка внизу приладу для калібрування стрілки. p = (p-108.28) * 2.32; // переводимо градуси відхилення стрілки в радіани p = p * Math.PI / 180; // радіус стрілки. // Розрахунок координат верхньої точки. r = 35; // великий радіус fx = Math.cos (p) * r + 26; fy = Math.sin (p) * r + 35; // Розрахунок координати нижньої точки. r = 17; // малий радіус f = Math.cos (p) * r + 26; // збірка полігону стрілки d = (f-1) + ", 16" + fx + "," + fy + "" + (f + 1) + ", 16"; document.getElementById ( 'e_121voltst'). setAttribute ( 'points', d); // Частота document.getElementById ( 'e_121freqval'). InnerHTML = Math.round (% UPS.frequency%) + "Hz"; // Температура document.getElementById ( 'e_121tempval'). InnerHTML = Math.round (% UPS.inTemp%) + "℃"; // Режим роботи і статус d = ''; p = '% UPS.status%'; if (% UPS.alive% == 0) {d = '# e_121questico'; } Else {if (p.charAt (0) == 0) {d = '# e_121plugico'; } Else {d = '# e_121batico'; }} Document.getElementById ( 'e_121workmode'). SetAttribute ( 'xlink: href', d); </ Script> <svg width = "100%" height = "75px"> <defs> <! - Градієнт для потужності -> <linearGradient id = "e_121loadgradient" x1 = "0" y1 = "0" x2 = "100%" y2 = "0"> <! - spreadMethod = "repeat" -> <stop offset = "% UPS.load %%" stop-color = "Cornsilk" /> <stop offset = "0% "stop-color =" transparent "/> </ linearGradient> <! - Круговий індикатор рівня заряду АКБ -> <g id =" e_121sensor_akb "> <! - Кола і сегмент відсотка -> <circle r =" 26 "cx =" 9 "cy =" 7 "fill =" none "stroke =" white "stroke-width =" 2 "/> <circle r =" 14 "cx =" 9 "cy =" 7 "fill = "none" stroke = "white" stroke-width = "2" /> <path id = "e_121batsegment" d = "M1,1" fill = "none" stroke = "Cornsilk" stroke-width = "7" stroke- dasharray = "5.2 0.5" /> <! - іконка акумулятора -> <rect x = "1" y = "3" rx = "2" height = "10" width = "16" fill = "DodgerBlue" stroke = "Black" stroke-width = "0.8" /> <rect x = "4" y = "1" height = "2" width = "2" fill = "none" stroke = "Black" stroke-width = " 0.8 "/> <rect x =" 12.3 "y =" 1 " height = "2" width = "2" fill = "none" stroke = "Black" stroke-width = "0.8" /> <line x1 = "3" y1 = "7" x2 = "7" y2 = "7 "fill =" Black "stroke =" Black "stroke-width =" 1 "/> <line x1 =" 11 "y1 =" 7 "x2 =" 15 "y2 =" 7 "fill =" Black "stroke =" Black "stroke-width =" 1 "/> <line x1 =" 13 "y1 =" 5 "x2 =" 13 "y2 =" 9 "fill =" Black "stroke =" Black "stroke-width =" 1 " /> </ g> <! - Потужність -> <g id = "e_121sensor_power"> <path d = "M1,7 q0,3 3,3 h56 q3,0 3, -3 v-24 q0, - 3 -3, -3 l-56 19 q-3,1 -3,3 "fill =" none "stroke =" white "stroke-width =" 2 "stroke-linecap =" round "/> <path d = "M6,1 q-3,1 -3,3 q0,3 3,3 h 51 q3,0 3, -3 v-17 q0, -3 -3, -3 z" fill = "url (# e_121loadgradient) "stroke =" none "stroke-width =" 1 "/> <path d =" M55, -14 l-1,8 l3, -1 l-6,10 l1, -8 l-3,1 z "fill = "none" stroke = "black" stroke-width = "0.8" stroke-linecap = "round" /> </ g> <! - Вольти -> <g id = "e_121sensor_volt"> <path d = " M1,1 q25, -14 50,0 v26 q0,3 -3,3 h-32 v-12h20v12 h-32 q-3,0 -3, -3 z "fill =" none "stroke =" White "stroke -width = "2" stroke-linejoin = "round" /> <text x = "6" y = "21" f ill = "black" stroke = "none" font-size = "8px"> V </ text> <text x = "40" y = "21" fill = "black" stroke = "none" font-size = " 8px "> ~ </ text> <text id =" e_121voltval "x =" 26 "y =" 27 "fill =" black "stroke =" none "font-size =" 9px "word-spacing =" 1 "text -anchor = "middle" /> <path d = "M7,6 q18, -11 39,0" fill = "none" stroke = "Cornsilk" stroke-width = "7" stroke-dasharray = "13 1" / > <! - стрілка -> <polygon id = "e_121voltst" fill = "black" stroke = "black" stroke-width = "1" /> <! - налагоджувальні кола <circle r = "35" cx = "26" cy = "35" fill = "none" stroke = "red" stroke-width = "1" /> <path d = "M26,35 L6.93,5.56" fill = "none" stroke = "green "stroke-width =" 1 "/> <circle r =" 20 "cx =" 26 "cy =" 35 "fill =" none "stroke =" red "stroke-width =" 1 "/> -> < / g> <! - Герци -> <g id = "e_121sensor_hz"> <rect x = "1" y = "1" width = "26" height = "13" rx = "2" stroke-width = "2" fill = "none" stroke = "white" /> <text id = "e_121freqval" x = "3" y = "11" fill = "black" stroke = "none" font-size = "9px" / > </ g> <! - Температура -> <g id = "e_121sensor_temp" > <Rect x = "1" y = "1" width = "26" height = "13" rx = "2" stroke-width = "2" fill = "none" stroke = "white" /> <text id = "e_121tempval" x = "3" y = "11" fill = "black" stroke = "none" font-size = "9px" /> </ g> <! - Батарейка -> <g id = " e_121batico "> <rect x =" 1 "y =" 4 "width =" 10 "height =" 17 "rx =" 2 "stroke-width =" 2 "fill =" none "stroke =" white "/> < rect x = "3" y = "6" width = "6" height = "13" fill = "white" stroke = "none" /> <rect x = "4" y = "1" width = "4" height = "3" rx = "1" stroke-width = "2" fill = "white" stroke = "none" /> </ g> <! - Вилка -> <g id = "e_121plugico"> < path d = "M1,8 v2 h2 v5 q1, -2 2,0 v5 h4 v5 q1, -2 2,0 v5 h2 v2 z" fill = "white" stroke = "white" stroke- width = "0.5" /> <path d = "M2,9.4 h10 v2 q0,4 -4,4 v6 h-2 v6 q-4,0 -4, -4 v2 z" fill = "white "stroke =" white "stroke-width =" 0.5 "/> </ g> <! - н / д -> <g id =" e_121questico "> <text x =" 4 "y =" 2 "fill = "white" stroke = "none" font-size = "12px" writing-mode = "tb"> N / A </ text> </ g> </ defs> <use xlink: href = "# e_121sensor_akb" x = "18" y = "20" /> <use xlink: href = "# e_121sensor_po wer "x =" 15 "y =" 63 "/> <use xlink: href =" # e_121sensor_volt "x =" 58 "y =" 7 "/> <use xlink: href =" # e_121sensor_hz "x =" 82 "y =" 41 "/> <use xlink: href =" # e_121sensor_temp "x =" 82 "y =" 59 "/> <use id =" e_121workmode "xlink: href =" # e_121questico "x =" 1 " y = "52" /> </ svg> Подальша розробка:1. Колір фону буде дублювати статус мережу / батарея / помилка / неживої.
2. Почервоніння шкали приладів при виході за допустимі свідчення.
Будуть питання по коду або пропозиції, пишіть!
You do not have the required permissions to view the files attached to this post.
Last edited by Bagir on Sat Mar 07, 2015 7:36 pm, edited 1 time in total.