Floorplan UI with Color synced lights

Hey Manlm I’m wondering if and how much of a delay you have loading your ipcameras and how you integrated them into HomeAssistant

This problem is resolved!

Hey, i have problems with Sweet Home 3D. I made my house and added some lights.

Now i did a render on 1920x1080 with lights off. I tried to add three lights in my office but they look like crap. Also i struggle with adding this 3 pictures of my office into the hole floorplan.

I tried my best but the lights always look a little blue-ish when the office png are over the floorplan png.

any advice?

which light source do you use in Sweer Home 3D?

UPDATE: so i got my photoshop skills to another level and was able to have some pictures in the right places. this seems to work very well. but the issue is still the bluish cast in my lamps.
when i turn them white it looks very blue. does this have to do with Sweet Home 3D or the config in HA?

Hi!

I’ve got 2 problems.

  • I can’t see the Control Lights floorplan button. Am I missing something? I replaced the lights etc.
  • The sensor.sunlight_opacity isnt working. I had to replace the cloud coverage from darksky with one from accuweather, but it keeps giving me a 0.

Hope someone can help me!

What did you design your floor plan in, because it looks a hell of a lot better than the renders sweet home gives out?

I’ve used SketchUp, however Im a little confused how you have done the overlays. I’ve made several renders with different lights on like your ReadMe, but if I use overlay and then choose say purple as my filter, I get a bit of an odd image

Hi Guys and gals, i’m slowly getting my head round the code for the layouts, however I’m at a stumbling,block, I have 10 individual flush lights in my livingroom, I have eight referenced in two collections (cross lights and corner lights.) When i click press and hold to bring up the options for all of them, they are in two columns, I’ve set column_num: 5, but still i get the layout below. Any advice please?

I think this is the snipet of code it is using:

            - entity: light.livingroom
              hold_action:
                action: call-service
                service: browser_mod.popup
                service_data:
                  card:
                    cards:
                      - entities:
                          - entity: light.livingroom
                            secondary_info: last-changed
                        style:
                          z-index: 5
                        type: entities
                      - cards:
                          - cards:
                              - brightness: true
                                color_picker: true
                                effects_list: true
                                entity: light.livingroom
                                full_width_sliders: true
                                header: true
                                persist_features: true
                                show_slider_percent: true
                                smooth_color_wheel: true
                                type: 'custom:light-entity-card'
                                style: |
                                  ha-card {
                                    box-shadow: none !important;
                                  }
                              - brightness: true
                                color_temp: true
                                entity: light.livingroom
                                full_width_sliders: true
                                header: true
                                persist_features: true
                                show_slider_percent: true
                                smooth_color_wheel: true
                                type: 'custom:light-entity-card'
                                style: |
                                  ha-card {
                                    box-shadow: none !important;
                                  }
                            column_height: 1
                            layout: vertical
                            type: 'custom:layout-card'
                          - entities:
                              - color_temp: true
                                entity: light.livingroom
                                header: true
                                persist_features: true
                                type: 'custom:light-slider-card'
                            show_header_toggle: true
                            style: |
                              :host{
                                height: 100%;
                                z-index: 0;  
                              }
                              ha-card {
                                box-shadow: none !important;
                              }
                            type: entities
                        column_num: 5
                        layout: horizontal
                        max_width:
                          - 60%
                          - 40%
                        type: 'custom:layout-card'
                    type: 'custom:vertical-stack-in-card'
                  deviceID:
                    - this
                  style:
                    '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
                    border-radius: 0.8vw
                    opacity: 0.9
                  title: Livingroom
              image: /local/transparent.png
              style:
                height: 48%
                left: 76.8%
                top: 32.65%
                width: 32%
              tap_action:
                action: call-service
                service: homeassistant.toggle
                service_data:
                  entity_id: light.livingroom
              type: image

Is anyone able to tell me why I have two dates in my date string too please?
image

