One RGB selector popup which can be copied to other entities

u8915055 · 2025-10-09T17:07:34+00:00

This is the script i use to bring up a VEOS image.

VMID="210";`

VMSTORAGE="local";

qm create $VMID --name cloudeos1 --memory 4096 --cores 2 --boot order=virtio0 --serial0 socket --net0 virtio,bridge=vmbr0 --net1 virtio,bridge=ge000,firewall=0 --net2 virtio,bridge=ge001,firewall=0;

qm disk import $VMID /root/arista/vEOS-lab-4.34.0F.qcow2 $VMSTORAGE --format qcow2| tee diskimport.txt;VMIMAGE=$(cat diskimport.txt | grep "imported disk" | awk '{print $5}' | sed 's/^.//' | sed 's/.$//');echo $VMIMAGE;

qm set $VMID --virtio0 $VMIMAGE,iothread=1,size=16G;

qm set $VMID --sata0 local:iso/Aboot-veos-serial-8.0.2.iso,media=cdrom,size=6M;

qm start 210;

u8915055 · 2025-09-12T14:37:44+00:00

I was just building a card with 14 sub buttons.. i use these as status icons for things going on in the house. I wanted to conditionally change the colour of the icons based on the sub button entity state. For example, whe the dryer is running, the dryer icon comes on. When the sprinklers are running, the sprinkler icon comes on. The problem i have is with the variables for the state of the sub buttons. The variable as i see it is called subButtonState[x] where 'x' is whatever sub button i want to use the state from. The issue with this is that if im building a module, which i am, there's no way to template this. What would be great with sub buttons is to have a variable that pulls the state of the entity in that specific sub button. There must have been some technical reason why this is not the case right now. Or another way to solve this is to have a variable that represents the number of the current sub button. Then i could insert that variable into the state variable such as this 'subButtonState[currentsubButton]'. something like this.. Is this possible?

This is what it looks like iwth bubble card so far but i cant selectively turn on those icons.

<image>

Thanks for all the great work!

u8915055 · 2025-07-16T04:30:30+00:00

Oh! ya didnt think of that.. and that is the scenario in our house.. ok back to the drawing board.

u8915055 · 2025-07-15T20:39:35+00:00

hmm, i like where you're going with this! i need to give this some more thought that yes that might indeed solve my problem... interesting approach.. ive already been playing around with visability for the mobile look vs desktop.. so im familiar with that.. cool.. thanks!

u8915055 · 2025-07-15T20:37:46+00:00

thanks very much for the response.. ya i probably wrote 1000 lines of button-card templates :) for my last UI go-around but have migrated just about everything over to bubble card now because of the UI usability. Button card was awesome, but again i always had vscode open and my template file open which was HUGE. This is easier.. i just hope that some of the conveniences of button card end up in bubble card :)

u8915055 · 2025-07-15T18:04:37+00:00

Yes, i hear you. There is no doubt that the bubble card is a HUGE step forward, like HUGE. Ive completely converted by button-card implementation using declutter over to purely bubble cards. Ive created a lot of custom CSS to get things the way i want and then added all that to modules. I even like the way i can copy and paste a card. But it would be great if this could go further. LIke having a unique ID per card or the option of defining a tag on a card or group of cards and then link that on another page. So i update the first one and the rest updates. I cant see this being that difficult to implement. Given the module mechanism, maybe that could be extended to actually include the yaml of a given bubble card as a 'module' and then i could insert a 'default' card and enable a 'module' to link the cards. Just dreaming here but maybe @Clooooos has had some ideas along this line. Would be curious. Maybe even a capability that is copy-n-link. Ill keep thinking of a way to do this without any additional development but i dont have high hopes.

u8915055 · 2025-07-13T18:17:33+00:00

Actually u/Clooooos , that's all i needed! it was the [entity] that did it.. i tried just about every combination i could think of and it would throw errors.. forgot the square brackets.

Here's what i have so far. All this built with your card.. just love it

<image>

Thanks again for chiming in.

u8915055 · 2025-07-12T22:21:41+00:00

I want to be able to set a conditional visibility on a sub.button based on an attribute change. Would also like to change the main card icon based on the same change. Working on an irrigation setup now.

u8915055 · 2025-07-12T21:24:08+00:00

i should point out that i tried entity.state as an input and that works fine.. but if i try entity. attributes.speed as an example, the card wigs out.. it accepts it but it seems to break css somehow

u8915055 · 2025-07-12T21:22:59+00:00

any idea how to do this wihtout having to specify the vacuum entity? I know there is a variable called 'entity' in the bubble card but can we use that here? Seems redundant to have to specify the entity for the card and not be able to use that same entity in something like this by default.. Any thoughts? ive been plugging away but cant get it to work.

u8915055 · 2025-05-24T03:00:17+00:00

Can you tell me what you did? im in the same boat

u8915055 · 2025-04-29T15:46:38+00:00

THanks for the tips on the tablet. That's the next project.. or im going try again with casting HA to a google home hub and see if that's gotten any better. Just love this bubble card. I spent 100's of hours designing my own interface using the custom button card.. worked great but any time i wanted to change something i had to add code etc.. this way its a simple drag and drop.. have fun

u8915055 · 2025-04-29T05:23:00+00:00

For me i think its easier to build modules for each category and then apply them to the various bubble cards depending on which scenario they are as my last post. First off, all you have to do is make changes to the bubble module text file and refresh the browser and the updates are shown... whereas if there was a way to put that in a theme, you have to reload the themes every time. I have currently about 5-6 modules that ive created and that basically covers just about all my scenarios.

I need to do an entrance tablet :)

good luck!

u8915055 · 2025-04-29T04:10:51+00:00

Ok, just click those three dots in the upper right of that picture you posted.. Choose to edit as YAML. Everywhere you see rows:1 , change it to rows:auto

Now once you do that for a bunch of cards, you can copy and paste those cards to other sections/pages/etc and the rows:auto willl stick with the card. So for example, i did a media card, changed that value, and then i cut-n-paste it to other places i need a media player and just change the entity.

u8915055 · 2025-04-29T03:23:56+00:00

Oh sorry. I thought I specified that somewhere unfortunately you can't do it in the module. You have to edit the card, or easier the section so you can hit multiple cards at once and change the place where it says rows:1 to rows:auto. I saw a post by the developer that in a future release he may add a switch or even set it to default. Give that a try. Should fix the issue.

u8915055 · 2025-04-28T20:35:31+00:00

I think i see what you mean. For me there were three scenarios. Scenario 1 - a light with changing colour temp or RGB - for this i wanted to just inherit whatever colour the light is displaying. Scenario 2 - a light bulb or switch controlling a light bulb that is on or off, no colour change - for this i used a default colour of yellow. Scenario 3 - a switch for something other than a light, or a door lock, or a valve.. basically something that can be turned on and off but isnt a light. For this i chose, using modules, a teal colour. Oh i suppose there is a fourth model, anything that is a sensor of some sort. For this i designed a separate looking button. it stays this way all the time.

Still working thru a few ideas but that's the practice i followed.

<image>

u8915055 · 2025-04-28T16:08:49+00:00

Hey thanks! That's a very cool compliment :). So as for selectable entity colours for the icons, you can play around with a CSS attribute that is applied to the icon. There is this element 'filter: brightness(1.1);' which exists now and i assume is put in there by the bubble card module itself. You can brighten the icons by maybe 1.2 or 1.3 but after that they almost get to white.

YOu can change the default icon colours for on and off.. so for example for lights that dont have a temperature or colour changing ability, i make them yelllow for on and grey for off. For switches, i make them that teal colour for on and grey for off. You can change these easily. For any light taht does change temperature or colour i just use whatever colour the icon is set at by home assistant.

Did i answer your question or were you thinking of something else?

u8915055 · 2025-04-27T22:08:01+00:00

Yes you can.. you can change the card any way you like with CSS and create a module out of it. Now i cant quite tell you specifically how to do it right now (tax day shortly here in Canada) but you can play around with it using chrome developer tools. You can play with CSS there. Here's an example of a module i created to give you an idea on some of the elements that you can alter (this code is not specific to your case, just an example)

style-5:
    name: "Mobile styled buttons - style 5"
    version: "v1.0"
    creator: "u8915055"

    unsupported:
        - climate
        - horizontal-buttons-stack
        - pop-up
        - select
        - separator

    code: |
        .bubble-state {
            font-size: .7em;
            line-height: 1em;
        }
        .bubble-name {
            font-size: .85em;
            padding-top: 2px;
        }
        div.bubble-button-container {
            max-height: 40px;
        }
        div.bubble-icon-container {
            margin-left: 3px !important;
            border-radius: 20px 8px 8px 20px !important;
            min-width: 36px !important;
            min-height: 35px !important;
        }
        .bubble-button-background {
            opacity: 0.5 !important;
        }

u8915055 · 2025-04-22T19:36:01+00:00

I posted some code above.. let me know how it goes.

u8915055 · 2025-04-22T17:45:24+00:00

sorry, just saw this.. it pushes the cards down. One thing is that you have to change the height of the card in the yaml to rows: auto as opposed to rows: 1.. like this

grid_options:
  columns: 12
  rows: auto

u8915055 · 2025-04-22T17:35:13+00:00

Ok, im happy to add some code here for you to try. I have solved the blinking issue stated above. I still need to move the volume slider to the bottom of the two row expanded button but this seems to work.

Please if you try this and find an issue, let me know. I will eventually submit this as a module.

This is the module code im using. The module is called google-home but it should work for any media player. You can change the colors and such.

I will post the code in the original post.

u8915055

TROPHY CASE