Share your Floorplan

Third party integrations Floorplan
814

OK so the problem is the trigger isn’t firing. Change the trigger to this for testing

  - trigger:
      - platform: time_pattern
        minutes: /30

Now you will have an time ordered list of upcoming events. From here you can just have a series of lines in your SVG and then use code like this (it is javascript) to set your text:


            - element: line1
              tap_action:
                service: floorplan.text_set
                service_data: |
                    >
                    var startDate = new Date(hass.states["sensor.multical_72_hour_agenda"].attributes.events[0].start);
                    return `
                      ${startDate.toDateString()} ${startDate.getHours()}:${(startDate.getMinutes() < 10 ? '0' : '') + startDate.getMinutes()} ${hass.states["sensor.multical_72_hour_agenda"].attributes.events[0].summary}
                    `;
            - element: line2
              tap_action:
                service: floorplan.text_set
                service_data: |
                    >
                    var startDate = new Date(hass.states["sensor.multical_72_hour_agenda"].attributes.events[1].start);
                    return `
                      ${startDate.toDateString()} ${startDate.getHours()}:${(startDate.getMinutes() < 10 ? '0' : '') + startDate.getMinutes()} ${hass.states["sensor.multical_72_hour_agenda"].attributes.events[1].summary}
                    `;

edit: If you find an entry is too long for the screen then work out the max length and you can trim it by using these extra functions. The 15 in the slice function is what you need to adjust:

${(hass.states["sensor.multical_72_hour_agenda"].attributes.events[1].summary).toString().slice(0,15)}

815

Hi OzGav!

I spent a lot of time surfing the Internet on the topic of a domestic helper calendar.

There is a lot written about this topic (automation template) which made me wonder why people use calendar for automation! It is true that Google has divided the tasks and is now in HA in the to-do list. So now I use events instead of tasks, which is not even that important.

I have a feeling that the google calendar add-on is written in such a way that it uses HAOS to display the data. I also installed atomic-calendar-revive, which is obviously a front-end and other calendar cards are no different.

Conclusion: Apparently no one knows or has a need to add an entity from a calendar other than the next event that follows in a specific calendar for automation, which doesn’t help me. Quite a few questions were also asked about how to call the next event, but there was no answer.

In short, I had enough of everything and I said I will try the grid card and insert the other cards on the basis of that, which I somehow managed to display satisfactorily on all devices, otherwise it is not the same as if the entire card was in SVG format, which looks nice on its own automatically adjusts to the screen size.

I will add a new zip file with the entire content on discord shortly if you are interested.

Thank you once again for the effort you put into finding a solution to the problem.

816

hi.

im fairly new to programming.

i created a floorplan. in this floorplan i created 2 text blocks.
1 for temperature and 1 for the remaining print time of my 3d printer.

i used this code for them. i just copied over the temperature code for the printer. and it works. but it shows it in min. and i want it to show it in hours and minutes.

    - name: Temperature
      entities:
        - sensor.lumi_lumi_weather_temperature
      state_action:
        - service: floorplan.text_set
          service_data: >-
            ${(entity.state !== undefined) ? Math.round(entity.state * 10) / 10
            + "C°" : "unknown"}
    - name: printertime
      entities:
        - sensor.p1s_01p00a3a3000367_remaining_time
      state_action:
        - service: floorplan.text_set
          service_data: >-
            ${(entity.state !== undefined) ? Math.round(entity.state * 10) / 10
            + "min" : "unknown"}

i used the template service in home assistant to test a template to convert the time in min to time in hours and min. and to make it disappear when it hits 0

