yravoul
December 4, 2022, 4:49pm
62
Paperless-NG is running in docker, I got the information via the official REST-API:
The REST API — Paperless-ng 1.5.0 documentation
- scan_interval: 60
resource: <ip:port>/api/tags/?format=json&name__iexact=Posteingang
username: xxx
password: xxx
authentication: basic
sensor:
- name: paperless_inbox
value_template: "{{value_json['results'][0].document_count}}"
1 Like
thorschtn
(Thorsten)
December 11, 2022, 7:35pm
63
@pedolsky
Pollen and Garbage are custom:button-cards. The fuel prices are normal sensor cards and the table is a custom:flex-table-card.
Here’s the garbage as an example:
type: custom:button-card
entity: sensor.waste_gelbe_sacke
layout: icon_name_state2nd
styles:
card:
- font-size: 10px
name:
- font-weight: bold
- font-size: 13px
- padding-right: 13px
label:
- padding-right: 13px
- font-size: 11px
show_label: true
label: |
[[[
var days_to = entity.state.split("|")[1]
if (days_to == 0)
{ return "Heute" }
else if (days_to == 1)
{ return "Morgen" }
else
{ return "in " + days_to + " Tagen" }
]]]
show_name: true
name: Gelbe Säcke
state:
- color: '#FDD835'
operator: template
value: '[[[ return entity.state.split("|")[0] == "Gelbe Säcke" ]]]'
icon: mdi:recycle
I am trying really hard to fit as much stuff in as much little space as possible… these are a few of my dashboard views:
Main Dashboard - Home View:
Main Dashboard - Office View:
Main Dashboard - Kids Bedroom View:
When on mobile the 3 columns are stacked so there is a bit of scrolling but most controls are towards the top anyway to avoid having to scroll too much on mobile.
For mobile navigation, I have a hidden menu that has all the views of the dashboard shown as buttons so I can easily switch between views without having to use the silly icons up top (try scrolling them sideways to get to a room… ugh!). If you look at a room dashboard, the home icon takes you to the home screen of that dashboard (I have 4 dashboards with many views… 50 or so) and the icon right next to it takes you to the mobile friendly ‘menu’
Mobile friendly menu (not for desktop really, but it obviously works):
This ‘menu’ mimics the views shown on the top bar, and the navigation buttons on the main dashboard screen (top left).
Screenshots on my mobile of the same views:
Main Dashboard - Home View:
Main Dashboard - Office View:
Hidden Mobile Menu Subview:
4 Likes
lvstb
January 18, 2023, 4:45pm
65
As a complete newbie I’m really loving the @benm7 setup.
Mind to share your complete config for this?
Would be greatly appreciated
efaden
(Eric Faden)
May 14, 2023, 5:55pm
66
Can you post your code? Trying to do something submit
@efaden What part would you like? Sharing it all may not be feasible and hard to extrapolate what you want anyway.
tmen79
(tmen79)
July 8, 2023, 2:12pm
68
Nothing fancy, still working on IT.
(upload://1CXIdTgiCNGweWYtZvLDEwWC9lE.jpeg)
1 Like
What card did you use as room card? Would you please share the code?
berkans
(Berkan Sezer)
August 2, 2023, 7:27pm
70
Here is mine. One single page design with 20 pages accessible via browser mode.
4 Likes
cob94440
(chris)
August 3, 2023, 8:11am
71
I followed your setup. Have you updated it on your github?
cob94440
(chris)
August 3, 2023, 3:33pm
73
I setup mine using your five parts guide.
And you’re made some great upgrades as i Can see on those pics. Si si your github updated with thos updated?
Thanks again
berkans
(Berkan Sezer)
August 3, 2023, 3:35pm
74
Wow. Would you mind sharing some pictures from your dashboard ? I am curious about it.
berkans
(Berkan Sezer)
August 3, 2023, 8:22pm
76
Well done mate. These look wonderful. I loved them. Especially I liked the way you used the music icon.
I haven’t updated my github yet, maybe I will do it later. I will keep you posted as soon as update.
Thank you very much.
2 Likes
cob94440
(chris)
August 3, 2023, 8:41pm
77
Thanks to you. Great inspiration
1 Like
yravoul
August 21, 2023, 10:49am
78
Sure, here you go:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: grid-layout
layout:
grid-template-columns: 36% auto 8% 8% 8% 12% 12% 14%
margin: 0
cards:
- color: teal
type: tile
entity: sensor.dect440_arbeitszimmer_temperature
icon: mdi:desk-lamp
name: Arbeitszimmer
icon_tap_action:
action: more-info
card_mod:
style: |
ha-card {box-shadow: none !important; padding-top: 8}
- type: button
icon: none
card_mod:
style: |
ha-card {box-shadow: none !important}
- type: button
icon: mdi:monitor
entity: light.arbeitszimmer_monitor_rgb
show_name: false
icon_height: 24px
card_mod:
style: |
ha-card {box-shadow: none !important}
- type: button
card_mod:
style: |
ha-card {box-shadow: none !important}
icon: mdi:white-balance-sunny
show_name: false
icon_height: 24px
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.arbeitszimmer_arbeiten
- type: button
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.arbeitszimmer_warm
entity: light.bucherregal
icon: mdi:lightbulb
hold_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.arbeitszimmer_aus
card_mod:
style: |
ha-card {box-shadow: none !important}
show_name: false
icon_height: 24px
- type: button
entity: sensor.dect440_arbeitszimmer_humidity
icon_height: 18px
show_state: true
show_name: false
card_mod:
style: |
ha-card {box-shadow: none !important;
--paper-item-icon-color:
{% if ((states.sensor.dect440_arbeitszimmer_humidity.state | int) > 70) %}
#C70039
{% elif ((states.sensor.dect440_arbeitszimmer_humidity.state | int) > 60) %}
#FFC300
{% else %}
#83949f
{% endif %} ;
}
span {font-size: .7em !important; margin: 5px 0 0 0 !important;
padding: 0 !important }
- type: button
entity: sensor.arbeitszimmer_air_quality
icon_height: 18px
show_state: true
show_name: false
card_mod:
style: |
ha-card {box-shadow: none !important;
--paper-item-icon-color:
{% if ((states.sensor.arbeitszimmer_air_quality.state | int) > 250) %}
#C70039
{% elif ((states.sensor.arbeitszimmer_air_quality.state | int) > 150) %}
#FFC300
{% else %}
#83949f
{% endif %} ;
}
span {font-size: .7em !important; margin: 5px 0 0 0 !important;
padding: 0 !important }
- type: custom:flex-horseshoe-card
card_mod:
style: |
ha-card {box-shadow: none !important; padding-top: 7px !important}
entities:
- entity: sensor.dect200_arbeitszimmer_power_consumption
name: W
unit: ' '
decimals: 0
show:
horseshoe_style: colorstopgradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 5em;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-size: 3.5em;
horseshoe_scale:
min: 0
max: 350
width: 20
horseshoe_state:
width: 20
color_stops:
'100': '#009688'
'125': '#009688'
'175': '#FFC300'
'225': '#FF5733'
'250': '#C70039'
'300': '#900C3F'
Hi yravoul,
I love your dashboard colors and layout. But I’m struggling to get your Arbeitszimmer layout in my dashboard working. The code above, does it really match to your very first screen shot?
I have problems to get the temperature color to teal and there is still a vertical gap between the word “Arbeitszimmer” and the row starting with the temperature. Can you share your code again?
Bazk
(BazK)
November 24, 2023, 3:44pm
81
Hi @hiddevanbrussel , love the Google Weather Frog card, how did you achieve this?