Comments (9)
OskarLebuda
commented on July 19, 2024
1
@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
commented on July 19, 2024
1
@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.
OskarLebuda
commented on July 19, 2024
1
No problem :) @Xitro01 close this issue plis :)
from hass-config.
OskarLebuda
commented on July 19, 2024
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.
Xitro01
commented on July 19, 2024
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.
OskarLebuda
commented on July 19, 2024
@Xitro01 what type of sensors do your vacuum have?
from hass-config.
Xitro01
commented on July 19, 2024
@Xitro01 what type of sensors do your vacuum have?
Besides this some reset (filter e.g.) buttons.
from hass-config.
OskarLebuda
commented on July 19, 2024
@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_levelfrom hass-config.
Xitro01
commented on July 19, 2024
@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)
- template yaml HOT 1
- There are adjustments about the button card lock HOT 3
- 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
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.