Merge pull request #470 from ExperienceLovelace/feat/control_image_wi…

…dth_logics

Feat/control image width logics

docs/_docs/03-usage.md

@@ -44,9 +44,9 @@ image:
   cache: true
 ```
 
-For supporting multiple Floorplan images based on the current screen resolution, `image` can be set to an object that contains a list of image sizes.
+For supporting multiple Floorplan images based on the current window size, `image` can be set to an object that contains a list of image sizes.
 
-In the example below, the first image will be used if the screen width is less than 1024 pixels, and the second image will be used if the screen widths is greater than that.
+In the example below, the first image will be used if the window width is less than 1024 pixels, and the second image will be used if the window widths is greater than that.
 
 ```yaml
 image:
@@ -59,6 +59,8 @@ image:
       cache: true
 ```
 
+From v1.0.45 and onwards, Floorplan will use the [window inner width](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth) in the calculations. If you have specific needs, it's still possible to enforce the usage of [screen width](https://developer.mozilla.org/en-US/docs/Web/API/Screen/width), by setting the `use_screen_width: true` key, on the image property. Please stick to the default option, whenever possible.
+
 Floorplan can display an alternate image for mobile devices. This can be configured using the `image_mobile` setting.
 
 ```yaml

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ha-floorplan",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "Floorplan for Home Assistant",
   "homepage": "https://experiencelovelace.github.io/ha-floorplan",
   "keywords": [

src/components/floorplan/floorplan-element.ts

@@ -446,9 +446,11 @@ export class FloorplanElement extends LitElement {
       }
     } else {
       if (config.image?.sizes) {
+        // Legacy: Previously we always used screen.width. This logic are here, to support the old way of doing it.
+        const target_width = config?.image?.use_screen_width === true ? screen.width : window.innerWidth;
         config.image.sizes.sort((a, b) => b.min_width - a.min_width); // sort descending
         for (const pageSize of config.image.sizes) {
-          if (screen.width >= pageSize.min_width) {
+          if (target_width >= pageSize.min_width) {
             imageUrl = pageSize.location;
             cache = pageSize.cache === true;
             break;

src/components/floorplan/lib/floorplan-config.ts

@@ -80,6 +80,7 @@ export class FloorplanImageConfig {
   location!: string;
   cache!: boolean;
   sizes!: FloorplanImageSize[];
+  use_screen_width?: boolean;
 }
 
 export class FloorplanImageSize {