🔎 Vergrößern der uiTable Elemente mit der Maus / Touch

[Torxgewinde]

Hallo,
Um das Thema aus den Anfängerfragen fortzusetzten, hier der Folgefaden zu https://forum.fhem.de/index.php?topic=134132.msg1280605#msg1280605

Bisher haben wir den Ansatz, dass man in dem Device von FHEMWEB ein Css hinterlegt:

Code Auswählen Erweitern

attr WEB Css div.dval > svg {\
  transition: transform 0.3s ease !important;;\
}\
\
div.dval > svg:hover {\
  transform: scale(2.0) !important;;\
}Wenn man an den SVGs eine Klasse zuweist, kann man die SVGs auch direkt über den Klassennamen selektieren.

Probleme bereiten allerdings einzelne Elemente, vermutlich weil deren z-Index in einem anderem Stackinkontext mit teils höherem Gesamtindex läuft https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context.

Kannst jemand ggf. eine Definition bereitstellen, die man zum Testen nehmen kann? Dort sollte es zu den Problemen mit der Überlappung kommen, damit man entsprechend testen kann.

Du darfst diesen Dateianhang nicht ansehen.

[Damian]

Hier mal was zum Testen (zwei Devices in zwei Spalten):

Code Auswählen Erweitern

defmod di DOIF ##
attr di group Aktuell
attr di room test1
attr di uiTable {package ui_Table}\
card([bla:day:col12],undef,undef,0,2100,0,120,"PV W",undef,"1,font-size:50%","130,fixedscaling,,,,halfring")


Code Auswählen Erweitern

defmod Presence DOIF ##
attr Presence checkReadingEvent 0
attr Presence event-on-change-reading .*
attr Presence group Home
attr Presence room Status,test1
attr Presence uiTable {package ui_Table}\
\
DEF TPL_person (icon_label([$SELF:$1] eq "on" ? "icoHaus":"icoHaus\@#606060","$1",[$SELF:$1] eq "on" ? "white":"black","#606060",-10))\
\
"1"\
"2"\
"3"\
TPL_person(Damian)
und FHEMWEB-Definition:

Code Auswählen Erweitern

defmod WEB FHEMWEB 8083 global
attr WEB Css svg:hover {width:200% !important;; height:200% !important}
attr WEB column test1:Aktuell|Home
attr WEB csrfToken none
attr WEB endPlotNow 1
attr WEB styleData {\
 "f18": {\
  "Pinned.menu": "true",\
  "hidePin": "true",\
  "cols.bg": "444444",\
  "cols.fg": "CCCCCC",\
  "cols.link": "ffffff",\
  "cols.evenrow": "333333",\
  "cols.oddrow": "111111",\
  "cols.header": "222222",\
  "cols.menu": "111111",\
  "cols.sel": "333333",\
  "cols.inpBack": "444444",\
  "savePinChanges": true,\
  "wrapcolumns": true\
 }\
}
attr WEB stylesheetPrefix f18
attr WEB widgetOverride cmdState:textFieldNL-long


[Torxgewinde]

Ah, cool. Bei dem Setup fehlen vielleicht nur noch zwei Angaben um mit dem DOIF ganz nach Oben zu kommen:

Code Auswählen Erweitern

attr WEBTEST Css svg:hover {\
  width:200% !important;;\
  height:200% !important;;\
  z-index: 9999;;\
  position: relative;;\
}
Um den z-index wirksam zu verändern, hatte mir der Browser im Debugfenster den Hinweis gegeben, dass die Position gesetzt werden muss. In diesem geben wir uns einen hohen Index. Da die anderen Z-Indizes zumindest in dieser Seite keine höheren anderen z-index haben, schaffen wir es bis nach ganz vorne.

GIF des :hover Effekts:
Du darfst diesen Dateianhang nicht ansehen.

[Damian]

Schön. Jetzt bleibt für mich das nicht unwichtige Argument: Zoom ist schön, aber nicht, wenn ein Teil des Bildes "aus dem Rahmen fällt". Man müsste noch die Zoomrichtung in Richtung Mitte des Bildschirms definieren können oder anders formuliert, die Ecke der Grafik, die am nächsten zum Bildrand liegt, müsste fix bleiben, dann hätten wir eine echt praktikable Lösung.

[Torxgewinde]

Ja, der Punkt ist mir noch nicht so ganz klar.

