Малювати графіки даних із датчиків, підключених до Інтернету речей (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 а визначення типу документа (DTD).
|
1
2
|
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
|
У першому рядку попереднього коду повідомляється версія XML використовується (1.0) кодування символів (UTF-8) і вказує, чи потрібні вам зовнішні визначення (standalone="no") чи це окремий документ (standalone="yes"). Другий рядок виражає визначення типу документа (DTD), який не знадобиться в наступній версії SVG.
Код, за допомогою якого визначається креслення, укладено між мітками <sgv> y </sgv> які також вказують, про що вже говорилося HTML-код, який діє як контейнер для графів даних в IoT, розміри, представлену частину загальної суми, пропорцію, а також тип і версію.
|
1
2
3
4
5
6
7
|
<?xml version=“1.0” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“500px” height=“250px” viewBox=“20 10 460 80” preserveAspectRatio=“none” xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
<!–
dibujo en formato SVG
–>
</svg>
|
Наведений вище приклад визначає малюнок шириною 500 пікселів і висотою 250 пікселів (вікно перегляду 500x250), яке буде обрізано прямокутником 460x80 (вікно перегляду 460x80), починаючи з координат 20,10, використовуючи весь простір, доступний у контейнері (елемент на веб-сторінці, у у нашому випадку) без дотримання початкової пропорції використання preserveAspectRatio="none". Крім того, тепер ви можете побачити перший вміст документа, включені до нього коментарі <!-- y --> як і в інших форматах на основі XML.
Вибрана система координат SVG Він орієнтований горизонтально (вісь X) і вертикально (вісь Y), і позитивний напрямок відповідає західному письму, тобто значення осі X зростають вправо, а позитивні значення осі Y зростають вниз.
Визначте графік за допомогою SVG
Щоб визначити графічне зображення інформації, що зберігається нашими датчиками, підключеними до Інтернету речей, нам потрібно буде вказати тип намальованого об’єкта, його геометрію (координати, розміри...) і зовнішній вигляд (товщина, колір...) у приклад цієї статті — лінійний графік, який можна створити, з’єднавши відрізки лінії з об’єктом line, найбільш корисний для побудови незалежних елементів або об’єкта з багатосегментною лінією path, більш практичний для серії з’єднаних ліній.
з елементом path Мета полягає в тому, щоб зробити малюнок, як на зображенні нижче, який складається із замкнутого контуру, заповненого більш світлим кольором, у верхній частині якого розташована відкрита лінія, без заливки та намальована товстою лінією.
Для опису лінії використовується вираз типу:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
У якому X1,Y1 — координати першої точки на прямій, а X2,Y2 — координати другої. Використано атрибут stroke-width щоб визначити товщину. Існує кілька способів визначення зовнішнього вигляду об'єктів SVG, з його індивідуальними властивостями, як і попередній, або з властивістю style який об’єднує їх усіх і який метод буде використано в пропозиції статті.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
Наведений вище код приєднується до власності style значення stroke (колір обведення), stroke-width (товщина лінії) і stroke-opacity (непрозорість об'єкта)
Опис об'єкта path має форму
|
1
|
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
|
Наведений вище код використовує операції SVG M, L y Z всередині власності d, що означає відповідно «moveto» (перейти до), «lineto» (рядок до) і «closepath» (закрити шлях). Вони можуть бути виражені у верхньому або нижньому регістрі, щоб вказати абсолютне або відносне значення, де це доречно (у випадку Z, наприклад, не має значення). Є багато інших операцій, за допомогою яких, наприклад, ми можемо малювати кругові криві, еліптичні криві, криві Безьє... які нам не знадобляться в цьому прикладі.
Хоча ця пропозиція малює лінійні графіки, які можуть охоплювати область, може бути корисним малювати інші прості елементи для позначення точок або виділення областей. З наявних в SVG Цікавими можуть бути багатокутники (якими також можна малювати заливку), прямокутники (зручніше для конкретного випадку), еліпси та кола (як окремий випадок еліпсів). Синтаксис цих елементів можна побачити в наступному прикладі коду.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<svg id=“formas_sencillas” width=“100%” height=“180px” viewBox=“0 0 100 100” preserveAspectRatio=“none” class=“foto_columna_sombra” style=“background-color:#A8C3EA;margin:20px auto;”>
<polygon points=“0,100 0,42 8,38 14,37 22,40 29,33 35,36 44,40 51,30 57,42 64,33 74,38 80,34 87,40 92,38 100,32 100,100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;fill:#205587;fill-opacity:0.5;” vector-effect=“non-scaling-stroke” />
<circle cx=“0” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“8” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“14” cy=“37” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“22” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“29” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“35” cy=“36” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“44” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“51” cy=“30” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“57” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“64” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“74” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“80” cy=“34” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“87” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“92” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“100” cy=“32” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<rect x=“0” y=“0” width=“100” height=“100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</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 наступним чином:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
Позиція тексту вказується координатами x і y, шрифт відповідає властивості font-family, розмір с font-size і колір з властивістю fill.
HTML дозволяє інтегрувати малюнки SVG як ще один елемент сторінки. Як і інші об'єкти, ви можете використовувати власність ID щоб призначити їм унікальний ідентифікатор, за допомогою якого до них можна буде посилатися JavaScript маніпулювати ними. З точки зору HTML, об'єкт SVG матиме такий вигляд:
|
1
2
3
4
5
6
7
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
</svg>
|
Завдяки тому, що ми бачили досі, можна було б намалювати тип базового графіка, який шукаємо в цій пропозиції, але, щоб надати гнучкості зовнішньому вигляду контейнера (веб-сторінки), пропорція графіка буде змінена (наприклад preserveAspectRatio="none"), змінюючи його розмір, щоб адаптувати його до макета елементів у вікні браузера HTML.
Загалом, існує два варіанти поведінки під час зміни розміру вікна браузера, яке відображає веб-сторінку, що містить діаграму: (1) зберегти розмір діаграми SVG залиште порожній простір, якщо є надлишок, або додайте смуги прокрутки, якщо вони відсутні, або (2) змініть розмір графіка SVG ритмічно змінювати розмір вікна браузера, у якому відображається Інтернет. Якщо ви виберете першу формулу, ви зможете передбачити величини та малювати з абсолютними вимірюваннями, хоча й з поправкою на основі вибраного розміру та значень на графіку. Якщо ви обираєте другий спосіб, який я пропоную, величини завжди є відсотками від представлених значень. Перевагою другого методу є його адаптованість до Інтернету, а недоліком — малювання елементів, які супроводжують графік, наприклад точок або тексту.
Для виправлення деформації, яка могла виникнути в товщині ліній, використовується ефект. vector-effect="non-scaling-stroke" на маршрутах, які необхідні (ті, що мають значення stroke інакше як none). Для об'єктів text Немає порівнянного ефекту, тому необхідно деформувати їх (разом з тими, що з ними пов’язані) у протилежному напрямку до того, який створюється зміною розміру контейнера.
Перетворення в SVG Їх можна застосувати до груп об’єктів, щоб кілька текстів та інших об’єктів у графіку можна було об’єднати в одну групу та, що зручніше, виконати перетворення для всіх них.
Елементи, які входять до групи, включені до тегів <g> y </g>, для призначення перетворення використовується властивість transform і серія операцій, що актуально для нашого випадку scale, для якого вказано коефіцієнт горизонтального та вертикального збільшення. Якщо значення scale більше одиниці, розширює відповідну вісь, а якщо менше одиниці, відбувається зменшення розміру об’єктів уздовж цієї осі.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<g transform=“scale(0.5,2.0)”>
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Primer texto
</text>
<text x=“10.0” y=“50.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Segundo texto
</text>
</g>
</svg>
|
У попередньому прикладі перший і другий текст змінено шляхом зменшення їхнього горизонтального вимірювання вдвічі та подвоєння вертикального вимірювання на значення 0.5 і 2.0, які використовуються в scale(0.5,2.0)
Наступна стаття з циклу про представлення графіків даних від датчиків, підключених до IoT пояснює, як створювати або змінювати графіки в реальному часі за допомогою JavaScript що дозволить вам побачити анімацію графіка при представленні останніх значень, завантажених із сервера.
Нижче наведено приклад того, як виглядатимуть графіки, створені за цією пропозицією.
Дати коментар