Перейти к содержанию
Переключить боковую панель
Поиск
Поиск
Пользовательские ссылки
русский
Создать учётную запись
Персональные инструменты
expanded
collapsed
Создать учётную запись
Войти
Pages for logged out editors
узнать больше
Навигация
Вернуться на главный сайт:
wirenboard.com
Навигация
Заглавная страница
Читателям
Как внести правку или задать вопрос
Справочник по синтаксису
Инструменты
Служебные страницы
Версия для печати
Пространства имён
Перевести
Варианты
expanded
collapsed
Просмотры
Статистика по языкам
Статистика группы сообщений
Экспорт
Ещё
expanded
collapsed
Экспорт переводов
Параметры
Группа
1-Wire
ADC
ADC:Измерение сопротивлений - технические детали
Backup power for Wiren Board devices
Bluetooth
BMP085
Buzzer
CAN
CMUX
CODESYS
Consumer IR
Controller hardware revisions
CryptodevATECCx08 Auth
DDM845R
Device Tree
DI
Disassembling the controller case
Documentation
Fast Modbus
Gas sensor WB-MSGR
GPIO
Hardware Overview rev. 2.8-rus
Hardware Watchdog Disable
How To Build Linux Kernel
I/O Mapping Matrix
ILI9341
IMX233-OLinuXino-MICRO
Includes. Relay tuning
Inspektor SCADA
IntraHouse
IO modules
LAN9514
MediaWiki:Sitenotice
MOD-MRF24J40
Modbus
Modbus RTU/TCP Slave
Modbus-client
Modem-stretch
MQTT KNX V.0.1.x
NFC
Node-RED
Notification module
NRF24L01
Pin pull-up
Power Meter WB-MAP12H
Power Meter WB-MAP12H Measuring Parameters
Power Meter WB-MAP12H Measuring Registers
Power over Ethernet
Reg
Relay Module Modbus Management
RS-485
RS-485: Wiring and Connection
RS-485:Configuration via Web Interface
Rule Examples
SC16IS752
Sensors Modbus Management
Serial Port
SIM5300E
SIM68V
SIM900R
SNMP
SSH
SVG-Dashboards
TFT01-2.2SP
UART Communication Settings
UEXT-разъемы
Using Wiren Board with peripheral devices
Using Wiren Board with pulsed output devices
View controller files from your computer
Watchdog
WB 4: Errata
WB 5: Errata
WB 6: Errata
WB 7: Errata
WB AC rev. E1.0
WB AC rev. E2.0
WB Dimmers Modbus Registers Map
WB Modbus Devices Firmware Update
WB SH 3.5: Errata
WB SH 3.5: GPIO List
WB SH 3.5: UEXT2
WB-IMX233-CORE
WB-M1W2 1-Wire to Modbus Temperature Measurement Module
WB-MAI2-mini/CC 4-20mA Modbus Analog Inputs
WB-MAO4 0-10V Modbus Analog Outputs
WB-MCM16 Модуль счетных входов 16-канальный
WB-MCM8 Modbus Count Inputs
WB-MGE Modbus-Ethernet Interface Converter
WB-MIO Modbus Interface Converters
WB-MIO-Modbus-Registers
WB-MIR v1 - Modbus IR Remote Control
WB-MIR v2 - Modbus IR Remote Control
Wb-mqtt-db-cli
Wb-mqtt-serial driver
Wb-mqtt-serial templates
WB-MR3xV and WB-MR6xV Modbus Relay Modules
WB-MR6F Modbus Relay Module
WB-MR: Errata
WB-MRM2-mini Modbus Relay Modules
WB-MRPS6 Modbus Relay Modules
WB-MRWL3 Modbus Relay Modules
WB-MSW v.3 Modbus Sensor
WB-MSW v.4 Modbus Sensor
WB-MSWv 3 registers
WB-MSx Consumer IR Manual
WB-UPS Backup power supply for DIN rails
WB5 root password recovery
WB6 root password recovery
WBC-4G v.2
WBE-DI-DR-3
WBE-MICROSD Extension Module
WBE2-AO-10V-2 Analog Outputs 0-10V Extension Module
WBE2-DI-DR-3 Dry Contact Inputs Extension Module
WBE2-DO-OC-2 Open Collector Outputs Extension Module
WBE2-DO-R6C-1 Relay Extension Module
WBE2-DO-SSR-2 Dry Contact Outputs Extension Module
WBE2-I-1-WIRE 1-Wire Extension Module
WBE2-I-CAN-ISO CAN Extension Module
WBE2-I-KNX KNX Extension Module
WBE2-I-KNX: Errata
WBE2-I-RS232 RS-232 Extension Module
WBE2-I-RS485-ISO RS485 Extension Module
WBE2R-R-GPS GPS/GLONASS Extension Module
WBE2R-R-LORA v.1 Extension Module
WBE2R-R-ZIGBEE v.1 ZigBee Extension Module
WBE2S-MICROSD MicroSD Extension Module
Wbincludes:1-Wire Network
Wbincludes:1-Wire Warning
Wbincludes:Configuration MOD
Wbincludes:Configuration WBC
Wbincludes:GSM Modem Default Connection Parameters
Wbincludes:How to enter
Wbincludes:Installation MOD WBE2
Wbincludes:Installation MOD WBE2R
Wbincludes:Installing Software In Console
Wbincludes:Mount MOD
Wbincludes:Mount Relay
Wbincludes:Peripherals
Wbincludes:Relay Purpose2
Wbincludes:Revision
Wbincludes:Setup MOD
Wbincludes:WB-MSW v.3 Body Painting
Wbincludes:WB-MSW v.3 Functions
Wbincludes:WB-MSW v.4 Difference v.3
Wbincludes:WBC-4G Info
Wbincludes:WBC-4G Specifications
Wbincludes:WebUI Change Access Level
WBIO-AI-DCM-4 I/O Module
WBIO-AI-DV-12 Analog Inputs
WBIO-AI-DV-12/4-20mA Analog Inputs
WBIO-AO-10V-8 Analog Outputs 0-10V
WBIO-DI-DR-14 I/O Module
WBIO-DI-DR-16 I/O Module
WBIO-DI-DR-8 I/O Module
WBIO-DI-HVD-16 16-Channel 230V Detector Module
WBIO-DI-HVD-8 8-Channel 230V Detector Module
WBIO-DI-WD-14 Discrete Inputs
WBIO-DO-HS-8 Discrete Outputs
WBIO-DO-R10A-8 Relay Module
WBIO-DO-R10R-4 Relay Module For Roller Shutter
WBIO-DO-R1G-16 1A Relay Module
WBIO-DO-SSR-8 Discrete Outputs Dry Contact
WBMZ-BATTERY - модуль резервного питания
WBMZ2-BATTERY Backup Power Module
Wellpro
Wi-Fi Old
Wiren Board 2.8. Исходные файлы
Wiren Board 4: GPIO List
Wiren Board 4: Модуль расширения RS-232
Wiren Board 4:Аппаратная часть
Wiren Board 4:Первое включение
Wiren Board 5.1: GPIO List
Wiren Board 5.5: GPIO List
Wiren Board 5.8:Список GPIO
Wiren Board 5: Build an image to download in USB Mass-Storage mode
Wiren Board 5: GPIO List
Wiren Board 5: Восстановление прошивки
Wiren Board 5: Модуль расширения 1-Wire
Wiren Board 5: Модуль расширения ADC
Wiren Board 5: Модуль расширения GPS/Glonass
Wiren Board 5: Модуль расширения RS-232 (WBE-I-RS232)
Wiren Board 5: Модуль расширения RS485-ISO
Wiren Board 5:Аппаратная часть
Wiren Board 5:Первое включение
Wiren Board 5:Схемотехника
Wiren Board 6.1: GPIO List
Wiren Board 6.2: Peripherals
Wiren Board 6.7: Peripherals
Wiren Board 6: Hardware
Wiren Board 6: WBE2R-R-GPS GPS/GLONASS Extension Module:NTPD PPS Setup
Wiren Board 6: Модуль расширения 433MHz (WBE2S-R-433MHZ)
Wiren Board Device Modbus Address
Wiren Board Devices Modbus Management
Wiren Board NETMON-1
Wiren Board NETMON-1: GPIO List
Wiren Board NETMON-2
Wiren Board Smart Home 3.5
Wiren Board Smart Home rev. 3.5
Wiren Board Software
Wiren Board Web Interface
Wiren Board Web Interface 1.0
Wiren Board: Extension Modules
Wirenboard6:InstallingOnTheRemoteSite
Z-Wave
Zabbix
Датчик SHT1x
Движок правил wb-rules 1.7
Доступ к порту RS-485 контроллера Wiren Board с компьютера
Как разрабатывать ПО для Wiren Board
Консоль
Модули расширения
Модуль ввода-вывода с TTL-уровнями (WBIO-DIO-TTL-8)
Модуль выходов "Открытый коллектор" WBE-DO-OС-2
Модуль выходов "сухой контакт" (оптореле) WBE-DO-SSR-2
Модуль наличия напряжения (WBIO-DI-LVD-16)
Модуль наличия напряжения (WBIO-DI-LVD-8)
Модуль расширения CAN (WBE-I-CAN-ISO)
Модуль расширения CAN (WBE-I-CAN-ISO) wb6
Модуль расширения DAC (WBE-AO-10V-2)
Модуль расширения KNX (WBE-I-KNX)
Модуль релейных выходов 3A (WBIO-DO-R3A-8)
Модуль релейных выходов WBE-DO-R6C-1
ПО МКА-3
Первое включение Wiren Board
Первое включение Wiren Board Smart Home
Периферийные устройства
Периферийные устройства с интерфейсом RS-485 серии WB-xxxx
Питание USB-портов
Получение точного времени через GPS/Glonass
Потеря файлов при обновлении ПО
Работа с GPIO
Сounters Pulsar
Сборка образа
Сборка образов прошивки
Создание microSD-карты с образом
Список GPIO
Стандартный образ ФС
Уникальные идентификаторы
Управление низковольтной нагрузкой
Устарело: низкоуровневая работа с ADC в Wiren Board 2, 3 и 4
Участник:EvgenyBoger/CT309-test
Участник:EvgenyBoger/test2
Участник:EvgenyBoger/testtrans
Участник:EvgenyBoger/testtrans2
Участник:EvgenyBoger/Wbincludes:Revision
Шаблон:Node-RED Installing plugin
Шаблон:Testtrans3
Язык
aa - Afar
ab - Abkhazian
abs - Ambonese Malay
ace - Achinese
ady - Adyghe
ady-cyrl - Adyghe (Cyrillic script)
aeb - Tunisian Arabic
aeb-arab - Tunisian Arabic (Arabic script)
aeb-latn - Tunisian Arabic (Latin script)
af - Afrikaans
ak - Akan
aln - Gheg Albanian
alt - Southern Altai
am - Amharic
ami - Amis
an - Aragonese
ang - Old English
anp - Angika
ar - Arabic
arc - Aramaic
arn - Mapuche
arq - Algerian Arabic
ary - Moroccan Arabic
arz - Egyptian Arabic
as - Assamese
ase - American Sign Language
ast - Asturian
atj - Atikamekw
av - Avaric
avk - Kotava
awa - Awadhi
ay - Aymara
az - Azerbaijani
azb - South Azerbaijani
ba - Bashkir
ban - Balinese
ban-bali - ᬩᬲᬩᬮᬶ
bar - Bavarian
bbc - Batak Toba
bbc-latn - Batak Toba (Latin script)
bcc - Southern Balochi
bci - wawle
bcl - Central Bikol
be - Belarusian
be-tarask - Belarusian (Taraškievica orthography)
bg - Bulgarian
bgn - Western Balochi
bh - Bhojpuri
bho - Bhojpuri
bi - Bislama
bjn - Banjar
bm - Bambara
bn - Bangla
bo - Tibetan
bpy - Bishnupriya
bqi - Bakhtiari
br - Breton
brh - Brahui
bs - Bosnian
btm - Batak Mandailing
bto - Iriga Bicolano
bug - Buginese
bxr - Russia Buriat
ca - Catalan
cbk-zam - Chavacano
cdo - Min Dong Chinese
ce - Chechen
ceb - Cebuano
ch - Chamorro
cho - Choctaw
chr - Cherokee
chy - Cheyenne
ckb - Central Kurdish
co - Corsican
cps - Capiznon
cr - Cree
crh - Crimean Turkish
crh-cyrl - Crimean Tatar (Cyrillic script)
crh-latn - Crimean Tatar (Latin script)
cs - Czech
csb - Kashubian
cu - Church Slavic
cv - Chuvash
cy - Welsh
da - Danish
dag - Dagbani
de - German
de-at - Austrian German
de-ch - Swiss High German
de-formal - German (formal address)
din - Dinka
diq - Zazaki
dsb - Lower Sorbian
dtp - Central Dusun
dty - Doteli
dv - Divehi
dz - Dzongkha
ee - Ewe
egl - Emilian
el - Greek
eml - Emiliano-Romagnolo
en - English
en-ca - Canadian English
en-gb - British English
eo - Esperanto
es - Spanish
es-419 - Latin American Spanish
es-formal - español (formal)
et - Estonian
eu - Basque
ext - Extremaduran
fa - Persian
ff - Fulah
fi - Finnish
fit - Tornedalen Finnish
fj - Fijian
fo - Faroese
fr - French
frc - Cajun French
frp - Arpitan
frr - Northern Frisian
fur - Friulian
fy - Western Frisian
ga - Irish
gag - Gagauz
gan - Gan Chinese
gan-hans - Gan (Simplified)
gan-hant - Gan (Traditional)
gcr - Guianan Creole
gd - Scottish Gaelic
gl - Galician
glk - Gilaki
gn - Guarani
gom - Goan Konkani
gom-deva - Goan Konkani (Devanagari script)
gom-latn - Goan Konkani (Latin script)
gor - Gorontalo
got - Gothic
grc - Ancient Greek
gsw - Swiss German
gu - Gujarati
guc - Wayuu
guw - gungbe
gv - Manx
ha - Hausa
hak - Hakka Chinese
haw - Hawaiian
he - Hebrew
hi - Hindi
hif - Fiji Hindi
hif-latn - Fiji Hindi (Latin script)
hil - Hiligaynon
ho - Hiri Motu
hr - Croatian
hrx - Hunsrik
hsb - Upper Sorbian
ht - Haitian Creole
hu - Hungarian
hu-formal - magyar (formal)
hy - Armenian
hyw - Western Armenian
hz - Herero
ia - Interlingua
id - Indonesian
ie - Interlingue
ig - Igbo
ii - Sichuan Yi
ik - Inupiaq
ike-cans - Eastern Canadian (Aboriginal syllabics)
ike-latn - Eastern Canadian (Latin script)
ilo - Iloko
inh - Ingush
io - Ido
is - Icelandic
it - Italian
iu - Inuktitut
ja - Japanese
jam - Jamaican Creole English
jbo - Lojban
jut - Jutish
jv - Javanese
ka - Georgian
kaa - Kara-Kalpak
kab - Kabyle
kbd - Kabardian
kbd-cyrl - Kabardian (Cyrillic script)
kbp - Kabiye
kcg - Tyap
kg - Kongo
khw - Khowar
ki - Kikuyu
kiu - Kirmanjki
kj - Kuanyama
kjp - Eastern Pwo
kk - Kazakh
kk-arab - Kazakh (Arabic script)
kk-cn - Kazakh (China)
kk-cyrl - Kazakh (Cyrillic script)
kk-kz - Kazakh (Kazakhstan)
kk-latn - Kazakh (Latin script)
kk-tr - Kazakh (Turkey)
kl - Kalaallisut
km - Khmer
kn - Kannada
ko - Korean
ko-kp - Korean (North Korea)
koi - Komi-Permyak
kr - Kanuri
krc - Karachay-Balkar
kri - Krio
krj - Kinaray-a
krl - Karelian
ks - Kashmiri
ks-arab - Kashmiri (Arabic script)
ks-deva - Kashmiri (Devanagari script)
ksh - Colognian
ku - Kurdish
ku-arab - Kurdish (Arabic script)
ku-latn - Kurdish (Latin script)
kum - Kumyk
kv - Komi
kw - Cornish
ky - Kyrgyz
la - Latin
lad - Ladino
lb - Luxembourgish
lbe - Lak
lez - Lezghian
lfn - Lingua Franca Nova
lg - Ganda
li - Limburgish
lij - Ligurian
liv - Livonian
lki - Laki
lld - Ladin
lmo - Lombard
ln - Lingala
lo - Lao
loz - Lozi
lrc - Northern Luri
lt - Lithuanian
ltg - Latgalian
lus - Mizo
luz - Southern Luri
lv - Latvian
lzh - Literary Chinese
lzz - Laz
mad - Madurese
mai - Maithili
map-bms - Basa Banyumasan
mdf - Moksha
mg - Malagasy
mh - Marshallese
mhr - Eastern Mari
mi - Maori
min - Minangkabau
mk - Macedonian
ml - Malayalam
mn - Mongolian
mni - Manipuri
mnw - Mon
mo - Moldovan
mr - Marathi
mrh - Mara
mrj - Western Mari
ms - Malay
ms-arab - بهاس ملايو
mt - Maltese
mus - Muscogee
mwl - Mirandese
my - Burmese
myv - Erzya
mzn - Mazanderani
na - Nauru
nah - Nāhuatl
nan - Min Nan Chinese
nap - Neapolitan
nb - Norwegian Bokmål
nds - Low German
nds-nl - Low Saxon
ne - Nepali
new - Newari
ng - Ndonga
nia - Nias
niu - Niuean
nl - Dutch
nl-informal - Nederlands (informeel)
nn - Norwegian Nynorsk
no - Norwegian
nov - Novial
nqo - N’Ko
nrm - Norman
nso - Northern Sotho
nv - Navajo
ny - Nyanja
nys - Nyungar
oc - Occitan
ojb - Ojibwemowin
olo - Livvi-Karelian
om - Oromo
or - Odia
os - Ossetic
pa - Punjabi
pag - Pangasinan
pam - Pampanga
pap - Papiamento
pcd - Picard
pdc - Pennsylvania German
pdt - Plautdietsch
pfl - Palatine German
pi - Pali
pih - Norfuk / Pitkern
pl - Polish
pms - Piedmontese
pnb - Western Punjabi
pnt - Pontic
prg - Prussian
ps - Pashto
pt - Portuguese
pt-br - Brazilian Portuguese
pwn - Paiwan
qu - Quechua
qug - Chimborazo Highland Quichua
rgn - Romagnol
rif - Riffian
rm - Romansh
rmc - Carpathian Romani
rmy - Vlax Romani
rn - Rundi
ro - Romanian
roa-tara - Tarantino
ru - Russian
rue - Rusyn
rup - Aromanian
ruq - Megleno-Romanian
ruq-cyrl - Megleno-Romanian (Cyrillic script)
ruq-latn - Megleno-Romanian (Latin script)
rw - Kinyarwanda
sa - Sanskrit
sah - Sakha
sat - Santali
sc - Sardinian
scn - Sicilian
sco - Scots
sd - Sindhi
sdc - Sassarese Sardinian
sdh - Southern Kurdish
se - Northern Sami
sei - Seri
ses - Koyraboro Senni
sg - Sango
sgs - Samogitian
sh - Serbo-Croatian
shi - Tachelhit
shi-latn - Tachelhit (Latin script)
shi-tfng - Tachelhit (Tifinagh script)
shn - Shan
shy - Shawiya
shy-latn - Shawiya (Latin script)
si - Sinhala
simple - Simple English
sjd - Kildin Sami
sje - Pite Sami
sk - Slovak
skr - Saraiki
skr-arab - Saraiki (Arabic script)
sl - Slovenian
sli - Lower Silesian
sm - Samoan
sma - Southern Sami
smn - Inari Sami
sn - Shona
so - Somali
sq - Albanian
sr - Serbian
sr-ec - Serbian (Cyrillic script)
sr-el - Serbian (Latin script)
srn - Sranan Tongo
ss - Swati
st - Southern Sotho
stq - Saterland Frisian
sty - себертатар
su - Sundanese
sv - Swedish
sw - Swahili
szl - Silesian
szy - Sakizaya
ta - Tamil
tay - Tayal
tcy - Tulu
te - Telugu
tet - Tetum
tg - Tajik
tg-cyrl - Tajik (Cyrillic script)
tg-latn - Tajik (Latin script)
th - Thai
ti - Tigrinya
tk - Turkmen
tl - Tagalog
tly - Talysh
tly-cyrl - толыши
tn - Tswana
to - Tongan
tpi - Tok Pisin
tr - Turkish
tru - Turoyo
trv - Taroko
ts - Tsonga
tt - Tatar
tt-cyrl - Tatar (Cyrillic script)
tt-latn - Tatar (Latin script)
tum - Tumbuka
tw - Twi
ty - Tahitian
tyv - Tuvinian
tzm - Central Atlas Tamazight
udm - Udmurt
ug - Uyghur
ug-arab - Uyghur (Arabic script)
ug-latn - Uyghur (Latin script)
uk - Ukrainian
ur - Urdu
uz - Uzbek
uz-cyrl - Uzbek (Cyrillic script)
uz-latn - Uzbek (Latin script)
ve - Venda
vec - Venetian
vep - Veps
vi - Vietnamese
vls - West Flemish
vmf - Main-Franconian
vo - Volapük
vot - Votic
vro - Võro
wa - Walloon
war - Waray
wls - Wallisian
wo - Wolof
wuu - Wu Chinese
xal - Kalmyk
xh - Xhosa
xmf - Mingrelian
xsy - Saisiyat
yi - Yiddish
yo - Yoruba
yue - Cantonese
za - Zhuang
zea - Zeelandic
zgh - Standard Moroccan Tamazight
zh - Chinese
zh-cn - Chinese (China)
zh-hans - Simplified Chinese
zh-hant - Traditional Chinese
zh-hk - Chinese (Hong Kong)
zh-mo - Chinese (Macau)
zh-my - Chinese (Malaysia)
zh-sg - Chinese (Singapore)
zh-tw - Chinese (Taiwan)
zu - Zulu
Формат
Экспорт для оффлайнового перевода
Экспорт в родном формате
Вывести
<languages/> {{DISPLAYTITLE: SVG-Dashboards}} [[Image: SVG-Dashboard Example.png|800px|thumb|right| Sample SVG Dashboard]] [[Image: Outputting data on svg-dashboard.gif |450px|thumb|right| Displaying textual information, statuses and interaction with the element]] == Introduction == [[Image: WebUI SVG-Dash-demo-electroseti.jpg |300px|thumb|right| On devices in HMI mode.<br> [https://youtu.be/Ziya_4QKU5I Watch video] ]] In [[Wiren Board Web Interface | web interface]] of the Wiren Board controller, you can create interactive graphical panels. With their help, it is convenient to visualize automation control schemes. Features: * displaying textual or logical information; * changing the appearance of the svg element depending on the received information: you can change the style of the element, replace the received value with your own or hide / show elements; * influence on actuators: turn on and off the load, change the operating modes of devices. SVG panels work on mobile devices, but image size needs to be taken into account. If the elements are too small, they will be difficult to use. A good solution would be to separate graphical panels into desktop and mobile ones, which are created taking into account the characteristics of a mobile device. == Fullscreen and HMI modes == {{Anchor|hmi}} In some tasks, you need to hide browser controls and controller web interface panels from the user, for this there is [[Wiren_Board_Web_Interface#fullscreen-and-hmi |Full screen and HMi modes]]. Full-screen mode allows you to switch between panels through the side menu, and in HMI mode, you need to implement the switch yourself: add a button (object) with a URL to the desired panel in the SVG image. <gallery mode="packed" heights="150px" caption="Panel modes"> Image: WebUI SVG.png | Standard view Image: WebUI SVG fullscreen.png | Fullscreen Image: WebUI SVG HMI mode.png | HMI </gallery> == Preparing == === Change WebUI Access Level === {{Wbincludes:WebUI Change Access Level}} === Image requirements === The basis for the SVG panel is an svg image, which we recommend creating in [https://inkscape.org/en/ Inkscape] - it fully supports the SVG standard without deviations. You can output information to any text elements and set up interactions with any shapes and text. ==== Release wb-2307 and newer ==== {{SupportedSinceRelease | release=wb-2307 |content= Inside the svg file, the ''content'' tag must not contain other tags. If you uploaded a file to the controller, made a binding, downloaded this file to the computer and it did not open in the editor, open the svg file with a text editor and remove the contents of the ''content'' tag. After that you will be able to edit the file in the svg editor. The image can be of any width and height, as well as with any number of elements. }} ==== Release wb-2304 and older ==== Restrictions: * You cannot interact with the rectangle. If necessary, convert it to curves (outline). * SVG panel editor ignores grouping. Therefore, if you need to customize the interaction with a composite element, then convert it to a single shape consisting of paths. * Inside the svg file, the ''content'' tag should not contain other tags. If you uploaded a file to the controller, made a binding, downloaded this file to the computer and it did not open in the editor, open the svg file with a text editor and remove the contents of the ''content'' tag. After that you will be able to edit the file in the svg editor. The image can be of any width and height, as well as with any number of elements. == Creating an SVG panel == {{YouTube |link=https://youtu.be/xWksClOYGbA |text=An example of creating a panel }} Create a new SVG panel: # Go to '''Panels''' → '''List'''. # In the '''SVG panel''' section, click the '''Add'' button '', the binding editor will open. # Click the '''Load SVG''' button and select the SVG image file.. Once uploaded, the image will be displayed on the open page: # Specify links and behavior of svg elements using [[#Link editor| link editor]]. # Save the changes and see the result by clicking on the '''Demo''' button. Don't forget to fill in the fields '''Identifier''' and '''Name''' with the unique ID of the new panel for the machine and the name for the people. The option '''Stretch to full screen''' will fit the panel to the free space. == Syntax == In the '''Value''' fields [[#Link editor | With the Link Editor]] you can compose simple expressions that contain conditions and simple arithmetic operations. === MQTT topic value === The value from the MQTT topic specified in the '''Channel''' field is placed into the '''val''' variable. === Conditional expressions === Available operations: * <code>></code> — greater than * <code>>=</code> — greater than or equal to * <code><</code> — less than * <code><=</code> — less than or equal to!N !* <code>==</code> — equals * <code>!=</code> — not equal Syntax: <syntaxhighlight lang="javascript"> (CONDITION) ? 'VALUE1' : 'VALUE2' </syntaxhighlight> For example, if the value of the MQTT topic is equal to <code>1</code> , then print the value <code>ВКЛ</code> , otherwise — <code>ОТКЛ</code> : <syntaxhighlight lang="javascript"> (val == 1) ? 'ON' : 'OFF' </syntaxhighlight> === Arithmetic operations === Simple arithmetic operations can be performed on a topic received from an MQTT topic: * <code>+</code> — addition * <code>-</code> — subtraction * <code>*</code> — multiplication * <code>/</code> — division For example, output the value <code>АВАРИЯ</code> if the value in the MQTT topic multiplied by 0.1 is greater than 20 and <code>НОРМА</code> otherwise: <syntaxhighlight lang="javascript"> (val*0.1>20) ? 'ALARM' : 'NORMAL' </syntaxhighlight> === Rounding values === Often, values from sensors come with several decimal places, if you do not need such accuracy in the svg panel, then they can be rounded: <syntaxhighlight lang="javascript"> val.toFixed(n) //round the value of the variable val to n decimal places val.toFixed(2) //round the value of the variable val to two decimal places 220.238 → 220.24 </syntaxhighlight> == Link Editor== [[Image: SVG-Dashboard Editor.png |600px|thumb|right| SVG panel editor]] The image is prepared in an external vector editor, but the assignment of links to elements is done in the controller web interface. To associate an image svg element with values or events, select it with the mouse, after which fields for setting the element's behavior will appear next to the image. {{SupportedSinceRelease | release = wb-2307 |content= In addition to selecting a single element, you can select a group. To do this, hold down the Alt key on your keyboard and click on one of the elements of the group. The group containing the element will be highlighted. Clicking again while holding down the Alt key will select the group one level higher and so on up to the very top of the hierarchy. Groups are convenient to use for creating buttons: we combined a rectangle and an icon in the editor and got a button. }} After setting up all connections, click the '''Save''' button. === Read === Display values from the source in a text field. The value from the source selected in the '''Channel''' field is placed in the '''val''' variable, which must be specified in the '''Value''' field. To display the value, just specify the variable: <syntaxhighlight lang="javascript"> val </syntaxhighlight> You can add arbitrary text to the value, for example, the unit of measure: <syntaxhighlight lang="javascript"> val + '°C' </syntaxhighlight> You can also change the received value, for example, replace it with a human-readable status: <syntaxhighlight lang="javascript"> (val == 1) ? 'ON' : 'OFF' </syntaxhighlight> === Write to channel === With this setting you can write a value to the topic when the user clicks on the element. There are two states ON and OFF. When a user clicks on an element, the value in the MQTT topic will change to the opposite. In the '''Channel''' field, select the MQTT topic for writing values, and in the '''On State Value''' and '''Off State Value''' fields specify which values correspond to the states. For example, to switch a relay, specify: <syntaxhighlight lang="javascript"> On value = 1 Off value = 0 </syntaxhighlight> === Jump and swipe === {{SupportedSinceRelease | release = wb-2307 |content= [[Image: svg-tap.png |300px|thumb|right| Creating a transition ]] Using transitions, you can create multi-page interfaces: # Draw a custom picture for each page. # Load these pictures into the controller. # Select a panel for one of the three events to navigate to. Events available: single and long press, as well as swipe left and right. By single and long pressing, the transition to SVG and text panels is available, and by swiping - only SVG. This is an architectural limitation that we are not yet able to fix. }} === Visibility === Here you can specify under what condition to show the image element. By default, the element will be hidden and displayed only while the condition is met. In the '''Channel''' field, select the MQTT topic that the element will respond to, in the '''Condition''' field, select a condition, and in the '''Value''' field, select a value. === Design style === Allows you to change the style of image elements. Can be used to create feedback for actions, notify the user about an event, etc. Element properties available for styling: * fill — fill color; * fill-opacity — fill opacity, values from 0.0 to 1.0 or as a percentage; * stroke — stroke color; * stroke- width — stroke thickness; * stroke-dasharray — dashed stroke type, set in units of length or percentage. * stroke-opacity — stroke opacity, values from 0.0 to 1.0 or percentage. Colors can be named <code>black, red, yellow и т.п.</code> or hex values <code>#ffe680ff, #4f4f4dff и т.п.</code> . Let's change the color of the element depending on the state of the relay, if the value in the topic is <code>1</code> , then paint the object yellow, otherwise - gray: <syntaxhighlight lang="javascript"> (val == 1) ? ';fill: yellow' : ';fill: gray' </syntaxhighlight> Let's make it so that when the value is greater than 20, the stroke of the element becomes red, dotted and 2px thick. For values less than or equal to 20, the element style will be left by default: <syntaxhighlight lang="javascript"> (val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : '' </syntaxhighlight> == Editing == === Panel === To make changes: # Open the SVG panel. # Click on the '''Edit''' button. # Make changes and save them by clicking on the ' button ''Demonstration'''. === SVG Image === ==== Release wb-2307 and newer ==== {{SupportedSinceRelease | release=wb-2307 |content= SVG panels use identifiers embedded in the file (the id tag), so to edit the panel, simply make changes to the drawing and upload the new version to the controller. Important! If you have made a binding to a group of elements, then do not ungroup this group! If you need to change it, just go to the group in Inkscape and add or remove elements. }} ==== Release wb-2304 and older ==== The SVG panel editor assigns data-svg-param-id at the time of binding actions to the element, so to edit the image, you need to load it from the controller to the computer: # Open the SVG panel for editing. # At the top of the window, click the '''Download''' button, the svg file will be downloaded to your computer. # Edit the file in Inkscape. We do not recommend editing such files in Adobe Illustrator - [https://support.wirenboard.com/t/redaktirovanie-svg-dacsboard bindings are lost], there is no information about other editors. When editing, keep in mind that if a link was assigned to an svg element, then it contains a hidden data-svg-param-id and when it is duplicated, a new element is created with the same data-svg-param-id. Edit the resulting svg file and upload it to the controller again: # In the edit window, click the '''Select File''' button. # After the '''Change''' button becomes active, click on her. == Transfer to another controller == Sometimes you need to make a backup copy of the svg-panel, for example, to transfer to another controller. To do this, you need to save the svg file converted by the editor and the description of its links and upload them to another controller. Please note that the names of the MQTT topics on both controllers must match. If this is not the case, svg elements will need to be attached to new MQTT topics. === Saving === Save the svg file and link description: # Download the file from the controller to your computer. To do this, click on the button with the image of a down arrow. # In the editor of the svg-panel, click the button '''As JSON''', copy and save the lines to a file. === Loading === # Create a new SVG panel following the instructions in the [[#Creating an SVG panel| Creating an SVG panel]]. # In the svg panel editor, click the '''As JSON''' button, copy the link description from the saved file and paste the text into the field # Click the '''Save'' button '' at the bottom of the page. ==Animation of SVG panel elements== [[File:animation-svg.gif|598x|thumb|right| SVG panel element animation example]] SVG panel elements can be animated using CSS. To do this: #Draw an SVG panel in a vector editor like Inkscape. #Open the SVG file in a text editor and add a style block wrapped in tags<style></style> . #Add the '''@keyframes''' rule in the style block. #Save the file and load it into the controller. #Go to the SVG panel editor in the controller's web interface. #Activate the '''Style''' parameter and set the property '''animation''' in the '''Value''' field. You also need to set the condition under which the animation will work. Rendering in CSS is done using the '''animation''' property and the '''@keyframes''' rule. '''@keyframes''', or keyframes, contain information about how the element should look at each point in time. A rule containing two keyframes would look like this: <syntaxhighlight lang="css"> @keyframes <keyframe name> { from: { description of the initial state of the element } to: { description of the final state of the element } } </syntaxhighlight> Here '''from''' and '''to''' keywords denote the start and end points of the animation. Instead, you can use 0% and 100%, as well as add intermediate values. The keyframe name is an identifier by which the rule will be called from the style description. In order for the animation to work, you need to set the element style to the '''animation''' property. The '''animation''' property sets the animation action parameters (animation duration, repetition, direction, movement type, steps), and the '''@keyframes''' block sets the animation itself in steps (changes in appearance and position). Let's use an example to create an animation to change the text color from red to green and vice versa. Since text is filled in SVG, you will need to change the '''fill''' property. [[Image: animation-style.png |350px|thumb|right| The '''animation''' property is set in the '''Value''' field of the '''Style''' parameter ]] #Let's create a new SVG document in the Inlscape editor and add the Text element to it. #Let's save the file and open it in a text editor. #Add a style block like this: #:<syntaxhighlight lang="html"> <style> @keyframes changecolor { 0% {fill:red} 50% {fill:green} 100% {fill:red} } </style> </syntaxhighlight> #Save the SVG file and load it into the controller. #In the dashboard editor, select the created test element and set its animation property in the following form: #:<syntaxhighlight lang="javascript"> (val > 20) ? 'animation: changecolor 3s infinite linear;' : ' ' </syntaxhighlight> #:Since the element style can only be changed by a condition involving a value from the MQTT topic, we chose the '''CPU Temperature''' topic and set the condition '''>20'''. This means that the animation will only work when the value of the '''CPU Temperature''' topic is greater than 20. #Save the dashboard and go to the view. == Add external links == [[Image : svg-hyperlink.png |300px|thumb|right| Creating a link in Inkscape ]] The transition to external links is set at the stage of creating a picture in the Inkscape editor. Create hyperlinks like this: # Select an element that will serve as a link, then in the context menu Create a link (hyperlink). # Insert a link into the opened field. # Save. Now it remains to load the image into the controller and check. == Useful Links & Materials == * [[Media:Examples SVG-Dashboards.zip|SVG Dashboard Example Archive]] * [https://github.com/wirenboard/wb-dashboards- demo Sample panels in the wb-dashboards-demo repository] * [https://support.wirenboard.com/t/vyvod-dannyh-v-vide-grafika-v-realnom-vremeni/13623/5 How to add to SVG panel link to a graph or another page] * [https://wirenboard.com/en/pages/wb-software/ Wiren Board Web Interface article] * [[Wiren Board Web Interface | Description of the controller web interface on the wiki]] * [https://inkscape.org/en/ Free Inkscape SVG editor]