Lights panel migration - WIP

This commit is contained in:
Fabio Manganiello 2020-12-09 21:16:07 +01:00
parent 79179746a7
commit 2de1e3ebe6
22 changed files with 1193 additions and 152 deletions

View file

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-0a24466a.09555bc4.css" rel="prefetch"><link href="/static/css/chunk-16a3f845.79277e60.css" rel="prefetch"><link href="/static/css/chunk-24ff873d.c68a1871.css" rel="prefetch"><link href="/static/css/chunk-4bbbb9a3.c0cffcb7.css" rel="prefetch"><link href="/static/css/chunk-5710a9bc.b05a2ff9.css" rel="prefetch"><link href="/static/css/chunk-62a3d08e.698b2d60.css" rel="prefetch"><link href="/static/css/chunk-ac6aae98.a322204e.css" rel="prefetch"><link href="/static/css/chunk-e8078048.67cca65c.css" rel="prefetch"><link href="/static/js/chunk-0a24466a.ebe2c04f.js" rel="prefetch"><link href="/static/js/chunk-16a3f845.3bdbbdb5.js" rel="prefetch"><link href="/static/js/chunk-24ff873d.0f916e0f.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.377ea7b0.js" rel="prefetch"><link href="/static/js/chunk-4bbbb9a3.c1ba820e.js" rel="prefetch"><link href="/static/js/chunk-5710a9bc.5aba1b9a.js" rel="prefetch"><link href="/static/js/chunk-62a3d08e.cd0ca5eb.js" rel="prefetch"><link href="/static/js/chunk-ac6aae98.dda16597.js" rel="prefetch"><link href="/static/js/chunk-e8078048.bc52467d.js" rel="prefetch"><link href="/static/css/app.ac911816.css" rel="preload" as="style"><link href="/static/js/app.b4cc8001.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.e8b1896c.js" rel="preload" as="script"><link href="/static/css/app.ac911816.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.e8b1896c.js"></script><script src="/static/js/app.b4cc8001.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-0a24466a.2793b349.css" rel="prefetch"><link href="/static/css/chunk-16a3f845.79277e60.css" rel="prefetch"><link href="/static/css/chunk-24ff873d.c68a1871.css" rel="prefetch"><link href="/static/css/chunk-4bbbb9a3.c0cffcb7.css" rel="prefetch"><link href="/static/css/chunk-5710a9bc.b05a2ff9.css" rel="prefetch"><link href="/static/css/chunk-62a3d08e.698b2d60.css" rel="prefetch"><link href="/static/css/chunk-ac6aae98.a322204e.css" rel="prefetch"><link href="/static/css/chunk-e8078048.67cca65c.css" rel="prefetch"><link href="/static/js/chunk-0a24466a.ebe2c04f.js" rel="prefetch"><link href="/static/js/chunk-16a3f845.3bdbbdb5.js" rel="prefetch"><link href="/static/js/chunk-24ff873d.0f916e0f.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.377ea7b0.js" rel="prefetch"><link href="/static/js/chunk-4bbbb9a3.c1ba820e.js" rel="prefetch"><link href="/static/js/chunk-5710a9bc.5aba1b9a.js" rel="prefetch"><link href="/static/js/chunk-62a3d08e.cd0ca5eb.js" rel="prefetch"><link href="/static/js/chunk-ac6aae98.dda16597.js" rel="prefetch"><link href="/static/js/chunk-e8078048.bc52467d.js" rel="prefetch"><link href="/static/css/app.ac911816.css" rel="preload" as="style"><link href="/static/js/app.9f4771bd.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.e8b1896c.js" rel="preload" as="script"><link href="/static/css/app.ac911816.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.e8b1896c.js"></script><script src="/static/js/app.9f4771bd.js"></script></body></html>

View file

