Skip to content

Commit e0f280e

Browse files
authored
Backgroud color support (#20)
This adds background_color support instead of white. See docs for details.
1 parent 9eeba96 commit e0f280e

File tree

11 files changed

+258
-34
lines changed

11 files changed

+258
-34
lines changed

.devcontainer/configuration.yaml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
default_config:
2+
lovelace:
3+
mode: yaml
4+
demo:
5+
6+
sensor:
7+
- platform: systemmonitor
8+
resources:
9+
- type: disk_use_percent
10+
arg: /home
11+
- type: memory_use_percent
12+
- type: processor_use
13+
- type: last_boot
14+
- type: network_out
15+
arg: "wlp2s0"
16+
- type: load_1m
17+
- type: load_5m
18+
- type: load_15m

.devcontainer/devcontainer.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// See https://aka.ms/vscode-remote/devcontainer.json for format details.
2+
{
3+
"name": "Boilerplate Card Development",
4+
"image": "ludeeus/devcontainer:monster-stable",
5+
"context": "..",
6+
"appPort": ["5000:5000", "9123:8123"],
7+
"postCreateCommand": "npm install",
8+
"runArgs": [
9+
"-v",
10+
"${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
11+
],
12+
"extensions": [
13+
"github.vscode-pull-request-github",
14+
"eamodio.gitlens",
15+
"dbaeumer.vscode-eslint",
16+
"esbenp.prettier-vscode",
17+
"bierner.lit-html",
18+
"runem.lit-plugin",
19+
"auchenberg.vscode-browser-preview",
20+
"davidanson.vscode-markdownlint",
21+
"redhat.vscode-yaml"
22+
],
23+
"settings": {
24+
"files.eol": "\n",
25+
"editor.tabSize": 4,
26+
"terminal.integrated.shell.linux": "/bin/bash",
27+
"editor.formatOnPaste": false,
28+
"editor.formatOnSave": true,
29+
"editor.formatOnType": true,
30+
"files.trimTrailingWhitespace": true
31+
}
32+
}

.devcontainer/ui-lovelace.yaml

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
resources:
2+
- url: http://127.0.0.1:5000/canvas-gauge-card.js?v6
3+
type: module
4+
views:
5+
- title: Example
6+
cards:
7+
- type: "custom:canvas-gauge-card"
8+
name: Canvas Guage Card Development
9+
card_height: 125
10+
#background_color: "#000"
11+
entity: sensor.processor_use
12+
gauge:
13+
colorValueBoxBackground: "#000"
14+
borderShadowWidth: 0
15+
borderOuterWidth: 0
16+
borderMiddleWidth: 0
17+
borderInnerWidth: 0
18+
animationDuration: 1500
19+
animationRule: linear
20+
borders: false
21+
colorPlate: "#ddd"
22+
height: 210
23+
highlights:
24+
- color: "rgba(200, 50, 50, .75)"
25+
from: 80
26+
to: 100
27+
majorTicks:
28+
- "0"
29+
- "10"
30+
- "20"
31+
- "30"
32+
- "40"
33+
- "50"
34+
- "60"
35+
- "70"
36+
- "80"
37+
- "90"
38+
- "100"
39+
maxValue: 100
40+
minValue: 0
41+
minorTicks: 2
42+
needleCircleInner: false
43+
needleCircleOuter: true
44+
needleCircleSize: 7
45+
needleType: arrow
46+
needleWidth: 2
47+
startAngle: 90
48+
strokeTicks: true
49+
ticksAngle: 180
50+
type: radial-gauge
51+
valueBox: false
52+
width: 210
53+
style:
54+
left: 4.2%
55+
top: 9.6%
56+
transform: none

.github/workflows/build.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: "Build"
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
- backgroud-color
8+
pull_request:
9+
branches:
10+
- master
11+
- backgroud-color
12+
13+
jobs:
14+
build:
15+
name: Test build
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: actions/checkout@v1
19+
- name: Build
20+
run: |
21+
npm install
22+
npm run build

.github/workflows/release.yml

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
name: Release
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
jobs:
8+
release:
9+
name: Prepare release
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v1
13+
14+
# Build
15+
- name: Build the file
16+
run: |
17+
cd /home/runner/work/canvas-gauge-card/canvas-gauge-card
18+
npm install
19+
npm run build
20+
21+
# Upload build file to the releas as an asset.
22+
- name: Upload zip to release
23+
uses: svenstaro/upload-release-action@v1-release
24+
25+
with:
26+
repo_token: ${{ secrets.GITHUB_TOKEN }}
27+
file: /home/runner/work/canvas-gauge-card/canvas-gauge-card/dist/canvas-gauge-card.js
28+
asset_name: canvas-gauge-card.js
29+
tag: ${{ github.ref }}
30+
overwrite: true

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/.rpt2_cache/
3+
package-lock.json
4+
dist

dist/README.md

Lines changed: 0 additions & 3 deletions
This file was deleted.

dist/gauge.min.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "canvas-gauge-card",
3+
"version": "0.0.4",
4+
"description": "Lovelace canvas-gauge-card",
5+
"keywords": [
6+
"home-assistant",
7+
"homeassistant",
8+
"hass",
9+
"automation",
10+
"lovelace",
11+
"custom-cards",
12+
"canvas-gauge"
13+
],
14+
"module": "canvas-gauge-card.js",
15+
"repository": "[email protected]:custom_cards/canvas-gauge-card.git",
16+
"author": "@helto4real",
17+
"license": "MIT",
18+
"dependencies": {
19+
"@types/canvas-gauges": "^2.1.2",
20+
"canvas-gauges": "^2.1.5",
21+
"lit-element": "^2.2.1"
22+
},
23+
"devDependencies": {
24+
"@babel/core": "^7.6.4",
25+
"@babel/plugin-proposal-class-properties": "^7.5.5",
26+
"@babel/plugin-proposal-decorators": "^7.4.0",
27+
"@rollup/plugin-commonjs": "^11.0.2",
28+
"@rollup/plugin-json": "^4.0.0",
29+
"@rollup/plugin-node-resolve": "^7.1.1",
30+
"prettier": "^1.18.2",
31+
"rollup": "^1.32.0",
32+
"rollup-plugin-babel": "^4.3.3",
33+
"rollup-plugin-legacy": "^1.0.0",
34+
"rollup-plugin-serve": "^1.0.1",
35+
"rollup-plugin-terser": "^5.1.2",
36+
"rollup-plugin-uglify": "^6.0.3"
37+
},
38+
"scripts": {
39+
"build": "rollup ./src/canvas-gauge-card.js -o ./dist/canvas-gauge-card.js",
40+
"start": "rollup -c --watch"
41+
}
42+
}

