Initial release (v0.1.0)

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+dist
+node_modules
+package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Niklas Schumacher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

hacs.json

@@ -0,0 +1,6 @@
+{
+    "name": "shutter-row",
+    "zip_release": true,
+    "filename": "shutter-row.js",
+    "render_readme": true
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@berrywhite/lovelace-shutter-row",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Home Assistant Lovelace Shutter Row Card",
+  "main": "shutter-row.js",
+  "module": "shutter-row.js",
+  "type": "module",
+  "scripts": {
+    "start": "rollup -c --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write .",
+    "build": "rollup -c",
+    "test": "npm run lint && npm run build"
+  },
+  "keywords": [
+    "home-assistant",
+    "homeassistant",
+    "hass",
+    "automation",
+    "lovelace",
+    "custom-cards",
+    "shutter",
+    "row"
+  ],
+  "author": "berrywhite",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "custom-card-helpers": "^1.9.0",
+    "lit": "^2.3.0",
+    "postcss-preset-env": "^7.7.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss-lit": "^2.0.0",
+    "rollup-plugin-serve": "^2.0.1"
+  },
+  "devDependencies": {
+    "@11ty/eleventy": "^1.0.1",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@custom-elements-manifest/analyzer": "^0.6.3",
+    "@open-wc/testing": "^3.1.5",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@web/dev-server": "^0.1.31",
+    "@web/dev-server-legacy": "^1.0.0",
+    "@web/test-runner": "^0.13.27",
+    "@web/test-runner-playwright": "^0.8.8",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "eslint": "^8.15.0",
+    "lit-analyzer": "^0.0.6",
+    "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.77.3",
+    "rollup-plugin-summary": "^1.4.3",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "customElements": "custom-elements.json"
+}

rollup.config.js

@@ -0,0 +1,53 @@
+/*  eslint-env node */
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import postcssPresetEnv from 'postcss-preset-env';
+import postcssLit from 'rollup-plugin-postcss-lit';
+import { terser } from 'rollup-plugin-terser';
+import serve from 'rollup-plugin-serve';
+
+const IS_DEV = process.env.ROLLUP_WATCH;
+
+const serverOptions = {
+  contentBase: ['./dist'],
+  host: 'localhost',
+  port: 5000,
+  allowCrossOrigin: true,
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+  },
+};
+
+export default {
+  input: 'src/shutter-row.js',
+  output: {
+    dir: 'dist',
+    format: 'es',
+  },
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    json(),
+    postcss({
+      plugins: [
+        postcssPresetEnv({
+          stage: 1,
+          features: {
+            'nesting-rules': true,
+          },
+        }),
+      ],
+      extract: false,
+    }),
+    postcssLit(),
+    IS_DEV && serve(serverOptions),
+    !IS_DEV &&
+      terser({
+        output: {
+          comments: false,
+        },
+      }),
+  ],
+};

src/shutter-row.js

