Free of plug-ins and YAML, novice programmers create Home Assistant native entry-level Dashboard – Home Assistant step-by-step tutorial EP 14 

Although I am personally more accustomed to using floor plan control, setting up the floor plan Dashboard is difficult, and it is not easy for novice programmers to get started. Today I will introduce how to use Home Assistant without relying on any plug-ins and without touching YAML coding. Build the most basic Dashboard!

If you are interested in floor plan Dashboard, please refer to this article directly:

Let’s take a look at the final product first

Dashboard 最終成品

Do some basic goal setting before you get started:

  1. Because controlling through mobile APP is the most frequent and convenient usage scenario of Dashboard, the settings introduced today will give priority to mobile operation.
  2. Today we will set up the Dashboard in the most common "area segmentation" method. You can adjust it according to your own usage habits in the future.
  3. Today we will use the most common types of devices: air conditioners, switches, and curtains. If you have other types of devices in your home, you can add more according to your needs.

Step 1. Add a new canvas

  1. Find your dashboard and click on the pencil icon in the upper right to enter edit mode.
新增畫布
  1. Click "+" and enter canvas information
    • Title: The text displayed on the canvas switching tab on the screen (the ones to the left of the "+"), as short as possible for easy recognition
    • Icon: After selecting the icon, only the icon will be displayed on the tab, which can make the entire screen more concise, but you must pay attention to whether the icon can help accurately identify the content of the tab. In today’s demo, I chose the overview part Use pictures, and use text titles directly for other canvases.
    • URL: This is only used in more advanced applications. Here, just enter the English name corresponding to the canvas.
    • Theme: It will only be used if you install another theme, you can ignore it first.
    • Sub-canvas: It is also used by more advanced applications.
    • Panel type: Select "Block" today
    • Maximum block width: This refers to the maximum number of blocks that can be accommodated in a row. The default is 4 and the setting is 2. I personally think it is more suitable. Of course, if your screen is wider or you commonly use desktop or tablet controls, You can also increase the value.
畫布設定

In fact, after the canvas is set up, you can freely play it. However, since some friends may have no idea about setting up a smart home Dashboard, let’s introduce some basic settings😎

Step 2. Set physical seal

Except for the "Panel" type canvas, there is a "Physical Chapter" block at the beginning of the canvas by default.

"Entity stamp" allows you to quickly check the status of the entity, and at the same time, you can quickly operate the entity (eg turn off all lights). The most basic application is to display the status of family members at home and away from home.

  1. Click the "+" in the capsule shape at the top of the canvas
  2. Select "Entity"
新增實體章
  1. Select the corresponding personnel entity
  2. Turn on "Show physical photos" (you can also turn it off, but I think it looks better to show avatars)
  3. Click "Save"
實體章設定

After setting up all the family members, you can see everyone’s status at home and away from home on the screen! Click to also see a map of the member's last location.

實體章設定完成

Step 3. Set section title

  1. Click the "+" in the block
  2. Select "Title"
新增區段標題
新增區段標題
  1. Set "Title"
    • Title: Set your name for this partition.
    • Illustration (optional): Select an appropriate icon to represent this room (or section).
    • Entity: This is Home Assistant 2024.10 The new function can display the status of the entity on the right side of the title card. Here I have selected indoor temperature and humidity. You can also try to select other statuses you want to display.
區段標題設定

Step 4. Set the thermostat panel (air conditioner)

  1. Click the "+" in the block
  2. Select "Thermostat Panel"
新增溫控器面板
新增溫控器面板
  1. Set up "Thermostat Panel"
    • Entity: Select the air-conditioning entity of the corresponding area.
    • Name: Set the name displayed on the interface. If there is no input, the entity name will be used directly.
    • Additional functions: I choose "Fan Mode" and "HVAC Mode" here. Different brands and different integration methods may have different functions. You can choose the function according to your own situation and needs.
溫控器面板設定
  1. Adjust the "Layout Configuration": In order to make the final Dashboard more compact, I chose to shrink the thermostat panel a bit, which can be adjusted according to your own preferences.
溫控器面板版面配置設定

Step 5. Set up curtain card

  1. Click the "+" in the block
  2. Select "Information Block Panel"
新增窗簾卡
新增窗簾卡
  1. Set up the "Information Block Panel"
    • Entity: Select the curtain entity in the corresponding area.
    • Appearance: The display name and icon can be customized and selected according to personal needs.
    • Additional functions: Here I choose the most commonly used "curtain position".
窗簾卡設定

💡 You can use the "reproduction" function to quickly create similar physical cards

再製功能快速建立類似的實體卡

Step 6. Set the switch card

  1. Click the "+" in the block
  2. Select "Button Panel"
新增開關卡
新增開關卡
  1. Set up "Control Panel"
    • Entity: Select the entity to control.
    • Name: If left blank, the entity name will be displayed directly.
    • Illustration: If not selected, the original icon of the entity will be used.
    • Layout configuration: Adjust according to the desired configuration.
開關卡設定

You're done!

Then follow the same steps to complete the settings for each area, and the most basic Dashboard of Home Assistant is completed! Getting started with Home Assistant is so simple. You can complete a simple Dashboard without installing additional plug-ins or writing YAML.

In the future, you can gradually enhance your own Dashboard depending on the usage conditions, and make Home Assistant something that suits you!

4 COMMENTS

  1. Neil, will you teach me how to connect the home assistant device to the external network in the future? Because setting up after crawling the article has always failed😓

    • Hi Hsu,
      Please wait patiently~ I originally wanted to use DuckDNS, but it seems that DuckNDS will have various problems. I am trying the Cloudflare solution.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

