Terminology for Noob with years of programming experience

Configuration Frontend
#1

I’m slowly coming up the steep learning curve. Can someone please point me in the right direction:

  • I see categories or controls titled “Lovelace.” Without a long history lesson, what is Lovelace? Is it something included or an add-on? Is it a modern control as opposed to a legacy type? When should I use it or not use it? “Lovelace controls” as opposed to what other kids of controls?

  • I see controls posted on github, but no instructions on how to install them. Most are two files. One file seems to be yaml, and the other is code in some programming language, guessing it’s some weird custom flavor of python that isn’t used anywhere else in the world. If I want to use these controls, do I need to muck about in the filesystem? Seems likely to break the whole system with a misplaced character. What folder do you put these files in? They often have the same names on github. Do you make a folder for each control? Seems like there should be an easy way to just say “add this control” instead of hacking files each time.

  • Is there a simple way to make new controls without manually editing files? Are there any “hello world” - type examples? I was going to start by making some buttons to select radio volume. No problem adding a button and setting an action. Works fine. Had to specify the instance name for each button. It seems like there should be a way to specify it only once as a parameter for a group of buttons, as it will be a huge pain to change if I get a different device.

The next step would be to see if there was a way to make a button where I just needed to specify the device and the preset + see if there is a way to change the color of the button when the volume is set to the level used by the button. Each button looks like this:

show_name: false
show_icon: true
type: button
entity: media_player.living_room
icon: mdi:volume-low
tap_action:
action: call-service
service: media_player.volume_set
target:
device_id: abcdef01920112321321312321
data:
volume_level: 0.4
show_state: false
name: Soft

#2

The old name for the dashboard frontend. Name change only.

Use the Home Assistant Communit Store (HACS). It is a lot easier to install and maintain third party integrations and frontend plugins.

You can style cards with card-mod:

You could also look at the mushroom template card.

2 Likes
#3

Then don’t start by reinventing the wheel. What do you want to do? It’s quite likely that someone has already made a component or integration that meets your needs.

There is no “Home Assistant for Dummies” or else I would have a well-worn copy on my desk. You will be told, “everything is in the docs”. Yes (LOL), but first you need to know what to look for.

Do you really need to write a new control or component?

#4

Reinventing the wheel is sometimes a good way of learning - providing you know that’s what you’re doing. :grinning_face_with_smiling_eyes:

Meanwhile, there’s a glossary which is sometimes a good place to start:

Glossary - Home Assistant (home-assistant.io)

#5

can you post an example of where you found them?

If we see that then it will be easier to answer the rest of those questions.

Oh, that gives me an idea for another set of control plugins that I can add to my collection.

#6

Jinja? It’s pretty widely used. Well, jinja isn’t, but Ansible is which is Jinja with extra functions. However it’s a markdown language so you won’t run into it unless you’re doing that type of work.

Custom button card can pretty much do anything. No reason to write your own card unless you don’t need all the fluff that custom button card offers.

#7

Hmm. I wouldn’t recommend that. It has been getting very little support lately. It still works for now, but who knows for how long.

#8

The dev has been fixing it when it breaks and he’s still very active on github. It was fixed during the last beta period before release FYI

#9

You got the links to HACS, which will help you a long way with custom parts.
If you need something and a simple Google or forum search did not come up with, then post here.
There are a lot really bright people here with a long experience on HA, who will be happy to help.
The documentation can help a bit, but the true power is really the people on this forum!

#10

Ok, so how do you make a custom button card? That’s the part I can’t seem to find any guidance on. I just need guidance on what files / areas of the system I’m supposed to alter. I’m assuming that after I create it, it will show up in my list of options when I hit “+ add card”

#11

In HA land, are these things called panels, custom buttons, or cards? I seems to see the words used interchangably.

#12

Home Assistant has a number of “core” cards included with the system. They are listed in the right hand column here:

Each card has configuration instructions. Amongst these you will see a core button card. It is not very configurable.

There are also custom cards you can install, like the custom button card (it is highly configurable]:

The gihub repository for each custom card or integration details their configuration and use. There are usually also forum topics covering questions and answers. e.g. https://community.home-assistant.io/t/lovelace-button-card/65981

