Aangepaste Kaart Templates Kaart Ondersteuning

De kaarten op deze pagina zijn sjablonen die zijn ontworpen om aangepaste kaartconfiguraties te genereren, specifiek voor gebruik met de Dreame Vacuum-integratie. Elke kaartsjabloon op deze pagina kan een andere installatie van een aangepaste kaart vereisen.

Kamerskaart

De Kamerskaart is ontworpen om alle meerdere aangepaste schoonmaakinstellingen-entiteiten die door de integratie voor elke kamer worden gegenereerd, te verzamelen en te beheren in één kaart met behulp van de Configuratiesjabloonkaart en Meerdere Entiteiten Rij aangepaste kaarten.

Voor meer informatie over deze entiteiten, raadpleeg de Kamerentiteiten voor Aangepast Schoonmaken.

Om de volledige kaartconfiguratie uit dit sjabloon te genereren, wordt de Home Assistant Sjabloon Editor gebruikt.

Als de My Home Assistant-integratie actief is, kan de onderstaande knop worden gebruikt om direct naar de Sjabloon Editor te navigeren:

Template-hulpmiddelen van

Als handmatige navigatie vereist is, volg dan deze stappen:

1. Navigeer naar het Developer Tools-paneel in Home Assistant.
2. Selecteer het Template-tabblad in het bovenste menu.
3. Plak de hieronder gegeven templatecode in het linkerpaneel van de editor.
4. Kopieer de resulterende YAML-uitvoer die wordt gegenereerd in het rechter Result-paneel.
5. Plak de gegenereerde uitvoer in de Lovelace-cardconfiguratie.

Belangrijk

Zorg ervoor dat je de vacuum.-placeholder in de {% set vacuum_entity = "vacuum." %}-regel vervangt door je daadwerkelijke vacuum-entiteit-ID voordat je de template gebruikt.

Voorbeeld: {% set vacuum_entity = "vacuum.l10s_gen2" %}

Toon Code

