Adding buttons to Web GUI

Submitted by clankerr02 on Wed, 05/15/2019 - 20:30

Forums:

Hi, I read a post by @Adam about using voice recognition and adding extra buttons to it. I'd like to do something similar but without voice recognition but would like to add more buttons and a second Picoborg Reverse and be able to control all the motors via the Web GUI.for speed control
Ive managed to create buttons for various speeds.
Idealy I would need buttons for forward/reverse,left and right ( M1+M2 Picoborg Rev 1) and forward/reverse (M1 Picoborg Rev 2).

Any help would be greatly appreciated.

john

piborg's picture

piborg

Sat, 05/18/2019 - 23:00

For anyone else who is interested, please see my response here :)

clankerr02

Tue, 05/12/2020 - 14:47

Hope you're all safe and well. Have a bit of time now to get back into my various projects.
As i will be running my picoborg reverse based robot headless, starting from cron and being controlled via web ui is there a way to add a button on the web ui to shut the raspberry pi down safely ?
Also Ive tried using a battborg to power the raspberry pi connected to the pico borg reverse from an 18v 4.ah rechargeable drill battery but I get a low voltage indicator on my desktop, is this normal with the battborg and isit something to worry about ? BTW my motors are not connected to the battery.
Cheers & keep safe.

piborg's picture

piborg

Tue, 05/12/2020 - 19:07

Adding a shutdown button is fairly easy :)

All we need the script to do is call the command sudo shutdown -h now - this will shut everything down in the same way as the shutdown button does on the desktop.

First we will need the os module to run the command. Add it to the imports at the top:

import os

Now look for the following line:

elif getPath.startswith('/off'):

Above it we will add another section that will respond to the /shutdown URL:

        elif getPath.startswith('/shutdown'):
            # Shut the Raspberry Pi down
            httpText = '<html><body><center>'
            httpText += 'Shutting down...'
            httpText += '</center></body></html>'
            self.send(httpText)
            os.system('sudo shutdown -h now')

Most of that code simply returns the message "Shutting down..." to the browser. The last line uses os.system to run the shutdown command mentioned before.

At this point entering that sub-page will shut the Pi down (e.g. http://192.168.0.100/shutdown), all we need now is a button to do that.

The next steps will need to be done in both the / and /hold sections if you want the button on both.

Start by looking for the Off function in the HTML code:

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

This opens the /off page to turn the motors off.

Make a copy below it called Shutdown which goes to /shutdown instead.

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

Now look for the HTML line for the Photo button (towards the bottom of the section):

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

Make a copy below it with a different name which calls Shutdown() instead:

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

There should now be a button labelled "Shutdown" near the bottom of the page next to the photo button :)

clankerr02

Wed, 05/13/2020 - 19:38

Thanks, works like a dream.
i have noticed a /hold there is a section called key management. What keys do these refer to? are they on the keyboard attached to the pi or on the device viewing the Pi ?
Thanks again.

piborg's picture

piborg

Wed, 05/13/2020 - 21:30

That feature was kindly added by wingers recently :)

It is intended to detect the arrow keys on the viewing device only, works while the keys are held.

See added touch mode /touch,and keyboard control added to /hold mode

clankerr02

Mon, 05/18/2020 - 15:57

Hi, ive used these controls on my laptop conected wirelessly to the Pi and its brilliant ! Thanks @wingers.
I took it a step further. I downloaded a programme Joytokey (https://joytokey.net/en/) remapped the buttons to match my arrow keys and am now able to use my generic game cotroller connected to my laptop to control my robot. similar to the old renote joy. Hope this helps others.
BTW How are is the Keyboard numbered? is there a generic map?
Thanks again.

piborg's picture

piborg

Mon, 05/18/2020 - 17:30

There is a great page for getting the keycodes here: https://keycode.info/

There is a pattern to the mapping, but it is not obvious :)

piborg's picture

piborg

Tue, 05/12/2020 - 19:12

This is fairly common, usually nothing to worry about. In most cases it will not affect anything, but if you are using USB or GPIO devices which need a precise 5V supply it may cause problems (most don't).

Usually the cause is too much resistance in the 3-pin cable between the BattBorg / PicoBorg Reverse and the Raspberry Pi carrying the 5V and GND connections. This can be reduced by using shorter cables and / or ones with a thicker conductor inside.

Subscribe to Comments for &quot;Adding buttons to Web GUI&quot;