Rysuj wykresy danych z czujników podłączonych do Internetu rzeczy (IoT) za pomocą SVG

W tym artykule z serii pt reprezentowanie wykresów danych w IoT Wyjaśnię, jak wykreślić wykresy za pomocą Język SVG. Jak przy innych okazjach, artykuł pełni także funkcję krótkiego wprowadzenia do języka.

formacie SVG

SVG odpowiada akronimowi Scalable Vector Graphics (skalowalna grafika wektorowa, w języku angielskim). To jest język znaczników który jest oparty na XML i to pozwala przede wszystkim opisać rysunek poprzez geometrię, która go definiuje; w przeciwieństwie do metody matrycowej, stosowanej na przykład w przypadku fotografii, która do kodowania wykorzystuje siatkę kolorowych pikseli.

wewnątrz rysunku SVG Można również dołączyć obraz (matrycę pikseli), odnoszący się do dokumentu zewnętrznego lub osadzony w samym rysunku. SVG.

Wersja językowa aktualna w momencie pisania tego artykułu to SVG 1.1 chociaż definicja wersji jest już opracowywana SVG 2. W miarę możliwości postaram się zrobić to, co zostało wyjaśnione we wstępie, nawet jeśli się do tego odnosi SVG 1.1 służyć również SVG 2.

Jeśli rysunek SVG Jest ona zawarta w oddzielnym dokumencie, a nie w kodeksie HTML (moja propozycja w tym rozwiązaniu reprezentowania danych IoT osadza je w kodzie HTML) musi być na czele z odniesieniem XML i a definicja typu dokumentu (DTD).

W pierwszej linijce poprzedniego kodu podana jest wersja XML używane (1.0) kodowanie znaków (UTF-8) i wskazuje, czy potrzebujesz zewnętrznych definicji (standalone="no"), czy też jest to samodzielny dokument (standalone="yes"). Druga linia wyraża definicja typu dokumentu (DTD), które nie będą potrzebne w następnej wersji SVG.

Kod, za pomocą którego definiowany jest rysunek, jest zawarty pomiędzy etykietami <sgv> y </sgv> co również wskazuje, jak już wspomniano, mówiąc o Kod HTML pełniący rolę kontenera na wykresy danych w IoT, wymiary, reprezentowaną część całości, proporcję, a także typ i wersję.

Powyższy przykład definiuje rysunek o szerokości 500 pikseli i wysokości 250 pikseli (rzutnia 500x250), który zostanie przycięty do prostokąta o wymiarach 460x80 (pole widzenia 460x80) zaczynając od współrzędnych 20,10, wykorzystując całe miejsce dostępne w kontenerze (element na stronie internetowej, w w naszym przypadku) bez przestrzegania pierwotnych proporcji użycia preserveAspectRatio="none". Ponadto możesz teraz zobaczyć pierwszą treść dokumentu, a także zawarte w nim komentarze <!-- y --> podobnie jak w innych formatach opartych na XML.

Układ współrzędnych wybrany przez SVG Jest zorientowany poziomo (oś X) i pionowo (oś Y), a kierunek dodatni jest zgodny z pismem zachodnim, to znaczy wartości osi X rosną w prawo, a wartości dodatnie osi Y rosną zniżkowy.

Zdefiniuj wykres za pomocą SVG

Aby zdefiniować grafikę informacji przechowywanych przez nasze czujniki podłączone do IoT, będziemy musieli określić typ rysowanego obiektu, jego geometrię (współrzędne, wymiary...) i jego wygląd (grubość, kolor...). przykład tego artykułu wykres liniowy, który można utworzyć łącząc odcinki linii z obiektem line, najbardziej przydatny do rysowania niezależnych elementów lub obiektu w przypadku linii wieloodcinkowej path, bardziej praktyczne w przypadku szeregu połączonych linii.

Z żywiołem path Celem jest wykonanie rysunku takiego jak na obrazku poniżej, który składa się z zamkniętej ścieżki wypełnionej jaśniejszym kolorem, zwieńczonej u góry otwartą ścieżką, bez wypełnienia i narysowanej grubą linią.

Do opisu linii używa się wyrażenia typu:

Gdzie X1,Y1 są współrzędnymi pierwszego punktu na linii, a X2,Y2 są współrzędnymi drugiego punktu. Użyto atrybutu stroke-width do określenia grubości. Istnieje kilka sposobów definiowania wyglądu obiektów SVG, z jego indywidualnymi właściwościami, jak poprzednio, lub z właściwością style co łączy je wszystkie i która jest metodą zastosowaną w propozycji artykułu.

Powyższy kod łączy się z właściwością style wartości stroke (kolor obrysu), stroke-width (grubość linii) i stroke-opacity (nieprzezroczystość obiektu)

Opis obiektu path ma formę

Powyższy kod wykorzystuje operacje SVG M, L y Z wewnątrz nieruchomości d, co oznacza odpowiednio „moveto” (przesuń do), „lineto” (linia do) i „closepath” (zamknij ścieżkę). Można je wyrazić dużymi lub małymi literami, aby wskazać, w stosownych przypadkach, wartość bezwzględną lub względną (w przypadku Znie ma na przykład znaczenia). Istnieje wiele innych operacji, za pomocą których możemy na przykład narysować krzywe kołowe, krzywe eliptyczne, krzywe Béziera... których nie będziemy potrzebować w tym przykładzie.

