Background
2A has the ability to locate personnel coordinates, which is a great feature that allows us to know the exact position of the target at a given time. It would be nice if we could display this coordinate system directly in HA.
Fortunately, in the HA community, athua has implemented a very intuitive map effect using a plugin. Its effect is as follows:
14时37分03秒_SN_小文件.mp4
How-To
We have simplified this process as much as possible by creating an online tool for generating the code. This allows you to quickly integrate this map into your HA. Additionally, we have prepared a tutorial to guide you in achieving the same effect as our simple implementation.
<aside>
😋 Don't panic! In fact, the whole process can be completed within 30 seconds. ✅
</aside>
Step 1: Install the Plotly Graph Card plugin
We assume that you have already installed the HACS store on HA. Our goal is to search for the Plotly Graph Card plugin within HACS and then proceed with the installation.
Plugin name: Plotly Graph Card
2A安装图表插件.mp4
Video demonstration
Step 1
Step 1
Step 2: Add Map Card!
We're very close to achieving the final map effect! Now you need to find the unique ID of your 2A sensor in ESPHome device, generate the map code, and add it to the homepage.
Here's the process:
-
Find your 2A name in the ESPHome device.
find you 2a id, and copy it.
-
Use code tool to generate the map code.
<aside>
💡 To make things easier, we've embedded the tool directly here, so you can use it without having to jump to the website.
</aside>
Code Generation Tools
Code Generation Tools
<aside>
💡 If you have trouble using the on-page tools, you can use the standalone page version:
https://tool.screek.io/2amap/
</aside>
paster your 2a code to online map code tool(https://tool.screek.io/2amap), click copy code.
-
Add a manual Lovelace card on the Home Assistant homepage using the generated code.
add a manual card
delete default code, paster new code.
you should see the preview on the right