Camera settings for labthings-picamera2
I've updated URLs and tidied things a bit, so that we can now adjust the key camera settings with the new camera drivers.
This commit is contained in:
Richard Bowman
parent
13229d9b99
commit
79752a2a4c
5 changed files with 460 additions and 277 deletions
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="uk-form-label">{{ label }}</label>
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
v-for="(_v, key) in value"
|
||||
class="uk-form-small numeric-setting-line-input"
|
||||
type="number"
|
||||
v-model="value[key]"
|
||||
:key="key"
|
||||
@focusin="focusIn"
|
||||
@focusout="focusOut"
|
||||
@keydown="keyDown"
|
||||
/>
|
||||
<a class="button-next-to-input" @click="readProperty">
|
||||
<i class="material-icons">refresh</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "MultiNumericSettingLine",
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
propertyUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
readBackDelay: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
|
||||
data: () => {
|
||||
return {
|
||||
value: {},
|
||||
valueOnEnter: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
readBack: function() {
|
||||
return this.readBackDelay !== undefined;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.readProperty();
|
||||
},
|
||||
|
||||
methods: {
|
||||
readProperty: async function() {
|
||||
let response = await axios.get(this.propertyUrl)
|
||||
this.value = response.data
|
||||
console.log("Read property", this.propertyUrl, response.data)
|
||||
return response.data
|
||||
},
|
||||
writeProperty: async function() {
|
||||
try {
|
||||
let requestedValue = Number(this.value)
|
||||
await axios.post(this.propertyUrl, requestedValue)
|
||||
if(this.readBack) {
|
||||
await new Promise(r => setTimeout(r, this.readBackDelay))
|
||||
let newVal = await this.readProperty()
|
||||
if(newVal == requestedValue) {
|
||||
await this.modalNotify(`Set ${this.label} to ${newVal}.`)
|
||||
} else {
|
||||
await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
|
||||
}
|
||||
} else {
|
||||
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
|
||||
}
|
||||
} catch(error) {
|
||||
this.modalError(error); // Let mixin handle error
|
||||
}
|
||||
},
|
||||
focusIn: function(event) {
|
||||
this.valueOnEnter = event.target.value;
|
||||
},
|
||||
focusOut: function(event) {
|
||||
if (this.valueOnEnter != event.target.value) {
|
||||
this.writeProperty(event.target.value);
|
||||
}
|
||||
},
|
||||
keyDown: function(event) {
|
||||
// Pressing enter should set the property, whether or not we think it's changed.
|
||||
if (event.keyCode == 13) {
|
||||
this.writeProperty();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-and-buttons-container {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.numeric-setting-line-input {
|
||||
display: table-cell;
|
||||
width:100%;
|
||||
}
|
||||
.button-next-to-input {
|
||||
display: table-cell;
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="uk-form-label">{{ label }}</label>
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
v-for="i in value.length"
|
||||
class="uk-form-small numeric-setting-line-input"
|
||||
type="number"
|
||||
v-model="value[i - 1]"
|
||||
:key="i"
|
||||
@focusin="focusIn"
|
||||
@focusout="focusOut"
|
||||
@keydown="keyDown"
|
||||
/>
|
||||
<a class="button-next-to-input" @click="readProperty">
|
||||
<i class="material-icons">refresh</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "NumericArraySettingLine",
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
propertyUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
readBackDelay: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
|
||||
data: () => {
|
||||
return {
|
||||
value: {},
|
||||
valueOnEnter: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
readBack: function() {
|
||||
return this.readBackDelay !== undefined;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.readProperty();
|
||||
},
|
||||
|
||||
methods: {
|
||||
readProperty: async function() {
|
||||
let response = await axios.get(this.propertyUrl)
|
||||
this.value = response.data
|
||||
console.log("Read property", this.propertyUrl, response.data)
|
||||
return response.data
|
||||
},
|
||||
writeProperty: async function() {
|
||||
try {
|
||||
let requestedValue = this.value
|
||||
await axios.post(this.propertyUrl, requestedValue)
|
||||
if(this.readBack) {
|
||||
await new Promise(r => setTimeout(r, this.readBackDelay))
|
||||
let newVal = await this.readProperty()
|
||||
if(newVal == requestedValue) {
|
||||
await this.modalNotify(`Set ${this.label} to ${newVal}.`)
|
||||
} else {
|
||||
await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
|
||||
}
|
||||
} else {
|
||||
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
|
||||
}
|
||||
} catch(error) {
|
||||
this.modalError(error); // Let mixin handle error
|
||||
}
|
||||
},
|
||||
focusIn: function(event) {
|
||||
this.valueOnEnter = event.target.value;
|
||||
},
|
||||
focusOut: function(event) {
|
||||
if (this.valueOnEnter != event.target.value) {
|
||||
this.writeProperty(event.target.value);
|
||||
}
|
||||
},
|
||||
keyDown: function(event) {
|
||||
// Pressing enter should set the property, whether or not we think it's changed.
|
||||
if (event.keyCode == 13) {
|
||||
this.writeProperty();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-and-buttons-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: stretch;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.numeric-setting-line-input {
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 6em;
|
||||
}
|
||||
.button-next-to-input {
|
||||
flex-grow: 0;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
125
webapp/src/components/genericComponents/numericSettingLine.vue
Normal file
125
webapp/src/components/genericComponents/numericSettingLine.vue
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="uk-form-label">{{ label }}</label>
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
class="uk-form-small numeric-setting-line-input"
|
||||
type="number"
|
||||
v-model="value"
|
||||
@focusin="focusIn"
|
||||
@focusout="focusOut"
|
||||
@keydown="keyDown"
|
||||
/>
|
||||
<a class="button-next-to-input" @click="readProperty">
|
||||
<i class="material-icons">refresh</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "NumericSettingLine",
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
propertyUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
readBackDelay: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
|
||||
data: () => {
|
||||
return {
|
||||
value: undefined,
|
||||
valueOnEnter: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
readBack: function() {
|
||||
return this.readBackDelay !== undefined;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.readProperty();
|
||||
},
|
||||
|
||||
methods: {
|
||||
readProperty: async function() {
|
||||
let response = await axios.get(this.propertyUrl)
|
||||
this.value = response.data
|
||||
console.log("Read property", this.propertyUrl, response.data)
|
||||
return response.data
|
||||
},
|
||||
writeProperty: async function() {
|
||||
try {
|
||||
let requestedValue = Number(this.value)
|
||||
await axios.post(this.propertyUrl, requestedValue)
|
||||
if(this.readBack) {
|
||||
await new Promise(r => setTimeout(r, this.readBackDelay))
|
||||
let newVal = await this.readProperty()
|
||||
if(newVal == requestedValue) {
|
||||
await this.modalNotify(`Set ${this.label} to ${newVal}.`)
|
||||
} else {
|
||||
await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
|
||||
}
|
||||
} else {
|
||||
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
|
||||
}
|
||||
} catch(error) {
|
||||
this.modalError(error); // Let mixin handle error
|
||||
}
|
||||
},
|
||||
focusIn: function(event) {
|
||||
this.valueOnEnter = event.target.value;
|
||||
},
|
||||
focusOut: function(event) {
|
||||
if (this.valueOnEnter != event.target.value) {
|
||||
this.writeProperty(event.target.value);
|
||||
}
|
||||
},
|
||||
keyDown: function(event) {
|
||||
// Pressing enter should set the property, whether or not we think it's changed.
|
||||
if (event.keyCode == 13) {
|
||||
this.writeProperty();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-and-buttons-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: stretch;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.numeric-setting-line-input {
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 6em;
|
||||
}
|
||||
.button-next-to-input {
|
||||
flex-grow: 0;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue