Simply Control Motor by Mobile Phone

This How-To is showing how to control a smart IoT Servo "HDrive17" by your mobile phone just using HTML and JavaScript. The Webpage including this Script is stored on the Motor it self and can be attached to a WebApp on your mobile phone.

Connect the HDrive17 (you can get them from www.henschel-robotics.ch) 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.

It is also possible to store the webpage directly on the motor it self, then no PC is mandatory anymore.

Webpage body:

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 include of the 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(['

It sends a drive commend to the HDrive with the target position, the max. speed of 2000 RPM, tha max. current of 2A in the mode 129 (position control). you can Download the whole Project here: Slider_demo.rar

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. 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

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.

Download all files here.