Combine the various property controls into one component

propertyControl now handles several different property types,
based on the thing description. This reduces duplication and
should keep the code cleaner.

In the future this will become a part of a labthings-vue package,
I hope!
This commit is contained in:
Richard Bowman 2023-11-29 23:54:00 +00:00
parent 595101248e
commit 488493385f
3 changed files with 100 additions and 32 deletions

View file

@ -12,19 +12,22 @@
<li class="uk-open">
<a class="uk-accordion-title" href="#">Pi Camera Settings</a>
<div class="uk-accordion-content">
<NumericSettingLine
<PropertyControl
label="Exposure time"
:property-url="cameraUri + 'exposure_time'"
property-name="exposure_time"
:thing-description="thingDescription"
:read-back-delay="1000"
/>
<NumericSettingLine
<PropertyControl
label="Analogue gain"
:property-url="cameraUri + 'analogue_gain'"
property-name="analogue_gain"
:thing-description="thingDescription"
:read-back-delay="1000"
/>
<NumericArraySettingLine
<PropertyControl
label="Colour gains"
:property-url="cameraUri + 'colour_gains'"
property-name="colour_gains"
:thing-description="thingDescription"
:read-back-delay="1000"
/>
</div>
@ -32,14 +35,16 @@
<li class="uk-open">
<a class="uk-accordion-title" href="#">Image Quality</a>
<div class="uk-accordion-content">
<NumericSettingLine
<PropertyControl
label="MJPEG stream bit rate"
:property-url="cameraUri + 'mjpeg_bitrate'"
property-name="mjpeg_bitrate"
:thing-description="thingDescription"
:read-back-delay="100"
/>
<NumericArraySettingLine
<PropertyControl
label="MJPEG stream resolution"
:property-url="cameraUri + 'stream_resolution'"
property-name="stream_resolution"
:thing-description="thingDescription"
:read-back-delay="100"
/>
</div>
@ -92,8 +97,7 @@
<script>
import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
import NumericSettingLine from "../../genericComponents/numericSettingLine.vue";
import NumericArraySettingLine from "../../genericComponents/numericArraySettingLine.vue";
import PropertyControl from "../../labThingsComponents/propertyControl.vue";
// Export main app
export default {
@ -102,8 +106,7 @@ export default {
components: {
cameraCalibrationSettings,
miniStreamDisplay,
NumericSettingLine,
NumericArraySettingLine
PropertyControl
},
data: function() {
@ -133,7 +136,8 @@ export default {
{ text: "Normal (30fps)", value: 30 },
{ text: "Low (15fps)", value: 15 },
{ text: "Very low (10fps)", value: 10 }
]
],
thingDescription: undefined
};
},
@ -141,6 +145,10 @@ export default {
cameraUri: function() {
return `${this.$store.getters.baseUri}/camera/`;
}
},
mounted: async function() {
this.thingDescription = await this.getThingDescription("camera");
}
};
</script>