BitViper
October 8, 2019, 1:24am
1
I know its me… its always me…
In the instructions it says Install card-mod.js as a module
I cannot find anything about installing modules…
I downloaded the files from github https://github.com/thomasloven/lovelace-card-mod
created a “plugins” folder under config/www
Using Samba I moved the files from the “src” folder into the folder www/config/plugins
From the UI …I edited my config by adding the lines
resources:
- type: module
url: /local/plugins/card-mod.js?v=1
Changing the -Type from “js” in the example to module… and renaming the card-modder (as shown in the example ) to card-mod… since there was no file in the distro with that name
- entities:
- entity: switch.honeywell3
style: |
ha-card {
color: red;
}
type: entities
and the text is not changing color…
What did I do wrong
petro
October 8, 2019, 3:18am
2
If you did what you said, you did it correctly: I.E. actual location of file: www/config/plugins
resources:
- type: module
url: /local/plugins/card-mod.js?v=1
You don’t ever need to reboot with lovelace. Ever.
Your style looks correct.
So, with all that being said, did you refresh the page and cache? CTRL+F5 will do that.
Edit: This is the property I use to change the text color
style: |
ha-card { --primary-text-color: red; }
BitViper
October 8, 2019, 3:36am
3
Sometimes I hate HA…undefined for style but received "".
the quotes are from the editor… not me… without the quotes the warning is the same
BitViper
October 8, 2019, 12:17pm
5
Nope… I tried it with the Pipe too! then I close the dialog… and ten re-open and I get
petro
October 8, 2019, 2:05pm
6
You may not be able to use this card in the editor. I wouldn’t know because I don’t use the editor.
BitViper
October 8, 2019, 9:15pm
7
I think I may have the answer… does this tool require card-tools?
Because Ive not installed that… the ReadMe says that we should use “Card-Mod” because card-modder is deprecated… which does not mention the need for “Card-Tools” to be installed
petro
October 9, 2019, 2:59am
8
No thats card-modder, not to be confused with card-mod. Card-modder is old, no longer used. It’s the predecessor to card-mod.
I’m fairly sure you can’t use this inside the UI. The ui is screwing up the quotes based on the colon. The stuff inside the curly brackets is JavaScript. I don’t believe the UI can handle it. You most likely need to move to YAML mode if you want to use card-mod.
BitViper
October 9, 2019, 3:01am
9
Most likely the case… I’ll check on how to proceed in that direction…
Thanks for your insight and time
Or use raw editor. I was using it with storage mode with no problem (apart from it not doing what I wanted it to do)
petro
October 9, 2019, 3:04am
11
I’m taking a stab in the dark. I don’t use the UI, so i’m making an assumption based on what the UI is looking for.
BitViper
October 9, 2019, 9:16pm
12
Yep… I opened it all up using the Raw Editor… made my corrections… same behavior…
Think I’ll try removing it and reinstalling…
petro
October 10, 2019, 2:00am
13
can you post your raw yaml?
BitViper
October 10, 2019, 10:57pm
14
Yep…
Here’s the first View… My testing page… where Im playing around is the last view… down at the bottom.
I’m in the process of provisioning devices… so its king of a mis-mash
resources:
- type: module
#After Post Edit.... the line below was pasted in incorrectly the line
# following is the actual line
# url: /local/lovelace-card-modder/card-modder.js?v=1
url: /local/plugins/card-mod.js?v=1 # the actual line
title: WeNoGottaRancho
views:
- background: center / cover no-repeat url("/local/night.jpeg") fixed
badges: []
cards:
- entity: weather.wenogottarancho
name: Local Weather Escondido
type: weather-forecast
- entities:
- device_tracker.life360_aaron_pitts
- device_tracker.life360_shannon_roux_pitts
- device_tracker.life360_poncho
show_header_toggle: false
theme: Backend-selected
title: Who's Home
type: entities
- entity: sensor.family_room_sensor_temperature
max: 90
min: 0
name: Family Room Temp
severity:
green: 72
red: 90
yellow: 77.5
theme: Backend-selected
type: gauge
unit: deg
- entity: sensor.hallway_thermostat_temperature
max: 90
min: 0
name: East Wing
severity:
green: 72
red: 100
yellow: 77.5
theme: Backend-selected
type: gauge
unit: deg
- cards:
- aspect_ratio: 16x9
camera_view: live
entity: camera.east_patio
show_state: false
type: picture-entity
- aspect_ratio: 16x9
camera_view: live
entity: camera.west_patio
show_state: false
type: picture-entity
- aspect_ratio: 16x9
camera_view: live
entity: camera.front_door
show_state: false
type: picture-entity
type: horizontal-stack
path: default_view
title: Home
- badges: []
cards:
- aspect_ratio: 16x9
camera_view: live
entity: camera.east_patio
show_state: false
type: picture-entity
- camera_view: live
entity: camera.west_patio
type: picture-entity
- aspect_ratio: 16x9
camera_view: live
entity: camera.front_door
show_state: false
type: picture-entity
path: cctv
title: CCTV
- badges: []
cards:
- entities:
- entity: automation.auto_office_lights_on
name: Run On Automation
- entity: automation.auto_office_lights_off
name: Run Off Automation
- entity: binary_sensor.ecolink_motion_detector_sensor
- entity: sensor.ecolink_motion_detector_burglar
title: Office Lights - Automation
type: entities
- entity: switch.leviton1
hold_action:
action: toggle
icon: 'mdi:power'
icon_height: 100px
name: Office East Wall Lights
show_icon: true
show_name: true
tap_action:
action: toggle
theme: Backend-selected
type: entity-button
panel: false
path: office
title: Office
- badges: []
cards:
- cards:
- entity: climate.family_room_thermostat
type: thermostat
- entity: climate.hallway_thermostat
type: thermostat
type: horizontal-stack
- entities:
- entity: automation.family_room_thermostat_to_auto_at_2pm
- entity: automation.hallway_thermostat_to_auto_at_2pm
show_header_toggle: true
theme: Backend-selected
title: Climate Automation
type: entities
icon: ''
panel: false
path: interior-climate
theme: Backend-selected
title: Indoor Climate
- badges: []
cards:
- entities:
- entity: switch.honeywell3
- entity: switch.honeywell1
title: East Patio Lights
type: entities
- entities:
- entity: automation.auto_east_patio_lights_on
- entity: automation.auto_east_patio_lights_off
- entity: binary_sensor.ecolink_motion_detector_sensor_2
- entity: sensor.ecolink_motion_detector_burglar_2
title: East Patio Lights - Automation
type: entities
- aspect_ratio: 16x9
camera_view: live
entity: camera.east_patio
show_state: false
type: picture-entity
- entity: group.east_patio_lights
hold_action:
action: none
icon_height: 85px
name: East Patio Lights
show_icon: true
show_name: true
tap_action:
action: toggle
type: entity-button
path: east-patio
title: East Patio
- background: center / cover no-repeat url("/local/night.jpeg") fixed
badges: []
camera_view: live
cards:
- aspect_ratio: 16x9
camera_view: live
entity: camera.west_patio
show_state: false
type: picture-entity
entity: camera.front_door
icon: ''
panel: false
path: patios
title: West Patio
type: picture-entity
- badges: []
cards:
- entities:
- entity: switch.sonoff_7935
- entity: switch.sonoff_7932
- entity: switch.leviton1
- entity: switch.leviton2
- entity: switch.honeywell3
- entity: switch.honeywell1
- entity: switch.shelly_shsw_1_b9f4d3
show_header_toggle: false
title: Switches
type: entities
path: switches
title: Switches
- badges: []
cards:
- entities:
- entity: automation.announce_shannons_home
- entity: automation.announce_aarons_home
- entity: automation.announce_devins_home
- entity: automation.turn_mb_tv_on
- entity: automation.auto_office_lights_on
- entity: automation.auto_office_lights_off
- entity: script.1565966345026
- entity: script.water_timer_backyard
- entity: script.water_timer_frontyard
show_header_toggle: false
title: 'WeNoGottaRancho Automations '
type: entities
path: all-automations
title: Active Automatons & Scripts
- badges: []
cards:
- aspect_ratio: 16x9
camera_view: live
entity: camera.front_door
show_name: true
show_state: false
type: picture-entity
- entities:
- entity: sensor.family_room_sensor_temperature
- entity: binary_sensor.family_room_sensor_occupancy
- entity: binary_sensor.master_bedroom_sensor_occupancy
- entity: media_player.this_device
show_header_toggle: false
title: Just a test
type: entities
- detail: 11
entity: sensor.master_bedroom_sensor_temperature
graph: line
hours_to_show: 1
name: Master Bedroom Temp
theme: Backend-selected
type: sensor
unit: deg
- entity: switch.honeywell3
state_image:
'off': /local/DaLightOff.jpg
'on': /local/DaLight.jpg
tap_action:
action: toggle
type: picture-entity
- elements:
- entity: switch.honeywell3
state_image:
'off': /local/DaLightOff.jpg
'on': /local/DaLight.jpg
style:
border: 2px solid white
border-radius: 10%
left: 25%
top: 40%
width: 35%
tap_action:
action: toggle
title: East Light
type: image
- entity: switch.honeywell1
state_image:
'off': /local/DaLightOff.jpg
'on': /local/DaLight.jpg
style:
border: 2px solid white
border-radius: 10%
left: 65%
top: 40%
width: 35%
tap_action:
action: toggle
title: West Light
type: image
image: /local/night.jpeg
title: East Patio Lights East / West
type: picture-elements
- entities:
- entity: switch.honeywell3
style: ''
'ha-card { --primary-text-color''': 'red; }'
type: entities
path: testing
theme: Backend-selected
title: Testing
petro
October 11, 2019, 1:37am
15
well you have the wrong one installed. You need to have card-mod installed. Style: only works on card-mod. Card-modder is a completely different configuration.
BitViper
October 11, 2019, 2:15am
16
Sorry that was a mistake and a copy and paste from my earlier attempt…
Edit *****
- entities:
- entity: switch.honeywell3
style: |
ha-card { --primary-text-color: red; }
type: entities
path: testing
and the RAW editor changes it to whats below
- entities:
- entity: switch.honeywell3
style: ''
'ha-card { --primary-text-color': 'red; }'
type: entities
path: testing
And now this editor is screwing up the formatted spacing… trust me its correct
BitViper
October 11, 2019, 1:09pm
17
So I got it to work… What it took was a deletion of the files that I had installed earlier… and then a re installation.
Again thanks to all that took time to help out… on interesting thing that even in the UI editor it shows tha its having difficulty interpreting the CSS code (The yellow text at the bottom of the editor “Expected Value of Type etc…”)
petro
October 11, 2019, 4:40pm
18
Not surprised, the UI editor doesn’t handle custom cards well. I’m surprised it even works.
ashoktvm
December 27, 2019, 6:07am
19
Same error for me. But tried uninstalling, reinstalling and restarted home assistant as well. But no luck
Expected a value of type undefined for style but received "ha-card {\n color: red;\n}\n".
petro
December 27, 2019, 12:36pm
20
Do you still get the card to appear or is it a red box on the right? Because if it’s like the image above, everything will work. That is a warning not an error.
