usernein
(Cezar H.)
June 19, 2022, 5:08pm
1
I am doing some modifications to tv-card and i want to replace those buttons for volume control with a slider-card .
This is how it is right now:
And this is the wanted result:
I guess i can include the custom component as html tags, but how can i also pass the yaml config for the wanted card?
In my case, i want to include the slider card with this config:
entity: media_player.tv
height: 40px
mainSliderColor: white
secondarySliderColor: rgb(60, 60, 60)
thumbWidth: 0px
thumbHorizontalPadding: 0px
I thought maybe importing the slider-card from customCards
or customElements
and calling setConfig or something else just like HASS itself would do, but i have no clue at how to do it
luixal
(Luis Alberto Pérez García)
October 23, 2023, 11:27am
2
Did you got this working? I’m trying to do the same.
usernein
(Cezar H.)
October 30, 2023, 3:53pm
3
Hey @luixal ! Yes, i got it working!
I used the createCardElement
function of the Helper Functions object got with window.loadCardHelpers()
The helpers functions are not well documented, but you can check my solution here:
let slider_config = {
"type": "custom:my-slider",
"entity": this._config.entity,
"height": "50px",
"mainSliderColor": "white",
"secondarySliderColor": "rgb(60, 60, 60)",
"mainSliderColorOff": "rgb(60, 60, 60)",
"secondarySliderColorOff": "rgb(60, 60, 60)",
"thumbWidth": "0px",
"thumbHorizontalPadding": "0px",
"radius": "25px",
};
if (this._config.slider_config instanceof Object) {
slider_config = {...slider_config, ...this._config.slider_config };
}
this.volume_slider = await this._helpers.createCardElement(slider_config);
Also, i got a few links for you:
1 Like
luixal
(Luis Alberto Pérez García)
November 8, 2023, 12:29pm
4
Thanks!
Looks great, I’ll try it out so I can get rid of looooooooooooooong yaml cards I reuse here and there
1 Like