+- WINNUM Community (https://community.winnum.io)
+-- Сообщество Все сообщества (https://community.winnum.io/forumdisplay.php?fid=1)
+--- Сообщество Динамические приложения в WINNUM Platform (https://community.winnum.io/forumdisplay.php?fid=2)
+--- Темы: Градусник (/showthread.php?tid=17)
Градусник - Lamantur - 03-20-2024
Для того чтобы добавить в приложение такой градусник нам понадобится несколько простых действий.
- Скачать изображение градусника, либо нарисовать самостоятельно
- Удалить из него заполненную шкалу, если такая имеется
- Загрузить изображение в динамическую библиотеку
- Создать пустой контейнер и вставить код html в поле "Данные"
- Код:
<div style = 'background:url(/Winnum/resources/themes/current/images/app/ui/designer/media/24/Weather-Thermometer-Clipart-Black-and-White-1.png); width:100%; height:100%; background-size: 100% 100%'>
<div id = 'termometr' style = 'background:red; width:25%; height:61%;position: absolute;top:20%;left:36%'>
<div id = 'temperature' style = 'background:white;width:100%; height:50%;position: absolute;top:0%;left:0%'>
</div>
</div>
<div style = 'width:55%; height:25%;position: absolute;top:74%;left:21%'>
<svg width=100% height = 100%>
<ellipse id = "ellipce" fill = "red" cx=50% cy=50% rx=46% ry=41% />
</svg>
</div>
</div>
- Отредактировать ширину и высоту шкалы (откалибровать градусник). Редактировать нужно <div id = 'termometr'> подстроить параметры ширины и высоты шкалы, и ее расположение (top, left). Для того чтобы термометр растягивался вместе с контейнером, и шкала не съезжала все параметры должны быть указаны только в %.
- Что касается красного круга - то это svg рисунок, он векторный, а значит может растягиваться без потери качества, rx/ry - радиусы эллипса, а позицию ему задает его контейнер, его также нужно выставить на нужное место.
- Подключить к действующему сигналу для изменения шкалы градусника
- Код:
function termoparameter(t,color){
document.getElementById('termometr').style.background = color;
document.getElementById('ellipce').style.fill = color;
document.getElementById('temperature').style.height = 50 - t + '%';
}
- Параметр t - это и есть значение температуры, color - это цвет шкалы и эллипса. Значение сигнала можно получить как через интерфейс редактора, так и с помощью baseSdkUtils.service.WNConnectorHelper.getSignal, или вы получаете температуру каким-либо еще способом.
RE: Градусник - Lamantur - 03-21-2024
В дополнение еще один удобный способ создать градусник с помощью svg:
Для этого ничего не требуется подключать или скачивать, просто вставьте функцию в свой код и вызовите ее при получении сигнала, svg изображение занимает минимум места, при этом растягивается без потери качества
Функция генерирует полностью векторный термометр, указывается id контейнера и значение температуры(например из сигнала), в самом верху - пример вызова:
id = id контейнера, где будет создан термометр
value - значение температуры в градусах
Функция нормально работает при значениях от -50 до +50
Код:
function loadResourcesProcessor(){
generateTermometr("D6931C21-F0DB-415A-A5B4-61AD3212AD8C", 25);
}
function generateTermometr(id, value){
var str;
var strm;
for(var i=1;i<10;i++){
str = str + '<line x1=50% y1=' +i+ '0% x2=80% y2=' +i+ '0% style=\'stroke:red;stroke-width:1%\' /><text x=80% y=' +i+ '1% class=\'small\'>' +(5-i)+ '0</text>';
for(var j=1;j<5;j++){
strm = strm + '<line x1=50% y1=' +i+j*2+ '% x2=70% y2=' +i+j*2+ '% style=\'stroke:black;stroke-width:0.5%\' />';
str = str+strm;
}
}
str = str + '<rect id = \'temperature\' x=0% y ='+(50-value)+'% width=50% height='+(50+value)+'% fill=\'blue\' />';
var svg = "<svg width = 100% height = 100%>" +str+ "</svg>";
document.getElementById(id).innerHTML = svg;
}