-
-
Notifications
You must be signed in to change notification settings - Fork 243
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Fix oh-slider issue Signed-off-by: Hubert Nusser <[email protected]>
- Loading branch information
Showing
12 changed files
with
145 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 5 additions & 54 deletions
59
bundles/org.openhab.ui/web/src/components/widgets/system/oh-knob.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,20 @@ | ||
| <template> | ||
| <knob-control v-bind="config" :text-color="config.textColor || ($f7.data.themeOptions.dark === 'dark') ? '#ffffff' : undefined" :value="value" @input="onChange" /> | ||
| <knob-control v-bind="config" :text-color="config.textColor || ($f7.data.themeOptions.dark === 'dark') ? '#ffffff' : undefined" :value="value" | ||
| @input="sendCommandDebounced($event)" @click.native="sendCommandDebounced(value, true)" @touchend.native="sendCommandDebounced(value, true)" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| import mixin from '../widget-mixin' | ||
| import slideMixin from './slide-mixin' | ||
| import { OhKnobDefinition } from '@/assets/definitions/widgets/system' | ||
| import KnobControl from 'vue-knob-control' | ||
| export default { | ||
| mixins: [mixin], | ||
| mixins: [mixin, slideMixin], | ||
| components: { | ||
| KnobControl | ||
| }, | ||
| widget: OhKnobDefinition, | ||
| data () { | ||
| return { | ||
| pendingCommand: null, | ||
| delayCommand: false, | ||
| delayUpdate: null | ||
| } | ||
| }, | ||
| mounted () { | ||
| delete this.config.value | ||
| }, | ||
| computed: { | ||
| value () { | ||
| if (this.config.variable) return this.context.vars[this.config.variable] | ||
| if (this.delayUpdate && this.pendingCommand) return this.pendingCommand // to keep the control reactive when operating | ||
| const value = this.context.store[this.config.item].state | ||
| // use as a brightness control for HSB values | ||
| if (value.split && value.split(',').length === 3) return parseFloat(value.split(',')[2]) | ||
| return parseFloat(value) | ||
| } | ||
| }, | ||
| methods: { | ||
| onChange (value) { | ||
| if (value === this.value) return | ||
| if (this.config.variable) { | ||
| this.$set(this.context.vars, this.config.variable, value) | ||
| return | ||
| } | ||
| this.pendingCommand = value | ||
| if (!this.delayCommand) { | ||
| this.delayCommand = true | ||
| this.setUpdateDelayTimout() | ||
| this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd: value.toString() }) | ||
| setTimeout(() => { | ||
| this.delayCommand = false | ||
| if (this.delayUpdate) clearTimeout(this.delayUpdate) | ||
| if (this.pendingCommand) { | ||
| this.setUpdateDelayTimout() | ||
| this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd: this.pendingCommand.toString() }) | ||
| } | ||
| }, 200) | ||
| } | ||
| }, | ||
| setUpdateDelayTimout () { | ||
| if (this.delayUpdate) clearTimeout(this.delayUpdate) | ||
| this.delayUpdate = setTimeout(() => { | ||
| console.debug('End of update delay') | ||
| this.delayUpdate = null | ||
| this.pendingCommand = null | ||
| }, 2000) | ||
| } | ||
| } | ||
| widget: OhKnobDefinition | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
bundles/org.openhab.ui/web/src/components/widgets/system/slide-mixin.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| export default { | ||
| data () { | ||
| return { | ||
| pendingCommand: null | ||
| } | ||
| }, | ||
| mounted () { | ||
| delete this.config.value | ||
|
|
||
| this.updateInterval = this.config.updateInterval ? this.config.updateInterval : 200 | ||
| this.delayStateDisplay = this.config.delayStateDisplay ? this.config.delayStateDisplay : 2000 | ||
| }, | ||
| computed: { | ||
| value () { | ||
| if (this.config.variable) return this.context.vars[this.config.variable] | ||
| if (this.pendingCommand) return this.pendingCommand // to keep the control reactive when operating | ||
| const value = this.context.store[this.config.item].state | ||
| // use as a brightness control for HSB values | ||
| if (value.split && value.split(',').length === 3) return parseFloat(value.split(',')[2]) | ||
| return parseFloat(value) | ||
| } | ||
| }, | ||
| methods: { | ||
| sendCommandDebounced (value, stop = false) { | ||
| if ((value === this.value && !stop) || value === this.lastValueSent) return | ||
|
|
||
| if (this.config.variable) { | ||
| this.$set(this.context.vars, this.config.variable, value) | ||
| return | ||
| } | ||
|
|
||
| if (!this.config.item) return | ||
|
|
||
| this.pendingCommand = value | ||
| let diff = this.lastDateSent ? Date.now() - this.lastDateSent : this.updateInterval | ||
| let delay = diff < this.updateInterval ? this.updateInterval - diff : stop ? 0 : this.updateInterval | ||
|
|
||
| if (this.sendCommandTimer && stop) { | ||
| clearTimeout(this.sendCommandTimer) | ||
| this.sendCommandTimer = null | ||
| } | ||
| if (!this.sendCommandTimer) { | ||
| if (this.displayLockTimer) clearTimeout(this.displayLockTimer) | ||
| this.sendCommandTimer = setTimeout(() => { | ||
| this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd: this.pendingCommand.toString() }) | ||
| this.lastValueSent = this.pendingCommand | ||
| this.lastDateSent = Date.now() | ||
| this.sendCommandTimer = null | ||
|
|
||
| // keep displaying `pendingCommand` as value for `delayStateDisplay` time to give sse state some time to update | ||
| this.displayLockTimer = setTimeout(() => { this.pendingCommand = null }, this.delayStateDisplay) | ||
| }, delay) | ||
| } | ||
| } | ||
| } | ||
| } |