Refactor to Lit, add a card editor, support for Section design and some more features and corrections.

README.md

@@ -3,13 +3,18 @@
 [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs)
 [![buymeacoffee_badge](https://img.shields.io/badge/Donate-Buymeacoffee-orange?style=for-the-badge)](https://www.buymeacoffee.com/Deejayfool)
 
-**Note : Be careful, since version 2021.11.0 of Home Assistant, there is a breaking change in the icon buttons. So install v1.3.0 of this card only if you have at least the version 2021.11.0 of Home Assistant**
-
 This card allows to open, close or set a shutter to the opening rate you want.
+It has various options to customize buttons and behaviour. You can fine tune the card through the graphic editor.
+
+![Shutter card](./images/shutter-card.gif)
+
+## Graphic Editor Configuration
+
+![Shutter card editor](./images/shutter-card-editor.png)
 
-![Shutter card](https://raw.githubusercontent.com/Deejayfool/hass-shutter-card/master/images/shutter-card.gif)
+## Yaml Configuration
 
-## Configuration
+To configure the card directly through yaml, you can use the following parameters :
 
 ### General
 
@@ -33,6 +38,8 @@ This card allows to open, close or set a shutter to the opening rate you want.
 | always_percentage | boolean | False | `false` | If set to `true`, the end states (opened/closed) will be also as numbers (0 / 100 % ) instead of a text
 | shutter_width_px | int | False | `153` | Set shutter visualization width in px. You can make it thicker or narrower to fit your layout.
 | disable_end_buttons | boolean | False | `false` | If set to `true`, the end states (opened/closed) will also deactivate the buttons for that direction (i.e. the "up" button will be disabled when the shutters are fully open)
+| partial_open_buttons_displayed | boolean | False | `false` | If set to `true`, the buttons for partial open positions (0%, 25%, 50%, 75%, 90% and 100%) are displayed
+| disable_standard_buttons | boolean | False | `false` | If set to `true`, the standard buttons for open/close/stop are not displayed
 
 _Remark : you can also just give the entity ID (without to specify `entity:`) if you don't need to specify the other configurations._
 
@@ -46,14 +53,14 @@ entities:
     name: Left shutter
     buttons_position: left
     title_position: bottom
-  - cover.bedroom_shutter
+  - entity: cover.bedroom_shutter
 ```
 
 ## Install
 
 If you use HACS, the resources will automatically be configured with the needed file.
 
-If you don't use HACS, you can download js file from [latest releases](https://github.com/Deejayfool/hass-shutter-card/releases). Drop it then in `www` folder in your `config` directory. Next add the following entry in lovelace configuration:
+If you don't use HACS, you can download js files from [latest releases](https://github.com/Deejayfool/hass-shutter-card/releases). Drop it then in `www` folder in your `config` directory. Next add the following entry in lovelace configuration:
 
 ```yaml
 resources:

en.js

@@ -0,0 +1,37 @@
+export const values = {
+    "hcs": {
+        "editor": {
+            "title": "Title (optional)",
+            "entity": "Entity:",
+            "name": "Name (optional)",
+            "buttons_position": "Buttons position",
+            "title_position": "Title position",
+            "disable_standard_buttons": "Disable buttons ?",
+            "disable_end_buttons": "Disable end buttons ?",
+            "partial_open_buttons_displayed": "Partial open buttons displayed ?",
+            "inverted_shutter": "Inverted shutter ?",            
+            "always_percentage": "Always percentage ?",
+            "can_tilt": "Can Tilt ?",
+            "partial_close_percentage": "Partial close percentage",
+            "offset_closed_percentage": "Offset closed percentage",
+            "shutter_width": "Shutter width in px",
+
+            "tooltip": {
+                "disable_standard_buttons": "If 'true', the open, stop and down buttons are not displayed",
+                "disable_end_buttons": "If 'true', the end states (opened/closed) will also deactivate the buttons for that direction (i.e. the 'up' button will be disabled when the shutters are fully open)",
+                "inverted_shutter": "For reversed buttons : set it to 'true' if your shutter is 100% when it is closed, and 0% when it is opened",
+                "always_percentage": "If set to 'true', the end states (opened/closed) will be also as numbers (0 / 100 % ) instead of a text",
+                "partial_close_percentage": "Set it to a percentage (0-100) if you want to be able to quickly go to this \"partially closed\" state using a button",
+                "offset_closed_percentage": "Set it to a percentage of travel that will still be considered a 'closed' state in the visualization",
+            },
+
+            "position": {
+                "left": "left",
+                "top": "top",
+                "bottom": "bottom",
+                "right": "right",
+            }
+
+        }
+    }
+};

fr.js

@@ -0,0 +1,36 @@
+export const values = {
+    "hcs": {
+        "editor": {
+            "title": "Titre (optionnel)",
+            "entity": "Entité :",
+            "name": "Nom (optionnel)",
+            "buttons_position": "Position des boutons",
+            "title_position": "Position du titre",
+            "disable_standard_buttons": "Désactiver les boutons ?",
+            "disable_end_buttons": "Désactiver les boutons de fin ?",
+            "partial_open_buttons_displayed": "Activer les boutons d'ouverture partielle ?",
+            "inverted_shutter": "Bouton haut et bas inversés ?",
+            "always_percentage": "Toujours afficher un pourcentage ?",
+            "can_tilt": "Tilt possible ?",
+            "partial_close_percentage": "Fermeture partielle (%)",
+            "offset_closed_percentage": "Offset volet fermé (%)",
+            "shutter_width": "Largeur de l'image en px",
+
+            "tooltip": {
+                "disable_standard_buttons": "Les boutons d'ouverture, d'arrêt et de fermeture ne sont pas affichés",
+                "disable_end_buttons": "Lorsque le volet est totalement fermé le bouton de fermeture est désactivé. Idem pour l'ouverture",
+                "inverted_shutter": "Si les boutons sont inversés, un volet à 100% est alors fermé et un volet à 0% est ouvert",
+                "always_percentage": "Affiche un pourcentage d'ouverture à 0 % ou 100% plutôt que l'état de buttée du volet (ouvert ou fermé)",
+                "partial_close_percentage": "Choisir un pourcentage pour afficher le bouton de \"fermeture partielle\" permettant d'atteindre la position en un clic",
+                "offset_closed_percentage": "Pourcentage de déplacement du volet qui sera considéré comme fermé dans la visualisation",
+            },
+
+            "position": {
+                "left": "gauche",
+                "top": "haut",
+                "bottom": "bas",
+                "right": "droite",
+            }
+        }
+    }
+}