Jetzt eigener Thread für Loxberry HTML AJAX

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • Peter B
    MS Profi
    • 29.08.2015
    • 537

    Jetzt eigener Thread für Loxberry HTML AJAX


    Hallo

    kann mir jemand einen Tipp geben Wie ich aus der SQ2lox.php oder aus der sq2lox bash Datei werte auf eine Homepage bringe ohne das Ich die dauernd aktualisieren muss?


    Ich möchte eine Website machen wo die wichtigsten Sachen angezeigt werden so als Überblick: Uhrzeit Temperatur, Titel und Artist von Squeezelite, Störungen von der Lox,, Schlagzeilen, Wetter.....Die Seite soll immer am Bildschirm stehen aber immer aktuelle Werte anzeigen ohne Seiten refresh...

    Ich hab auch die Titel Wetter Uhrzeit u Schlagzeilen schon drauf aber nur muss Ich halt dauernd die Seite aktualisieren.


    Ich Google mir schon die Finger wund (3 Tage bin Ich da schon dran) hab jetzt das gefunden und probiert "http://www.tinkerforge.com/de/doc/Kits/WeatherStation/PHPToWebsite.html#schritt-3-alles-zusammenfugen" funktioniert aber noch nicht, wenn Ich die PHP Datei aufrufe werden die Daten im Json format ausgegeben aber in der html Datei kommen noch keine Daten an. Ich werd jetzt mal auf PHP5 updaten und dann noch mal probieren

    Das ist die Ausgabe der PHP Datei {"illuminance":"Illuminance: Leuchtturm%20(new%20Version)%20","humidity":"Humid ity: Nena","air_pressure":"Air Pressure: 60","temperature":"Temperature: 1"}Power: 1 Ich hab da mal die Original Variablen gelassen um nicht noch zusätzliche Fehler reinzubringen.


    und das ist meine HTMl Datei

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Tinkerforge Weather Station</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
    function updateMeasurements(){
    $.ajax({
    url: "sq2lox.php",
    type: "POST",
    success: function(data) {
    var response = $.parseJSON(data);
    document.getElementById('illuminance').innerHTML = response.illuminance;
    document.getElementById('humidity').innerHTML = response.humidity;
    document.getElementById('air_pressure').innerHTML = response.air_pressure;
    document.getElementById('temperature').innerHTML = response.temperature;

    }

    });
    }



    updateMeasurements();
    setInterval(updateMeasurements, 7000);
    </script>
    </head>
    <body>

    <p id="illuminance">TBD</p>
    <p id="humidity">TBD</p>
    <p id="air_pressure">TBD</p>
    <p id="temperature">TBD</p>



    </body>
    </html>


    und das steht am Ausgabeschirm

    TBD

    TBD

    TBD

    TBD
  • Christian Fenzl
    Lebende Foren Legende
    • 31.08.2015
    • 11200

    #2
    Bei deinem jquery fehlt https?
    Zeigt der Browser da keinen Script-Fehler an?
    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

    Kommentar

    • Christian Fenzl
      Lebende Foren Legende
      • 31.08.2015
      • 11200

      #3
      PS: jquery 1.x
      Code:
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

      Kommentar

      • Peter B
        MS Profi
        • 29.08.2015
        • 537

        #4
        Nein keine Fehlermeldung (auch nicht im Apache error Log) und das HTTPS davor ändert auch nichts hab alle 3 Varianten probiert 1.8.0, 3.1.0 und 1.12.4

        Kommentar

        • Peter B
          MS Profi
          • 29.08.2015
          • 537

          #5
          Das hab Ich in der sq2Lox eingefügt

          $illuminance = $title;
          $humidity = $artist;
          $air_pressure = $volume;
          $temperature = $power;


          $response = array (
          "illuminance" => "Illuminance: $illuminance",
          "humidity" => "Humidity: $humidity",
          "air_pressure" => "Air Pressure: $air_pressure",
          "temperature" => "Temperature: $temperature",
          );


          print_r(json_encode($response));


          scheint mir jetzt etwas umständlich aber die Ausgabe stimmt ja oder?

          {"illuminance":"Illuminance: Hitradio%20%C3%963%2099.9%20(Top%2040%2FPop)","hum idity":"Humidity: ","air_pressure":"Air Pressure: 60","temperature":"Temperature: 1"}Power: 1

          Kommentar

          • Peter B
            MS Profi
            • 29.08.2015
            • 537

            #6
            Mit diesem Script funktioniert es

            <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
            $("#lms").load("sq2lox.php");
            var refresh = setInterval(function() {
            $("#lms").load("sq2lox.php");
            console.log(lms);
            }, 5000);
            });
            </script>


            und das ist für die Ausgabe in HTML
            <div id="lms"></div>

            Kommentar


            • Peter B
              Peter B kommentierte
              Kommentar bearbeiten
              Diese Skript übernimmt alles was in der sq2lox mit Echo ausgegeben wird
          • Peter B
            MS Profi
            • 29.08.2015
            • 537

            #7
            so nun habe Ich noch ein kleines Problem

            Wie bekomme Ich die Daten vom Skript oben da unten rein (ins blaue, ist eine Laufschrift) $lms hab Ich schon probiert Beides läuft in der selben index.php Datei

            $ticker= rawurldecode(".......");
            $ticker2=strlen($ticker);
            $ticker3=10+($ticker2*0.13);
            ?>

            <style type="text/css">
            .marquee {
            width: 600px;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            }
            .marquee span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee <?php echo $ticker3;?>s linear infinite;
            -webkit-animation: marquee <?php echo $ticker3;?>s linear infinite;
            -moz-animation: marquee <?php echo $ticker3;?>s linear infinite;
            }
            @keyframes marquee {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
            }
            @-webkit-keyframes marquee {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
            }
            @-moz-keyframes marquee {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
            }
            </style>

            Kommentar


            • Peter B
              Peter B kommentierte
              Kommentar bearbeiten
              oder gibt es eine andere Möglichkeit für eine Laufschrift?
          Lädt...