rollup.config.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// import typescript from "rollup-plugin-typescript2";
2+
import commonjs from "@rollup/plugin-commonjs";
3+
import nodeResolve from "@rollup/plugin-node-resolve";
4+
import babel from "rollup-plugin-babel";
5+
import { terser } from "rollup-plugin-terser";
6+
import serve from "rollup-plugin-serve";
7+
import json from "@rollup/plugin-json";
8+
import legacy from "rollup-plugin-legacy";
9+
10+
const dev = process.env.ROLLUP_WATCH;
11+
12+
const serveopts = {
13+
contentBase: ["./dist"],
14+
host: "0.0.0.0",
15+
port: 5000,
16+
allowCrossOrigin: true,
17+
headers: {
18+
"Access-Control-Allow-Origin": "*"
19+
}
20+
};
21+
22+
const plugins = [
23+
nodeResolve({ browser: true }),
24+
commonjs(),
25+
// typescript(),
26+
json(),
27+
babel({
28+
exclude: "node_modules/**"
29+
}),
30+
legacy({
31+
"gauge.min.js": "Gauge"
32+
}),
33+
dev && serve(serveopts),
34+
!dev && terser()
35+
];
36+
37+
export default [
38+
{
39+
input: "src/canvas-gauge-card.js",
40+
output: {
41+
dir: "dist",
42+
format: "es"
43+
},
44+
plugins: [...plugins]
45+
}
46+
];

0 commit comments

Comments
 (0)