From 2dc6d8ea940d2d0667e8d7b0b86c59112a0cc8c0 Mon Sep 17 00:00:00 2001 From: Uri Shaked Date: Mon, 13 Sep 2021 21:08:43 +0300 Subject: [PATCH 1/5] chore(deps): npm audit fix --- package-lock.json | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index dcedbce..b2dc2e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19723,16 +19723,6 @@ "minipass": "^3.0.0" } }, - "minizlib": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", - "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "dev": true, - "requires": { - "minipass": "^3.0.0", - "yallist": "^4.0.0" - } - }, "mississippi": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz", @@ -23548,14 +23538,12 @@ }, "tar": { "version": "6.1.8", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.8.tgz", - "integrity": "sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A==", + "resolved": "", "dev": true, "requires": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", "minipass": "^3.0.0", - "minizlib": "^2.1.1", "mkdirp": "^1.0.3", "yallist": "^4.0.0" }, From 662860d76ea88092f16fb0f162dd9f409da71174 Mon Sep 17 00:00:00 2001 From: Uri Shaked Date: Mon, 13 Sep 2021 21:10:13 +0300 Subject: [PATCH 2/5] fix(7segment): typo in comment --- src/7segment-element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/7segment-element.ts b/src/7segment-element.ts index e0a268a..1054977 100644 --- a/src/7segment-element.ts +++ b/src/7segment-element.ts @@ -30,7 +30,7 @@ export class SevenSegmentElement extends LitElement { @property() pins: 'top' | 'extend' | 'none' = 'top'; /** - * The values for the individual segments. Each digits has 8 + * The values for the individual segments. Each digit has 8 * segment values in the following order: A, B, C, D, E, F, G, DP * * The values are 1 for a lit segment, and 0 for an unlit segment. From d66e03967a9a481774b6470bbe57f0c2a1d88a41 Mon Sep 17 00:00:00 2001 From: Uri Shaked Date: Mon, 13 Sep 2021 21:59:08 +0300 Subject: [PATCH 3/5] feat(led-bar-graph): add element #104 --- src/index.ts | 1 + src/led-bar-graph-element.stories.ts | 27 +++++++++++ src/led-bar-graph-element.ts | 72 ++++++++++++++++++++++++++++ src/react-types.ts | 2 + 4 files changed, 102 insertions(+) create mode 100644 src/led-bar-graph-element.stories.ts create mode 100644 src/led-bar-graph-element.ts diff --git a/src/index.ts b/src/index.ts index 5286167..94a9548 100644 --- a/src/index.ts +++ b/src/index.ts @@ -44,3 +44,4 @@ export { KY040Element } from './ky-040-element'; export { PhotoresistorSensorElement } from './photoresistor-sensor-element'; export { RGBLedElement } from './rgb-led-element'; export { ILI9341Element } from './ili9341-element'; +export { LedBarGraphElement } from './led-bar-graph-element'; diff --git a/src/led-bar-graph-element.stories.ts b/src/led-bar-graph-element.stories.ts new file mode 100644 index 0000000..e1ad009 --- /dev/null +++ b/src/led-bar-graph-element.stories.ts @@ -0,0 +1,27 @@ +import { html } from 'lit-html'; +import './led-bar-graph-element'; + +export default { + title: 'Led Bar Graph', + component: 'wokwi-led-bar-graph', + argTypes: { + color: { control: { type: 'color' } }, + values: 'string', + }, + args: { + values: '[1, 0, 1, 0, 1, 0, 1, 0, 1, 0]', + color: 'red', + }, +}; + +const Template = ({ color, values }) => + html``; + +export const Red = Template.bind({}); +Red.args = { color: 'red' }; + +export const Green = Template.bind({}); +Green.args = { color: 'lime' }; + +export const Off = Template.bind({}); +Off.args = { color: 'lime', values: '[]' }; diff --git a/src/led-bar-graph-element.ts b/src/led-bar-graph-element.ts new file mode 100644 index 0000000..bf7ce00 --- /dev/null +++ b/src/led-bar-graph-element.ts @@ -0,0 +1,72 @@ +import { customElement, html, LitElement, property, svg } from 'lit-element'; +import { ElementPin } from './pin'; +import { mmToPix } from './utils/units'; + +const segments = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; +const mm = mmToPix; +const anodeX = 1.27 * mm; +const cathodeX = 8.83 * mm; + +@customElement('wokwi-led-bar-graph') +export class LedBarGraphElement extends LitElement { + /** The color of a lit segment */ + @property() color = 'red'; + + /** The color of an unlit segment */ + @property() offColor = '#444'; + + readonly pinInfo: ElementPin[] = [ + { name: 'A1', x: anodeX, y: 1.27 * mm, number: 1, description: 'Anode 1', signals: [] }, + { name: 'A2', x: anodeX, y: 3.81 * mm, number: 2, description: 'Anode 2', signals: [] }, + { name: 'A3', x: anodeX, y: 6.35 * mm, number: 3, description: 'Anode 3', signals: [] }, + { name: 'A4', x: anodeX, y: 8.89 * mm, number: 4, description: 'Anode 4', signals: [] }, + { name: 'A5', x: anodeX, y: 11.43 * mm, number: 5, description: 'Anode 5', signals: [] }, + { name: 'A6', x: anodeX, y: 13.97 * mm, number: 6, description: 'Anode 6', signals: [] }, + { name: 'A7', x: anodeX, y: 16.51 * mm, number: 7, description: 'Anode 7', signals: [] }, + { name: 'A8', x: anodeX, y: 19.05 * mm, number: 8, description: 'Anode 8', signals: [] }, + { name: 'A9', x: anodeX, y: 21.59 * mm, number: 9, description: 'Anode 9', signals: [] }, + { name: 'A10', x: anodeX, y: 24.13 * mm, number: 10, description: 'Anode 10', signals: [] }, + { name: 'C1', x: cathodeX, y: 1.27 * mm, number: 20, description: 'Cathode 1', signals: [] }, + { name: 'C2', x: cathodeX, y: 3.81 * mm, number: 19, description: 'Cathode 2', signals: [] }, + { name: 'C3', x: cathodeX, y: 6.35 * mm, number: 18, description: 'Cathode 3', signals: [] }, + { name: 'C4', x: cathodeX, y: 8.89 * mm, number: 17, description: 'Cathode 4', signals: [] }, + { name: 'C5', x: cathodeX, y: 11.43 * mm, number: 16, description: 'Cathode 5', signals: [] }, + { name: 'C6', x: cathodeX, y: 13.97 * mm, number: 15, description: 'Cathode 6', signals: [] }, + { name: 'C7', x: cathodeX, y: 16.51 * mm, number: 14, description: 'Cathode 7', signals: [] }, + { name: 'C8', x: cathodeX, y: 19.05 * mm, number: 13, description: 'Cathode 8', signals: [] }, + { name: 'C9', x: cathodeX, y: 21.59 * mm, number: 12, description: 'Cathode 9', signals: [] }, + { name: 'C10', x: cathodeX, y: 24.13 * mm, number: 11, description: 'Cathode 10', signals: [] }, + ]; + + /** + * The values for the individual segments: 1 for a lit segment, and 0 for + * an unlit segment. + */ + @property({ type: Array }) values: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + + render() { + const { values, color, offColor } = this; + return html` + + + + + + + + ${segments.map( + (index) => + svg`` + )} + + `; + } +} diff --git a/src/react-types.ts b/src/react-types.ts index 0931ec1..1224858 100644 --- a/src/react-types.ts +++ b/src/react-types.ts @@ -43,6 +43,7 @@ import { KY040Element } from './ky-040-element'; import { PhotoresistorSensorElement } from './photoresistor-sensor-element'; import { RGBLedElement } from './rgb-led-element'; import { ILI9341Element } from './ili9341-element'; +import { LedBarGraphElement } from './led-bar-graph-element'; type WokwiElement = Partial & React.ClassAttributes; @@ -91,6 +92,7 @@ declare global { 'wokwi-photoresistor-sensor': WokwiElement; 'wokwi-rgb-led': WokwiElement; 'wokwi-ili9341': WokwiElement; + 'wokwi-led-bar-graph': WokwiElement; } } } From 6c0c976ed6e1e4ec414bd2324492a8389ad6a977 Mon Sep 17 00:00:00 2001 From: Uri Shaked Date: Wed, 15 Sep 2021 22:09:00 +0300 Subject: [PATCH 4/5] feat(led-graph-bar): add palette presets (GYR/BCYR) --- src/led-bar-graph-element.stories.ts | 6 ++++++ src/led-bar-graph-element.ts | 16 ++++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/led-bar-graph-element.stories.ts b/src/led-bar-graph-element.stories.ts index e1ad009..9be60fb 100644 --- a/src/led-bar-graph-element.stories.ts +++ b/src/led-bar-graph-element.stories.ts @@ -25,3 +25,9 @@ Green.args = { color: 'lime' }; export const Off = Template.bind({}); Off.args = { color: 'lime', values: '[]' }; + +export const SpecialGYR = Template.bind({}); +SpecialGYR.args = { color: 'GYR', values: '[1,1,1,1,1,1,1,1,1,1]' }; + +export const SpecialBCYR = Template.bind({}); +SpecialBCYR.args = { color: 'BCYR', values: '[1,1,1,1,1,1,1,1,1,1]' }; diff --git a/src/led-bar-graph-element.ts b/src/led-bar-graph-element.ts index bf7ce00..a100213 100644 --- a/src/led-bar-graph-element.ts +++ b/src/led-bar-graph-element.ts @@ -7,9 +7,20 @@ const mm = mmToPix; const anodeX = 1.27 * mm; const cathodeX = 8.83 * mm; +const green = '#9eff3c'; +const blue = '#2c95fa'; +const cyan = '#6cf9dc'; +const yellow = '#f1d73c'; +const red = '#dc012d'; + +const colorPalettes: Record = { + GYR: [green, green, green, green, green, yellow, yellow, yellow, red, red], + BCYR: [blue, cyan, cyan, cyan, cyan, yellow, yellow, yellow, red, red], +}; + @customElement('wokwi-led-bar-graph') export class LedBarGraphElement extends LitElement { - /** The color of a lit segment */ + /** The color of a lit segment. Either HTML color or the special values GYR / BCYR */ @property() color = 'red'; /** The color of an unlit segment */ @@ -46,6 +57,7 @@ export class LedBarGraphElement extends LitElement { render() { const { values, color, offColor } = this; + const palette = colorPalettes[color]; return html` svg`` )} From 74d3d3ce5298219341c42c8268831ca52d78e3e7 Mon Sep 17 00:00:00 2001 From: Uri Shaked Date: Wed, 15 Sep 2021 22:10:55 +0300 Subject: [PATCH 5/5] 0.51.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b2dc2e3..153fe7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@wokwi/elements", - "version": "0.50.1", + "version": "0.51.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ec9e103..92ef097 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wokwi/elements", - "version": "0.50.1", + "version": "0.51.0", "main": "dist/cjs/index.js", "module": "./dist/esm/index.js", "types": "./dist/esm/index.d.ts",