Problem getting my dashboard to work

[RonRN18]

I am sure that I am missing something really basic, but I'm trying to get floorplan dashboard to work and getting errors.

Starting off, in case it matters, I'm still a bit of a noob to HA. I have HAOS installed on a Raspberry Pi 5, running the latest version of HAOS. I've installed "ha-floorplan", amongst many other add-ons. I have tried to follow several YouTube videos on getting started with ha-floorplan but somehow, in a combination to having difficulty understanding a strong accent and quickly pasted and moved videos, I'm afraid something has been lost in translation.

I created my own 2D floorplan for my home and then using Inkscape, I marked out rooms and some other entities in an SVG file. Following along with the an example from floorplanner_home, I created my own YAML file.

For reference, here is my SVG file: https://we6bb.net/floorplan/FairhavenFloorplan-Current.svg

Below is my YAML file

title: Fairhaven Floorplan
config:
  image: /local/floorplan/Fairhaven/FairhavenFloorplan-Current.svg
  stylesheet: /local/floorplan/Fairhaven/FairhavenFloorplan.css
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - name: Rooms
      entities:
        - entity: light.office_lights
          element: area.detached
        - entity: light.master_bedroom_ceiling_light
          element: area.downstairs.master.bedroom
        - entity: light.garage_lights
          element: area.downstairs.garage
      tap_action: light.toggle
      state_action: null
      service: floorplan.class_set
      service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
    - name: Temperature
      entities:
        - sensor.garage_temperature_on_front_of_house_temperature
        - sensor.temp_upstairs_bedroom_on_front_of_house_temperature
        - sensor.average_computer_center_temperature
        - sensor.average_master_bedroom_temperature
      state_action:
        - service: floorplan.text_set
          service_data: '${(entity.state !== undefined) ? Math.round(entity.state * 10) /
            10 + "°" : "unknown"}'
        - service: floorplan.class_set
          service_data:
            class: static-temp
    - entity: light.master_bedroom_fan
      tap_action: toggle
      state_action:
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "spinning" : ""}'

And here is my CSS file:

/* Fairhaven Floorplan CSS File */

#floorplan {
	padding: 10px;
}
/* #floorplan svg{
    height: 100vh!important;
  } */

svg tspan {
	fill: var(--primary-text-color);
}
/* Animation */

