Datei auslesen und übergeben

  • Schlecht ist es jetzt auch nicht ;)
    Nur ein bisschen ein Hack, weil man nicht erwarten würde, dass es überhaupt nötig ist. Erfüllt aber doch ganz gut seinen Zweck...


    Zur Sache mit den Einheiten: klar geht das!


    [code=php]
    <div id="chart1" style="[.. .]"><span></span>%</div>
    <div id="chart2" style="[.. .]"><span></span> °C</div>


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


    Und mal wieder aus dem Kopf gecoded und ungetestet, aber das Prinzip sollte klar sein :)


    LG

  • Sehr sehr cool! Prinzip verstanden :D Damit kann man ja jetzt so ziemlich alles "ansprechen" und ändern. :thumbs1: Ich musste nur das hier hinzufügen, weil es sonst einen Zeilenumbruch gab:
    [code=php]<div id="chart1" style="[.. .]"><span style="white-space: nowrap;"></span>%</div>[/php]


    Dann ist mir noch aufgefallen, dass die Div-Breite immer mindestens so groß ist, wie eben die Zahl, die darin enthalten ist - bei 10% und 40% war dann der Unterschied nicht so gewaltig ;) . In deinem Code hab ich dann alles von [font="Courier New"]px[/font] auf [font="Courier New"]%[/font] geändert und außen noch einen Div gesetzt mit einer fixen Breite von [font="Courier New"]200px[/font]. Mit [font="Courier New"]text-shadow[/font] hab ich zum Schluss den Text etwas lesbarer gemacht..


    Der Code sieht jetzt so aus:
    [code=php]<td colspan="2"><div style="width: 200px"><div id="chart1" style="background-color:#04B404; padding: 0px 0px 0px 5px; margin:0px; width: 10px; display: inherit; color:white; font-weight: bold; text-shadow: 0 0 5px black;"><span style="white-space: nowrap;"></span>%</div></div></td>
    [..]
    <script type="text/javascript">
    $(document).ready(function () {
    setInterval(function () {
    $('#line1').load('../dect_line1.txt');
    $('#line1a').load('../dect_line1a.txt');
    $('#line2').load('../dect_line2.txt');
    $('#line3 span').load('http://192.168.178.45/dect_line3.txt');
    $('#line3').css({'width': $('#line3 span').html().trim() + '%'});
    $('#line4 span').load('http://192.168.178.45/dect_line4.txt');
    $('#line4').css({'width': $('#line4 span').html().trim() + '%'});
    $('#line5 span').load('http://192.168.178.45/dect_line5.txt');
    $('#line5').css({'width': $('#line5 span').html().trim() + '%'});
    $('#chart1 span').load('http://192.168.178.45/ups-status2.txt');
    $('#chart1').css({'width': $('#chart1 span').html().trim() + '%'});
    $('#chart2 span').load('http://192.168.178.45/ups-status1.txt');
    $('#chart2').css({'width': $('#chart2 span').html().trim() + '%'});
    $('#chart3 span').load('http://192.168.178.45/ups-status3.txt');
    $('#chart3').css({'width': $('#chart3 span').html().trim() + '%'});
    }, 5000);
    });
    </script>
    [/php]


    ..und hier das Ergebnis im Browser am PC:

    Ich glaube, das kann sich sehen lassen ;) ohne deine Hilfe, aber fast unmöglich :danke_ATDE: :danke_ATDE: :danke_ATDE:

  • Sehr schön :)


    Nur so eine Klugsch*iß-Anmerkung am Rande: Bei absoluten Werten, ergeben Balken wenig Sinn, da man ja keinen Anteil von einem Ganzen anzeigt. Dennoch passt es so natürlich besser ins Gesamtbild.

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