switch und gifs

[Sailor]

Ein herzerfrischendes "Moin" vorweg

Eine kurze Frage: Ist es möglich eigene gifs als icons im widget "switch" einzubinden.

Also quasi so:

Code Auswählen Erweitern


<div data-type   = "switch"
data-device = "SmokeDetectorTeamLeader"
data-get    = "state"
data-cmd    = "set"
data-get-on = '["off","smoke-Alarm"]'
data-set-on = "alarmOff"
data-icons  = '["images/icoSmokeDetectorReset.stdby.gif","images/icoSmokeDetectorReset.armed.gif"]'
class       = "big warn">
</div>


Bei mir funktioniert das Ganze nur wenn ich die gifs beispielsweise mit "fa-check" ersetze:

Code Auswählen Erweitern

data-icons = '["fa-check","fa-check"]'

Ist das mit den gifs vom Prinzip her überhaupt möglich?

Gruss
   Sailor

[Thorsten Pferdekaemper]

Hi,
hier steht, wie das im Prinzip geht (oder gehen könnte):
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Icons
Gruß,
   Thorsten

[Sailor]

Hi,
hier steht, wie das im Prinzip geht (oder gehen könnte):
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Icons
Gruß,
   Thorsten

Volltreffer!
Das hat funktioniert - Sogar mit gif-Geblinke!
DANKE!

Hast du noch eine Ahnung, wie ich das Icon so richtig groß bekomme?
Bei class = "bigger" ist irgendwie Schluß aber ich hätte gerne den Button in etwa 300 x 300px groß.

Gruss
    Sailor

[Thorsten Pferdekaemper]

Hi,
width/height im CSS ändern hilft nicht?
Gruß,
   Thorsten

[Sailor]

Hallo Thorsten

width/height im CSS ändern hilft nicht?

Leider nein, da steht schon folgendes drin:

Code Auswählen Erweitern


<!-- Define User logo for Smoke Detector Popup - Armed -->
<style type="text/css">
.icoSmokeDetectorResetArmed
{
background: url(images/icoSmokeDetectorResetArmed.gif) no-repeat;
width: 300px;
height: 300px;
background-size: contain;
        }
</style>


Gruss
    Sailor

[Thorsten Pferdekaemper]

...und die anderen classes helfen auch nichts, also z.B. "gigantic"?

[hsepm]

Hallo Sailor,

ich verwende so etwas erfolgreich und in großen Mengen für .png-Dateien:

Code Auswählen Erweitern


.blue-box {
            background: url(../images/Box_Blue.png) no-repeat;
            width: 256px;
            height: 256px;
            background-size: contain;
        }


Meine Vermutung ist, dass es keine Routine gibt, animated gifs, die ja aus mehreren Bilder bestehen, zu skalieren. Ich würde mir eine Software suchen, mit der du die animated gifs in der gewünschten Pixelgröße abspeichern kannst.

Gruß,
Holger

[Sailor]

Hallo Holger

ich verwende so etwas erfolgreich und in großen Mengen für .png-Dateien:
Meine Vermutung ist, dass es keine Routine gibt, animated gifs, die ja aus mehreren Bilder bestehen, zu skalieren. Ich würde mir eine Software suchen, mit der du die animated gifs in der gewünschten Pixelgröße abspeichern kannst.

Danke für den Hinweis, aber wie du in meinem oberen Post erkennen kannst, sind die Bilder schon auf 500px x 500px.
Eher wären die Bilder zu groß als zu klein.

Daran kann es also nicht liegen.

Gruss
    Sailor

[Sailor]

Hallo Thorsten

...und die anderen classes helfen auch nichts, also z.B. "gigantic"?

Gibt es im Internet eine Liste mit möglichen Größen

Ich kenne bisher nur "big" and "bigger"... 

Danke
   Gruss
       Sailor

[hsepm]

Die für Tablet UI verwendbaren Größenklassen werden in den eingebundenen CSS-Dateien von FTUI definiert. Du kannst auch eigene hinzufügen.

Beispiel einer existierenden Größenklasse - fhem-tablet-ui.css:

Code Auswählen Erweitern


.gigantic {
    font-size: 144px !important;
    font-family: robotothin, sans-serif;
    line-height: 120px;
}


[Sailor]

Die für Tablet UI verwendbaren Größenklassen werden in den eingebundenen CSS-Dateien von FTUI definiert. Du kannst auch eigene hinzufügen.

Das heisst, wenn ich dort

Code Auswählen Erweitern


.ginormous {
    font-size: 524px !important;
    font-family: robotothin, sans-serif;
    line-height: 500px;
}

eingeben würde, wird's der Knaller? 

Ich probiere es mal aus und melde mich!

Gruss
    Sailor

[Thorsten Pferdekaemper]

Gibt es im Internet eine Liste mit möglichen Größen

Ja, hier:
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen
Dort "Größen" ausklappen.
Gruß,
   Thorsten

[Sailor]

Hallo Thorsten

Ja, hier:
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen
Dort "Größen" ausklappen.

Tja es ist wie es immer ist: Wer suchen, finden und lesen kann, ist klar im Vorteil! 

Gruss
    Sailor

[hsepm]

Das heisst, wenn ich dort

Code Auswählen Erweitern


.ginormous {
    font-size: 524px !important;
    font-family: robotothin, sans-serif;
    line-height: 500px;
}

eingeben würde, wird's der Knaller? 

Ich probiere es mal aus und melde mich!

Gruss
    Sailor

Ganz so einfach ist es nicht, da sich .gigantic auf textfonts bezieht. Wie sich das auf Images/Icons übersetzt, da musst du mal setstate fragen, die gesamte CSS hat mehrere 1000 Zeilen und da wird einiges gezaubert.

[Sailor]

Hallo Thorsten

https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen
Dort "Größen" ausklappen.

Also mit "Grande" kann ich leben...

Gruss
    Sailor