Beiträge von Rednose

Rednose

Vielen Dank für eure Hilfe...hab das Ganze auf AJAX "umgebaut"...schaut jetzt sehr gut aus

Rednose

Ahh...danke für die Info

Rednose

Hallo,

vielen lieben Dank für die Hilfe...mit folgendem Code habe ich das gewünschte erreicht....

JavaScript

var selectedFunctions = '';
var selOpts = document.querySelector('#functions').selectedOptions;        
for ( x=0; x<selOpts.length; x++ )
    selectedFunctions += '&functions[]=' + selOpts[x].value;

Rednose

Hallo zusammen,

ich möchte Daten einer HTML-Form an den Server schicken...ich habe das zunächst ganz "klassisch" mit Submitt-Button und PHP realisiert...in etwa so...

PHP

<form class="chronjob" action="chronjobs.php" method="get" >
    <input type="submit" name="submitLoad" value="Load">                         
    <input type="text" name="name" id="name" required value="<?php echo($chronjobConfig1->name)?>">    
</form>

Allerdings stieß ich da auf ein Problem...als Abhilfe wurde mir empfohlen, die Aufgabenstellung mal mit AJAX anzugehen...das schaut grundsätzlich auch gar nicht mal so schlecht aus...allerdings stehe ich gerade vor einer Unwissenheit...

Beim "klassischen" Weg wird der URL-String (z.B: chronjobs.php?submitLoad=value1&name=value2) quasi "automatisch" erstellt. Bei der Verwendung von AJAX muss der URL-String "programmatisch" erstellt werden (siehe myAjax.open(...) im Code-Listing).

Bei einem einfachen Input-Element wie "Text" oder "datetime-local" habe ich das auch noch geschafft...aber bei den Input-Elementen "multiple select/option" und "checkbox" habe ich so meine Probleme...ich bekomme das einfach nicht hin...wie macht man das?

Hier ist mein aktuelles (vereinfachtes) Codelisting...

PHP

function funcSave() {        

    myAjax = new XMLHttpRequest();

    myAjax.onreadystatechange=function(){
        if (myAjax.readyState==4 && myAjax.status==200){
            messageToServer('updateChronjobConfig.fe');
            location.reload();
        }
    };

    myAjax.open("GET","chronjobSave.php?name=" + document.getElementById("name").value +
            "&functions[]=" + document.getElementById("functions").selectedOptions + // Funktioniert nicht
            "&start=" + document.getElementById("start").value, true);                       
    myAjax.send();    
}


<form class="chronjob" name="chronjobConfig">

    Name:                        
        <input type="text" name="name" id="name" required
            value="<?php echo($chronjobConfig1->name)?>">
    <br>
    Start:
        <input type="datetime-local" name="start" id="start"
            value=<?php echo($chronjobConfig1->start)?>>
    <br>
    Repeating:
        <input type="checkbox" name="repeateMon" id="repeateMon" value="Mon"
            <?php echo($chronjobConfig1->isRepeated("Mon"))?>> Mon
        <br>
        <input type="checkbox" name="repeateTue" id="repeateTue" value="Tue"
            <?php echo($chronjobConfig1->isRepeated("Tue"))?>> Tue
        <br>
        <input type="checkbox" name="repeateWed" id="repeateWed" value="Wed"
            <?php echo($chronjobConfig1->isRepeated("Wed"))?>> Wed
        <br>
        <input type="checkbox" name="repeateThu" id="repeateThu" value="Thu"
            <?php echo($chronjobConfig1->isRepeated("Thu"))?>> Thu
        <br>
        <input type="checkbox" name="repeateFri" id="repeateFri" value="Fri"
            <?php echo($chronjobConfig1->isRepeated("Fri"))?>> Fri
        <br>
        <input type="checkbox" name="repeateSat" id="repeateSat" value="Sat"
            <?php echo($chronjobConfig1->isRepeated("Sat"))?>> Sat
        <br>
        <input type="checkbox" name="repeateSun" id="repeateSun" value="Sun"
            <?php echo($chronjobConfig1->isRepeated("Sun"))?>> Sun
        <br>

    <br>
    Functions:
        <select name="functions[]" id="functions" multiple>
        <?php
            foreach ( $chronjobConfig1->availableFunctions as $func ) {
                        
                // Hier wird ausgewertet, welche von den verfügbaren Funktionen ausgewählt sind
                $key = array_search ( $func, $chronjobConfig1->selectedFunctions );
                if ($key !== False) {
                    $isSelected = "selected";
                } else {
                    $isSelected = "";
                }                                    
                echo ("<option name=\"$func\" value=\"$func\" $isSelected>$func</option>\n");
            }
        ?>
        </select>

    <input type="button" name="submitSave" value="Save" onclick="return funcSave()">
