monsterWeb modification

Submitted by jren on Thu, 12/10/2020 - 17:41

Forums:

I am currently building a remotecontrolled rover (UGV) for a project in school. I've decided to base it on the thunderborg platform and it's code examples. What I want to do is to make my thunderborg controllable through a web client, like the monsterWeb program, but only using sliders. I've managed to make two sliders to control the speed of each side of the borg, but still need to start it by using buttons, and every time I change the speed I have to restart the Drive function, for the speed to change. I am completely new to both JavaScript and HTML, and would therefore appreciate all kinds of tips and help if anyone has done anything similar before. If you didn't quite catch my description of what i want the web-GUI to do, look at the tbGui.py program. It has exactly the controls I want, but the Tkinter module, as i've come to understand, is hard to get on the web. The HTML/JavaScript part I am working on is in the attachments to this post.

Attachments: 
monsterWeb_mod.txt
piborg's picture

piborg

Mon, 12/14/2020 - 17:01

This should be a nice and simple change :)

When the Drive button is pressed it runs the Javascript code Drive(1,1) to send the new speed values to robot. It does this because of the onclick event value for the button: onclick="Drive(1,1)".

What you need to do is add the same code to the sliders, but for a different event. There are two options here.

The first option is the oninput event. This will call the code it is given as the slider is moved. It should result in smooth changes, but will send lots of updates to the robot:

            httpText += '<input id="speedLeft" type="range" oninput="Drive(1,1)" min="-100" max="100" value="100" style="width:600px" />\n'
            httpText += '<input id="speedRight" type="range" oninput="Drive(1,1)" min="-100" max="100" value="100" style="width:600px" />\n'

The second option is the onchange event. This will call the code it is given when you have stopped moving / holding the slider. This will update the robot once to the final slider value each time:

            httpText += '<input id="speedLeft" type="range" onchange="Drive(1,1)" min="-100" max="100" value="100" style="width:600px" />\n'
            httpText += '<input id="speedRight" type="range" onchange="Drive(1,1)" min="-100" max="100" value="100" style="width:600px" />\n'
Subscribe to Comments for &quot;monsterWeb modification&quot;