rc/predavalnice-kontroler
5
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

added pages and most of projector control to UI

Browse source
This commit is contained in:
0xEmm 2024-10-31 17:25:45 +01:00
parent c1946a1c3d
commit 1c9bff704a
5 changed files with 201 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/vju_display/src/Projektor.vue
View file

@ -5,14 +5,14 @@ import {ref, onMounted, reactive } from 'vue'
import { $mqtt } from 'vue-paho-mqtt'
const props = defineProps({
room: '',
position: ''
room: String,
position: String
})
const topicstrs = [ //TODO everything else
props.room + '/projektorji/' + props.position + '/status/power',
props.room + '/projektorji/' + props.position + '/status/shutter',
props.room + '/projektorji/' + props.position + '/status/freeze',
props.room + '/projectors/' + props.position + '/status/power',
props.room + '/projectors/' + props.position + '/status/shutter',
props.room + '/projectors/' + props.position + '/status/freeze',
]
const subscriptions =
@ -24,7 +24,7 @@ topicstrs.map(topic => {
})
})
function handleIncomingMQTT(topic, msg) {
function handleIncomingMQTT(topic: string, msg: string) {
console.log('Received on', topic, 'with message', msg)
if (topic.includes('status')) {
//console.log(topic.split('/'))
@ -33,7 +33,7 @@ function handleIncomingMQTT(topic, msg) {
}
}
function handleProjectorStatus(typ, msg) {
function handleProjectorStatus(typ: string, msg: string) {
console.log('handling status')
//console.log(projStatus)
if (typ == 'power') {projStatus.power = msg == '1'}
@ -47,16 +47,16 @@ onMounted(() => {
})
function publishMQTTMsg(topic, msg) {
function publishMQTTMsg(topic: string, msg: string) {
//msg = msg.toString()
console.log('Sending to [', topic, '] with message [', (msg ? 'ON' : 'OFF'), ']')
$mqtt.publish(topic, (msg ? 'ON' : 'OFF'), 'Qr')
console.log('Sending to [', topic, '] with message [', msg, ']')
$mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
console.log('sent')
}
const publishPrefix = ref(props.room + '/projektorji/' + props.position + '/ukaz/')
const publishPrefix = ref(props.room + '/projectors/' + props.position + '/command/')
//TODO organize better, binds, etc.
@ -72,16 +72,26 @@ const projStatus = reactive({
<div>
<!-- <h3>{{ props.room }}</h3> -->
<!-- <form> -->
<!-- TODO lepš -->
<h4>barko {{ props.position }}</h4>
<div>
<h5>Power: {{ (projStatus.power ? "ON" : "OFF") }}</h5>
<button
@click="publishMQTTMsg(publishPrefix + 'power', !projStatus.power)">
power {{ projStatus.power ? 'OFF' : 'ON' }}</button>
@click="publishMQTTMsg(publishPrefix + 'power', (!projStatus.power ? '1' : '0'))">
Turn power {{ projStatus.power ? 'OFF' : 'ON' }}</button>
</div>
<div>
<h5>Shutter: {{ (projStatus.shutter ? "ON" : "OFF") }}</h5>
<button
@click="publishMQTTMsg(publishPrefix + 'shutter', !projStatus.shutter)">
shutter {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
@click="publishMQTTMsg(publishPrefix + 'shutter', (!projStatus.shutter ? '1' : '0'))">
Turn shutter {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
</div>
<div>
<h5>Freeze image: {{ (projStatus.freeze ? "ON" : "OFF") }}</h5>
<button
@click="publishMQTTMsg(publishPrefix + 'freeze', !projStatus.freeze)">
freeze {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
@click="publishMQTTMsg(publishPrefix + 'freeze', (!projStatus.freeze ? '1' : '0'))">
Turn freeze {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
</div>
<!-- </form> -->
</div>
</template>