Generell kann man bei "transform" (siehe das CSS im Post #1) den Ursprung der Transformation (transform-origin) angeben. Beliebt und AFAIK default ist "center center". Läge die SVG also oben links könnte man "transform-origin: 0 0", läge sie unten rechts "transform-origin: bottom right" einstellen. Leider kann man AFAIK nicht mit calc und viewport als Maßeinheit arbeiten. Was natürlich immer geht, wäre eine JS Lösung, aber CSS würde ich erstmal favorisieren - allerdings ist es auch OK, egal wie man in das Ziel kommt.

[Damian]

ja, mit rechts unten kann man leben, da die Tabellen ohnehin nach rechts oder unten verschwinden können.

Ich teste noch mal mit <style>.. </style> vor der Tabellendefinition im Perlcode als Option, dann bräuchte der User nicht außerhalb von DOIF etwas zu definieren.

[Damian]

Ich habe eine DOIF-Version gebastelt, die ohne zusätzliche css-Attribute auskommt, hover ist bei allen card-Funktionen aktiviert. Das Problem ist, dass <style> für die ganze Seite gilt, egal wo man es definiert, dadurch lässt sich die hover-Eigenschaft nicht lokal aktivieren/deaktivieren. Hover funktioniert bei von mir getesteten Smartphones/Tablets durch Antippen.

[Torxgewinde]

Hi,
Das sieht gut aus!

Gut wäre, wenn man der uiTable-Card optional den <style> als Parameter mitgeben kann. So kann man in Sonderfällen nochmal ohne aufwendigen Selektor händisch was für sein Setup ändern, zum Beispiel könnten dann Nutzer sich den transform-origin auch in die anderen Ecken verlagern, oder sonstwie eingreifen.

Hover nur für ein Element zu aktivieren, lässt sich machen, wenn man pro Card eine eindeutige ID vergibt. Der Selektor wäre dann "#meineCardMitHoverAktiv:hover".

Vielleicht auch nützlicher Anstoß:
Um das Stylesheet nachträglich aus einem HTML-Reading/Block in den Header zu bringen, habe ich mir mit Javascript geholfen. Der Vorteil: Es ist an der Stelle die laut HTML-Spezifikation als auf jeden Fall korrekt gilt. Mitten im <body> nochmal <style> zu definieren, dazu gibt es widersprüchliche Aussagen ob es nun HTML-konform ist und bleibt. So kann man es mit JS nachträglich in den Header bringen:

Code Auswählen Erweitern

<script>

/* Style, mit Backticks damit es unkompliziert über mehrere Zeilen geht */
var styleContent = `
    .meineKlasse {
        transition: min-width .5s ease-in, color .5s ease-in;
    }
    .meineKlasse:hover {
        min-width: max-content;
        color: white;
    }
`;

/* Finde ein vorhandenes CSS-Element oder füge es im Header hinzu */
var styleElement = document.getElementById("ganzEindeutigeID");
if (!styleElement) {
    styleElement = document.createElement('style');
    styleElement.id = "ganzEindeutigeID";
    document.head.appendChild(styleElement);
}

/* hier wird das einzige Style-Element mit der ID "ganzEindeutigeID" im Header auf den Wert von oben gesetzt und gilt für alle */
styleElement.textContent = styleContent;

</script>

[Damian]

Das mit dem <style> hat diverse Nachteile. Ich habe es zuerst im DOIF als Option eingebaut. Das Parametrisieren funktionierte aber nicht gut, denn da es global wirkt, führte es zum Chaos, denn die Konfiguration des letzten DOIF´s bei der Initialisierung gewinnt.

Solang es nicht device-spezifisch greift, muss es an einer zentralen Stelle stehen, wenn es optional sein soll - also doch im WEB-Device.

Im Grunde reicht die eine Zeile im Css-Attribut:

.DOIF_card:hover {transition: transform 0.3s ease; transform: scale(2.0); transform-origin: 0 0;z-index: 9999; position:relative}

Ich werde auch für die SVG-Grafiken ring/bar Klassen definieren, so dass jeder für sich entscheiden kann auf was seine Transformation wirken soll, bei svg-Klasse dann auf alle.

Die Option kann ich dann in der Wiki-Doku zu uiTable auffällig beschreiben, damit es keiner übersieht.

In der angehängten Version habe ich auch schon die Transparenz des Hintergrunds von card abgeschaltet, damit es keine Überblendungen gibt bei Vergrößerung.

[Torxgewinde]

Klingt sinnvoll.

Könnte man denn neben der Klasse "DOIF_card" zusätzlich eine eindeutige ID an die jeweiligen DOIF-cards vergeben? Vorteil: So könnte man mit dem Stylesheet aus dem FHEMWEB-Attribut "Css" heraus ganz gezielt einzelne DOIF-cards mit "#DOIF_card_DeviceName" ansprechen, oder eben alle gemeinsam, indem man die Klasse mit ".DOIF_card" selektiert. Wie wäre das?

[Damian]

svg-card hat schon eine ID, sie setzt sich zusammen aus Breite und Höhe der Grafik - sie war für irgendetwas erforderlich - weiß aber nicht mehr, was es war.

[Torxgewinde]

Stimmt, habe ich bisher nicht gesehen.

Will man also gezielt nur ein uiTable Element mit einem Attribut Selektor ansprechen, bei dem doifid="di_MeinDOIF_uiTable_c_0_1_0_0" ist, dann kann man im FHEMWEB-Attribut Css also eingeben:

Code Auswählen Erweitern

div[doifid="di_MeinDOIF_uiTable_c_0_1_0_0"]:hover {
  transform: scale(2.0);
}
Und schon wird nur dieses Element beim Hovern vergrößert. Welche doifid man eingeben muss, lässt sich AFAIK am besten mit dem Browser-Debugger herausfinden.

Die DOIF uiTable Elemente aus der ersten Zeile styled man mit einer Teilzeichenkette:

Code Auswählen Erweitern

div[doifid^="di_MeinDOIF_uiTable_c_0_"]:hover {
  transform: scale(2.0);
}

Will man einfach alles von einem bestimmten DOIF mit dem Device-Namen "di_MeinDOIF" stylen, dann spricht man es gezielt an mit:

Code Auswählen Erweitern

div[doifid^="di_MeinDOIF"]:hover {
  transform: scale(2.0);
}


[Damian]

So, dann werde ich den SVG-Grafiken, wie beschrieben, Klassennamen vergeben, dann kann sich jeder nach Wunsch anhand von Beispielen im Wiki demnächst seine Transformation im Css-Attribut definieren. Eine Zwangsvorgabe ohne Abschaltung dürfte viele eher verärgern.

Ob es sinnvoll ist einzelne Elemente anzupacken, muss jeder für sich entscheiden. Ich werde es für mich zunächst nur für alle cards definieren, weil sie viele Informationen darstellen, die ich gerne öfters vergrößert haben möchte.

[Torxgewinde]

Sehr cool, so kann man einstellen was man mag und die Standardeinstellung ist wie gewohnt.