you might like
recent discussions
  • Jerry 2025/04/14Thank you very much Neil for your selfless sharing. The websites you provided are of great help to me. I will save it first and digest it slowly^^ I also look forward to Neil's industry news and teaching articles in the futureHome Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Neil 2025/04/13Hi Jerry, I usually get information about HA from these places: Website: – Home Assistant official Release notes – Automata – Home Automation Community – Weijia Home Intelligence FB Group: – Taiwan Home Assistant enthusiasts exchange – Home Assistant YouTube channel: – Smart Home Solver – Everything Smart Home – Home Assistant Programming language: Strictly speaking, YAML is not really a programming language (let me make this clear in case some people mind 🤣), but if we include these data formats or style languages that “look like” programming languages, and sort them by depth of use in HA (the deeper the bottom, the deeper the bottom): – YAML (data format): a language for configuration files used in many places in the HA environment. – CSS (style language): used to adjust the interface style (font size, color, image, position, etc.). – JSON (data format): If you use Node-RED, you will probably come across it. – Jinja2 (Python template syntax): You may encounter it when you explore automation or Dashboard in depth. ※ But in fact, even if HA does not know the above, it can still make a smart home complete. You don’t have to put so much pressure on yourself, but if you are interested, it is also good to know more. It is actually difficult to generalize about the support of devices. Now, even if the home appliances themselves do not support it, there are still many different ways to connect traditional home appliances to HA. In addition, cases like Haier do require in-depth research. What I usually do is to crawl a lot of information on the Internet, and usually find attempts made by others. It just so happens that when I was looking up other information recently, I saw someone sharing how Haier water heaters were connected to HA. But it is indeed like what you said, if you get involved for a while, you will understand these details more and more. 🤣Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Jerry 2025/04/10Hello Neil: After observing for 1 or 2 days, everything seems to be normal. Maybe it’s because the system was not stable during the initial setup period!? The more I play, the deeper I feel. I also find that I still have many shortcomings. I wonder if Neil can share and teach everyone how to fish? For example, recommend good websites, forums, FB groups, youtube videos, or give some guidance. In addition to the YAML language, would it be helpful to know some CSS syntax? Do I need to know other languages? I can even start a new teaching direction. When I see non-big-name products that claim to support APP (such as products from mainland China), I can teach everyone how to identify whether they can be connected to HA and how to ask customer service? Where can I see supported articles or platforms? This kind of experience sharing, I think, will be very helpful to everyone. I am currently looking to buy a heat pump water heater from Haier. Haier is a big manufacturer in the world and has its own APP. I have also found Haier's kit from HACS, but it does not seem to support heat pump water heaters. Does that mean it cannot be connected to HA? Or is there any channel to check it? There are also many flat panel lights and fan function lamps on the other side of the strait, which also claim to support APP connection, but they are all small manufacturers and it is difficult to tell whether they can be connected to HA. These are the problems I am facing now. If the home appliances I buy are different from what Neil shared, I don’t know where to start. Maybe I'm still too inexperienced. If I play for a few more months, maybe the above problems won't be a problem anymore, haha^^Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Neil 2025/04/09Hi Jerry, I tested it myself and it was fine, but please note that because it is controlled through the cloud, there is an extra layer of brand mediation, so it is not suitable for fast switching. I tested it myself and it took about 1 second to complete the synchronization after clicking. Remember to put the entity in entities, otherwise the status display may have problemsHome Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Jerry 2025/04/07Thanks Neil for clarifying this. I tested it later and found that when using the "button panel" to control the switch of the Electrolux air conditioner (the same model as Neil), the device will respond to turning on or off in about 1 second, but the "status icon" for turning on is much slower, and it takes about 30 seconds. The "status icon" for turning off is normal, and the "status icons" of other negative ion switches and the "status icons" of the monitoring light switch are also normal, which made me think there was a problem with the synchronization. I'll test it again, maybe it's caused by the wrong setting.Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Neil 2025/04/07Hi Jerry, 1. This method is through cloud integration, which is actually using HA to call Xiaomi/Electrolux to control the device. 2. It is not normal. If this happens, you may need to check whether the entity you display on the floor plan can truly represent the status of the device. If not, you may need to try other entities of the same device.Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Jerry 2025/04/07The problem is solved. Thanks again to Neil for his help^^ I have two more questions about concepts. Neil, do I have any misunderstandings? 1. I connected Xiaomi and Electrolux devices to HA through HACS. Is it still connected through WiFi? Before connecting, you need to obtain API key and Access Token from the official. This means that the communication between HA and the device still needs to go through the official. It’s just that the official APP can be replaced and all integrated into the HA APP for control? 2. After testing, when controlling the device through physical operation or the original official APP, the HA app cannot know the status of the device synchronously, but it can know the opposite. Is this normal? For example, the Xiaomi electric fan at home was turned on by someone physically before going out, but when the person is outside, he cannot know through the HA app that the device was forgotten to be turned off. He has to connect to the Xiaomi app to know!?Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
  • Ghost 2025/04/07Xiaomi Home currently does not support Taiwan. For now, you can only use Xiaomi Miot Auto. As for Xiaomi Cloud Map Extractor, I currently have a 2FA problem. There seems to be no simple solution. I haven’t tried it successfully yet.Home Assistant must-install HACS plug-in installation steps detailed explanation – Home Assistant step-by-step tutorial EP 17
  • Neil 2025/04/07Jerry, it seems that the click action cannot penetrate the part where the picture changes because of the overlapping pictures. Try adding pointer-events: none to the style.Home Assistant Floor plan A new experience in smart home control with visual floor plan! – Home Assistant step-by-step tutorial EP 6
you might like