The easiest way to install and maintain third party custom cards and integrations is using the Home Assistant Community Store (HACS). You can find the install instructions here:

#13

I figured out how to add cards and use the few built-in card types.

Is there a “hello world” type example that shows the steps involved in creating a new card type?

For example, I added three buttons in a group that set media volume to low / medium / high.

How would I make a custom card that lets me specify the device and does the three buttons?

I think that I’m supposed to manually edit the configuration.yaml file, but don’t see any “total beginner” walkthroughs on how to add to the card types. I’m also a little worried that everything goes in one big global file & one type could trash the entire system. Seems like there should be a more modular way to add new card types.

Thanks!

#14

I think that this is how it’s supposed to work, but unsure:

  • Manually edit the configuration.yaml file somewhow to create new card type
  • Go to your layout & hit “+ add card” and your new card type should appear in the list

In the forums, I see Custom Cards called: Cards, Panels, Controls, Custom UI, and a few other names. I’m assuming these are all the same thing, but unsure.

For whatever reason, none of these things are listed in the glossary:

Some seem to be purely YAML, some are a combination of YAML and some kind of python-like code, and I also see some typescript, json, javascript, and python.

#15

Looking to example, this is supposedly a custom card type, but it looks like you have to build them in Microsoft’s Visual Studio. All the source code files appear to be typescript & this is supposed to be a “simple” example. Do you create new custom buttons in typescript or YAML or python? Getting conflicting information.

#16

I can definitely see how it can be confusing.
I will try my best to clear up what I can.

  • Homeassistant has been evolving for many years, mostly everything had to be done by configuration files that had a .yml extension in the early days. Many of these have been migrating to more user friendly graphical setups.
  • Most graphical configurations still have a .yml mode that can be reached.
  • The Homeassistant main interface screen was originally called Lovelace and has more recently been called the Dashboard.
  • Homeassistant supports many third party devices, most of these can be configured by installing an “Integration”. Homeassistant provides a location where these can be added, there is also an integration call “HACS” that can be installed and used to install other “third party” integrations that are not a part of the standard integrations that Homeassistant provides.
  • Unfortunately many of the original and “New” terms for the same thing are referenced throughout this forum which can definitely be intimidating to new users.
  • There are lots of people on this forum with different experiences and knowledge so definitely reach out if things get overwhelming.
    I would also recommend the Homeassistant website to get more information “Integrations” and the “Dashboard”
    Good luck!
    Dashboards - Dashboards - Home Assistant
    Integrations - Integrations - Home Assistant
#17

In my mind you aren’t trying to create a new card type.

you are just trying to use existing cards that are created by third party developers and then brought in from that third party repository (hence the github example you are referencing).

to use that card you either need to bring it into HA (“install it”) either via HACS (which as noted above is another third party integration that eases some of the work to install third party integrations or plugins) or install it manually via the instructions at that developers github repository (repo for short).

Then when you have it successfully installed in HA then you can configure the card using either UI or manually via yaml (if you use yaml mode for your Lovelace Dashboard).

Also you already posted about this yesterday didn’t you? If so you probably shouldn’t make several posts asking the same question. it wastes peoples time trying to help you if they don’t know what other help others have given you already. If the answers aren’t adequate then just try to ask further questions there instead.

edited since tom moved it to the existing thread…

2 Likes
#18

Merged topics. Please only start a new topic for new questions.

2 Likes
#19

Okay, so I started with a horizontal group of buttons to set volume presets.

Questions:

If I want to reuse it for a different media device, do I turn it into a custom button or custom card somehow? What is the right term for this?

Is there a way to parameterize the media device that I am using so I don’t have to specify it for each button, and can specify it once for the group of buttons?

If one of my buttons sets the volume to 70%, is there and easy way to make it change colors to indicate when the volume is set to that level?

#20

No. Just create another horizontal stack of core cards. You can do this by duplicating the horizontal stack card and then editing the entity in each of the button cards in the new stack.

Untitled

Card-mod for core button cards. Or this can be done with JavaScript in the custom-button-card. You can also use button templates to parametrise the custom button card. See the examples in the link.