Dashboard variable Bildschirmauflösung

mkaleu · 06.03.2024

Hallo,
ich habe mich hier angemeldet, weil ich hoffe Hilfe bei der Gestaltung meiner Dashboardseiten zu bekommen. Alle Eigenversuche haben bisher nicht geklappt. Ich möchte Daten aus meinem Haus auf meinem Webserver darstellen und möchte die Größe variabel halten, weil die Ausgabe auf verschieden großen Bildschirmen erfolgt.
Hintergrund ist ein Bild auf dem die einzelnen Werte an bestimmten Positionen ausgegeben werden sollen. Je nach Bildschirm soll das als Vollbild erfolgen, wobei die Positionen im Verhältnis bleiben sollen. Nach einigen Sekunden wird die Ausgabe aktualisiert, bzw auf ein anderes Dashboard weitergeleitet. Die Daten in den eckigen Klammern beziehen sich auf die Ausgabe von ESPEasy. Ich habe mal so eine Ausgabe beigefügt.
Einige Zeilen:

HTML:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5; externer link[Anzeige#dashboard]:8080/dashboard.esp"  allow="fullscreen">
<head>
<style>
body {background-color: black;}
.gas          {font-size:20px; padding:5px;background:red;color:white;border-radius:10px; position:absolute;top:132px;left:925px;}
.kollektor    {font-size:20px; padding:5px;background:red;color:white;border-radius:10px; position:absolute;top:75px;left:60px;}
</style>
<font face="Arial" </font>
<div style=" height="800px" width="1280px" allign="center"><img src="externer link/bilder/Heizungsanlage1.jpg"</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="gas">[gaszaehler#Gasuhr_qm] m³</div>
<div class="kollektor">[Paradigma_B#kollektor] °C</div>
</body>
</html>

Sempervivum · 06.03.2024

Hallo und willkommen im Forum!
Es gibt verschiedene Wege, zu erreichen, dass sich die Darstellung an das Browserfenster anpasst:

Die festen Größen für das Bild weg lassen, dann passt sich die Breite an das Browserfenster an. Und statt fester Werte in px für die Positionen der Messwerte in den Rechtecken Prozentwerte. Dann passt sich die Position jeweils an die Größe an.
oder
Alles absolut in px angeben, so wie Du es jetzt begonnen hast und mit Javascript einen Faktor berechnen, um den das Ganze vergrößert oder verkleinert werden muss. Und mit CSS und transform:scale() die Darstellung skalieren. Dann passt sie in das Browserfenster. Vorteil dabei: Man kann es relativ leicht einpassen, so dass die Darstellung vom Seitenverhältnis her gut passt.

Soll man sich das auch auf dem Handy ansehen? Dann wäre das Bild im Querformat ein wenig ungünstig, möglicher Weise müsste man das horizontale Scrollen zulassen.

mkaleu · 06.03.2024

Sempervivum schrieb:
Hallo und willkommen im Forum!
Es gibt verschiedene Wege, zu erreichen, dass sich die Darstellung an das Browserfenster anpasst:

Die festen Größen für das Bild weg lassen, dann passt sich die Breite an das Browserfenster an. Und statt fester Werte in px für die Positionen der Messwerte in den Rechtecken Prozentwerte. Dann passt sich die Position jeweils an die Größe an.
oder
Alles absolut in px angeben, so wie Du es jetzt begonnen hast und mit Javascript einen Faktor berechnen, um den das Ganze vergrößert oder verkleinert werden muss. Und mit CSS und transform:scale() die Darstellung skalieren. Dann passt sie in das Browserfenster. Vorteil dabei: Man kann es relativ leicht einpassen, so dass die Darstellung vom Seitenverhältnis her gut passt.

Soll man sich das auch auf dem Handy ansehen? Dann wäre das Bild im Querformat ein wenig ungünstig, möglicher Weise müsste man das horizontale Scrollen zulassen.

Danke für die Grundinformation, doch mit dem Einbinden von Javascripts habe ich meine Probleme.
Angenommen das Bild hat 1280x800px und die Position
{font-size:20px; padding:5px;background:red;color:white;border-radius:10px; position:absolute; left:1030px; top:310px;}
Wie sähe dann das script aus und wo muss es stehen? Kannst Du mir das bitte mit einer Zeile als Beispiel zeigen?

Sempervivum · 06.03.2024

Ich habe mal eine Demo gemacht, wie das funktioniert:

Code:

<!DOCTYPE html>
<html>

<head>
    <title>irgendetwas</title>
    <meta charset="UTF-8">
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
        }

        #wrapper {
            display: inline-block;
            transform-origin: left top;
        }

        #wrapper img {
            width: 1280px;
            height: 800px;
        }

        .gas {
            font-size: 20px;
            padding: 5px;
            background: red;
            color: white;
            border-radius: 10px;
            position: absolute;
            top: 132px;
            left: 925px;
        }

        .kollektor {
            font-size: 20px;
            padding: 5px;
            background: red;
            color: white;
            border-radius: 10px;
            position: absolute;
            top: 75px;
            left: 60px;
        }
    </style>