.spinning {
	animation-name: spin;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform-origin: 50% 50%;
	transform-box: fill-box;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
/* SVG shapes */

svg, svg * {
	vector-effect: non-scaling-stroke !important;
	pointer-events: all !important;
}
/* Hover over */

.ha-entity:hover {
	stroke: #03A9F4 !important;
	stroke-width: 1px !important;
	stroke-opacity: 1 !important;
}
/* Binary sensors */

.binary-sensor-on {
	fill: #F9D27C !important;
}
.binary-sensor-off {
	fill: #7CB1F9 !important;
	transition: fill 5s ease;
}
/* Buttons */

.background-on {
	fill: #1ABA92 !important;
}
.background-off {
	fill: #d32f2f !important;
}
.background-on tspan {
	fill: white !important;
}
/* Light Control */

path[id*="area."].light-on {
	opacity: 0 !important;
}
path[id*="area."] {
	opacity: 0.5 !important;
	transition: opacity .25s;
	-moz-transition: opacity .25s;
	-webkit-transition: opacity .25s;
}
/* Things Control */

[id*="thing."].thing-on {
	opacity: 1 !important;
	filter: drop-shadow(0px -5px 3px #ffedde);
	fill: #fffae54f !important;
}
[id*="thing."] {
	opacity: 0 !important;
	transition: opacity .25s;
	-moz-transition: opacity .25s;
	-webkit-transition: opacity .25s;
}
/* Temperature text */

.static-temp, .static-temp tspan {
	fill: #ffffff;
}
/* Spinning fan */

.spinning {
	animation-name: spin;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform-origin: center;
	transform-box: fill-box;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

These files are located in "~/config/www/floorplan/Fairhaven" on my HAOS machine. I tried creating a new dashboard and then opening the raw code editor, I pasted the contents of my YAML file into the page. When I do this, I get an error saying:

Your configuration is not valid: r: At path: views -- Expected an array value, but received: undefined

I am guessing that I've omitted something vital in my YAML file, but I don't know YAML well enough to figure out what I'm missing.

[OzGav]

In your first rule - Rooms - you can’t have null after state action and hen the indentation of the next lines is also incorrect. Look at what you have in the following section which is correct.

[RonRN18]

That is kind of funny... I didn't catch that "null", nor do I know how it got there. My guess is it was from using a tool to cleanup YAML code. Many times, when I am mixing and matching with a ton of copying and pasting, I will put my code in some type of code clean-up code.

Unfortunately, despite that mistake, when I made the correction, I still had the same error when trying to save my dashboard.

---
title: Fairhaven Floorplan
config:
  image: /local/floorplan/Fairhaven/FairhavenFloorplan-Current.svg
  stylesheet: /local/floorplan/Fairhaven/FairhavenFloorplan.css
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - name: Rooms
      entities:
        - entity: light.office_lights
          element: area.detached
        - entity: light.master_bedroom_ceiling_light
          element: area.downstairs.master.bedroom
        - entity: light.garage_lights
          element: area.downstairs.garage
      tap_action: light.toggle
      state_action: 
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
    - name: Temperature
      entities:
        - sensor.garage_temperature_on_front_of_house_temperature
        - sensor.temp_upstairs_bedroom_on_front_of_house_temperature
        - sensor.average_computer_center_temperature
        - sensor.average_master_bedroom_temperature
      state_action:
        - service: floorplan.text_set
          service_data: '${(entity.state !== undefined) ? Math.round(entity.state * 10) / 10 + "°" : "unknown"}'
        - service: floorplan.class_set
          service_data:
            class: static-temp
    - entity: light.master_bedroom_fan
      tap_action: toggle
      state_action:
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "spinning" : ""}'

[exetico]

Hi @RonRN18. What version of Home Assistant are you running?

And are you trying to save above YAML code in the Home Assistant YAML GUI editor, where you get the Your configuration is not valid: r: At path: views -- Expected an array value, but received: undefined ?

Please let us see where you're trying to save your floorplan YAML, if you're still unable to press "save".

Here's one example of my YAML, where I've pressed "Edit" on one of my Lovelace Views (tab "Modern Home Test")

And where I've selected the "YAML" editor:

Which renders the following code:

As you have provided a title, I think you're working in the top level of your YAML for the view, and not inside a specific card, like so:

title: Modern Home Test
path: test2
badges: []
cards:
  - config:
      console_log_level: info
      defaults:
        hover_action: hover-info
        tap_action: more-info
      image: /local/floorplan/floorplan1.svg?v=1.1.14
      log_level: info
      rules:
        - element: light.hue1
          entity: light.hue1_light
          state_action:
            action: call-service
            service: floorplan.image_set
            service_data: /local/floorplan/home_simple/home_simple/light_${entity.state}.svg
          tap_action: toggle
        - element: light.hue1.button
          entity: light.hue1_light
          state_action:
            action: call-service
            service: floorplan.class_set
            service_data: button-${entity.state}
          tap_action:
            action: call-service
            service: homeassistant.toggle
        - element: sensor.bob1test
          entity: light.hue1_light
          state_action:
            action: call-service
            service: floorplan.text_set
            service_data: OneLine
        - element: sensor.livingroom
          entity: light.hue1_light
          state_action:
            action: call-service
            service: floorplan.text_set
            service_data: Two\nLines
        - element: light.hue1.text
          entity: light.hue1_light
          state_action:
            action: call-service
            service: floorplan.text_set
            service_data: ${entity.state}
          tap_action: false
      stylesheet: /local/floorplan/floorplan1_main.css?v=1.1.14
    full_height: true
    type: custom:floorplan-card

But, I'm not sure if you're trying to make a full page render, or a floorplan within a card.

Note that the card itself can also be edited. If I open up the floorplan in the Card context, here's the rendered YAML:

config:
  console_log_level: info
  defaults:
    hover_action: hover-info
    tap_action: more-info
  image: /local/floorplan/floorplan1.svg?v=1.1.14
  log_level: info
  rules:
    - element: light.hue1
      entity: light.hue1_light
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: /local/floorplan/home_simple/home_simple/light_${entity.state}.svg
      tap_action: toggle
    - element: light.hue1.button
      entity: light.hue1_light
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: button-${entity.state}
      tap_action:
        action: call-service
        service: homeassistant.toggle
    - element: sensor.bob1test
      entity: light.hue1_light
      state_action:
        action: call-service
        service: floorplan.text_set
        service_data: OneLine
    - element: sensor.livingroom
      entity: light.hue1_light
      state_action:
        action: call-service
        service: floorplan.text_set
        service_data: Two\nLines
    - element: light.hue1.text
      entity: light.hue1_light
      state_action:
        action: call-service
        service: floorplan.text_set
        service_data: ${entity.state}
      tap_action: false
  stylesheet: /local/floorplan/floorplan1_main.css?v=1.1.14
full_height: true
type: custom:floorplan-card

I hope this can help you with the next step.

Also, I've formatted your code-blocks in the first post. Ignore possible bugs in the floorplan example I've provided. It's part of one of my playgrounds...

[RonRN18]

As mentioned,, I'm still a bit new to Home Assistant's style of coding. I'm learning quite a bit but I still have a LONG way to go. I figure that I'm not too far from understanding what I am doing here and it will be a forehead slap when I figure it out.

As to my version, it is the latest version of HAOS that I am aware of:

As to where I am pasting my YAML code, I am creating the dashboard, named "Fairhaven". I then open it and click on the three vertical dots and select the "{ } Raw configuration editor".

When I paste my code and hit save, I see:

My thought is that I am missing something about naming or defining cards, but I am having difficulty wrapping my head around this topic. My assumption on this is that my YAML code needs to be wrapped in a card somehow, but I'm not exactly sure of the proper way of doing this.

[OzGav]

You need to start your YAML like this

title: Home Assistant
views:
  - panel: true
    cards:
      - full_height: true
        type: 'custom:floorplan-card'
        config:
          log_level: info
          image:

[exetico]

@RonRN18 I understand that you're new to HA. Thats why I provided screenshots for you, so you're able to compare them 1:1 with your setup :-)

How did it go?

[Trzinka]

You can see my settings:

#411