New FHEM Tablet UI

[tomster]

Jedoch ist die Farbe weiß, wie kann ich die auf weiß ändern?

Das ist recht simpel: einfach NIX machen

P.S. Für den Fall, dass ich die Frage mißverstanden hab,  hilft vielleicht ein style-tag mit "color:not-white;"

[TWART016]

Das ist recht simpel: einfach NIX machen

Ich will natürlich graue Schrift, bisher ist sie weiß.

Code Auswählen Erweitern

<div data-type="push" data-device="alles_schalten" class="narrow" data-icon="10" data-set-on="timer5_einschlafen">10</div>

Wie müsste das style-tag aussehen?

[waschbaerbauch]

Wie kann ich mir alle Icons auf der css anzeigen lassen?

Bei der Zahl ist nochmal eine eckige Umrandung. Kann ich die entfernen?

Die Umrandung ist ja Teil des angezeigten Bildes, die wirst du mMn nicht entfernen können. Möglichkeiten hier wären dir eigene svg zu bauen bzw. dir welche im Netz zu suchen welche dir zusagen und einen der online Generatoren für Iconfonts zu bemühen.

Die verfügbaren Bilder findest du unter '/fhem/www/images/fhemSVG/' - die Namen sind in der entsprechenden .css aufgeführt, für diesen Fall unter '/fhem/tablet/lib/fhemSVG.css'.

[HoTi]

Hallo zusammen,

meine Kamera am Eingang bietet mir ein Bild auf der Webseite http://xxx.xxx.net:8099/camera.asp. Dieses wollte ich im TabletUI einbinden.

Ich habe es als IFrame versucht, aber das klappt nicht. Auf der FHEM oberfläche funktioniert es allerding.

Ansonnsten bietet meine Kamera RTSP an. Da weiß ich gar nicht wie das Funktioniert

MJPEG RTSP
H.264 RTSP

So habe ich es versucht:

Code Auswählen Erweitern

    <li data-row="2" data-col="1" data-sizex="9" data-sizey="6">
  <header>GARTENTOR</header>
<div data-type="iframe"
        data-src="http://xxx.xxx.net:8099/camera.asp"
        data-width="646"
        data-height="447">
    </li>

[tomster]

Wie müsste das style-tag aussehen?

So sollte es funktionieren:

Code Auswählen Erweitern


<div data-type="push" data-device="alles_schalten" class="narrow" data-icon="10" data-set-on="timer5_einschlafen" style="color:grey;">10</div>

Oder halt jede Farbe (evtl. hex-code) einsetzen, die Du haben möchtest.

[tomster]

Hallo zusammen,

meine Kamera am Eingang bietet mir ein Bild auf der Webseite http://xxx.xxx.net:8099/camera.asp. Dieses wollte ich im TabletUI einbinden.

Ich habe es als IFrame versucht, aber das klappt nicht. Auf der FHEM oberfläche funktioniert es allerding.

Ansonnsten bietet meine Kamera RTSP an. Da weiß ich gar nicht wie das Funktioniert

MJPEG RTSP
H.264 RTSP

Ich hab's mit dem iframe-Widget auch nicht zufriedenstellend hinbekommen, drum hab ich's direkt gelöst. Probier Mal:

Code Auswählen Erweitern


li data-row="2" data-col="1" data-sizex="9" data-sizey="6">
  <header>GARTENTOR</header>
         <iframe frameborder="0" width="646" scrolling="no" height="447" src="http://xxx.xxx.net:8099/camera.asp">
          </iframe>
    </li>

Ach ja, RTSP. Das geht auf den meisten Browsern leider nicht mehr. Vor einiger Zeit wurde bei vielen Browsern ein bestimmtes Plug-in-Format "gesperrt". Für das alternativ von den Programmieren vorgesehene Format gibt es aber noch kaum Plug-ins. Drum schaut man momentan ziemlich in die Röhre. Das VLC-Plugin produziert auf meinem RasPi2 in Verbindung mit Iceweasel gut und gerne 80% Prozessorlast.. -> Keine Alternative.
Wenn aber jemand eine vernünftige Lösung (neue Browserversion, etc.) kennt, um RTSP/h.264 direkt im Browser wiederzugeben, dann bitte ich um Benachrichtigung. Ich würd nämlich auch gern meine Überwachungskamera im FTUI anzeigen lassen...

[kumue]

@Nesges

danke für den Pizzatimer.
Habe zwei Probleme damit.
Kannst Du die seconds_humenreadable sharen ?

Code Auswählen Erweitern

fhem> {pizzatimer('TIMER1',600)}
Undefined subroutine &main::seconds_humanreadable called at ./FHEM/99_myUtils.pm line 422.

Habe erstmal die entsprechenden Zeilen auskommentiert.
Starte ich den Timer über FTUI, wird dummerweise kein at angelegt.
Beim Start über die fhem Console wird das at defined.

Code Auswählen Erweitern

fhem> {pizzatimer('TIMER1',600)}
fhem> list TIMER1.*
TIMER1
TIMER1_at


Weisst Du warum ?
Danke im voraus und Gruß !

Den zweiten Teil habe ich hinbekommen.. 

Code Auswählen Erweitern

data-fhem-cmd ist das Zauberwort... kannte ich noch nicht.

[TWART016]

Hallo waschbaerbauch, Hallo tomster,

Die verfügbaren Bilder findest du unter '/fhem/www/images/fhemSVG/' - die Namen sind in der entsprechenden .css aufgeführt, für diesen Fall unter '/fhem/tablet/lib/fhemSVG.css'.

