Начертайте графики на данни от сензори, свързани към Интернет на нещата (IoT) с SVG

В тази статия от поредицата за представляващи графики на данни в IoT Обяснявам как да начертая графиките с помощта на SVG език. Както при други случаи, статията служи и като кратко въведение в езика.

SVG формат

SVG съответства на акронима за Scalable Vector Graphics (мащабируема векторна графика, на английски). Това е маркиращ език който се основава на XML и това позволява главно да се опише чертеж чрез геометрията, която го определя; за разлика от матричния метод, използван например за снимка, който би използвал мрежа от цветни пиксели, за да я кодира.

вътре в чертеж SVG Изображение (матрица от пиксели) също може да бъде включено, или препращащо към външен документ, или вградено в самия чертеж. SVG.

Езиковата версия, която е актуална към момента на писане на тази статия, е SVG 1.1 въпреки че дефиницията на версията вече се разработва SVG 2. Доколкото е възможно, ще се опитам да направя това, което е обяснено във въведението, дори и да се отнася за SVG 1.1 също служат за SVG 2.

Ако чертежът SVG Той е включен в отделен документ, а не в кода HTML (моето предложение в това решение за представяне на IoT данни го вгражда в кода HTML) трябва да бъде оглавено с препратка XML и a дефиниция на типа документ (DTD).

В първия ред на предишния код се съобщава версията XML използвано (1.0) кодиране на знаци (UTF-8) и показва дали имате нужда от външни дефиниции (standalone="no") или е самостоятелен документ (standalone="yes"). Вторият ред изразява дефиниция на типа документ (DTD), които няма да са необходими в следващата версия на SVG.

Кодът, с който се дефинира чертежа, е ограден между етикетите <sgv> y </sgv> които също показват, както вече беше споменато, когато говорим за HTML код, който действа като контейнер за графики с данни в IoT, измерванията, представената част от общата сума, пропорцията, а също и типа и версията.

Примерът по-горе дефинира чертеж с ширина 500 пиксела и височина 250 пиксела (прозорец за изглед 500x250), който ще бъде изрязан с правоъгълник 460x80 (кутия за изглед 460x80), започващ от координати 20,10, като се използва цялото налично пространство в контейнера (елемент на уеб страница, в нашия случай), без да се спазва първоначалната пропорция за използване preserveAspectRatio="none". Освен това вече можете да видите първото съдържание на документа, коментарите, които са включени сред <!-- y --> както и в други формати, базирани на XML.

Координатната система, избрана от SVG Той е ориентиран хоризонтално (ос X) и вертикално (ос Y) и положителната посока е тази на западното писане, тоест стойностите на оста X растат надясно, а положителните стойности на оста Y растат надолу.

Дефинирайте графиката с SVG

За да дефинираме графиките на информацията, съхранявана от нашите сензори, свързани с IoT, ще трябва да посочим типа на обекта, който е начертан, неговата геометрия (координати, размери...) и външния му вид (дебелина, цвят...) в пример за тази статия линейна графика, която може да бъде направена чрез свързване на линейни сегменти с обекта line, най-полезен за изчертаване на независими елементи или с многосегментна линия, обект path, по-практичен за серии от свързани линии.

С елемента path Целта е да се направи рисунка като тази на изображението по-долу, която се състои от затворена пътека, запълнена с по-светъл цвят, покрита в горната част с отворена пътека, без запълване и начертана с дебела линия.

За описание на линия се използва израз от типа:

В която X1,Y1 са координатите на първата точка от правата, а X2,Y2 са координатите на втората. Използван е атрибут stroke-width за определяне на дебелината. Има няколко начина за определяне на външния вид на обектите SVG, с индивидуалните му свойства, като предходния, или с имот style който ги обединява и кой е методът, който ще бъде използван в предложението за статия.

Горният код се присъединява към имота style стойностите на stroke (цветът на удара), stroke-width (дебелината на линията) и stroke-opacity (непрозрачността на обекта)

Описание на обект path има формата

Горният код използва операциите SVG M, L y Z вътре в имота d, които означават съответно „moveto“ (преместване към), „lineto“ (линия към) и „closepath“ (близък път). Те могат да бъдат изразени с главни или малки букви, за да покажат абсолютна или относителна стойност, когато е подходящо (в случай на Z, например, е без значение). Има много други операции, с които, например, можем да начертаем кръгови криви, елиптични криви, криви на Безие... които няма да ни трябват в този пример.

