UPGRADE IP 9 verfügbar!
Timberwolf VISU jetzt mit NEUEM Layout Editor
Freie Anordnung, Reihenfolge und Größe der Widgets - viele weitere Verbesserungen
Infos im Wiki: https://elabnet.atlassian.net/l/cp/06SeuHRJ

NEU! Insider & Leistungsmerkmale FÜR ALLE freigeschaltet
Damit kann nun jeder das Upgrade vornehmen und VISU & IFTTT testen. Alle Info hier: viewtopic.php?f=8&t=5074

[Gelöst] Responsive Design - Diagramm Plugin

Rund um die CometVisu im Timberwolf Server
Antworten

Ersteller
ms20de
Elaborated Networks
Reactions:
Beiträge: 974
Registriert: Sa Aug 11, 2018 9:14 pm
Hat sich bedankt: 280 Mal
Danksagung erhalten: 499 Mal

Responsive Design - Diagramm Plugin

#1

Beitrag von ms20de »

Hallo Zusammen,

eine Sache die ich bei der CometVisu nicht verstanden habe, wie schaffe ich es das sich Diagramme an verfügbare Breite des Browsers anpassen?
Man sieht, dass der Platz in der Breite 50/50 auf die zwei Diagramme aufgeteilt ist. Allerdings nimmt die Breite des Diagramms nicht den vollständigen Platz ein. Ich kann eine fixe Breite in Pixeln für jedes Diagramm einstellen, dann passt es aber zum Beispiel am Handy nicht mehr.

Bild

Code: Alles auswählen

   1: <?xml version="1.0" encoding="UTF-8"?>
   2: <pages lib_version="8" design="alaska_slim" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../visu_config.xsd">
   3:   <meta>
   4:     <plugins>
   5:       <plugin name="diagram"/>
   6:     </plugins>
   7:     <mappings/>
   8:     <stylings/>
   9:     <statusbar>
  10:       <status type="html">&lt;img src="resource/icon/comet_64_ff8000.png" alt="CometVisu" /&gt; by &lt;a href="https://www.cometvisu.org/"&gt;CometVisu.org&lt;/a&gt;
  11:           - &lt;a href="manager.php"&gt;Config-Manager&lt;/a&gt;
  12:           - &lt;a href=".?forceReload=true"&gt;Reload&lt;/a&gt;</status>
  13:       <status type="html" condition="!edit" hrefextend="config">- &lt;a href="editor/"&gt;Edit&lt;/a&gt;</status>
  14:       <status type="html" condition="edit" hrefextend="config">- &lt;a href="."&gt;normal Mode&lt;/a&gt;</status>
  15:       <status type="html">- &lt;a href="?config=demo"&gt;Widget Demo&lt;/a&gt;</status>
  16:       <status type="html" hrefextend="config">- &lt;a href="check_config.php"&gt;Check Config&lt;/a&gt;</status>
  17:     </statusbar>
  18:   </meta>
  19:   <page name="Start">
  20:     <diagram series="hour" refresh="300" period="24" legend="both" legendposition="nw" popup="true" previewlabels="true">
  21:       <layout colspan="6" rowspan="6" scale="true"/>
  22:       <axis label="Luftqualität" unit="ppm" position="left"/>
  23:       <influx authentication="influx" field="*" consolidationFunction="MEDIAN" measurement="timeseries_db/TS00009"/>
  24:     </diagram>
  25:     <diagram series="hour" refresh="300" period="24" legend="both" legendposition="nw" popup="true" previewlabels="true">
  26:       <layout colspan="6" rowspan="6" scale="true"/>
  27:       <axis label="Luftqualität" unit="ppm" position="left"/>
  28:       <influx authentication="influx" field="*" consolidationFunction="MEDIAN" measurement="timeseries_db/TS00011"/>
  29:     </diagram>
  30:   </page>
  31: </pages>
Kann mir jemand einen Tipp gehen, was ich falsch mache?

Viele Grüße,
Matthias
[ Timberwolf Entwicklung ]

TWS 2400 ID:102 VPN offen, Reboot auf Nachfrage

blaubaerli
Reactions:
Beiträge: 2308
Registriert: Sa Sep 15, 2018 10:26 am
Wohnort: Kerpen
Hat sich bedankt: 884 Mal
Danksagung erhalten: 677 Mal

#2

Beitrag von blaubaerli »

Hi Matthias @ms20de,

das Layout lässt drei Werte zu

<layout colspan="4" colspan-m="4" colspan-s="6"/>

Das ist des Rätsels Lösung.

Viel Spaß beim Testen.

Gruß
Jens
wiregate1250 & timberwolf168 (2600er), VPN offen, Reboot nach Vereinbarung

Robert_Mini
Reactions:
Beiträge: 3741
Registriert: So Aug 12, 2018 8:44 am
Hat sich bedankt: 1164 Mal
Danksagung erhalten: 2058 Mal

#3

Beitrag von Robert_Mini »

Und Bereite in px weglassen.
Robert
Timberwolf Server 2500 / #117 (VPN offen + reboot nach Rückfrage) / zusätzlich: 3500M/#935, 3500L/#1297

blaubaerli
Reactions:
Beiträge: 2308
Registriert: Sa Sep 15, 2018 10:26 am
Wohnort: Kerpen
Hat sich bedankt: 884 Mal
Danksagung erhalten: 677 Mal

#4

Beitrag von blaubaerli »

Jo, sorry hatte ich übersehen... :doh:

Hinzugefügt nach 5 Minuten 9 Sekunden:
Aber wo ist px in seinem Beispiel? Ist doch nicht da...?
wiregate1250 & timberwolf168 (2600er), VPN offen, Reboot nach Vereinbarung

Robert_Mini
Reactions:
Beiträge: 3741
Registriert: So Aug 12, 2018 8:44 am
Hat sich bedankt: 1164 Mal
Danksagung erhalten: 2058 Mal

#5

Beitrag von Robert_Mini »

Im Text schreibt Jens von px, darum der Hinweis.

Die Darstellung im Screenshot klappt meines Wissens nur mit der Kombination colspan + px.

Lg
Robert
Timberwolf Server 2500 / #117 (VPN offen + reboot nach Rückfrage) / zusätzlich: 3500M/#935, 3500L/#1297

Ersteller
ms20de
Elaborated Networks
Reactions:
Beiträge: 974
Registriert: Sa Aug 11, 2018 9:14 pm
Hat sich bedankt: 280 Mal
Danksagung erhalten: 499 Mal

#6

Beitrag von ms20de »

Bild

Es funktioniert jetzt wie es soll, mir ist aber nicht ganz klar wo das Problem war. :confusion-scratchheadyellow:
Ich nehme an, dass ich irgendeine alte Datei der CV in Cache hatte.

Ich habe ein Image-Element in meine Config eingefügt und plötzlich hat sich das Layout verändert.
Auch nach dem Löschen es Images funktioniert es jetzt weiter wie erwartet.

Danke für eure Tipps.

Viele Grüße,
Matthias
[ Timberwolf Entwicklung ]

TWS 2400 ID:102 VPN offen, Reboot auf Nachfrage
Antworten

Zurück zu „CometVisu“