Hallo
als Neueinsteiger habe ich nun versucht nach diesem Beispiel mich in die Thematik einer Weboberfläche für meinen Pi rein zu "wurschteln".
Soweit funktioniert es auch.
Ich habe nun auch einen zweiten Button eingefügt der auch einen zweiten Ausgang (Relais) ansteuert.
Soweit habe ich das nun auch verstanden.
Leider sind die Buttons nun horizontal zentriert und untereinander.
Ich würde sie aber gerne frei positionieren am besten mit Koordinaten, damit ich später über ein Hintergrund Bild legen kann.
Z.B. Grundriss = Türöffner
Kann mir jemand sagen wo im html File man dies am geschicktesten tut und wie.
Ich habe schon einiges ausprobiert. Ich habe es auch geschafft einen Button zu plazieren allerdings lagen dann beide ander Stelle.
Hier der momentane Code
<!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">
<title>WebIOPi | Light Control</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
// Create a "Light" labeled button for GPIO 17
var button1 = webiopi().createGPIOButton(17, "Ausg1");
var button2 = webiopi().createGPIOButton(18, "Ausg2");
// Append button to HTML element with ID="controls" using jQuery
$("#controls").append(button1);
$("#controls").append(button2);
// Refresh GPIO buttons
// pass true to refresh repeatedly of false to refresh once
webiopi().refreshGPIO(true);
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 24pt;
font-weight: bold;
color: white;
}
#gpio17.LOW {background-color: Black;}
#gpio17.HIGH {background-color: Blue;}
#gpio18.LOW {background-color: GREEN;}
#gpio18.HIGH {background-color: RED;}
</style>
</head>
<body>
<div id="controls" align="center"></div>
</body>
</html>
Alles anzeigen
BYe André