16 885
правок
SVG-Dashboards: различия между версиями
Нет описания правки
| Строка 393: | Строка 393: | ||
<!--T:79--> | <!--T:79--> | ||
Теперь остаётся загрузить рисунок в контроллер и проверить. | Теперь остаётся загрузить рисунок в контроллер и проверить. | ||
== Присвоить элементу цвет, хранящийся в топике == | |||
В CSS цвета представлены в шестнадцатеричном значении <code>#ffffff</code> или в rgb <code>rgb(255,255,255)</code>. | |||
Чтобы передать значение топика в css и указать, что это заливка, надо в разделе '''Стиль оформления''' выбрать топик с цветом в значение вписать <code>`;fill: ${val}`</code>. Обратите внимание на кавычки. | |||
Если вы хотите окрасить элемент на панели в цвет ленты, подключенной к диммеру WB-LED, то вам надо конвертировать значение в топике диммера в значение CSS, например, так: | |||
<syntaxhighlight lang="javascript"> | |||
defineVirtualDevice("hmi-demo", { | |||
title: {'en': 'HMI Demo', 'ru': 'Демопанель'} , | |||
cells: { | |||
rgb_css: { | |||
title: {'en': 'RGB CSS', 'ru': 'RGB CSS'}, | |||
type: "text", | |||
value: "", | |||
}, | |||
rgb_pallete: { | |||
title: {'en': 'RGB Palette', 'ru': 'RGB Палитра'}, | |||
type: "text", | |||
value: "", | |||
}, | |||
} | |||
}); | |||
defineRule({ | |||
whenChanged: "wb-led_1/RGB Palette", | |||
then: function (newValue, devName, cellName) { | |||
dev["hmi-demo"]["rgb_pallete"] = newValue; | |||
dev["hmi-demo"]["rgb_css"] = convertPalleteToRgbCSS(newValue); | |||
} | |||
}); | |||
function convertPalleteToRgbCSS(rgb_pallete){ | |||
var colorComponents = rgb_pallete.split(';') // получаем компоненты цвета r, g, b | |||
return "rgb("+colorComponents.join(',')+")"; // формируем строку для записи в css | |||
} | |||
</syntaxhighlight> | |||
== Полезные ссылки и материалы == <!--T:80--> | == Полезные ссылки и материалы == <!--T:80--> | ||