[gelöst] iframe in Floorplan bei Click/Touch als Fullscreen-Overlay

DigiNecro · 30 Juni 2023, 22:53:53

Hallo zusammen,

gibts ne Möglichkeit in Floorplans etwas per iframe eingebundenes bei Click/Touch drauf als Fullscreen-Overlay darzustellen? Wenn ja, wie gehts am besten?

Hintergrund:
Ich habe eine USB-Webcam mit motion in Betrieb (läuft in 1280/720) und den Stream per iframe eingebunden. Im allgemeinen reicht mir ein kleines Bild (per CSS skaliert), aber falls ich Details sehen will, wäre ein großes Bild eben besser.

Code Auswählen

#cam {
  style="-ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0 0;"
}

Vielen Dank schon mal!

Torxgewinde · 01 Juli 2023, 18:18:08

Hi,
mit purem CSS kann man :hover nutzen, das wird zumindest AFAIK bei iOS genutzt wenn man einen Touch auf das Element ausführt. Dann kann man den iframe so mit CSS auszeichnen, dass er ganz nach vorne kommt und sich komplett in den Bildschirm legt:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <title>Color Palette Example</title>
    <style>
        .color-box {
            width: 150px;
            height: 150px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
        }
        
        #cam:hover {
            border: 10px solid green;
            height: calc(100vh - 40px);
            width: calc(100vw - 40px);
            top: 10px;
            left: 10px;
            position: fixed;
            z-index: 999;
        }

    </style>
</head>
<body>
    <div class="color-box" style="background-color: #00bcd4;">bla</div>
    <iframe id="cam" src="test.html"></iframe>
    <div class="color-box" style="background-color: #009688;">bla</div>
    </body>
</html>

..Probier es mal aus, ob bei deinem Gerät das auch als :hover ausgewertet wird. Eigentlich ist es das Event wenn ein Mauszeiger nur drüber gehalten wird...

DigiNecro · 03 Juli 2023, 15:16:04

Zitat von: Torxgewinde am 01 Juli 2023, 18:18:08Hi,
mit purem CSS kann man :hover nutzen, das wird zumindest AFAIK bei iOS genutzt wenn man einen Touch auf das Element ausführt. Dann kann man den iframe so mit CSS auszeichnen, dass er ganz nach vorne kommt und sich komplett in den Bildschirm legt:

Code Auswählen Erweitern
<!DOCTYPE html> <html> <head> <title>Color Palette Example</title> <style> .color-box { width: 150px; height: 150px; margin: 10px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; } #cam:hover { border: 10px solid green; height: calc(100vh - 40px); width: calc(100vw - 40px); top: 10px; left: 10px; position: fixed; z-index: 999; } </style> </head> <body> <div class="color-box" style="background-color: #00bcd4;">bla</div> <iframe id="cam" src="test.html"></iframe> <div class="color-box" style="background-color: #009688;">bla</div> </body> </html>
..Probier es mal aus, ob bei deinem Gerät das auch als :hover ausgewertet wird. Eigentlich ist es das Event wenn ein Mauszeiger nur drüber gehalten wird...

Ah super! Danke dir!

Bei den wichtigen Geräten funktionierts, nur bei einem Laptop mit Touchscreen reagiert es nur bei der Maus, nicht beim Touch. Das Ding ist aber bei mehr Touch-Sachen sehr strange, daher nutz ich Touch da eh ned.

Torxgewinde · 03 Juli 2023, 21:47:57

Moin!
Das ist gut. Das Laptop verhält sich korrekt, da es mit der Maus "hover" kann, also über dem iframe schweben und mit dem Touch es anders wäre. Touchgeräte emulieren dies normalerweise, um kompatibel zu sein. Mit Media-Queries kann man in CSS unterscheiden, ob man gerade hovert oder mit einem Touchgerät darauf geht. Es erfordert jedoch etwas mehr Experimentieren, um zufriedenstellende Ergebnisse zu erzielen.

So in Art müsste es gehen:

Code Auswählen

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Damian · 05 Juli 2023, 13:54:53

Nette Idee mit der hover-Eigenschaft. Ich wollte es für die DOIF-Card-SVG-Grafik ausprobieren.

Dazu habe ich in WEB-Attribut css folgenden Code eingefügt:

Code Auswählen

attr WEB Css .card:hover {width:200%;; height:200%}

In der SVG-Definition die Klasse card angegeben:

Code Auswählen

<svg class="card" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 180 112" width="270" height="168" style="width:270px; height:168px;">...</svg>

Es funktioniert aber nicht. Wenn ich im Chrome-Browser im HTML-Editor style="width:200%; height:200%;" verändere, wird die Grafik korrekterweise vergrößert.

Irgendwie greift .card:hover hier nicht.

Torxgewinde · 06 Juli 2023, 22:36:41

