Backgroud color support (#20)

This adds background_color support instead of white. See docs for details.

.devcontainer/configuration.yaml

@@ -0,0 +1,18 @@
+default_config:
+lovelace:
+  mode: yaml
+demo:
+
+sensor:
+  - platform: systemmonitor
+    resources:
+      - type: disk_use_percent
+        arg: /home
+      - type: memory_use_percent
+      - type: processor_use
+      - type: last_boot
+      - type: network_out
+        arg: "wlp2s0"
+      - type: load_1m
+      - type: load_5m
+      - type: load_15m

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+// See https://aka.ms/vscode-remote/devcontainer.json for format details.
+{
+  "name": "Boilerplate Card Development",
+  "image": "ludeeus/devcontainer:monster-stable",
+  "context": "..",
+  "appPort": ["5000:5000", "9123:8123"],
+  "postCreateCommand": "npm install",
+  "runArgs": [
+    "-v",
+    "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
+  ],
+  "extensions": [
+    "github.vscode-pull-request-github",
+    "eamodio.gitlens",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "runem.lit-plugin",
+    "auchenberg.vscode-browser-preview",
+    "davidanson.vscode-markdownlint",
+    "redhat.vscode-yaml"
+  ],
+  "settings": {
+    "files.eol": "\n",
+    "editor.tabSize": 4,
+    "terminal.integrated.shell.linux": "/bin/bash",
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "files.trimTrailingWhitespace": true
+  }
+}

.devcontainer/ui-lovelace.yaml

@@ -0,0 +1,56 @@
+resources:
+  - url: http://127.0.0.1:5000/canvas-gauge-card.js?v6
+    type: module
+views:
+  - title: Example
+    cards:
+      - type: "custom:canvas-gauge-card"
+        name: Canvas Guage Card Development
+        card_height: 125
+        #background_color: "#000"
+        entity: sensor.processor_use
+        gauge:
+          colorValueBoxBackground: "#000"
+          borderShadowWidth: 0
+          borderOuterWidth: 0
+          borderMiddleWidth: 0
+          borderInnerWidth: 0
+          animationDuration: 1500
+          animationRule: linear
+          borders: false
+          colorPlate: "#ddd"
+          height: 210
+          highlights:
+            - color: "rgba(200, 50, 50, .75)"
+              from: 80
+              to: 100
+          majorTicks:
+            - "0"
+            - "10"
+            - "20"
+            - "30"
+            - "40"
+            - "50"
+            - "60"
+            - "70"
+            - "80"
+            - "90"
+            - "100"
+          maxValue: 100
+          minValue: 0
+          minorTicks: 2
+          needleCircleInner: false
+          needleCircleOuter: true
+          needleCircleSize: 7
+          needleType: arrow
+          needleWidth: 2
+          startAngle: 90
+          strokeTicks: true
+          ticksAngle: 180
+          type: radial-gauge
+          valueBox: false
+          width: 210
+        style:
+          left: 4.2%
+          top: 9.6%
+          transform: none

.github/workflows/build.yml

@@ -0,0 +1,22 @@
+name: "Build"
+
+on:
+  push:
+    branches:
+      - master
+      - backgroud-color
+  pull_request:
+    branches:
+      - master
+      - backgroud-color
+
+jobs:
+  build:
+    name: Test build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Build
+        run: |
+          npm install
+          npm run build

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  release:
+    name: Prepare release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+
+      # Build
+      - name: Build the file
+        run: |
+          cd /home/runner/work/canvas-gauge-card/canvas-gauge-card
+          npm install
+          npm run build
+
+      # Upload build file to the releas as an asset.
+      - name: Upload zip to release
+        uses: svenstaro/upload-release-action@v1-release
+
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: /home/runner/work/canvas-gauge-card/canvas-gauge-card/dist/canvas-gauge-card.js
+          asset_name: canvas-gauge-card.js
+          tag: ${{ github.ref }}
+          overwrite: true

.gitignore

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

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "canvas-gauge-card",
+  "version": "0.0.4",
+  "description": "Lovelace canvas-gauge-card",
+  "keywords": [
+    "home-assistant",
+    "homeassistant",
+    "hass",
+    "automation",
+    "lovelace",
+    "custom-cards",
+    "canvas-gauge"
+  ],
+  "module": "canvas-gauge-card.js",
+  "repository": "[email protected]:custom_cards/canvas-gauge-card.git",
+  "author": "@helto4real",
+  "license": "MIT",
+  "dependencies": {
+    "@types/canvas-gauges": "^2.1.2",
+    "canvas-gauges": "^2.1.5",
+    "lit-element": "^2.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "prettier": "^1.18.2",
+    "rollup": "^1.32.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-legacy": "^1.0.0",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-terser": "^5.1.2",
+    "rollup-plugin-uglify": "^6.0.3"
+  },
+  "scripts": {
+    "build": "rollup ./src/canvas-gauge-card.js -o ./dist/canvas-gauge-card.js",
+    "start": "rollup -c --watch"
+  }
+}

rollup.config.js

@@ -0,0 +1,46 @@
+// import typescript from "rollup-plugin-typescript2";
+import commonjs from "@rollup/plugin-commonjs";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import babel from "rollup-plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import serve from "rollup-plugin-serve";
+import json from "@rollup/plugin-json";
+import legacy from "rollup-plugin-legacy";
+
+const dev = process.env.ROLLUP_WATCH;
+
+const serveopts = {
+  contentBase: ["./dist"],
+  host: "0.0.0.0",
+  port: 5000,
+  allowCrossOrigin: true,
+  headers: {
+    "Access-Control-Allow-Origin": "*"
+  }
+};
+
+const plugins = [
+  nodeResolve({ browser: true }),
+  commonjs(),
+  //   typescript(),
+  json(),
+  babel({
+    exclude: "node_modules/**"
+  }),
+  legacy({
+    "gauge.min.js": "Gauge"
+  }),
+  dev && serve(serveopts),
+  !dev && terser()
+];
+
+export default [
+  {
+    input: "src/canvas-gauge-card.js",
+    output: {
+      dir: "dist",
+      format: "es"
+    },
+    plugins: [...plugins]
+  }
+];

dist/canvas-gauge-card.js → src/canvas-gauge-card.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import "./gauge.min.js";
+import Gauge from "canvas-gauges";
 
 /**
  * `canvas-gauge-card`
@@ -73,7 +73,11 @@ class CanvasGaugeCard extends HTMLElement {
                     display: block !important;
                     border-radius: 2px !important;
                     transition: all 0.30s ease-out !important;
-                    background-color: transparent !important;
+                    background-color: ${
+                      this.config.background_color
+                        ? this.config.background_color
+                        : "transparent"
+                    } !important;
                 }
                 #cardroot {
                     width: ${elemContainer.width}px;
@@ -135,14 +139,14 @@ class CanvasGaugeCard extends HTMLElement {
     //ctx.fillRect(0, 0, elemCanvas.width, elemCanvas.height);
     var gauge;
     if (this.config.gauge.type == "linear-gauge") {
-      gauge = new LinearGauge({
+      gauge = new Gauge.LinearGauge({
         renderTo: elemCanvas,
         height: elemCanvas.height,
         width: elemCanvas.width,
         value: 0
       });
     } else if (this.config.gauge.type == "radial-gauge") {
-      gauge = new RadialGauge({
+      gauge = new Gauge.RadialGauge({
         renderTo: elemCanvas,
         height: elemCanvas.height,
         width: elemCanvas.width,