added pages and most of projector control to UI
This commit is contained in:
0xEmm
parent
c1946a1c3d
commit
1c9bff704a
5 changed files with 201 additions and 27 deletions
|
|
@ -4,11 +4,17 @@
|
|||
import {ref, onMounted } from 'vue'
|
||||
//import { $mqtt } from 'vue-paho-mqtt'
|
||||
import Projektor from './Projektor.vue'
|
||||
|
||||
import Platno from './Platno.vue'
|
||||
import MainPage from './MainPage.vue';
|
||||
import ProjManualPage from './ProjManualPage.vue';
|
||||
|
||||
const _p1_room = ref('p1')
|
||||
const _glavni_position = ref('glavni')
|
||||
const _stranski_position = ref('stranski')
|
||||
|
||||
|
||||
const pageNum = ref(0) // TODO spremen na 0
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -18,19 +24,23 @@ const _stranski_position = ref('stranski')
|
|||
<div class="wrapper">
|
||||
<!-- <HelloWorld msg="You did it!" /> -->
|
||||
<h2>turbo odličen super mega kontrol panel</h2>
|
||||
<h3>Predavalnica {{ _p1_room }}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="pageNum = 0">Page 1</button>
|
||||
<button @click="pageNum = 1">Page 2</button>
|
||||
<button @click="pageNum = 2">Page 3</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<h3>{{ _p1_room }}</h3>
|
||||
<!-- <h4>Glavni</h4> -->
|
||||
<Projektor :room="_p1_room" :position="_glavni_position" />
|
||||
<div v-if="pageNum == 0">
|
||||
<MainPage />
|
||||
</div>
|
||||
<div>
|
||||
<!-- <h4>Stranski</h4> -->
|
||||
<Projektor :room="_p1_room" :position="_stranski_position" />
|
||||
<div v-else-if="pageNum == 1">
|
||||
<ProjManualPage :room="_p1_room" />
|
||||
</div>
|
||||
<div v-else-if="pageNum == 2">temp</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
3
frontend/vju_display/src/MainPage.vue
Normal file
3
frontend/vju_display/src/MainPage.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>tukaj pride hecn gumbek za vse prižgat</template>
|
||||
116
frontend/vju_display/src/Platno.vue
Normal file
116
frontend/vju_display/src/Platno.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<script setup lang="ts">
|
||||
//import HelloWorld from './components/HelloWorld.vue'
|
||||
//import TheWelcome from './components/TheWelcome.vue'
|
||||
import {ref, onMounted, reactive } from 'vue'
|
||||
import { $mqtt } from 'vue-paho-mqtt'
|
||||
|
||||
const props = defineProps({
|
||||
room: String,
|
||||
position: String
|
||||
})
|
||||
|
||||
const topicstrs = [ //TODO everything else
|
||||
props.room + '/projectors/' + props.position + 'platno/status',
|
||||
props.room + '/projectors/' + props.position + 'platno/status',
|
||||
]
|
||||
|
||||
const subscriptions =
|
||||
topicstrs.map(topic => {
|
||||
// console.log('subbing to', topic)
|
||||
$mqtt.subscribe(topic, (msg) => {
|
||||
// console.log('received:', topic, msg)
|
||||
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('/'))
|
||||
let typ = topic.split('/')[4]
|
||||
handlePlatnoStatus(msg)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePlatnoStatus(msg: string) {
|
||||
console.log('handling status')
|
||||
//console.log(projStatus)
|
||||
let newState: platnoState
|
||||
switch (msg) {
|
||||
case "UP":
|
||||
newState = platnoState.UP
|
||||
break
|
||||
case "DOWN":
|
||||
newState = platnoState.DOWN
|
||||
break
|
||||
case "MOVING":
|
||||
newState = platnoState.MOVING
|
||||
break
|
||||
default:
|
||||
newState = platnoState.UNKNOWN
|
||||
break
|
||||
}
|
||||
platnoStatus.value = newState
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// console.log('test')
|
||||
//$mqtt.publish('peepee', 'poopoo', 'Qr') // dela
|
||||
|
||||
})
|
||||
|
||||
function publishMQTTMsg(topic: string, msg: string) {
|
||||
//msg = msg.toString()
|
||||
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 + '/projectors/' + props.position + '/platno/')
|
||||
|
||||
//TODO organize better, binds, etc.
|
||||
|
||||
enum platnoState {
|
||||
UP,
|
||||
DOWN,
|
||||
MOVING,
|
||||
UNKNOWN
|
||||
}
|
||||
|
||||
const platnoStatus = ref(platnoState.UNKNOWN)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- <h3>{{ props.room }}</h3> -->
|
||||
<!-- <form> -->
|
||||
<!-- TODO lepš -->
|
||||
<h4>platna {{ props.position }}</h4>
|
||||
<button
|
||||
@click="publishMQTTMsg(publishPrefix + 'go', 'UP')">
|
||||
Go UP</button>
|
||||
<button
|
||||
@click="publishMQTTMsg(publishPrefix + 'go', 'DOWN')">
|
||||
Go DOWN</button>
|
||||
<div>
|
||||
<h5>Manual control</h5>
|
||||
<button
|
||||
@mousedown="publishMQTTMsg(publishPrefix + 'move', 'UP')"
|
||||
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
|
||||
Move up</button>
|
||||
<button
|
||||
@mousedown="publishMQTTMsg(publishPrefix + 'move', 'DOWN')"
|
||||
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
|
||||
Move down</button>
|
||||
</div>
|
||||
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
35
frontend/vju_display/src/ProjManualPage.vue
Normal file
35
frontend/vju_display/src/ProjManualPage.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
//import HelloWorld from './components/HelloWorld.vue'
|
||||
//import TheWelcome from './components/TheWelcome.vue'
|
||||
import {ref, onMounted, reactive } from 'vue'
|
||||
import { $mqtt } from 'vue-paho-mqtt'
|
||||
import Projektor from './Projektor.vue'
|
||||
import Platno from './Platno.vue'
|
||||
|
||||
const props = defineProps({
|
||||
room: String,
|
||||
})
|
||||
const _glavni_position = ref('glavni')
|
||||
const _stranski_position = ref('stranski')
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- <h3>{{ _p1_room }} (prestavi to na levo verjetno)</h3> -->
|
||||
<!-- <h4>Glavni</h4> -->
|
||||
<Projektor :room="props.room" :position="_glavni_position" />
|
||||
<Platno :room="props.room" :position="_glavni_position" />
|
||||
</div>
|
||||
<div>
|
||||
<!-- <h4>Stranski</h4> -->
|
||||
<Projektor :room="props.room" :position="_stranski_position" />
|
||||
<Platno :room="props.room" :position="_stranski_position" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue