If you set the background option to false, the text shadow should not be visible. I could probably add a separate option to disable this if necessary.
I’ll probably add support for custom updater soon.
1 Like
Released version 2.0. See changelog for (possible breaking) changes.
If something is not working properly, please create an issue in the github repository.
1 Like
HA! Works nice!
Thank you Benct!
1 Like
how can i change the color of buttons and text?
I will likely add some support for custom styles in the future, but for now you have to either change your theme colors or use @thomasloven’s card modding tools (card-mod or lovelace-card-modder).
Using v2.2 but get the same issue on both iphone and android.
Home Assistant Version 0.100.3
When adding xiaomi-vacuum-card
I see an error in the log
/community_plugin/lovelace-xiaomi-vacuum-card/xiaomi-vacuum-card.js:238:50 TypeError: this.stateObj is null
What could be the problem?
There was a small issue in the code that I just fixed. Update to the latest version and try again.
Thanks for reporting the problem 
Maybe I’m doing something wrong.
Updated the script, restarted the server. But I get the same error
/community_plugin/lovelace-xiaomi-vacuum-card/xiaomi-vacuum-card.js:238:50 TypeError: this.stateObj is null
Compare the script on your server and on github both identical and updated.
The old version must still be in your cache somehow, as there is no longer any this.stateObj on line 238.
Try clearing your browser’s cache and refresh your HA interface?
My mistake.
There are no errors after updating.
Thank you
1 Like
Trying to add the card to my config but no luck.
Added the JS file to the /www/ directory. Also added the .png file to the /www/img/directory.
Updated my lovelace config using the raw text editor, that looks like this:
resources:
- type: module
url: /local/slider-entity-row.js - type: module
url: /local/xiaomi-vacuum-card.js
title: Home Dashboard
views: etc etc etc.
Restarted the home assistant container, cleared cache in Chrome, but when I try adding a manual card it tells me;
No card type found
- type: ‘custom:xiaomi-vacuum-card’
entity: vacuum.xiaomi_vacuum_cleaner
What am I doing wrong here? Any clue?
try
type: ‘custom:xiaomi-vacuum-card’
entity: vacuum.xiaomi_vacuum_cleaner
(without the -)
1 Like
Thanks for the card. I have been using it for a while and previously modded the card so that the font & icon colours were different, along with showing the cleaned stats on the right instead of the bush sensors. Unfortunately I had to reinstall and I lost what I changed, now can’t remember what was done!
Can anyone help?
If anyone is interested, but, mostly for future me. This is how I changed it, I am not sure if this is the best way… However, it worked.
I edited xiaomi-vacuum-card.js that was inside the archive xiaomi-vacuum-card.js.gz. For some reason, you need to edit the one hidden in the archive and not the extracted one 
To change the text colour from white to black, I made these changes, around line 281:
this.style = {
text: `color: ${config.image !== false ? 'black; text-shadow: 0 0 0px black;' : 'var(--primary-text-color);'}`,
content: `padding: ${config.showButtons ? '16px 16px 4px' : '16px'};`,
background: config.image !== false ? `background-image: url('${config.image || vendor.image || '/local/img/vacuum.png'}')` : ''
};
To change the output items, it was a little more changing, but here is what I changed:
For what is called / listed in the card, is around line 67:
render() {
return html`
<ha-card .hass="${this._hass}" .config="${this._config}" class="background" style="${this.style.background}">
${this.state.name ?
html`<div class="title" style="${this.style.text}" @click="${() => this.fireEvent('hass-more-info')}">${this.state.name}</div>`
: null}
${this.state.showLabels ? html`
<div class="content grid" style="${this.style.content + this.style.text}" @click="${() => this.fireEvent('hass-more-info')}">
<div class="grid-content grid-left">
<div>${this.getValue('status')}</div>
<div>${this.getValue('battery', ' %')}</div>
<div>${this.getValue('mode')}</div>
</div>
${this.state.showDetails ? html`
<div class="grid-content grid-right" >
<div>${this.getValue('cleaning_count')}</div>
<div>${this.getValue('total_cleaned_area', ' m²')}</div>
<div>${this.computeValue('total_cleaning_time')}</div>
</div>` : null}
</div>` : null}
${this.state.showButtons ? html`
<div class="flex" style="${this.style.text}">
${Object.keys(this.state.buttons).map(this.renderButton.bind(this))}
</div>` : null}
</ha-card>`;
Replaced some of the ‘computeValue’ with ‘getValue’ as they don’t need to make any calculations to just read the count, area, etc.
The labels & items returned from around line 139:
setConfig(config) {
const labels = {
status: 'Status',
battery: 'Battery',
mode: 'Mode',
main_brush: 'Main Brush',
side_brush: 'Side Brush',
filter: 'Filter',
sensor: 'Sensor',
total_cleaning_time: 'Time',
total_cleaned_area: 'Area',
cleaning_count: 'Cleanups',
hours: 'h',
minutes: 'mins',
};
const attributes = {
status: 'status',
battery: 'battery_level',
mode: 'fan_speed',
main_brush: 'main_brush_left',
side_brush: 'side_brush_left',
filter: 'filter_left',
sensor: 'sensor_dirty_left',
cleaning_count: 'cleaning_count',
total_cleaned_area: 'total_cleaned_area',
total_cleaning_time: 'total_cleaning_time',
};
Hi, is it possible to clear sensor counter in the vacuum card ?
@benct the card is not 0.106.2 compatible, im getting an error in lovelace after upgrading from 0.105.3: Cannot add property service, object is not extensible
Same here… is there an alternative out there?
Error seems to be related to the old way the lovelace ui handled loading of resources, I removed the vacuum resources manually from the ui editor, then reimstalled through HACS. restarted HA and it’s working again. It’s a lovelace related bug not the card