Cool. Danke.
ich ziehe das auf github so nach und ergänze auch die Doku für basic.symbol.
ich ziehe das auf github so nach und ergänze auch die Doku für basic.symbol.
{{ basic.symbol( 'burli', 'xyz.burli', ['radiation_00', 'radiation_10', 'radiation_20', 'radiation_30'], [10, 20, 30], '>') }}
{{ basic.symbol( '', 'Aussenbereich.Radioaktivitaet.Jahr.Icon', [COLOR=#e74c3c][B]'',[/B][/COLOR] ['radiation_10', 'radiation_20', 'radiation_30'], [10, 20, 30]) }}
<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>
/** * 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 -}} [COLOR=#e74c3c][B]<br />[/B][/COLOR] </span> {%- endfor -%} </{% if href is empty %}span{% else %}a{% endif %}> {% endmacro %}
{{ basic.symbol('', 'bath.light.value', [' ',''], ['', icon.shutter('', '', 'bath.light.value', '0', '100')], 0.1, '>', 'icon1') }}
Wir verarbeiten personenbezogene Daten über die Nutzer unserer Website mithilfe von Cookies und anderen Technologien, um unsere Dienste bereitzustellen. Weitere Informationen findest Du in unserer Datenschutzerklärung.
Indem Du unten auf "ICH stimme zu" klickst, stimmst Du unserer Datenschutzerklärung und unseren persönlichen Datenverarbeitungs- und Cookie-Praktiken zu, wie darin beschrieben. Du erkennst außerdem an, dass dieses Forum möglicherweise außerhalb Deines Landes gehostet wird und bist damit einverstanden, dass Deine Daten in dem Land, in dem dieses Forum gehostet wird, gesammelt, gespeichert und verarbeitet werden.
Kommentar