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.
#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!
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:
<!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...
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:
<!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.
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:
/* 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) {
/* ... */
}
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:
attr WEB Css .card:hover {width:200%;; height:200%}
In der SVG-Definition die Klasse card angegeben:
<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.
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:
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:
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:
Unbenannt-kleiner.GIF
Danke für die Antwort.
Es funktioniert bei mir jetzt mit:
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.
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 (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:
const styleElement = document.createElement('style');
styleElement.textContent = `
.my-element {
color: blue;
}
.my-element:hover {
color: red;
}
`;
document.head.appendChild(styleElement);
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.
Jo, hattest du schon z-index: 999 probiert? Das sollte das SVG dann nach vorne holen so wie oben den Videostrom vom OP.
.DOIF_card:hover {width:200% !important; height:200% !important;z-index: 999}
Funktioniert leider nicht.
Strange. Wir könnten mal es mit "transform" probieren:
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:
file.gif
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.
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.
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.
@Damian: Kannst du die Definition von ein paar Devices, bei denen es sich nicht korrekt verhält, posten? Ich kann es mit meinem System nicht nachstellen, warum da einige Icons noch über den uiTables liegen. CSS ist irgendwie auch immer ein wenig rumprobieren und rantasten.
Bevor man ein ganzes neues Fenster öffnet, würde ich noch vorschlagen, das uiTable-Element auf vollen Viewport (~Browserfenster) zu vergrößern, praktisch wie einen Modalen-Dialog. Neue Fenster sind auf Mobilgeräten schnell einfach mal neue (und auch schnell vergessene) Tabs.
Edit: Folgepfosten in dem DOIF Forum erstellt: https://forum.fhem.de/index.php?topic=134207.msg1280886#msg1280886 (https://forum.fhem.de/index.php?topic=134207.msg1280886#msg1280886)