[gelöst] Widget wird nicht angezeigt

Begonnen von Uef, 01 Juni 2020, 22:51:25

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Uef

01 Juni 2020, 22:51:25 Letzte Bearbeitung: 02 Juni 2020, 19:05:32 von Uef
Hallo zusammen,

ich komme jetzt nicht mehr weiter und benötige einen Anschubser.

Ich wollte ein bestehendes Widget ("scale") etwas anpassen (es sollte statt nur Integerwerte auch Floats akzeptieren, aber das nur am Rande).
Nach den Modifikationen an einer Kopie unter neuem Namen ("score") wurde das neue Widget aber nicht angezeigt. Klar, dachte ich: Fehler im Code; schließlich war es das erste Mal, dass an einem Widget codiert habe.
Ich habe mich dann Schritt für Schritt zurück gearbeitet, um heraus zu finden, wo das Problem liegt und habe alle Modifikationen wieder entfernt.
Als sich trotzdem nichts tat, habe ich einfach die Datei des Original-Widgets kopiert, umbenannt und die relevanten 2 Einträge in der Datei an den neuen Namen angepasst.
Aber selbst dann erschien das Widget nicht.

D.h. ich schaffe es auch nicht, die Kopie eines nachweislich funktionierenden Widgets anzeigen zu lassen.

Mit den Webentwickler-Tools in Firefox habe ich dann im Inspector gesehen, dass die Kopie des Widgets im class="" ein zusätzliches "widget-hide" erhalten hat, obwohl das in der index.html so gar nicht drinsteht. Ich nehme an, dass das die Ursache ist, bin mir da aber auch nicht sicher und habe auch keinen Schimmer, wo dieser Eintrag herkommen soll.
Ich habe zur Kontrolle in der index.html den gleichen Code zweimal drin, nur mit dem Unterschied, dass einmal auf das Original und einmal auf die Kopie des Widgets verwiesen wird.
Im Inspector erhält aber immer die Kopie dieses "widget-hide", egal in welcher Reihenfolge ich die beiden anordne oder an welcher Position auf der Seite sie stehen.

Hat jemand einen Hinweis für mich ?

FHEM wurde mehrmals neu gestartet und auch den Cache des Browsers habe ich immer wieder geleert.
Eine Fehlermeldung habe ich auch nirgendwo gesehen.

Ich hänge mal alles ran(sorry für den vielen Code).
Hier die index.html (die beiden relevanten Widgets sind ganz am Ende in den Zeilen 775 und 794)
Code Auswählen
<!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" />

   <!--
    *
    * Um FTUI auf iOS-Geräten vom Home-Screen im Vollbildmodus starten zu können, sind folgende Einträge im <head>-Bereich der Seite zu setzen.
    *
    -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--
    *
    * Damit Statusänderungen in FHEM auch im FTUI auf ALTEN iOS-Geräten (z.B. iPad 1) zeitnah aktualisiert werden, sind folgende Einträge zu setzen:
    *
    -->
<meta name="longpoll" content="1">
<meta name="longpoll_type" content="ajax">

    <!-- 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" / -->

    <link rel="stylesheet" href="customfonts/roman/style.css">


    <script src="js/fhem-tablet-ui.js" defer></script>

<style type="text/css">
.pressure_gauge  { background: url(images/fhemSVG/ampel_aus.svg) no-repeat; width: 50px; height: 50px; background-size: 50px 50px; }
</style>


    <!-- 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-sizey="1" data-sizex="1"> <!-- FTUI Version - Widget -->
                <header>FTUI</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
<div class="bigger line-normal">Version</div>
<div class="" data-bind="ftui.version"></div>
<div data-type="clock" data-format="H:i:s"></div>
</div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizey="1" data-sizex="3"> <!-- Badezimmer - Widget -->
                <header>BAD</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="HM_4CEB54_Clima" data-step="0.5" data-unit="R" data-valve="ValvePosition" data-temp="measured-temp"></div>
                        <div class="cell">
                            <div data-type="switch" data-device="Badezimmer_Licht_Hauptlicht"></div>
                            <div data-type="label" class="">Licht</div>
                        </div>
                        <div class="cell">