{% set minutes = states('sensor.p1s_01p00a3a3000367_remaining_time') | int %}
{% set hours = minutes // 60 %}
{% set remaining_minutes = minutes % 60 %}
{% if hours == 0 and remaining_minutes == 0 %}
  Hidden
{% else %}
  {{ '%02d' | format(hours) }} hours {{ '%02d' | format(remaining_minutes) }} minutes
{% endif %}

this also works but when i add that to my floorplan yaml it doenst.

what did i do wrong

817

It’s because your template is written in Jinja but the floorplan code requires JavaScript. So take your proof of concept template and rewrite it in JavaScript and you will be good.

818

got it to work. thanks.

819

floorplanboven2
floorplanboven21011×882 38 KB

floorplanboven
floorplanboven1012×893 30.1 KB

i dont like how my rgb light bulb lightens the whole floor. how can i change this?

      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          element: ${entity.entity_id.replace('light.', 'light_overlay.')}
          style: |
            >
            if( entity.state !== "on" )
                return "display: none;";
            let hue = 0;
            let sat = 0;
            if( entity.attributes.hs_color )
            {
                hue = entity.attributes.hs_color[0];
                sat = entity.attributes.hs_color[1];
            }
            if( sat < 10 )
            {
              return `
                display: block;
                filter:
                  brightness(calc( ${entity.attributes.brightness} / 255));`
            }
            return `
              display: block;
              filter:
                sepia(100%)
                hue-rotate(calc( ${hue}deg - 55deg ))
                saturate(calc( ${sat}% * 2 ))
                brightness(calc( ${entity.attributes.brightness} / 255));
820

It will be because of the entity or element you are targeting but you haven’t shown your yaml above the state action key.

821 

  - entities:
            - light.study
            - light.desk1
            - light.desk2
            - light.bathroom
            - light.toilet
            - light.slaapkamer
            - light.gang
            - light.woonkamer_2
            - light.bank
            - light.keuken
            - light.tafel
            - light.krabpaal
            - light.upper
            - light.upperbedroom
            - light.laundry
          tap_action:
            action: toggle
          state_action:
            action: call-service
            service: floorplan.style_set
            service_data:
              element: ${entity.entity_id.replace('light.', 'light_overlay.')}
              style: |
                >
                if( entity.state !== "on" )
                    return "display: none;";
                let hue = 0;
                let sat = 0;
                if( entity.attributes.hs_color )
                {
                    hue = entity.attributes.hs_color[0];
                    sat = entity.attributes.hs_color[1];
                }
                if( sat < 10 )
                {
                  return `
                    display: block;
                    filter:
                      brightness(calc( ${entity.attributes.brightness} / 255));`
                }
                return `
                  display: block;
                  filter:
                    sepia(100%)
                    hue-rotate(calc( ${hue}deg - 55deg ))
                    saturate(calc( ${sat}% * 2 ))
                    brightness(calc( ${entity.attributes.brightness} / 255));
                `
822

You will need to look at the light.overlay_ elements you have in your SVG. They should only be the size of each room.

823

Its been almost two years since I did my first one of these but much has changed. We have a second EV, two chargers and a ton more automations to control it all!

image
image1853×782 103 KB

The blue numbers towards the middle show peak, offpeak and solar power that has been used by that charger, I’m just adding that to the other side now.

4 Likes
824

Question, i made 4 fan images, one PNG (fan off) and 3 GIF’s (fan 33%, fan 66% and fan 100% speed)
I’m trying to show the gif with the actual speed, but, i don’t know where to look for an example or howto.

This is what i tried

            state_image:
              'off': \local\floorplan\0\Licht\fan-off.png
              preset_modes:
                percentage:
                  '33': \local\floorplan\0\Licht\fan-slow.gif
                  '66': \local\floorplan\0\Licht\fan-medium.gif
                  '100': \local\floorplan\0\Licht\fan-high.gif

Apparently state_image: only shows on / off and i can’t figure out how to use percentage.

825

@goldwing you will need to access the attributes then do something like this (looks like the HA editor has done something funky with the formatting around the switch but I have left it as is):

            - name: Repeat Icon
              element: repeat_image
              entity: sensor.media_card_repeat_mode
              state_action:
                service: floorplan.image_set
                service_data: >
                  > var imageName = ''; switch
                  (hass.states[media_player.kitchen_speaker].attributes.repeat)
                  {
                    case 'all':
                      imageName = 'repeat-all';
                      break;
                    case 'one':
                      imageName = 'repeat-one';
                      break;
                    default:
                      imageName = 'repeat-off';
                      break;
                    }
                  return '/local/floorplan/images/' + imageName + '.png';

actually just looking again at your code if you are using picture-elements you are in the wrong thread. My answer above is for ha-floorplan

826

You are right, i am using picture-elements, i made the mistake of posting it here because of the title of the thread “Share your floorplan” and didn’t realize it was for ha-floorplan only

827

Really nice, i’m in to picture elements too.
I do know this is floorplan, however i didnt know picture elements isnt part of it.
Is there a topic foor share floorplan with picture elements too?

Do you mind sharing how you’ve done the buttons?

828

@skank
Sure not a problem… an example i hope is useful…
this is one of my cards (remember to set ‘panel mode’ to the view to have a full screen view):

1
11337×764 208 KB

and this is the code:

type: picture-elements
elements:
  - type: conditional
    conditions:
      - entity: group.sensori_sicurezza
        state: "on"
    elements:
      - type: custom:text-element
        text: PERICOLO ! SENSORE ATTIVATO !
        style:
          top: 4%
          left: 19%
          color: rgb(255,41,61)
          font-size: 16px
  - type: conditional
    conditions:
      - entity: group.sensori_sicurezza
        state: "off"
    elements:
      - type: custom:text-element
        text: CASA SICURA. NESSUN ALLARME DAI SENSORI
        style:
          top: 4%
          left: 24%
          color: rgba(15, 249, 7)
          font-size: 16px
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 65%
    show_name: false
    show_state: true
    entity: binary_sensor.water_leak_sensor_158d0002832c30
    state_display: |
      [[[
        if (entity.state == 'on') return 'allagato';
        if (entity.state == 'off') return 'asciutto';
        else return 'non disponibile';
      ]]]
    styles:
      state:
        - color: white
        - font-size: 9px
        - font-weight: bold
        - text-transform: uppercase
    state:
      - value: "on"
        icon: mdi:pipe-leak
        styles:
          card:
            - background-color: red
            - border-radius: 10%
            - color: white
          icon:
            - animation: blink 1s ease infinite
      - value: "off"
        icon: mdi:pipe-leak
        styles:
          card:
            - background-color: rgba(19, 11, 250, 0.6)
            - border-radius: 10%
            - color: white
      - value: unavailable
        icon: mdi:pipe-leak
        styles:
          card:
            - background-color: rgba(19, 11, 250, 0.6)
            - border-radius: 10%
            - color: white
    style:
      height: 7px
      width: 55px
      top: 37%
      left: 72%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 65%
    show_name: false
    show_state: true
    entity: binary_sensor.smoke_sensor_158d00032ba59a
    state_display: |
      [[[
        if (entity.state == 'on') return 'incendio';
        if (entity.state == 'off') return 'sicuro';
        else return 'non disponibile';
      ]]]
    styles:
      state:
        - color: white
        - font-size: 9px
        - font-weight: bold
        - text-transform: uppercase
    state:
      - value: "on"
        icon: mdi:fire-alert
        styles:
          card:
            - background-color: red
            - border-radius: 10%
            - color: white
          icon:
            - animation: blink 1s ease infinite
      - value: "off"
        icon: mdi:fire-off
        styles:
          card:
            - background-color: rgba(250, 128, 15, 0.6)
            - border-radius: 10%
            - color: white
      - value: unavailable
        icon: mdi:fire-off
        styles:
          card:
            - background-color: rgba(250, 128, 15, 0.6)
            - border-radius: 10%
            - color: white
    style:
      height: 7px
      width: 55px
      top: 31%
      left: 44%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 65%
    show_name: false
    show_state: true
    entity: binary_sensor.natgas_sensor_158d000340d1f9
    state_display: |
      [[[
        if (entity.state == 'on') return 'fuga gas';
        if (entity.state == 'off') return 'sicuro';
        else return 'non disponibile';
      ]]]
    styles:
      state:
        - color: white
        - font-size: 9px
        - font-weight: bold
        - text-transform: uppercase
    state:
      - value: "on"
        icon: mdi:gas-burner
        styles:
          card:
            - background-color: red
            - border-radius: 10%
            - color: white
          icon:
            - animation: blink 1s ease infinite
      - value: "off"
        icon: mdi:gas-burner
        styles:
          card:
            - background-color: rgba(100, 188, 38, 0.6)
            - border-radius: 10%
            - color: white
      - value: unavailable
        icon: mdi:gas-burner
        styles:
          card:
            - background-color: rgba(100, 188, 38, 0.6)
            - border-radius: 10%
            - color: white
    style:
      height: 7px
      width: 55px
      top: 29%
      left: 36%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 90%
    show_name: false
    entity: input_boolean.lavasciuga_attiva
    tap_action:
      action: navigate
      navigation_path: /impianto-elettrico/4
    extra_styles: |
      @-webkit-keyframes swing
      {
          15%
          {
              -webkit-transform: translateX(5px);
              transform: translateX(5px);
          }
          30%
          {
              -webkit-transform: translateX(-5px);
             transform: translateX(-5px);
          } 
          50%
          {
              -webkit-transform: translateX(3px);
              transform: translateX(3px);
          }
          65%
          {
              -webkit-transform: translateX(-3px);
              transform: translateX(-3px);
          }
          80%
          {
              -webkit-transform: translateX(2px);
              transform: translateX(2px);
          }
          100%
          {
              -webkit-transform: translateX(0);
              transform: translateX(0);
          }
      }
    state:
      - value: "on"
        icon: mdi:washing-machine
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: red
            - animation: swing 1s ease infinite
          icon:
            - animation: blink 0.8s ease infinite
      - value: "off"
        icon: mdi:washing-machine
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: rgba(30, 106, 236)
    style:
      height: 8px
      width: 60px
      top: 33%
      left: 80.3%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 90%
    show_name: false
    entity: sensor.sonoff_1000ae8e4d_power
    icon: mdi:fridge
    tap_action:
      action: navigate
      navigation_path: /impianto-elettrico/2
    extra_styles: |
      @keyframes mymove {
        50% {box-shadow: 0 0 40px blue;}
        }
    styles:
      card:
        - background-color: rgb(255,255,255,0.5)
        - border-radius: 50%
        - color: "[[[ if (entity.state > 5) return \"magenta\"; else return \"blue\" ]]]"
        - animation: "[[[ if (entity.state > 5) return \"mymove 2s ease infinite\" ]]]"
      icon:
        - animation: "[[[  if (entity.state >= 5) return \"blink 1s ease infinite\"; ]]]"
    style:
      height: 8px
      width: 60px
      top: 43%
      left: 43%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 90%
    show_name: false
    entity: fan.zhimi_airpurifier_mb3
    tap_action:
      action: navigate
      navigation_path: /lovelace/6
    hold_action:
      action: more-info
    extra_styles: |
      @keyframes ball-scale {
        from {
          transform: scale(1);
          box-shadow: 0 10px 6px -6px #6C7A89;
        }
        to {
          transform: scale(1.35);
          box-shadow: 0 10px 6px -6px #6C7A89;
        }
      }
    state:
      - value: "on"
        icon: mdi:air-filter
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: red
            - animation: ball-scale 2s ease-in-out infinite
      - value: "off"
        icon: mdi:air-filter
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: rgba(15, 249, 7)
      - value: unavailable
        icon: mdi:air-filter
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: rgba(15, 249, 7)
    style:
      height: 8px
      width: 60px
      top: 70%
      left: 76%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 90%
    show_name: false
    entity: vacuum.roborock_vacuum_s5
    tap_action:
      action: navigate
      navigation_path: /lovelace/5
    hold_action:
      action: more-info
    extra_styles: |
      @keyframes shifting {
        0% {
          transform: translate(-10px,0);
            }
        100% {
          transform: translate(10px,0);
        }
      }
    state:
      - value: cleaning
        icon: phu:roborock
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: red
            - animation: shifting 1s linear infinite alternate
      - value: returning
        icon: phu:roborock
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: red
            - animation: shifting 1s linear infinite alternate
      - value: docked
        icon: phu:roborock
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: brown
      - value: pause
        icon: phu:roborock
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: brown
      - value: idle
        icon: phu:roborock
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: brown
      - value: unavailable
        icon: phu:roborock
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: brown
            - animation: blink 1s ease infinite
    style:
      height: 8px
      width: 60px
      top: 18%
      left: 73%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 90%
    show_name: false
    entity: binary_sensor.caldaia_accesa
    tap_action:
      action: navigate
      navigation_path: /impianto-elettrico/5
    extra_styles: |
      @keyframes mymove {
        50% {box-shadow: 0 0 40px red;}
        }
    state:
      - value: "on"
        icon: mdi:water-boiler
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: red
            - animation: mymove 2s ease infinite
          icon:
            - animation: blink 1s ease infinite
      - value: "off"
        icon: mdi:water-boiler
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: green
    style:
      height: 8px
      width: 60px
      top: 45%
      left: 82.2%
  - type: custom:button-card
    color_type: card
    aspect_ratio: 1/1
    size: 90%
    show_name: false
    entity: sensor.tv_state
    tap_action:
      action: navigate
      navigation_path: /impianto-elettrico/3
    state:
      - value: Acceso
        icon: mdi:television-classic
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: yellow
            - box-shadow: 0px 0px 10px 10px yellow
      - value: Stand By
        icon: mdi:power-standby
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: purple
      - value: Spento
        icon: mdi:television-classic-off
        styles:
          card:
            - background-color: rgb(255,255,255,0.5)
            - border-radius: 50%
            - color: black
    style:
      height: 8px
      width: 60px
      top: 77%
      left: 62.5%

All the buttons are made with custom button card addon LINK
Very customizable. The most boring thing is to find the right place for button, you have to try the right coordinates with ‘top’ and ‘left’ command…
It’s a long process but not that difficult…hope it helps…
Start with this forum…LINK
My apologizes for off-topic…

829

Hi thx a lot, helpfull.
Any idea how i should do a fireplace?
I have the same top view on the floorplan
I would like to have the fireplace light the environment but flicker like a real fire
I can use a gif, but u wont see that from the top… and i wont see light flicker.
Maybe you have an idea?

830

I do something similar with my projector

.media_player-on {
  animation: flicker 1s infinite; 
}

@keyframes flicker{
    0% {opacity:0.75}
    10% {opacity:0.45}
    11% {opacity:0.75}
    27% {opacity:0.45}
    29% {opacity:0.75}
    67% {opacity:0.45}
    68% {opacity:0.75}
    99% {opacity:0.45}
    100% {opacity:0.75}
}
1 Like
831

Cool perfect thank you , will try

832

For a button i could do that i think… but for a picture element, how do i implement that into this part?

type: image
        style:
          left: 50%
          top: 50%
          width: 100%
          mix-blend-mode: lighten
        state_image:
          "on": /local/floorplan/gelijkvloers/Haard.png
          "off": /local/floorplan/gelijkvloers/Basis.png
        tap_action:
          action: none
        hold_action:
          action: none

Cause its Haard.png that should flicker

833

Ok this thread is for ha-floorplan. If you are using picture elements you need to head over to configuration.