oa-fts Icons nicht zu sehen, Größe ändern ?

[D3ltorohd]

Hallo Com,
das ist alles Neuland für mich und ich kenne mich auf dem Gebiet noch nicht so gut aus. Ich hab mich versucht die Standard Icons gegen welche aus openautomation zu nutzen, das habe ich wie folgt gemacht.

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizey="1" data-sizex="2">
                <header>Eingang/Flur</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
<div data-type="symbol" data-device="Haustuer_Sensor" data-states='["open","close"]' data-icons='["oa-fts_door_open","oa-fts_door"]' data-colors='["#f53b31","#42f54e"]' class="narrow big"></div>
                            <div data-type="label" class="top-narrow  darker small">Haustür</div>
<!--<div data-type="symbol" data-device="Bad_Sensor" data-get="battery_level" data-states='["0","10","10","30","100"]' data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]' data-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'></div>-->
                        </div>
                    </div>
                </div>
            </li>

Das ganze sieht dann so aus.

Das gleiche beim Circle Menu, (Rolladen) dort habe ich auch bloß diese Rechteck. Komischerweise, wenn ich die Seite mit F5 neu lade, sehe ich für einen Bruchteil einer Sekunde das richtige Bild.

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizey="2" data-sizex="2">
                <header>BAD</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="BadHeizung_Clima" data-valve="ValvePosition"></div>
                        <div class="cell">
<!--<div data-type="symbol" data-device="Bad_Sensor" data-icons='["fts_window_1w","fts_window_1w_open"]' class="narrow big"></div>-->
<div data-type="symbol" data-device="Bad_Sensor" class="narrow big"></div>
                            <div data-type="label" class="top-narrow  darker small">Fenster</div>
<!--<div data-type="symbol" data-device="Bad_Sensor" data-get="battery_level" data-states='["0","10","10","30","100"]' data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]' data-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'></div>-->
<div data-type="symbol" data-device="Bad_Sensor" data-states='["open","close"]' data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]' data-colors='["Crimson","GoldenRod","SeaGreen"]' ></div>
    <div class="container">
    <div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Bad"
data-get="pct"
data-states='["up","down","open","close","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
data-colors='["yellow","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>
<li><div data-type="push" data-device="Bad" data-set-on="stop" data-icon="fa-angle-stop"></div></li>
<li><div data-type="push" data-device="Bad" data-set-on="down" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="Bad" data-set-on="pct-80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Bad" data-set-on="pct-60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Bad" data-set-on="pct-40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Bad" data-set-on="pct-20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Bad" data-set-on="up" data-icon="fa-angle-up"></div></li>
</ul>
<div data-type="label" class="top-narrow  darker small">Rollladen</div>
</div>
</div>
   </div>
                    </div>
                </div>
            </li>

Das ist alles nicht Final, sondern nur mal zum testen. Leider komme ich hier schon nicht weiter.

Das nächste wäre, wie ich nun solche Icons vergrößern könnte ?

Grüße,

[yersinia]

Hi,

hast du in deiner Startseite die openautomation CSS eingefügt?

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />

Bezüglich Größe kannst du dir die CSS Klassen bezgl der Größe anschauen (large, bigger usw.) und die Klasse small zum Beispiel hier ersetzen:

Code Auswählen Erweitern

class="top-narrow  darker small"

Unter http://192.168.178.30:8083/fhem/ftui/icons_table.html kannst du dir im Übrigen alle Icons anzeigen lassen, die FTUI unterstützt.

[D3ltorohd]

Hi,

hast du in deiner Startseite die openautomation CSS eingefügt?

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />

So sieht meine Startseite aus..

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.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="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>FHEM-Tablet-UI</title>
</head>

<body>

    <div class="gridster">
        <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="/fhem/tablet/nav_left.html"></li>
        </ul>
    </div>
</body>

</html>

Dein Link sieht ein wenig anders aus, das werde ich mal probieren.

Edit, klappt leider nicht. Habe deine Zeile noch mit hinzugefügt und meine Zeile beim Pfad angepasst. Hat auch nichts geholfen. Muss das noch auf die anderen Seiten mit gepackt werden ?

[yersinia]

Anstelle von

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
solltest du

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />
einfügen - es ist der Pfad ab FTUI Wurzelverzeichnis, dein Link oben das Wurzelverzeichnis von FHEM unter /opt. (Die min ist zudem komprimiert und lädt schneller; die Funktion sollte letztendlich das gleiche sein)

Prüfe noch, ob die css Dateien openautomation.css und openautomation.min.css im Verzeichnis /opt/fhem/www/tablet/lib überhaupt vorhanden sind.

