Ankündigung

Einklappen
Keine Ankündigung bisher.

Wer nutzt noch Basic.shifter?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    #16
    Cool. Danke.
    ich ziehe das auf github so nach und ergänze auch die Doku für basic.symbol.

    Kommentar


      #17
      Einen hab ich noch.

      Ich verwende für den Burli ein SVG für die Strahlungsampel. Das gab es so noch nicht, habe ich mir daher selber besorgt und händisch eingefärbt.
      Inzwischen gibt es auch ein Radioaktivitätswarnsymbol im Iconset von MFD, aber das gefällt mir nicht so gut. Zur Not würde ich das aber natürlich nehmen.
      Ich sollte mein eigenes mit basic.symbol eigentlich verwenden können, es läßt sich aber nicht einfärben. Hab schon x Tools versucht um das richtig zu konvertieren, es klappt aber nicht.

      Wenn das noch klappen würde, wäre wirklich alles erledigt.


      ws.zip

      Kommentar


        #18
        Hast Du mal versucht, die icons als Array an basic.symbol zu übergeben und Schwellwerte ebenfalls als Array? Plus formula '>'

        Code:
        {{ basic.symbol( 'burli', 'xyz.burli', ['radiation_00', 'radiation_10', 'radiation_20', 'radiation_30'], [10, 20, 30], '>') }}
        Warum das Einfärben nicht funktioniert, kann ich nicht sagen. Das muss ich gelegentlich ausprobieren.

        Kommentar


          #19
          So funktioniert es:

          Code:
          {{ basic.symbol( '', 'Aussenbereich.Radioaktivitaet.Jahr.Icon', '', ['radiation_10', 'radiation_20', 'radiation_30'], [10, 20, 30]) }}
          Da fehlte noch der leere Parameter für 'text' und die formula brauche ich bei mir nicht, weil die Iconwerte fest 10, 20 und 30 sind.

          Wenn du dazu kommst, wäre ein kleiner Hinweis in der basic.symbol Doku nett, dass man auch ein Icon Array übergeben kann. Kann man zwar weiter unten in den Beispielen finden, aber oben bei der Parameter Erklärung nicht.

          Also erstmal auch fertig. Damit habe ich wohl alle alten shifter ersetzt. Mit Einfärben wäre es trotzdem eleganter. Ich muss auch mal wieder sehen, ob ich das in das richtige Format bekomme.

          Nochmal vielen Dank für deine Hilfe, hat mir mehr geholfen als man denkt. Damit konnte ich nicht nur die Visu aufräumen, sondern auch die items.

          Gruß, Martin
          Zuletzt geändert von Sipple; 01.08.2020, 07:13.

          Kommentar


            #20
            Hier hast du ein einfärbbares SVG. Falls du stroke willst, musst halt noch adaptieren:
            Code:
            <svg xmlns="http://www.w3.org/2000/svg" version="1" width="502" height="469" viewBox="0 0 502 469">
            <g color="#000" fill="#fff">
            <path d="M213.531 282.172L126 433.766c79.674 46 170.326 46 250 0l-87.531-151.594c-.58.335-1.13.711-1.719 1.031a74.798 74.798 0 0 1-6.563 3.156 74.81 74.81 0 0 1-6.906 2.532 74.43 74.43 0 0 1-7.187 1.843c-2.44.5-4.917.87-7.438 1.125-2.52.257-5.069.407-7.656.407-2.588 0-5.136-.15-7.656-.407a74.653 74.653 0 0 1-7.438-1.125 74.43 74.43 0 0 1-7.187-1.843 74.81 74.81 0 0 1-6.906-2.532 74.798 74.798 0 0 1-6.563-3.156c-.589-.32-1.14-.696-1.719-1.031zM126 .734C46.326 46.734 1 125.266 1 217.266h175c0-2.588.119-5.168.375-7.688.256-2.52.656-4.997 1.156-7.437a74.43 74.43 0 0 1 1.844-7.188 74.205 74.205 0 0 1 2.531-6.875 75.021 75.021 0 0 1 11.219-18.531 75.803 75.803 0 0 1 10.188-10.156 74.852 74.852 0 0 1 5.75-4.313c1.439-.972 2.96-1.846 4.468-2.719L126 .734zM376 .734L288.469 152.36c1.508.873 3.03 1.747 4.469 2.72a74.852 74.852 0 0 1 5.75 4.312 75.803 75.803 0 0 1 10.187 10.156 75.379 75.379 0 0 1 8.063 11.969 74.798 74.798 0 0 1 3.156 6.562c.949 2.243 1.8 4.527 2.531 6.875a74.43 74.43 0 0 1 1.844 7.188c.5 2.44.9 4.917 1.156 7.437.256 2.52.375 5.1.375 7.688h175c0-92-45.326-170.532-125-216.532zM301 217.253c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50z"></path></g></svg>
            Oftmals kommt man um den Texteditor nicht rum..

            Kommentar


              #21
              Super, danke dir!

              Klappt. Könnte man in die Icons mit aufnehmen.
              Zuletzt geändert von Sipple; 04.08.2020, 16:19.

              Kommentar


                #22
                Wie müsste ich das basic.symbol denn anpassen, wenn ich es nur anzeigen möchte, wenn der item-Wert >0 ist?
                Bei einem item-Wert = 0 würde ich das Symbol gerne ausblenden.
                Der folgende Code zeigt das Symbol immer an, auch bei Wert=0.

                {{ basic.symbol('', 'knx.0.Sonnenschutz.Status_Position.OG_Büro_Status ', '', icon.shutter('', '', 'knx.0.Sonnenschutz.Status_Position.OG_Büro_Status ', '0', '100'), 0, '>', 'icon1') }}

                Kommentar


                  #23
                  Hast Du einmal 0.001 probiert, anstatt 0?
                  Das “>“-Zeichen steht für Schwellwert. Mathematisch wäre “>=“ richtiger.

                  Gruß
                  Wolfram

                  Kommentar


                    #24
                    Zitat von wvhn Beitrag anzeigen
                    Hast Du einmal 0.001 probiert, anstatt 0?
                    Das “>“-Zeichen steht für Schwellwert. Mathematisch wäre “>=“ richtiger.
                    Alles ausprobiert. Leider wird das Symbol immer angezeigt, auch denn die Position = 0 ist.
                    ob nun 0,001 oder 1 als Schwellwert gesetzt ist, ist vom praktischen Nutzen her an sich egal. In der Range zwischen 0 und 100 ist 1 als Schwellwert durchaus in Ordnung.

                    Kommentar


                      #25
                      Das Problem kommt mir bekannt vor. Drum habe ich auch noch ein abgewandeltes "mydevice.mysymbol" in Gebrauch. Ich hatte auch das Problem, dass basic.symbol immer ein Icon angezeigt hat. Irgendwer hat mal schon vor der 2.9 ein abgewandeltes widget gebaut.
                      Ob das allerdings kombinierbar mit z.B. icon.shutter ist, wage ich zu bezweifeln.


                      Code:
                      /**
                      * An icon or text, with no writing to backend, only displayed when the value of item is equal to defined value. Symbols may be used in menus.
                      * If more than one item is given, they will be combined with formula.
                      *
                      * @param {id=} unique id for this widget (optional)
                      * @param {item[?]=} zero, one or more item(s). More items in array form: [item1, item2] (optional)
                      * @param {text[?]=} the text, printed when item has value val (optional)
                      * @param {image[?]=control_on_off} the icon shown when item has value val (optional, default 'control_on_off' if text is empty)
                          dynamic icons can be used, e.g. icon.light('', '', value_item); please note: these must not be wrapped by apostrophs (')
                      * @param {text[?]=1} comparative value(s) (default 1)
                      * @param {formula=or} 'or', 'and' or any JavaScript expression with following variables, result will be compared to comparative value above. Additionally you can use 'min' and 'max' to test if any of the defined items has a value >= or <= comparative value (default 'or')
                          VAR1, VAR2, ... represent the corresponding item's value, VAR is an array of all item values
                          If the formula starts with a greater than symbol '>' the value will be treat as threshold. The symbol (text, icon and color) according to greatest reached threshold will be shown. The first symbol is the base for values below first threshold, so pass one symbol more than values.
                      * @param {color[?]=icon0} the color 'icon1' or e. g. '#f00' for red (default 'icon0' of the design)
                          this only applies to text, if no icon is set (for backward compatibility)
                      * @param {text=} URL to use as link (optional)
                      * @param {text=} used in combination with href as data-rel attribute {e.g. to open a popup} (optional)
                      *
                      * @see design/design_icons#Icons
                      *
                      * @author Martin Gleiß and Stefan Widmer
                      */
                      {% macro mysymbol(id, items, text, icon, value, formula, color, href, rel) %}
                          {% import "basic.html" as basic %}
                          {% set value = (value|default([1]) is iterable ? value|default([1]) : [value]) %}
                        {% set value = text|length > value|length or icon|length > value|length or color|length > value|length ? value|merge(['']) : value %} /** add an empty value if more icons/texts/colors as values are passed (used for threshold i.a.) */
                          {% set color = color|default('') %}
                          <{% if href is empty %}span{% else %}a href="{{ href }}"{% if rel is not empty %} data-rel="popup"{% endif %}{% endif %}{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} data-widget="basic.symbol" /** evtl. hier mydevice.mysymbol ? */
                              {% if not items is empty %}data-item="{{ implode(items) }}" style="display: none;" {% endif %}
                              data-val="{{ implode(value) }}"
                              data-mode="{{ formula|default('or') }}"
                          class="symbol">
                              {%- for val in value -%}
                                  {%- set pic = icon is iterable ? icon[loop.index0] : icon -%}
                                  {%- if text is empty %}{% set pic = pic|deficon('control_on_off.svg') %}{% endif -%}
                                  {%- set col = (color is iterable ? color[loop.index0] : color)|default('') -%}
                                  {%- set txt = (text is iterable ? text[loop.index0] : text)|default('') -%}
                                  <span data-val="{{ val }}"
                                      style="{% if not loop.first %}display:none;{% endif %}{% if pic is empty and not txt is empty and not col is empty and col != 'icon1' %}color: {{ col }};{% endif %}"
                                      {% if pic is empty and not txt is empty and col == 'icon1' %} class="icon1"{% endif %}>
                                      {%- if pic %}{{ basic.icon(pic, col) }}{% endif -%}
                                      {{- txt|raw -}}
                                      <br />
                                  </span>
                            {%- endfor -%}
                          </{% if href is empty %}span{% else %}a{% endif %}>
                      
                      {% endmacro %}
                      EDIT: Das modifizierte Widget ist die Lösung für ein anderes Problem (siehe Post 29).
                      Zuletzt geändert von Sipple; 11.10.2020, 08:30.

                      Kommentar


                        #26
                        Moin,
                        ich habe jetzt mal die obigen Zeilen 1:1 mit dem aktuellen basic.symbol verglichen und finde keinen Unterschied. Das Problem ist ein anderes (steht auch in der Doku): wenn mit Schwellwerten gearbeitet wird, wird das erste icon in der Liste immer angezeigt bis der Schwellwert erreicht wird, der dann das zweite icon aktiviert.

                        Also muss das erste icon leer bleiben und das icon.shutter auf Platz 2 gesetzt werden. Dumm ist nur, dass das Widget das erste icon dann defaultmäßig mit 'control_on_off.svg' belegt. Das macht es aber nur, wenn der entsprechende Text leer ist. Da wirkt ein Leerzeichen Wunder. So funktioniert die Anzeige dann bei mir im Test (item Namen geändert, weil ich auf einer Doku-Seite teste):
                        Code:
                        {{ basic.symbol('', 'bath.light.value', [' ',''], ['', icon.shutter('', '', 'bath.light.value', '0', '100')], 0.1, '>', 'icon1') }}
                        Gruß
                        Wolfram
                        Zuletzt geändert von wvhn; 09.10.2020, 18:42.

                        Kommentar


                          #27
                          Zitat von wvhn Beitrag anzeigen
                          So funktioniert die Anzeige dann bei mir im Test
                          ... und bei mir im Echtbetrieb. Vielen Dank für die Hilfe, da wäre ich von allein nicht so drauf gekommen.

                          Kommentar


                            #28
                            Jetzt sag nicht, dass das wegen eines Leerzeichens bei mir nicht geklappt hat
                            Muss ich auch noch ausprobieren.

                            Kommentar


                              #29
                              So, habe das jetzt mal ausprobiert und den eigentlichen Grund gefunden, warum ich ein modifiziertes basic.symbol verwende.
                              Es gibt doch einen kleinen aber feinen Unterschied: Ein zusätzliches </br>

                              Ich lasse mir in einem Block alle geöffneten Fenster anzeigen. Geschlossene nicht. Das geht mit basic.symbol.
                              Ohne die winzige Modifikation werden aber die geöffneten Fenster einfach hintereinander weg angezeigt und nicht untereinander. Das sieht unübersichtlich aus. Ein Zeilenumbruch in der Page hilft auch nicht weiter, weil der dann IMMER ausgeführt wird. Dann gibt es unschöne Leerzeilen, sieht auch blöd aus.
                              Die einzige Lösung, die ich damals gefunden habe, war, das Widget zu modifizieren und den Zeilenumbruch dort mit einzubauen. Das macht dann was es soll.

                              Kommentar

                              Lädt...
                              X