Beiträge von Sempervivum

IMO immer dann, wenn Daten anders nicht verfügbar sind. Beispiel Börsenkurse: Man kann sie weder selber erfassen noch berechnen sondern man ist auf eine Quelle angewiesen wo man sie abfragen kann. Oder die im Moment gerade angesagten Kryptowährungen.

Kein Problem, so etwas passiert. Hauptsache es funktioniert am Ende!

Das Javascript fügt ja dem Alert-Element die Klasse "visi" hinzu. Ist dir der HTML-Inspektor ein Begriff? Rechtsklick auf ein Element und dann "Element untersuchen" o. ä., je nach Browser. Dann das Alert-Element im HTML heraus suchen.

Sieht bei mir so aus:

html-seminar.de/woltlab/attachment/3128/

D. h. das CSS ist wirksam. Welche Version von Bootstrap hast Du denn, ich habe 4?

Prüfe doch mal mit dem HTML-Inspektor, ob die Klasse "visi" auch richtig gesetzt wird.

Das hat nichts zu bedeuten, er kann keine Sourcemap laden.

Ich habe das jetzt Mal getestet, ohne das Ajax, und es funktioniert einwandfrei. Was heißt denn, dass es nicht funktioniert, wahrscheinlich wird das Alert-Fenster nicht sichtbar?

Ja genau, die Klasse wird mit Javascript gesetzt und im CSS dann entsprechend die Sichtbarkeit gesteuert.

Gibt die Console irgend einen Hinweis?

... soeben getestet, Bootstrap-Alert ist im Grundzustand sichtbar. Daran kann es also nicht liegen.

Wie gesagt, ungetestet. Ich hatte da einen Schreibfehler, ich glaube "errror" mit drei "r" im HTML. Checke noch Mal genau die Schreibweise. Und wenn es dann nicht funktioniert, wird einen Blick in die Console.

Das scheint mir Bootstrap zu sein. Es könnte sein, dass solch ein Alert im Grundzustand unsichtbar ist - ich werde das untersuchen ...

Zitat

Ich hab nen Online-Kurs zu CSS und HTML gemacht und da wurden floats als gängig dargestellt.

Das ist nichts ungewöhnliches, es geistern jede Menge veraltete Anleitungen, Tutorials etc. im Netz herum. Besser auf die bewährten Quellen wie Selfhtml und MDN setzen.

Das Sichtbarmachen im Fehlerfall ist kein Problem:

    <script>
        $(document).ready(function() {
            function updateData () {
                $.getJSON('laden.php', function(response) {
                    // hier steht die Antwort vom Server als Objekt bzw. ass. Array in response zur Verfügung
                    $('#current-value').text(response.current);
                    const einlassEle = $('#einlass-value'),
                        alertEle = $('#alert-einlass-error');
                    if (response.einlass == 'error') {
                        einlassEle.text('E');
                        // wir setzen eine Klasse, die anzeigt, dass der Sensor
                        // fehlerhaft ist. Damit kann dann mit CSS eine entspr.
                        // Ausleuchtung veranlasst werden.
                        einlassEle.addClass('error');
                        alertEle.addClass('visi');
                    } else {
                        einlassEle.text(response.einlass);
                        einlassEle.removeClass('error');
                        alertEle.removeClass('visi');
                    }
                });
            }
        
            updateData();
            var interval = setInterval(updateData, 1000);
        
        });
        </script>

<div class="container" id="alert-einlass-error">
    <div class="alert alert-danger" style="margin: 10px auto; width: 50%" role="alert">
        <b>Fehler | </b>Sensor 2 Fehlerhaft oder nicht vorhanden!
    </div>
</div>

#alert-einlass-error {
    display: none;
}
#alert-einlass-error.visi {
    display: block;
}

(ungetestet)

Was meinst Du denn genau mit dieser Textbox? So eine Art Tooltipp, der die Seite überlagert? Oder ein Textfeld, das in der Seite integriert ist und nur angezeigt wird, wenn der Sensor OK ist?