</head>

<body>
    <div id="wrapper">
        <img src="images/dashboard-solar.jpg">
        <div class="gas">5,3 m³</div>
        <div class="kollektor">41 °C</div>
    </div>
    <script>
        const
            bdy = document.querySelector('body'),
            wr = document.querySelector('#wrapper'),
            // Seitenverhältnis des Wrappers ermitteln:
            boxWrapper = wr.getBoundingClientRect(),
            ratioWrapper = boxWrapper.width / boxWrapper.height;
        function adjustIt() {
            console.log('fired');
            const
                // Seitenverhältnis des Body ermitteln:
                boxBody = bdy.getBoundingClientRect(),
                ratioBody = boxBody.width / boxBody.height;
            let factor;
            // Ist das Seitenverhältnis des Body größer
            // als das des Wrappers?
            if (ratioBody > ratioWrapper) {
                // Wir müssen die Höhe anpassen
                factor = boxBody.height / boxWrapper.height;
            } else {
                // Wir müssen die Breite anpassen
                factor = boxBody.width / boxWrapper.width;
            }
            // Wrapper mit Bild und Messwerten darin skalieren:
            wr.style.transform = `scale(${factor})`;
        }
        adjustIt();
        window.addEventListener('resize', adjustIt);
    </script>
</body>

</html>

Da zeigt sich auch ein kleiner Nachteil dieser Methode: Die Schrift wird mit skaliert und bei schmalem Bildschirm wird sie recht klein. Da sehe ich zwei Möglichkeiten:

Das Verkleinern nach unten begrenzen, so dass der Benutzer scrollen muss.
Da sich das (schmaler Bildschirm) primär auf dem Handy abspielt, darauf vertrauen, dass der Benutzer zoomt um die Schrift lesen zu können.

mkaleu · 06.03.2024

Zunächst einmal tausend Dank für Deine Hilfe. Hat hervorragend geklappt.
Ich hatte allerdings vergessen die Bilder zu erwähnen, die ich je nach Ereignis noch einfüge. Die erscheinen jetzt riesig. Wie lässt sich das anpassen?
<div class="huawei_ladung_pfeil"><img src="externer link/bilder/p%v13%.gif"height="50" width="40"></div>

Sempervivum · 06.03.2024

Da fehlt ein Leerzeichen vor dem height. Wo hast Du die Bilder denn eingefügt? Sie müssen auf jeden Fall innerhalb des Wrappers stehen. Poste am besten das HTML des Wrappers mit allem was darin ist. Und das CSS für ein Bild.

mkaleu · 06.03.2024

Ich habe mal die Hintergrunddatei und die einzufügende Datei smart1.gif angehängt. In meiner ersten Anfrage ist das Ergebnis zu sehen, wo dann unten die Smart auftauchen soll. Jetzt wird die Datei rechts unten zu groß angezeigt.

Sempervivum · 06.03.2024

Die Erklärung ist, dass dieses CSS:

Code:

        #wrapper img {
            width: 1280px;
            height: 800px;
        }

auch auf das Bild mit dem Smart wirkt und es so groß macht.
Lösung indem wir dem Hintergrundbild eine Klasse, z. B. "background" geben und uns im CSS darauf beziehen:

Code:

<img class="background" src="images/Stromlauf1.jpg">

Code:

        #wrapper img.background {
            width: 1280px;
            height: 800px;
        }

Und, übrigens: Es muss nicht um alles ein div drum herum sein, ohne funktioniert es genau so:

Code:

    <div id="wrapper">
        <img class="background" src="images/Stromlauf1.jpg">
        <div class="gas">5,3 m³</div>
        <div class="kollektor">41 °C</div>
        <img class="smart_bild" src="images/smart1.gif">
    </div>

Code:

        .smart_bild {
            position: absolute;
            top: 580px;
            left: 590px;
            width: 170px;
            height: 170px;
        }

mkaleu · 07.03.2024

Genial, jetzt habe ich es begriffen und kann es jetzt selbstständig modifizieren. Aller Anfang ist schwer und es wird mit dem Alter nicht einfacher. Danke.

mkaleu · 07.03.2024

Hallo Sempervivum, Du hast offensichtlich viel Ahnung von Html und Java. Ich habe da noch eine zweite Sache ungelöst. Wie ja aus dem Vorangegangenem ersichtlich habe ich einige Dashboards auf denen ich Vorgänge und Daten im Haus abbilde. Die Ausgabe erfolgt auf ausrangierten Android Tablets, die auf Grund ihres Alters mache Seiten, meist solche mit Kamerabildern, nicht wiedergeben können. Die Dashboards laufen auf den Webservern von ESPEasy und RPIEasy. Im Kopf gibt es einen refresh link, der nach 5 Sekunden die nächste Seite aufrufen soll. Eine Art Diashow von Informationsseiten. Nun möchte ich, wenn der Browser auf einem Android läuft, die Seiten mit Kamerabildern überspringen. Dazu könnte das OS abfragen, doch wie gelangt dann die Information in den Link? Ich habe mal zwei Ideen eingefügt.