<div data-type="switch" data-device="Badezimmer_Ventilator" data-set-on="on" data-get="state" data-get-on="on" data-get-off="off" class="normal" data-icon="oa-vent_ventilation_level_3"></div>
<div data-type="label" class="">Lüftung</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="5" data-sizey="1" data-sizex="2"> <!-- Wohn-/Esszimmer - Widget -->
                <header>WOHN-/ESSZIMMER</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell"
                            data-type="thermostat" data-device="RT_Esszimmer" data-get="desiredTemperature" data-set="desiredTemperature" data-temp="temperature" data-mode="mode" data-step="0.5" data-off="off"></div>
                        <div class="cell">
                            <div class="big" data-type="symbol" data-device="KinderzimmerFenster"></div>
                            <div class="top-narrow  darker small">Fenster</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="7" data-sizey="1" data-sizex="1"> <!-- iPad Akku - Widget -->
                <header>Akku</header>
<div class="top-space fa fa-battery-full fa-2x"> </div>
<div data-type="label"> Ladezustand:</div>
<div class="inline"
data-type="label"
data-device="iPadBattery"
data-get="state">
</div>
<div class="inline" data-type="label">%</div>
            </li>
            <li data-row="1" data-col="8" data-sizey="1" data-sizex="1"> <!-- Reload - Widget -->
                <header>FTUI</header>
<div data-type="push"
data-device="FTUI_Reload"
data-cmd="setreading"
data-set="action"
data-set-on="1"
data-icon="fa-refresh">
</div>
<div data-type="reload"
data-device="FTUI_Reload"
data-get="action"
data-reload-on="1"
data-reset-to="0">
</div>
                <div data-type="label" class="cell">Seite neu laden</div>
            </li>
            <li data-row="2" data-col="1" data-sizex="1" data-sizey="2"> <!-- Terrasse - Widget -->
                <header>TERRASSE</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell top-align top-space">
<div class="inline big"> Temperatur:</div>
<div class="inline big"
data-type="label"
data-device="Sensor_HT_Gartenhaus_Aussen"
data-get="temperature"
data-limits='[2,2,10,23]'
data-colors='["white","blue","green","#FF0000"]'
data-post-text=" &deg;C">
</div>
<div class="big"
data-type="symbol"
data-device="Sensor_HT_Gartenhaus_Aussen"
data-get="temperature"
data-states='["^-.*","[0-2].[0-9]","[3-9].[0-9]","[1-9][0-9].[0-9]"]'
data-icons='["oa-weather_frost fa-spin","oa-weather_frost blink","",""]'
data-colors='["blue","lightblue","green","orange"]'>
</div>
<div class="inline"> Luftfeuchte:</div>
<div class="inline"
data-type="label"
data-device="Sensor_HT_Gartenhaus_Aussen"
data-get="humidity"
data-unit="%">
</div>
<div data-type="switch" data-device="TerrasseLicht" class="" data-set-on="on" data-get-on="An" data-get-off="Aus" data-set-off="off" data-timeout="10000"></div>
                            <div data-type="label" class="">Licht</div>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Wecker - Widget - DEAKTIVIERT -->
<!--
<li data-row="5" data-col="1" data-sizex="3" data-sizey="1">
<header>Wecker</header>
<div class="sheet">
<div class="row">
<div class="cell top-align"
data-type="settimer" data-device="AufstehTimer" set-off="off" get-off="off" off="Aus">
</div>
</div>
</div>
</li>
-->
            <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"> <!-- Erledigt-Button für Abfall - Widget -->
                <header>Abfall erledigt</header>
                <div class="sheet">
                    <div class="row">
<div data-type="switch"
class="normal top-space"
data-device="Abfallrausstellen"
data-set-states='["Erledigt","ToDo"]'
data-states='["ToDo","Erledigt"]'
data-icons='["", "bigger fa-check"]'
data-colors='["blue", "green"]'
data-background-colors='["transparent green", "half-transparent red"]'
data-background-color="transparent">
</div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="2" data-sizey="1" data-sizex="1"> <!-- Terrasse Bewässerung -->
                <header>Bewässerung</header>
                    <div class="">
<div data-type="circlemenu"
data-item-diameter="1"
data-circle-radius="80"
class="keepopen top-space-2x center-align left-narrow-3x">

<ul>
<li>
<div data-type="push"
data-get="STATE"
data-on-color="red"
data-on-background-color="green"
data-off-color="green"
data-off-background-color="grey"
data-icon="oa-sani_sprinkling"
data-background-icon="fa-circle-thin"
class="big center-aligned noshade">
</div>
</li>

