• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[HOW-TO/TUTORIAL] [html,JavaScript] submit-Button: Funktion & Verknüpfung

M

Makkez

New member
Hallo,

als totaler Programmieranfänger wende ich mich mit einem Problem an
euch. Ich hoffe sehr, dass ihr mir helfen könnt. Vielleicht ist es
möglich, dass ihr mir einige Code-Zeilen mir Erklärung schicken könntet,
dann blicke ich auch durch ;-)

Nun zum Projekt:

Ich habe 6 Buttons erzeugt:
Kategorie: Funktion
Richtung: 1. Rechts 2. Links
Geschwindigkeit: 3. Schnell 4.Langsam
Betrieb: 5. Start 6. Stopp

Hinter diesen Buttons werden GPIOs gesteuert die wiederum Relais
steuern. Die Kombination der erzeugten Buttons und der Steuerung der
GPIOs funktioniert problemlos.

Nun möchte ich aber folgende Erweiterung der Buttons vornehmen, wozu
jedoch meine Kenntnisse nicht ausreichen:

1.) Beispielabfolge: Ich wähle "Rechts" aus, Relais schaltet. Danach
wähle ich "Langsam" aus, Relais schaltet. Danach drücke ich Start,
Relais schaltet und der Motor an dem alles hängt dreht sich. Da der
Motor während des Betriebes nicht direkt mit Links in die andere
Drehrichtung befördert werden darf, sondern über Stopp, soll der Button
"Links" während des Betriebes "nicht anklickbar"/gesperrt sein. Erst
wenn Stopp gedrückt worden ist, sollen "Rechts" und "Links" wieder
auswählbar sein. Für die andere Richtung soll natürlich "Rechts" während
des Betriebes nicht auswählbar sein.

2.) Zur Benutzerfreundlichkeit habe ich schon ein kleines Programm
geschrieben, welches erweitert werden soll. Fährt man mit der Maus auf
einen Button, verfärbt er sich grau. Drückt man drauf, wird er Rot. Das
klappt allerdings nur für den "Start"-Button und auch nur im
Zusammenhang aller Buttons und nicht Kategorie-unterteilt. Man soll für
die jeweilige Kategorie erkennen können, welcher Button gerade aktiv
ist.

Vielen Dank schon mal im voraus.
Makkez

Anbei mein bisheriger Code:
HTML: 
<HTML><Body><Script Language="JavaScript" Type="Text/JavaScript">
var Buttons = document.getElementsByName("START");
 
var Active = "";
 
function CheckButton(Num) {
        if (Active != "" && Active != Num) {
            Buttons[Active].style.backgroundColor = "#FFFFFF";
        }
        Buttons[Num].style.backgroundColor = "#F08080";
        Active = Num;
}
 
function ChangeColor (Num, Color){
    if (Active != Num) {
        switch (Color) {
            case '0':
                Buttons[Num].style.backgroundColor = "#DCDCDC";
                break;
            case '1':
                Buttons[Num].style.backgroundColor = "#FFFFFF";
                break;
        }
    }
}

<html><body><hl><b>STEUERUNG </hl>
<hr />

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Projekt: Gelbe Tonne</title>
</head>
<body>
<br>
<b>Betrieb:
<form method="get" action="gpio.php">
<input type="submit" value="Start" name="START" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('0','0')" onMouseOut="ChangeColor('0','1')" onClick="CheckButton('0')">
<input type="submit" value="Stopp" name="STOPP" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('1','0')" onMouseOut="ChangeColor('1','1')" onClick="CheckButton('1')"> 
<br>
<br>
<b>Geschwindigkeit:
<br>
<form method="get" action="gpio.php">
<input type="submit" value="Langsam" name="LANGSAM" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('2','0')" onMouseOut="ChangeColor('2','1')" onClick="CheckButton('2')">
<input type="submit" value="Schnell" name="SCHNELL" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('3','0')" onMouseOut="ChangeColor('3','1')" onClick="CheckButton('3')">
<br>
<br>
<b>Richtung:
<br>
<form method="get" action="gpio.php">
<input type="submit" value="Rechts" name="RECHTS" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('4','0')" onMouseOut="ChangeColor('4','1')" onClick="CheckButton('4')">
<input type="submit" value="Links" name="LINKS"   style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('5','0')" onMouseOut="ChangeColor('5','1')" onClick="CheckButton('5')">



</form>

<?php
$modeon16 = trim(@shell_exec("/usr/local/bin/gpio -g mode 16 out"));
if(isset($_GET['START'])){
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 16 1"));
}

else if(isset($_GET['STOPP'])){
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 16 0"));
}

?>
</body>
</html>

</form>

<?php
$modeon12 = trim(@shell_exec("/usr/local/bin/gpio -g mode 12 out"));
if(isset($_GET['LANGSAM'])){
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 12 1"));
}

else if(isset($_GET['SCHNELL'])){
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 12 0"));
}
?>

</body>
</html>

</form>

<?php
$modeon20 = trim(@shell_exec("/usr/local/bin/gpio -g mode 20 out"));
if(isset($_GET['RECHTS'])){
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 20 1"));
}

else if(isset($_GET['LANGSAM'])){
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 20 0"));
}
?>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben