Comments (9)
@Xitro01 i figure this out. Try using this:
type: custom:more-info-card
entity: 'vacuum.henryk'
title:
card_mod:
style:
$: |
:host {
--ha-card-border-width: 0px;
}
h1 { display: none !important; }
.: |
.card-content {
padding: 1.5em 0 0 0.7em;
}
.card-content state-card-content {
display: none;
}
more-info-content$more-info-vacuum$:
.: |
div.flex-horizontal>div, div:nth-child(2), ha-attributes {
display: none;
}
ha-select {
display: contents;
}
from hass-config.
@Xitro01 i figure this out. Try using this:
type: custom:more-info-card entity: 'vacuum.henryk' title: card_mod: style: $: | :host { --ha-card-border-width: 0px; } h1 { display: none !important; } .: | .card-content { padding: 1.5em 0 0 0.7em; } .card-content state-card-content { display: none; } more-info-content$more-info-vacuum$: .: | div.flex-horizontal>div, div:nth-child(2), ha-attributes { display: none; } ha-select { display: contents; }
That works, you are a legend. Thanks <3
from hass-config.
No problem :) @Xitro01 close this issue plis :)
from hass-config.
I've fixed this config in my project. I've also change the buttons to the selects for water volume and the suction level
This is my entire file footer_vacuum.yml
. Change entity have fun ✌
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Vacuum
timeout: 300000
style: |
--popup-max-width: calc(385px + 495px);
--primary-color: transparent; /* hide timeout progress */
card_mod:
style:
# card divider border
layout-card$grid-layout$: |
hui-vertical-stack-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* phone */
@media screen and (max-width: 800px) {
hui-vertical-stack-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 385px 495px
grid-template-rows: 1fr
grid-template-areas: |
"info map"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"info"
"map"
cards:
- type: vertical-stack
view_layout:
grid-area: info
cards:
- type: entities
title: Overview
card_mod:
class: header
style: |
.card-content {
padding: var(--tablet-popup-content-padding);
padding-bottom: 0;
}
entities:
- entity: vacuum.henryk
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions:
icon: outside
indicator: 'off'
name: outside
severity:
- color: '#303435'
from: 11
to: 999
- color: '#6d2525'
from: 0
to: 10
entity_row: true
entities:
- entity: vacuum.henryk
attribute: battery_level
name: Battery level
icon: mdi:battery
- entity: sensor.henryk_filter_left
- entity: sensor.henryk_main_brush_left
- entity: sensor.henryk_side_brush_left
- entity: sensor.henryk_sensor_dirty_left
- entity: select.henryk_water_volume
- entity: select.henryk_suction_level
- type: custom:mod-card
card_mod:
style:
# horizontal bottom buttons
hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly !important;
padding: var(--tablet-popup-button-padding);
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: vacuum.henryk
icon: mdi:play-pause
tap_action:
action: call-service
service: >
[[[
return `[[[
return entity.state === 'docked' || entity.state === 'paused'
? 'vacuum.start'
: 'vacuum.pause';
]]]`
]]]
service_data:
entity_id: vacuum.henryk
template: icon_only
- type: custom:button-card
entity: vacuum.henryk
icon: mdi:battery-charging
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.henryk
template: icon_only
- type: custom:button-card
icon: mdi:delete-empty
tap_action:
action: call-service
service: vacuum.send_command
service_data:
entity_id: vacuum.henryk
command: app_goto_target
params: [16821,23105]
template: icon_only
- type: custom:xiaomi-vacuum-map-card
title: Map
view_layout:
grid-area: map
card_mod:
class: header
style: |
ha-card {
--map-card-primary-color: #FFFFFF10;
--map-card-secondary-color: none;
--map-card-secondary-text-color: #9da0a2;
--map-card-zoomer-background: none;
--map-card-predefined-rectangle-fill-color: none;
--map-card-predefined-rectangle-line-color: none;
--map-card-predefined-rectangle-line-color-selected: rgba(255, 255, 255, 0.5);
--map-card-predefined-rectangle-fill-color-selected: rgba(42, 124, 194, 0.1);
--map-card-predefined-rectangle-icon-background-color-selected: rgb(42, 124, 194);
--map-card-internal-big-radius: 0.6em !important;
}
div.controls-wrapper {
display: none !important;
}
div.map-wrapper, div.controls-wrapper {
padding: var(--tablet-popup-content-padding);
padding-top: 0;
padding-bottom: 0;
letter-spacing: normal;
}
div.tiles-wrapper, div.vacuum-controls, #map-zoomer-overlay {
display: none;
}
div.map-controls-wrapper {
padding-top: 24px;
}
paper-button {
--mdc-icon-size: 2em;
color: #9da0a2 !important;
padding: 0.42em;
}
language: en
entity: vacuum.henryk
map_source:
camera: camera.henryk_map
calibration_source:
camera: true
map_locked: true
map_modes:
- template: vacuum_clean_zone
- template: vacuum_clean_zone_predefined
predefined_selections:
- zones: [[14895, 20640, 18409, 24058]]
icon:
name: mdi:silverware-fork-knife
x: 16708
y: 22291
- zones: [[15208, 17278, 20204, 20980]]
icon:
name: mdi:bed
x: 17706
y: 19043
- zones: [[18170, 20925, 23138, 25026]]
icon:
name: mdi:door
x: 22293
y: 21864
- zones: [[21474, 24942, 27269, 28873]]
icon:
name: mdi:sofa
x: 24401
y: 26736
- zones: [[17687, 24885, 21487, 28816]]
icon:
name: mdi:speaker
x: 19757
y: 26622
- template: vacuum_goto
- template: vacuum_follow_path
from hass-config.
I've fixed this config in my project. I've also change the buttons to the selects for water volume and the suction level This is my entire file
footer_vacuum.yml
. Change entity have fun ✌
Thanks for your response! Looks good, but I don't have the select entities. I have a Roborock S55.
Any ideas how to create these?
Thanks!
from hass-config.
@Xitro01 what type of sensors do your vacuum have?
from hass-config.
@Xitro01 what type of sensors do your vacuum have?
Besides this some reset (filter e.g.) buttons.
from hass-config.
@Xitro01 I cannot see that u have controll over the suction level, so just delete this 2 entries:
- entity: select.henryk_water_volume
- entity: select.henryk_suction_level
from hass-config.
@Xitro01 I cannot see that u have controll over the suction level, so just delete this 2 entries:
- entity: select.henryk_water_volume - entity: select.henryk_suction_level
I actually do, but I need the "more-info-card" for it. Therefore the whack-a-moling is needed, so hopefully @matt8707 can help out with the CSS.
from hass-config.
Related Issues (20)
- Restarting after update to yaml HOT 2
- Wallpanel Full Screen HOT 2
- 2023.7 workaround HOT 2
- Alarm Card HOT 1
- Can't edit the dashboard cards. HOT 4
- Popup is transparent on iPad HOT 1
- Why does a broken icon appear when I toggle a button? HOT 1
- Manually copy over these files from matt8707/hass-config HOT 1
- Missing blur overlay on media, button card with chrome browser
- Showing Camera in Sidebar? HOT 4
- Missing Background (just had it on Chrome)
- Custom element doesn't exist: grid-layout. HOT 1
- Youtube watching sensor not working anymore
- Dashboard Home Assistant
- how to use LG WebOs on media slider
- No Background Image
- wrong post sry
- More animated icons?
- Custom UI
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hass-config.