Ich vermute mal es liegt daran, dass im CSS die Stilregeln, die inline direkt im HTML-Element definiert werden, Vorrang vor den Stilregeln im Header haben. Das bedeutet, dass die Eigenschaften und Werte, die im Inline-Stil angegeben sind, diejenigen im Header überschreiben. Das liegt daran, dass Inline-Stile eine höhere Spezifität haben und somit priorisiert werden. Wenn du also sicherstellen möchtest, dass bestimmte Stilregeln befolgt werden, solltest du diese direkt im Inline-Stil angeben, oder - und das ist ein wenig verpönt, mit !important überstimmt werden.

Probier mal:

Code Auswählen

attr WEB Css div.dval > svg:hover {width:200% !important;; height:200% !important}
Ich wollte nicht dein card SVG im Quelltext verändern um es dort einzubauen, aber über den Selector oben habe ich im Grunde das Element auch angesprochen. Das sollte in deinem Beispiel mit der class als selector aber genauso klappen.

Und weil es animiert auch noch cooler wäre:

Code Auswählen

attr WEB Css div.dval > svg {\
  width: 100%;;\
  height: 100%;;\
  transition: width 0.3s ease, height 0.3s ease !important;;\
}\
\
div.dval > svg:hover {\
  width: 200% !important;;\
  height: 200% !important;;\
}

So sieht es dann aus:
Du darfst diesen Dateianhang nicht ansehen.

Damian · 06 Juli 2023, 23:02:08

Danke für die Antwort.

Es funktioniert bei mir jetzt mit:

Code Auswählen

attr WEB Css .card:hover {width:200% !important;; height:200% !important}
Ich überlege diese Funktionalität im DOIF optional einzubauen.

Am besten wäre, wenn man es nicht über externe Attribute steuern müsste, sondern als DOIF-Attribut definieren könnte. Dazu müsste ich hover oder auch active (interessant bei Tablets) als css-Definition im Perlcode unterbringen.

Torxgewinde · 06 Juli 2023, 23:13:10

Ist jetzt IMHO nicht schön, aber HTML-5 muss die <style> tags nicht zwingend im <header> haben. Das heißt im Grunde kann man das mit dem <svg> zusammen irgendwo im <body> ausgeben.

Hier eine passender Link dazu der es besser erklärt: https://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html

Edit #1:
...so ganz Ok scheint es doch nicht zu sein <style> im <body> zu haben, ich habe da jetzt doch sehr gemischte Aussagen gefunden, ich denke da muss man noch kreativ werden...

Edit#2:
Aus einem Javascript könnte man es in den <head> hinzufügen:

Code Auswählen

const styleElement = document.createElement('style');

styleElement.textContent = `
  .my-element {
    color: blue;
  }

  .my-element:hover {
    color: red;
  }
`;

document.head.appendChild(styleElement);

Damian · 06 Juli 2023, 23:26:12

ja, das habe ich auch schon festgestellt. Ein weiteres Problem scheint zu sein, dass die vergrößerte Grafik sich unter daneben bestehende Grafik schiebt, sie müsste aber bestehende Elemente überlappen.

Torxgewinde · 06 Juli 2023, 23:33:01

Jo, hattest du schon z-index: 999 probiert? Das sollte das SVG dann nach vorne holen so wie oben den Videostrom vom OP.

Damian · 06 Juli 2023, 23:42:04

Code Auswählen

.DOIF_card:hover {width:200% !important; height:200% !important;z-index: 999}
Funktioniert leider nicht.

Torxgewinde · 07 Juli 2023, 08:03:26

Strange. Wir könnten mal es mit "transform" probieren:

Code Auswählen

attr WEB Css div.dval > svg {\
  transition: transform 0.3s ease !important;;\
}\
\
div.dval > svg:hover {\
  transform: scale(2.0) !important;;\
}

Bei meinen uiTables/SVG klappt es, aber das Layout ist auch nicht so komplex wie in deinem Screenshot:
Du darfst diesen Dateianhang nicht ansehen.

Damian · 07 Juli 2023, 09:15:31

ja, mit transform funktioniert es schon besser, allerdings werden bestimmte Elemente trotzdem nicht überdeckt. Ich denke, man wird noch etwas JS-Code einfügen müssen, um die Richtung der Transformation zu bestimmen, damit Grafiken am Rand nicht aus dem Bild verschwinden.

Dafür sollten wir lieber im DOIF-Board ein Thread aufmachen, denn es ging hier anfangs ja um Floorplan.

DigiNecro · 07 Juli 2023, 10:30:46

Haben die Elemente eventuell einen höheren z-index? Prüfbar wäre das über Entwicklerkonsole deines Browers.

ansonsten kannst du es auch testen, in dem du den z-index noch höher als 999 setzt.

Damian · 07 Juli 2023, 10:43:41

Ich denke, man wird ein neues Fenster mit der Vergrößerung aufmachen müssen. Damit hätte man die Probleme mit der Überlappung nicht und man hätte sichergestellt, dass der Inhalt der vergrößerten Grafik nicht vom Bildschirm abdriftet.