Vacuum Widget

I am not opposed to that at all:) if I ever do make my way that way Ill have to message you

1 Like

I have a Xiaomi Robot Vacuum, and have it set up as a switch, and when switched β€˜on’ it starts the clean with the last settings it used (cleaning mode), and when the switch is turned β€˜off’, it returns to the charging base. No automation required, which is nice.

The automation I use for cleaning daily is based around my wife and I both having left the house;

# Leaving Home #
- id: Leaving Home
  alias: Leaving Home
  trigger:
    platform: state
    entity_id: group.family
    from: 'home'
    to: 'not_home'
    for:
      minutes: 2
  action:
    - service: switch.turn_on
      entity_id: switch.vacuum_power
    - delay: '00:00:30'
    - service: vacuum.turn_on
      entity_id: vacuum.xiaomi_vacuum_cleaner

I have a problem.
I do a switch and not working in HADashboard

Some bug?
Ha Version 0.80.3 and HaDashboard

vacuum.xiaomi_vacuum_cleaner:
widget_type: switch
title: Odkurzacz
entity: vacuum.xiaomi_vacuum_cleaner

Help Please

it seems like your vacuum entity has doesnt have some kind of switchable function.
did it work before?

Hmm is service function.
How i can use service function on HaDashboard. Can u help?

i just took a look at the home assistant component and there is no turn on and turn of service but a stop, pause and start service.

so it wont work with a hadashboard switch entity directly.

what you can do is create a template switch that triggers the stop and start services.
or an input boolean that sets of the stop and start service trough an automation.

that switch or input boolean then can be used for the dashboard.

you could also make the choice to use start and return_to_base as the 2 options in your switch or automations.

Can u help and some example? I try it

sorry, but i dont use automations or template switches in Home assistant myself. (i do everything in pyhton with appdaemon)

and maybe you should use an input_select to be able to start all actions.


and then an automation with the input_select as trigger.

examples for automations based on input select are for sure somewhere on the forum and i think there also might be 1 or more in the cookbook.

What is your the best dashboard on wall? HADashboard or is some better ?
What do u use ?

i use hadashboard for a long time now, and its my favourite way.
but i am also involved in the development from it so i guess my opinion isnt independant :wink:

there are a few things out there nowadays. and i guess they all have their advantages and disadvantages.

i think the biggest advantage from HAdashboard is that you dont need to know and learn a lot.
a few lines of yaml is all you have to use to create your first dashboards, which you then easy can make to your wish with a little CSS.

to be able to use tileboard you need to have knowledge from javascript, which isnt for everyone.

1 of the newer options in HA is lovelace. but i didnt see much of that and have no clue how its created.
so i cant tell you if its easier or more difficult to use.

i guess you should just check the options out and see what you like best.
if you know your way around in CSS (which isnt real hard to learn, and youll need it in any dashboard i think) you can do almost everythinng with a dashboard

Template switch not working too :frowning:

first you need to create a working entity in HA.
like i said input_select is probably the best way to go, and i dont know if a template switch can work.

I made a custom widget for my Xiaomi Roborock vacuum cleaner some time ago. It shows some basic information and I can start, stop, pause and return the vacuum cleaner to the dock. It’s also possible to change the fan speed, but since I have the Roborock S50, I only implemented the fan speeds available for this specific model. I can post the widget if it is of interest. vacuum_widget

seems great.
if you could make a github for it, i am sure others will find it helpfull.

I’d be also very interested in this .mi have gen1 robo

Hi, you can find the widget here: https://github.com/tjntomas/HADashboard-widgets.

Not sure if it works with gen.1 but feel free to try it out.

I have made some adjustment to this version that I will update, but its working fine. Please note that I do not use the standard grid size for the dashboards so you might need to adjust the positions of some elements if the widget looks a bit "off. Also note that the widget need to be 3x2 so:

vacuum:
  widget_type: vacuum
  entity: vacuum.xiaomi_vacuum_cleaner
  title: "Roborock downstairs"

and the layout:

layout:
  - vacuum(3x2)

This is how the slightly updated widget looks, nevermind the background image, you can set the widget background to be none transparent. I added some logic so the status says"docked" when docked and fully charged.

I followed your tutorial and copied all pics in needed foldes… anyway I can’t see them… Where do I have eyactly have to copy:

You also need to add a few mappings to the skins that you use:

vacuum_widget_style: $background_style
vacuum_title_style: $style_title

I use standard skin

thanks so far!

In your conf directory, there should be a folder named custom_css. To be able to edit the default skin, you need to create a custom skin folder named for instance β€œmyskin” in the custom_css folder. Then you need to copy the two files β€œdashboard.css” and β€œvariables.yaml” to that folder. You can find these to files here: https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css/default.

Then you need to edit the β€œvariables.yaml” file and add the two lines:

vacuum_widget_style: $background_style
vacuum_title_style: $style_title

just after the section named β€œ# Widget Default Definitions”. Then, everything should work.

This is how your folder structure should look:

conf
    custom_css
        img
           rr.png
           dock.png
           fan.png
        myskin
            dashboard.css
            variables.yaml
    custom_widgets
        basevacuum
            basevacuum.js
            basevacuum.css
            bacevacuum.html
        vacuum.yaml

To use the new β€œmyskin” in the dashboard, add ?skin=myskin to the end of the dashboard url. Your url would then look something like http://192.168.1.20:5050/name_of_dashboard?skin=myskin

@ReneTode, do you know if there is a good tutorial on how to use custom skins that @thundergreen can read apart from the docs in https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skins

