Skip to content

Commit

Permalink
Folder structure
Browse files Browse the repository at this point in the history
  • Loading branch information
basbruss authored Dec 15, 2021
1 parent dae77fd commit beb4ad7
Show file tree
Hide file tree
Showing 2 changed files with 448 additions and 0 deletions.
350 changes: 350 additions & 0 deletions custom_cards/custom_card_light_color/card_light_color.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
card_light_color:
template:
- icon_info_light
- ulm_language_variables
variables:
ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_light_icon:
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: >
[[[
if (states['sun.sun'].state == "below_horizon"){
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.1)'
}
else{
return 'rgba(var(--color-yellow),0.1)'
}
}else if (states['sun.sun'].state == "above_horizon")
return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
]]]
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
tap_action:
action: toggle

### slider card
card_light_slider_color:
template:
- ulm_language_variables
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_light_icon:
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: >
[[[
if (states['sun.sun'].state == "below_horizon"){
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.1)'
}
else{
return 'rgba(var(--color-yellow),0.1)'
}
}else if (states['sun.sun'].state == "above_horizon")
return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
]]]
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
tap_action:
action: toggle
custom_fields:
item1:
card:
type: 'custom:button-card'
entity: '[[[ return entity.entity_id ]]]'
variables:
ulm_card_light_name: "[[[ return variables.ulm_card_light_name ]]]"
ulm_card_light_icon: "[[[ return variables.ulm_card_light_icon ]]]"
template:
- icon_info_light
- auto_color
item2:
card: ## delete when you don't want the collapse function
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: >
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--color-yellow),1)'
}
]]]
secondarySliderColor: >
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
}
else{
return 'rgba(var(--color-yellow),0.2)';
}
]]]
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
### slider collapse card
card_light_slider_collapse_color:
template:
- ulm_language_variables
variables:
ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_light_icon:
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: >
[[[
if (states['sun.sun'].state == "below_horizon"){
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.1)'
}
else{
return 'rgba(var(--color-yellow),0.1)'
}
}else if (states['sun.sun'].state == "above_horizon")
return 'rgba(var(--color-background-yellow),var(--opacity-bg))';
]]]
grid:
- row-gap: 12px
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
tap_action:
action: toggle
custom_fields:
item1:
card:
type: 'custom:button-card'
entity: '[[[ return entity.entity_id ]]]'
variables:
ulm_card_light_name: "[[[ return variables.ulm_card_light_name ]]]"
ulm_card_light_icon: "[[[ return variables.ulm_card_light_icon ]]]"
template:
- icon_info_light
- auto_color
item2:
card: ## delete when you don't want the collapse function
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: >
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--color-yellow),1)'
}
]]]
secondarySliderColor: >
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
}
else{
return 'rgba(var(--color-yellow),0.2)';
}
]]]
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
### internal templates
auto_color:
state:
- value: 'on'
styles:
icon:
- color: >
[[[
var color = entity.attributes.rgb_color;
if (color != null){
return 'rgba(' + entity.attributes.rgb_color + ',1)';
}
else{
return 'rgba(var(--color-yellow),1)';
}
]]]
label: ## delete if you want theme text-color
- color: >
[[[
var color = entity.attributes.rgb_color;
if (states['sun.sun'].state == "below_horizon"){
if (color != null){
return 'rgba(' + entity.attributes.rgb_color + ',1)';
}else{
return 'rgba(var(--color-yellow),1)';
}
}else if (states['sun.sun'].state == "above_horizon")
return 'rgba(var(--color-yellow-text),1)';
]]]
name: ## delete if you want theme text-color
- color: >
[[[
var color = entity.attributes.rgb_color;
if (states['sun.sun'].state == "below_horizon"){
if (color != null){
return 'rgba(' + entity.attributes.rgb_color + ',1)';
}else{
return 'rgba(var(--color-yellow),1)';
}
}else if (states['sun.sun'].state == "above_horizon")
return 'rgba(var(--color-yellow-text),1)';
]]]
img_cell:
- background-color: >
[[[
var color = entity.attributes.rgb_color;
if (color != null){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)';
}
else{
return 'rgba(var(--color-yellow),0.2)';
}
]]]
icon_info_light:
template:
- list_items_light
- ulm_language_variables
variables:
ulm_card_light_name: "[[[ return variables.ulm_card_light_name ]]]"
ulm_card_light_icon: "[[[ return variables.ulm_card_light_icon ]]]"
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-columns: min-content auto
- column-gap: 0px
card:
- background-color: 'rgba(0,0,0,0)'
tap_action:
action: toggle
hold_action:
action: more-info
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
template:
- icon
- auto_color
icon: >
[[[
var icon = 'mdi:lightbulb';
if (variables.ulm_card_light_icon != null){
var icon = variables.ulm_card_light_icon;
}
else{
return icon ;
}
return icon ;
]]]
tap_action:
action: more-info
item2:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
template:
- icon_info
- auto_color
show_icon: false
label: >-
[[[
if (entity.state !='unavailable'){
if (entity.state =='off'){
return variables.ulm_off;
} else if (entity.state == 'on'){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
]]]
name: "[[[ return variables.ulm_card_light_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
- padding: 6px
- background-color: 'rgba(0,0,0,0)'



Loading

0 comments on commit beb4ad7

Please sign in to comment.