Datei auslesen und übergeben

  • Hallo zusammen,


    ich möchte für meinen "MagicMirror" ein paar Daten nicht nur als "Zahl" angezeigt bekommen, sondern über einen horizontalen Balken optisch ein wenig hervorheben.


    Das ist eine Zeile, die einen Wert (z.B. 28) aus der Datei "ups-status1.txt" alle 5 Sekunden abfragt und darstellt:
    [code=php]
    [...]
    <span id="line1"> </span>
    [...]
    <script type="text/javascript">
    $(document).ready(function() {
    setInterval( function(){
    $('#line1').load('../ups-status1.txt');
    }, 5000);
    });
    </script>
    [...][/php]


    Meine Idee wäre jetzt, das ganze einfach und schnell über ein farbiges DIV mit variabler Breite:
    [code=php]
    [...]
    <div id="usvchart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div>
    [...]
    <script type="text/javascript">
    $(document).ready(function() {
    setInterval( function(){
    $('#line1').load('../ups-status1.txt');
    document.getElementById('usvchart1');
    usvchart1.style.width = "#line1" + "px";
    }, 5000);
    });
    </script>
    [/php]


    Normalerweise ist meistens der debugger mein Hinweisgeber, diesmal liefert er mir keine Fehler :s
    Nach unzähligen Versuchen/Änderungen bin ich nun ratlos und hoffe, ihr habt den entscheidenden Tipp für mich :D

  • Du setzt width auf einen String value, ergo keinen gültigen Wert - oder verstehe ich das hier falsch?

    Code
    usvchart1.style.width = "#line1" + "px";
    // result: usvchart1.style.width = "#line1px";

    .NET-, Unity3D-, Web-Dev.
    Mikrocomputer-Hobbyist.

  • 1) Warum mischst du jQuery und vanilla JS? Wenn es geht, lass jQuery doch weg oder mach halt alles mit der $("selector") Syntax ;)
    2) AJAX/AJAJ mit relativen Pfaden? Das wird nicht gehen... Du brauchst den Pfad absolut mit oder ohne domain (example.com/meine/datei.txt oder /meine/datei.txt oder meine/datei.txt)
    3) Die Zeile document.getElementById('usvchart1'); ist ohne Funktion. Denke du wolltest eine Zuweisung (usvchart1 = document.getElementById(...);)
    4) Wie schon angemerkt, mit usvchart1.style.width = "#line1" + "px"; wird das nix.
    Wie wär's mit:


    [code=php]
    [...]
    <div id="usvchart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div>
    [...]
    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#line1').load('/pfad/zu/ups-status1.txt');
    $('#usvchart1').css({'width': $('#line1').html() + 'px'});
    }, 5000);
    });
    </script>
    [/php]


    LG

  • Danke für eure schnellen Antworten ;)


    Quote from &quot;Renão&quot; pid='297981' dateline='1504299686'


    Du setzt width auf einen String value, ergo keinen gültigen Wert - oder verstehe ich das hier falsch?

    Code
    usvchart1.style.width = "#line1" + "px";
    // result: usvchart1.style.width = "#line1px";


    Okay, jetzt wo du es erwähnst.. Da hätte ich (unabhängig vom rest) erst einer Variablen den Wert der txt-Datei zuweisen sollen..


    Quote from &quot;linusg&quot; pid='297995' dateline='1504303915'


    1) Warum mischst du jQuery und vanilla JS? Wenn es geht, lass jQuery doch weg oder mach halt alles mit der $("selector") Syntax ;)
    2) AJAX/AJAJ mit relativen Pfaden? Das wird nicht gehen... Du brauchst den Pfad absolut mit oder ohne domain (example.com/meine/datei.txt oder /meine/datei.txt oder meine/datei.txt)
    3) Die Zeile document.getElementById('usvchart1'); ist ohne Funktion. Denke du wolltest eine Zuweisung (usvchart1 = document.getElementById(...);)
    4) Wie schon angemerkt, mit usvchart1.style.width = "#line1" + "px"; wird das nix.


    1) Oh, als Anfänger sind mir die Unterschiede nicht immer auf Anhieb ersichtlich :blush: Ich tendiere aber eher in Richtung VanillaJS und lass dann jQuery weg
    2) Ah okay, wusste ich vorher nicht
    3) :thumbs1:
    4) :thumbs1:


    Ich hab mich mal mit dem Code aus deinem Beispiel beschäftigt und trotz allem will das nicht funktionieren. :s Könnte es vielleicht daran liegen, dass der Wert aus der txt-Datei nicht als Zahl interpretiert wird? Wenn ich die Datei mit vi öffne, ist wirklich nur die Zahl z.B. 28 in der Datei...

  • Achso okay :D


    Wenn ich das einfüge, erscheint ein Popup mit dem Inhalt [font="Courier New"]undefinedpx[/font] und wenn ich es wegklicke, erneut nach 5 Sekunden.

  • zu 1.) Ja, jQuery ist noch drin, weil andere Module das nutzen (SmartMirror basiert auf Glancr)


    zu 2.) Ja, wir kommen tatsächlich näher :D Ich hab die IDs angepasst, weil ich zuerst dachte, dass die letzte Zeile im setInterval so interpretiert wird:

    Code
    $('#AUSZUWÄHLENDES-ELEMENT-ID').css({'WAS-WIRD-GEÄNDERT': $('#WERT-AUS-DER-DATEI').html() + 'px'});


    Das hier hab geändert.. (ausnahmsweise nicht im Code-Block ;) )
    [font="Courier New"][...][/font]
    [font="Courier New"]<div id="usvchart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div>[/font]
    [font="Courier New"][...][/font]
    [font="Courier New"]<script type="text/javascript">[/font]
    [font="Courier New"] $(document).ready(function () {[/font]
    [font="Courier New"] setInterval(function () {[/font]
    [font="Courier New"] $('#line1').load('/pfad/zu/ups-status1.txt');[/font]
    [font="Courier New"] $('#usvchart1').css({'width': $('#line1').html() + 'px'});[/font]
    [font="Courier New"] }, 5000);[/font]
    [font="Courier New"] });[/font]
    [font="Courier New"]</script>[/font]


    Ich hab nun den Code geändert und er sieht jetzt so aus:
    [code=php][...]
    <div id="chart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div>
    [...]
    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#chart1').load('/pfad/zu/ups-status1.txt');
    $('#usvchart1').css({'width': $('#chart1').html() + 'px'});
    alert($('#chart1').html() + 'px');
    alert($('#chart1'));
    }, 5000);
    });
    </script> [/php]


    Damit bekomm ich jetzt als Popup den Inhalt [font="Courier New"]px[/font] (..auch im 5 Sekunden-Takt nach wegklicken)



    zu 3.) nach dem verbessern bekomm ich ein [font="Courier New"][object Object][/font] nach dem [font="Courier New"]px[/font] und wieder alle 5-Sek. nach wegklicken

  • Aha! :D


    Jetzt sind wir noch weiter. [font="Courier New"]$('#chart1').html()[/font] gibt also einen leeren String zurück. Warum? Keine Ahnung.
    Mit [font="Courier New"]$('#chart1').load('/pfad/zu/ups-status1.txt');[/font] sollte ja die Zahl in der Datei [font="Courier New"]/pfad/zu/ups-status1.txt[/font] in das div mit der id chart1 geschrieben werden. Ist das tatsächlich der Fall, also erscheint eine Zahl?
    Das HTML kannst du ja mal in den developer-tools deines Browsers anschauen. Sollte dann so in etwa sein:

    Code
    <div id="chart1" style="...">28</div>


    Ist das tatsächlich der Fall, sollte [font="Courier New"]$('#chart1').html()[/font] einen String zurückgeben: [font="Courier New"]'28'[/font]. Ansonsten teste es mal mit

    Code
    document.getElementById('chart1').innerHTML


    LG


    PS: Die alerts kannst du jetzt wegmachen, waren nur zum debuggen. [font="Courier New"]$('#chart1')[/font] liefert ein Objekt zurück, das ist doch schon mal ein Anfang...

  • Hm, wie wird die Seite denn aufgerufen?


    Es wird wahrscheinlich ein Webserver laufen, oder? Ich glaube dann passt der Pfad zu der Datei auch nicht sondern müsste eine gültige URI sein (http://smartmirror/pfad/zu/ups.txt) ?!
    Automatisch zusammengefügt:[hr]

    Quote from &quot;linusg&quot; pid='298101' dateline='1504379257'


    Aha! :D


    Jetzt sind wir noch weiter. [font="Courier New"]$('#chart1').html()[/font] gibt also einen leeren String zurück. Warum? Keine Ahnung.
    [...]


    Weil der Inhalt des Nodes leer sein sollte, wenn kein Inhalt aus der Datei gesetzt wurde, oder? Also soweit ich die jQuery Doku verstehe, gibt die Funktion den Inhalt des Nodes aus, oder?

    .NET-, Unity3D-, Web-Dev.
    Mikrocomputer-Hobbyist.

    Edited once, last by Renão ().

  • Quote from &quot;linusg&quot; pid='298101' dateline='1504379257'


    Ist das tatsächlich der Fall, also erscheint eine Zahl?


    Nachdem Renão den Hinweis mit der URI gab, hab ich den Pfad angepasst und zumindest wird nun eine Zahl angezeigt. Lustigerweise war das in meinen bisherigen Code-Blöcken nicht ersichtlich, sorry :daumendreh2: . Ich hatte ursprünglich [font="Courier New"]192.168.178.45/pfad/zu/ups-status1.txt [/font]und hab es nun geändert auf [font="Courier New"]http://192.168.178.45/pfad/zu/ups-status1.txt[/font]. Jetzt wird eine Zahl angezeigt, aber die Breite bleibt unverändert und im Debugger (vom Browser) sieht das in HTML so aus:
    [code=php]<div id="chart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;">100</div>[/php]



    Quote from &quot;Renão&quot; pid='298105' dateline='1504379775'


    Hm, wie wird die Seite denn aufgerufen?


    Ja, es ist ein nginx Webserver am arbeiten mit Glancr in einer VM und über einen Raspberry Pi wird dann der Midori-Browser im Vollbild-/Kioskmodus gestartet. ...und für deinen Tipp mit der URI :thumbs1: (siehe oben ^^)



    EDIT:
    Was macht eigentlich der rote Teil in dieser Zeile:
    [font="Courier New"]$('#usvchart1').css({'width': $('#chart1').html() + 'px'});[/font]
    Sieht für mich als Laie wie eine ID aus, die aber bisher nicht vergeben ist :s

  • Wie, nicht vergeben? Vorhin war sie noch als id eines div vergeben... Zeig dich bitte nochmal den aktuellen Stand deines Codes bzw die relevante Stelle, nur um Missverständnisse zu vermeiden.


    @Reñao: ja, eigentlich schon... Aber der node wird doch mit load gefüllt, es sei denn da läuft was schief. Jetzt gehts ja :)


    LG

  • Wird wohl langsam spät.. Nachdem ich die kurze Panikattacke überstanden hab, hier der Code in zwei "Varianten":


    Mit diesem Code wird zum einen die Zahl angezeigt, aber auch im Browser (Opera->Element Untersuchungen->Network), dass die Datei [font="Courier New"]ups-status20.txt[/font] geladen wurde - zwar aus dem Cache, aber sie hat sich nicht verändert, weil ich zum testen einen festen Wert in eine andere Datei eingetragen hab:

    • [font="Courier New"]ups-status2.txt[/font] = original; Inhalt = [font="Courier New"]100%[/font]
    • [font="Courier New"]ups-status20.txt[/font] = testen; Inhalt = [font="Courier New"]100[/font]
    • beide im gleichen Verzeichnis [font="Courier New"]/var/www/html[/font]


    [code=php]<div id="chart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    [..]
    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#chart1').load('http://192.168.178.45/ups-status20.txt');
    $('#usvchart1').css({'width': $('#chart1').html() + 'px'});
    }, 5000);
    });
    </script>
    [..]
    [/php]


    Und mit dem Code wird weder die Zahl angezeigt, noch die Datei überhaupt geladen.. :s
    [code=php]<div id="usvchart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    [..]
    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#chart1').load('http://192.168.178.45/ups-status20.txt');
    $('#usvchart1').css({'width': $('#chart1').html() + 'px'});
    }, 5000);
    });
    </script>
    [..]
    [/php]


    EDIT: In beiden Fällen bleibt die div Breite bei 10px

  • Ok, ich glaube, du hast uns da mit den verschiedenen IDs verwirrt, die am Ende alle das gleiche Element sein sollen :)


    Wie wär's damit:


    Und lies' am besten nochmal ein kleines Tutorial zu Selektoren und jQuery, dann wird's mit dem Verständnis etwas leichter ;)


    LG

  • Quote from &quot;linusg&quot; pid='298123' dateline='1504386069'


    Ok, ich glaube, du hast uns da mit den verschiedenen IDs verwirrt, die am Ende alle das gleiche Element sein sollen :)


    Ich hoff mir unterstellt niemand böse Absicht :D :D Ein Tutorial werd ich mir dazu definitiv mal ansehen ;)


    Irgendwie klappt das aber trotzdem noch nicht so recht :s Hab zusätzlich mal ein Screenshot angehängt


    [code=php] <tr>
    <td>USV-Akku: </td>
    <td><div id="chart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    </tr>
    <tr>
    <td>USV-Auslastung: </td>
    <td><div id="chart2" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    </tr>
    <tr>
    <td>USV-Zeit: </td>
    <td><div id="chart3" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    </tr>
    </table>
    </div>


    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#chart1').load('http://192.168.178.45/ups-status20.txt');
    $('#chart1').css({'width': $('#chart1').html() + 'px'});
    }, 5000);
    });
    </script>


    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#chart2').load('http://192.168.178.45/ups-status10.txt');
    $('#chart2').css({'width': $('#chart2').html() + 'px'});
    }, 5000);
    });
    </script>


    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#chart3').load('http://192.168.178.45/ups-status30.txt');
    $('#chart3').css({'width': $('#chart3').html() + 'px'});
    }, 5000);
    });
    </script>
    [/php]


  • Kein Problem, das passiert. Im Moment stehe ich auch auf dem Schlauch, was deinen Code angeht. Aber bitte, bitte pack das doch alles in ein <script> tag und einen document ready event handler und ein setInterval!


    Also so: (Nachtrag: weiter unten habe ich das direkt angewendet)


    Das kann so nicht gehen :)
    Lösung: die Methode trim des JS Strings verwenden. Sieht dann bei mir so aus:


    [code=php]
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Test</title>
    </head>
    <body>
    <table>
    <tr>
    <td>USV-Akku: </td>
    <td><div id="chart1" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    </tr>
    <tr>
    <td>USV-Auslastung: </td>
    <td><div id="chart2" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    </tr>
    <tr>
    <td>USV-Zeit: </td>
    <td><div id="chart3" style="background-color:orange; border:0px solid red; padding:0px; margin:0px; height: 10px; width: 10px;"></div></td>
    </tr>
    </table>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script>
    $(document).ready(function () {
    setInterval(function () {
    $('#chart1').load('10.txt');
    $('#chart1').css({'width': $('#chart1').html().trim() + 'px'});
    $('#chart2').load('50.txt');
    $('#chart2').css({'width': $('#chart2').html().trim() + 'px'});
    $('#chart3').load('100.txt');
    $('#chart3').css({'width': $('#chart3').html().trim() + 'px'});
    }, 5000);
    });
    </script>
    </body>
    </html>
    [/php]


    Der relevante Teil:
    [code=php]
    <script>
    $(document).ready(function () {
    setInterval(function () {
    $('#chart1').load('10.txt');
    $('#chart1').css({'width': $('#chart1').html().trim() + 'px'});
    $('#chart2').load('50.txt');
    $('#chart2').css({'width': $('#chart2').html().trim() + 'px'});
    $('#chart3').load('100.txt');
    $('#chart3').css({'width': $('#chart3').html().trim() + 'px'});
    }, 5000);
    });
    </script>
    [/php]


    (Als Webserver habe ich zum testen den WSGI server von Python genommen: [font="Courier New"]python3 -m http.server[/font]. In 10.txt, 50.txt und 100.txt steht jeweils die Zahl. Die Dateien natürlich noch anpassen ;) )


    Ergebnis:


    Ist das Thema erledigt?
    Ja: gut!
    Nein: her mit den Fragen :)


    LG

  • Ach, das break ist in der Textdatei oder durch die Methode?


    Dieses zusätzlich trim funktioniert, ist aber insgesamt ziemlich hässlich ;).

    .NET-, Unity3D-, Web-Dev.
    Mikrocomputer-Hobbyist.

  • Quote from &quot;linusg&quot; pid='298198' dateline='1504442185'


    Aber bitte, bitte pack das doch alles in ein <script> tag und einen document ready event handler und ein setInterval!


    Oh, ja natürlich.. Daran hab ich nicht gedacht :blush:


    Quote from &quot;linusg&quot; pid='298198' dateline='1504442185'


    Kurz und gut: der Fehler war wohl ein Linebreak am Ende von $('#chartX').html(), erkennbar an der Ausgabe in der Konsole


    Ah verstehe, das macht Sinn.. Die Textdateien werden in meinem Fall in etwa so erstellt

    Code
    BEFEHL | grep "beispiel" > /pfad/file.log


    Der Code hier funktioniert einwandfrei :thumbs1:

    Quote from &quot;linusg&quot; pid='298198' dateline='1504442185'



    Ja, eine letzte Frage hab ich schon noch, vor allem, weil ich gerne auf Dauer was lernen möchte :D
    Renão schrieb: "Dieses zusätzlich trim funktioniert, ist aber insgesamt ziemlich hässlich"


    Wenn ich mal von hier zitiere (https://www.w3schools.com/JSREF/jsref_trim_string.asp), steht dort
    [font="Verdana, sans-serif"]

    Quote

    The trim() method removes whitespace from both sides of a string.[/font]

    Quote

    Quote


    [font="Verdana, sans-serif"]Note: The trim() method does not change the original string.[font="Verdana, sans-serif"]

    [/font][/font]
    Klingt für mich als Laie eigentlich nicht schlecht, oder?


    EDIT: Das lässt sich jetzt nur noch übertreffen, wenn ich den Text zwischen den div-Tags "beeinflussen" könnte und sich z.B. [font="Courier New"]%[/font], [font="Courier New"]°C[/font], o.ä. hinzufügen lassen.
    [code=php]<div id="chart1" style="[..] width: 100px;">100%</div>[/php]