Adding Ultraborg sensor readings from to the Diddyborg-web interface


Can someone please help me

I have a Picoborg Reverse (and a Diddyborg metal edition) and a Ultraborg, I have combined all these parts in to my own robot build

I currently use the web interface to control the Robot

BUT I want to be able to show the Ultraborg sensor readings which I can see in to the interface so everything I need is on one webpage

I would also like if possible to be able to control the buttons for movement using keyboard as well as by clicking the buttons e.g. pressing up arrow to go forward rather than always having to click the button on interface

Can someone help me please?

piborg's picture

It just so happens there is already a version on the WebUI with ultrasonic sensor readings added to it on the forum :)
Custom web UI

Adding keyboard controls is more involved and will require some understanding of HTML / JavaScript to get working. Basically you would need to catch the onkeydown and onkeyup events that occur when a key is pressed and released respectively.

Excellent - thank you, had looked through forum but missed that!

works really well - like the semi auto / auto ideas as well

If someone could possibly help get keyboard controls added it would be perfect

P.S. That script has to have line 259 changed from

if sendFrame != None:


if sendFrame is not None:

Thanks to the useful post in I have amended scripts from to add touch mode /touch, and added keyboard control (arrow keys) to /hold mode, also jpeg quality for streaming can be changed

piborg's picture

Glad to hear you got everything working.

I had completely forgotten about that other version :)

I have made all these fixes / improvements to the version on GitHub and submitted a pull request :::

Perhaps you can help / advise on one further change I want to make. I have added a button to the web ui called lights, but I can't work out how you handle it, basically I already have another script called which turns on Knight Rider / KITT style strobing light on front of robot, how can call another script from the web ui from a button onclick?

piborg's picture

Thanks for the GitHub changes, I am sure others will appreciate it :)

Adding a new button is not hard. We will need to add code in a few places to make it work though.

First we will need to add a new URL to the program which will start the script.

        elif getPath.startswith('/lights_on'):
            # Start the lights on script
            os.system('python &')
            httpText = '<html><body><center>'
            httpText += 'Lights on'
            httpText += '</center></body></html>'

This will need the os module to be imported at the top as well:

import os

Next the page will need a JavaScript function to open this URL. This will be like the Off or Photo functions.

			httpText += 'function LightsOn() {\n'
			httpText += ' var iframe = document.getElementById("setDrive");\n'
			httpText += ' iframe.src = "/lights_on";\n'
			httpText += '}\n'

This should be added to the /, /hold, and /touch versions of the page if they all will have the new button. Add it just below the existing Photo function.

Finally we need to add a button to the page. This will be a duplicate of the existing Save Photo button with just the text and onclick function changed.

            httpText += '<button onclick="LightsOn()" style="width:200px;height:100px;"><b>Lights on</b></button>\n'

Again this should be added to the /, /hold, and /touch versions of the page if they all will have the new button. Add it just below the existing Save Photo function to put it on the right of that button.

Thank you very much, very helpful indeed

Got it working for most lights I need, but one script is not just simple turn on/off, it actually loops a sequence (so it looks like the car KITT from Knight Rider), this script runs fine using method above but how can I then have a button to stop / kill / cancel that script? any thoughts?

Thanks again

piborg's picture

This can be done with some small changes :)

First we will need the subprocess module:

import subprocess

Next add a new global value which will keep a reference to the running script:

global lightsProcess
lightsProcess = None

Replace the /lights_on code with this version that starts the script and saves the reference:

elif getPath.startswith('/lights_on'):
    # Start the lights on script
    global lightsProcess
    if lightsProcess is None:
        lightsProcess = subprocess.Popen(['python', ''])
    httpText = '<html><body><center>'
    httpText += 'Lights on'
    httpText += '</center></body></html>'

This also checks if it was already running and does not start it again.

Now add this section for /lights_off which will end the script if it is running:

elif getPath.startswith('/lights_off'):
    # Stop the lights on script
    global lightsProcess
    if lightsProcess is not None:
        lightsProcess = None
    httpText = '<html><body><center>'
    httpText += 'Lights off'
    httpText += '</center></body></html>'

Now all that is needed is to add another function and button pair to the pages like before which open the /lights_off page instead of /lights_on to stop the script.

Thank you so much

I assume for /lights_on it should be "if lightsProcess is None:" rather than "if lightsProcess is not None:" - as it didn't work initially and my logic assumed that was why?

Much appreciate your assistance, I can program all day with VB.NET but struggle with Python!

I can now fully control my robot via the web interface on computer, phone and tablet - including movement, ultrasonic readings, lights and speech ::!! - thank you :;)

Next stage is to tidy up web ui to make it look nicer, any recommendations for web ui editors or tools to help? always love a good recommendation

piborg's picture

Yes, that was a typo. Corrected in the original message :)

Tidying the Web UI is a bit more tricky as the code has all of the HTML written out by hand.

Generally I would access the Web UI from a PC web browser and use the view source option to get the final HMTL output. You can then use a tool like the Tryit Editor to experiment with changes to the HTML and see how they would look.

Do I need to worry about getting::-

SyntaxWarning: name 'lightsProcess' is assigned to before global declaration when running the script? I had read somewhere that in Python 3.6 onwards these will be classed as Errors so code won't then run? obviously it works fine now and is just a warning so happy to just ignore it

piborg's picture

It sounds like a bug, each section which reads or writes lightsProcess should have a global lightsProcess line before any of the other lines.

It might be worth double-checking for typos (Python is case-sensitive) as that would be the most likely culprit.

Very odd then as definitely got a global lightsProcess at start of code in # Global values section, and then again in both lights on and lights off sections as per your code, all spelled correctly and correct case. Will leave it for now as working fine but still odd

Full error: is:

./ SyntaxWarning: name 'lightsProcess' is assigned to before global declaration
global lightsProcess

And then look at line it mentions: and clearly as a global for it....

elif getPath.startswith('/lights'):

global lightsProcess

piborg's picture

Had another look this morning, it seems like this is my mistake :)

Remove the two global lines in the lights on and lights off sections and instead put one further up, just below def handle(self): where the other ones are. That should fix the warning.

Thank you - can confirm moving the global to where you mention does indeed resolve the error :

Thanks again for all your help

Subscribe to Comments for &quot;Adding Ultraborg sensor readings from to the Diddyborg-web interface&quot;