String os = System.getProperty("os.name").toLowerCase();
if (os.contains("win")){
<meta http-equiv="refresh" content="5; URL=zielurl" 4711:8080/dashboard.esp">;
}
else {
<meta http-equiv="refresh" content="5; URL=zielur" 4712:8080/dashboard.esp">;
}
##############################################################################
String os = System.getProperty("os.name").toLowerCase();
if (os.contains("win")){
ip=192.168.0.103;
}
else {
ip=192.168.0.108;
}
<meta http-equiv="refresh" content="5; URL=zielurl//%ip%:8080/dashboard.esp">;

Sempervivum · 07.03.2024

Guten Abend mkaleu,
das ist jetzt ein ziemlich vielschichtiges Problem.

Hast Du auf diesen Android-Tablets schon verschiedene Browser getestet? Wahrscheinlich liegt es ja weniger am Betriebssystem als am jeweiligen Browser.

Statt des meta-refresh würde es sich anbieten, wenn wir uns jetzt nach Javascript begeben, die Weiterleitung mit location zu machen:
https://wiki.selfhtml.org/wiki/JavaScript/Location
und die Verzögerung mit setTimeout:
https://www.javascript-kurs.de/javascript-window-setTimeout.htm
Würde dann in etwa so aussehen:

Code:

    <script>
        const
            nextPage = 'die-nächste-seite.html',
            delay = 5000;
        setTimeout(function () {
            location.href = nextPage;
        }, delay);
    </script>

also recht einfach und übersichtlich.

Alternativ könnten wir der Sache auf den Grund gehen und untersuchen, warum das auf den Android-Geräten nicht funktioniert. Aber ich fürchte, das Ganze ist nicht öffentlich sondern lokal in deinem Heimnetz?

Noch einen Schritt weiter könnte man daran denken, die Seiten mit Ajax zu laden, wie es auch hier empfohlen wird:
https://wiki.selfhtml.org/wiki/HTML...erleitung_zu_anderer_Adresse_.28Forwarding.29
Das hätte den Vorteil, dass dann beim Laden des neuen Inhalts kein Flackern auftritt. Aber ich vermute, da willst Du nicht heran?

mkaleu · 08.03.2024

Guten Morgen. Das Problem liegt an dem alten OS 4.4 der Tablets. Ich habe da schon verschiedene Browser getestet, doch haben die alle Probleme Seiten im Vollbild abzubilden oder Bilder von Kameras anzuzeigen. Gerade bei Tablets spielt das eine wesentliche Rolle. F11 für Vollbild gibt es bei Android ja nicht. Auch mit Tasker habe ich das schon realisiert, doch treten dann wieder andere Probleme auf. Per Browser läuft es jetzt einwandfrei, doch belibt es natürlich noch immer verbesserungswürdig.

Danke auch für Deine Hinweise auf AJAX, es scheint interessant und so werde ich mal versuchen mich da hinein zu versetzen. Ich bin weit über die 75 und da fallen solche komplexen Dingen nicht mehr so leicht. Vorhandene Beispiele lassen sich einfacher umstricken, weil man sich nicht mit drum herum belasten muss. Daher war Dein Beispiel für mich wichtig.

Alles läuft nur in meinem Netzwerk lokal.

Sempervivum · 08.03.2024

Was Ajax betrifft, habe ich Beispiele in der Schublade. Dieses ist einfach und dürfte für deine Anwendung gut passen:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test fetch API with POST request</title>


</head>

<body>
    <div id="out"></div>
    <script>
        fetch('url-der-anzuzeigenden-Seite')
            .then(response => response.text())
            .then(txt => {
                document.getElementById('out').innerHTML = txt;
        });   
    </script>
</body>

</html>

Wie Du siehst, recht einfach.

Sempervivum · 08.03.2024

PS: Ich habe noch den Seitenwechsel hinzu gefügt:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Seitenwechsel</title>


</head>

<body>
    <div id="out"></div>
    <script>
        const
            intv = 5000,
            urls = [
                'thread1266-solar-power-display-fetch-page-1.html',
                'thread1266-solar-power-display-fetch-page-2.html',
                'thread1266-solar-power-display-fetch-page-3.html'
            ];
        let idx = -1;
        function displayNext() {
            idx++;
            if (idx >= urls.length) idx = 0;
            fetch(urls[idx],)
                .then(response => response.text())
                .then(str => (new window.DOMParser())
                    .parseFromString(str, "text/html"))
                .then(dom => {
                    document.getElementById('out').innerHTML
                        = dom.querySelector('body').innerHTML;
                });
        }
        displayNext();
        setInterval(displayNext, intv);
    </script>
</body>

</html>

Immer noch überschaubar, nicht wahr? Das sollte mit jeder x-beliebigen Seite funktionieren.
Wenn ich das richtig verstanden habe, müssen jetzt noch bestimmte Seiten übersprungen werden?