Hallo Kilian, der beschriebene Effekt kommt dadurch zu Stande, dass die Bilder die Navigation überdecken. Weil sie transparent sind, scheint die Navigation durch. Warum dann aber nach abgeschlossener Animation des Bildes die Navigation auf einmal in den Vordergrund rückt, ist mir nicht klar. Eines der Mysterien von CSS? Auf jeden Fall konnte ich im HTML-Inspektor die beiden Navs dauerhaft in den Vordergrund bringen, indem ich ihnen einen hohen z-index verpasst habe, z. B. z-index: 999;

BTW: Überwiegend bist Du mit deinem CSS auf dem neuesten Stand und verwendest Grid und Flex. So weit schon mal sehr gut. In der mobilen Navigation finde ich jedoch einige floats und das trübt das Bild ein wenig. Vielleicht diese auch noch durch Flex oder Grid ersetzen?

Kein Problem, Du brauchst nur einen bestimmten markanten Wert im Fehlerfall zu übertragen, dann kannst Du auf der Clientseite darauf reagieren und die Ausgabe z. B. mit roter Farbe oder/und einem passenden Icon zu kennzeichnen:

<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
try{
    $dbv = new PDO('mysql:host=localhost;dbname=temperatur;charset=utf8', 'root', 'rasp');
    $dbv->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(EXCEPTION $e){
    echo "Ein Fehler ist aufgetreten: " . $e->getMessage();
    exit();
}
$sensor1 = exec('cat /sys/bus/w1/devices/10-000801491f60/w1_slave | grep t=');
$sensor1 = explode('t=', $sensor1);
$sensor1 = $sensor1[1] / 1000;
$sensor1 = round($sensor1, 1);
$sensor2 = exec('cat /sys/bus/w1/devices/10-00080149595b/w1_slave |grep t=');
if(empty($sensor2)) {
    $sensor2 = 'error'; // <-- dieser Wert zeigt einen Fehler an
} else {
    $sensor2 = explode('t=', $sensor2);
    $sensor2 = $sensor2[1] / 1000;
    $sensor2 = round($sensor2, 1);    
}
####### Werte aus der Datenbank auslesen und fetchen #######
$sql = "SELECT high_temp, low_temp FROM water_temp";
$result = $dbv->query($sql);
$row = $result->fetch();
$values = [
    'current' => $sensor1, 
    'einlass' => $sensor2,
    'high' => $row['high_temp'],
    'low' => $row['low_temp']
];
echo json_encode($values);
?>

    <script>
        $(document).ready(function() {
            function updateData () {
                $.getJSON('laden.php', function(response) {
                    // hier steht die Antwort vom Server als Objekt bzw. ass. Array in response zur Verfügung
                    $('#current-value').text(response.current);
                    const einlassEle = $('#einlass-value');
                    if (response.einlass == 'error') {
                        einlassEle.text('E');
                        // wir setzen eine Klasse, die anzeigt, dass der Sensor
                        // fehlerhaft ist. Damit kann dann mit CSS eine entspr.
                        // Ausleuchtung veranlasst werden.
                        einlassEle.addClass('error');
                    } else {
                        einlassEle.text(response.einlass);
                        einlassEle.removeClass('error');
                    }
                });
            }
        
            updateData();
            var interval = setInterval(updateData, 1000);
        
        });
        </script>

Offene Frage: Der Sensor 1 kann doch wahrscheinlich auch fehlerhaft sein?

BTW: Ich würde ja bevorzugen, den Sensor auf direktem Wege zu prüfen:

$sensor2 = '0'; // nur zum Testen
$result = preg_match('/t=([0-9.]+)/', $sensor2, $matches);
if ($result == 1) {
    // Regex passt, wir koennen davon ausgehen,
    // dass der Sensor OK ist
    // Temperatur steht in $matches[1] zur Verfügung
    $sensor2 = $matches[1];
    // usw.
} else {
    // der Sensor ist fehlerhaft
    $sensor2 = 'error';
}

Wichtig zu wissen, wäre, wie dies zu verstehen ist:

Zitat

Und zwar ist es so, das sobald 1 Sensor fehlt, der Wert "0" angezeigt wird. Dafür aber auch der Sensor2 nicht mehr die Temperatur anzeigt sondern einfach nichts mehr ausgibt.

Was kommt vom Sensor, wenn er gestört ist? Im Gutfall etwas in der Form 't=22.7'. Wie sieht das im Fehlerfall aus? Mal mit var_dump ausgeben lassen.

Für das $(document).ready(function(){ gibt es auch eine Version in Vanilla-JS, die das selbe bewirkt:

https://developer.mozilla.org/de/docs/Web/AP…entLoaded_event

Alternativ kann man das Javascript auch an das Ende des Body, vor das schließende </body>, stellen, dann ist auch sicher gestellt, dass die Elemente im DOM existieren.

PS:

Zitat

Das habe ich parallel auch von dem Ersteller der Hauptanwendung empfohlen bekommen, da es wohl insbesondere bei komplexeren Dingen helfen kann.

Das traf vor 10, 20 Jahren zu, aber heute nur noch sehr eingeschränkt, da es sehr vieles, was früher den Nutzen von jQuery ausgemacht hatte, inzwischen auch in Vanilla-Javascript gibt, z. B. classList oder die Funktion closest. Wenn Du noch am Beginn bist, empfehle ich, nicht in jQuery einzusteigen.

Zitat

Wenn ich deinen Link richtig verstehe ist es so, dass Dinge innerhalb einer Funktion einander erreichen, ich aber mittels window.farbwechsler = farbwechsler eine Freigabe erreichen könnte?

Ja, das trifft zu, ich bin nur der Meinung, dass es dann einfacher und übersichtlicher wäre, die Funktion gleich im globalen Namespace zu definieren.

Hallo Christian und willkommen im Forum!

Zitat

Es ist auch JScript eingebunden, da die Scriptvorlage die ich gefunden und angepasst habe dies nutzt. Das funktioniert auch. Wenn ich es recht verstanden habe ist im JScript $ als "Zentraler Name" definiert. Das finde ich aber nirgends und ich vermute, dass ich einfach den Wald vor lauter Bäumen nicht sehe

Verwechselst Du hier vielleicht JScript mit jQuery? jQuery bindest Du nämlich ein und zwar hiermit:

<script src="/EditTemplate/jquery-3.5.0.js"></script>

Und in jQuery ist $ der zentrale Funktionsname.

Was bedeutet das #(FileID) hier?

var requestURL = 'https://example.com/coloring/api/colorinfo/'+#(FileID)+'/'+#(FileID)+'/0';

Der Kern der Sache scheint mir jedoch dieses zu sein:

Zitat

Hier bekomme ich immer einen Fehler in der Konsole, da er hier die Funktion aus dem oberen Script-Bereich nicht erkennt. Eigentlich ist der Plan dies in das AJAX Script für die JSON Abfrage zu integrieren, da der Rückgabewert den ersten Parameter darstellt.

Der Grund dafür, dass er die Funktion nicht erkennt, ist, dass diese weiter oben innerhalb der anonymen Funktion von

$(document).ready(function(){

definiert wird.

Außerhalb ist sie dann nicht bekannt, siehe hier:

https://stackoverflow.com/questions/7295…nested-function

Zitat von Stackoverflow

The functions defined within another function won't be accessible outside the function

Zusätzlich musst Du jedoch folgendes beachten:

Verwendest Du Ajax, ist das xhr.response erst verfügbar, wenn die Antwort vom Server eingetroffen ist, bzw. wenn die anonyme Funktion aufgerufen wird, die Du xhr.onload zugewiesen hast. D. h. alles was die Antwort vom Server bzw. die Farbcodes braucht, musst Du innerhalb dieser Funktion erledigen.

Jetzt haben sich unsere Postings wahrscheinlich überschnitten. Dies trifft nicht zu:

Zitat

Ich glaube bald, dass man in dem Queryselector keine Variablen einsetzen kann, bzw. darf.

Lies mein Posting #3 oben.

Ich denke mal, der TO will die Variable click in den Selektor einfügen. Dann musst Du, EinfachIch, sie so verketten:

var info = document.querySelector(".plan:nth-child(" + click + ")").textContent;

Und beachte Klein- und Großschreibung: Das "S" in querySelector und das "C" in textContent müssen groß geschrieben werden.

Und Code besser in Textform posten mit Copy&Paste und Codetags verwenden, das </> rechts oben in der Werkzeugleiste.