Zum Testen, ob openautomation überhaupt geladen wird, erstmal nur ein icon anzeigen lassen (ohne Funktion), zum Beispiel anhand deines Codes so:

Code Auswählen Erweitern

<div data-type="symbol" data-icon="oa-fts_door" class="narrow big"></div>

Wenn das soweit alles funktioniert aber deine Icons immernoch nicht angezeigt werden, liegt es an den Parametern, mit welchen du das Widget aufrufst (Wiki für Symbol Widget). Stimmt die Device id? Existieren die Icons so (siehe icons table oben)? Sind die Werte des Readings genau so?

Code Auswählen Erweitern

<div data-type="symbol"
    data-device="Haustuer_Sensor"
    data-states='["open","close"]'
    data-icons='["oa-fts_door_open","oa-fts_door"]'
    data-colors='["#f53b31","#42f54e"]'
    class="narrow big"></div>
Möglicherweise fehlt hier das data-get welches das Reading definiert (insb ist STATE nicht gleich state).

Übrigens, für nur Textanzeige (insb. wenn du keine Readings von einem Device ausliest) benötigst du kein label-Widget, das schont Ressourcen; ein einfacher div-Container genügt:

Code Auswählen Erweitern

<div class="top-narrow  darker small">Haustür</div>

[D3ltorohd]

Vielen Dank @yersinia ,nachdem ich das

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
gelöscht hatte und deinen Link

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />
rein, gingen die Symbole vorher nicht. Wahrscheinlich hatten die beiden sich gebissen miteinander.

Die readings für Tür und Fesnter sind iO, das wird mir einwandfrei angezeigt, offen, geschlossen. Die Rollos kann ich auch schon mit dem CircleMenu fahren. Es fehlt nur noch das richtig Status Icon, wo der Rollo gerade steht.

Nun muss ich das hier noch mit dem Status raus finden, das sich das Rolloicon ändert und mir den aktuellen Status anzeigt. Kennst du dich da aus ? Soll ich mal vom Rollo Device mal nen Screen machen, damit  du siehst welchen Status der ausgibt ?

Code Auswählen Erweitern

command       pct-0           2019-07-29 06:07:56
desired_pct              0                2019-07-29 06:07:56
drive-type                modul         2019-07-29 06:07:56
last_drive                drive-up       2019-07-29 06:07:56
pct                          100             2019-07-29 06:08:19
state                       open            2019-07-29 06:08:19

Das ist aktuell vom Bad, 100 wäre offen, 0 wäre zu, 50 indem Fall halb zu.

EDIT: So ich bin nun schon soweit, das wenn der Rollo gefahren ist, z.b. wenn ich im CircleMenu über die PCT's gehe, 80, 60, 20 usw, ist die fahrt beendet und er hat die Pos erreicht, zeigt mir das auch das Icon an, soweit so gut.
Nur das er gerade fährt und in welche Richtung, das zeigt er mir leider nicht an. Hab es mit up, down, mit drive-up, drive-down probiert, leider ändert sich während der Fahrt das Rollo Icon nicht. Denke mal die Pos bekommt er über data get:pct. Aber get data state, will nicht.

Das steht z.b. in der Log..

Code Auswählen Erweitern

2019.07.29 19:20:35 3: JarolifCUL: JaroFB set down 9
2019.07.29 19:20:39 3: JarolifCUL: JaroFB set stop 9
2019.07.29 19:20:57 3: JarolifCUL: JaroFB set down 9
2019.07.29 19:21:01 3: JarolifCUL: JaroFB set stop 9
2019.07.29 19:21:21 3: JarolifCUL: JaroFB set up 9

[yersinia]

Schau mal im Forum, was immer hilft ist in G00gle nach "fhem ftui stichwort" zu suchen. Ich habe jetzt auf Anhieb das hier gefunden:
https://wiki.fhem.de/wiki/FTUI_Snippets#Rollladen_Circle_Menu; insbesondere:

Code Auswählen Erweitern

<div data-type="symbol"
   data-device="st6.kueche.rollladen"
   data-get="statePosition"
   data-states='["up","down","open_ack","closed","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
   data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
   data-colors='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>

Aber auch: https://forum.fhem.de/index.php/topic,42266.msg404286.html#msg404286 (Der gesamte Thread könnte für dich evtl schon eine Lösung anbieten)

[D3ltorohd]

Ich hatte hier und da auch schon versucht das gefundene aus dem Forum um zu setzten. Das mit dem extra reading erstellen hab ich nicht so wirklich kapiert, die anderen Lösungen scheinen nicht zu klappen. Was klappt ist der Status der Position, die wird mir nach dem fahren auch gut angezeigt. Nur eben das direkte hoch bzw. runter fahren fehlt mir noch, das bekomme ich irgendwie nicht angezeigt.