Въпреки че това предложение чертае линейни графики, които могат да ограждат област, може да бъде полезно да начертаете други прости елементи за маркиране на точки или подчертаване на области. От наличните в SVG Интересни могат да бъдат многоъгълници (с които можете да рисувате и пълнежа), правоъгълници (по-удобни за конкретния случай), елипси и кръгове (като частен случай на елипси). Синтаксисът на тези елементи може да се види в следния примерен код.

Появата на предишния код би била като следното изображение (с някакъв трик, за да можете да използвате повторно точките от примера по-горе)

Точките на многоъгълника (polygon) са посочени в имота points като двойки координати x,y, разделени с интервали между тях. За да дефинирате елипсите (ellipse) се използват свойства cx (х координата на центъра), cy (y координата на центъра), rx (ширина) и ry (Високо). Вместо две стойности на радиуса (хоризонтален и вертикален радиус, rx y ry) кръгът (circle) се определя от радиус със свойството r и координатите на център с cx y cy. За да дефинирате правоъгълника (rectangle) са посочени координатите на горния ляв ъгъл (x e y) Ширината (width) и високият (height)

И накрая, за включване на текст се използва обектът text както следва:

Позицията на текста е обозначена с координатите x и y, шрифтът съответства на свойството font-family, размерът с font-size и цвета с имота fill.

HTML ви позволява да интегрирате чертежи SVG като друг елемент от страницата. Подобно на други обекти, можете да използвате имота ID да им присвоите уникален идентификатор, с който след това да могат да бъдат препращани от JavaScript да ги манипулират. От гледна точка на HTML, предмет SVG ще има следната форма:

С това, което видяхме досега, би било възможно да се начертае типа основна графика, който се търси в това предложение, но за да се даде гъвкавост на външния вид на контейнера (уеб страницата), пропорцията на графиката ще бъде засегната (например preserveAspectRatio="none"), като промените размера му, за да го адаптирате към оформлението в прозореца на браузъра на елементите HTML.

В общи линии има две алтернативи на поведението при промяна на размера на прозореца на браузъра, който показва уеб страницата, съдържаща диаграмата: (1) запазване на размера на диаграмата SVG оставяне на празно пространство, ако има излишък или добавяне на ленти за превъртане, ако липсва или (2) промяна на размера на графиката SVG по ритмичен начин, за да промените размера на прозореца на браузъра, който показва мрежата. Ако изберете първата формула, можете да предвидите величините и да начертаете с абсолютни измервания, макар и коригирани въз основа на избрания размер и стойностите на графиката. Ако изберете втория начин, който е този, който предлагам, величините винаги са проценти от представените стойности. Предимството на втория метод е неговата адаптивност към мрежата, а недостатъкът е изчертаването на елементите, които придружават графиката, като точки или текстове.

За коригиране на деформацията, която може да възникне в дебелината на линиите, се използва ефектът. vector-effect="non-scaling-stroke" по маршрутите, които са необходими (тези, които имат стойност от stroke различни от none). За обектите text Няма сравним ефект, така че е необходимо те (заедно с тези, свързани с тях) да бъдат деформирани в посока, обратна на тази, получена от промяната в размера на контейнера.

Трансформациите в SVG Те могат да се прилагат към групи от обекти, така че няколко текста и други обекти в графика да могат да бъдат интегрирани в една група и, по-удобно, да се извърши трансформация за всички тях.

Елементите, които са част от група, се включват сред таговете <g> y </g>, за присвояване на трансформация се използва свойството transform и серия от операции, които за нашия случай са подходящи scale, на който е посочен коефициент на хоризонтално и вертикално увеличение. Ако стойността на scale е по-голямо от едно разширява съответната ос и ако е по-малко от едно, се получава намаляване на размера на обектите по тази ос.

В предишния пример първият и вторият текст са модифицирани чрез намаляване наполовина на тяхното хоризонтално измерване и удвояване на вертикалното измерване със стойностите 0.5 и 2.0, използвани в scale(0.5,2.0)

Следващата статия от поредицата за представяне на графики с данни от сензори, свързани към IoT обяснява как да генерирате или модифицирате графики в реално време с помощта на JavaScript което ще ви позволи да видите анимация на графиката, когато представяте последните стойности, заредени от сървъра.

Следното е пример за това как биха изглеждали графиките, генерирани с помощта на това предложение.