</form>

Alles anzeigen

Rednose

Zunächst mal danke für eure Hilfe...

Bin aber gerade etwas überfordert...das ist alles sehr viel Information und kann leider die Zusammenhänge noch nicht erkennen.

Ist es vielleicht möglich, die Codelistings aus #8 rudimentär auf Ajax und EventListening "umzubauen" damit ich mir mehr vorstellen kann?!?

Weiß...klingt jetzt etwas faul...kann mir aber gerade überhaupt nicht vorstellen, was ich machen soll...

Gruß

Rednose

Hab leider noch nie was mit Ajax gemacht...habe da daher bis jetzt immer Berührungsängste gehabt...werde es mir jetzt aber ansehen müssen. Hoffe ich komme weiter

Gruss

Rednose

Hab jetzt mal einen Blick in die Browser-Konsole geworfen...tatsächlich kommt hier ein Fehler:

"Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state."

Wird die Java-Script Funktion über das OnClick-Event des Submit-Buttons aufgerufen, tritt der Fehler nicht auf. Irgend eine Idee, was es da hat? Was bedeutet der Fehler "Still in Connectiong state"?

Gruss

Rednose

Im Grunde schaut das Ganze so aus...

PHP

Chronjobs.php:

<form class="chronjob" name="chronjobConfig" action="chronjobs.php" method="get">
    ....
    irgendwas
    ....
    <input type="submit" name="submitSave" value="Save" >
</form>

<?php
    if (isset ( $_GET ["submitSave"] )) {
        include ("chronjobSave.php");
    }
    echo "<script type=\"text/javascript\">messageToServer('updateChronjobConfig.fe');</script>";
?>

Alles anzeigen

PHP

chronjobSave.php:

<?php
    ...
    // hier finden die Datei-Operationen statt, d.h. das speichern der XML-Files
    ...

    echo '<meta http-equiv="Refresh" content="1; url=chronjobs.php">';     
?>

Wenn ich die Java-Script Funktion aus dem if raus gebe, also so wie hier jetzt gepostet, dann wird das script-Element im Seitenquelltext angezeigt. Aber aufgerufen wird "messageToServer(...)" offensichtlich nicht.

Zitat

Dann würde ich zunächst den GET-Parameter prüfen

Die passen...

Gruss

Rednose

Zitat

Ist zuvor auch die Funktion messageToServer definiert worden?

Ja.

Zitat

Hast Du dir die Quelltextansicht im Browser angesehen, ob das Script-Tag dort angezeigt wird, so wie Du es im PHP-Skript ausgegeben hast?

Wird offensichtlich nicht ausgegeben.

Zitat

$_GET entspricht dem method-Attribut in deinem Formular?

Ja

Rednose

Ich hab's mal so probiert...

PHP

<?php
    if (isset ( $_GET ["submitSave"] )) {
      include ("chronjobSave.php"); // hier wird die Datei-Operation durchgeführt
      echo "<script type=\"text/javascript\">messageToServer('updateChronjobConfig.fe');</script>";
    }
?>

Funkt leider nicht

Rednose

Hallo zusammen,

die Kommunikation zwischen Webseite und Python-Programm habe ich mit Websockets realisiert. D.h. wenn ich bspw. einen Button drücke, dann ruft das OnClick-Event die JavaScript-Funktion "messageToServer(...)" auf. Soweit so gut...

Nun habe ich eine HTML-Form, die beim Drücken des Submit-Buttons ein PHP-File aufruft. In diesem php-File wird bspw. ein XML-File am Web-Server gespeichert. Nach dem erfolgreichen speichern der XML-Datei, möchte ich die JavaScript-Funktion "messageToServer(...)" verwenden, um Python etwas zu kommunizieren.

Eine erste Idee wäre das hier gewesen...

Code

<input type="submit" name="submitSave" value="Save" onclick="messageToServer('updateChronjobConfig.fe')">

Ab und zu funktioniert das auch sogar (eigentlich zu meiner Überraschung)...aber halt nicht immer...leider bin ich zu wenig Experte in Webprogrammierung, aber ich nehme mal an, dass ich ein Timing Problem habe...wichtig ist, dass die Kommunikation zum Python-Programm erst nach dem erfolgreichen schreiben der XML-Datei erfolgt.

