Hallo zusammen,
ich hatte das Problem, dass ich Images auf klick Fullscreen vergrößern möchte (Anwendungsfall ist ein Webcam image).
Schließlich kam ich auf folgende Lösung.
CSS anlegen (am besten in css/fhem-tablet-ui-user.css)
.imgclick .ZoomImage {
position: fixed;
top: 0px;
left: 0px;
width:100%;
height: 100%;
z-index: 9999;
}
dieses dann in der index.html einbinden:
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />
Da ich javascript-code benötige, hier eine nicht so schöne Lösung (aber es funktioniert):
js/fhem-tablet-ui.js editieren und folgendes nach "init: function () {" einfügen:
$(document).on('click', '.imgclick', function (){
$(this).find("img").toggleClass("ZoomImage");
});
dies ist nicht so schön, da nach einem Update der tablet UI der Code verloren geht, aber vielleicht hat jemand eine bessere Lösung?
Im html:
<div class="imgclick">
<div data-type="image" data-width="100%" data-height="580px" data-refresh=45 data-url="/fhem/www/tablet/123.png" data-opacity="1"></div>
</div>
viele Grüße,
Texel
Danke für die Anregung!
Zitat von: texel am 21 Oktober 2018, 07:53:20
dies ist nicht so schön, da nach einem Update der tablet UI der Code verloren geht, aber vielleicht hat jemand eine bessere Lösung?
Dich zwingt ja keiner, das in die fhem-tablet-ui.js zu schreiben. Du kannst das auch in eine eigene Datei schreiben und dann den entsprechenden <script>-Tag Deinen FTUI-Seiten hinzufügen. ...oder sogar das ganze direkt in Deine FTUI-Seiten schreiben.
Folgendes funktioniert sogar in FUIP in einem HTML-View:
<style type="text/css">
.imgclick .ZoomImage {
position: fixed;
top: 0px;
left: 0px;
width:100%;
height: 100%;
z-index: 9999;
}
</style>
<script type="text/javascript">
$(document).on('click', '.imgclick', function (){
$(this).find("img").toggleClass("ZoomImage");
});
</script>
<div class="imgclick">
<div data-type="image" data-width="100%" data-height="100%" data-refresh=45 data-url="/fhem/uilocal/fuip/images/pexels-gleitschirm.jpg" data-opacity="1"></div>
</div>
Das müsste auch direkt im HTML-Text in einer "normalen" FTUI-Seite gehen.
Zitat
Texel
Nordsee oder Finn Alexander aus 2062?
Gruß,
Thorsten
Hallo zusammen,
bevor ich ein neues Thema aufmache wollte ich es mal hier versuchen da ihr schon eine "on click" Lösung für die Darstellung von Bildern habt . Ich habe mir letzte Woche eine Alexa Show 2 geholt und dachte mir das sich diese auch prima zur Darstellung von TabletUI eignet. Dann aber ohne die störende Firefox Kopfzeile ;-)
Daher suche ich nun nach einer Lösung die, die TabletUI Seite automatisch beim starten in den Fullscreen Mode versetzt. Kann man euren "on click" Ansatz auf die ganze Darstellung erweitern ?
... ich sage schon mal Danke
VG
Stephan