@ -0,0 +1,192 @@
<template>
<div class="controls light-controls" @click="$event.stopPropagation()">
<Loading v-if="loading" />
<div class="row" v-if="state.bri != null">
<div class="col-1 icon">
<i class="fas fa-sun" />
</div>
<div class="col-11 control">
<Slider :range="colorConverter.ranges.bri" :disabled="loading" :value="state.bri"
@mouseup.stop="$emit(light ? 'set-light' : 'set-group', {brightness: parseInt($event.target.value)})" />
</div>
</div>
<div class="row" v-if="state.ct != null">
<div class="col-1 icon">
<i class="fas fa-thermometer-half" />
</div>
<div class="col-11 control">
<Slider :range="colorConverter.ranges.ct" :disabled="loading" :value="state.ct"
@change.stop="$emit(light ? 'set-light' : 'set-group', {temperature: parseInt($event.target.value)})" />
</div>
</div>
<label class="row" v-if="rgbColor">
<span class="col-1 icon">
<i class="fas fa-palette" />
</span>
<span class="col-11 control">
<input type="color" :value="rgbColor" @change.stop="onColorSelect" />
</span>
</label>
</div>
</template>
<script>
import Slider from "@/components/elements/Slider";
import Loading from "@/components/Loading";
import {ColorConverter} from "@/components/panels/Light/color";
export default {
name: "Controls",
components: {Loading, Slider},
emits: ['set-light', 'set-group'],
props: {
light: {
type: Object,
},
lights: {
type: Object,
},
group: {
type: Object,
},
loading: {
type: Boolean,
default: false,
},
colorConverter: {
type: Object,
default: () => new ColorConverter(),
},
},
computed: {
state() {
if (this.light?.state)
return this.light.state
const state = this.group?.state || {}
if (!this.lights)
return state
const avg = (values) => {
if (!(values && values.length))
return 0
if (values[0] instanceof Array)
return [...values[0].keys()].map((i) => {
return avg(values.map((value) => value[i]))
})
return values.reduce((sum, value) => sum+value, 0) / values.length
}
return {
...state,
...Object.entries(
Object.values(this.lights).reduce((obj, light) => {
['bri', 'hue', 'sat', 'rgb', 'xy', 'red', 'green', 'blue', 'ct'].forEach((attr) => {
if (light.state?.[attr] != null) {
obj[attr] = [...(obj[attr] || []), light.state[attr]]
}
})
return obj
}, {})
).reduce((obj, [attr, values]) => {
obj[attr] = avg(values)
return obj
}, {})
}
},
color() {
return this.getColor(this.state)
},
rgbColor() {
const rgb = this.colorConverter.toRGB(this.state)
if (rgb)
return '#' + rgb.map((x) => {
let hex = x.toString(16)
if (hex.length < 2)
hex = '0' + hex
return hex
}).join('')
return null
},
},
methods: {
onColorSelect(event) {
const rgb = event.target.value.slice(1).split(/(?=(?:..)*$)/).map((t) => parseInt(`0x${t}`))
this.$emit(this.light ? 'set-light' : 'set-group', {
rgb: rgb,
xy: this.colorConverter.rgbToXY(...rgb),
hsl: this.colorConverter.rgbToHsl(...rgb),
brightness: this.colorConverter.rgbToBri(...rgb),
})
},
getColor(state) {
return {
rgb: this.colorConverter.toRGB(state),
xy: this.colorConverter.toXY(state),
hsl: this.colorConverter.toHSL(state),
}
},
},
}
</script>
<style lang="scss" scoped>
$light-controls-bg: white;
.controls {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2.25em;
background: $light-controls-bg;
padding: 0.5em 1em;
border-radius: 1em;
box-shadow: $plugin-panel-shadow;
.row {
width: 100%;
display: flex;
align-items: center;
}
.control {
padding-top: 0.25em;
}
.icon {
opacity: 0.7;
}
input[type=color] {
width: 100%;
border: 0;
}
}
</style>
<style lang="scss">
.light-controls {
.row {
.slider {
margin-top: 0.4em;
}
}
}
</style>

View file