Wie löst man so ein Problem? Oder gehe ich das Ganze konzeptionell falsch an?!?! Ist möglicherweise die Kommunikation mit Python durch Websockets nicht das Richtige für diesen Anwendungsfall? Danke für eure Hilfe im Voraus!

Gruß

Rednose

Hallo zusammen,

ich habe mir mit einem Raspberry Pi eine Haussteuerung gebastelt. Die Logik der Haussteuerung wurde mit Python 3 realisiert. Mit PHP/HTML habe ich mir eine kleine rudimentäre Web-GUI erstellt. Der Webserver läuft am selben PI.

Ich möchte nun Daten (z.B. zyklische Temperaturwerte von der Haussteuerung zur GUI oder Eingabe-Parameter von der GUI zur Haussteuerung) zwischen der Web-GUI (PHP) und der Steuerungslogik (Python) austauschen. Wie macht man das? Sind da (Web)Sockets das Richtige? Gibt es Codetemplates für meinen Anwendungsfall.

Schon mal vielen lieben Dank im Voraus für eure Hilfe!

Schöne Grüße!

Rednose

Hallo Sempervivum,

danke für deinen Beitrag...es funkt nun nach meinen Vorstellungen
Hier ist ein kurzer Codeausschnitt:

HTML

<script >
function messageToServer(message) {
ws.send(message);
}




var isMobile = {
   Android: function () {
       return navigator.userAgent.match(/Android/i);
   },
   BlackBerry: function () {
       return navigator.userAgent.match(/BlackBerry/i);
   },
   iOS: function () {
       return navigator.userAgent.match(/iPhone|iPod|iPad/i);
   },
   Opera: function () {
       return navigator.userAgent.match(/Opera Mini/i);
   },
   Windows: function () {
       return navigator.userAgent.match(/IEMobile/i);
   },
   any: function () {
       return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
   }
}; 
</script>




<body>    
   <p>Raffstore 1
    <button id ="btn1">rauf</button>
   </p>     




   <script>
    var touchzone_btn1 = document.getElementById("btn1");

   if (isMobile.any()) {
    touchzone_btn1.addEventListener("touchstart", function() {messageToServer('btn1_onmousedown');}, false); 
    touchzone_btn1.addEventListener("touchend", function() {messageToServer('btn1_onmouseup');}, false);
       } else {
        touchzone_btn1.addEventListener("mousedown", function() {messageToServer('btn1_onmousedown');}, false); 
        touchzone_btn1.addEventListener("mouseup", function() {messageToServer('btn1_onmouseup');}, false);
       } 
</script> 
</body>

Alles anzeigen

Interessant wäre jetzt noch, ob man das noch eleganter lösen kann?!?!

lg Rednose

Rednose

Hallo zusammen,

vielen Dank für eure Beiträge!

@ Sempervivum: werde hoffentlich am Wochenende dazu kommen dein Listing auszuprobieren, schaut sehr interessant aus.

Zitat

Das dein CSS noch ausbaufähig ist wird dir wahrscheinlich selbst klar sein.

Grundsätzlich ist der aktuelle Code nur mal zum Testen...aber ich bin ganz Ohr für Tipps, um mein CSS noch weiter auszubauen

lg, Rednose

Rednose

Hallo MrMurphy,

zunächst danke für deinen Input! Habe den <meta>-Tag hinzugefügt...hat aber leider nichts verändert

Hier ist der originale Code...

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Erste Versuche f&uuml;r die Haussteuerung</title> 
<meta charset="utf-8" /> 







<style> 
button { color: green; padding:20px 50px 20px 50px}h3 { color: red} 







</style> 







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script >var ws = new WebSocket("ws://10.0.0.11:8888/smarthome"); 
ws.onopen = function(evt) {$("#log").text("Client: Websocket wurde geöffnet..."); 




}ws.onmessage = function(evt) { 
$("#log").text(evt.data);console.log('Server: ' + evt.data); 
}ws.onclose = function(evt) {$("#log").text("Client: Websocket wurde geschlossen..."); 
} 
function messageToServer(message) { 
ws.send(message); 
} 




</script> 




<!-- weitere Kopfinformationen --> 
<!-- Kommentare werden im Browser nicht angezeigt. --> 
</head> 




<body> 




