How to control a HDrive by HTML and Javascript

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

Code Example

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:

Webpage script:
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 runslider 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:

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

How to store the webpage directly into the HDrive

Upload Files

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:

Now upload your .html application and two script files, the roundslider.min.js and the slim version of JQuery. The Files size is 70 KB for each file, there is space for two .html and two .js files.

 

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.

After you have typed in some text, hit ENTER to start searching...