@ -1,31 +1,79 @@
<template> <template>
<div class="light-group-container"> <div class="light-group-container">
<MenuPanel> <MenuPanel>
<li class="header"> <div class="panel-row header">
<button class="back-btn" title="Back" @click="close" v-if="group"> <div class="col-3" v-if="group">
<i class="fas fa-chevron-left" /> <button class="back-btn" title="Back" @click="close">
</button> <i class="fas fa-chevron-left" />
</li> </button>
</div>
<div class="col-6 name" :class="{selected: selectedView === 'group'}"
v-text="groupName" @click="selectedView = selectedView === 'group' ? null : 'group'" />
<div class="col-3 pull-right" v-if="group">
<ToggleSwitch :value="group.state.any_on" @input="$emit('group-toggle', group)" />
</div>
</div>
<div class="no-lights" v-if="!lights || !Object.keys(lights).length"> <div class="no-lights" v-if="!lights || !Object.keys(lights).length">
No lights found No lights found
</div> </div>
<li v-for="(light, id) in lightsSorted" :key="id" v-else> <div class="lights-view" v-else>
<Light :light="light" /> <div class="row view-selector">
</li> <button :class="{selected: selectedView === 'lights'}" title="Lights" @click="selectedView = 'lights'">
<i class="fas fa-lightbulb" /> &nbsp; Lights
</button>
<button :class="{selected: selectedView === 'scenes'}" title="Scenes" @click="selectedView = 'scenes'">
<i class="far fa-image" /> &nbsp; Scenes
</button>
</div>
<div class="view" v-if="selectedView === 'lights'">
<keep-alive>
<div class="panel-row row" :class="{expanded: light.id === selectedLight}"
v-for="(light, id) in lightsSorted" :key="id"
@click="selectedLight = selectedLight === light.id ? null : light.id">
<Light :light="light" :group="group" :collapsed="light.id !== selectedLight"
:color-converter="colorConverter" @toggle="$emit('light-toggle', light)"
@set-light="$emit('set-light', {light: light, value: $event})" />
</div>
</keep-alive>
</div>
<div class="view" v-else-if="selectedView === 'scenes'">
<keep-alive>
<div class="panel-row row" :class="{selected: scene.id === selectedScene}"
v-for="(scene, id) in scenesSorted" :key="id" @click="onSceneSelected(scene.id)">
<Scene :scene="scene" :group="group" />
</div>
</keep-alive>
</div>
<div class="view group-controls" v-else-if="selectedView === 'group'">
<keep-alive>
<Controls :group="group" :lights="lights" :color-converter="colorConverter"
@set-group="$emit('set-group', $event)" />
</keep-alive>
</div>
</div>
</MenuPanel> </MenuPanel>
</div> </div>
</template> </template>
<script> <script>
import Light from "@/components/Light/Light"; import Light from "@/components/Light/Light";
import Scene from "@/components/Light/Scene";
import Controls from "@/components/Light/Controls";
import MenuPanel from "@/components/MenuPanel"; import MenuPanel from "@/components/MenuPanel";
import ToggleSwitch from "@/components/elements/ToggleSwitch";
import {ColorConverter} from "@/components/panels/Light/color";
export default { export default {
name: "Group", name: "Group",
emits: ['close'], emits: ['close', 'group-toggle', 'light-toggle', 'set-light', 'select-scene'],
components: {MenuPanel, Light}, components: {ToggleSwitch, MenuPanel, Light, Scene, Controls},
props: { props: {
lights: { lights: {
type: Object, type: Object,
@ -34,6 +82,23 @@ export default {
group: { group: {
type: Object, type: Object,
}, },
scenes: {
type: Object,
},
colorConverter: {
type: Object,
default: () => new ColorConverter(),
},
},
data() {
return {
selectedLight: null,
selectedScene: null,
selectedView: 'lights',
}
}, },
computed: { computed: {
@ -50,6 +115,28 @@ export default {
} }
}) })
}, },
scenesSorted() {
if (!this.scenes)
return []
return Object.entries(this.scenes)
.sort((a, b) => a[1].name.localeCompare(b[1].name))
.map(([id, scene]) => {
return {
...scene,
id: id,
}
})
},
groupName() {
if (this.group?.name)
return this.group.name
if (this.group?.id != null)
return `[Group ${this.group.id}]`
return 'Lights'
},
}, },
methods: { methods: {
@ -57,6 +144,11 @@ export default {
event.stopPropagation() event.stopPropagation()
this.$emit('close') this.$emit('close')
}, },
onSceneSelected(sceneId) {
this.selectedScene = sceneId
this.$emit('select-scene', sceneId)
},
}, },
} }
</script> </script>
@ -64,23 +156,80 @@ export default {
<style lang="scss"> <style lang="scss">
.light-group-container { .light-group-container {
width: 100%; width: 100%;
height: 100%; min-height: 100%;
.row.panel-row {
flex-direction: column;
&.expanded,
&.selected {
background: $selected-bg;
}
}
.header { .header {
padding: 0.5em !important;
display: flex;
align-items: center;
.back-btn { .back-btn {
border: 0; border: 0;
background: none;
&:hover { &:hover {
border: 0; border: 0;
color: $default-hover-fg; color: $default-hover-fg;
} }
} }
.name {
text-align: center;
&.selected {
color: $selected-fg;
}
&:hover {
color: $default-hover-fg;
}
}
} }
li.header { .view-selector {
.back-btn { width: 100%;
background: none; border-radius: 0;
margin-left: -0.75em;
button {
width: 50%;
padding: 1.5em;
text-align: left;
opacity: 0.8;
box-shadow: $plugin-panel-entry-shadow;
&:first-child {
border-right: 0;
}
&.selected {
background: $selected-bg;
}
&:hover {
background: $hover-bg;
}
}
}
}
</style>
<style lang="scss">
.light-group-container {
.group-controls {
margin: 1em;
.controls {
margin: 0;
padding: 1em;
} }
} }
} }

View file

@ -1,23 +1,33 @@
<template> <template>
<MenuPanel> <MenuPanel>
<li class="header"> <div class="panel-row header">
<i class="icon fas fa-home" /> <div class="col-3">
<span class="name">Rooms</span> <i class="icon fas fa-home" />
</li> </div>
<li class="row group" v-for="group in groupsSorted" :key="group.id" @click="$emit('select', group.id)"> <div class="col-6 name">
Rooms
</div>
<div class="col-3 pull-right">
<ToggleSwitch :value="anyLightsOn" @input="$emit('toggle')" />
</div>
</div>
<div class="panel-row row group" v-for="group in groupsSorted" :key="group.id" @click="$emit('select', group.id)">
<span class="name col-9"> <span class="name col-9">
{{ group.name || `[Group #${group.id}]` }} {{ group.name || `[Group ${group.id}]` }}
</span> </span>
<span class="controls col-3 pull-right"> <span class="controls col-3 pull-right">
<ToggleSwitch :value="group.state.any_on" :disabled="group.id in (loadingGroups || {})" @input="toggleGroup(group)" /> <ToggleSwitch :value="group.state.any_on" :disabled="group.id in (loadingGroups || {})"
@input="$emit('toggle', group)" />
</span> </span>
</li> </div>
</MenuPanel> </MenuPanel>
</template> </template>
<script> <script>
import MenuPanel from "@/components/MenuPanel"; import MenuPanel from "@/components/MenuPanel";
import ToggleSwitch from "@/components/elements/ToggleSwitch"; import ToggleSwitch from "@/components/elements/ToggleSwitch";
import {ColorConverter} from "@/components/panels/Light/color";
export default { export default {
name: "Groups", name: "Groups",
@ -32,7 +42,12 @@ export default {
loadingGroups: { loadingGroups: {
type: Object, type: Object,
default: () => {}, default: () => {},
} },
colorConverter: {
type: Object,
default: () => new ColorConverter(),
},
}, },
computed: { computed: {
@ -46,22 +61,31 @@ export default {
} }
}) })
}, },
},
methods: { anyLightsOn() {
toggleGroup(group) { for (const group of Object.values(this.groups))
this.$emit('toggle', group) if (group?.state?.any_on)
} return true
}
return false
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header { .header {
display: flex; display: flex;
align-items: center;
padding-top: 0.75em !important;
padding-bottom: 0.75em !important;
.icon { .icon {
margin-right: 1em; margin-left: 0.5em;
}
.name {
text-align: center;
} }
} }

View file

@ -1,21 +1,69 @@
<template> <template>
<div class="light"> <div class="light" :class="{expanded: !collapsed}" ref="element">
{{ light.name || light.id }} <div class="row">
<span class="name col-9" @click="expandToggle">
{{ light.name || `[Light ${light.id}]` }}
</span>
<span class="toggle col-3 pull-right">
<ToggleSwitch :value="light.state.on" :disabled="loading" @input="$emit('toggle', light)" />
</span>
</div>
<div class="row fade-in" v-if="!collapsed">
<Controls :light="light" :loading="loading" :color-converter="colorConverter"
@set-light="$emit('set-light', $event)" />
</div>
</div> </div>
</template> </template>
<script> <script>
import ToggleSwitch from "@/components/elements/ToggleSwitch";
import Controls from "@/components/Light/Controls";
import {ColorConverter} from "@/components/panels/Light/color";
export default { export default {
name: "Light", name: "Light",
components: {Controls, ToggleSwitch},
emits: ['toggle', 'set-light', 'collapsed', 'expanded'],
props: { props: {
light: { light: {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
group: {
type: Object,
default: () => {},
},
loading: {
type: Boolean,
default: false,
},
collapsed: {
type: Boolean,
default: true,
},
colorConverter: {
type: Object,
default: () => new ColorConverter(),
},
},
methods: {
expandToggle() {
this.$emit(this.collapsed ? 'expanded' : 'collapsed')
},
}, },
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.expanded {
.name {
font-size: 1.25em;
}
}
</style> </style>

View file

@ -0,0 +1,38 @@
<template>
<Loading v-if="loading" />
<div class="scene row name" @click="onSelect">
{{ scene.name || `[Scene ${scene.id}]` }}
</div>
</template>
<script>
export default {
name: "Light",
emits: ['select'],
props: {
scene: {
type: Object,
default: () => {},
},
group: {
type: Object,
default: () => {},
},
loading: {
type: Boolean,
default: false,
},
},
methods: {
onSelect() {
if (this.loading)
return false
this.$emit('select')
},
},
}
</script>

View file

@ -1,19 +1,14 @@
<template> <template>
<div class="menu-panel"> <div class="menu-panel">
<ul :style="style"> <div class="content">
<slot /> <slot />
</ul> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "MenuPanel", name: "MenuPanel",
props: {
style: {
type: [String, Object, Array],
},
},
} }
</script> </script>
@ -27,15 +22,16 @@ export default {
background: $menu-panel-bg; background: $menu-panel-bg;
padding-top: 2em; padding-top: 2em;
ul { .content {
background: $menu-panel-content-bg; background: $menu-panel-content-bg;
border-radius: 15px; border-radius: 15px;
box-shadow: $plugin-panel-shadow; box-shadow: $plugin-panel-shadow;
border: 0; border: 0;
li { .panel-row {
display: flex; display: flex;
padding: 0.5em; margin: 0 !important;
padding: 1em;
box-shadow: $plugin-panel-entry-shadow; box-shadow: $plugin-panel-entry-shadow;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
@ -54,15 +50,15 @@ export default {
border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px;
box-shadow: $plugin-panel-last-entry-shadow; box-shadow: $plugin-panel-last-entry-shadow;
} }
}
&.header { .header {
background: $menu-header-bg;
font-weight: bold;
box-shadow: $menu-header-shadow;
&:hover {
background: $menu-header-bg; background: $menu-header-bg;
font-weight: bold;
box-shadow: $menu-header-shadow;
&:hover {
background: $menu-header-bg;
}
} }
} }
} }
@ -71,11 +67,12 @@ export default {
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
.menu-panel { .menu-panel {
padding-top: 0; padding-top: 0;
ul {
.content {
min-width: 100%; min-width: 100%;
border-radius: 0; border-radius: 0;
li { .row {
&:first-child { &:first-child {
border-radius: 0; border-radius: 0;
} }
@ -90,32 +87,32 @@ export default {
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
.menu-panel { .menu-panel {
ul { .content {
min-width: 65%; min-width: 75%;
} }
} }
} }
@media screen and (min-width: $desktop) { @media screen and (min-width: $desktop) {
.menu-panel { .menu-panel {
ul { .content {
min-width: 40%; min-width: 50%;
} }
} }
} }
@media screen and (min-width: $widescreen) { @media screen and (min-width: $widescreen) {
.menu-panel { .menu-panel {
ul { .content {
min-width: 30%; min-width: 40%;
} }
} }
} }
@media screen and (min-width: $fullhd) { @media screen and (min-width: $fullhd) {
.menu-panel { .menu-panel {
ul { .content {
min-width: 25%; min-width: 35%;
} }
} }
} }

View file

@ -47,7 +47,7 @@ export default {
data() { data() {
return { return {
collapsed: false, collapsed: true,
icons: icons, icons: icons,
host: null, host: null,
} }

View file

@ -0,0 +1,90 @@
<template>
<label>
<input class="slider" type="range" :min="range[0]" :max="range[1]" :value="value"
@change="$emit('input', $event)" @mouseup="$emit('mouseup', $event)"
@mousedown="$emit('mousedown', $event)">
</label>
</template>
<script>
export default {
name: "Slider",
emits: ['input', 'mouseup', 'mousedown'],
props: {
value: {
type: Number,
},
disabled: {
type: Boolean,
default: false,
},
range: {
type: Array,
default: () => [0, 100],
},
},
}
</script>
<style lang="scss" scoped>
.slider {
@include appearance(none);
@include transition(opacity .2s);
width: 100%;
height: 1em;
border-radius: 0.33em;
background: $slider-bg;
outline: none;
&::-webkit-slider-thumb {
@include appearance(none);
width: 1.5em;
height: 1.5em;
border-radius: 50%;
border: 0;
background: $slider-thumb-bg;
cursor: pointer;
}
&::-moz-range-thumb {
@include appearance(none);
width: 1.5em;
height: 1.5em;
border-radius: 50%;
border: 0;
background: $slider-thumb-bg;
cursor: pointer;
}
&[disabled]::-webkit-slider-thumb {
display: none;
width: 0;
}
&[disabled]::-moz-range-thumb {
display: none;
width: 0;
}
&.disabled { opacity: 0.3; }
&::-moz-range-track {
@include appearance(none);
}
&::-moz-range-progress {
background: $slider-progress-bg;
height: 1em;
}
&[disabled]::-webkit-progress-value {
background: none;
}
&[disabled]::-moz-range-progress {
background: none;
}
}
</style>

View file

@ -109,7 +109,7 @@ export default {
border-radius: 50%; border-radius: 50%;
box-shadow: $toggle-dot-shadow; box-shadow: $toggle-dot-shadow;
left: -0.25em; left: -0.25em;
top: -1px; top: -0.05em;
transform: translateX(var(--offset, 0)); transform: translateX(var(--offset, 0));
transition: transform .4s, box-shadow .4s; transition: transform .4s, box-shadow .4s;
@ -152,7 +152,7 @@ export default {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
color: #A6ACCD; color: #A6ACCD;
transform: translateY(4px); transform: translateY(0.2em);
transition: opacity .4s, transform .4s; transition: opacity .4s, transform .4s;
} }
} }
@ -162,7 +162,7 @@ export default {
pointer-events: none; pointer-events: none;
& + span { & + span {
opacity: 1; opacity: 1;
transform: translateY(12px); transform: translateY(0.6em);
} }
} }
} }

View file

@ -1,10 +1,15 @@
<template> <template>
<div class="plugin lights-plugin"> <div class="plugin lights-plugin">
<div class="panel" v-if="selectedGroup == null && groups && Object.keys(groups).length"> <div class="panel" v-if="selectedGroup == null && groups && Object.keys(groups).length">
<Groups :groups="groups" :loading-groups="loadingGroups" @select="selectedGroup = $event" @toggle="toggleGroup" /> <Groups :groups="groups" :loading-groups="loadingGroups" :color-converter="colorConverter"
@select="selectedGroup = $event" @toggle="$emit('group-toggle', $event)" />
</div> </div>
<div class="panel" v-else> <div class="panel" v-else>
<Group :group="groups[selectedGroup]" :lights="displayedLights" @close="closeGroup" /> <Group :group="groups[selectedGroup]" :lights="displayedLights" :scenes="scenesByGroup[selectedGroup]"
:color-converter="colorConverter" @close="closeGroup" @light-toggle="$emit('light-toggle', $event)"
@group-toggle="$emit('group-toggle', $event)" @set-light="$emit('set-light', $event)"
@set-group="$emit('set-group', {groupId: selectedGroup, value: $event})"
@select-scene="$emit('select-scene', {groupId: selectedGroup, sceneId: $event})" />
</div> </div>
</div> </div>
</template> </template>
@ -14,6 +19,7 @@ import Utils from "@/Utils";
import Panel from "@/components/panels/Panel"; import Panel from "@/components/panels/Panel";
import Groups from "@/components/Light/Groups"; import Groups from "@/components/Light/Groups";
import Group from "@/components/Light/Group"; import Group from "@/components/Light/Group";
import {ColorConverter} from "@/components/panels/Light/color";
/** /**
* Generic component for light plugins panels. * Generic component for light plugins panels.
@ -22,7 +28,7 @@ export default {
name: "Light", name: "Light",
components: {Group, Groups}, components: {Group, Groups},
mixins: [Utils, Panel], mixins: [Utils, Panel],
emits: ['group-toggle'], emits: ['group-toggle', 'light-toggle', 'set-light', 'set-group', 'select-scene'],
props: { props: {
lights: { lights: {
@ -41,6 +47,11 @@ export default {
type: Object, type: Object,
}, },
colorConverter: {
type: Object,
default: () => new ColorConverter(),
},
loadingLights: { loadingLights: {
type: Object, type: Object,
default: () => {}, default: () => {},
@ -78,6 +89,51 @@ export default {
return lights return lights
}, {}) }, {})
}, },
lightsByGroup() {
if (!this.groups)
return {}
const self = this
return Object.entries(this.groups).reduce((obj, [groupId, group]) => {
obj[groupId] = group.lights.map((lightId) => self.lights[lightId])
return obj
}, {})
},
groupsByLight() {
if (!this.groups)
return {}
return Object.entries(this.groups).reduce((obj, [groupId, group]) => {
group.lights.forEach((lightId) => {
if (!obj[lightId])
obj[lightId] = {}
obj[lightId][groupId] = group
})
return obj
}, {})
},
scenesByGroup() {
if (!this.scenes)
return {}
const self = this
return Object.entries(this.scenes).reduce((obj, [sceneId, scene]) => {
scene.lights.forEach((lightId) => {
Object.keys(self.groupsByLight[lightId]).forEach((groupId) => {
if (!obj[groupId])
obj[groupId] = {}
obj[groupId][sceneId] = scene
})
})
return obj
}, {})
},
}, },
methods: { methods: {
@ -97,10 +153,6 @@ export default {
closeGroup() { closeGroup() {
this.selectedGroup = null this.selectedGroup = null
}, },
toggleGroup(group) {
this.$emit('group-toggle', group)
},
}, },
mounted() { mounted() {

View file

@ -0,0 +1,104 @@
<script>
export default {
name: "Utils",
data() {
return {
lights: {},
groups: {},
scenes: {},
animations: {},
loadingLights: {},
loadingGroups: {},
}
},
computed: {
groupsByName() {
if (!this.groups)
return {}
return Object.entries(this.groups).reduce((groups, [id, group]) => {
groups[group.name || id] = {
...group,
id: id,
}
return groups
}, {})
},
},
methods: {
_getGroups(groupIds) {
const groups = groupIds.filter((id) => id != null)
if (!groups.length)
return Object.values(this.groups)
const self = this
return groups.map((id) => id instanceof Object ? id : self.groups[id])
},
_getLights(lightIds) {
const lights = lightIds.filter((id) => id != null)
if (!lights.length)
return Object.values(this.lights)
const self = this
return lights.map((id) => id instanceof Object ? id : self.lights[id])
},
setGroupsLoading(groupsIds) {
const self = this
this._getGroups(groupsIds).forEach((group) => {
self.loadingGroups[group.id] = true
if (group.lights)
self.setLightsLoading(group.lights)
})
},
unsetGroupsLoading(groupsIds) {
const self = this
this._getGroups(groupsIds).forEach((group) => {
if (group.id in self.loadingGroups)
delete self.loadingGroups[group.id]
if (group.lights)
self.setLightsLoading(group.lights)
})
},
setLightsLoading(lightIds) {
const self = this
this._getLights(lightIds).forEach((light) => {
self.loadingLights[light.id] = true
})
},
unsetLightsLoading(lightIds) {
const self = this
this._getLights(lightIds).forEach((light) => {
if (light.id in self.loadingLights)
delete self.loadingLights[light.id]
})
},
async groupAction(action, args, ...groups) {
this.setGroupsLoading(groups)
try {
return await this.request(action, args)
} finally {
this.unsetGroupsLoading(groups)
}
},
async lightAction(action, args, ...lights) {
this.setLightsLoading(lights)
try {
return await this.request(action, args)
} finally {
this.unsetLightsLoading(lights)
}
},
},
}
</script>

View file

@ -0,0 +1,213 @@
export class ColorConverter {
constructor(ranges) {
this.ranges = {
hue: [0, 360],
sat: [0, 100],
bri: [0, 100],
ct: [154, 500],
}
if (ranges)
for (const attr of Object.keys(this.ranges))
if (ranges[attr])
this.ranges[attr] = ranges[attr]
}
normalize(x, xRange, yRange) {
return yRange[0] + (((x-xRange[0]) * (yRange[1]-yRange[0])) / (xRange[1]-xRange[0]))
}
hslToRgb(h, s, l) {
[h, s, l] = [
this.normalize(h, this.ranges.hue, [0, 360]),
this.normalize(s, this.ranges.sat, [0, 100]),
this.normalize(l, this.ranges.bri, [0, 100]),
]
l /= 100
const a = s * Math.min(l, 1 - l) / 100
const f = n => {
const k = (n + h / 30) % 12
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
return Math.round(255 * color)
}
return [f(0), f(8), f(4)]
}
rgbToHsl(r, g, b){
r /= 255
g /= 255
b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if(max === min){
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [
parseInt(this.normalize(h, [0, 1], this.ranges.hue)),
parseInt(this.normalize(s, [0, 1], this.ranges.sat)),
parseInt(this.normalize(l, [0, 1], this.ranges.bri)),
]
}
xyToRgb(x, y, brightness) {
// Set to maximum brightness if no custom value was given (Not the slick ECMAScript 6 way for compatibility reasons)
if (brightness == null)
brightness = this.ranges.bri[1];
const z = 1.0 - x - y;
const Y = (brightness / (this.ranges.bri[1]-1)).toFixed(2);
const X = (Y / y) * x;
const Z = (Y / y) * z;
//Convert to RGB using Wide RGB D65 conversion
let red = X * 1.656492 - Y * 0.354851 - Z * 0.255038;
let green = -X * 0.707196 + Y * 1.655397 + Z * 0.036152;
let blue = X * 0.051713 - Y * 0.121364 + Z * 1.011530;
//If red, green or blue is larger than 1.0 set it back to the maximum of 1.0
if (red > blue && red > green && red > 1.0) {
green = green / red;
blue = blue / red;
red = 1.0;
} else if (green > blue && green > red && green > 1.0) {
red = red / green;
blue = blue / green;
green = 1.0;
} else if (blue > red && blue > green && blue > 1.0) {
red = red / blue;
green = green / blue;
blue = 1.0;
}
//Reverse gamma correction
red = red <= 0.0031308 ? 12.92 * red : (1.0 + 0.055) * Math.pow(red, (1.0 / 2.4)) - 0.055;
green = green <= 0.0031308 ? 12.92 * green : (1.0 + 0.055) * Math.pow(green, (1.0 / 2.4)) - 0.055;
blue = blue <= 0.0031308 ? 12.92 * blue : (1.0 + 0.055) * Math.pow(blue, (1.0 / 2.4)) - 0.055;
//Convert normalized decimal to decimal
red = Math.round(red * 255);
green = Math.round(green * 255);
blue = Math.round(blue * 255);
if (isNaN(red))
red = 0;
if (isNaN(green))
green = 0;
if (isNaN(blue))
blue = 0;
return [red, green, blue].map((c) => Math.min(Math.max(0, c), 255))
}
rgbToXY(red, green, blue) {
if (red > 1) { red /= 255; }
if (green > 1) { green /= 255; }
if (blue > 1) { blue /= 255; }
//Apply a gamma correction to the RGB values, which makes the color more vivid and more the like the color displayed on the screen of your device
red = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
green = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
blue = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92);
//RGB values to XYZ using the Wide RGB D65 conversion formula
const X = red * 0.664511 + green * 0.154324 + blue * 0.162028;
const Y = red * 0.283881 + green * 0.668433 + blue * 0.047685;
const Z = red * 0.000088 + green * 0.072310 + blue * 0.986039;
//Calculate the xy values from the XYZ values
let x = parseFloat((X / (X + Y + Z)).toFixed(4));
let y = parseFloat((Y / (X + Y + Z)).toFixed(4));
if (isNaN(x))
x = 0;
if (isNaN(y))
y = 0;
return [x, y];
}
rgbToBri(red, green, blue) {
return Math.min(2 * this.rgbToHsl(red, green, blue)[2], this.ranges.bri[1])
}
getRGB(color) {
if (color.red != null && color.green != null && color.blue != null)
return [color.red, color.green, color.blue]
if (color.r != null && color.g != null && color.b != null)
return [color.r, color.g, color.b]
if (color.rgb)
return color.rgb
}
getXY(color) {
if (color.x != null && color.y != null)
return [color.x, color.y]
if (color.xy)
return color.xy
}
toRGB(color) {
const rgb = this.getRGB(color)
if (rgb)
return rgb
const xy = this.getXY(color)
if (xy && color.bri)
return this.xyToRgb(...xy, color.bri)
if (color.hue && color.sat && color.bri)
return this.hslToRgb(color.hue, color.sat, color.bri)
console.debug('Could not determine color space')
console.debug(color)
}
toXY(color) {
const xy = this.getXY(color)
if (xy && color.bri)
return [xy[0], xy[1], color.bri]
const rgb = this.getRGB(color)
if (rgb)
return this.rgbToXY(...rgb)
if (color.hue && color.sat && color.bri) {
const rgb = this.hslToRgb(color.hue, color.sat, color.bri)
return this.rgbToXY(...rgb)
}
console.debug('Could not determine color space')
console.debug(color)
}
toHSL(color) {
if (color.hue && color.sat && color.bri)
return [color.hue, color.sat, color.bri]
const rgb = this.getRGB(color)
if (rgb)
return this.rgbToHsl(...rgb)
const xy = this.getXY(color)
if (xy && color.bri) {
const rgb = this.xyToRgb(...xy, color.bri)
return this.rgbToHsl(...rgb)
}
console.debug('Could not determine color space')
console.debug(color)
}
}

View file

@ -2,18 +2,21 @@
<Loading v-if="loading" /> <Loading v-if="loading" />
<LightPlugin plugin-name="light.hue" :config="config" :lights="lights" :groups="groups" :scenes="scenes" <LightPlugin plugin-name="light.hue" :config="config" :lights="lights" :groups="groups" :scenes="scenes"
:animations="animations" :initial-group="initialGroup" :loading-groups="loadingGroups" :animations="animations" :initial-group="initialGroup" :loading-groups="loadingGroups"
@group-toggle="toggleGroup" /> :color-converter="colorConverter" @group-toggle="toggleGroup"
@light-toggle="toggleLight" @set-light="setLight" @set-group="setGroup" @select-scene="setScene" />
</template> </template>
<script> <script>
import LightPlugin from "@/components/panels/Light/Index"; import LightPlugin from "@/components/panels/Light/Index";
import LightUtils from "@/components/panels/Light/Utils";
import { ColorConverter } from "@/components/panels/Light/color"
import Utils from "@/Utils"; import Utils from "@/Utils";
import Loading from "@/components/Loading"; import Loading from "@/components/Loading";
export default { export default {
name: "LightHue", name: "LightHue",
components: {Loading, LightPlugin}, components: {Loading, LightPlugin},
mixins: [Utils], mixins: [Utils, LightUtils],
props: { props: {
config: { config: {
type: Object, type: Object,
@ -23,31 +26,17 @@ export default {
data() { data() {
return { return {
lights: {},
groups: {},
scenes: {},
animations: {},
loading: false, loading: false,
loadingLights: {}, colorConverter: new ColorConverter({
loadingGroups: {}, hue: [0, 65535],
sat: [0, 255],
bri: [0, 255],
ct: [150, 500],
})
} }
}, },
computed: { computed: {
groupsByName() {
if (!this.groups)
return {}
return Object.entries(this.groups).reduce((groups, [id, group]) => {
groups[group.name || id] = {
...group,
id: id,
}
return groups
}, {})
},
initialGroup() { initialGroup() {
if (!this.config.groups || !Object.keys(this.config.groups).length) if (!this.config.groups || !Object.keys(this.config.groups).length)
return null return null
@ -76,28 +65,128 @@ export default {
}, },
async getScenes() { async getScenes() {
return await this.request('light.hue.get_scenes') // return await this.request('light.hue.get_scenes')
return Object.entries(await this.request('light.hue.get_scenes'))
.filter((scene) => !scene[1].recycle && scene[1].type.toLowerCase() === 'lightscene')
.reduce((obj, [id, scene]) => {
obj[id] = scene
return obj
}, {})
}, },
async toggleGroup(group) { async toggleGroup(group) {
const groups = [] let groups = Object.values(this.groups)
if (group != null) let args = {
groups.push(group.name) groups: groups.map((group) => group.name)
this.setGroupsLoading(group)
try {
await this.request('light.hue.toggle', {
groups: groups,
})
await this.refresh()
} finally {
this.unsetGroupsLoading(group)
} }
if (group != null) {
groups = [group]
args = {
groups: [group.name],
}
}
await this.groupAction('light.hue.toggle', args, ...groups)
await this.refresh(true)
}, },
async refresh() { async toggleLight(light) {
this.loading = true const lights = [light]
const args = light != null ? {
lights: [light.name],
} : {}
await this.lightAction('light.hue.toggle', args, ...lights)
await this.refresh(true)
},
async setLight(event) {
let lights = Object.keys(this.lights)
const light = event.light
const args = {}
if (light) {
args.lights = [light.name]
lights = [light]
}
const self = this
const requests = Object.entries(event.value).map(([attr, value]) => {
let method = null;
args.value = value
switch (attr) {
case 'brightness':
method = 'light.hue.bri'
break
case 'temperature':
method = 'light.hue.ct'
break
case 'xy':
method = 'light.hue.xy'
break
}
if (method)
return self.lightAction(method, args, ...lights)
}).filter((req) => req != null)
await Promise.all(requests)
await this.refresh(true)
},
async setGroup(event) {
if (!event.groupId)
return this.setLight(event)
const group = this.groups[event.groupId]
const args = {
groups: [group.name],
}
const self = this
const requests = Object.entries(event.value).map(([attr, value]) => {
let method = null;
args.value = value
switch (attr) {
case 'brightness':
method = 'light.hue.bri'
break
case 'temperature':
method = 'light.hue.ct'
break
case 'xy':
method = 'light.hue.xy'
break
}
if (method)
return self.lightAction(method, args, group)
}).filter((req) => req != null)
await Promise.all(requests)
await this.refresh(true)
},
async setScene(event) {
await this.groupAction('light.hue.scene', {
name: this.scenes[event.sceneId].name,
groups: [this.groups[event.groupId].name],
}, this.groups[event.groupId])
await this.refresh(true)
},
async refresh(background) {
if (!background)
this.loading = true
try { try {
[this.lights, this.groups, this.scenes] = await Promise.all([ [this.lights, this.groups, this.scenes] = await Promise.all([
this.getLights(), this.getLights(),
@ -105,26 +194,8 @@ export default {
this.getScenes(), this.getScenes(),
]) ])
} finally { } finally {
this.loading = false if (!background)
} this.loading = false
},
setGroupsLoading(...groups) {
let loadingGroups = {}
if (groups.length && groups[0]) {
for (const group of groups)
loadingGroups[group.id] = true
} else {
loadingGroups = Object.keys(this.groups)
}
this.loadingGroups = {...this.loadingGroups, ...loadingGroups}
},
unsetGroupsLoading(...groups) {
for (const group of groups) {
if (group.id in this.loadingGroups)
delete this.loadingGroups[group.id]
} }
}, },
}, },

View file

@ -0,0 +1,36 @@
@mixin appearance($value) {
-webkit-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
-ms-appearance: $value;
appearance: $value;
}
@mixin transition($value) {
-webkit-transition: $value;
-ms-transition: $value;
-o-transition: $value;
-ms-transition: $value;
transition: $value;
}
@mixin animation($value) {
-webkit-animation: $value;
-ms-animation: $value;
-o-animation: $value;
-ms-animation: $value;
animation: $value;
}
@mixin box-shadow($value) {
-webkit-box-shadow: $value;
-o-box-shadow: $value;
-ms-box-shadow: $value;
box-shadow: $value;
}
@mixin calc($property, $expression) {
#{$property}: -webkit-calc( #{$expression} );
#{$property}: -moz-calc( #{$expression} );
#{$property}: calc( #{$expression} );
}

View file

@ -41,7 +41,7 @@ $modal-body-bg: white !default;
/// Selected /// Selected
$selected-bg: #c8ffd0 !default; $selected-bg: #c8ffd0 !default;
$selected-fg: #426448; $selected-fg: #32b646;
$selected-border: 1px solid #98cfa0 !default; $selected-border: 1px solid #98cfa0 !default;
/// Links /// Links
@ -84,4 +84,11 @@ $toggle-selected-bg: linear-gradient(90deg, #4fef97, #27ee5e) !default;
$toggle-dot-bg: #d4d8d6 !default; $toggle-dot-bg: #d4d8d6 !default;
$toggle-shadow: inset 0 0 2px 1px #c8c8c8 !default; $toggle-shadow: inset 0 0 2px 1px #c8c8c8 !default;
$toggle-dot-shadow: inset 0 0 2px 1px #d0d0d0 !default; $toggle-dot-shadow: inset 0 0 2px 1px #d0d0d0 !default;
$toggle-selected-dot-bg: linear-gradient(160deg, #ecfff0, #e4fff8); $toggle-selected-dot-bg: white;
//// Slider element
$slider-bg: #e4e4e4 !default;
$slider-thumb-bg: rgba(0,215,80,1.0) !default;
$slider-thumb-disabled-bg: rgba(0,215,80,0.3) !default;
$slider-hover-on-hover-bg: #d2d2d2 !default;
$slider-progress-bg: rgba(0,215,80,0.2) !default;

View file

@ -4,7 +4,7 @@
<Nav :panels="components" :selected-panel="selectedPanel" :hostname="hostname" <Nav :panels="components" :selected-panel="selectedPanel" :hostname="hostname"
@select="selectedPanel = $event" v-else /> @select="selectedPanel = $event" v-else />
<div class="panel-container"> <div class="canvas">
<div class="panel" v-for="(panel, name) in components" :key="name"> <div class="panel" v-for="(panel, name) in components" :key="name">
<component :is="panel.component" :config="panel.config" :plugin-name="name" v-if="name === selectedPanel" /> <component :is="panel.component" :config="panel.config" :plugin-name="name" v-if="name === selectedPanel" />
</div> </div>
@ -99,18 +99,19 @@ main {
height: 100%; height: 100%;
display: flex; display: flex;
.panel-container { .canvas {
display: flex; display: flex;
flex-grow: 100; flex-grow: 100;
} background: $menu-panel-bg;
.panel { .panel {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
margin: 0 !important; margin: 0 !important;
box-shadow: none !important; box-shadow: none !important;
overflow: auto; overflow: auto;
}
} }
} }
</style> </style>

View file

@ -6,6 +6,7 @@ module.exports = {
sass: { sass: {
additionalData: ` additionalData: `
@import '~bulma'; @import '~bulma';
@import "@/style/mixins.scss";
@import "@/style/themes/light.scss"; @import "@/style/themes/light.scss";
@import "@/style/layout.scss"; @import "@/style/layout.scss";
@import "@/style/components.scss"; @import "@/style/components.scss";

View file

@ -154,7 +154,13 @@ class LightHuePlugin(LightPlugin):
""" """
return self.bridge.get_scene() return {
id: {
'id': id,
**scene,
}
for id, scene in self.bridge.get_scene().items()
}
@action @action
def get_lights(self): def get_lights(self):
@ -195,7 +201,13 @@ class LightHuePlugin(LightPlugin):
""" """
return self.bridge.get_light() return {
id: {
'id': id,
**light,
}
for id, light in self.bridge.get_light().items()
}
@action @action
def get_groups(self): def get_groups(self):
@ -247,7 +259,13 @@ class LightHuePlugin(LightPlugin):
""" """
return self.bridge.get_group() return {
id: {
'id': id,
**group,
}
for id, group in self.bridge.get_group().items()
}
@action @action
def get_animations(self): def get_animations(self):