Remote control a HDrive by a mobile phone
The setup is simple.
Connect the HDrive to your local network by plugging the Ethernet cable from the Motor to your WiFi router. Take care that you have configured a valid IP-Address on the HDrive for your network first. The whole application shown in the video is all in one HTML file on my local computer. First you can test this website in your local browser and control the HDrive from your PC.
If you want to use your mobile phone to control the HDrive you have to publish this local website to your WiFi network. Then just open this Website, served from your PC, on your mobile phone. To share such a site in your network you could use WebMatrix Tool or IIS from Microsoft, just keep in mind to make some netsh and firewall configuration that your mobile phone has access to the page. Another way would be to use Node.js for creating the Webserver.
It is also possible to store the webpage directly on the motor it self, then no PC is mandatory anymore.
We are using the roundslider script to display the nice gauge, therefore we have to add the slider element in the body of the HTML document:
The following code is sending the new target position to the HDrive. It begins with the inclusion of the JQuery and the RoundSlider script. The rounslider is triggering a drag event which is calling the “sendDataToHdrive” function. This function then sends a new drive command to the motor.
please have a look at this line:
var blob = new Blob(['<control pos=\"' + targetPosition*10 + '\" speed=\"1500\" current=\"500\" acc=\"1500\" decc=\"500\" ']);
It sends a drive command to the HDrive with the target position, the max. speed of 2000 RPM, the max. current of 2A in the mode 129 (position control).
you can Download the whole Project here: Slider_demo.rar
How to store the webpage directly into the HDrive
To host the web application on your drive we have to upload the files to the motor. The motor is capable to upload 4 files, 2 HTML and 2 Script (.js) files. Each file is getting renamed after uploading. The first HTML file is renamed to app1.html then app2.html the script files are getting renamed to s1.js and s2.js. Therefore we have to change the file links in our HTML file as followed:
The <script src=“scripts/roundslider.min.js”></script> becomes <script src=“scripts/s1.js”></script> and the JQuery becomes “s2.js”. Furthermore, I copied the roundslider css into the HTML file.
First enter the Web GUI from your HDrive and access the “Apps” section:
Accessing the App
After uploading these files you can access the page on the address http://192.168.1.102/app1.html from any device in the same network, your PC is not mandatory anymore, the files are hosted directly from the HDrive.