Hi don’t know how to fix the columns, but the time is caused by a wrong string in de configuration.yaml.
Search for date_string and above that, change the day sensor to this:

          {% set days = ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"] %}
          {{ days[now().weekday()] }}

of course you need to change the weekdays to your own language.

thanks. my sensors currently contain the following:

      ## Converts time and date into sentence for UI
      day:
        value_template: >
          {% set days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] %}
          {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
          {{ days[now().weekday()] }}

      month:
        value_template: >
          {% set months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %}
          {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
          {{ months[now().month-1] }}

      date_string:
        friendly_name: "Full Date"
        value_template: "{{ states('sensor.day') }}, {{ states('sensor.month') }} {{ now().year }}"

Yeah, so you need to remove underneath day:

{{ strptime(states(‘sensor.date’), ‘%Y-%m-%d’).day }}

So your configuration should look like this:

  ## Converts time and date into sentence for UI
  day:
    value_template: >
      {% set days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] %}
      {{ days[now().weekday()] }}

  month:
    value_template: >
      {% set months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %}
      {{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
      {{ months[now().month-1] }}

  date_string:
    friendly_name: "Full Date"
    value_template: "{{ states('sensor.day') }}, {{ states('sensor.month') }} {{ now().year }}"

That did the trick for me.

perfect. thank you.

For anybody interested, I’m slowly getting to grips with this, there are a few bits I took out, but here is my floorplan so far!


I’ve got to say it has been a steep learning curve, I’m using a number of custom integrations by @lukevink, which I’m thankful for! My house is quite thin, so needed a landscape layout. I think I’ve screwed up the underlay on the nav bar, but this has taken me about a week or so.
@lukevink Sorry I’ve butchered your design. I’ve only got this page sorted so far, but slow progress is better than no progress.

4 Likes

So I’m trying to get this mini weather card looking like yours, but it seems like it’s not reading any of the css? The weather card looks the same both with and without the css.


          - backdrop: false
            entity: weather.hjem
            name: ' '
            style: |
              :host {
                left: 31.4%;
                top:  85.5%;
                width: 17%;
                height: 7% !important;
                overflow: hidden;
                height: 8.5vw;
                background: none  !important;
                box-shadow: none !important;
                font-size: 1vw !important;
              }
              ha-card {
                background: none  !important;
                box-shadow: none !important;
                flex-flow: row-reverse !important;
                padding: 0 !important;
              }
              .weather__info--add{
                display : none !important;
              }
              .weather__info{
                flex-grow: 1;
                min-height: 0 !important;
                height: 2.4vw;
                margin-left: 0.6vw;
              }
              .weather__icon{
                margin-right:0.5% !important;
                margin-top: -3%;
                width: 2vw !important;
                height: 2vw !important;
                flex: 0 0 2vw !important;
              }
            tap_action:
              action: navigate
              navigation_path: /lovelace/4
            type: 'custom:simple-weather-card'

Without css on top and with css on bottom

@lukevink - I dont suppose you would consider creating a rain forecast card that works with other weather apps would you? I cant figure out how to get it to display, let alone work with something like darksky.

You might want to check this out: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/265 You can build your own with this graph card, I’ve gotten ot to work for openweathermap.

I’ve got the mini-graph card that will give an output, but I cannot figure out how to have the prediction as a timeline rather than individual entities…

That’s where the apex charts card comes in handy. It has a data generator function which is able to read your weather’s attributes. Check out the forum thread posted above, there’s examples on how to do it.

hello this dashboard is very nicely made & would you be able to share your dashboard config or do you have a github would be fine so i can also view and learn something like that? thanks in advance

how to solve this problem with updating time?

@lukevink Hello. I noticed that on dashboard 0 the clock does not update automatically it gets freeze, it is necessary refresh browser, so that the hours are updated. In the rest of the lovelace dashboards there is no such problem. Is it a problem with Browser_mod? I was thinking of using the browser_mod.window_reload service. Do you think it can work?

1 Like

Hi, we’re you able to solve this…I’m having the same issue. -thanks