- Background
- How-To
- Step 1: Install the Plotly Graph Card plugin
- Video demonstration
- Step 2: Add Map Card!
- Video Demonstration
- FAQ
- How do I know if the Plotly Graph Card plugin is installed successfully?
- Identify in custom cards
- Identifying in HACS
- How do I update my card code for the new version?
- How do I uninstall if I no longer want to use the map feature?
- I changed the device name for 2A and now the device ID method doesn't work for me, can I still use the card code?
- Update
- Known issues
- In the process of adding code, errors such as Key 'entities.0.marker' is not expected or not supported by the visual editor. appear.
- Fixed
- Acknowledgements
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:
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.
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
Video demonstration
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.
- Use code tool to generate the map code.
- Add a manual Lovelace card on the Home Assistant homepage using the generated code.
- Save and finish editing! ALL Done!
Video Demonstration
FAQ
How do I know if the Plotly Graph Card plugin is installed successfully?
Identify in custom cards
If Custom element doesn't exist: plotly-graph. appears in your custom cards, it means that the plugin is not working, and you need to reinstall the plugin.
Identifying in HACS
Search for Plotly Graph Card in HACS. If there's a small icon that looks like a downward arrow, it indicates that it has been installed. Otherwise, you may need to consider reinstalling.
How do I update my card code for the new version?
You actually just need to edit the original card and replace all the code inside.
How do I uninstall if I no longer want to use the map feature?
The process is actually very simple:
- Delete the card on the home page
- In HACS, uninstall the corresponding plugin
Plotly Graph Card
This completes the entire uninstallation and deletion process.
I changed the device name for 2A and now the device ID method doesn't work for me, can I still use the card code?
We understand that some people would like to use their own names for 2A, and for such cases we have made a specialized code generator for custom named 2A:
It is used as follows:
- Copy the Entity ID of the entire customized All Target Counts into the generator.
- The rest of the process is the same as .
This is a video demonstration:
Update
Known issues
In the process of adding code, errors such as Key 'entities.0.marker' is not expected or not supported by the visual editor. appear.
This problem was initially reported by Touchit88
Since the Map uses a lot of custom code, this is predictable behavior. They represent the inability to use visual editing (i.e., normal dialogs that can input simple properties), don't worry, just save it, this does not affect, because we only need to use the code mode.
Fixed
Known issue with 2A Map code: inch units can't move on the map[Fixed]Acknowledgements
All the core work here is from athua's sharing in our LD2450 exploration thread, as well as discussions from other members of the community.