<li> <!-- Ausschalten -->
<div data-type="push"
data-device="HM_340CA6_Sw_03"
data-set-on="off"
data-off-background-color="white"
data-icon="fa-power-off"
class="normal blue bold">
</div>
<div data-type="label" class="large">Aus</div>
</li>
<li> <!-- 5 Minuten -->
<div data-type="push"
data-device="HM_340CA6_Sw_03"
data-set-on="on-for-timer 300"
data-on-color="red"
data-off-color="green"
data-off-background-color="black"
data-icon="fa-power-off">
</div>
<div data-type="label" class="large">5 min</div>
</li>
<li> <!-- 10 Minuten -->
<div class="normal blue bold noshade"
data-type="push"
data-device="HM_340CA6_Sw_03"
data-set-on="on-for-timer 600"
data-on-color="red"
data-off-color="green"
data-off-background-color="black"
data-icon="fa-power-off">
</div>
<div data-type="label" class="large">10 min</div>
</li>
<li> <!-- 15 Minuten -->
<div data-type="push"
data-device="HM_340CA6_Sw_03"
data-set-on="on-for-timer 900"
data-on-color="red"
data-off-color="green"
data-off-background-color="black"
class="normal yellow bold"
>
</div>
<div data-type="label" class="large">15 min</div>
</li>
<li> <!-- 20 Minuten -->
<div data-type="push"
data-device="HM_340CA6_Sw_03"
data-set-on="on-for-timer 1200"
data-on-color="red"
data-off-color="green"
data-off-background-color="black"
class="normal yellow bold"
>
</div>
<div data-type="label" class="large">20 min</div>
</li>
</ul>
</div>
</div>
            </li>
            <li data-row="2" data-col="3" data-sizey="1" data-sizex="1"> <!-- Ventilator Toilette -->
                <header>Toilette EG</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell-60 centered newline">
<div data-type="switch"
class="top-space-2x normal"
data-device="Ventilator_Toilette"
data-set-on="on-for-timer 600"
data-set-off="off"
data-get="state"
data-get-on="on|ON"
data-get-off="off|OFF"
data-icon="oa-vent_ventilation_level_3">
</div>
<div data-type="label"
data-device="Ventilator_Toilette"
data-get="DisplayOnForTimer"
data-substitution='["0","Ventilator an","1","Lüftung (10 min)"]'
class="inline display-bottomcenter bottom-space-2x"
>
</div>
                        </div>
                    </div>
                </div>
            </li>
<li data-row="2" data-col="4" data-sizex="4" data-sizey="4"> <!-- Wetter - Widget -->
<div class="sheet">

<div class="row">
<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">morgens (6h)</div>
<div data-type="weather" data-device="Wetter_Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">mittags</div>
<div data-type="weather" data-device="Wetter_Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">abends (18h)</div>
<div data-type="weather" data-device="Wetter_Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
</div>
</div>

<div class="container top-space-3x">
<div data-type="label" class="cell bigger darker">Morgen</div>
</div>

<div class="sheet">
<div class="row">
<div class="col-1-3">
<div data-type="label" class="cell top-space darker">morgens (6h)</div>
<div data-type="weather" data-device="Wetter_Proplanta" data-get="fc1_weatherMorningIcon" data-imageset="kleinklima" class="cell half-transparent"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc1_weatherMorning" class="cell top-narrow darker"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc1_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space darker">mittags</div>
<div data-type="weather" data-device="Wetter_Proplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell half-transparent"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc1_weatherDay" class="cell top-narrow darker"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc1_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space darker">abends (18)</div>
<div data-type="weather" data-device="Wetter_Proplanta" data-get="fc1_weatherEveningIcon" data-imageset="kleinklima" class="cell half-transparent"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc1_weatherEvening" class="cell top-narrow darker"></div>
<div data-type="label" data-device="Wetter_Proplanta" data-get="fc1_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div>
</div>
</div>
</div>

</li>
            <li data-row="2" data-col="8" data-sizey="4" data-sizex="1"> <!-- Abfall - Widget -->
                <header><div data-type="label" class="large">Abfall</div></header>