Chociaż w tej propozycji rysowane są wykresy liniowe, które mogą obejmować obszar, przydatne może być narysowanie innych prostych elementów w celu zaznaczenia punktów lub wyróżnienia obszarów. Spośród dostępnych w SVG Interesujące mogą być wielokąty (za pomocą których można również narysować wypełnienie), prostokąty (wygodniejsze w konkretnym przypadku), elipsy i okręgi (jako szczególny przypadek elips). Składnię tych elementów można zobaczyć w poniższym przykładowym kodzie.

Wygląd poprzedniego kodu będzie wyglądał jak na poniższym obrazku (z pewnym trikiem, aby móc ponownie wykorzystać punkty z powyższego przykładu)

Punkty wielokąta (polygon) są wskazane w obiekcie points jako pary współrzędnych x, y oddzielonych spacjami. Aby zdefiniować elipsy (ellipse) właściwości są używane cx (x współrzędna środka), cy (współrzędna y środka), rx (szerokość) i ry (wysoki). Zamiast dwóch wartości promienia (promień poziomy i pionowy, rx y ry) okrąg (circle) jest zdefiniowany przez promień z właściwością r i współrzędne środka z cx y cy. Aby zdefiniować prostokąt (rectangle) wskazane są współrzędne lewego górnego rogu (x e y) Szerokość (width) i wysoki (height)

Na koniec, aby uwzględnić tekst, używany jest obiekt text następująco:

Położenie tekstu jest oznaczone współrzędnymi x i y, czcionka odpowiada właściwości font-family, rozmiar z font-size i kolor z właściwością fill.

HTML pozwala na integrację rysunków SVG jako kolejny element strony. Podobnie jak inne obiekty, możesz korzystać z właściwości ID przypisać im unikalny identyfikator, za pomocą którego można się do nich następnie odwoływać JAVASCRIPT nimi manipulować. Z punktu widzenia HTML, obiekt SVG miałby następującą postać:

Na podstawie tego, co widzieliśmy do tej pory, możliwe byłoby narysowanie podstawowego wykresu wymaganego w tej propozycji, ale aby zapewnić elastyczność wyglądu kontenera (strony internetowej), będzie to miało wpływ na proporcje wykresu (Na przykład preserveAspectRatio="none") modyfikując jego rozmiar w celu dostosowania go do układu elementów w oknie przeglądarki HTML.

Ogólnie rzecz biorąc, istnieją dwie alternatywy dla zachowania podczas modyfikowania rozmiaru okna przeglądarki wyświetlającej stronę internetową zawierającą wykres: (1) zachowanie rozmiaru wykresu SVG pozostawienie pustej przestrzeni, jeśli jest jej nadmiar lub dodanie pasków przewijania, jeśli jej brakuje, lub (2) modyfikację rozmiaru wykresu SVG w rytmiczny sposób zmieniać rozmiar okna przeglądarki wyświetlającej sieć. Jeśli wybierzesz pierwszą formułę, możesz przewidzieć wielkości i narysować pomiary bezwzględne, chociaż skorygowane na podstawie wybranego rozmiaru i wartości wykresu. Jeśli wybierzesz drugi sposób, czyli ten, który proponuję, wielkości są zawsze procentami reprezentowanych wartości. Zaletą drugiej metody jest możliwość dostosowania do sieci, wadą jest rysowanie elementów towarzyszących wykresowi, takich jak punkty czy teksty.

Aby skorygować deformację, która może wystąpić w grubości linii, stosuje się efekt. vector-effect="non-scaling-stroke" na trasach, które są niezbędne (te, które mają wartość stroke inny niż none). Dla obiektów text Nie ma porównywalnego efektu, dlatego konieczne jest ich odkształcenie (wraz z związanymi z nimi) w kierunku przeciwnym do tego, jaki powstaje przy zmianie wielkości pojemnika.

Przekształcenia w SVG Można je zastosować do grup obiektów, dzięki czemu kilka tekstów i innych obiektów w grafice będzie można zintegrować w jedną grupę i wygodniej przeprowadzić transformację dla nich wszystkich.

Elementy wchodzące w skład grupy zaliczane są do tagów <g> y </g>, aby przypisać transformację, używana jest właściwość transform oraz szereg operacji, które w naszym przypadku są istotne scale, dla którego wskazany jest współczynnik powiększenia w poziomie i w pionie. Jeżeli wartość scale jest większa niż jeden, poszerza odpowiednią oś, a jeśli jest mniejsza niż jeden, następuje zmniejszenie rozmiaru obiektów wzdłuż tej osi.

W poprzednim przykładzie pierwszy i drugi tekst są modyfikowane poprzez zmniejszenie o połowę ich wymiaru poziomego i podwojenie wymiaru pionowego o wartości 0.5 i 2.0 użyte w scale(0.5,2.0)

Kolejny artykuł z serii dot reprezentacja wykresów danych z czujników podłączonych do IoT wyjaśnia, jak generować lub modyfikować wykresy w czasie rzeczywistym za pomocą JAVASCRIPT co pozwoli Ci zobaczyć animację wykresu przedstawiającego ostatnie wartości pobrane z serwera.

Poniżej znajduje się przykład wyglądu wykresów wygenerowanych przy użyciu tej propozycji.