Merge pull request #43 from exetico/master

HACS support: Build lovelace-floorplan as standalone file, support long_click, adding a few more logics and... many other things. Let's get this thing HACS'ed.
ExperienceLovelace · Nov 24, 2020 · bfe7e95 · bfe7e95
2 parents 40d8897 + 7dc6f79
commit bfe7e95
Show file tree

Hide file tree

Showing 24 changed files with 20,005 additions and 2,795 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+
+  "env": {
+    "es6": true
+  },
+  "plugins": ["@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -2,42 +2,44 @@
 
 Floorplan for Lovelace is here!
 
-## Quick Start
+## Installation
 
-### 1) Installation
+### HACS
+**Just add the URI to [HACS](https://hacs.xyz/)'s as custom repository.**
 
-To get started, copy the following files to the `www/floorplan` folder of your Home Assistant installation (right-click on each file to save directly to disk):
+In the procress, kindly note down the location of the files. Normally you'll find them in the community/lovelace-floorplan-directory.
 
-- [floorplan-card.js](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/floorplan-card.js)
-- [lib/floorplan.js](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/lib/floorplan.js)
-- [lib/yaml.min.js](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/lib/yaml.min.js)
-- [lib/jquery-3.4.1.min.js](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/lib/jquery-3.4.1.min.js)
+### Manual
 
-### 2) Floorplan image
+#### 1) Download files from repo
 
-You'll then need an SVG file of your floorplan, and a CSS file for styling. You can use the samples provided to get started. Copy them to the `www/floorplan/examples/simple` folder of your Home Assistant installation:
+To get started, copy the [dist/floorplan-card.js](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/floorplan-card.js) to `www/lovelace-floorplan` folder of your Home Assistant installation (You can right-click the file, to save it to your disk):
+
+#### 2) Floorplan image
+
+You'll then need an SVG file of your floorplan, and a CSS file for styling. You can use the samples provided to get started. Copy them to the `www/lovelace-floorplan/examples/simple` folder of your Home Assistant installation:
 
 - [examples/simple/simple.svg](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/examples/simple/simple.svg)
 - [examples/simple/simple.css](https://raw.githubusercontent.com/pkozul/lovelace-floorplan/master/www/floorplan/examples/simple/simple.css)
 
 In the SVG file, rename the element IDs to match the entitiy IDs you have in your Home Assistant installation.
 
-### 3) Adding to Lovelace
+#### 3) Adding to Lovelace
 
 Add the following to the `resources:` section of your Lovelace config.
 
 ```
 resources:
   - type: module
-    url: /local/floorplan/floorplan-card.js?v=1.1.14
+    url: /local/lovelace-floorplan/floorplan-card.js?v=1.1.14
 ```
 
 You can then start adding floorplan cards to your Lovelace config. Under `entities:`, make sure to add the entity IDs which you want to use in the floorplan:
 
 ```
   - cards:
       - config:
-          image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
+          image: /local/lovelace-floorplan/examples/simple/simple.svg?v=1.1.14
           rules:
             - entities:
                 - binary_sensor.main_bedroom
@@ -48,7 +50,7 @@ You can then start adding floorplan cards to your Lovelace config. Under `entiti
                   state: 'off'
                 - class: 'binary-sensor-on'
                   state: 'on'
-          stylesheet: /local/floorplan/examples/simple/simple.css?v=1.1.14
+          stylesheet: /local/lovelace-floorplan/examples/simple/simple.css?v=1.1.14
         title: Simple Floorplan
         type: 'custom:floorplan-card'
     icon: 'mdi:floor-plan'
@@ -58,9 +60,123 @@ You can then start adding floorplan cards to your Lovelace config. Under `entiti
 
 Note: If you're using the Lovelace editor that is built into the user interface, click on the three dots in the upper-right corner of the screen and select `Configure UI`. Then click on the three dots again and select `Raw config editor`. Then you'll be able to add the resources and card described above.
 
-### 4) Try some examples
+## Floorplan examples
 
 To get started with some fully working examples, try some of the floorplans below:
 
 - [Simple Floorplan](https://github.com/pkozul/lovelace-floorplan/tree/master/www/floorplan/examples/simple)
 - [Ring doorbell](https://github.com/pkozul/lovelace-floorplan/tree/master/www/floorplan/examples/ring)
+
+
+### Options
+
+#### Option: `long_click`
+
+You'll find the primary functions of Floorplan, by looking into the Floorplan examples.
+
+However, Floorplan supports Long Press, too. Here's one example on how to use the function:
+```yaml
+- config:
+      image: /local/floorplan/examples/simple/429.svg?v=5
+      rules:
+        - action:
+            service: light.toggle
+            data:
+              entity_id: light.triplespot_office
+          element: area.office
+          entities:
+            - light.triplespot_office
+          long_click:
+              data:
+                card:
+                  type: entities
+                  entities:
+                    - light.triplespot_office
+                    - media_player.sonos_office
+                title: Custom Entity card
+              service: browser_mod.popup
+```
+
+For the best results, use [HASS Browser Mod](https://github.com/thomasloven/hass-browser_mod).
+
+Here's a sample snippet, only containing the `long_click` option:
+```yaml
+long_click:
+    data:
+      card:
+        type: entities
+        entities:
+          - light.triplespot_office
+          - media_player.sonos_office
+      title: Custom Entity card
+    service: browser_mod.popup
+```
+
+Credit(s): [Alfiegerner](https://github.com/Alfiegerner)
+
+#### Option: `image_mobile`
+
+You're able to define a seperate SVG-file for mobile-devices. If `image_mobile` are defined, Floorplan will use that for all known mobile devices.
+```yaml
+- config:
+      image: /local/floorplan/examples/simple/429.svg?v=5
+      image_mobile: /local/floorplan/examples/simple/429_transformed.svg?v=5
+      rules:
+        - action:
+            service: light.toggle
+            data:
+              entity_id: light.triplespot_office
+          element: area.office
+          entities:
+            - light.triplespot_office
+          ...
+```
+
+Credit(s): [Alfiegerner](https://github.com/Alfiegerner) - _[exetico](https://github.com/exetico) has provided a hot-fix for the logic(s). `image` will be used, if `image_mobile` are not defined._
+
+#### Option: `pre_load`
+The `pre_load_ option are implemented to prevent "not found errors" for cards like hui-gauge. It is still unclear if it is still required.
+
+_I'll update details related to this, in near future._
+
+```yaml
+- config:
+      image: /local/floorplan/examples/simple/429.svg?v=5
+      preload_cards:
+        - map
+        - gui-gauge
+      preload_rows:
+        - lock-entity-row
+      rules:
+        ...
+```
+
+Credit(s): [Alfiegerner](https://github.com/Alfiegerner)
+
+#### Option: `no_entity_id`
+If you want so use a service like `hue.hue_activate_scene`, which doesn't accept an entitiy_id, use `no_entity_id` instead.
+
+```yaml
+- config:
+      rules:
+        - action:
+            no_entity_id: true
+            service: hue.hue_activate_scene
+            data:
+                scene_name: 'sleep-time'
+                group_name: 'bedroom'
+          element: button-heating
+          more_info: false
+```
+
+
+## Inspiration and Support
+Check the [Floorplan-section](https://community.home-assistant.io/c/third-party/floorplan/28) on the Home Assistant Community.
+
+
+## Building floorplan-card.js
+The script is bundled with browserify. 
+
+To build floorplan-card.js, just run:
+ 1. `npm install`
+ 2. `npm run build`