Remote control a HDrive by a mobile phone

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

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:

<div id="slider"></div>

Webpage script:

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.

<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/roundslider.min.js"></script>
<script type="text/javascript">
        $("#slider").roundSlider({
           sliderType: "min-range",
            handleShape: "dot",
            width: 50,
            radius: 450,
            handleSize: "+90",
            value: 45,
            max: "360",
            animation: false,
            drag: "sendDataToHdrive" // the drag event triggered when dragin the slider
        });
 
        function sendDataToHdrive(e) {
 
            var host = "http://192.168.1.102/"; //the Hdrive IP
            var targetPosition = $('#slider').roundSlider('getValue'); //the target position from the slider
 
            var oReq = new XMLHttpRequest(); //the async send request to transmit a new drive command to the motor
            oReq.open("POST", host + "writeTicket.cgi", true);
            oReq.onload = function (oEvent) {
            };
            var blob = new Blob(['<control pos=\"' + targetPosition*10 + '\" speed=\"10000\" current=\"20000\" mode=\"129\" acc=\"100000\" decc=\"100000\" />'], { type: 'text/plain' });
            oReq.send(blob);
        }
</script>

 

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

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:

app12-1

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.

app2
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

0