How to change button colours diddyRedWeb

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

Forums:

Hi is it possible to change the font/colour and shape of the buttons within the Web gui ?

Cheers

John

clankerr02

Wed, 05/15/2019 - 23:03

I've managed to work this out. I can now change button colours, font size and the layout of buttons.

clankerr02

Mon, 05/18/2020 - 16:10

Hi, I've been busy. I need a bit of help redesigning the web UI (not that it isnt already awesome)
I've managed with help from W3schools to change button colours, size and shape. Ive also managed to change the background colours. I would like to change the streaming video size and have it fill most of the page and have my buttons on the left side of the page. I can get the /stream page to fill the page but the others seem to be restricted by the Iframe. Any ideas how to adjust this?

piborg's picture

piborg

Mon, 05/18/2020 - 17:54

The iframes essentially set the outer box that the sub-pages are shown in. Their size is controlled by the width and height values, either in pixels or % of the available location.

HTML can make laying things out a bit awkward. You can use a single row table to divide the screen into a left and a right section like this:

            httpText += '<table width="100%"><tr>\n'
            httpText += '<td width="50%">\n'
            # LEFT CODE HERE
            httpText += '</td>\n'
            httpText += '<td width="50%">\n'
            # RIGHT CODE HERE
            httpText += '</td>\n'
            httpText += '</tr></table>\n'

You can adjust the split by changing the two 50% values.

See also: https://www.w3schools.com/html/html_tables.asp and https://www.w3schools.com/html/html_iframe.asp

clankerr02

Wed, 05/20/2020 - 19:52

Hi I had a fiddle with this but couldn't work out what to put where! Sorry could you expand a bit on this.
I did find an article on w3s about split screen and tried to manipulate it but it wouldn't load on browser. the code ran but no web page. Ive included the modified script.
https://www.w3schools.com/howto/howto_css_split_screen.asp

Attachments: 
button2.txt
piborg's picture

piborg

Wed, 05/20/2020 - 20:36

Your new code looks good, but it is missing some bits.

Instead of

    <img src="/stream">

you will need

    <iframe src="/stream" width="480" height="384" frameborder="0"></iframe>
    <iframe id="setDrive" src="/off" width="100%" height="50" frameborder="0"></iframe>

This is because /stream is an HTML page, not an image. You will probably need to adjust the width and height of the top iframe to get the image to be the size you want.

You need to keep the second iframe somewhere as well as it is needed for sending the commands to the robot.

To make the commands work you need the JavaScript code as well:

<script language="JavaScript"><!--
function Drive(left, right) {
 var iframe = document.getElementById("setDrive");
 var slider = document.getElementById("speed");
 left *= speed.value / 100.0;'
 right *= speed.value / 100.0;'
 iframe.src = "/set/" + left + "/" + right;
}
function Off() {
 var iframe = document.getElementById("setDrive");
 iframe.src = "/off";
}
function Shutdown() {
 var iframe = document.getElementById("setDrive");
 iframe.src = "/shutdown";
}
function Photo() {
 var iframe = document.getElementById("setDrive");
 iframe.src = "/photo";
}
//--></script>

it should go just above the </head> line.

The JavaScript functions are called by the buttons to do the work. The functions themselves change the page that the iframe from earlier is viewing, sending a URL to the robot which it uses to make the changes.

piborg's picture

piborg

Wed, 05/20/2020 - 20:40

I just noticed one of your </div> tags is missing the last > - that may be a problem.

Subscribe to Comments for &quot;How to change button colours diddyRedWeb &quot;