Gibt es die Möglichkeit sich alle auf einmal anzeigen zu lassen? Jede einzelne per Doppelklick öffnen ist ziemlich aufwendig.

Code Auswählen Erweitern


<div data-type="push" data-device="alles_schalten" class="narrow" data-icon="10" data-set-on="timer5_einschlafen" style="color:grey;">10</div>

Danke, funktioniert

[Achim]

Hallo TWART016,

sofern du mit einem Windows Rechner arbeitest.
Ich habe mir die Fontdateien (*.TTF) auf den Rechner kopiert. Dort sehe ich sie mir mit dem Programm "Fontviewer" http://www.fontviewer.de an. Ist nur eine EXE.

Viele Grüße
Achim

[waschbaerbauch]

Hallo waschbaerbauch, Hallo tomster,
Gibt es die Möglichkeit sich alle auf einmal anzeigen zu lassen? Jede einzelne per Doppelklick öffnen ist ziemlich aufwendig.

Danke, funktioniert

Klar, indem du im FHEM ein Device auswählst und auf 'Select Icon' gehst. Alles was dort angezeigt wird ist ein Teil von 'fs-' oder 'oa-'.
Dort kannst du dir das passende Icon aussuchen und wenn du mit der Maus drüber gehst, dann zeigt es dir den Namen an. Alles was du machen muss ist dann im HTML gucken ob es aus 'fs-' oder 'oa-' kommt. Alternativ kopiere dir die Ordner mit den SVGs lokal in ein Verzeichnis und richte eine Vorschau ein.

@Achim
Danke für den Tipp - probier ich auch gleich mal aus

PS: Zum ansehen des Fonts ist das Teil ja schon cool, aber wo zum Henker finde ich darin denn die Information wie der entsprechende Name zum Fonticon ist?

PPS: Für die Vorschau im Explorer benötigst du eventuell das hier https://svgextension.codeplex.com/

[TWART016]

Alternativ kopiere dir die Ordner mit den SVGs lokal in ein Verzeichnis und richte eine Vorschau ein.

Bei wird jedoch nur das Symbol vom Edge angezeigt. Mit welchem Programm sind deine svg's  verknüpft?

PS: Zum ansehen des Fonts ist das Teil ja schon cool, aber wo zum Henker finde ich darin denn die Information wie der entsprechende Name zum Fonticon

Die Frage habe ich auch?

Gibt es die Möglichkeit die Farbe der Icons zu ändern?

Kann man 2 Icons in einem Kreis sich anzeigen lassen?

[waschbaerbauch]

Bei wird jedoch nur das Symbol vom Edge angezeigt. Mit welchem Programm sind deine svg's  verknüpft?

Antwort ist im PPS

[Achim]

Hallo TWART016, waschbaerbauch

die Zuordnung zu dem Dateinamen ist etwas "tricky".
Im Programm "Fontviewer" im unteren Fenster unter Ansicht "alle Glyphen mit Schrift" auswählen und zusätzlich "Zeichenraster" und "Unicodes anzeigen" auswählen. Dann sieht man bei jedem Symbol den Unicode (z.B. F000 beim "Sektglas" in der Fontawesome Schrift.

Jetzt die css Datei der Schrift öffnen (z.B. ../tablet/lib/font-awesome.min.css). Dort dann nach "f000" suchen.

.fa-glass:before{content:"\f000"}.

und schon hat man den Namen des Icons. Die Datei ist die einzige ohne Newlines, bei den anderen ist es etwas übersichtlicher.

Ich weiß, nicht gerade eine einfache Lösung, aber man kann sich die Icons schön groß von jeder Schrift ansehen.

Viele Grüße
Achim

[setstate]

schaut euch mal die gen_iconsdemo.pl von nesges an. Damit kann man sich Demoseiten für die verfügbaren Icons generieren. Zu finden im Github Projektverzeichnis.

[HoTi]

Hallo,
bin immer noch dabei, mir das FTUI einzurichten. Dabei habe ich ein Problem mit den Aktualisierungen am Tablet bzw. am PC, wenn ich Änderungen in einer *.html-Datei mache.
Ich ändere die Dateien am PC in NotePad + und schiebe sie mit Filezilla auf den Raspi. Dann mach ich auf dem Tablet HannsPad 13,3" im offenen Browserfenster (der vorinstallierte Browser) einen reload. Leider ist nur in ca. 50 % der Fälle die Änderung auch tatsächlich sichtbar. In den restlichen Fällen wird nach wie vor das Bild vor der Änderung angezeigt, obwohl die Datei auf dem Raspi das neueste Änderungsdatum zeigt. Scheinbar wird es nicht frisch geladen sondern dann aus einem Cache gezogen. Irgendwann (Zeitraum kann ich nicht sagen, da ich dann am PC den Browser aufmache um weiterzumachen) ist dann das geänderte Bild vorhanden. Dasselbe Verhalten habe ich am PC, so dss ich immer beide am Laufen habe und hoffe, dass auf einem der Geräte das Bild aktualisiert ist. So ist das aber sehr umständlich und unbefriedigend.

Habe auch schon den Browser geschlossen und neu gestartet, aber derselbe Effekt.

Weis jemand, wie man erreichen kann dass die Änderungen immer sofort sichtbar sind?

Gruß Jürgen

Gibt es daruf eine Antwort? Ich habe Sie in diesem extremen Thema nicht gefunden?!