First try

Anonym-tsk · Oct 11, 2019 · f49bbfa · f49bbfa
1 parent b39ae80
commit f49bbfa
Show file tree

Hide file tree

Showing 93 changed files with 962 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,19 @@
+syntax: glob
+tags
+tmp/*
+*.iml
+.idea
+*/.idea
+.DS_Store
+*/.DS_Store
+sftp-config.json
+*/sftp-config.json
+.realsync
+*.orig
+.*.sw?
+node_modules/*
+.ant-targets-build.xml
+/local.properties
+.ant_targets
+package-lock.json
+.sass-cache
diff --git a/dist/starline-card.js b/dist/starline-card.js
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "homeassistant-starline-card",
+  "version": "1.0.0",
+  "description": "Custom Lovelace Card for StarLine integration",
+  "scripts": {
+    "build": "node scripts/build.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Anonym-tsk/homeassistant-starline-card.git"
+  },
+  "author": "@anonym.tsk",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Anonym-tsk/homeassistant-starline-card/issues"
+  },
+  "homepage": "https://github.com/Anonym-tsk/homeassistant-starline-card#readme",
+  "devDependencies": {
+    "css-b64-images": "^0.2.5",
+    "fs-extra": "^8.1.0",
+    "imagemin": "^7.0.0",
+    "imagemin-pngquant": "^8.0.0",
+    "node-sass": "^4.12.0",
+    "replace-in-file": "^4.1.3"
+  }
+}
diff --git a/scripts/build.js b/scripts/build.js
@@ -0,0 +1,50 @@
+const sass = require('node-sass');
+const b64img = require('css-b64-images');
+const imagemin = require('imagemin');
+const imageminPngquant = require('imagemin-pngquant');
+const replace = require('replace-in-file');
+const fs = require('fs-extra');
+
+fs.mkdirp('./tmp/assets');
+fs.emptyDirSync('./tmp/assets');
+
+(async () => {
+    await imagemin(['./src/assets/*.png'], {
+        destination: './tmp/assets',
+        plugins: [
+            imageminPngquant({
+                quality: [0.6, 0.8]
+            })
+        ]
+    });
+
+    var result = sass.renderSync({
+        file: './src/starline.sass',
+        outputStyle: 'compact'
+    });
+
+    b64img.fromString(result.css, './tmp/', null, {maxSize: 1024 * 32}, function(err, css) {
+        if (err) {
+            console.error('Error:', err);
+            return;
+        }
+
+        fs.copySync('./src/starline-card.js', './tmp/starline-card.js');
+
+        replace.sync({
+            files: './tmp/starline-card.js',
+            from: '{%css%}',
+            to: css,
+        });
+
+        fs.readFile('./src/starline.html', 'utf8', function(err, contents) {
+            replace.sync({
+                files: './tmp/starline-card.js',
+                from: '{%html%}',
+                to: contents,
+            });
+
+            fs.copySync('./tmp/starline-card.js', './dist/starline-card.js');
+        });
+    });
+})();
diff --git a/src/assets/car_control_btn_central_off.png b/src/assets/car_control_btn_central_off.png
diff --git a/src/assets/car_control_btn_central_off_dark.png b/src/assets/car_control_btn_central_off_dark.png
diff --git a/src/assets/car_control_btn_central_on.png b/src/assets/car_control_btn_central_on.png
diff --git a/src/assets/car_control_btn_central_on_dark.png b/src/assets/car_control_btn_central_on_dark.png
diff --git a/src/assets/car_control_btn_left_off.png b/src/assets/car_control_btn_left_off.png
diff --git a/src/assets/car_control_btn_left_off_dark.png b/src/assets/car_control_btn_left_off_dark.png
diff --git a/src/assets/car_control_btn_left_on.png b/src/assets/car_control_btn_left_on.png
diff --git a/src/assets/car_control_btn_left_on_dark.png b/src/assets/car_control_btn_left_on_dark.png
diff --git a/src/assets/car_control_icon_arm_start_on.png b/src/assets/car_control_icon_arm_start_on.png
diff --git a/src/assets/car_control_icon_arm_start_on_dark.png b/src/assets/car_control_icon_arm_start_on_dark.png
diff --git a/src/assets/car_control_icon_arm_start_on_disable.png b/src/assets/car_control_icon_arm_start_on_disable.png
diff --git a/src/assets/car_control_icon_arm_stop_off.png b/src/assets/car_control_icon_arm_stop_off.png
diff --git a/src/assets/car_control_icon_arm_stop_off_dark.png b/src/assets/car_control_icon_arm_stop_off_dark.png
diff --git a/src/assets/car_control_icon_arm_stop_off_disable.png b/src/assets/car_control_icon_arm_stop_off_disable.png
diff --git a/src/assets/car_control_icon_ign_start_off.png b/src/assets/car_control_icon_ign_start_off.png
diff --git a/src/assets/car_control_icon_ign_start_off_dark.png b/src/assets/car_control_icon_ign_start_off_dark.png
diff --git a/src/assets/car_control_icon_ign_start_off_disable.png b/src/assets/car_control_icon_ign_start_off_disable.png
diff --git a/src/assets/car_control_icon_ign_stop_on.png b/src/assets/car_control_icon_ign_stop_on.png
diff --git a/src/assets/car_control_icon_ign_stop_on_dark.png b/src/assets/car_control_icon_ign_stop_on_dark.png
diff --git a/src/assets/car_control_icon_ign_stop_on_disable.png b/src/assets/car_control_icon_ign_stop_on_disable.png
diff --git a/src/assets/car_control_icon_out_off.png b/src/assets/car_control_icon_out_off.png
diff --git a/src/assets/car_control_icon_out_off_dark.png b/src/assets/car_control_icon_out_off_dark.png
diff --git a/src/assets/car_control_icon_out_off_disable.png b/src/assets/car_control_icon_out_off_disable.png
diff --git a/src/assets/car_control_icon_out_on.png b/src/assets/car_control_icon_out_on.png
diff --git a/src/assets/car_control_icon_out_on_dark.png b/src/assets/car_control_icon_out_on_dark.png
diff --git a/src/assets/car_control_icon_out_on_disable.png b/src/assets/car_control_icon_out_on_disable.png
diff --git a/src/assets/car_control_icon_webasto_off.png b/src/assets/car_control_icon_webasto_off.png
diff --git a/src/assets/car_control_icon_webasto_off_dark.png b/src/assets/car_control_icon_webasto_off_dark.png
diff --git a/src/assets/car_control_icon_webasto_off_disable.png b/src/assets/car_control_icon_webasto_off_disable.png
diff --git a/src/assets/car_control_icon_webasto_on.png b/src/assets/car_control_icon_webasto_on.png
diff --git a/src/assets/car_control_icon_webasto_on_dark.png b/src/assets/car_control_icon_webasto_on_dark.png
diff --git a/src/assets/car_control_icon_webasto_on_disable.png b/src/assets/car_control_icon_webasto_on_disable.png
diff --git a/src/assets/car_indication_bg_guard.png b/src/assets/car_indication_bg_guard.png
diff --git a/src/assets/car_indication_bg_guard_dark.png b/src/assets/car_indication_bg_guard_dark.png
diff --git a/src/assets/car_indication_door.png b/src/assets/car_indication_door.png
diff --git a/src/assets/car_indication_door_dark.png b/src/assets/car_indication_door_dark.png
diff --git a/src/assets/car_indication_door_red.png b/src/assets/car_indication_door_red.png
diff --git a/src/assets/car_indication_door_red_dark.png b/src/assets/car_indication_door_red_dark.png
diff --git a/src/assets/car_indication_frontlight.png b/src/assets/car_indication_frontlight.png
diff --git a/src/assets/car_indication_frontlight_dark.png b/src/assets/car_indication_frontlight_dark.png
diff --git a/src/assets/car_indication_frontlight_red.png b/src/assets/car_indication_frontlight_red.png
diff --git a/src/assets/car_indication_frontlight_red_dark.png b/src/assets/car_indication_frontlight_red_dark.png
diff --git a/src/assets/car_indication_hood.png b/src/assets/car_indication_hood.png
diff --git a/src/assets/car_indication_hood_dark.png b/src/assets/car_indication_hood_dark.png
diff --git a/src/assets/car_indication_hood_red.png b/src/assets/car_indication_hood_red.png
diff --git a/src/assets/car_indication_hood_red_dark.png b/src/assets/car_indication_hood_red_dark.png
diff --git a/src/assets/car_indication_key.png b/src/assets/car_indication_key.png
diff --git a/src/assets/car_indication_key_dark.png b/src/assets/car_indication_key_dark.png
diff --git a/src/assets/car_indication_key_red.png b/src/assets/car_indication_key_red.png
diff --git a/src/assets/car_indication_key_red_dark.png b/src/assets/car_indication_key_red_dark.png
diff --git a/src/assets/car_indication_sectors_1.png b/src/assets/car_indication_sectors_1.png
diff --git a/src/assets/car_indication_sectors_1_dark.png b/src/assets/car_indication_sectors_1_dark.png
diff --git a/src/assets/car_indication_sectors_1_red.png b/src/assets/car_indication_sectors_1_red.png
diff --git a/src/assets/car_indication_sectors_1_red_dark.png b/src/assets/car_indication_sectors_1_red_dark.png
diff --git a/src/assets/car_indication_sectors_2.png b/src/assets/car_indication_sectors_2.png
diff --git a/src/assets/car_indication_sectors_2_dark.png b/src/assets/car_indication_sectors_2_dark.png
diff --git a/src/assets/car_indication_sectors_2_red.png b/src/assets/car_indication_sectors_2_red.png
diff --git a/src/assets/car_indication_sectors_2_red_dark.png b/src/assets/car_indication_sectors_2_red_dark.png
diff --git a/src/assets/car_indication_sectors_3.png b/src/assets/car_indication_sectors_3.png
diff --git a/src/assets/car_indication_sectors_3_dark.png b/src/assets/car_indication_sectors_3_dark.png
diff --git a/src/assets/car_indication_sectors_3_red.png b/src/assets/car_indication_sectors_3_red.png
diff --git a/src/assets/car_indication_sectors_3_red_dark.png b/src/assets/car_indication_sectors_3_red_dark.png
diff --git a/src/assets/car_indication_smoke_1.png b/src/assets/car_indication_smoke_1.png
diff --git a/src/assets/car_indication_smoke_1_dark.png b/src/assets/car_indication_smoke_1_dark.png
diff --git a/src/assets/car_indication_smoke_2.png b/src/assets/car_indication_smoke_2.png
diff --git a/src/assets/car_indication_smoke_2_dark.png b/src/assets/car_indication_smoke_2_dark.png
diff --git a/src/assets/car_indication_smoke_3.png b/src/assets/car_indication_smoke_3.png
diff --git a/src/assets/car_indication_smoke_3_dark.png b/src/assets/car_indication_smoke_3_dark.png
diff --git a/src/assets/car_indication_smoke_red_1.png b/src/assets/car_indication_smoke_red_1.png
diff --git a/src/assets/car_indication_smoke_red_1_dark.png b/src/assets/car_indication_smoke_red_1_dark.png
diff --git a/src/assets/car_indication_smoke_red_2.png b/src/assets/car_indication_smoke_red_2.png
diff --git a/src/assets/car_indication_smoke_red_2_dark.png b/src/assets/car_indication_smoke_red_2_dark.png
diff --git a/src/assets/car_indication_smoke_red_3.png b/src/assets/car_indication_smoke_red_3.png
diff --git a/src/assets/car_indication_smoke_red_3_dark.png b/src/assets/car_indication_smoke_red_3_dark.png
diff --git a/src/assets/car_indication_trunk.png b/src/assets/car_indication_trunk.png
diff --git a/src/assets/car_indication_trunk_dark.png b/src/assets/car_indication_trunk_dark.png
diff --git a/src/assets/car_indication_trunk_red.png b/src/assets/car_indication_trunk_red.png
diff --git a/src/assets/car_indication_trunk_red_dark.png b/src/assets/car_indication_trunk_red_dark.png
diff --git a/src/assets/car_status_cabin_temperature.png b/src/assets/car_status_cabin_temperature.png
diff --git a/src/assets/car_status_cabin_temperature_dark.png b/src/assets/car_status_cabin_temperature_dark.png
diff --git a/src/assets/car_status_engine_temperature.png b/src/assets/car_status_engine_temperature.png
diff --git a/src/assets/car_status_engine_temperature_dark.png b/src/assets/car_status_engine_temperature_dark.png
diff --git a/src/assets/car_status_sim.png b/src/assets/car_status_sim.png
diff --git a/src/assets/car_status_sim_dark.png b/src/assets/car_status_sim_dark.png
diff --git a/src/assets/car_status_storage_battery.png b/src/assets/car_status_storage_battery.png
diff --git a/src/assets/car_status_storage_battery_dark.png b/src/assets/car_status_storage_battery_dark.png
diff --git a/src/starline-card.js b/src/starline-card.js
@@ -0,0 +1,92 @@
+class StarlineCard extends HTMLElement {
+    constructor() {
+        super();
+
+        this._config = {};
+
+        this.$wrapper = null;
+        this.$container = null;
+
+        this.$controls = null;
+        this.$controlLeft = null;
+        this.$controlCenter = null;
+        this.$controlRight = null;
+
+        this.$info = null;
+        this.$infoBalance = null;
+        this.$infoBattery = null;
+        this.$infoInner = null;
+        this.$infoEngine = null;
+    }
+
+    set hass(hass) {
+        if (!this.$wrapper) {
+            this._render();
+        }
+
+        const entityId = this._config.entity;
+        const state = hass.states[entityId];
+        console.warn(hass);
+        const stateStr = state ? state.state : 'unavailable';
+    }
+
+    _render() {
+        const card = document.createElement('ha-card');
+        const style = document.createElement('style');
+        card.header = this._config.title || 'StarLine';
+        style.textContent = `{%css%}`;
+        card.innerHTML = `{%html%}`;
+        card.appendChild(style);
+        this.appendChild(card);
+
+        this.$wrapper = card.querySelector('.wrapper');
+        this.$container = card.querySelector('.container');
+
+        this.$controls = card.querySelector('.controls');
+        this.$controlLeft = this.$controls.querySelector('.control-left');
+        this.$controlCenter = this.$controls.querySelector('.control-center');
+        this.$controlRight = this.$controls.querySelector('.control-right');
+
+        this.$info = card.querySelector('.info');
+        this.$infoBalance = this.$info.querySelector('.info-balance');
+        this.$infoBattery = this.$info.querySelector('.info-battery');
+        this.$infoInner = this.$info.querySelector('.info-inner');
+        this.$infoEngine = this.$info.querySelector('.info-engine');
+    }
+
+    setConfig(config) {
+        const entity_types = {
+            'battery': 'Battery',
+            'balance': 'Balance',
+            'ctemp': 'Interior Temperature',
+            'etemp': 'Engine Temperature',
+            'gsm_lvl': 'GSM Signal Level',
+            'hbrake': 'Hand Brake',
+            'hood': 'Hood',
+            'trunk': 'Trunk',
+            'alarm': 'Alarm Status',
+            'door': 'Doors Status',
+            'engine': 'Engine',
+            'webasto': 'Heater',
+            'out': 'Additional Channel',
+            'security': 'Security',
+            'location': 'Location'
+        };
+
+        Object.keys(entity_types).forEach((key) => {
+            if (!config[key]) {
+                throw new Error('You need to define an entity: ' + entity_types[key]);
+            }
+        });
+
+        this._config = config;
+    }
+
+    // The height of your card. Home Assistant uses this to automatically
+    // distribute all cards over the available columns.
+    getCardSize() {
+        return 3;
+    }
+}
+
+customElements.define('starline-card', StarlineCard);
diff --git a/src/starline.html b/src/starline.html
@@ -0,0 +1,36 @@
+<div class="wrapper">
+    <div class="container">
+        <div class="car">
+            <div class="car-cnt">
+                <div class="car-body"></div>
+                <div class="car-door"></div>
+                <div class="car-hood"></div>
+                <div class="car-trunk"></div>
+                <div class="car-frontlight-left"></div>
+                <div class="car-frontlight-right"></div>
+                <div class="car-smoke"></div>
+                <div class="car-key"></div>
+            </div>
+            <div class="car-security">
+                <div class="car-security-1"></div>
+                <div class="car-security-2"></div>
+                <div class="car-security-3"></div>
+                <div class="car-security-4"></div>
+                <div class="car-security-5"></div>
+            </div>
+        </div>
+
+        <div class="controls">
+            <div class="control-left"></div>
+            <div class="control-center"></div>
+            <div class="control-right"></div>
+        </div>
+
+        <div class="info">
+            <div class="info-balance"></div>
+            <div class="info-battery"></div>
+            <div class="info-inner"></div>
+            <div class="info-engine"></div>
+        </div>
+    </div>
+</div>