<h3>Smart Home</h3> 
<p>Raffstore 1 
<button id ="btn1" onmousedown="messageToServer('btn1_onmousedown');" onmouseup="messageToServer('btn1_onmouseup');">rauf</button> 
<button id ="btn2" onmousedown="messageToServer('btn2_onmousedown');" onmouseup="messageToServer('btn2_onmouseup');">runter</button> 
</p> 
<p>Raffstore 2 
<button id ="btn3" onmousedown="messageToServer('btn3_onmousedown');" onmouseup="messageToServer('btn3_onmouseup');">rauf</button> 
<button id ="btn4" onmousedown="messageToServer('btn4_onmousedown');" onmouseup="messageToServer('btn4_onmouseup');">runter</button> 
</p> 
<p>Raffstore 3 
<button id ="btn5" onmousedown="messageToServer('btn5_onmousedown');" onmouseup="messageToServer('btn5_onmouseup');">rauf</button> 
<button id ="btn6" onmousedown="messageToServer('btn6_onmousedown');" onmouseup="messageToServer('btn6_onmouseup');">runter</button> 
</p> 
<p>alle Raffstore 
<button id ="btn7" onmousedown="messageToServer('btn7_onmousedown');" onmouseup="messageToServer('btn7_onmouseup');">rauf</button> 
<button id ="btn8" onmousedown="messageToServer('btn8_onmousedown');" onmouseup="messageToServer('btn8_onmouseup');">runter</button> 
</p> 
<p>Steckdose 
<button id ="btn9" onmousedown="messageToServer('btn9_onmousedown');" onmouseup="messageToServer('btn9_onmouseup');">Toggle</button> 
</p> 




<p><b>Message:</b></p><div id="log" style="overflow: auto; position: absolute ; overflow-x: hidden; 
width:350px; height:50px; background-color: #c2c7af">...</div></body> 
</html>

Alles anzeigen

lg, Rednose

Rednose

Hallo liebes HTML-Forum,

für mein Raspberry Pi Projekt habe ich eine kleine Webseite eingerichtet mit der ich über das <button>-Tag Leds ansteuern kann. Hier ist zunächst ein kleiner Code-Ausschnitt:

<

p>Raffstore 1
<buttonid ="btn1"onmousedown="messageToServer('btn1_onmousedown');"onmouseup="messageToServer('btn1_onmouseup');">rauf</button>
<buttonid ="btn2"onmousedown="messageToServer('btn2_onmousedown');"onmouseup="messageToServer('btn2_onmouseup');">runter</button>
</p>

Was soll dieser Code nun bewirken? Drückt man einen Button, soll die Led angehen, löst man den Button wieder, soll die Led ausgehen. Also eine Taster-Funktionalität. Das Ganze funktioniert auch einwandfrei im Browser (Chrome) am Desktop-Rechner.
Rufe ich nun diese Website über einen Browser (ebenfalls Chrome) am Android-Tablet auf, ist das Verhalten des Buttons anders. Hier bleibt der Button nach dem Betätigen aktiviert, ein neuerliches Betätigen deaktiviert den Button wieder. D.h. in diesem Fall hat der Button ein Toggle-Verhalten.
Warum ist das so...wie kann man das Taster-Verhalten auch am Android-Tablet erreichen?

Ein weiteres komisches Verhalten habe ich im iPhone-Browser beobachtet...da man die Buttons mit den Fingern am Smartphone / Tablet betätigen möchte, habe ich für das Padding verhältnismäßig großer Werte vergeben. Am Desktop- und Android-Tablet-Browser stimmt die Anzeige auch dementsprechend. Nur im iPhone-Browser werden die Buttons nur sehr klein angezeigt´. Nämlich dem Text des Buttons entsprechend. Warum ist das so und wie kann man die Buttons auch am iPhone größer darstellen?

Ich bin eher ein Rookie was HTML Programmierung anbelangt, vor allem in Verbindung mit Smartphones und Tablets. Aber vielleicht hat ja irgendjemand von euch Antworten für mich?!?!
Danke im Voraus

lg
Rednose

Beiträge von Rednose

Kommunikation mit Python

Erstellen des URL-String für Get-Request

Erstellen des URL-String für Get-Request

Erstellen des URL-String für Get-Request

Kommunikation mit Python

Kommunikation mit Python

Kommunikation mit Python

Kommunikation mit Python

Kommunikation mit Python

Kommunikation mit Python

Kommunikation mit Python

PHP Kommunikation mit Python

Unterschiedliches Verhalten von <button> Tag in Desktop-, Android- und iPhone-Browser

Unterschiedliches Verhalten von <button> Tag in Desktop-, Android- und iPhone-Browser

Unterschiedliches Verhalten von <button> Tag in Desktop-, Android- und iPhone-Browser

Unterschiedliches Verhalten von <button> Tag in Desktop-, Android- und iPhone-Browser