Σχεδιάστε γραφήματα δεδομένων από αισθητήρες που είναι συνδεδεμένοι στο Internet of Things (IoT) με SVG

Σε αυτό το άρθρο της σειράς για που αντιπροσωπεύουν γραφήματα δεδομένων στο IoT Εξηγώ πώς να σχεδιάσετε τα γραφήματα χρησιμοποιώντας το Γλώσσα SVG. Όπως σε άλλες περιπτώσεις, το άρθρο χρησιμεύει επίσης ως μια σύντομη εισαγωγή στη γλώσσα.

Μορφή SVG

SVG αντιστοιχεί στο ακρωνύμιο του Scalable Vector Graphics (κλιμακούμενα διανυσματικά γραφικά, στα Αγγλικά). Είναι ένα γλώσσα σήμανσης το οποίο βασίζεται XML και αυτό επιτρέπει, κυρίως, να περιγράψει ένα σχέδιο από τη γεωμετρία που το καθορίζει. σε αντίθεση με τη μέθοδο matrix, που χρησιμοποιείται για παράδειγμα για μια φωτογραφία, η οποία θα χρησιμοποιούσε ένα πλέγμα από έγχρωμα pixel για να την κωδικοποιήσει.

μέσα σε ένα σχέδιο SVG Μπορεί επίσης να συμπεριληφθεί μια εικόνα (μια μήτρα εικονοστοιχείων), είτε αναφέρεται σε εξωτερικό έγγραφο είτε ενσωματωμένη στο ίδιο το σχέδιο. SVG.

Η γλωσσική έκδοση που είναι τρέχουσα τη στιγμή της σύνταξης αυτού του άρθρου είναι η SVG 1.1 αν και ο ορισμός της έκδοσης ήδη αναπτύσσεται SVG 2. Όσο είναι δυνατόν, θα προσπαθήσω να κάνω αυτό που εξηγείται στην εισαγωγή, έστω και αν αναφέρεται SVG 1.1 εξυπηρετούν επίσης για SVG 2.

Αν το σχέδιο SVG Περιλαμβάνεται σε ξεχωριστό έγγραφο και όχι εντός του κωδικού HTML (η πρότασή μου σε αυτήν τη λύση για την αναπαράσταση δεδομένων IoT τα ενσωματώνει στον κώδικα HTML) πρέπει να φέρει μια αναφορά XML και ένα Ορισμός τύπου εγγράφου (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 Είναι προσανατολισμένος οριζόντια (άξονας Χ) και κάθετα (άξονας Υ) και η θετική κατεύθυνση είναι αυτή της δυτικής γραφής, δηλαδή οι τιμές του άξονα Χ μεγαλώνουν προς τα δεξιά και οι θετικές τιμές του άξονα Υ μεγαλώνουν. προς τα κάτω.

Ορίστε το γράφημα με 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, για παράδειγμα, είναι άσχετο). Υπάρχουν πολλές άλλες πράξεις με τις οποίες, για παράδειγμα, μπορούμε να σχεδιάσουμε κυκλικές καμπύλες, ελλειπτικές καμπύλες, καμπύλες Bézier... που δεν θα χρειαστούμε σε αυτό το παράδειγμα.

Αν και αυτή η πρόταση σχεδιάζει γραμμικά γραφήματα που μπορούν να περικλείουν μια περιοχή, μπορεί να είναι χρήσιμο να σχεδιάσετε άλλα απλά στοιχεία για να επισημάνετε σημεία ή να τονίσετε περιοχές. Από αυτά που είναι διαθέσιμα σε SVG Τα πολύγωνα (με τα οποία μπορείτε επίσης να σχεδιάσετε τη γέμιση), τα ορθογώνια (πιο βολικά για τη συγκεκριμένη περίπτωση), οι ελλείψεις και οι κύκλοι (ως συγκεκριμένη περίπτωση ελλείψεων) μπορεί να είναι ενδιαφέροντα. Η σύνταξη αυτών των στοιχείων φαίνεται στο ακόλουθο παράδειγμα κώδικα.

Η εμφάνιση του προηγούμενου κώδικα θα ήταν όπως η παρακάτω εικόνα (με κάποιο κόλπο για να μπορέσετε να χρησιμοποιήσετε ξανά τα σημεία από το παραπάνω παράδειγμα)

Τα σημεία του πολυγώνου (polygon) αναγράφονται στο ακίνητο points ως ζεύγη συντεταγμένων x,y που χωρίζονται με κενά μεταξύ τους. Για να ορίσετε τις ελλείψεις (ellipse) χρησιμοποιούνται ιδιότητες cx (x συντεταγμένη του κέντρου), 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 που θα σας επιτρέψει να δείτε μια κίνηση του γραφήματος όταν αναπαριστάτε τις τελευταίες τιμές που φορτώθηκαν από τον διακομιστή.

Το παρακάτω είναι ένα παράδειγμα για το πώς θα φαίνονται τα γραφήματα που δημιουργούνται με αυτήν την πρόταση.