Tesla (or other car?) card, minimal, interactive, and animated

[Aephir]

I made this floorplan card for easy overview and control of the most commonly used services for a Tesla car (model Y in my case). All code, yaml, svg file, etc., can be found here, feel free to use, modify, whatever, if you can use anything.

It shows each door (as well as trunk, frunk, and charge port) on the picture as open or closed based on their state. Most icons are grey in their "nothing to note here" state, and red in their "pay attention" state (what that state is depends on the entity)

I also included an svg template to create your own images for the car, in case you have a different color or model and want yours to open/close doors on the image.

Doors closed, not charging, charge limit 80%	Trunk, frunk open, charging, charge limit 100%

[exetico]

There's still too much on my table, but I need to add a comment here.

It's great! I'd like to make it even more "minimal" by removing the background, and just swapping the colors of the SVG icons, on basis of the user-theme selected (light/dark). Is that something you consider?

I ask cause I also picked up a Y this week 😄 ! Great work, btw. It was one of the first things I've planned to do on my own. But.. Now I'd need to consider to just use the one you provided.

Also:
Would you mind if we add it in our "example stack"? I'll link to this discussion, for sure (for people to see the discussion, and the original created). If you're use to make a bit of code, fell free to add is as a PR. But if that's too much to ask, that's just fine.

[Aephir]

Of course you can add it in your example stack. I've never made a PR, but if you'd point me in the right direction (adding a folder here?), I'm happy to give it a try.

I'd love to accommodate the "more minimal", but think the background removal might be difficult. It's the same color as the background in the Tesla app because I couldn't crop the "car parts" tight enough to avoid any of the background, so the images would retain some of that background color, e.g., like this:

I tried opening the app with the phone in "light mode" but it doesn't seem like it can have a different background color. I could certainly make a "light" version for the buttons, but I think it might look weird with the dark background?

[OzGav]

It’s possible to crop it closer but you need to use a good image program like GIMP or photoshop

[Aephir]

Well, let me rephrase then, I didn't crop it tighter since this worked perfectly for what I wanted :)

I'll think about doing a "better" version but (just to be up front) don't hold you breath; I'm not expecting to get the time too learn a new photo manipulation software and do this any time soon.

A question for if I do get time to look into it: Is it still easy to align if you don't retain the corners (see bottom right corner of image above) so it can "snap" to align with the "base" image? Or do I need to do something particular too be able to align the "clipped" parts correctly on top of the "base"?

[OzGav]

Just eyeball it. I have a whole house done that way. You can leave a bit of common overlap. In Inkscape you can show and hide the image to see that nothing appears to jump