Ein herzerfrischendes "Moin" vorweg
Eine kurze Frage: Ist es möglich eigene gifs als icons im widget "switch" einzubinden.
Also quasi so:
<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:
data-icons = '["fa-check","fa-check"]'
Ist das mit den gifs vom Prinzip her überhaupt möglich?
Gruss
Sailor
Hi,
hier steht, wie das im Prinzip geht (oder gehen könnte):
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Icons
Gruß,
Thorsten
Zitat von: Thorsten Pferdekaemper am 14 November 2018, 09:50:01
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
Hi,
width/height im CSS ändern hilft nicht?
Gruß,
Thorsten
Hallo Thorsten
Zitat von: Thorsten Pferdekaemper am 14 November 2018, 11:45:20
width/height im CSS ändern hilft nicht?
Leider nein, da steht schon folgendes drin:
<!-- 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
...und die anderen classes helfen auch nichts, also z.B. "gigantic"?
Hallo Sailor,
ich verwende so etwas erfolgreich und in großen Mengen für .png-Dateien:
.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
Hallo Holger
Zitat von: hsepm am 14 November 2018, 12:44:05
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
Hallo Thorsten
Zitat von: Thorsten Pferdekaemper am 14 November 2018, 11:57:33
...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"... :o
Danke
Gruss
Sailor
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:
.gigantic {
font-size: 144px !important;
font-family: robotothin, sans-serif;
line-height: 120px;
}
Zitat von: hsepm am 15 November 2018, 08:37:26
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
.ginormous {
font-size: 524px !important;
font-family: robotothin, sans-serif;
line-height: 500px;
}
eingeben würde, wird's der Knaller? ;D
Ich probiere es mal aus und melde mich!
Gruss
Sailor
Zitat von: Sailor am 15 November 2018, 08:34:32
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
Hallo Thorsten
Zitat von: Thorsten Pferdekaemper am 15 November 2018, 08:42:55
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! ;D
Gruss
Sailor
Zitat von: Sailor am 15 November 2018, 08:41:44
Das heisst, wenn ich dort
.ginormous {
font-size: 524px !important;
font-family: robotothin, sans-serif;
line-height: 500px;
}
eingeben würde, wird's der Knaller? ;D
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.
Hallo Thorsten
Zitat von: Thorsten Pferdekaemper am 15 November 2018, 08:42:55
https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen
Dort "Größen" ausklappen.
Also mit "Grande" kann ich leben...
Gruss
Sailor
@Sailor:
Die ganz brachiale Methode ist, dass Du in das "div"-Konstrukt style="height:90px; width:90px" rein tust. Passt, wackelt, hat Luft.
Hallo Curt
Zitat von: curt am 17 November 2018, 04:27:16
Die ganz brachiale Methode ist, dass Du in das "div"-Konstrukt style="height:90px; width:90px" rein tust. Passt, wackelt, hat Luft.
Das funktioniert leider nicht. Da wirds wieder kleiner (Normal)!
style="height:500px; width:500px"
Gruss
Sailor
Ich wollte lediglich auf die Möglichkeit ansich hinweisen.