TabletUI Anfänger - Farben bei ein/aus

ujaudio · 03 Januar 2017, 09:31:18

Um mich in TabletUI einzuarbeiten, versuche ich das Beispiel zu verstehen und zu modifizieren. Vieles konnte ich mir schon erarbeiten, aber an einem Punkt komme ich nicht weiter:
Ich möchte den Pfeil z.B. rot statt grau blinken lassen und ich möchte die Farben des Schalters nicht grau/orange sondern z.B. blau/gelb. Wo in der css muss ich das einstellen? Es ist mir einfach bislang nicht gelungen, alle Stellen, die ich glaubte sie könnten es sein, haben sich als falsch herausgestellt.

Noch ein Nachtrag: Warum ist das Symbol "Schalter mit Glühlampe" bei mir nicht richtig zentriert?

setstate · 03 Januar 2017, 10:26:34

Hallo Jürgen,

wenn man am Design oder Layout nichts grundlegend ändern will, braucht man die CSS-Files nicht anfassen.
Die Farben der Symbole lassen sich mit data-colors entsprechend der Status zuweisen.

Code Auswählen


<div data-type="symbol" data-device="dummy1" 
data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' 
data-colors='["#32a054","#6666cc","#ad3333"]' 
data-states='["Wert1","Wert2","Wert3"]' 
class="blink"></div>

Der Verschiebung sieht nach falschem HTMl Code aus. Hochkomma vergessen, schließendes </div> vergessen ?

ujaudio · 03 Januar 2017, 12:26:09

Die index.html-Datei sieht bei mir so aus:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     *
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="154">
    <meta name="widget_base_height" content="74">
    <meta name="widget_margin" content="3">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>My-FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="symbol" data-device="dummy1"
  data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]'
  data-colors='["#00ff00","#ff0000","#0000ff"]'
  data-states='["Wert1","Wert2","Wert3"]'
  class="blink">
  </div>
  <div data-type="label" class="small narrow darker">Status 1</div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="2">
        <header>zsw1</header>
        <div data-type="switch" data-device="zsw1" class="cell" ></div>
        <div data-type="label" class="cell">Steckdose</div>
</li>
</ul>
</div>
</body>
</html>

Das Ergebnis siehe Bild.

Ich habe in der index.html nur mein ...user.css ergänzt und 2 Elemente definiert. Meine Steckdose lässt sich auch einwandfrei schalten. Funktion gegeben, Optik passt irgendwie nicht. Auch weil sowohl auf dem PC als auch auf dem tablet die beiden Elemente nebeneinander sind und nicht untereinander wie ich das erwartet hätte. Und die Farben wollen einfach nicht. Ich habe deinen Code kopiert, nur mal "aggressive" Farebn zum sofortigen Sichtbarmachen gewählt.

Nachtrag: es blinkt unverändert grau, nur der Screenshot ist gerade bei "aus".

setstate · 03 Januar 2017, 12:43:16

Und du hast in deinem FHEM ein Device "dummy1" mit dem STATE "Wert1"?

Bei mir erscheint dein Code nicht verschoben. Was passiert, wenn du fhem-tablet-ui-user.css weglässt?

ujaudio · 03 Januar 2017, 13:30:22

oh Mann, klar, dummy1 definiert und schon geht's

Die Definition des 2. Elements habe ich auch verändert, damit ist es nun auch zentrisch:

Code Auswählen

<li data-row="2" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="switch" data-device="zsw1"
    data-on-color="#00ff00"
    data-off-color="#ff0000"
    data-on-backgound-color="#000000"
    data-off-backgound-color="#ffffff"
    data-icon="fa-lightbulb-o"
    data-icon-backgound="fa-circle"
    class="grande">
  </div>
</li>

Aber die Hintergrundfarben sind leider nicht weiß und schwarz, sondern grau und orange.

Und noch eine Frage: wie kommt man an die Namen und das Aussehen der Icons? Gibt es das irgendwo gesammelt?

setstate · 03 Januar 2017, 13:35:00

background nicht backgound

Icons sind hier gelistet: http://fortawesome.github.io/Font-Awesome/icons

ujaudio · 03 Januar 2017, 13:45:26

Danke.

Icons schaue ich mir gleich mal an.

ujaudio · 03 Januar 2017, 13:58:30

Wie kann ich anstelle eines Kreises ein Rechteck als Hintergrund bekommen?

Code Auswählen

<li data-row="2" data-col="1" data-sizex="1" data-sizey="2">
  <div data-type="switch" data-device="zsw1"
    data-on-color="#cccccc"
    data-off-color="#cccccc"
    data-on-background-color="#999999"
    data-off-background-color="#333333"
    data-icon="fa-plug"
    data-icon-background="fa-square"
    class="grande">
  </div>
</li>

funktioniert leider nicht. Ich habe auch class="icon" ausprobiert - Fehlanzeige

setstate · 03 Januar 2017, 14:09:16

data-background-icon

ujaudio · 03 Januar 2017, 14:33:50

Danke für die Geduld, irgendwie bin ich heute zu doof die Doku richtig zu lesen!

Steht irgendwo geschrieben, wie man eigene svg-Dateien nutzen kann? --> Ja, hab's gefunden: https://wiki.fhem.de/wiki/FHEM_Tablet_UI/FAQ

ujaudio · 03 Januar 2017, 14:52:09

Ich hoffe, es ist die letzte Frage: wenn ich die Icons groß haben möchte (class="grande" - das sind 600%), aber das raster knapp ist, dann klappt es mit dem Zentrieren nicht mehr (grid 140 x 70). Ich vermute, dass da irgendwo ein Rand eingestellt ist. Kann man das anpassen?