[mk_page_section bg_color=”#000000″ padding_top=”100″ padding_bottom=”100″ sidebar=”sidebar-1″][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][mk_padding_divider][mk_fancy_title tag_name=”h1″ color=”#e5e5e5″ size=”44″ font_weight=”500″ txt_transform=”capitalize” font_family=”none”]

Remote control a HDrive by a mobile phone

[/mk_fancy_title][/vc_column][vc_column width=”1/6″][/vc_column][/mk_page_section][vc_row][vc_column][mk_padding_divider size=”100″][mk_padding_divider size=”50″ visibility=”hidden-sm”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_single_image image=”402″ img_size=”full”][/vc_column][vc_column width=”1/2″][mk_fancy_title tag_name=”h1″ color=”#272727″ size=”34″ font_weight=”500″ txt_transform=”capitalize” font_family=”none”]How to control a HDrive by HTML and Javascript[/mk_fancy_title][mk_fancy_title tag_name=”span” color=”#272727″ size=”18″ line_height=”200″ font_weight=”400″ txt_transform=”none” font_family=”none”]The setup is simple.[/mk_fancy_title][vc_column_text css=”.vc_custom_1517944813830{margin-bottom: 0px !important;}”]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.[/vc_column_text][mk_fancy_title tag_name=”span” color=”#272727″ size=”18″ line_height=”200″ font_weight=”400″ txt_transform=”none” margin_bottom=”0″ font_family=”none”]Webpage body:[/mk_fancy_title][vc_column_text css=”.vc_custom_1517945128993{margin-bottom: 0px !important;}”]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:[/vc_column_text][vc_column_text css=”.vc_custom_1517945072425{margin-bottom: 0px !important;}”]

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

[/vc_column_text][mk_fancy_title tag_name=”span” color=”#272727″ size=”18″ line_height=”200″ font_weight=”400″ txt_transform=”none” margin_bottom=”0″ font_family=”none”]Webpage script:[/mk_fancy_title][vc_column_text css=”.vc_custom_1517945214436{margin-bottom: 0px !important;}”]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.[/vc_column_text][vc_column_text css=”.vc_custom_1517945248934{margin-bottom: 0px !important;}”]

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

 [/vc_column_text][vc_column_text css=”.vc_custom_1517945268119{margin-bottom: 0px !important;}”]please have a look at this line:[/vc_column_text][vc_column_text css=”.vc_custom_1517945367793{margin-bottom: 0px !important;}”]

var blob = new Blob(['<control pos=\"' + targetPosition*10 + '\" speed=\"1500\" current=\"500\" acc=\"1500\" decc=\"500\" ']);

 [/vc_column_text][vc_column_text css=”.vc_custom_1517945461837{margin-bottom: 0px !important;}”]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[/vc_column_text][mk_fancy_title tag_name=”span” color=”#272727″ size=”18″ line_height=”200″ font_weight=”400″ txt_transform=”none” margin_bottom=”0″ font_family=”none”]How to store the webpage directly into the HDrive[/mk_fancy_title][vc_column_text css=”.vc_custom_1517946082551{margin-bottom: 0px !important;}”]

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:[/vc_column_text][mk_image src=”http://it.3dd.ch/wp-content/uploads/2018/02/app12-1.jpg” image_size=”large”][vc_column_text css=”.vc_custom_1517946201216{margin-bottom: 0px !important;}”]

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.

[/vc_column_text][mk_image src=”http://it.3dd.ch/wp-content/uploads/2018/02/app2.jpg” image_width=”352″][mk_padding_divider][/vc_column][/vc_row]