• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Daten auf skalierbaren Dashboard-Bild positionieren

mkaleu99

Neues Mitglied
Hallo,
ich bin gerade dabei mir auf einem ESP8266 unter ESPeasy ein Dashboard einzurichten. Ich möchte darauf die vom ESP ermittelten Daten ausgeben. Der Speicher ist begrenzt. Ich füge ein Hintergrundbild ein und möchte die Daten an bestimmten Stellen ausgeben. So z.B. die Daten des Gaszählers im Fenster von einem Bild des Gaszählers. Sie sollen die Position behalten, wenn das Browserfenster verkleinert wird. Mit dem Beispiel für einen Wert funktioniert das horizontal, doch nicht vertikal. Bei Verkleinerung des Browserfensters wanden die Daten zur Mitte. Es wäre nett, wenn mir jemand helfen kann das Problem zu lösen.
HTML:
<style>
.container {position: relative; text-align: center; color: black;}
.gaszaehler {  position: absolute;  top: 22%;  left: 65%; transform: translate(-50%, -50%);}
</style>
</head>
<body>
<center>
<div class="container">
  <img src="http://server/bilder/Heizungsanlage.jpg" height="588px" width="800" >
  <div class="gaszaehler">[Paradigma_C#gaszaehler]m&sup3;</div>
  </center>
</body>
</html>

[edit by Mod] [ code=html ]...[ /code ]-Tag eingepflegt
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Ich füge ein Hintergrundbild ein und möchte die Daten an bestimmten Stellen ausgeben. So z.B. die Daten des Gaszählers im Fenster von einem Bild des Gaszählers. Sie sollen die Position behalten, wenn das Browserfenster verkleinert wird. Mit dem Beispiel für einen Wert funktioniert das horizontal, doch nicht vertikal. Bei Verkleinerung des Browserfensters wanden die Daten zur Mitte.
Hierzu ist als erste Gegenmaßnahme die derzeit fixe Bilddimension (800x588) aufzulösen, damit die Viewportskalierung auf alle darin enthaltenen Elemente greift, und so die Bildfläche auch entsprechend mitskaliert wird.

Zudem wären mittels Media Queries diverse Schriftgrößen zu definieren, damit sich auch der Text proportional zur Bildgröße skalierbar verhält.

In meinen Augen viel Aufwand für ein kleines Gaszähler-Dashboard, das im privaten Hausgebrauch nicht ständig 24/7 aufgerufen wird.

Aber gut, das ist hier meine ganz exklusive Meinung :cool:
 
Hierzu ist als erste Gegenmaßnahme die derzeit fixe Bilddimension (800x588) aufzulösen, damit die Viewportskalierung auf alle darin enthaltenen Elemente greift, und so die Bildfläche auch entsprechend mitskaliert wird.

Zudem wären mittels Media Queries diverse Schriftgrößen zu definieren, damit sich auch der Text proportional zur Bildgröße skalierbar verhält.

In meinen Augen viel Aufwand für ein kleines Gaszähler-Dashboard, das im privaten Hausgebrauch nicht ständig 24/7 aufgerufen wird.

Aber gut, das ist hier meine ganz exklusive Meinung :cool:
Danke,
was den Aufwand angeht, so ist der Gaszähler nur ein Beispiel. Es sollen alle Daten der Anlage abgebildet und verändert werden können. Ich habe das Beispiel auf das wesentliche reduziert.

Die Größe habe ich mal entfernt, dann ist das Bild riesig. Im Original ist es 1260x926, ich habe auch schon andere Größen verwendet.

Ich hatte mir als Beispiel eine Seite von Paradigma genommen. Da kann man die Werte sogar verschieben.
 

Anhänge

  • Heizungsanlage.jpg
    Heizungsanlage.jpg
    56 KB · Aufrufe: 7
Werbung:
Es sollen alle Daten der Anlage abgebildet und verändert werden können. Ich habe das Beispiel auf das wesentliche reduziert.
Was die Aufgabe nicht leichter gestaltet, wenn man den Bildanhang betrachtet.

Vom Grundsatz der Umsetzung bleibt es dabei, wie ich es in meiner ersten Antwort umrissen habe.

Nun eben halt auf mehrere Bereiche bezogen.
 
So etwas erledigen Profis ohne Dramatik per svg.
SVG mit <image> tag und einige textelemente darüber gelegt, diese mit einer id versehen und die Werte über innerHTML einfügen.
 
Zurück
Oben