I would also like a little more clarification or examples of the add-ons if possible. I’ve seen some really cool pics in this thread maybe one you could share your code?
aparently the event data from your app floods the sql database and is too big 
2020-02-18 20:56:56 ERROR (Recorder) [homeassistant.components.recorder.util] Error executing query: (MySQLdb._exceptions.DataError) (1406, “Data too long for column ‘event_data’ at row 1”)
don’t wanna paste the whole event data here but apparently it send stuff to it? is this mandatory for your app?
I think this has nothing to do with my theme. My theme doesn’t send any data to HA db.
I will try to write an example tomorrow for you.
thank you sir
Great theme, better development. Still playing around with it but super easy to work with. Thanks for sharing this.
4 Likes
dang dude. any chance you could share a piece of code? How you added the addons?
sure. The locks page is a room addon (you can’t see it in the first picture but its a room button at the bottom). I didn’t want to get rid of the camera page because I use that too so I put it as a room addon.
so in dwains-theme/config folder, my rooms.yaml has the following:
- name: Locks
icon: mdi:door-closed-lock
addons:
- name: Locks
icon: mdi:door-closed-lock
path: /dwains-theme/addons/rooms/hello-room/locks.yaml
then in that path immediately above, I have this as my locks.yaml file:
- type: custom:layout-card
layout: horizontal
min_columns: 2
max_columns: 2
cards:
- type: custom:button-card
entity: lock.front_door
icon: mdi:lock
name: Front Door
show_name: true
show_icon: true
show_state: true
show_label: false
show_last_changed: true
tap_action:
action: more-info
double_tap_action:
action: toggle
styles:
grid:
- grid-template-areas: '"i n""i s""i l"'
- grid-template-columns: 30% 70%
- grid-template-rows: min-content
card:
- border: solid 1px rgba(28,28,28,0.3)
- border-radius: 15px
- background-color: rgba(28, 28, 28 ,0.0)
- box-shadow: >
[[[ if (states['lock.front_door'].state == 'locked')
return 'inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7)';
else
return '-4px -4px 4px 0 rgba(77, 77, 77,.5),4px 4px 4px 0 rgba(0,0,0,.3)';
]]]
- margin-bottom: 0px
- padding-top: 14px
- padding-bottom: 14px
icon:
- width: 55%
img_cell:
- width: 45px
- height: 45px
- border-radius: 100%
name:
- color: var(--dwains-theme-names)
- justify-self: start
- font-size: 15px
- align-self: center
state:
- justify-self: start
- align-self: left
- font-size: 13px
- color: var(--dwains-theme-grey)
label:
- justify-self: start
- align-self: left
- font-size: 12px
- color: var(--dwains-theme-grey)
state:
- value: 'locked'
color: green
icon: mdi:lock-outline
- value: 'unlocked'
color: red
icon: mdi:lock-open-variant-outline
That block of code under -type: custom:button-card repeats itself for each lock (just changing the entity, name, and entity reference in that box shadow template). Everything under styles and state is there to match the css modifications and isn’t needed for the addon itself to work.
The other addon is the one that shows the statistics and components. It is a page addon. Going back to dwains-theme/config folder, I have a more_page.yaml file that has:
more_page:
addons:
- name: Statistics
icon: fas:chart-area
path: 'dwains-theme/addons/more_page/statistics/page.yaml'
then in the path above, I have this as my page.yaml file:
- type: custom:layout-card
layout: horizontal
min_columns: 2
max_columns: 2
cards:
- type: custom:mini-graph-card
entities:
- sensor.fast_com_download
icon: mdi:signal-variant
name: Internet Speed
animate: true
color_thresholds:
- color: '#0aaf31'
value: 50
- color: '#ffee00'
value: 35
- color: '#e01a1a'
value: 0
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: true
fill: fade
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
- type: custom:mini-graph-card
entities:
- sensor.glances_cpu_temp
icon: mdi:thermometer
name: Temperature
animate: true
color_thresholds:
- color: '#e01a1a'
value: 135
- color: '#ffee00'
value: 110
- color: '#0aaf31'
value: 0
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: true
fill: fade
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
- type: custom:mini-graph-card
entities:
- sensor.glances_cpu_used
name: CPU
animate: true
color_thresholds:
- color: '#e01a1a'
value: 55
- color: '#ffee00'
value: 40
- color: '#0aaf31'
value: 0
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: true
fill: fade
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
- type: custom:mini-graph-card
entities:
- sensor.glances_ram_used_percent
name: Memory
animate: true
color_thresholds:
- color: '#e01a1a'
value: 50
- color: '#ffee00'
value: 30
- color: '#0aaf31'
value: 0
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: true
fill: fade
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
- type: custom:mini-graph-card
entities:
- sensor.glances_disk_used_percent
name: SSD
animate: true
color_thresholds:
- color: '#e01a1a'
value: 40
- color: '#ffee00'
value: 20
- color: '#0aaf31'
value: 0
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: true
fill: fade
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
- type: custom:mini-graph-card
entities:
- sensor.hx711_value
icon: mdi:scale
name: HX711 Weight Sensor
animate: true
# color_thresholds:
# - color: '#0aaf31'
# value: 50
# - color: '#ffee00'
# value: 35
# - color: '#e01a1a'
# value: 0
font_size: 75
hours_to_show: 48
line_width: 1
show:
extrema: true
fill: fade
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
- type: glance
title: Components
columns: 3
style: |
ha-card {
padding: 6px 16px 0px 16px;
border: solid 1px rgba(28,28,28,0.3);
border-radius: 10px;
background-color: rgba(28, 28, 28 ,0.0);
box-shadow: inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
}
entities:
- entity: sensor.count_automations
icon: 'mdi:autorenew'
name: Automations
- entity: sensor.count_sensors
icon: 'mdi:resistor'
name: Sensors
- entity: sensor.count_binary_sensors
icon: 'mdi:unfold-more-horizontal'
name: Binary Sensors
- entity: sensor.count_lights
icon: 'mdi:lightbulb'
name: Lights
- entity: sensor.count_locks
icon: 'mdi:lock'
name: Locks
- entity: sensor.count_switches
icon: 'mdi:light-switch'
name: Switches
- entity: sensor.count_scripts
icon: 'mdi:script-text-outline'
name: Scripts
- entity: sensor.count_zones
icon: 'mdi:map-marker-radius'
name: Zones
- entity: sensor.count_device_trackers
icon: 'mdi:map-marker'
name: Device Trackers
- entity: sensor.count_input_booleans
icon: 'mdi:toggle-switch'
name: Input Booleans
- entity: sensor.count_input_numbers
icon: 'mdi:numeric'
name: Input Numbers
- entity: sensor.count_input_texts
icon: 'mdi:alphabetical'
name: Input Texts
- entity: sensor.count_input_selects
icon: 'mdi:view-list'
name: Input Select
- entity: sensor.count_input_datetimes
icon: 'mdi:calendar-clock'
name: Input Date Times
- entity: sensor.glances_containers_active
icon: 'mdi:docker'
name: Docker Containers
A good bit of mine is styling for the css/look and feel of the theme itself. But you could probably add any combo of lovelace cards however you wanted them to appear via these addons.
Hopefully that helps some.
11 Likes
Ah, your awesome dude…thank you!!! I follow how it works now
Awesome! 
I’ve already seen that with embed images in themes, error msg dumps base64 of the inline stored pictures in theme.
I still don’t understand why HA try to save that as i only activate few sensors in recorder.
Okay, but my theme has zero images. It’s image free 
The only image that is loading is the one for the persons avatar and that is a img not an inline image.
Hi @dwains, thanks for taking time out to reply to me
I followed your instructions to the letter, however the error persists 
I have no idea what to do. “card-mod” in HACS is what I should be installing, right?
edit
I was on HACS 0.21.1. I just upgraded to HACS 0.21.5 and followed your instructions a second time and the error was resolved! Thank you!
1 Like
How much have you change in code to get that box style in a room?
1 Like
No problem, glad it is working now 
1 Like
some of my pages, easy to customize using the addons (I basically just copied most of my existing views into these addon files).
and yes i am a dark mode fan
4 Likes
I’m getting the same SQL errors as mentioned before (I use an external MySQL server for HA logging):
Error executing query: (MySQLdb._exceptions.DataError) (1406, "Data too long for column 'event_data' at row 1")
[SQL: INSERT INTO events (event_type, event_data, origin, time_fired, created, context_id, context_user_id) VALUES (%s, %s, %s, %s, %s, %s, %s)]
[parameters: ('themes_updated', '{"themes": {"dwains-theme-dark": {"primary-font-family": "Open Sans", "dwains-theme-background": "#1c1c1e", "dwains-theme-primary": "#262628", "dwain ... (87079 characters truncated) ... "#353840", "text-primary-color": "var(--primary-text-color)", "toggle-button-color": "var(--primary-color)"}}, "default_theme": "dwains-theme-dark"}', 'LOCAL', datetime.datetime(2020, 2, 19, 11, 55, 5, 25881, tzinfo=<UTC>), datetime.datetime(2020, 2, 19, 11, 55, 5, 151845), '148bb5cb38fa4cd39214bb9bcf8150a2', None)]
(Background on this error at: http://sqlalche.me/e/9h9h)
It seems to be related to the theme?
[edit] never mind, even though ‘dwains theme’ is mentioned in the error log, the issue was caused by a different (iOS) theme with a BASE64 encoded background image
1 Like
from a maintenance perspective, more than I probably should have. It is basically the card styles on any of the pages you use/want to change. I’ve updated the theme a couple times successfully with the changes so you just need to track where and what you’ve changed. In addition to the addons, my changes are to:
dwains-theme/views/main/rooms/room.yaml
dwains-theme/views/partials/header.yaml
dwains-theme/views/main/01.homepage.yaml
dwains-theme/plugins/button-cards-templates/rooms/room/light.yaml
dwains-theme/plugins/button-cards-templates/rooms/room/media_player.yaml
dwains-theme/plugins/button-cards-templates/rooms/room/room.yaml
dwains-theme/plugins/button-cards-templates/room/child.yaml
1 Like
You can probably also do this just in the theme stylesheet (/themes/dwains-theme-dark.yaml for example). Or copy the theme file there, make a new one and set as your primary theme. But i’m not sure, I didn’t tested it.
Thanks. I’ll try that out later today and post here if it works. I’m hesitant to recommend doing it like I did because I messed up a few times before getting it right. And a mess up prevents theme from loading.
2 Likes