Градусник

[Lamantur]

Для того чтобы добавить в приложение такой градусник нам понадобится несколько простых действий.

1. Скачать изображение градусника, либо нарисовать самостоятельно
   
2. Удалить из него заполненную шкалу, если такая имеется
   
   
3. Загрузить изображение в динамическую библиотеку
   
4. Создать пустой контейнер и вставить код html в поле "Данные"
   
5. Код:

   <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>
   
   
6. Отредактировать ширину и высоту шкалы (откалибровать градусник). Редактировать нужно <div id = 'termometr'> подстроить параметры ширины и высоты шкалы, и ее расположение (top, left). Для того чтобы термометр растягивался вместе с контейнером, и шкала не съезжала все параметры должны быть указаны только в %.
   
7. Что касается красного круга - то это svg рисунок, он векторный, а значит может растягиваться без потери качества, rx/ry - радиусы эллипса, а позицию ему задает его контейнер, его также нужно выставить на нужное место.
   
8. Подключить к действующему сигналу для изменения шкалы градусника
   
9. Код:

   function termoparameter(t,color){
    document.getElementById('termometr').style.background = color;
    document.getElementById('ellipce').style.fill = color;
    document.getElementById('temperature').style.height = 50 - t + '%';
}
   
   
10. Параметр t - это и есть значение температуры, color - это цвет шкалы и эллипса. Значение сигнала можно получить как через интерфейс редактора, так и с помощью baseSdkUtils.service.WNConnectorHelper.getSignal, или вы получаете температуру каким-либо еще способом.
    

Вы можете использовать изображение, прикрепленное к этому посту, тогда настраивать ничего не нужно, только загрузить изображение в библиотеку и вставить код.
   

Hello World!:

- Сообщений не найдено.

[Lamantur]

В дополнение еще один удобный способ создать градусник с помощью 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;
}

   

Hello World!:

- Сообщений не найдено.