<!-- ab hier die 5 möglichen Symbole für den 1 ersten Abholtermin -->
<div data-type="symbol"
data-device="Abfalltermin1"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["green","green"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BioTonne"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin1"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Gelber_Sack"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin1"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Altpapier"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin1"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Restmuell"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin1"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["red","red"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BEST-tas"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="label"
data-device="Abfalltermin1"
data-get="Sorte"
data-substitution='["Restmuell","Restmüll","Gelber_Sack","Gelber Sack (PMD)"]'
data-hide="Sorte"
data-hide-on="-">
</div>
<!-- hier das "Erledigt"-Symbol für den ersten Abholtermin -->
<div data-type="link"
class="half-transparent fullsize"
style="position:absolute; top: 0px; left: 0px;"
data-width="150"
data-color="green"
data-background-color="transparent"
data-url="https://www.focus.de">
</div>

<br>
<!-- ab hier die 5 möglichen Symbole für den zweiten Abholtermin -->
<div data-type="symbol"
data-device="Abfalltermin2"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["green","green"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BioTonne"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin2"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Gelber_Sack"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin2"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Altpapier"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin2"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Restmuell"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin2"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["red","red"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BEST-tas"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="label"
data-device="Abfalltermin2"
data-get="Sorte"
data-substitution='["Restmuell","Graue Tonne","Gelber_Sack","Gelber Sack (PMD)"]'
data-hide="Sorte"
data-hide-on="-">
</div>
<br>
<!-- ab hier die 5 möglichen Symbole für den dritten Abholtermin -->
<div data-type="symbol"
data-device="Abfalltermin3"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["green","green"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BioTonne"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin3"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Gelber_Sack"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin3"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Altpapier"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin3"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Restmuell"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin3"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["red","red"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BEST-tas"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="label"
data-device="Abfalltermin3"
data-get="Sorte"
data-substitution='["Restmuell","Graue Tonne","Gelber_Sack","Gelber Sack (PMD)"]'
data-hide="Sorte"
data-hide-on="-">
</div>
<br>
<!-- ab hier die 5 möglichen Symbole für den vierten Abholtermin -->
<div data-type="symbol"
data-device="Abfalltermin4"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["green","green"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BioTonne"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin4"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Gelber_Sack"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin4"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Altpapier"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin4"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Restmuell"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin4"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["red","red"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BEST-tas"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="label"
data-device="Abfalltermin4"
data-get="Sorte"
data-substitution='["Restmuell","Graue Tonne","Gelber_Sack","Gelber Sack (PMD)"]'
data-hide="Sorte"
data-hide-on="-">
</div>
<br>
<!-- ab hier die 5 möglichen Symbole für den fuenften Abholtermin -->
<div data-type="symbol"
data-device="Abfalltermin5"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["green","green"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BioTonne"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin5"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["yellow","yellow"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Gelber_Sack"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin5"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["blue","blue"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Altpapier"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin5"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["black","black"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="Restmuell"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="symbol"
data-device="Abfalltermin5"
data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
data-colors='["red","red"]'
data-get-on='["0","2"]'
data-background-icon="fa-circle"
data-hide="Sorte"
data-hide-off="BEST-tas"
data-hide-on="!off"
class="big inline" >
</div>
<div data-type="label"
data-device="Abfalltermin5"
data-get="Sorte"
data-substitution='["Restmuell","Graue Tonne","Gelber_Sack","Gelber Sack (PMD)"]'
data-hide="Sorte"
data-hide-on="-">
</div>
            </li>
            <li data-row="4" data-col="1" data-sizex="3" data-sizey="1"> <!-- Heizungswerte - Widget -->
                <header>Heizung</header>
                <div class="sheet">
<div class="row">
<div class="col-25 compressed centered">
<div class="center bigger">
<div data-type="symbol"
data-device="AWB_Heizung"
data-get="Brenner"
data-get-on="on"
data-get-off="off"
data-icon="oa-sani_boiler_temp"
data-on-color="orange"
data-off-color="gray"
>
</div>
</div>
</div>
<div class="col-30">
<div class="wide top-space-2x">
<div class="left small inline compressed"
data-type="symbol"
data-color="red"
data-device="AWB_Heizung"
data-icon="oa-control_arrow_rightward"
>
</div>
<div data-type="label"
data-device="AWB_Heizung"
data-get="Vorlauftemperatur"
data-color="red"
data-unit=" &deg;C"
class="inline large"
>
</div>
</div>
<div class="wide top-space">
<div class="left small inline compressed"
data-type="symbol"
data-color="blue"
data-device="AWB_Heizung"
data-icon="oa-control_arrow_leftward"
>
</div>
<div data-type="label"
data-device="AWB_Heizung"
data-get="Vorlauftemperatur"
data-color="blue"
data-unit=" &deg;C"
class="inline large"
>
</div>
</div>
</div>
<div class="col-20">
<div class="big center compressed"
data-type="symbol"
data-icon="oa-sani_pump"
data-color="gray"
>
</div>
</div>
<div class="col">
<div class="center left large compressed"
data-type="label"
data-device="AWB_Heizung"
data-get="CHWaterPressure"
data-color="green"
data-unit=""
data-post-text=" bar"
>
</div>
</div>
</div>
                </div>
            </li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="1"> <!-- Heizungswerte - Widget -->
                <header>Score</header>
<div class="center"
data-type="score"
data-device="scaleTest"
data-get="STATE"
data-orientation="vertical"
data-font-size="18"
data-min="0"
data-max="24"
data-color="#f00"
data-tick-color="#777"
data-color="#4e4"
data-tick="2"
data-extra-tick="6"
data-value-interval="6"
>
</div>
            </li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1"> <!-- Heizungswerte - Widget -->
                <header>Scale</header>
<div class="center"
data-type="scale"
data-device="scaleTest"
data-get="STATE"
data-orientation="vertical"
data-font-size="18"
data-min="0"
data-max="24"
data-color="#f00"
data-tick-color="#777"
data-color="#4e4"
data-tick="2"
data-extra-tick="6"
data-value-interval="6"
>
</div>
            </li>
        </ul>
    </div>
</body>

</html>

Die Datei widget_score.js (die Anpassungen im Vergleich zu sind in den Zeilen 146 und 201, in denen ich 'scale' durch 'score' ersetzt habe):
[code]/* FTUI Plugin
* Copyright (c) 2017 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*/

/* global ftui:true, Modul_widget:true */

"use strict";

//

function depends_scale() {
    var deps = [];
    return deps;
}

var Modul_scale = function () {

    // privat sub function
    function drawScale(elem) {

        var canvas = elem.canvas ? elem.canvas[0] : elem.find('canvas')[0];

        if (canvas.getContext) {

            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);

            var max = elem.data('max');
            var min = elem.data('min');
            var fontSize = elem.data('font-size');
            var tick = elem.data('tick');
            var value = elem.data('value');
            var extraTick = elem.data('extra-tick');
            var valColor = elem.data('value-color');
            var valInterval = elem.data('value-interval');
            var tickColor = elem.data('tick-color');
            var orientation = elem.data('orientation');
            var dimension = (orientation === 'horizontal') ? canvas.width : canvas.height;
            var n = extraTick;


            for (var i = min; i < max + 1; i++) {
                n++;
                if (n >= tick) {
                    n = 0;
                    var val = ((dimension - 20) * (i - min) / (max - min)) + 5;
                    if (i <= value) {
                        context.strokeStyle = valColor;
                    } else {
                        context.strokeStyle = tickColor;
                    }

                    context.lineWidth = 1.5;
                    context.beginPath();
                   
                    // thicker lines every n ticks
                    if (i % extraTick === 0) {
                        if (orientation === 'horizontal') {
                            context.moveTo(val, 0);
                            context.lineTo(val, canvas.height - fontSize);
                        } else {
                            context.moveTo(25, dimension-val);
                            context.lineTo(canvas.width, dimension-val);
                        }
                    } else {
                        if (orientation === 'horizontal') {
                            context.moveTo(val, (canvas.height - fontSize) * 0.1);
                            context.lineTo(val, (canvas.height - fontSize) * 0.9);

                        } else {
                            context.moveTo((canvas.width - fontSize) * 0.1 + 25, dimension-val);
                            context.lineTo((canvas.width - fontSize) * 0.9 + fontSize, dimension-val);
                        }
                    }

                    context.stroke();

                    //cavans font
                    var cfont = fontSize * window.devicePixelRatio * 0.5 + "px sans-serif";

                    //draw vvalue as text
                    if (i % valInterval === 0 && !elem.hasClass('notext')) {
                        context.fillStyle = '#eee';
                        context.font = cfont;
                        if (orientation === 'horizontal') {
                            context.fillText(i, val - String(i).length*3, canvas.height);
                        } else {
                            context.fillText(i, 0, dimension-val+5);
                        }
                    }
                }
            }

        }
    }

    function update_colorize(value, elem) {
        //set colors according matches for values
        var limits = elem.data('limits');
        var colors = elem.data('colors');
        if (limits) {
            var idx = ftui.indexOfGeneric(limits, value);
            if (idx > -1) {
                if (colors) {
                    elem.data("value-color", ftui.getStyle('.' + colors[idx], 'color') || colors[idx]);
                }
            }
        }
    }

    function init_attr(elem) {

        //init standard attributes
        base.init_attr.call(me, elem);

        elem.initData('orientation', 'horizontal');
        elem.initData('width', (elem.data('orientation') === 'horizontal') ? elem.parent().width() * 0.8 : 50);
        elem.initData('height', (elem.data('orientation') === 'horizontal') ? 25 : elem.parent().height() * 0.8 );
        elem.initData('value', 20);
        elem.initData('min', 0);
        elem.initData('max', 100);
        elem.initData('font-size', 12);
        elem.initData('tick', 1);
       
        elem.initData('value-interval', 50);
        elem.initData('extra-tick', 10);
        elem.initData('tick-color', '#bbb');
        elem.initData('limits-part', elem.data('part'));
        elem.initData('limits-get', (elem.data('device')) ? elem.data('device') + ':' + elem.data('get') : elem.data('get'));
        elem.initData('limits', elem.data('states') || []);
        elem.initData('colors', ['#505050']);
        elem.initData('color', '#aa6900');
        if (elem.isDeviceReading('color')) {
            me.addReading(elem, 'color');
        } else {
            elem.data('value-color', elem.data('color'));
        }

    }


    function init_ui(elem) {

        elem.canvas = $('<canvas>').attr({
            id: 'score',
            height: elem.data('height') + elem.data('font-size'),
            width: elem.data('width')
        }).appendTo(elem);

    }


    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par)
            .each(function (index) {
                var elem = $(this);
                var val = elem.getReading('get').val;
                val = ftui.getPart(val, elem.data('part'));
                val = me.substitution(val, elem.data('substitution'));
                val = me.map(elem.data('map-get'), val, val);
                val = me.fix(val, elem.data('fix'));
                elem.data('value', val);
                drawScale(elem);
            });

        // do updates from reading for color
        me.elements.filterDeviceReading('color', dev, par)
            .each(function (idx) {
                var elem = $(this);
                var val = elem.getReading(
fhem auf Raspberry2 mit MAX! (via CUL f. Raumthermostat, Fensterkontakte und Heizungen) und HM (via LanAdapter für Raumthermostat, 6-fach Taster, 4-fach Hutschiene, Statusanzeige, Stecker m. Leistungsmessung); In Entwicklung: Heizungsüberwachung via Adapter & MQTT; Stromverbrauchsüberwachung (1wire)

amenomade

#1
02 Juni 2020, 01:55:00
Dein Code ist unvollständig.

Es fehlt insb. das "extend Modul_widget" Teil.

Deine Hauptdeklaration sollte auch Modul_score heissen, und die depends Funktion depends_score, sonst überschreiben sich die Sachen zwischen scale und score.
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Uef

#2
02 Juni 2020, 19:05:07
Hallo amenomade,

vielen Dank.
Nachdem ich die Hauptdeklaration und die depends-Funktion geändert habe, funktioniert es nun.

Der extend-Teil am Ende war in Ordnung, allerdings etwas anders implementiert als in den Beispielen.

Das mit der Hauptdeklaration hatte ich im Wiki leider überlesen; dass sich aber auch im Namen der depends-Funktion der Modulname befinden muss, war mir nicht klar.

Perfekt, jetzt geht es mit den eigentlichen Codeanpassungen weiter.
fhem auf Raspberry2 mit MAX! (via CUL f. Raumthermostat, Fensterkontakte und Heizungen) und HM (via LanAdapter für Raumthermostat, 6-fach Taster, 4-fach Hutschiene, Statusanzeige, Stecker m. Leistungsmessung); In Entwicklung: Heizungsüberwachung via Adapter & MQTT; Stromverbrauchsüberwachung (1wire)
Drucken
Nach oben Seiten1
Benutzer-Aktionen