Look at this … I can’t see the pics and my structure is 100% the same … th values seems to work for gen1 robot
/home/hass/appdaemon/conf/
β”œβ”€β”€ appdaemon.yaml
β”œβ”€β”€ apps
β”‚ β”œβ”€β”€ apps.yaml
β”‚ β”œβ”€β”€ apps.yaml.example
β”‚ β”œβ”€β”€ foscam.py
β”‚ β”œβ”€β”€ foscam.yaml
β”‚ β”œβ”€β”€ hello.py
β”‚ └── pycache
β”‚ β”œβ”€β”€ foscam.cpython-36.pyc
β”‚ └── hello.cpython-36.pyc
β”œβ”€β”€ compiled
β”‚ β”œβ”€β”€ css
β”‚ β”‚ β”œβ”€β”€ default
β”‚ β”‚ β”‚ β”œβ”€β”€ cam_alert_application.css
β”‚ β”‚ β”‚ β”œβ”€β”€ front_cam_application.css
β”‚ β”‚ β”‚ β”œβ”€β”€ hass_application.css
β”‚ β”‚ β”‚ β”œβ”€β”€ hello_application.css
β”‚ β”‚ β”‚ └── vacuum_application.css
β”‚ β”‚ β”œβ”€β”€ standard
β”‚ β”‚ β”‚ └── vacuum_application.css
β”‚ β”‚ └── test
β”‚ β”‚ β”œβ”€β”€ front_cam_application.css
β”‚ β”‚ β”œβ”€β”€ hass_application.css
β”‚ β”‚ └── vacuum_application.css
β”‚ β”œβ”€β”€ html
β”‚ β”‚ β”œβ”€β”€ default
β”‚ β”‚ β”‚ β”œβ”€β”€ cam_alert_body.html
β”‚ β”‚ β”‚ β”œβ”€β”€ cam_alert_head.html
β”‚ β”‚ β”‚ β”œβ”€β”€ front_cam_body.html
β”‚ β”‚ β”‚ β”œβ”€β”€ front_cam_head.html
β”‚ β”‚ β”‚ β”œβ”€β”€ hass_body.html
β”‚ β”‚ β”‚ β”œβ”€β”€ hass_head.html
β”‚ β”‚ β”‚ β”œβ”€β”€ hello_body.html
β”‚ β”‚ β”‚ β”œβ”€β”€ hello_head.html
β”‚ β”‚ β”‚ β”œβ”€β”€ vacuum_body.html
β”‚ β”‚ β”‚ └── vacuum_head.html
β”‚ β”‚ β”œβ”€β”€ standard
β”‚ β”‚ β”‚ β”œβ”€β”€ vacuum_body.html
β”‚ β”‚ β”‚ └── vacuum_head.html
β”‚ β”‚ └── test
β”‚ β”‚ β”œβ”€β”€ front_cam_body.html
β”‚ β”‚ β”œβ”€β”€ front_cam_head.html
β”‚ β”‚ β”œβ”€β”€ hass_body.html
β”‚ β”‚ β”œβ”€β”€ hass_head.html
β”‚ β”‚ β”œβ”€β”€ vacuum_body.html
β”‚ β”‚ └── vacuum_head.html
β”‚ └── javascript
β”‚ β”œβ”€β”€ application.js
β”‚ β”œβ”€β”€ default
β”‚ β”‚ β”œβ”€β”€ cam_alert_init.js
β”‚ β”‚ β”œβ”€β”€ front_cam_init.js
β”‚ β”‚ β”œβ”€β”€ hass_init.js
β”‚ β”‚ β”œβ”€β”€ hello_init.js
β”‚ β”‚ └── vacuum_init.js
β”‚ β”œβ”€β”€ standard
β”‚ β”‚ └── vacuum_init.js
β”‚ └── test
β”‚ β”œβ”€β”€ front_cam_init.js
β”‚ β”œβ”€β”€ hass_init.js
β”‚ └── vacuum_init.js
β”œβ”€β”€ custom_css
β”‚ β”œβ”€β”€ img
β”‚ β”‚ β”œβ”€β”€ dock.png
β”‚ β”‚ β”œβ”€β”€ fan.png
β”‚ β”‚ └── rr.png
β”‚ β”œβ”€β”€ influxdb-latest.js
β”‚ β”œβ”€β”€ plotly-latest.min.js
β”‚ β”œβ”€β”€ standard
β”‚ β”‚ β”œβ”€β”€ dashboard.css
β”‚ β”‚ └── variables.yaml
β”‚ └── variables.yaml
β”œβ”€β”€ custom_widgets
β”‚ β”œβ”€β”€ basegraph
β”‚ β”‚ β”œβ”€β”€ basegraph.css
β”‚ β”‚ β”œβ”€β”€ basegraph.html
β”‚ β”‚ └── basegraph.js
β”‚ β”œβ”€β”€ baseslider_vertical
β”‚ β”‚ β”œβ”€β”€ baseslider_vertical.css
β”‚ β”‚ β”œβ”€β”€ baseslider_vertical.html
β”‚ β”‚ └── baseslider_vertical.js
β”‚ β”œβ”€β”€ basevacuum
β”‚ β”‚ β”œβ”€β”€ basevacuum.css
β”‚ β”‚ β”œβ”€β”€ basevacuum.html
β”‚ β”‚ └── basevacuum.js
β”‚ β”œβ”€β”€ graph.yaml
β”‚ β”œβ”€β”€ vacuum.yaml
β”‚ └── vertical_input_slider.yaml
β”œβ”€β”€ dashboards
β”‚ β”œβ”€β”€ cam_alert.dash
β”‚ β”œβ”€β”€ front_cam.dash
β”‚ β”œβ”€β”€ Hass.dash
β”‚ β”œβ”€β”€ Hello.dash
β”‚ └── vacuum.dash
└── snapshots
└── 20181108-215518.jpg