Απλώς ελέγξτε τη μηχανή μέσω κινητού τηλεφώνου: 5 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:35

Αυτό το How-To δείχνει πώς να ελέγχετε ένα έξυπνο IoT Servo "HDrive17" από το κινητό σας τηλέφωνο χρησιμοποιώντας HTML και JavaScript. Η Ιστοσελίδα που περιλαμβάνει αυτό το σενάριο αποθηκεύεται στο ίδιο το μοτέρ και μπορεί να συνδεθεί σε ένα WebApp στο κινητό σας τηλέφωνο.

Βήμα 1: Ρυθμίστε το HDrive17 στο τοπικό σας δίκτυο

Συνδέστε το HDrive17 (μπορείτε να το προμηθευτείτε από το www.henschel-robotics.ch) στο τοπικό σας δίκτυο συνδέοντας το καλώδιο Ethernet από το μοτέρ στο δρομολογητή WiFi. Προσέξτε ότι έχετε ρυθμίσει πρώτα μια έγκυρη διεύθυνση IP στο HDrive για το δίκτυό σας. Ολόκληρη η εφαρμογή που εμφανίζεται στο βίντεο είναι όλα σε ένα αρχείο HTML στον τοπικό μου υπολογιστή. Πρώτα μπορείτε να δοκιμάσετε αυτόν τον ιστότοπο στο τοπικό πρόγραμμα περιήγησής σας και να ελέγξετε το HDrive από τον υπολογιστή σας.

Εάν θέλετε να χρησιμοποιήσετε το κινητό σας τηλέφωνο για τον έλεγχο του HDrive, πρέπει να δημοσιεύσετε αυτόν τον τοπικό ιστότοπο στο δίκτυό σας WiFi. Στη συνέχεια, απλώς ανοίξτε αυτόν τον ιστότοπο, που εξυπηρετείται από τον υπολογιστή σας, στο κινητό σας τηλέφωνο. Για να μοιραστείτε έναν τέτοιο ιστότοπο στο δίκτυό σας θα μπορούσατε να χρησιμοποιήσετε το WebMatrix Tool ή το IIS από τη Microsoft, απλώς λάβετε υπόψη σας για να κάνετε κάποια διαμόρφωση netsh και τείχους προστασίας που έχει το κινητό σας τηλέφωνο στη σελίδα.

Είναι επίσης δυνατή η αποθήκευση της ιστοσελίδας απευθείας στον ίδιο τον κινητήρα, τότε κανένας υπολογιστής δεν είναι πλέον υποχρεωτικός.

Βήμα 2: Εφαρμογή προγράμματος

Σώμα ιστοσελίδας:

Χρησιμοποιούμε το σενάριο roundslider για να εμφανίσουμε το ωραίο εύρος, επομένως πρέπει να προσθέσουμε το στοιχείο ρυθμιστικού στο σώμα του εγγράφου HTML.

Βήμα 3: Σενάριο ιστοσελίδας

Ο ακόλουθος κώδικας στέλνει τη νέα θέση στόχου στο HDrive. Αρχίζει με τη συμπερίληψη του σεναρίου JQuery και του RoundSlider. Το rounslider ενεργοποιεί ένα συμβάν μεταφοράς που καλεί τη λειτουργία "sendDataToHdrive". Αυτή η λειτουργία στέλνει μια νέα εντολή κίνησης στον κινητήρα.

παρακαλώ ρίξτε μια ματιά σε αυτή τη γραμμή:

var blob = new Blob (['

Στέλνει ένα drive drive σε HDrive με τη θέση -στόχο, το μέγιστο. ταχύτητα 2000 σ.α.λ., μέγ. ρεύμα 2Α στη λειτουργία 129 (έλεγχος θέσης). μπορείτε να κατεβάσετε ολόκληρο το έργο εδώ: Slider_demo.rar

Βήμα 4: Αποθηκεύστε την ιστοσελίδα απευθείας στο HDrive

Για να φιλοξενήσουμε την εφαρμογή ιστού στη μονάδα δίσκου σας, πρέπει να ανεβάσουμε τα αρχεία στον κινητήρα. Το μοτέρ μπορεί να ανεβάσει 4 αρχεία, 2 αρχεία HTML και 2 αρχεία Script (.js). Κάθε αρχείο μετονομάζεται μετά τη μεταφόρτωση. Το πρώτο αρχείο HTML μετονομάζεται σε app1.html και μετά σε app2.html τα αρχεία δέσμης ενεργειών μετονομάζονται σε s1.js και s2.js. Επομένως, πρέπει να αλλάξουμε τους συνδέσμους αρχείων στο αρχείο HTML μας. Το JQuery… γίνεται “s2.js”. Επιπλέον, αντέγραψα το roundslider css στο αρχείο HTML.

Καταχωρίστε πρώτα το GUI Ιστού από το HDrive και αποκτήστε πρόσβαση στην ενότητα "Εφαρμογές"

Βήμα 5: Πρόσβαση στην εφαρμογή

Μετά τη μεταφόρτωση αυτών των αρχείων, μπορείτε να αποκτήσετε πρόσβαση στη σελίδα στη διεύθυνση https://192.168.1.102/app1.html από οποιαδήποτε συσκευή στο ίδιο δίκτυο, ο υπολογιστής σας δεν είναι πλέον υποχρεωτικός, τα αρχεία φιλοξενούνται απευθείας από το HDrive.

Κατεβάστε όλα τα αρχεία εδώ.