Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

oh-colorpicker: Fix color picker sends commands on external state change #2860

Merged
merged 3 commits into from
Nov 6, 2024
Merged

oh-colorpicker: Fix color picker sends commands on external state change #2860

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b38e6cc
oh-colorpicker: Fix spelling of var names & methods
florian-h05 Nov 4, 2024
e19178d
oh-colorpicker: Add more debug logging
florian-h05 Nov 4, 2024
5937054
oh-colorpicker: Fix color picker sends commands on external state change
florian-h05 Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 28 additions & 43 deletions bundles/org.openhab.ui/web/src/components/widgets/system/oh-colorpicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,22 @@ export default {
widget: OhColorpickerDefinition,
data () {
return {
colorpicker: null,
colorPicker: null,
ignoreInput: false,
delayCommand: false,
delayUpdate: false,
pendingCommand: null,
lastCommand: null,
pendingUpdate: null,
init: false
}
},
mounted () {
if (this.color) {
this.initColorpicker()
this.initColorPicker()
}
},
beforeDestroy () {
if (this.colorpicker) {
this.colorpicker.destroy()
if (this.colorPicker) {
this.colorPicker.destroy()
}
},
computed: {
Expand All @@ -47,26 +46,26 @@ export default {
if (state && state.split(',').length === 3) {
let color = this.context.store[this.config.item].state.split(',')
color[0] = parseInt(color[0])
color[1] = color[1] / 100
color[2] = color[2] / 100
color[1] = Math.round(color[1]) / 100
color[2] = Math.round(color[2]) / 100
return color
}
return [0, 0, 0]
}
},
watch: {
color (val) {
if (this.colorpicker) {
if (this.colorPicker) {
this.updateValue(val)
} else {
this.initColorpicker()
this.initColorPicker()
}
}
},
methods: {
initColorpicker () {
initColorPicker () {
const vm = this
this.colorpicker = this.$f7.colorPicker.create(Object.assign({}, this.config, {
this.colorPicker = this.$f7.colorPicker.create(Object.assign({}, this.config, {
containerEl: (!this.config.openIn) ? this.$refs.container : undefined,
targetEl: (this.config.openIn) ? this.$refs.swatch : undefined,
targetElSetBackgroundColor: true,
Expand All @@ -76,29 +75,31 @@ export default {
hsb: this.color
},
on: {
change (colorpicker, value) {
change (colorPicker, value) {
// skip the first update
if (!vm.init || vm.context.store[vm.config.item].state === '-') {
vm.init = true
return
}
if (!value.hsb) return
// Ignore input for a few millis after a new state has been received to prevent sending a command on external state change
if (vm.ignoreInput) return
vm.sendCommand(value.hsb)
}
}
}))
},
sendCommand (hsb) {
const state = this.commandFromHSB(hsb)
this.pendingUpdate = [...hsb]
this.pendingCommand = [...hsb]
if (!this.areHSBEqual(this.roundedHSB(state), this.roundedHSB(this.context.store[this.config.item].state))) {
console.debug('oh-colorpicker: Received command ' + hsb)
const cmd = this.commandFromHSB(hsb)
const state = this.commandFromHSB(this.color)
if (cmd !== state) {
this.pendingCommand = [...hsb]
if (!this.delayCommand) {
this.delayCommand = true
this.delayUpdate = true
console.debug(this.context.store[this.config.item].state + ' -> ' + state)
this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd: state, updateState: true })
this.lastCommand = state
console.debug(state + ' -> ' + cmd)
this.$store.dispatch('sendCommand', { itemName: this.config.item, cmd, updateState: true })
this.lastCommand = cmd
setTimeout(() => {
const pendingCommand = [...this.pendingCommand]
this.pendingCommand = null
Expand All @@ -108,10 +109,6 @@ export default {
}
}, 200)
}
setTimeout(() => {
this.updateValue(this.pendingUpdate)
this.delayUpdate = false
}, 2000)
}
},
commandFromHSB (hsb) {
Expand All @@ -122,25 +119,13 @@ export default {
state = state.join(',')
return state
},
areHSBEqual (hsb1, hsb2) {
// for the purposes of NOT entering an endless loop, we consider transient non-HSB values to be equal
if (hsb1.length !== hsb2.length) return false
if (hsb1.length !== 3 || hsb2.length !== 3) return false
return (hsb1[0] === hsb2[0] && hsb1[1] === hsb2[1] && hsb1[2] === hsb2[2])
},
roundedHSB (state) {
if (!state) return []
let hsb = state.split(',')
if (hsb.length !== 3) return hsb
return hsb.map((c) => Math.round(c))
},
updateValue (val) {
if (!this.delayUpdate) {
this.colorpicker.setValue({ hsb: this.pendingUpdate || val })
this.pendingUpdate = null
} else {
this.pendingUpdate = val
}
console.debug('oh-colorpicker: Updating value to ' + val)
this.ignoreInput = true
this.colorPicker.setValue({ hsb: val })
setTimeout(() => {
this.ignoreInput = false
}, 10)
}
}
}
Expand Down