{# ----------------- PROVIDE YOUR OWN ENTITY ID HERE ----------------- #}
{% set vacuum_entity = "vacuum." %}
{# ------------------- DO NOT CHANGE ANYTHING BELOW ------------------- #}
{%- set vacuum_name = states[vacuum_entity].entity_id.replace('vacuum.', '') %} 
{%- set mop_pad = ('mop_pad_humidity' in states[vacuum_entity].attributes)|bool %}
{% set rooms = namespace(list=[]) %}
{%- if 'rooms' in states[vacuum_entity].attributes %}
{%- for map in states[vacuum_entity].attributes.rooms.values() %}  
    {%- for room in map %}      
    {%- if room.id not in rooms.list %}
        {%- set rooms.list = rooms.list + [room.id] %}
    {%- endif %}
    {%- endfor %}
{%- endfor %}
{%- endif %}
{%- set rooms.list = rooms.list|sort() %}

type: entities
title: Rooms
show_header_toggle: false
entities:
{%- for room in rooms.list %}
{%- set custom_cleaning_mode = states['select.' + vacuum_name + '_room_' + room|string + '_cleaning_mode'] != None %}
{%- set room_exists = "states['" + vacuum_entity + "'].attributes.cleaning_sequence && states['" + vacuum_entity + "'].attributes.cleaning_sequence.length > " + (loop.index - 1)|string  %} 
{%- set room_id = "(" + room_exists + " ? (states['" + vacuum_entity + "'].attributes.cleaning_sequence[" + (loop.index - 1)|string + "]) : " + room|string + ")" %}
{%- set current_room = "(vars[5].state == 'unavailable' && states['select." + vacuum_name + "_cleaning_mode'].state == 'unavailable' && states['" + vacuum_entity + "'].attributes.current_segment == vars[0])" %}
  - type: custom:config-template-card
    variables:
      - >- 
        {{ room_id }}
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_name'] 
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_suction_level']
      {%- if mop_pad %}
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_mop_pad_humidity']
      {%- else %}
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_water_volume']
      {%- endif %}
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_cleaning_times']
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_order']
      - >- 
        states['{{ vacuum_entity }}']
      - >-
        (vars[6].attributes.rooms && vars[6].attributes.selected_map ? vars[6].attributes.rooms[vars[6].attributes.selected_map].filter(function (e) { return states['select.{{ vacuum_name }}_room_' + e.id + '_order'] && states['select.{{ vacuum_name }}_room_' + e.id + '_order'].state != 'not_set' }).length : 0)
      - >-
        ({{ current_room }} ? 'var(--state-icon-active-color)' : 'var(--primary-text-color)')
      - >-
        (vars[6].attributes.cleaning_sequence ? 'inherit' : 'none')
      - >-
        (vars[5] && vars[5].state != 'unavailable' ? 'inherit' : 'none')
      - >-
        (vars[6].attributes.customized_cleaning && (!vars[6].attributes.active_segments || states['{{ vacuum_entity }}'].attributes.active_segments.includes(vars[0])) ? 'inherit' : 'none')        
      - >-
        (vars[5] && vars[5].state != 'not_set' ? 'inherit' : 'hidden')
      {%- if custom_cleaning_mode %}
      - states['select.{{ vacuum_name }}_room_' + vars[0] + '_cleaning_mode']
      {%- endif %}
    entities:
      - ${vars[1].entity_id}
      - ${vars[2].entity_id}
      - ${vars[3].entity_id}
      - ${vars[4].entity_id}
      - ${vars[5].entity_id}
      - ${vars[6].entity_id}
      {%- if custom_cleaning_mode %}
      - ${vars[13].entity_id}
      {%- endif %}
    card:
      type: conditional
      conditions:
        - entity: ${vars[1].entity_id}
          state_not: unavailable
      card:            
        type: custom:multiple-entity-row
        entity: ${vars[1].entity_id}
        show_state: false
        name: ${vars[1].state}
        entities:
        {%- if custom_cleaning_mode %}
          - icon: ${vars[13].attributes.icon}
            entity: ${vars[13].entity_id}
            name: ' '
            tap_action: 
              action: call-service
              service: dreame_vacuum.select_select_next
              service_data:
                entity_id: ${vars[13].entity_id}
            double_tap_action:
              action: call-service
              service: dreame_vacuum.select_select_previous
              service_data:
                entity_id: ${vars[13].entity_id}
            hold_action:
              action: more-info
            styles:
              display: ${vars[11]}
              pointer-events: >-
                ${vars[13].state != 'unavailable' ? 'inherit' : 'none'}
              width: 28px
              '--paper-item-icon-color': ${vars[8]}
        {%- endif %}
          - icon: ${vars[2].attributes.icon}
            entity: ${vars[2].entity_id}
            name: ' '
            tap_action: 
              action: call-service
              service: dreame_vacuum.select_select_next
              service_data:
                entity_id: ${vars[2].entity_id}
            double_tap_action:
              action: call-service
              service: dreame_vacuum.select_select_previous
              service_data:
                entity_id: ${vars[2].entity_id}
            hold_action:
              action: more-info
            styles:
              display: ${vars[11]}
              pointer-events: >-
                ${vars[2].state != 'unavailable' ? 'inherit' : 'none'}
              width: 28px
              '--paper-item-icon-color': ${vars[8]}
          - icon: ${vars[3].attributes.icon}
            entity: ${vars[3].entity_id}
            name: ' '
            tap_action:
              action: call-service
              service: dreame_vacuum.select_select_next
              service_data:
                entity_id: ${vars[3].entity_id}
            double_tap_action:
              action: call-service
              service: dreame_vacuum.select_select_previous
              service_data:
                entity_id: ${vars[3].entity_id}
            styles:
              display: ${vars[11]}
              pointer-events: >-
                ${vars[3].state != 'unavailable' ? 'inherit' : 'none'}
              width: 28px
              '--paper-item-icon-color': ${vars[8]}
          - icon: ${vars[4].attributes.icon}
            entity: ${vars[4].entity_id}
            name: ' '
            tap_action:
              action: call-service
              service: dreame_vacuum.select_select_next
              service_data:
                entity_id: ${vars[4].entity_id}
            double_tap_action:
              action: call-service
              service: dreame_vacuum.select_select_previous
              service_data:
                entity_id: ${vars[4].entity_id}
            hold_action:
              action: more-info
            styles:
              display: ${vars[11]}
              pointer-events: >-
                ${vars[4].state != 'unavailable' ? 'inherit' : 'none'}
              width: 28px
              '--paper-item-icon-color': ${vars[8]}
          - icon: mdi:chevron-down
            entity: ${vars[5].entity_id}
            name: ' '
            tap_action:
              action: call-service
              service: dreame_vacuum.select_select_next
              service_data:
                entity_id: ${vars[5].entity_id}
                cycle: false
            hold_action:
              action: more-info
            styles:
              display: ${vars[9]}
              visibility: ${vars[12]}
              margin-right: 0
              margin-left: 8px
              '--paper-item-icon-color': >-
                ${(vars[7] > {{ loop.index }} ? 'var(--primary-color)' : 'var(--state-unavailable-color)')}
              pointer-events: >-
                ${(vars[7] > {{ loop.index }} ? vars[10] : 'none')}
          - icon: mdi:chevron-up
            entity: ${vars[5].entity_id}
            name: ' '
            tap_action:
              action: call-service
              service: dreame_vacuum.select_select_previous
              service_data:
                entity_id: ${vars[5].entity_id}
                cycle: false
            hold_action:
              action: more-info
            styles:
              display: ${vars[9]}
              visibility: ${vars[12]}
              '--paper-item-icon-color': {{ 'var(--primary-color)' if loop.index > 1 else 'var(--state-unavailable-color)' }}
              pointer-events: {{ "${vars[10]}" if loop.index > 1 else 'none' }}
  {%- endfor %}
  - type: divider
  - entity: switch.{{vacuum_name}}_customized_cleaning
    name: Customized Cleaning    
{%- if states['switch.' + vacuum_name + '_cleaning_sequence'] is not none %}
  - entity: switch.{{vacuum_name}}_cleaning_sequence
    name: Cleaning Sequence
{%- endif %}

Cleaning History Card

De Cleaning History-card is ontworpen om kaarten van eerdere schoonmaakopdrachten weer te geven met behulp van de Button Card-custom card. Een dropdownmenu bovenaan de kaart maakt het mogelijk om de kaart van een specifieke eerdere taak te selecteren en te bekijken.

Voor meer informatie over deze kaarten, raadpleeg de Schoonmaak- en Cruisinggeschiedenis Kaarten.

Toon Code

type: custom:button-card
entity: camera. # Current map camera entity
label: Cleaning History # Optional
title: Cleaning History # Optional
icon: mdi:clipboard-text-clock
tap_action:
  action: none
entity_picture: >
  [[[ return function(t){const e=t._config;if(t.shadowRoot.querySelector("hui-error-card")&&!t._u)return t._u=!0,t.style.opacity=0,void setTimeout((function(){t.style.opacity=1,t.update()}),0);if(!t.__shouldUpdate){t._u=!1;const i=/v=([^&]*)/,o=/index=([^&]*)/;t.__shouldUpdate=t.shouldUpdate,t.shouldUpdate=function(t){const e=this;let o=e.__shouldUpdate(t);if(t&&t.has("_config"))return e.shouldUpdate=e.__shouldUpdate,e.__shouldUpdate=null,e._s=null,!0;const a=e._config,n=e._hass.states[a.entity],l=t.get("_hass"),s=l?l.states[a.entity]:null;if(o=l&&s!=n,!o)return!1;e._l&&(e._l.stateObj=n);let r=e.__items(e._hass);const c=e.__items(l)[0].join(",")!==r[0].join(",");if(e._i&&n&&!c){if(!c&&e._i&&n&&e._a){const t=n.attributes.access_token;if(t!=e._a&&(e._config.hold_action.url_path=e._i[1].replace(e._a,t),e._a=t,this._config.custom_fields))return!0}return e.hass=e._hass,!1}let d=0;const u=e._s;if(n){const t=n.attributes.access_token;if(!c&&t!=e._a){let i=n.attributes[a.picture_list+"_picture"];if(i)if("string"==typeof i||i instanceof String)i=i.replace(e._a,t);else for(let o=0;o<r[0].length;o++)i[r[0][o]]=i[r[0][o]].replace(e._a,t)}if(e._a=t,d=u&&""===u.value?0:parseInt(u.value),d<0||d>=r[0].length)d=0;else if(d>0&&r[0].length>0&&(d=0,e._i&&(d=r[0].indexOf(e._i[0]),-1===d))){d=0;let t=e._i[1].match(i)[1];for(let e=0;e<r[1].length;e++)if(t==r[1][e].match(i)[1]){d=e;break}}}return u.label=!(!a.label||!n)&&a.label,e.__populate(d,r[0],u),u.dispatchEvent(new Event("change")),o},t.__items=function(t){if(t){const e=t.states[this._config.entity];if(e&&e.attributes){const t=e.attributes[this._config.picture_list+"_picture"];if(t){if("string"==typeof t||t instanceof String)return[[""],[t]];{const e=Object.values(t);if(e.length)return[Object.keys(t),e]}}}}return[[],[]]},t.__populate=function(t,e,i){const o={"(Completed)":"✔️","(Interrupted)":"❌","(Manually Ignored)":"⛔","(Automatically Ignored)":"⭕","(Edited)":"📝","(Original)":"✅","(Backup)":"💾"},a=new RegExp(Object.keys(o).join("|").replaceAll(")","\\)").replaceAll("(","\\("),"g"),n=function(t){return t&&t.length?t.replace(a,(t=>o[t])):""};if((t<0||t>=e.length)&&(t=0),void 0!==i._opened){let t=[];for(let i=0;i<e.length;i++)t.push({value:i+"",label:n(e[i])});i.options=t}else{let o="";for(let i=0;i<e.length;i++)o+='<mwc-list-item value="'+i+'"'+(t==i?" selected activated":"")+">"+n(e[i])+"</mwc-list-item>";i.innerHTML=o}i.value=t+"",i.selectedText=n(e[t])};const a="picture-selector",n=t.shadowRoot.querySelector("ha-card#"+a);n&&n.remove();const l=document.createElement("ha-card");let s;l.id=a,l.style.cssText="cursor:default;display:block;padding:12px 16px 16px;overflow:visible;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;",t.shadowRoot.children.length?t.shadowRoot.insertBefore(l,t.shadowRoot.children[0]):t.shadowRoot.appendChild(l),e.title&&e.title.length&&(" "!==e.title&&(s=document.createElement("h1"),s.className="card-header",s.style.padding="0 0 4px 0",s.innerHTML='<div class="name">'+e.title+"</div>",l.appendChild(s)),e.styles.grid||(e.styles.grid=[]),e.styles.grid=e.styles.grid.concat([{cursor:"default"},{display:"block"},{margin:"0 16px 16px"},{overflow:"hidden"},{"border-radius":"var(--ha-card-border-radius,12px)"},{"border-width":"var(--ha-card-border-width,1px)"},{"border-style":"solid"},{"border-color":"var(--ha-card-border-color,var(--divider-color,#e0e0e0))"},{background:"var(--input-disabled-fill-color);"}]));const r=t._hass.states[e.entity];t._a=r?r.attributes.access_token:"";const c=t.__items(t._hass),d=document.createElement("ha-select");if(d.style.cssText="width:auto;display:block;",e.icon&&e.icon.length){d.style.cssText+="margin:4px 0 0 40px;";const i=document.createElement("state-badge");i.stateObj=r,i.overrideIcon=e.icon,i.style.cssText="float:left;margin-top:12px;",l.appendChild(i),t._l=i}d.label=!(!e.label||!r)&&e.label,d.value="0",d.naturalMenuWidth=!0,1==c[0].length&&0==c[0][0].length&&(s?(d.style.display="none",t._l&&(t._l.style.display="none"),s.style.padding="0"):l.style.display="none"),t.__populate(0,c[0],d),l.appendChild(d),t._s=d;const u=function(e){const i=function(i){if(!i)return;const o=customElements.get("ha-circular-progress")?"ha-circular-progress":"ha-spinner",a=function(t){const e=t.target.parentElement.querySelectorAll(o).forEach((t=>t.remove()));e&&e.remove(),t.target.style.cursor=""};i.onload=function(t){i.style.height="",t.target.style.opacity=1,a(t),t.target.onload=null},i.onerror=function(e){t._i=!1,a(e),t.update()},i.style.opacity=0,i.style.cursor="wait",e&&0==i.naturalHeight&&i.width&&(i.style.height=i.width+"px");const n=document.createElement(o);n.active=!0,n.size="large",n.indeterminate=true,n.style.position="absolute",i.parentElement.appendChild(n)},o=t.shadowRoot.querySelector("#icon");o&&"IMG"==o.tagName?i(o):setTimeout((function(){const e=t.shadowRoot.querySelector("#icon");e&&0==e.naturalHeight&&e.width&&(e.style.height=e.width+"px"),i(e)}),0)};d.addEventListener("closed",(function(t){t.stopPropagation()}));const _=function(e){if(""!=e.target.value){const a=t.__items(t._hass);if(0===a[1].length)return void(t._i=!1);e.detail&&e.detail.value&&(e.target.value=e.detail.value);const n=parseInt(e.target.value);if(n>=0&&n<a[1].length&&(!t._i||t._i[0]!=a[0][n]&&t._i[1]!=a[1][n])){if(t._i){if(t._i[0]=a[0][n],t._i[1].match(i)[1]===a[1][n].match(i)[1])return;t._i[1]=a[1][n]}else t._i=[a[0][n],a[1][n]];t._config.hold_action.url_path=t._i[1];const e=t._i[1].match(o);t._x=e&&e.length>1?e[1]:"",u(),t.update()}}};if(d.onchange=_,d.addEventListener("selected",_),t._i=!1,t._config.hold_action={action:"url"},c[0].length){t._config.hold_action.url_path=c[1][0];const e=c[1][0].match(o);t._x=e&&e.length>1?e[1]:"";const i=t.shadowRoot.querySelector("#icon");i&&"IMG"==i.tagName?t._i=[c[0][0],c[1][0]]:(t.style.opacity=0,setTimeout((function(){t._i=[c[0][0],c[1][0]],u(!0),t.update(),t.style.opacity=1}),0))}}return t._i?t._i[1]+(e.extra_params&&e.extra_params.length?"&"+e.extra_params:""):void 0}(this) ]]]
picture_list: cleaning_history
size: 100%
show_name: false
show_entity_picture: true
styles:
  icon:
    - transition: opacity 180ms ease-in-out 0s
  card:
    - --mdc-ripple-color: rgba(0,0,0,0)
    - padding: 0
    - border-top-left-radius: 0
    - border-top-right-radius: 0
    - border-top: none

Cruising History Card

De Cruising History-kaart is ontworpen om kaarten van eerdere tochten naar punt- en tochtenpaden te maken met behulp van de Button Card aangepaste kaart. Een dropdownmenu bovenaan de kaart maakt het mogelijk om de kaart van een specifieke vorige taak te selecteren en te bekijken.

Voor meer informatie over deze kaarten, raadpleeg de Schoonmaak- en Cruisinggeschiedenis Kaarten.

Toon Code

type: custom:button-card
entity: camera. # Current map camera entity
label: Cruising History # Optional
title: Cruising History # Optional
icon: mdi:camera-marker
tap_action:
  action: none
entity_picture: >
  [[[ return function(t){const e=t._config;if(t.shadowRoot.querySelector("hui-error-card")&&!t._u)return t._u=!0,t.style.opacity=0,void setTimeout((function(){t.style.opacity=1,t.update()}),0);if(!t.__shouldUpdate){t._u=!1;const i=/v=([^&]*)/,o=/index=([^&]*)/;t.__shouldUpdate=t.shouldUpdate,t.shouldUpdate=function(t){const e=this;let o=e.__shouldUpdate(t);if(t&&t.has("_config"))return e.shouldUpdate=e.__shouldUpdate,e.__shouldUpdate=null,e._s=null,!0;const a=e._config,n=e._hass.states[a.entity],l=t.get("_hass"),s=l?l.states[a.entity]:null;if(o=l&&s!=n,!o)return!1;e._l&&(e._l.stateObj=n);let r=e.__items(e._hass);const c=e.__items(l)[0].join(",")!==r[0].join(",");if(e._i&&n&&!c){if(!c&&e._i&&n&&e._a){const t=n.attributes.access_token;if(t!=e._a&&(e._config.hold_action.url_path=e._i[1].replace(e._a,t),e._a=t,this._config.custom_fields))return!0}return e.hass=e._hass,!1}let d=0;const u=e._s;if(n){const t=n.attributes.access_token;if(!c&&t!=e._a){let i=n.attributes[a.picture_list+"_picture"];if(i)if("string"==typeof i||i instanceof String)i=i.replace(e._a,t);else for(let o=0;o<r[0].length;o++)i[r[0][o]]=i[r[0][o]].replace(e._a,t)}if(e._a=t,d=u&&""===u.value?0:parseInt(u.value),d<0||d>=r[0].length)d=0;else if(d>0&&r[0].length>0&&(d=0,e._i&&(d=r[0].indexOf(e._i[0]),-1===d))){d=0;let t=e._i[1].match(i)[1];for(let e=0;e<r[1].length;e++)if(t==r[1][e].match(i)[1]){d=e;break}}}return u.label=!(!a.label||!n)&&a.label,e.__populate(d,r[0],u),u.dispatchEvent(new Event("change")),o},t.__items=function(t){if(t){const e=t.states[this._config.entity];if(e&&e.attributes){const t=e.attributes[this._config.picture_list+"_picture"];if(t){if("string"==typeof t||t instanceof String)return[[""],[t]];{const e=Object.values(t);if(e.length)return[Object.keys(t),e]}}}}return[[],[]]},t.__populate=function(t,e,i){const o={"(Completed)":"✔️","(Interrupted)":"❌","(Manually Ignored)":"⛔","(Automatically Ignored)":"⭕","(Edited)":"📝","(Original)":"✅","(Backup)":"💾"},a=new RegExp(Object.keys(o).join("|").replaceAll(")","\\)").replaceAll("(","\\("),"g"),n=function(t){return t&&t.length?t.replace(a,(t=>o[t])):""};if((t<0||t>=e.length)&&(t=0),void 0!==i._opened){let t=[];for(let i=0;i<e.length;i++)t.push({value:i+"",label:n(e[i])});i.options=t}else{let o="";for(let i=0;i<e.length;i++)o+='<mwc-list-item value="'+i+'"'+(t==i?" selected activated":"")+">"+n(e[i])+"</mwc-list-item>";i.innerHTML=o}i.value=t+"",i.selectedText=n(e[t])};const a="picture-selector",n=t.shadowRoot.querySelector("ha-card#"+a);n&&n.remove();const l=document.createElement("ha-card");let s;l.id=a,l.style.cssText="cursor:default;display:block;padding:12px 16px 16px;overflow:visible;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;",t.shadowRoot.children.length?t.shadowRoot.insertBefore(l,t.shadowRoot.children[0]):t.shadowRoot.appendChild(l),e.title&&e.title.length&&(" "!==e.title&&(s=document.createElement("h1"),s.className="card-header",s.style.padding="0 0 4px 0",s.innerHTML='<div class="name">'+e.title+"</div>",l.appendChild(s)),e.styles.grid||(e.styles.grid=[]),e.styles.grid=e.styles.grid.concat([{cursor:"default"},{display:"block"},{margin:"0 16px 16px"},{overflow:"hidden"},{"border-radius":"var(--ha-card-border-radius,12px)"},{"border-width":"var(--ha-card-border-width,1px)"},{"border-style":"solid"},{"border-color":"var(--ha-card-border-color,var(--divider-color,#e0e0e0))"},{background:"var(--input-disabled-fill-color);"}]));const r=t._hass.states[e.entity];t._a=r?r.attributes.access_token:"";const c=t.__items(t._hass),d=document.createElement("ha-select");if(d.style.cssText="width:auto;display:block;",e.icon&&e.icon.length){d.style.cssText+="margin:4px 0 0 40px;";const i=document.createElement("state-badge");i.stateObj=r,i.overrideIcon=e.icon,i.style.cssText="float:left;margin-top:12px;",l.appendChild(i),t._l=i}d.label=!(!e.label||!r)&&e.label,d.value="0",d.naturalMenuWidth=!0,1==c[0].length&&0==c[0][0].length&&(s?(d.style.display="none",t._l&&(t._l.style.display="none"),s.style.padding="0"):l.style.display="none"),t.__populate(0,c[0],d),l.appendChild(d),t._s=d;const u=function(e){const i=function(i){if(!i)return;const o=customElements.get("ha-circular-progress")?"ha-circular-progress":"ha-spinner",a=function(t){const e=t.target.parentElement.querySelectorAll(o).forEach((t=>t.remove()));e&&e.remove(),t.target.style.cursor=""};i.onload=function(t){i.style.height="",t.target.style.opacity=1,a(t),t.target.onload=null},i.onerror=function(e){t._i=!1,a(e),t.update()},i.style.opacity=0,i.style.cursor="wait",e&&0==i.naturalHeight&&i.width&&(i.style.height=i.width+"px");const n=document.createElement(o);n.active=!0,n.size="large",n.indeterminate=true,n.style.position="absolute",i.parentElement.appendChild(n)},o=t.shadowRoot.querySelector("#icon");o&&"IMG"==o.tagName?i(o):setTimeout((function(){const e=t.shadowRoot.querySelector("#icon");e&&0==e.naturalHeight&&e.width&&(e.style.height=e.width+"px"),i(e)}),0)};d.addEventListener("closed",(function(t){t.stopPropagation()}));const _=function(e){if(""!=e.target.value){const a=t.__items(t._hass);if(0===a[1].length)return void(t._i=!1);e.detail&&e.detail.value&&(e.target.value=e.detail.value);const n=parseInt(e.target.value);if(n>=0&&n<a[1].length&&(!t._i||t._i[0]!=a[0][n]&&t._i[1]!=a[1][n])){if(t._i){if(t._i[0]=a[0][n],t._i[1].match(i)[1]===a[1][n].match(i)[1])return;t._i[1]=a[1][n]}else t._i=[a[0][n],a[1][n]];t._config.hold_action.url_path=t._i[1];const e=t._i[1].match(o);t._x=e&&e.length>1?e[1]:"",u(),t.update()}}};if(d.onchange=_,d.addEventListener("selected",_),t._i=!1,t._config.hold_action={action:"url"},c[0].length){t._config.hold_action.url_path=c[1][0];const e=c[1][0].match(o);t._x=e&&e.length>1?e[1]:"";const i=t.shadowRoot.querySelector("#icon");i&&"IMG"==i.tagName?t._i=[c[0][0],c[1][0]]:(t.style.opacity=0,setTimeout((function(){t._i=[c[0][0],c[1][0]],u(!0),t.update(),t.style.opacity=1}),0))}}return t._i?t._i[1]+(e.extra_params&&e.extra_params.length?"&"+e.extra_params:""):void 0}(this) ]]]
picture_list: cruising_history
size: 100%
show_name: false
show_entity_picture: true
styles:
  icon:
    - transition: opacity 180ms ease-in-out 0s
  card:
    - --mdc-ripple-color: rgba(0,0,0,0)
    - padding: 0
    - border-top-left-radius: 0
    - border-top-right-radius: 0
    - border-top: none

Obstakels Kaart

De Obstakels-kaart is ontworpen om foto's weer te geven van obstakels die door de robot zijn gedetecteerd tijdens de laatste schoonmaaktaak met behulp van de Button Card aangepaste kaart. Een dropdownmenu bovenaan de kaart toont de gedetecteerde obstakels, gerangschikt van nieuwst naar oudst op basis van de detectievolgorde, samen met de naam van de kamer waar elk obstakel is gevonden. Daarnaast kunnen obstakels handmatig worden genegeerd of niet-genegeerd direct vanaf deze kaart, mits ze niet dynamisch door het systeem worden genegeerd.

Voor meer informatie over deze kaarten, raadpleeg de Obstakelkaarten.

Toon Code

type: custom:button-card
entity: camera. # Current map camera entity
label: Obstacles # Optional
title: null # Optional
icon: mdi:traffic-cone
entity_picture: >
  [[[ return function(t){const e=t._config;if(t.shadowRoot.querySelector("hui-error-card")&&!t._u)return t._u=!0,t.style.opacity=0,void setTimeout((function(){t.style.opacity=1,t.update()}),0);if(!t.__shouldUpdate){t._u=!1;const i=/v=([^&]*)/,o=/index=([^&]*)/;t.__shouldUpdate=t.shouldUpdate,t.shouldUpdate=function(t){const e=this;let o=e.__shouldUpdate(t);if(t&&t.has("_config"))return e.shouldUpdate=e.__shouldUpdate,e.__shouldUpdate=null,e._s=null,!0;const a=e._config,n=e._hass.states[a.entity],l=t.get("_hass"),s=l?l.states[a.entity]:null;if(o=l&&s!=n,!o)return!1;e._l&&(e._l.stateObj=n);let r=e.__items(e._hass);const c=e.__items(l)[0].join(",")!==r[0].join(",");if(e._i&&n&&!c){if(!c&&e._i&&n&&e._a){const t=n.attributes.access_token;if(t!=e._a&&(e._config.hold_action.url_path=e._i[1].replace(e._a,t),e._a=t,this._config.custom_fields))return!0}return e.hass=e._hass,!1}let d=0;const u=e._s;if(n){const t=n.attributes.access_token;if(!c&&t!=e._a){let i=n.attributes[a.picture_list+"_picture"];if(i)if("string"==typeof i||i instanceof String)i=i.replace(e._a,t);else for(let o=0;o<r[0].length;o++)i[r[0][o]]=i[r[0][o]].replace(e._a,t)}if(e._a=t,d=u&&""===u.value?0:parseInt(u.value),d<0||d>=r[0].length)d=0;else if(d>0&&r[0].length>0&&(d=0,e._i&&(d=r[0].indexOf(e._i[0]),-1===d))){d=0;let t=e._i[1].match(i)[1];for(let e=0;e<r[1].length;e++)if(t==r[1][e].match(i)[1]){d=e;break}}}return u.label=!(!a.label||!n)&&a.label,e.__populate(d,r[0],u),u.dispatchEvent(new Event("change")),o},t.__items=function(t){if(t){const e=t.states[this._config.entity];if(e&&e.attributes){const t=e.attributes[this._config.picture_list+"_picture"];if(t){if("string"==typeof t||t instanceof String)return[[""],[t]];{const e=Object.values(t);if(e.length)return[Object.keys(t),e]}}}}return[[],[]]},t.__populate=function(t,e,i){const o={"(Completed)":"✔️","(Interrupted)":"❌","(Manually Ignored)":"⛔","(Automatically Ignored)":"⭕","(Edited)":"📝","(Original)":"✅","(Backup)":"💾"},a=new RegExp(Object.keys(o).join("|").replaceAll(")","\\)").replaceAll("(","\\("),"g"),n=function(t){return t&&t.length?t.replace(a,(t=>o[t])):""};if((t<0||t>=e.length)&&(t=0),void 0!==i._opened){let t=[];for(let i=0;i<e.length;i++)t.push({value:i+"",label:n(e[i])});i.options=t}else{let o="";for(let i=0;i<e.length;i++)o+='<mwc-list-item value="'+i+'"'+(t==i?" selected activated":"")+">"+n(e[i])+"</mwc-list-item>";i.innerHTML=o}i.value=t+"",i.selectedText=n(e[t])};const a="picture-selector",n=t.shadowRoot.querySelector("ha-card#"+a);n&&n.remove();const l=document.createElement("ha-card");let s;l.id=a,l.style.cssText="cursor:default;display:block;padding:12px 16px 16px;overflow:visible;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;",t.shadowRoot.children.length?t.shadowRoot.insertBefore(l,t.shadowRoot.children[0]):t.shadowRoot.appendChild(l),e.title&&e.title.length&&(" "!==e.title&&(s=document.createElement("h1"),s.className="card-header",s.style.padding="0 0 4px 0",s.innerHTML='<div class="name">'+e.title+"</div>",l.appendChild(s)),e.styles.grid||(e.styles.grid=[]),e.styles.grid=e.styles.grid.concat([{cursor:"default"},{display:"block"},{margin:"0 16px 16px"},{overflow:"hidden"},{"border-radius":"var(--ha-card-border-radius,12px)"},{"border-width":"var(--ha-card-border-width,1px)"},{"border-style":"solid"},{"border-color":"var(--ha-card-border-color,var(--divider-color,#e0e0e0))"},{background:"var(--input-disabled-fill-color);"}]));const r=t._hass.states[e.entity];t._a=r?r.attributes.access_token:"";const c=t.__items(t._hass),d=document.createElement("ha-select");if(d.style.cssText="width:auto;display:block;",e.icon&&e.icon.length){d.style.cssText+="margin:4px 0 0 40px;";const i=document.createElement("state-badge");i.stateObj=r,i.overrideIcon=e.icon,i.style.cssText="float:left;margin-top:12px;",l.appendChild(i),t._l=i}d.label=!(!e.label||!r)&&e.label,d.value="0",d.naturalMenuWidth=!0,1==c[0].length&&0==c[0][0].length&&(s?(d.style.display="none",t._l&&(t._l.style.display="none"),s.style.padding="0"):l.style.display="none"),t.__populate(0,c[0],d),l.appendChild(d),t._s=d;const u=function(e){const i=function(i){if(!i)return;const o=customElements.get("ha-circular-progress")?"ha-circular-progress":"ha-spinner",a=function(t){const e=t.target.parentElement.querySelectorAll(o).forEach((t=>t.remove()));e&&e.remove(),t.target.style.cursor=""};i.onload=function(t){i.style.height="",t.target.style.opacity=1,a(t),t.target.onload=null},i.onerror=function(e){t._i=!1,a(e),t.update()},i.style.opacity=0,i.style.cursor="wait",e&&0==i.naturalHeight&&i.width&&(i.style.height=i.width+"px");const n=document.createElement(o);n.active=!0,n.size="large",n.indeterminate=true,n.style.position="absolute",i.parentElement.appendChild(n)},o=t.shadowRoot.querySelector("#icon");o&&"IMG"==o.tagName?i(o):setTimeout((function(){const e=t.shadowRoot.querySelector("#icon");e&&0==e.naturalHeight&&e.width&&(e.style.height=e.width+"px"),i(e)}),0)};d.addEventListener("closed",(function(t){t.stopPropagation()}));const _=function(e){if(""!=e.target.value){const a=t.__items(t._hass);if(0===a[1].length)return void(t._i=!1);e.detail&&e.detail.value&&(e.target.value=e.detail.value);const n=parseInt(e.target.value);if(n>=0&&n<a[1].length&&(!t._i||t._i[0]!=a[0][n]&&t._i[1]!=a[1][n])){if(t._i){if(t._i[0]=a[0][n],t._i[1].match(i)[1]===a[1][n].match(i)[1])return;t._i[1]=a[1][n]}else t._i=[a[0][n],a[1][n]];t._config.hold_action.url_path=t._i[1];const e=t._i[1].match(o);t._x=e&&e.length>1?e[1]:"",u(),t.update()}}};if(d.onchange=_,d.addEventListener("selected",_),t._i=!1,t._config.hold_action={action:"url"},c[0].length){t._config.hold_action.url_path=c[1][0];const e=c[1][0].match(o);t._x=e&&e.length>1?e[1]:"";const i=t.shadowRoot.querySelector("#icon");i&&"IMG"==i.tagName?t._i=[c[0][0],c[1][0]]:(t.style.opacity=0,setTimeout((function(){t._i=[c[0][0],c[1][0]],u(!0),t.update(),t.style.opacity=1}),0))}}return t._i?t._i[1]+(e.extra_params&&e.extra_params.length?"&"+e.extra_params:""):void 0}(this) ]]]
picture_list: obstacle
size: 100%
show_entity_picture: true
show_name: false
custom_fields:
  buttons:
    card:
      type: custom:button-card
      name: >
        [[[ return (!this.__c || this.__c(this.__o()) ? 'Cancel Ignore' : 'Ignore Obstacle'); ]]]
      icon: >
        [[[ return (!this.__c || this.__c(this.__o()) ? 'mdi:eye' : 'mdi:eye-off'); ]]]
      confirmation: >
        [[[ return this.__c && !this.__c(this.__o()); ]]]
      size: 24px
      tap_action:
        action: call-service
        service: dreame_vacuum.vacuum_set_obstacle_ignore
        data: >
          [[[ return function(t){t.__o||(t.__o=function(){const n=t._hass.states[t._config.entity];return n&&n.attributes.obstacles&&n.attributes.obstacles[t._i?t._x:""]},t.__c=function(t){return t&&t.ignore_status&&"Not Ignored"!==t.ignore_status},t.__d=function(t){return t&&t.ignore_status&&t.ignore_status.indexOf("Automatically")>=0});const n=t.__o();if(n)return{entity_id:t._config.entity.replace("camera.","vacuum.").substring(0,t._config.entity.lastIndexOf("_map")),x:n.x,y:n.y,obstacle_ignored:!t.__c(n)}}(this); ]]]
      styles:
        grid:
          - display: contents
        img_cell:
          - display: contents
        name:
          - color: >
              [[[ return (!this.__d || this.__d(this.__o()) ? 'var(--state-icon-unavailable-color)' : 'var(--primary-text-color)'); ]]]
        icon:
          - color: >
              [[[ return (!this.__d || this.__d(this.__o()) ? 'var(--state-icon-unavailable-color)' : 'var(--primary-text-color)'); ]]]
          - margin: 0 6px 0 0
        card:
          - background-color: >
              [[[ return (!this.__d || this.__d(this.__o()) ? 'var(--state-unavailable-color)' : 'var(--primary-color)'); ]]]
          - pointer-events: >
              [[[ return (!this.__d || this.__d(this.__o()) ? 'none' : 'auto'); ]]]
          - border-radius: 100px
          - max-width: 200px
          - max-height: 48px
          - padding: 8px 24px
styles:
  custom_fields:
    buttons:
      - cursor: >
          [[[ return (!this.__d || this.__d(this.__o()) ? 'not-allowed' : 'default'); ]]]
      - margin: 16px
      - display: >
          [[[ const o = this.__o(); return (o && o.ignore_status ? 'inline-block': 'none'); ]]]
      - width: auto
  grid:
    - display: block
  icon:
    - transition: opacity 180ms ease-in-out 0s
  card:
    - '--mdc-ripple-color': rgba(0,0,0,0)
    - padding: 0
    - border-top-left-radius: 0
    - border-top-right-radius: 0
    - border-top: none

Kaart Herstel Kaart

De Kaartherstel-kaart is ontworpen om historische staten van de geselecteerde opgeslagen kaart weer te geven en biedt een knop om de kaart te herstellen naar een eerdere staat met behulp van de Button Card aangepaste kaart. Afhankelijk van het robotmodel zijn er 3 of 4 kaartback-ups beschikbaar voor herstel. Een vervolgkeuzemenu toont deze back-ups, waarbij zowel de tijd van wijziging als het type back-up wordt weergegeven.

Voor meer informatie over deze kaarten, raadpleeg de Herstelkaarten.

Toon Code

type: custom:button-card
entity: camera. # Current or saved map camera entity
label: Recovery Maps # Optional
title: Restore Map # Optional 
extra_params: info=0 # For transparent map
icon: mdi:file-restore
entity_picture: >
  [[[ return function(t){const e=t._config;if(t.shadowRoot.querySelector("hui-error-card")&&!t._u)return t._u=!0,t.style.opacity=0,void setTimeout((function(){t.style.opacity=1,t.update()}),0);if(!t.__shouldUpdate){t._u=!1;const i=/v=([^&]*)/,o=/index=([^&]*)/;t.__shouldUpdate=t.shouldUpdate,t.shouldUpdate=function(t){const e=this;let o=e.__shouldUpdate(t);if(t&&t.has("_config"))return e.shouldUpdate=e.__shouldUpdate,e.__shouldUpdate=null,e._s=null,!0;const a=e._config,n=e._hass.states[a.entity],l=t.get("_hass"),s=l?l.states[a.entity]:null;if(o=l&&s!=n,!o)return!1;e._l&&(e._l.stateObj=n);let r=e.__items(e._hass);const c=e.__items(l)[0].join(",")!==r[0].join(",");if(e._i&&n&&!c){if(!c&&e._i&&n&&e._a){const t=n.attributes.access_token;if(t!=e._a&&(e._config.hold_action.url_path=e._i[1].replace(e._a,t),e._a=t,this._config.custom_fields))return!0}return e.hass=e._hass,!1}let d=0;const u=e._s;if(n){const t=n.attributes.access_token;if(!c&&t!=e._a){let i=n.attributes[a.picture_list+"_picture"];if(i)if("string"==typeof i||i instanceof String)i=i.replace(e._a,t);else for(let o=0;o<r[0].length;o++)i[r[0][o]]=i[r[0][o]].replace(e._a,t)}if(e._a=t,d=u&&""===u.value?0:parseInt(u.value),d<0||d>=r[0].length)d=0;else if(d>0&&r[0].length>0&&(d=0,e._i&&(d=r[0].indexOf(e._i[0]),-1===d))){d=0;let t=e._i[1].match(i)[1];for(let e=0;e<r[1].length;e++)if(t==r[1][e].match(i)[1]){d=e;break}}}return u.label=!(!a.label||!n)&&a.label,e.__populate(d,r[0],u),u.dispatchEvent(new Event("change")),o},t.__items=function(t){if(t){const e=t.states[this._config.entity];if(e&&e.attributes){const t=e.attributes[this._config.picture_list+"_picture"];if(t){if("string"==typeof t||t instanceof String)return[[""],[t]];{const e=Object.values(t);if(e.length)return[Object.keys(t),e]}}}}return[[],[]]},t.__populate=function(t,e,i){const o={"(Completed)":"✔️","(Interrupted)":"❌","(Manually Ignored)":"⛔","(Automatically Ignored)":"⭕","(Edited)":"📝","(Original)":"✅","(Backup)":"💾"},a=new RegExp(Object.keys(o).join("|").replaceAll(")","\\)").replaceAll("(","\\("),"g"),n=function(t){return t&&t.length?t.replace(a,(t=>o[t])):""};if((t<0||t>=e.length)&&(t=0),void 0!==i._opened){let t=[];for(let i=0;i<e.length;i++)t.push({value:i+"",label:n(e[i])});i.options=t}else{let o="";for(let i=0;i<e.length;i++)o+='<mwc-list-item value="'+i+'"'+(t==i?" selected activated":"")+">"+n(e[i])+"</mwc-list-item>";i.innerHTML=o}i.value=t+"",i.selectedText=n(e[t])};const a="picture-selector",n=t.shadowRoot.querySelector("ha-card#"+a);n&&n.remove();const l=document.createElement("ha-card");let s;l.id=a,l.style.cssText="cursor:default;display:block;padding:12px 16px 16px;overflow:visible;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;",t.shadowRoot.children.length?t.shadowRoot.insertBefore(l,t.shadowRoot.children[0]):t.shadowRoot.appendChild(l),e.title&&e.title.length&&(" "!==e.title&&(s=document.createElement("h1"),s.className="card-header",s.style.padding="0 0 4px 0",s.innerHTML='<div class="name">'+e.title+"</div>",l.appendChild(s)),e.styles.grid||(e.styles.grid=[]),e.styles.grid=e.styles.grid.concat([{cursor:"default"},{display:"block"},{margin:"0 16px 16px"},{overflow:"hidden"},{"border-radius":"var(--ha-card-border-radius,12px)"},{"border-width":"var(--ha-card-border-width,1px)"},{"border-style":"solid"},{"border-color":"var(--ha-card-border-color,var(--divider-color,#e0e0e0))"},{background:"var(--input-disabled-fill-color);"}]));const r=t._hass.states[e.entity];t._a=r?r.attributes.access_token:"";const c=t.__items(t._hass),d=document.createElement("ha-select");if(d.style.cssText="width:auto;display:block;",e.icon&&e.icon.length){d.style.cssText+="margin:4px 0 0 40px;";const i=document.createElement("state-badge");i.stateObj=r,i.overrideIcon=e.icon,i.style.cssText="float:left;margin-top:12px;",l.appendChild(i),t._l=i}d.label=!(!e.label||!r)&&e.label,d.value="0",d.naturalMenuWidth=!0,1==c[0].length&&0==c[0][0].length&&(s?(d.style.display="none",t._l&&(t._l.style.display="none"),s.style.padding="0"):l.style.display="none"),t.__populate(0,c[0],d),l.appendChild(d),t._s=d;const u=function(e){const i=function(i){if(!i)return;const o=customElements.get("ha-circular-progress")?"ha-circular-progress":"ha-spinner",a=function(t){const e=t.target.parentElement.querySelectorAll(o).forEach((t=>t.remove()));e&&e.remove(),t.target.style.cursor=""};i.onload=function(t){i.style.height="",t.target.style.opacity=1,a(t),t.target.onload=null},i.onerror=function(e){t._i=!1,a(e),t.update()},i.style.opacity=0,i.style.cursor="wait",e&&0==i.naturalHeight&&i.width&&(i.style.height=i.width+"px");const n=document.createElement(o);n.active=!0,n.size="large",n.indeterminate=true,n.style.position="absolute",i.parentElement.appendChild(n)},o=t.shadowRoot.querySelector("#icon");o&&"IMG"==o.tagName?i(o):setTimeout((function(){const e=t.shadowRoot.querySelector("#icon");e&&0==e.naturalHeight&&e.width&&(e.style.height=e.width+"px"),i(e)}),0)};d.addEventListener("closed",(function(t){t.stopPropagation()}));const _=function(e){if(""!=e.target.value){const a=t.__items(t._hass);if(0===a[1].length)return void(t._i=!1);e.detail&&e.detail.value&&(e.target.value=e.detail.value);const n=parseInt(e.target.value);if(n>=0&&n<a[1].length&&(!t._i||t._i[0]!=a[0][n]&&t._i[1]!=a[1][n])){if(t._i){if(t._i[0]=a[0][n],t._i[1].match(i)[1]===a[1][n].match(i)[1])return;t._i[1]=a[1][n]}else t._i=[a[0][n],a[1][n]];t._config.hold_action.url_path=t._i[1];const e=t._i[1].match(o);t._x=e&&e.length>1?e[1]:"",u(),t.update()}}};if(d.onchange=_,d.addEventListener("selected",_),t._i=!1,t._config.hold_action={action:"url"},c[0].length){t._config.hold_action.url_path=c[1][0];const e=c[1][0].match(o);t._x=e&&e.length>1?e[1]:"";const i=t.shadowRoot.querySelector("#icon");i&&"IMG"==i.tagName?t._i=[c[0][0],c[1][0]]:(t.style.opacity=0,setTimeout((function(){t._i=[c[0][0],c[1][0]],u(!0),t.update(),t.style.opacity=1}),0))}}return t._i?t._i[1]+(e.extra_params&&e.extra_params.length?"&"+e.extra_params:""):void 0}(this) ]]]
picture_list: recovery_map
size: 100%
show_entity_picture: true
show_name: false
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - type: custom:button-card
          name: Restore
          icon: mdi:restore
          size: 24px
          tap_action:
            action: call-service
            service: dreame_vacuum.vacuum_restore_map
            data: 
              entity_id: |
                [[[ return (this._config.entity ? this._config.entity.replace('camera.','vacuum.').substring(0, this._config.entity.lastIndexOf('_map')) : ''); ]]]
              recovery_map_index: |
                [[[ return this._x ? parseInt(this._x) : 99 ]]]
          confirmation: true
          styles:
            grid:
              - display: contents
            img_cell:
              - display: contents
            icon:
              - margin: 0 6px 0 0
              - color: var(--primary-text-color)
            card:
              - border-radius: 100px
              - background-color: var(--primary-color)
        - type: custom:button-card
          name: Download
          icon: mdi:download
          size: 24px
          tap_action:
            action: url
            url_path: |
              [[[ return (this._x ? this._config.hold_action.url_path + '&file=1' : ''); ]]]
          styles:
            grid:
              - display: contents
            img_cell:
              - display: contents
            icon:
              - margin: 0 6px 0 0
              - color: var(--primary-text-color)
            card:
              - border-radius: 100px
              - background-color: var(--primary-color)
styles:
  custom_fields:
    buttons:
      - '--horizontal-stack-card-margin': 0 8px
      - padding: 0 16px 16px
      - display: >
          [[[ return (this._i ? 'block': 'none');]]]
  grid:
    - display: block
  icon:
    - transition: opacity 180ms ease-in-out 0s
  card:
    - '--mdc-ripple-color': rgba(0,0,0,0)
    - padding: 0
    - border-top-left-radius: 0
    - border-top-right-radius: 0
    - border-top: none

WiFi Kaart Kaart

Hoewel de integratie normaal gesproken de opgeslagen WiFi-kaart ophaalt, opslaat en kan weergeven als er een bestaat, is het bekijken ervan enigszins moeilijk omdat deze niet direct toegankelijk is via een camerafeit. De WiFi Kaart kaart is ontworpen om dit te vereenvoudigen door de WiFi-kaart direct weer te geven met behulp van de Button Card aangepaste kaart.

Voor meer informatie over deze kaart, raadpleeg de Wifi-kaart.

Toon Code

type: custom:button-card
entity: camera. # Current or saved map camera entity
icon: mdi:wifi-marker
tap_action:
  action: none
entity_picture: >
  [[[ return function(t){const e=t._config;if(t.shadowRoot.querySelector("hui-error-card")&&!t._u)return t._u=!0,t.style.opacity=0,void setTimeout((function(){t.style.opacity=1,t.update()}),0);if(!t.__shouldUpdate){t._u=!1;const i=/v=([^&]*)/,o=/index=([^&]*)/;t.__shouldUpdate=t.shouldUpdate,t.shouldUpdate=function(t){const e=this;let o=e.__shouldUpdate(t);if(t&&t.has("_config"))return e.shouldUpdate=e.__shouldUpdate,e.__shouldUpdate=null,e._s=null,!0;const a=e._config,n=e._hass.states[a.entity],l=t.get("_hass"),s=l?l.states[a.entity]:null;if(o=l&&s!=n,!o)return!1;e._l&&(e._l.stateObj=n);let r=e.__items(e._hass);const c=e.__items(l)[0].join(",")!==r[0].join(",");if(e._i&&n&&!c){if(!c&&e._i&&n&&e._a){const t=n.attributes.access_token;if(t!=e._a&&(e._config.hold_action.url_path=e._i[1].replace(e._a,t),e._a=t,this._config.custom_fields))return!0}return e.hass=e._hass,!1}let d=0;const u=e._s;if(n){const t=n.attributes.access_token;if(!c&&t!=e._a){let i=n.attributes[a.picture_list+"_picture"];if(i)if("string"==typeof i||i instanceof String)i=i.replace(e._a,t);else for(let o=0;o<r[0].length;o++)i[r[0][o]]=i[r[0][o]].replace(e._a,t)}if(e._a=t,d=u&&""===u.value?0:parseInt(u.value),d<0||d>=r[0].length)d=0;else if(d>0&&r[0].length>0&&(d=0,e._i&&(d=r[0].indexOf(e._i[0]),-1===d))){d=0;let t=e._i[1].match(i)[1];for(let e=0;e<r[1].length;e++)if(t==r[1][e].match(i)[1]){d=e;break}}}return u.label=!(!a.label||!n)&&a.label,e.__populate(d,r[0],u),u.dispatchEvent(new Event("change")),o},t.__items=function(t){if(t){const e=t.states[this._config.entity];if(e&&e.attributes){const t=e.attributes[this._config.picture_list+"_picture"];if(t){if("string"==typeof t||t instanceof String)return[[""],[t]];{const e=Object.values(t);if(e.length)return[Object.keys(t),e]}}}}return[[],[]]},t.__populate=function(t,e,i){const o={"(Completed)":"✔️","(Interrupted)":"❌","(Manually Ignored)":"⛔","(Automatically Ignored)":"⭕","(Edited)":"📝","(Original)":"✅","(Backup)":"💾"},a=new RegExp(Object.keys(o).join("|").replaceAll(")","\\)").replaceAll("(","\\("),"g"),n=function(t){return t&&t.length?t.replace(a,(t=>o[t])):""};if((t<0||t>=e.length)&&(t=0),void 0!==i._opened){let t=[];for(let i=0;i<e.length;i++)t.push({value:i+"",label:n(e[i])});i.options=t}else{let o="";for(let i=0;i<e.length;i++)o+='<mwc-list-item value="'+i+'"'+(t==i?" selected activated":"")+">"+n(e[i])+"</mwc-list-item>";i.innerHTML=o}i.value=t+"",i.selectedText=n(e[t])};const a="picture-selector",n=t.shadowRoot.querySelector("ha-card#"+a);n&&n.remove();const l=document.createElement("ha-card");let s;l.id=a,l.style.cssText="cursor:default;display:block;padding:12px 16px 16px;overflow:visible;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;",t.shadowRoot.children.length?t.shadowRoot.insertBefore(l,t.shadowRoot.children[0]):t.shadowRoot.appendChild(l),e.title&&e.title.length&&(" "!==e.title&&(s=document.createElement("h1"),s.className="card-header",s.style.padding="0 0 4px 0",s.innerHTML='<div class="name">'+e.title+"</div>",l.appendChild(s)),e.styles.grid||(e.styles.grid=[]),e.styles.grid=e.styles.grid.concat([{cursor:"default"},{display:"block"},{margin:"0 16px 16px"},{overflow:"hidden"},{"border-radius":"var(--ha-card-border-radius,12px)"},{"border-width":"var(--ha-card-border-width,1px)"},{"border-style":"solid"},{"border-color":"var(--ha-card-border-color,var(--divider-color,#e0e0e0))"},{background:"var(--input-disabled-fill-color);"}]));const r=t._hass.states[e.entity];t._a=r?r.attributes.access_token:"";const c=t.__items(t._hass),d=document.createElement("ha-select");if(d.style.cssText="width:auto;display:block;",e.icon&&e.icon.length){d.style.cssText+="margin:4px 0 0 40px;";const i=document.createElement("state-badge");i.stateObj=r,i.overrideIcon=e.icon,i.style.cssText="float:left;margin-top:12px;",l.appendChild(i),t._l=i}d.label=!(!e.label||!r)&&e.label,d.value="0",d.naturalMenuWidth=!0,1==c[0].length&&0==c[0][0].length&&(s?(d.style.display="none",t._l&&(t._l.style.display="none"),s.style.padding="0"):l.style.display="none"),t.__populate(0,c[0],d),l.appendChild(d),t._s=d;const u=function(e){const i=function(i){if(!i)return;const o=customElements.get("ha-circular-progress")?"ha-circular-progress":"ha-spinner",a=function(t){const e=t.target.parentElement.querySelectorAll(o).forEach((t=>t.remove()));e&&e.remove(),t.target.style.cursor=""};i.onload=function(t){i.style.height="",t.target.style.opacity=1,a(t),t.target.onload=null},i.onerror=function(e){t._i=!1,a(e),t.update()},i.style.opacity=0,i.style.cursor="wait",e&&0==i.naturalHeight&&i.width&&(i.style.height=i.width+"px");const n=document.createElement(o);n.active=!0,n.size="large",n.indeterminate=true,n.style.position="absolute",i.parentElement.appendChild(n)},o=t.shadowRoot.querySelector("#icon");o&&"IMG"==o.tagName?i(o):setTimeout((function(){const e=t.shadowRoot.querySelector("#icon");e&&0==e.naturalHeight&&e.width&&(e.style.height=e.width+"px"),i(e)}),0)};d.addEventListener("closed",(function(t){t.stopPropagation()}));const _=function(e){if(""!=e.target.value){const a=t.__items(t._hass);if(0===a[1].length)return void(t._i=!1);e.detail&&e.detail.value&&(e.target.value=e.detail.value);const n=parseInt(e.target.value);if(n>=0&&n<a[1].length&&(!t._i||t._i[0]!=a[0][n]&&t._i[1]!=a[1][n])){if(t._i){if(t._i[0]=a[0][n],t._i[1].match(i)[1]===a[1][n].match(i)[1])return;t._i[1]=a[1][n]}else t._i=[a[0][n],a[1][n]];t._config.hold_action.url_path=t._i[1];const e=t._i[1].match(o);t._x=e&&e.length>1?e[1]:"",u(),t.update()}}};if(d.onchange=_,d.addEventListener("selected",_),t._i=!1,t._config.hold_action={action:"url"},c[0].length){t._config.hold_action.url_path=c[1][0];const e=c[1][0].match(o);t._x=e&&e.length>1?e[1]:"";const i=t.shadowRoot.querySelector("#icon");i&&"IMG"==i.tagName?t._i=[c[0][0],c[1][0]]:(t.style.opacity=0,setTimeout((function(){t._i=[c[0][0],c[1][0]],u(!0),t.update(),t.style.opacity=1}),0))}}return t._i?t._i[1]+(e.extra_params&&e.extra_params.length?"&"+e.extra_params:""):void 0}(this) ]]]
picture_list: wifi_map
size: 100%
show_name: false
show_entity_picture: true
styles:
  icon:
    - transition: opacity 180ms ease-in-out 0s
  card:
    - --mdc-ripple-color: rgba(0,0,0,0)
    - padding: 0