@@ -0,0 +1,180 @@
+import { LitElement, html } from 'lit';
+import { fireEvent } from 'custom-card-helpers';
+import style from './style.css';
+
+let PACKAGE_JSON = require('./package.json');
+let HASSIO_CARD_ID = "shutter-row";
+let HASSIO_CARD_NAME = "Shutter row";
+let VERSION = PACKAGE_JSON.version;
+
+
+class ShutterRow extends LitElement {
+    static get properties() {
+        return {
+            hass: Object,
+            config: Object,
+        };
+    }
+
+    static get styles() {
+        return style;
+    }
+
+    getConfig() {
+        let getConfigAttribute = (attribute, defaultValue) => {
+            return attribute in this._config ? this._config[attribute] : defaultValue;
+        }
+
+        return {
+            type: getConfigAttribute("type", false),
+            entity: getConfigAttribute("entity", false),
+            name: getConfigAttribute("name", false),
+            invert_position: getConfigAttribute("invert_position", false),
+        };
+    }
+    // On user config update
+    setConfig(config) {
+        let getConfigAttribute = (attribute, defaultValue) => {
+            return attribute in this._config ? this._config[attribute] : defaultValue;
+        }
+        if (!config.entity) {
+            throw new Error('You need to define an entity');
+        }
+
+        this._config = config;
+        this.config = {
+            type: config.type,
+            entity: config.entity,
+            name: getConfigAttribute("name", false),
+            invert_position: getConfigAttribute("invert_position", false),
+        }
+        this.entityId = this.config.entity;
+    }
+
+    // Lovelace card height
+    getCardSize() {
+        return 2;
+    }
+    getName() {
+        if(this.getConfig().name)
+            return this.getConfig().name;
+        return this.state.attributes.friendly_name;
+    }
+    getPosition() {
+        return this.state.attributes.current_position;
+    }
+    getPositionDisplay() {
+        if( (this.getConfig().invert_position && this.getPosition() == 100) ||
+                (!this.getConfig().invert_position && this.getPosition() == 0) )
+            return this.hass.localize("component.cover.state._.closed");
+        if( (this.config.invert_position && this.getPosition() == 0) ||
+                (!this.getConfig().invert_position && this.getPosition() == 100) )
+            return this.hass.localize("component.cover.state._.open");
+        return `${this.getPosition()} %`;
+    }
+    setMeta(force=false) {
+        // Only on change
+        if(this.state == this.hass.states[this.entityId] && !force)
+            return;
+        this.state = this.hass.states[this.entityId];
+        this.stateDisplay = this.state ? this.state.state : 'unavailable';
+    }
+
+    render() {
+        this.setMeta();
+
+        let config = this.getConfig();
+        let position = this.getPosition();
+
+        let upReached = function() {
+            if(!config.invert_position && position == 100 ||
+                    config.invert_position && position == 0)
+                    return true;
+            return false;
+        }
+        let downReached = function() {
+            if(config.invert_position && position == 100 ||
+                !config.invert_position && position == 0)
+                    return true;
+            return false;
+        }
+        return html`
+            <ha-card>
+                <div class="card-row card-first-row">
+                    <div class="entity-icon">
+                        <ha-icon icon="mdi:window-shutter-open" class="${downReached() ? 'ghost' : ''}"></ha-icon>
+                        <ha-icon icon="mdi:window-shutter" class="${!downReached() ? 'ghost' : ''}"></ha-icon>
+                    </div>
+                    
+                    <span class="entity-name" @click="${this.moreInfo}">${this.getName()}</span>
+                    <div class="controls" state="${this.stateDisplay}">
+                        <ha-icon icon="mdi:chevron-up" class="${upReached() || this.state.attributes.moving == "UP" ? "disabled": ''}" @click="${this.onUpClick}"></ha-icon>
+                        <ha-icon icon="mdi:stop" class="${this.state.attributes.moving == "STOP" ? "disabled": ''}" @click="${this.onStopClick}"></ha-icon>
+                        <ha-icon icon="mdi:chevron-down" class="${downReached() || this.state.attributes.moving == "DOWN" ? "disabled": ''}" @click="${this.onDownClick}"></ha-icon>
+                    </div>
+                </div>
+                <div class="card-row card-second-row">
+                    <ha-slider ignore-bar-touch="" min="0" max="100" value=${this.getPosition()} step="5" pin dir="ltr" role="slider" @change="${this.onSliderChange}"></ha-slider>
+                    <div class="infos">
+                        <span class="position">${this.getPositionDisplay()}</span>
+                    </div>
+                </div>
+            </ha-card>
+        `;
+    }
+    getElements() {
+        return {
+            controls: this.renderRoot.querySelector("div.card-first-row div.controls"),
+            slider: this.renderRoot.querySelector("div.card-second-row ha-slider"),
+        }
+    }
+
+    onUpClick() {
+        let elements = this.getElements();
+        if(this.state.attributes.moving == "UP" || elements.controls.hasAttribute("up-reached"))
+            return;
+        this.hass.callService("cover", "open_cover", {
+            entity_id: this.entityId,
+        });
+    }
+
+    onDownClick() {
+        let elements = this.getElements();
+        if(this.state.attributes.moving == "DOWN" || elements.controls.hasAttribute("down-reached"))
+            return;
+        this.hass.callService("cover", "close_cover", {
+            entity_id: this.entityId,
+        });
+    }
+
+    onStopClick() {
+        if(this.state.attributes.moving == "STOP")
+            return;
+        this.hass.callService("cover", "stop_cover", {
+            entity_id: this.entityId,
+        });
+    }
+
+    onSliderChange() {
+        let elements = this.getElements();
+        if(elements.slider.value == this.getPosition())
+            return;
+        this.hass.callService("cover", "set_cover_position", {
+            entity_id: this.entityId,
+            position: parseInt(elements.slider.value),
+        });
+    }
+
+    moreInfo() {
+        let entityId = this.getConfig().entity;
+        fireEvent(this, 'hass-more-info', {
+            entityId,
+        }, {
+            bubbles: false,
+            composed: true,
+        });
+    }
+}
+
+customElements.define(HASSIO_CARD_ID, ShutterRow);
+console.info("%c" + HASSIO_CARD_NAME.toLocaleUpperCase() + " " + VERSION, "color: #ffa500");    

src/style.css

@@ -0,0 +1,48 @@
+.disabled,
+div.controls[state="unavailable"] ha-icon  {
+    color: var(--disabled-text-color);
+    cursor: default;
+}
+.ghost {
+    display: none !important;
+}
+ha-card {
+    padding: 16px;
+}
+ha-icon[disabled] {
+    color: var(--disabled-text-color);
+    cursor: default;
+}
+div.card-row {
+    display: flex;
+    align-items: center;
+    height: 40px;
+}
+div.card-first-row ha-icon {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+}
+div.entity-icon ha-icon {
+    color: var(--paper-item-icon-color, #44739e);
+}
+div.card-first-row span.entity-name {
+    margin-left: 16px;
+    margin-right: 8px;
+    cursor: pointer;
+}
+div.card-first-row div.controls {
+    margin-left: auto;
+}
+div.card-second-row ha-slider {
+    width: 100%;
+    padding-left: 40px;
+    box-sizing: border-box;
+}
+div.card-second-row div.infos {
+    width: 175px;
+    text-align: right;
+}