Skip to content

Commit 8377143

Browse files
authored
Add Relative Slider Functionality (#23)
- Refactor - Add relative fader functionality
1 parent 468b747 commit 8377143

File tree

7 files changed

+865
-691
lines changed

7 files changed

+865
-691
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ This configuration applies to all faders in the card
4848
| `faderInactiveColor` | The color of the track when the channel is muted/not-active | `#f00` |
4949
| `faderTheme` | How should the fader's display. Options are `modern`/`physical` | `modern` |
5050
| `updateWhileMoving` | If set, the entity values will be updated while moving the fader. Off by default to prevent API request flooding. | `false` |
51+
| `relativeFader` | If true, clicking a fader sets focus and mouse movement adjusts the value relative to the starting point, rather than setting the value directly. | `false` |
5152
| `alwaysShowFaderValue` | If set, the fader value will be displayed even when the fader is not active. | `false` |
5253
| `haCard` | Should the card include a `<ha-card>` element? Boolean | `true` |
5354
| `title` | Add a title to the card | |
@@ -84,6 +85,7 @@ This is the configuration for each individual fader
8485
faderActiveColor: '#22ba00'
8586
faderInactiveColor: '#F00'
8687
faderTheme: modern
88+
relativeFader: true
8789
faders:
8890
- entity_id: number.9f3fea35f92bc3ab474f8f76ad071ab9_bus_11_fader
8991
name: test name

dist/mixer-card.js

Lines changed: 375 additions & 271 deletions
Large diffs are not rendered by default.

package-lock.json

Lines changed: 35 additions & 80 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mixer-card",
3-
"version": "0.1.13",
3+
"version": "0.1.14",
44
"description": "Lovelace card to use for Audio mixers",
55
"keywords": [
66
"home-assistant",
@@ -35,20 +35,21 @@
3535
"eslint-plugin-import": "^2.31.0",
3636
"eslint-plugin-n": "^16.6.2",
3737
"eslint-plugin-promise": "^6.6.0",
38-
"eslint-plugin-vue": "^10.1.0",
38+
"eslint-plugin-vue": "^10.5.0",
3939
"rollup": "^1.32.1",
4040
"rollup-plugin-babel": "^4.3.3",
4141
"rollup-plugin-commonjs": "^10.1.0",
4242
"rollup-plugin-node-resolve": "^5.2.0",
4343
"rollup-plugin-serve": "^1.0.1",
4444
"rollup-plugin-terser": "^5.1.2",
4545
"rollup-plugin-typescript2": "^0.24.3",
46-
"typescript": "^3.6.4"
46+
"typescript": "^3.6.4",
47+
"vue-eslint-parser": "^10.2.0"
4748
},
4849
"scripts": {
4950
"start": "rollup -c --watch",
5051
"build": "npm run lint && npm run rollup",
51-
"lint": "eslint src/*.js",
52+
"lint": "eslint --fix src/*.js",
5253
"rollup": "rollup -c"
5354
}
5455
}

src/helpers.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { computeStateDisplay, computeStateDomain } from 'custom-card-helpers'
2+
import { html } from 'lit'
3+
4+
export function getConfigDefaults (config) {
5+
return {
6+
borderRadius: config && config.borderRadius ? config.borderRadius : '12px',
7+
faderWidth: config && config.faderWidth ? config.faderWidth : '150px',
8+
faderHeight: config && config.faderHeight ? config.faderHeight : '400px',
9+
faderInactiveColor: config && config.faderInactiveColor ? config.faderInactiveColor : '#f00',
10+
faderThumbColor: config && config.faderThumbColor ? config.faderThumbColor : '#ddd',
11+
faderTrackColor: config && config.faderTrackColor ? config.faderTrackColor : '#ddd',
12+
faderActiveColor: config && config.faderActiveColor ? config.faderActiveColor : '#22ba00',
13+
faderTheme: config && config.faderTheme ? config.faderTheme : 'modern',
14+
updateWhileMoving: config && config.updateWhileMoving ? config.updateWhileMoving : false,
15+
alwaysShowFaderValue: config && config.alwaysShowFaderValue ? config.alwaysShowFaderValue : false,
16+
haCard: config && config.haCard !== undefined ? config.haCard : true,
17+
description: config && config.description ? config.description : '',
18+
title: config && config.title ? config.title : ''
19+
}
20+
}
21+
22+
export function generateHeader (cfg) {
23+
const header = cfg.title ? html`<h1 class='card-header'><div class='name'>${cfg.title}</div></div>` : ''
24+
const desc = cfg.description ? html`<p class='mixer-description'>${cfg.description}</p>` : ''
25+
return html`${header}${desc}`
26+
}
27+
28+
export function getFaderStyle (faderColors, cfg, activeState) {
29+
let style = `--fader-width: ${cfg.faderWidth}; --fader-height: ${cfg.faderHeight}; --fader-border-radius: ${cfg.borderRadius}; `
30+
style += `--fader-color: ${activeState === 'on' ? faderColors.active : faderColors.inactive}; `
31+
style += `--fader-thumb-color: ${faderColors.thumb}; --fader-track-color: ${faderColors.track}; --fader-track-inactive-color: ${faderColors.inactive};`
32+
return style
33+
}
34+
35+
export function getFaderColor (faderRow, cfg) {
36+
return {
37+
track: faderRow.track_color || cfg.faderTrackColor,
38+
active: faderRow.active_color || cfg.faderActiveColor,
39+
inactive: faderRow.inactive_color || cfg.faderInactiveColor,
40+
thumb: faderRow.thumb_color || cfg.faderThumbColor
41+
}
42+
}
43+
44+
export function getFaderIcon (faderRow, stateObj, activeState) {
45+
return activeState === 'on' ? 'mdi:volume-high' : 'mdi:volume-mute'
46+
}
47+
48+
export function getFaderValue (faderRow, stateObj, hass) {
49+
const maxValue = (typeof faderRow.max === 'number') ? faderRow.max : stateObj.attributes.max || 1
50+
const minValue = (typeof faderRow.min === 'number') ? faderRow.min : stateObj.attributes.min || 0
51+
let rawValue = 0
52+
const domain = computeStateDomain(stateObj)
53+
if (domain === 'media_player') {
54+
rawValue = stateObj.attributes.volume_level || 0
55+
} else {
56+
rawValue = stateObj.state
57+
}
58+
const inputValue = Math.round((rawValue - minValue) / (maxValue - minValue) * 100)
59+
let displayValue = inputValue + '%'
60+
if (faderRow.value_entity_id && Object.prototype.hasOwnProperty.call(hass.states, faderRow.value_entity_id)) {
61+
displayValue = computeStateDisplay(hass.localize, hass.states[faderRow.value_entity_id], hass.language)
62+
} else if (faderRow.value_attribute && Object.prototype.hasOwnProperty.call(stateObj.attributes, faderRow.value_attribute)) {
63+
displayValue = stateObj.attributes[faderRow.value_attribute]
64+
}
65+
const suffix = faderRow.value_suffix || ''
66+
if (suffix) {
67+
displayValue += ` ${suffix}`
68+
}
69+
return { displayValue, inputValue }
70+
}

0 commit comments

Comments
 (0)