0

I'm creating an html page which controls a robot, and I'm trying to get the layout nice.

At the moment there is a live video feed and below it a single column of 8 buttons. These buttons have CSS attributes which change their colour when they're clicked etc. I just want to be able to move the buttons to arrange them in a grid, or set of columns.

How do I do this? Do I need to use CSS to create some columns, or is it more difficult as I'm positioning buttons not text?

Current HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 
    <title>WebIOPi | Demo</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    webiopi().ready(function() {
        var content, button;
        content = $("#content");

        // create a "FORWARDS" labeled button for GPIO 7
        button = webiopi().createGPIOButton(7, "FORWARDS");
        content.append(button); // append button to content div

        // create a "REVERSE" labeled button for GPIO 8
        button = webiopi().createGPIOButton(8, "REVERSE");
        content.append(button); // append button to content div

        // create a "STEER LEFT" labeled button for GPIO 24
        button = webiopi().createGPIOButton(9, "STEER LEFT");
        content.append(button); // append button to content div

        // create a "STEER RIGHT" labeled button for GPIO 24
        button = webiopi().createGPIOButton(10, "STEER RIGHT");
        content.append(button); // append button to content div

        // create a "ROTATE LEFT" labeled button for GPIO 24
        button = webiopi().createGPIOButton(11, "ROTATE LEFT");
        content.append(button); // append button to content div

        // create a "ROTATE RIGHT" labeled button for GPIO 24
        button = webiopi().createGPIOButton(23, "ROTATE RIGHT");
        content.append(button); // append button to content div

        // create a "SHIFT UP" labeled button for GPIO 24
        button = webiopi().createGPIOButton(24, "SHIFT UP");
        content.append(button); // append button to content div

        // create a "SHIFT DOWN" labeled button for GPIO 25
        button = webiopi().createGPIOButton(25, "SHIFT DOWN");
        content.append(button); // append button to content div

    });

    </script>
    <style type="text/css">
        button {
            display: block;
            margin: 5px 5px 5px 5px;
            width: 200px;
            height: 45px;
            font-size: 16pt;
            font-weight: bold;
            color: black;
        }

        input[type="range"] {
            display: block;
            width: 160px;
            height: 45px;
        }       
        #gpio7.LOW {
            background-color: White;
        }       
        #gpio7.HIGH {
            background-color: Green;
        }
        #gpio8.LOW {
            background-color: White;
        }       
        #gpio8.HIGH {
            background-color: Red;
        }
        #gpio9.LOW {
            background-color: White;
        }       
        #gpio9.HIGH {
            background-color: Green;
        }
        #gpio10.LOW {
            background-color: White;
        }       
        #gpio10.HIGH {
            background-color: Green;
        }
        #gpio11.LOW {
            background-color: White;
        }       
        #gpio11.HIGH {
            background-color: Yellow;
        }
        #gpio23.LOW {
            background-color: White;
        }       
        #gpio23.HIGH {
            background-color: Yellow;
        }
        #gpio24.LOW {
            background-color: White;
        }       
        #gpio24.HIGH {
            background-color: Blue;
        }
        #gpio25.LOW {
            background-color: White;
        }       
        #gpio25.HIGH {
            background-color: Blue;
        }

    </style>
</head>
<body>
    <div style="text-align:center;"><img src="http://192.168.0.14:8080/?action=stream" width="640" height="480"></div>  
    <div style="text-align:center;"><img src="http://goo.gl/S0jnL" width="200" height="200"></div>
    <div id="content" align="center"></div> 
</body>
</html>
4

1 回答 1

0

I added float:Left; to the CSS and the buttons are now horizontally aligned:

#controls button {
display: block;
margin: 20px 20px 20px 20px;
width: 60px;
height: 20px;
font-size: 8pt;
font-weight: bold;
color: white;
float:left;

My application is similar to yours...live video with GPIO buttons around the border. I'm no expert, just sharing what I have discovered. I hope this helped...

于 2014-03-26T23:32:21.433 回答