Γραφήματα κατάστασης αισθητήρων που είναι συνδεδεμένοι στο Internet of Things IoT
Ένα από τα πλεονεκτήματα της σύνδεσης ενός δικτύου αισθητήρων στο Διαδίκτυο των Πραγμάτων είναι η δυνατότητα ανάλυσης των δεδομένων που λαμβάνονται. Αντιπροσωπεύοντας γραφικά αυτές τις πληροφορίες, ένα άτομο (σε αντίθεση με ένα πρόγραμμα) μπορεί να κατανοήσει πιο διαισθητικά την έννοια των παρακολουθούμενων ποσοτήτων, για παράδειγμα, συγκρίνοντάς τα μεταξύ τους ή παρακολουθώντας την ανάπτυξή τους με την πάροδο του χρόνου.
Αυτό το άρθρο ξεκινά μια σειρά, που αποτελείται από τέσσερα μέρη, που εξηγεί μια απλή πρόταση για γραφική αναπαράσταση δεδομένων που λαμβάνονται από αισθητήρες που συνδέονται με το IoT. Με την ίδια φιλοσοφία όπως και σε άλλα άρθρα, η προτεινόμενη μέθοδος είναι απόλυτα λειτουργική αν και ο κύριος στόχος είναι διδακτικός. Καθώς το τεχνικό προφίλ του κοινού στο οποίο η blog polaridad.es, και αυτό το κείμενο αφορά τα ηλεκτρονικά και όχι την ανάπτυξη ιστού, καθεμία από τις ενότητες χρησιμεύει ως εισαγωγή στις γλώσσες ή την τεχνολογία που χρησιμοποιείται: HTML, CSS, SVG y το JavaScript.
Τα άρθρα της προηγούμενης σειράς για πώς να αποθηκεύσετε δεδομένα που λαμβάνονται από συσκευές συνδεδεμένες στο Internet of Things (IoT) Τελείωσαν εξηγώντας τον τρόπο πρόσβασης στις πληροφορίες που είναι αποθηκευμένες στις βάσεις δεδομένων. Στα παραδείγματα της σειράς, για να διευκολυνθεί η διαδικασία, χρησιμοποιήθηκε ως ενδιάμεσος ένας διακομιστής ιστού που ήταν υπεύθυνος για τη λήψη των δεδομένων μέσω αιτημάτων POST του πρωτοκόλλου HTTP, την αποθήκευση τους σε μια βάση δεδομένων και την εμφάνισή τους σε μια ιστοσελίδα.
Αν και το κύριο μειονέκτημα αυτού του συστήματος είναι η απόδοση (η οποία θα μπορούσε να αμβλυνθεί με εναλλακτικές λύσεις όπως το Node.js και το MongoDB, που θα εξηγηθούν σε μελλοντικά άρθρα), σε αντάλλαγμα παρέχει δύο μεγάλα πλεονεκτήματα: η εφαρμογή του είναι πολύ απλή (συμπεριλαμβανομένης της διαθεσιμότητας υπηρεσιών δημόσια) και μπορεί να εμφανίσει τα δεδομένα σε ένα πρόγραμμα περιήγησης, δηλαδή δεν χρειάζεται συγκεκριμένες εφαρμογές (όπως μια εφαρμογή για φορητή συσκευή) για να παρουσιάσει τις αποθηκευμένες πληροφορίες που θα αντιπροσωπεύουν την ιστορική κατάσταση των συσκευών που είναι συνδεδεμένες στο Διαδίκτυο του Πράγματα.
Εκμεταλλευόμενο το πλεονέκτημα της δυνατότητας εύκολης παρουσίασης σε μια ιστοσελίδα των πληροφοριών που έχουν αποθηκευτεί με αυτό το σύστημα σχετικά με την κατάσταση των συσκευών που είναι συνδεδεμένες στο IoT, αυτό το άρθρο εξηγεί πώς να εμφανίσετε γραφικά αυτές τις πληροφορίες χρησιμοποιώντας τη μορφή SVG από το JavaScript για να δημιουργήσετε δυναμικά μια ιστοσελίδα στο HTML.
Υπάρχουν πολλά βιβλιοπωλεία το JavaScript με το οποίο να λύσει τη γραφική παρουσίαση των δεδομένων. Αυτά τα άρθρα δεν σκοπεύουν να αναπτύξουν ένα άλλο. Ο σκοπός αυτού του κειμένου είναι να κατανοήσετε τη διαδικασία και να μπορέσετε να αναπτύξετε τις δικές σας υλοποιήσεις. διδακτικός όσο και παραγωγικός στόχος. Εάν ενδιαφέρεστε να χρησιμοποιήσετε ένα προϊόν αντί να το αναπτύξετε μόνοι σας, σας συνιστώ να ρίξετε μια ματιά σε μερικές από τις εξαιρετικές βιβλιοθήκες για τη δημιουργία γραφικών με το JavaScript με δωρεάν άδειες όπως Charts.js, Γραφήματα, Εργαλεία γραφημάτων Google, Εποχή, Raphaël, διάγραμμα (βασισμένο στο Raphaël), dc.js, Chartist.js, D3.js (η σύστασή μου), C3.js (βασισμένο στο D3.js), NVD3 (επαναχρησιμοποιήσιμα γραφικά για D3.js) ...
Δομή εγγράφων HTML με γραφικά SVG
Στην πρόταση αυτού του άρθρου για γραφική παρουσίαση δεδομένων αισθητήρα, η ιστοσελίδα στην οποία εμφανίζεται αποτελείται από:
- το έγγραφο που χρησιμεύει ως κοντέινερ είναι γραμμένο HTML,
- η εμφάνιση της σελίδας ορίζεται με κώδικα CSS,
- η σχεδίαση του γραφήματος γίνεται με τη χρήση της γλώσσας SVG y
- Η ανάγνωση δεδομένων από τον διακομιστή και η εμφάνιση γραφημάτων είναι προγραμματισμένη το JavaScript
Όλα τα στοιχεία, ειδικά ο κώδικας HTML της σελίδας, μπορεί να δημιουργηθεί στον διακομιστή με PHP όπως εξηγείται στο άρθρο για το Γλώσσα προγραμματισμού PHP από τη σειρά για αποθήκευση δεδομένων από συσκευές συνδεδεμένες στο Internet of Things.
Ο κώδικας CSS y το JavaScript μπορεί να φορτωθεί (εισαχθεί) σε κωδικό HTML αντί να γράφεται απευθείας ως μέρος του εγγράφου HTML. Αυτό έχει το πλεονέκτημα ότι μπορείτε να χρησιμοποιήσετε ξανά τα ίδια έγγραφα σε πολλές σελίδες και να μπορείτε να τα επεξεργαστείτε πιο άνετα. αλλά ίσως η ταλαιπωρία της φόρτωσης λίγο περισσότερο, ανάλογα με το αν μπορείτε να χρησιμοποιήσετε τον κώδικα που περιέχεται στη μνήμη cache (φορτώθηκε σε προηγούμενη χρήση) ή ακόμα και CDN. Στη φάση παραγωγής, είναι ασήμαντο να ενσωματωθεί όλος ο κώδικας από την PHP, δημιουργώντας ένα μόνο έγγραφο σε HTML με όλες τις πληροφορίες εάν επιλέξετε αυτήν την εναλλακτική. Σε όλη αυτή τη σειρά άρθρων, για λόγους σαφήνειας, θεωρείται ότι εργαζόμαστε με ξεχωριστά έγγραφα.
Για τους σκοπούς που μας ενδιαφέρουν, να το χρησιμοποιήσουμε ως δοχείο γραφικών, και πολύ χονδρικά, το περιεχόμενο του πρώτου επιπέδου της δομής ενός εγγράφου HTML επιθυμών να φαίνεται ώς:
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español –>
<head>
</head>
<body onload=“funcion();”>
</body>
</html>
|
Η πρώτη γραμμή χρησιμεύει για να υποδείξει στο πρόγραμμα περιήγησης ιστού ότι το έγγραφο στο οποίο διαβάζει είναι γραμμένο HTML, συγκεκριμένα στην έκδοση 5 (γνωστή ως HTML5). Προηγούμενες εκδόσεις του HTML, βασισμένο στο SGML (Τυπική γενικευμένη γλώσσα σήμανσης), περιλάμβανε ορισμό τύπου εγγράφου (DTD) στην οποία δηλώθηκε ο τύπος των κανόνων που χρησιμοποιούνται στη γλώσσα για την περιγραφή του εγγράφου.
Η δεύτερη και η τελευταία γραμμή περιέχουν τον κωδικό HTML μεταξύ των οδηγιών <html> y </html> που λειτουργούν ως άνοιγμα και κλείσιμο αντίστοιχα. Οι οδηγίες HTML Περικλείουν το όνομα και τις ιδιότητες μεταξύ των πινακίδων "λιγότερο από" και "μεγαλύτερο από" σχηματίζοντας ένα είδος σημάτων "οξείας παρένθεσης". Τα στοιχεία HTML που περικλείουν περιεχόμενο έχουν μια οδηγία κλεισίματος που περιλαμβάνει την κάθετο μπροστά από το όνομα όπως μέσα </html>.
Οι ιδιότητες ή τα χαρακτηριστικά των στοιχείων διαχωρίζονται με κενά από το όνομα και το ένα από το άλλο και εκφράζονται ως απλό κείμενο ή, πιο συχνά, ως κείμενο (το όνομα της ιδιότητας) ακολουθούμενα από ένα σύμβολο ίσου και μια τιμή που περικλείεται σε εισαγωγικά. Στην περίπτωση της οδηγίας για το άνοιγμα του κώδικα HTML περιουσία έχει χρησιμοποιηθεί lang με το θάρρος es, lang="es" για να υποδείξει ότι το κείμενο του εγγράφου HTML χρησιμοποιεί την ισπανική γλώσσα.
Ένα σχόλιο έχει συμπεριληφθεί μετά την οδηγία ανοίγματος του κώδικα HTML. Τα σχόλια στο HTML Μπορούν να καταλαμβάνουν πολλές γραμμές και να χρησιμοποιούν τον κωδικό ως σημάδι ανοίγματος <!-- και ως κλείσιμο -->
Ο κώδικας HTML Αποτελείται από δύο μπλοκ: την κεφαλίδα <head> και το σώμα <body>. Το πρώτο στοχεύει στην ενημέρωση για το ίδιο το έγγραφο, συμπεριλαμβανομένων των πληροφοριών σχετικά με αυτό (μεταπληροφορίες) και το δεύτερο είναι να υποστηρίξει το περιεχόμενο του εγγράφου.
Στην οδηγία <body> έχει συμπεριληφθεί μια εκδήλωση onload με το οποίο εκτελείται αυτόματα μια λειτουργία το JavaScript μόλις φορτωθεί το περιεχόμενο. Αυτός ο πόρος σάς επιτρέπει να ξεκινήσετε την εκτέλεση του κώδικα που θα καθορίσει τα γραφικά αντικείμενα και θα τα ενημερώσει καθώς φορτώνονται πληροφορίες από τον διακομιστή σχετικά με την κατάσταση των αισθητήρων που αντιπροσωπεύουν αυτά τα γραφικά.
Από όλες τις μεταπληροφορίες που μπορούν να συμπεριληφθούν στην κεφαλίδα του εγγράφου HTML, μας ενδιαφέρει ιδιαίτερα να μάθουμε αυτό που περιγράφεται από τις ακόλουθες οδηγίες:
-
<title>που χρησιμεύει για να δοθεί τίτλος στο έγγραφο. Θα εμφανίζεται κανονικά στο παράθυρο του προγράμματος περιήγησης ή στην αντίστοιχη καρτέλα και θα μας βοηθήσει να αναγνωρίσουμε τα γραφικά που περιέχει. -
<charset>δηλώνει το σύνολο χαρακτήρων που χρησιμοποιείται για την κωδικοποίηση του εγγράφου. Είναι ιδιαίτερα σημαντικό για «ιδιαίτερες» πινακίδες όπως eñes ή τόνους. -
<link>επιτρέπει τη δημιουργία μιας σχέσης μεταξύ του εγγράφου HTML τρέχοντα και άλλα εξωτερικά. Θα μας βοηθήσει να φορτώσουμε το φύλλο στυλ σε μορφή CSS με την εμφάνιση του εγγράφου. -
<script>περιέχει ένα σενάριο με εκτελέσιμο κώδικα. Χρησιμοποιώντας αυτήν την οδηγία θα φορτώσουμε τις λειτουργίες το JavaScript με τα οποία μπορείτε να δημιουργήσετε ή να τροποποιήσετε γραφικά SVG.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
</body>
</html>
|
Όπως φαίνεται στο παράδειγμα του HTML παραπάνω, το όνομα (και η διαδρομή, εάν υπάρχει) του εγγράφου με το στυλ CSS υποδεικνύεται με το χαρακτηριστικό href, ενώ στην περίπτωση του κωδ το JavaScript χρησιμοποιείται src. Και οι δύο μοιράζονται την ιδιοκτησία type με το θάρρος text/css y text/javascript αντιστοίχως.
Ως προς το περιεχόμενο του εγγράφου, το τμήμα που αντιστοιχεί στο στοιχείο <body>, HTML5 Σας επιτρέπει να δημιουργήσετε συγκεκριμένες δομές για τα πιο συχνά στοιχεία σε μια ιστοσελίδα, όπως ένα υποσέλιδο, μια πλευρική ενότητα ή μια γραμμή πλοήγησης, αλλά αυτό που μας ενδιαφέρει είναι να χρησιμοποιήσουμε το έγγραφο ως κοντέινερ γραφικών. SVG είναι τα στοιχεία <div> που λειτουργούν ως ανεξάρτητα μπλοκ που επιτρέπουν τον ορισμό μιας ιεραρχικής δομής με την ένθεση ορισμένων <div> μέσα σε άλλους.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
</html>
|
Στο προηγούμενο παράδειγμα χρησιμοποιείται ένα στοιχείο <div> που περιέχει άλλα δύο. Αυτό το παράδειγμα εισάγει δύο πολύ σημαντικές ιδιότητες για τη χρήση του κώδικα που θέλουμε να κάνουμε. HTML: id που χρησιμοποιείται για την εκχώρηση ενός μοναδικού αναγνωριστικού σε ένα στοιχείο HTML (α <div>, στην προκειμένη περίπτωση) και class με την οποία της εκχωρείται μια κατηγορία που θα χρησιμοποιήσουμε για να καθορίσουμε την εμφάνιση. Η κατηγορία, η κατηγορία, δεν χρειάζεται να είναι μοναδική, στην πραγματικότητα, μεγάλο μέρος της αποτελεσματικότητάς της έγκειται σε πολλά στοιχεία που μοιράζονται την ίδια πτυχή.
Το στοιχείο (ή η ετικέτα) <p> χρησιμεύει για τον ορισμό μιας παραγράφου που κανονικά θα περιέχει κείμενο (αν και σε HTML δεν υπάρχει περιορισμός σε αυτό). Για να κάνετε ομαδοποιήσεις μέσα σε μια παράγραφο (ή α <div>, επίσης δεν υπάρχουν περιορισμοί) χρησιμοποιείται η ετικέτα <span>. Με αυτό το στοιχείο είναι δυνατό, για παράδειγμα, να συμπεριλάβετε κείμενο σε μια παράγραφο για να της δώσετε μια διαφορετική εμφάνιση, όπως υπογραμμισμένη ή έντονη.
Ο ορισμός των γραφικών χαρακτηριστικών και γενικά της συμπεριφοράς που σχετίζεται με ένα στοιχείο HTML Η απόδοση μιας κλάσης γίνεται στον κώδικα CSS; στην περίπτωση του προηγούμενου παραδείγματος στο έγγραφο aspecto.css.
Για τη βελτιστοποίηση της εκχώρησης χαρακτηριστικών CSS είναι πιθανό το ίδιο στοιχείο HTML ανήκει σε πολλές κλάσεις και έτσι έχει την εμφάνιση ή τη συμπεριφορά που ορίζεται από αυτές. Για να κάνετε αυτήν την ανάθεση, γράψτε τα ονόματα των διαφορετικών κλάσεων, χωρίζοντάς τες με κόμμα στα δεξιά της ιδιότητας. class
|
9
10
11
12
13
14
15
16
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
Στο προηγούμενο παράδειγμα, το στοιχείο <div> που έχει ταυτοποιηθεί ως primer_hijo Έχουν ανατεθεί τρεις τάξεις: aspecto_de_hijo, aspecto_raro y tipografia_grande, τα οποία υποτίθεται ότι μαζί ορίζουν την εμφάνιση και τη συμπεριφορά του στοιχείου. Όπως εξηγείται στο παρακάτω άρθρο για το Καθορισμός της εμφάνισης Ιστού γραφικών αισθητήρα IoT με CSS, όταν χρησιμοποιούνται πολλαπλές κλάσεις, εάν κάποια από τις ιδιότητες που ορίζουν την πτυχή ορίζεται και στις δύο, υπερισχύει η τελευταία που αναφέρεται.
Όπως έχει φανεί, τα στοιχεία <div> Μπορεί να περιέχουν άλλα στοιχεία, συμπεριλαμβανομένων άλλων <div>. Μια πιο απλή περίπτωση θα ήταν <div> που περιείχε κείμενο. Η εμφάνιση που καθορίζει το στυλ CSS θα επηρεάσει επίσης το κείμενο που περιέχεται στο στοιχείο.
Για τη βελτιστοποίηση της εκχώρησης χαρακτηριστικών CSS είναι πιθανό το ίδιο στοιχείο HTML ανήκει σε πολλές κλάσεις και έτσι έχει την εμφάνιση ή τη συμπεριφορά που ορίζεται από αυτές. Για να κάνετε αυτήν την ανάθεση, γράψτε τα ονόματα των διαφορετικών κλάσεων, χωρίζοντάς τες με κόμμα στα δεξιά της ιδιότητας. class
|
9
10
11
12
13
14
15
16
17
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
Στο προηγούμενο παράδειγμα, οι τρεις κλάσεις που σχετίζονται με το <div> primer_hijo Θα καθόριζαν την εμφάνιση του στοιχείου και το κείμενο που το περιέχει, για παράδειγμα, κάνοντας τη γραμματοσειρά με την οποία είναι γραμμένο μεγάλο (αν ο σκοπός που υποδεικνύεται από το όνομά του στην τελευταία κλάση είναι αληθής)
Από την έκδοση 5 (HTML5) είναι δυνατό να συμπεριληφθεί ο κώδικας γραφικών σε μορφή SVG μέσα στον ίδιο τον κώδικα HTML ως ένα ακόμη στοιχείο. Από την άποψη του κώδικα HTML, το περιεχόμενο SVG είναι ένα στοιχείο <svg> που περιέχει τα διάφορα γραφικά στοιχεία (γραμμές, κύκλοι, ορθογώνια...
|
9
10
11
12
13
14
15
16
17
18
19
20
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg id=“dibujo” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
</div>
</body>
|
Αν και έχει ειπωθεί ότι τα γραφικά χαρακτηριστικά των στοιχείων HTML ορίζονται σε ένα στυλ CSS και συνδέονται με αυτό μέσω μιας κλάσης, είναι επίσης δυνατό να αντιστοιχιστούν μερικά από αυτά απευθείας στα στοιχεία με δύο τρόπους. Από τη μία πλευρά, μπορείτε να χρησιμοποιήσετε το ακίνητο style και αντιστοιχίστε τα διαφορετικά γραφικά χαρακτηριστικά του αντικειμένου ως τιμή του. Λογικά, είναι προτιμότερο να χρησιμοποιήσετε την προαναφερθείσα τεχνική της ανάθεσης της πτυχής σε μια κλάση, αλλά με αυτή τη δυνατότητα μπορείτε να προσθέσετε μια μικρή διόρθωση σε ένα στοιχείο (μια πολύ συγκεκριμένη εξαίρεση) χωρίς να χρειάζεται να δημιουργήσετε μια νέα κλάση.
Από την άλλη, κάποια στοιχεία HTML Σας επιτρέπουν να χρησιμοποιείτε συγκεκριμένες ιδιότητες που καθορίζουν την εμφάνισή τους. Γενικά, ακόμη και αν υπάρχουν αυτές οι ιδιότητες, είναι προτιμότερο να χρησιμοποιούνται κλάσεις, αλλά, δυστυχώς, δεν προσφέρουν όλα τα στοιχεία αυτήν την εναλλακτική, ορισμένοι αναμένουν ότι μια συγκεκριμένη τιμή θα υποδεικνύεται απευθείας με αυτές τις συγκεκριμένες ιδιότητες αντί να αναφέρεται στη σχετική κλάση. Ένα από τα στοιχεία που έχουν αυτό το είδος συμπεριφοράς είναι ακριβώς ο κώδικας SVG, στο οποίο πρέπει να εκχωρήσουμε την ποσοστιαία τιμή του πλάτους και του ύψους στις ιδιότητες width y height, αντίστοιχα, αντί της τάξης.
Όπως θα φανεί αναλυτικότερα στο άρθρο που μιλάει για τον κώδικα SVG, για να χρησιμοποιήσετε την απλή μέθοδο που προτείνεται, καλό είναι να λάβετε υπόψη τις διαστάσεις του γραφήματος ως ποσοστά. Στην περίπτωση του συνολικού μεγέθους του αντικειμένου, με την ένδειξη 100% στην τιμή του πλάτους και του ύψους, θα είναι το δοχείο που ορίζει τις τελικές διαστάσεις (το <div> με id="dibujo", στο προηγούμενο παράδειγμα)
Στην περίπτωση των διαφορετικών συνιστωσών του γραφήματος SVG (γραμμές, κύκλοι, ορθογώνια...), περιλαμβάνονται σε μια περιοχή που έχει διαστάσεις 100×100 (οποιαδήποτε μονάδα) και διαστέλλονται σε ορθογώνιο σχήμα χωρίς να διατηρηθεί η αναλογία. Οι ιδιότητες viewBox y preserveAspectRatio του στοιχείου SVG Είναι υπεύθυνοι για την καθιέρωση αυτών των αξιών. στην πρώτη περίπτωση με ορθογώνια όψη που πηγαίνει από το σημείο συντεταγμένων (0,0) στο σημείο συντεταγμένων (100,100) και εκφράζεται ως "0 0 100 100" και στο δεύτερο με την αξία none.
|
14
15
16
17
18
|
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg viewBox=“0 0 100 100” preserveAspectRatio=“none” width=“100%” height=“100%” id=“dibujo” class=“grafico”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
|
Με όλα τα παραπάνω, μπορείτε τώρα να ορίσετε έναν πλήρη κώδικα που θα χρησιμεύει ως κοντέινερ γραφικών. SVG που δημιουργείται ή τροποποιείται από το JavaScript. Το παρακάτω παράδειγμα περιέχει τέσσερα μπλοκ γραφικών που χρησιμοποιούν τη μορφή HTML της πρότασης εκπροσώπησης που πρόκειται να χρησιμοποιήσουμε.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang=“es”> <!– Inicio del documento HTML con el idioma –>
<head> <!– Cabecera del documento HTML –>
<meta charset=“utf-8”> <!– Se utiliza el juego de caracteres UTF8 –>
<title>Temperaturas Nave E1</title> <!– Título del documento y seguramente de la ventana del navegador –>
<link rel=“stylesheet” href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” type=“text/css” media=“all”> <!– Cargar el estilo “https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” guardado en la misma carpeta que este documento HTML –>
<script type=“text/javascript” src=“graficos.js”></script> <!– Cargar el código JavaScript del documento “graficos.js” guardado en la misma carpeta que este documento HTML –>
</head> <!– Final de la cabecera del documento HTML –>
<body onload=“iniciar_graficos();”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript iniciar_graficos() –>
<div id=“temperatura_frigorifico_a” class=“bloque_sensor”> <!– Bloque de datos del primer sensor –>
<div id=“titulo_temperatura_frigorifico_a” class=“bloque_titulo”>Temperatura frigorífico 01A</div> <!– Título del bloque de datos del sensor –>
<div id=“descripcion_temperatura_frigorifico_a” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01A</div> <!– Descripción del bloque de datos del sensor –>
<div id=“fecha_temperatura_frigorifico_a” class=“bloque_fecha”>Cargando emperaturas</div> <!– Fecha de la última lectura de datos del sensor. Por ahora vacío, luego se rellenará con la aplicación JavaScript –>
<div id=“bloque_temperatura_frigorifico_a” class=“bloque_grafico”> <!– Bloque con el gráfico –>
<svg id=“grafico_temperatura_frigorifico_a” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_a” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg> <!– Gráfico de los datos –>
</div> <!– Final del bloque que contiene el gráfico –>
</div> <!– Final del bloque de datos del primer sensor –>
<div id=“temperatura_frigorifico_b” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_b” class=“bloque_titulo”>Temperatura frigorífico 01B</div>
<div id=“descripcion_temperatura_frigorifico_b” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01B</div>
<div id=“fecha_temperatura_frigorifico_b” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_temperatura_frigorifico_b” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_b” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_b” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_c” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_c” class=“bloque_titulo”>Temperatura frigorífico 01C</div>
<div id=“descripcion_temperatura_frigorifico_c” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01C</div>
<div id=“fecha_temperatura_frigorifico_c” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_c” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_c” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_c” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_d” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_d” class=“bloque_titulo”>Temperatura frigorífico 01D</div>
<div id=“descripcion_temperatura_frigorifico_d” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01D</div>
<div id=“fecha_temperatura_frigorifico_d” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_d” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_d” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_d” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
</body> <!– Final del cuerpo del documento HTML –>
</html> <!– Final del documento HTML –>
|
Παρακάτω μπορείτε να δείτε πώς θα ήταν ο προηγούμενος κώδικας, μορφοποιημένος με το στυλ CSS αντίστοιχο, δημιουργώντας με το JavaScript τα γραφικά SVG με αναγνώσεις διακομιστή δεδομένων που αποθηκεύονται από αισθητήρες συνδεδεμένους στο IoT. Εκτός από το ότι τα δεδομένα δεν φορτώνονται από τον διακομιστή αλλά δημιουργούνται τυχαία στον πελάτη (το πρόγραμμα περιήγησής σας), ο υπόλοιπος κώδικας είναι αυτός που θα χρησιμοποιηθεί στην πρόταση που ορίζεται σε αυτήν τη σειρά άρθρων.
Το επόμενο άρθρο αυτής της σειράς εξηγεί πώς να ορίσετε στυλ CSS να δώσει εμφάνιση στον κώδικα HTML που λειτουργεί ως κοντέινερ για τα γραφικά SVG με το οποίο να αναπαριστά την κατάσταση των αισθητήρων που είναι συνδεδεμένοι στο Internet of Things (IoT).
1 σχόλιο