diff --git a/README.md b/README.md index da666a8..5af91b2 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,8 @@ min_height: 0 | currently_cleaned_zone_opacity | number | 0.5 | Opacity of the currently cleaned zones | no_go_area_color | string | '--valetudo-no-go-area-color', '--accent-color' | No go area color | no_go_area_opacity | number | 0.5 | Opacity of the no go areas +| no_mop_area_color | string | '--valetudo-no-mop-area-color', '--secondary-text-color' | No mop area color +| no_mop_area_opacity | number | 0.5 | Opacity of the no mop areas | virtual_wall_color | string | '--valetudo-virtual-wall-color', '--accent-color' | Virtual wall color | virtual_wall_opacity | number | 1 | Virtual wall opacity | virtual_wall_width | number | 1 | Virtual wall line width @@ -80,10 +82,12 @@ min_height: 0 | show_walls | boolean | true | Draw walls on the map | show_currently_cleaned_zones | boolean | true | Show zones selected for zoned cleanup on the map | show_no_go_areas | boolean | true | Draw no go areas on the map +| show_no_mop_areas | boolean | true | Draw no mop areas on the map | show_virtual_walls | boolean | true | Draw virtual walls on the map | show_path | boolean | true | Draw the path the vacuum took | show_currently_cleaned_zones_border | boolean | true | Draw a border around the currently cleaned zones | show_no_go_border | boolean | true | Draw a border around no go areas +| show_no_mop_border | boolean | true | Draw a border around no mop areas | show_predicted_path | boolean | true | Draw the predicted path for the vacuum | show_goto_target | boolean | true | Draw the go to target | show_segments | boolean | true | Draw the floor segments on the map diff --git a/valetudo-map-card.js b/valetudo-map-card.js index e4b5dcc..3256fc4 100644 --- a/valetudo-map-card.js +++ b/valetudo-map-card.js @@ -173,8 +173,12 @@ class ValetudoMapCard extends HTMLElement { getNoGoAreas(attributes) { return this.getEntities(attributes, 'no_go_area'); }; + + getNoMopAreas(attributes) { + return this.getEntities(attributes, 'no_mop_area'); + }; - drawMap(mapContainer, attributes, mapHeight, mapWidth, boundingBox, floorColor, wallColor, currentlyCleanedZoneColor, noGoAreaColor, virtualWallColor, pathColor, chargerColor, vacuumColor, gotoTargetColor) { + drawMap(mapContainer, attributes, mapHeight, mapWidth, boundingBox, floorColor, wallColor, currentlyCleanedZoneColor, noGoAreaColor, noMopAreaColor, virtualWallColor, pathColor, chargerColor, vacuumColor, gotoTargetColor) { // Points to pixels let pixelSize = 50; pixelSize = attributes.pixelSize; @@ -396,6 +400,39 @@ class ValetudoMapCard extends HTMLElement { } mapCtx.globalAlpha = 1.0; } + + let noMopAreas = this.getNoMopAreas(attributes); + if (noMopAreas && this._config.show_no_mop_areas) { + mapCtx.strokeStyle = noMopAreaColor; + mapCtx.lineWidth = 2; + mapCtx.fillStyle = noMopAreaColor; + for (let item of noMopAreas) { + mapCtx.globalAlpha = this._config.no_mop_area_opacity; + mapCtx.beginPath(); + let points = item['points']; + for (let i = 0; i < points.length; i+=2) { + let x = Math.floor(points[i] / widthScale) - objectLeftOffset - mapLeftOffset; + let y = Math.floor(points[i + 1] / heightScale) - objectTopOffset - mapTopOffset; + if (i === 0) { + mapCtx.moveTo(x, y); + } else { + mapCtx.lineTo(x, y); + } + if (this.isOutsideBounds(x, y, drawnMapCanvas, this._config)) { + // noinspection UnnecessaryContinueJS + continue; + } + } + mapCtx.fill(); + + if (this._config.show_no_mop_area_border) { + mapCtx.closePath(); + mapCtx.globalAlpha = 1.0; + mapCtx.stroke(); + } + } + mapCtx.globalAlpha = 1.0; + } let virtualWallPoints = this.getVirtualWallPoints(attributes); if (virtualWallPoints && this._config.show_virtual_walls && this._config.virtual_wall_width > 0) { @@ -496,10 +533,12 @@ class ValetudoMapCard extends HTMLElement { if (this._config.show_walls === undefined) this._config.show_walls = true; if (this._config.show_currently_cleaned_zones === undefined) this._config.show_currently_cleaned_zones = true; if (this._config.show_no_go_areas === undefined) this._config.show_no_go_areas = true; + if (this._config.show_no_mop_areas === undefined) this._config.show_no_mop_areas = true; if (this._config.show_virtual_walls === undefined) this._config.show_virtual_walls = true; if (this._config.show_path === undefined) this._config.show_path = true; if (this._config.show_currently_cleaned_zones_border === undefined) this._config.show_currently_cleaned_zones_border = true; if (this._config.show_no_go_area_border === undefined) this._config.show_no_go_area_border = true; + if (this._config.show_no_mop_area_border === undefined) this._config.show_no_mop_area_border = true; if (this._config.show_predicted_path === undefined) this._config.show_predicted_path = true; if (this._config.show_goto_target === undefined) this._config.show_goto_target = true; if (this._config.show_segments === undefined) this._config.show_segments = true; @@ -530,6 +569,7 @@ class ValetudoMapCard extends HTMLElement { if (this._config.wall_opacity === undefined) this._config.wall_opacity = 1; if (this._config.currently_cleaned_zone_opacity === undefined) this._config.currently_cleaned_zone_opacity = 0.5; if (this._config.no_go_area_opacity === undefined) this._config.no_go_area_opacity = 0.5; + if (this._config.no_mop_area_opacity === undefined) this._config.no_mop_area_opacity = 0.5; if (this._config.virtual_wall_opacity === undefined) this._config.virtual_wall_opacity = 1; if (this._config.path_opacity === undefined) this._config.path_opacity = 1; @@ -760,6 +800,7 @@ class ValetudoMapCard extends HTMLElement { const wallColor = this.calculateColor(homeAssistant, this._config.wall_color, '--valetudo-map-wall-color', '--accent-color'); const currentlyCleanedZoneColor = this.calculateColor(homeAssistant, this._config.currently_cleaned_zone_color, '--valetudo-currently_cleaned_zone_color', '--secondary-text-color'); const noGoAreaColor = this.calculateColor(homeAssistant, this._config.no_go_area_color, '--valetudo-no-go-area-color', '--accent-color'); + const noMopAreaColor = this.calculateColor(homeAssistant, this._config.no_mop_area_color, '--valetudo-no-mop-area-color', '--secondary-text-color'); const virtualWallColor = this.calculateColor(homeAssistant, this._config.virtual_wall_color, '--valetudo-virtual-wall-color', '--accent-color'); const pathColor = this.calculateColor(homeAssistant, this._config.path_color, '--valetudo-map-path-color', '--primary-text-color'); const chargerColor = this.calculateColor(homeAssistant, this._config.dock_color, 'green'); @@ -770,7 +811,7 @@ class ValetudoMapCard extends HTMLElement { // Start drawing map this.drawingMap = true; - this.drawMap(this.mapContainer, attributes, mapHeight, mapWidth, boundingBox, floorColor, wallColor, currentlyCleanedZoneColor, noGoAreaColor, virtualWallColor, pathColor, chargerColor, vacuumColor, gotoTargetColor); + this.drawMap(this.mapContainer, attributes, mapHeight, mapWidth, boundingBox, floorColor, wallColor, currentlyCleanedZoneColor, noGoAreaColor, noMopAreaColor, virtualWallColor, pathColor, chargerColor, vacuumColor, gotoTargetColor); this.drawingMap = false; }