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

frontend overhaul, minor backend bugfixes

Browse source
This commit is contained in:
katsu 2025-07-02 16:29:09 +02:00
parent acc38950e7
commit c1325c0eda
28 changed files with 767 additions and 481 deletions
Download patch file Download diff file Expand all files Collapse all files

22
ansible_deploy/playbook.yaml
View file

@ -1,9 +1,12 @@
- name: Test playbook
vars:
# TODO: maybe don't hardcode this?
PROJECT_BASE: "/home/kat/Documents/polzp/fri_multimedia_rework"
hosts: P01
# vars_files:
# - secret
vars:
# addr: "192.168.122.245"
handlers:
@ -185,19 +188,24 @@
backup: yes
- name: Build frontend
delegate_to: localhost
command:
chdir: "{{PROJECT_BASE}}/frontend/vju_display/"
cmd: "npm run build"
- name: copy frontend to webroot
become: true
ansible.builtin.copy:
src: /home/kat/Documents/polzp/fri_multimedia_rework/frontend/vju_display/dist/
#src: /home/kat/fri_multimedia_rework/frontend/vju_display/dist
#remote_src: true
#dest: /srv/www
src: "{{PROJECT_BASE}}/frontend/vju_display/dist/"
dest: /var/www/html/
#dest: /home/kat/testoa
owner: root
group: root
group: www-data
mode: '0755'
backup: yes
- name: daemon reload
become: true
ansible.builtin.systemd_service:
daemon_reload: true

2
ansible_deploy/service.j2
View file

@ -3,7 +3,7 @@ Description={{ script_file }}
After=multi-user.target
[Service]
ExecStart=/usr/local/bin/poetry run python3 {{ script_file }}
ExecStart=/usr/local/bin/poetry run python3 -u {{ script_file }}
Type=simple
Restart=always
User=pi

20
barco_telnet/barco_G62_control.py
View file

@ -13,6 +13,7 @@ barcoIP: str
telnetPort: int
mqttPort: int
mqttIP: str
barcoReached: bool
cmdMap = {
'power': 'POWR',
@ -23,7 +24,7 @@ reverseCmdMap = {v: k for k, v in cmdMap.items()}
def parse_barco_response(raw: str):
global room, barcoPosition
global room, barcoPosition, barcoReached
raw = raw[1:-1] # strip square brackets
#print(raw)
if raw.startswith("ERR"):
@ -33,6 +34,7 @@ def parse_barco_response(raw: str):
#print(cmd + " " + status)
cmd = reverseCmdMap[cmd]
status = '1' if status == '01' else '0'
barcoReached = True
return cmd, status
@ -91,7 +93,7 @@ async def barco_telnet_query_status(writer, select: str):
async def main():
global room
global room, barcoReached
global barcoPosition, barcoIP, telnetPort, mqttIP, mqttPort
if len(sys.argv) < 2:
sys.exit("No position provided")
@ -102,20 +104,26 @@ async def main():
g62Barcos = {k: v for k,v in conf["barco_G62"].items()}
currentBarco = g62Barcos[barcoPosition]
barcoIP = currentBarco['ip']
telnetPort = currentBarco["port"]
telnetPort = int(currentBarco["port"])
room = conf["global"]["room"]
mqttPort = conf["global"]["mqttPort"]
mqttPort = int(conf["global"]["mqttPort"])
mqttIP = conf["global"]["mqttIp"]
barcoReached = False
try:
barcoReader, barcoWriter = await telnetlib3.open_connection(barcoIP, telnetPort)
barcoReached = True
except Exception as e:
print("Connection failed: " + barcoIP + ": " + str(e))
barcoReached = False
finally:
async with aiomqtt.Client(mqttIP, mqttPort) as client:
task_status_query_barco = asyncio.create_task(barco_telnet_query_status(barcoWriter, barcoPosition))
task_status_reader_barco = asyncio.create_task(barco_telnet_read_status(client, barcoReader, barcoPosition))
task_control_barco = asyncio.create_task(barco_telnet_command(client, barcoWriter, barcoPosition))
await asyncio.gather(task_status_query_barco, task_status_reader_barco, task_control_barco)
await client.publish(f"{room}/projectors/{barcoPosition}/error", payload=("UNREACHABLE" if not barcoReached else "OK"))
### fuj to, ne tk delat

71
frontend/vju_display/src/App.vue
View file

@ -1,66 +1,77 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {ref, onMounted, watch} from 'vue'
import MainPage from './components/pages/MainPage.vue';
import VideoPage from './components/pages/VideoPage.vue';
import VerticalTabs from './components/tabs/VerticalTabs.vue';
import Tab from './components/tabs/Tab.vue';
import LightingPage from './components/pages/LightingPage.vue';
import ServisPage from './components/pages/ServisPage.vue';
import {$mqtt} from "vue-paho-mqtt"
import AudioPage from "@/components/pages/AudioPage.vue";
document.addEventListener('contextmenu', event => event.preventDefault());
let urlParams = new URLSearchParams(window.location.search);
const currentRoom = ref(urlParams.get('room') || 'none') // if no param specified
const debugFlag = ref(urlParams.get('debug') == 'true');
// should also check if valid room parameter ampak se ne mudi
// TODO does this make sense al se naj naprej defaulta kr na p01?
const pageNum = ref(0)
const srvcUnlocked = ref(true)
const showPinPopup = ref(false)
function lockServicePage() {
srvcUnlocked.value = false
}
const mqttStat = ref($mqtt.status())
watch(mqttStat, (_, newState) => {
})
const servisActuve = ref(false)
watch(pageNum, (_, newState) => {
console.log(pageNum)
// console.log(newState)
servisActuve.value = (pageNum.value == 4);
})
//TODO display none namest uno
</script>
<template>
<div style="">
<div v-if="currentRoom == 'none'">
<h1>Incorrect or missing room parameter!</h1>
</div>
<div v-else id="wrapper">
<header class="sidebar">
<img class="logo" src="https://fri.uni-lj.si/sites/all/themes/fri_theme/images/fri_logo.png" />
<img class="logo" src="https://fri.uni-lj.si/sites/all/themes/fri_theme/images/fri_logo.png"/>
<h1>{{ currentRoom.toUpperCase() }}</h1>
<VerticalTabs id="nav">
<Tab @click="pageNum=0; lockServicePage()" :selected="pageNum==0">Priprava</Tab>
<Tab @click="pageNum=1; lockServicePage()" :selected="pageNum==1">Video</Tab>
<Tab @click="pageNum=2; lockServicePage()" :selected="pageNum==2">Audio</Tab>
<Tab @click="pageNum=3; lockServicePage()" :selected="pageNum==3">Lučke</Tab>
<Tab @click="pageNum=4; lockServicePage()" :selected="pageNum==4">Servis</Tab>
<Tab @click="pageNum=0" :selected="pageNum==0">Priprava</Tab>
<Tab @click="pageNum=1" :selected="pageNum==1">Video</Tab>
<Tab @click="pageNum=2" :selected="pageNum==2">Audio</Tab>
<Tab @click="pageNum=3" :selected="pageNum==3">Lučke</Tab>
<Tab @click="pageNum=4" :selected="pageNum==4">Servis</Tab>
</VerticalTabs>
<large style="display: flex;">turbo odličen super mega kontrol panel</large>
<div class="mstatus" v-if="$mqtt.status() != 'connected'">{{ $mqtt.status()?.toUpperCase() }}</div>
</header>
<main style="flex-grow: 1">
<MainPage :class="{'hiddenPage': pageNum != 0}" :room="currentRoom" />
<VideoPage :class="{'hiddenPage': pageNum != 1}" :room="currentRoom" />
<LightingPage :class="{'hiddenPage': pageNum != 3}" :room="currentRoom" />
<ServisPage :class="{'hiddenPage': pageNum != 4}" :room="currentRoom" />
<main>
<MainPage :class="{'hiddenPage': pageNum != 0}" :room="currentRoom"/>
<VideoPage :class="{'hiddenPage': pageNum != 1}" :room="currentRoom"/>
<AudioPage :class="{'hiddenPage': pageNum != 2}" :room="currentRoom"/>
<LightingPage :class="{'hiddenPage': pageNum != 3}" :room="currentRoom"/>
<ServisPage :class="{'hiddenPage': pageNum != 4}" :room="currentRoom" :currently-active="servisActuve"/>
</main>
</div>
</div>
</template>
<style scoped>
@ -78,22 +89,28 @@ function lockServicePage() {
main {
flex: 1;
padding: 1rem;
max-height: 100vh;
overflow-y: auto;
display: flex;
}
h1 {
text-align: center;
main > * {
flex: 1;
}
.sidebar {
max-width: 20vw;
}
.logo {
max-width: 100%;
padding: .4rem;
}
* {
cursor: none;
.mstatus {
text-align: center;
opacity: .4;
}
</style>

32
frontend/vju_display/src/assets/base.css
View file

@ -1,32 +0,0 @@
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
:root {
--color-text: #000;
--color-background: #EEE;
--color-brand-ul-red: #e03127;
--color-brand-ul-light-grey: #E6E7E8;
--color-brand-ul-medium-grey: #A7A8AA;
--color-brand-ul-dark-grey: #58595b;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family: sans-serif;
font-size: 17px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

88
frontend/vju_display/src/assets/main.css
View file

@ -1,7 +1,47 @@
@import './base.css';
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
:root {
--color-text: #000;
--color-background: #EEE;
--color-brand-ul-red: #e03127;
--color-brand-ul-light-grey: #E6E7E8;
--color-brand-ul-medium-grey: #A7A8AA;
--color-brand-ul-dark-grey: #58595b;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family: "Noto Sans", sans-serif;
font-size: 17px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
user-select: none;
}
html, body {
touch-action: manipulation;
}
#app {
max-width: 1280px;
height: 100vh;
margin: 0 auto;
}
@ -26,12 +66,46 @@ a,
}
}
button {
border: none;
background-color: #aaa;
cursor: pointer;
.mstatus {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button:hover, button:focus, button:active {
background-color: #ccc;
button {
background: lightgray;
font-size: 1.3em;
font-weight: bold;
}
button:focus:not(:active) {
background: lightgray;
}
button:focus-visible(:active) {
background: gray;
}
button {
border: none;
background-color: lightgray;
}
button:active {
background: gray;
}
h1 {
text-align: center;
}
h3 {
font-weight: bold;
}
.currentlyActive {
background-color: orange !important
}

16
frontend/vju_display/src/components/AudioControlModule.vue
View file

@ -6,6 +6,7 @@ import { $mqtt } from 'vue-paho-mqtt'
const props = defineProps({
room: String,
big: [Boolean, null]
})
const topicstrs = [ //TODO everything else
@ -64,24 +65,21 @@ const roomState = ref(0)
</script>
<template>
<div>
<!-- TODO lepš -->
<div>
<h3>Ozvočenje</h3>
<button style="" @click="setAudio()">
{{ audioStatus ? 'UGASNI' : 'PRIŽGI' }}
<button @click="setAudio()" :class="{big:big}">
{{ audioStatus ? 'IZKLOP' : 'VKLOP' }}
</button>
</div>
</div>
</template>
<style scoped>
.disabled {
opacity: .8;
pointer-events: none;
}
button {
padding: 1rem;
width: 100%;
}
.big {
font-size: 1.8rem;
height: 5em;
}
</style>

93
frontend/vju_display/src/components/LectureModule.vue
View file

@ -1,18 +1,21 @@
<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue'
//import TheWelcome from './components/TheWelcome.vue'
import { ref, onMounted, reactive, watch } from 'vue'
import { $mqtt } from 'vue-paho-mqtt'
import {ref, onMounted, reactive, watch} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
const props = defineProps({
room: String,
position: String,
})
const projUnreachable = ref(false)
const topicstrs = [ //TODO everything else
props.room + '/projectors/' + props.position + '/status/power',
props.room + '/projectors/' + props.position + '/platno/status',
props.room + '/projectors/' + props.position + '/lift/status'
props.room + '/projectors/' + props.position + '/lift/status',
props.room + '/projectors/' + props.position + '/status'
]
const subscriptions =
@ -29,19 +32,26 @@ function handleIncomingMQTT(topic: string, msg: string) {
let typ: string = ''
if (topic.includes('power')) {
typ = topic.split('/')[4]
} else if (topic.includes('platno')) {
} else if (topic.includes('platno')) {
typ = topic.split('/')[3]
} else if (topic.includes('lift')) {
} else if (topic.includes('lift')) {
typ = topic.split('/')[3]
} else { return }
} else if (topic.endsWith('error')) {
projUnreachable.value = msg == "UNREACHABLE"
} else {
return
}
handleIncStatus(typ, msg)
}
function handleIncStatus(typ: string, msg: string) {
console.log('handling status')
//console.log(projStatus)
if (typ == 'power') { roomStatus.proj_power = msg == '1' }
else if (typ == 'platno') { roomStatus.platno_state = msg }
if (typ == 'power') {
roomStatus.proj_power = msg == '1'
} else if (typ == 'platno') {
roomStatus.platno_state = msg
}
//else if (typ == 'lift') { roomStatus.lift_state = msg }
}
@ -60,29 +70,33 @@ function sleep(ms: number) {
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
$mqtt.publish(topic, msg, 'Fnr') //todo refactor to 1 or 0 maybe
console.log('sent')
}
async function setLecture(pos?: String) {
if (!pos) { return }
if (!pos) {
return
}
let topicPref = props.room + "/projectors/" + props.position + "/"
let command = '0'
if (roomState.value == 0) {
if (roomState.value == 0 || roomState.value == 3) {
command = '1'
} // else if (roomState.value == 1) {
// command = '0'
// } else { return }
publishMQTTMsg((props.room + '/power/master/set'), '1')
publishMQTTMsg((props.room + '/power/projectors/set'), '1')
await sleep(500)
publishMQTTMsg((topicPref + 'command/power'), command)
publishMQTTMsg((topicPref + 'platno/goto'), command == '1' ? 'DOWN' : 'UP')
publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'down') ), '1')
publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'down')), '1')
await sleep(1000)
// publishMQTTMsg((topicPref + 'platno/goto'), 'STOP')
publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'down') ), '0')
publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'down')), '0')
}
//TODO organize better, binds, etc.
const roomStatus = reactive({
@ -91,19 +105,26 @@ const roomStatus = reactive({
platno_state: 'UNKNOWN',
})
enum RoomStatus {
OFF = 0,
ON = 1,
UNKNOWN = 2,
ERROR = 3,
}
const roomState = ref(0)
// OFF -> 0; ON -> 1; IN BETWEEN -> 2
watch (roomStatus, (_, _newState) => {
if (!_newState) { return }
watch(roomStatus, (_, _newState) => {
if (!_newState) {
return
}
let allOn = _newState.proj_power && _newState.platno_state == 'DOWN' //&& _newState.lift_state == 'DOWN'
let allOff = !_newState.proj_power && _newState.platno_state == 'UP' //&& _newState.lift_state == 'UP'
let anyUnknown = _newState.platno_state == 'UNKNOWN'
if (allOn) {
roomState.value = 1
} else if (allOff) {
if (_newState.platno_state == 'DOWN') {
roomState.value = RoomStatus.ON
} else if (_newState.platno_state == 'UP') {
roomState.value = 0
} else if (anyUnknown) {
roomState.value = 3
@ -116,31 +137,45 @@ watch (roomStatus, (_, _newState) => {
</script>
<template>
<span v-if="projUnreachable">CONNECTION FAILED</span>
<div>
<!-- TODO lepš -->
<div>
<h3 v-if="roomState == 1">AKTIVNO</h3>
<h3 v-else-if="roomState == 0">PRIPRAVLJENOST</h3>
<h3 v-else-if="roomState == 2">POČAKAJTE</h3>
<h3 v-else-if="roomState == 3">NEZNANO STANJE</h3>
<h3 v-else>NAPAKA</h3>
<div class="status" v-if="roomState == 1">VKLOPLJENO</div>
<div class="status" v-else-if="roomState == 0">IZKLOPLJENO</div>
<div class="status" v-else-if="roomState == 2">POČAKAJTE</div>
<div class="status" v-else-if="roomState == 3">NEZNANO STANJE</div>
<div class="status" v-else>NAPAKA</div>
<button style="" @click="setLecture(props.position)" :disabled="roomState == 2">
{{ roomState == 1 ? 'UGASNI' : (roomState == 0 ? 'PRIŽGI' : '...') }}
{{ roomState == 1 ? 'IZKLOP' : (roomState == 0 || roomState == 3 ? 'VKLOP' : '...') }}
</button>
</div>
<h6>Projektor status: {{ roomStatus.proj_power ? "ON" : "OFF" }}</h6>
<h6>Platno pozicija: {{ roomStatus.platno_state }}</h6>
<!-- <h6>Dvigalo pozicija: {{ roomStatus.lift_state }}</h6>-->
<!--TODO ce hoces naj bo kot nek debug flag -->
<!-- <div>Projektor status: {{ roomStatus.proj_power ? "ON" : "OFF" }}</div>
<div>Platno pozicija: {{ roomStatus.platno_state }}</div>-->
<!-- <h6>Dvigalo pozicija: {{ roomStatus.lift_state }}</h6>-->
</div>
</template>
<style scoped>
.status {
font-size: 1.1em;
font-weight: normal;
}
.disabled {
opacity: .8;
pointer-events: none;
}
button {
padding: 1rem;
width: 100%;
height: 10rem;
font-size: 1.8rem;
}
</style>

47
frontend/vju_display/src/components/Lift.vue
View file

@ -1,8 +1,8 @@
<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 {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from './icons/DownIcon.vue';
import UpIcon from './icons/UpIcon.vue';
@ -17,13 +17,13 @@ const topicstrs = [ //TODO everything else
]
const subscriptions =
topicstrs.map(topic => {
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)
@ -72,9 +72,10 @@ onMounted(() => {
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
$mqtt.publish(topic, msg, 'Fnr') //todo refactor to 1 or 0 maybe
console.log('sent')
}
const publishPrefix = ref(props.room + '/projectors/' + props.position + '/lift/')
@ -87,27 +88,40 @@ TODO: NE HARDCODANO
<template>
<div style="display:flex; gap: 1rem">
<div>
<h4>Lifti {{ props.position }}</h4>
<h4>Lifti</h4>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'move/up', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/up', '0')" >
<UpIcon /></button>
@touchstart="publishMQTTMsg(publishPrefix + 'move/up', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/up', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'move/up', '0')">
<UpIcon/>
</button>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'move/down', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/down', '0')" >
<DownIcon /></button>
</div><div>
<h4>Servis lifti {{ props.position }}</h4>
@touchstart="publishMQTTMsg(publishPrefix + 'move/down', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/down', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'move/down', '0')">
<DownIcon/>
</button>
</div>
<div>
<h4>Servis</h4>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'move/service_up', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/service_up', '0')" >
<UpIcon /></button>
@touchstart="publishMQTTMsg(publishPrefix + 'move/service_up', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/service_up', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'move/service_up', '0')">
<UpIcon/>
</button>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'move/service_down', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/service_down', '0')" >
<DownIcon /></button>
@touchstart="publishMQTTMsg(publishPrefix + 'move/service_down', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'move/service_down', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'move/service_down', '0')">
<DownIcon/>
</button>
</div>
</div>
</template>
@ -117,6 +131,7 @@ TODO: NE HARDCODANO
opacity: .8;
pointer-events: none;
}
button {
padding: 1rem;
margin: 0.1rem;

2
frontend/vju_display/src/components/MasterPowerControlModule.vue
View file

@ -69,7 +69,7 @@ const roomState = ref(0)
<div>
<h3>Sistem</h3>
<button style="" @click="setMaster()">
{{ MasterStatus ? 'UGASNI' : 'PRIŽGI' }}
{{ MasterStatus ? 'IZKLOP' : 'VKLOP' }}
</button>
</div>
</div>

125
frontend/vju_display/src/components/Numpad.vue Normal file
View file

@ -0,0 +1,125 @@
<script setup lang="ts">
import {ref, computed} from 'vue'
const emit = defineEmits(['submitPasscode'])
defineProps([])
const correctCode = '1337'
const passcodeLength = correctCode.length
const enteredCode = ref('')
const status = ref('')
const showStatus = ref(false)
const appendDigit = (digit: string) => {
if (enteredCode.value.length < passcodeLength) {
enteredCode.value += digit
// console.log('entered code', enteredCode.value)
}
}
const clear = () => {
enteredCode.value = ''
status.value = ''
}
const submit = () => {
if (enteredCode.value === correctCode) {
status.value = 'Access Granted'
emit('submitPasscode', true)
} else {
status.value = 'Access Denied'
enteredCode.value = "Access Denied"
showStatus.value = true
}
setTimeout(() => {
clear()
showStatus.value = false
}, 1000)
}
</script>
<template>
<div class="keypad">
<div class="keypadFeedback">
<span v-show="showStatus">Access Denied</span>
<span v-show="!showStatus" v-for="(_, i) in passcodeLength" :key="i">
<span class="">
{{ enteredCode[i] ? '•' : ' ' }}
</span>
</span>
</div>
<div class="">
<div class="keypadButtons">
<div class="keypadRow">
<button @click="appendDigit('1')">1</button>
<button @click="appendDigit('2')">2</button>
<button @click="appendDigit('3')">3</button>
</div>
<div class="keypadRow">
<button @click="appendDigit('4')">4</button>
<button @click="appendDigit('5')">5</button>
<button @click="appendDigit('6')">6</button>
</div>
<div class="keypadRow">
<button @click="appendDigit('7')">7</button>
<button @click="appendDigit('8')">8</button>
<button @click="appendDigit('9')">9</button>
</div>
<div class="keypadRow">
<button class="" @click="clear">Del</button>
<button @click="appendDigit('0')">0</button>
<button class="" @click="submit">OK</button>
</div>
</div>
</div>
<!-- <div v-if="status" class="">-->
<!-- {{ status }}-->
<!-- </div>-->
</div>
</template>
<style scoped>
button {
margin: 0.1em;
flex: max-content;
padding: 1.5em;
text-align: center;
align-self: inherit;
justify-content: space-evenly;
}
.keypad {
display: flex;
flex-direction: column;
margin: 2em;
align-content: space-evenly;
}
.keypadRow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
align-content: space-evenly;
}
.keypadFeedback {
display: inline-block;
text-align: center;
//border: 2px solid darkgray;
background-color: lightgray;
background-clip: border-box;
font-size: 2em;
min-height: 2em;
margin-bottom: 1em;
}
</style>

78
frontend/vju_display/src/components/PinPopup.vue
View file

@ -1,78 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const props = defineProps({
onClose: [Function, null],
onSuccess: [Function, null]
})
const pin = ref("1337")
const testPin = ref("0000")
// export default {
// props: ['onClose', 'onSuccess'],
// data() {
// return {
// pin: '',
// };
// },
// methods: {
function checkPin() {
// Your hard-coded pin
if (testPin.value === pin.value) {
if (props.onSuccess)
props.onSuccess(); // Let parent component know pin is correct
if (props.onClose)
props.onClose();
} else {
alert('Incorrect pin');
}
}
function close() {
if (props.onClose)
props.onClose();
}
</script>
<template>
<div class="pin-popup">
<div class="overlay" @click="close"></div>
<div class="popup">
<h2>Enter Pin Code</h2>
<input v-model="pin" type="password" placeholder="Pin Code" />
<button @click="checkPin">Submit</button>
</div>
</div>
</template>
<style scoped>
.pin-popup {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.popup {
background: white;
padding: 20px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 10px;
}
</style>

52
frontend/vju_display/src/components/Platno.vue
View file

@ -1,8 +1,8 @@
<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 {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from './icons/DownIcon.vue';
import UpIcon from './icons/UpIcon.vue';
@ -18,13 +18,13 @@ const topicstrs = [ //TODO everything else
]
const subscriptions =
topicstrs.map(topic => {
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)
@ -70,7 +70,6 @@ function publishMQTTMsg(topic: string, msg: string) {
}
const publishPrefix = ref(props.room + '/projectors/' + props.position + '/platno/')
//TODO organize better, binds, etc.
@ -87,37 +86,56 @@ const platnoStatus = ref(platnoState.UNKNOWN)
</script>
<template>
<div style="display:flex; gap: 1rem">
<!-- <h3>{{ props.room }}</h3> -->
<!-- <form> -->
<!-- TODO lepš -->
<div>
<h4>platna {{ props.position }}</h4>
<h4>Platno</h4>
<div class="updown">
<button
@click="publishMQTTMsg(publishPrefix + 'goto', 'UP')"><UpIcon/></button>
@click="publishMQTTMsg(publishPrefix + 'goto', 'UP')">
<UpIcon/>
</button>
<button
@click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')"><DownIcon/></button>
@click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')">
<DownIcon/>
</button>
</div>
<div v-if="props.ctrlType == 'service'">
<h5>Manual control</h5>
<div class="updown">
<button
@mousedown="publishMQTTMsg(publishPrefix + 'move', 'UP')"
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
<UpIcon /></button>
@touchstart="publishMQTTMsg(publishPrefix + 'move', 'UP')"
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'move', 'STOP')">
<UpIcon/>
</button>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'move', 'DOWN')"
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
<DownIcon /></button>
@touchstart="publishMQTTMsg(publishPrefix + 'move', 'DOWN')"
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'move', 'STOP')">
<DownIcon/>
</button>
</div>
</div>
<!-- </form> -->
</div>
</template>
<style scoped>
button {
padding: 1rem;
margin: 0.1rem;
width: 45%;
}
.updown {
display: flex
}
.updown button {
flex: 1
}
</style>

2
frontend/vju_display/src/components/ProjectorPowerModule.vue
View file

@ -69,7 +69,7 @@ const roomState = ref(0)
<div>
<h3>Projektorji</h3>
<button style="" @click="setProjectors()">
{{ projectorsStatus ? 'UGASNI' : 'PRIŽGI' }}
{{ projectorsStatus ? 'IZKLOP' : 'VKLOP' }}
</button>
</div>
</div>

18
frontend/vju_display/src/components/Projektor.vue
View file

@ -14,8 +14,11 @@ const topicstrs = [ //TODO everything else
props.room + '/projectors/' + props.position + '/status/power',
props.room + '/projectors/' + props.position + '/status/shutter',
props.room + '/projectors/' + props.position + '/status/freeze',
props.room + '/projectors/' + props.position + '/status',
]
const isUnreachable = ref(false)
const subscriptions =
topicstrs.map(topic => {
// console.log('subbing to', topic)
@ -27,10 +30,12 @@ const subscriptions =
function handleIncomingMQTT(topic: string, msg: string) {
console.log('Received on', topic, 'with message', msg)
if (topic.includes('status')) {
if (topic.includes('status') && !topic.endsWith('status')) {
//console.log(topic.split('/'))
let typ = topic.split('/')[4]
handleProjectorStatus(typ, msg)
} else {
isUnreachable.value = msg.length > 1
}
}
@ -51,7 +56,7 @@ onMounted(() => {
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
$mqtt.publish(topic, msg, 'Fnr') //todo refactor to 1 or 0 maybe
console.log('sent')
}
@ -71,20 +76,21 @@ const projStatus = reactive({
<template>
<div>
<span v-if="isUnreachable">CONNECTION FAILED</span>
<!-- TODO lepš -->
<div>
<h5>Power: {{ (projStatus.power ? "ON" : "OFF") }}</h5>
<h4>Power</h4>
<button @click="publishMQTTMsg(publishPrefix + 'power', (!projStatus.power ? '1' : '0'))">
Turn {{ projStatus.power ? 'OFF' : 'ON' }}</button>
</div>
<div :class="{ disabled: !projStatus.power }">
<div>
<h5>Shutter: {{ (projStatus.shutter ? "ON" : "OFF") }}</h5>
<h4>Shutter</h4>
<button @click="publishMQTTMsg(publishPrefix + 'shutter', (!projStatus.shutter ? '1' : '0'))">
Turn {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
</div>
<div>
<h5>Freeze image: {{ (projStatus.freeze ? "ON" : "OFF") }}</h5>
<h4>Freeze image</h4>
<button @click="publishMQTTMsg(publishPrefix + 'freeze', (!projStatus.freeze ? '1' : '0'))">
Turn {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
</div>
@ -94,7 +100,7 @@ const projStatus = reactive({
<style scoped>
.disabled {
opacity: .8;
opacity: .5;
pointer-events: none;
}
button {

2
frontend/vju_display/src/components/ResetButton.vue
View file

@ -63,7 +63,7 @@ async function resetAll() {
<div>
<!-- TODO lepš -->
<div>
<h3>Reset sistema</h3>
<h3>Reset sist.</h3>
<button style="" @click="resetAll()">
RESET
</button>

2
frontend/vju_display/src/components/icons/DownIcon.vue
View file

@ -1,3 +1,3 @@
<template>
🢃
▼
</template>

2
frontend/vju_display/src/components/icons/UpIcon.vue
View file

@ -1,3 +1,3 @@
<template>
🢁
▲
</template>

53
frontend/vju_display/src/components/pages/AudioPage.vue Normal file
View file

@ -0,0 +1,53 @@
<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 DownIcon from '../icons/DownIcon.vue';
import UpIcon from '../icons/UpIcon.vue';
import AudioControlModule from "@/components/AudioControlModule.vue";
const props = defineProps({
room: String,
position: String
})
const topicstrs = [ //TODO everything else
props.room + '/power/audio/set'
]
const subscriptions =
topicstrs.map(topic => {
// console.log('subbing to', topic)
$mqtt.subscribe(topic, (msg) => {
// console.log('received:', topic, msg)
})
})
</script>
<template>
<div class="page">
<div style="display:flex; gap: 1rem">
<AudioControlModule :room="room" />
</div>
</div>
</template>
<style scoped>
.disabled {
opacity: .8;
pointer-events: none;
}
button {
padding: 1rem;
margin: 0.1rem;
width: 45%;
}
.currentlySelectedPreset {
background-color: orange;
}
</style>

103
frontend/vju_display/src/components/pages/LightingPage.vue
View file

@ -1,8 +1,8 @@
<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 {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from '../icons/DownIcon.vue';
import UpIcon from '../icons/UpIcon.vue';
@ -12,21 +12,21 @@ const props = defineProps({
})
const topicstrs = [ //TODO everything else
props.room + '/projectors/' + props.position + 'platno/status',
props.room + '/projectors/' + props.position + 'platno/status',
props.room + '/shades/status',
props.room + '/lucke/preset/current',
]
const lastPreset = ref("-1")
const platnoStatus = ref("UNKNOWN")
const subscriptions =
topicstrs.map(topic => {
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)
@ -45,11 +45,13 @@ enum firankState {
MOVING,
STOPPED
}
const firankStatus = ref(firankState.STOPPED)
function handlePlatnoStatus(msg: string) {
console.log('handling status')
//console.log(projStatus)
platnoStatus.value = msg
let newState: firankState
switch (msg) {
case "UP":
@ -80,56 +82,81 @@ function publishMQTTMsg(topic: string, msg: string) {
$mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
console.log('sent')
}
const publishPrefix = ref(props.room + '/')
</script>
<template>
<div>
<div style="display:flex; gap: 1rem">
<div>
<h4>Firanki</h4>
<div class="page">
<div class="razsvetljava">
<div style="display: flex">
<h3>Razsvetljava</h3>
</div>
<div class="lightButtons" style="display: flex; flex-direction: column; align-items: stretch">
<div style="display: flex;">
<button :class="{currentlyActive: (lastPreset == '4')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '4')">IZKLOP
</button>
<button :class="{currentlyActive: (lastPreset == '3')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '3')">PRIPRAVA
</button>
</div>
<div style="display: flex">
<button :class="{currentlyActive: (lastPreset == '2')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '2')">PREDAVANJE
</button>
<button :class="{currentlyActive: (lastPreset == '1')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '1')">PROJEKCIJA
</button>
</div>
</div>
</div>
<div style="justify-content: center">
<h3>Senčila</h3>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'firanki/move', 'MOVE_UP')"
@mouseup="publishMQTTMsg(publishPrefix + 'firanki/move', 'STOP')" >
<UpIcon /></button>
:class="{currentlyActive: (platnoStatus == 'MOVING_UP')}"
@mousedown="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_UP')"
@touchstart="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_UP')"
@mouseup="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')">
<UpIcon/>
</button>
<button
@mousedown="publishMQTTMsg(publishPrefix + 'firanki/move', 'MOVE_DOWN')"
@mouseup="publishMQTTMsg(publishPrefix + 'firanki/move', 'STOP')" >
<DownIcon /></button>
</div>
</div>
<div style="display: flex; gap: 1rem;">
<div>
<h4>Lučka presets</h4>
<h5>CURRENT SCENE: {{ lastPreset }} -- TODO MAKE BUTTON LIGHT UP</h5>
<button :class="{currentlySelectedPreset: (lastPreset == '1')}" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '1')"A>1</button>
<button :class="{currentlySelectedPreset: (lastPreset == '2')}" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '2')"A>2</button>
<button :class="{currentlySelectedPreset: (lastPreset == '3')}" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '3')"A>3</button>
<button :class="{currentlySelectedPreset: (lastPreset == '4')}" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '4')"A>4</button>
<button :class="{currentlySelectedPreset: (lastPreset == '9')}" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', 'E')"A>Plchldr E</button>
<button :class="{currentlySelectedPreset: (lastPreset == '9')}" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', 'F')"A>Plchldr F</button>
</div>
:class="{currentlyActive: (platnoStatus == 'MOVING_DOWN')}"
@touchstart="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_DOWN')"
@mousedown="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_DOWN')"
@mouseup="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')">
<DownIcon/>
</button>
</div>
</div>
</template>
<style scoped>
.disabled {
opacity: .8;
pointer-events: none;
}
button {
padding: 1rem;
margin: 0.1rem;
width: 45%;
}
.currentlySelectedPreset {
background-color: orange;
.lightButtons {
display: flex;
}
.lightButtons button {
width: fit-content;
flex: 1;
height: 4em;
}
</style>

29
frontend/vju_display/src/components/pages/MainPage.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import {ref, onMounted, reactive } from 'vue'
import { $mqtt } from 'vue-paho-mqtt'
import {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
import Projektor from '../Projektor.vue';
import Platno from '../Platno.vue';
import Lift from '../Lift.vue';
@ -20,21 +20,28 @@ let _stranski = ref('side')
</script>
<template>
<div style="display:flex; gap: 1rem; margin:inherit">
<div class="page">
<div style="display: flex; gap: 1rem; margin:inherit">
<div style="width: 50%;">
<h4>Glavni:</h4>
<LectureModule :room="props.room" :position="_glavni" />
<h3>Glavni projektor</h3>
<LectureModule :room="props.room" :position="_glavni"/>
</div>
<div style="width: 50%;">
<h4>Stranski:</h4>
<LectureModule :room="props.room" :position="_stranski" />
<h3>Stranski projektor</h3>
<LectureModule :room="props.room" :position="_stranski"/>
</div>
</div>
<div style="text-align: center">
<AudioControlModule :room="props.room" :big="true"/>
</div>
<AudioControlModule :room="props.room" />
</div>
</template>
<style lang="css">
* {
cursor: pointer;
<style scoped>
.page {
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
</style>

38
frontend/vju_display/src/components/pages/PinPage.vue
View file

@ -1,38 +0,0 @@
<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'
import Lift from '../Lift.vue';
import Projektor from '../Projektor.vue';
const props = defineProps({
room: String,
})
const _glavni_position = ref('glavni')
const _stranski_position = ref('stranski')
const _ctrl_type = ref('service')
</script>
<template>
<div style="display: flex; gap: 1rem">
<div>
<Projektor :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type" />
<Lift :room="props.room" :position="_glavni_position" />
<Platno :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type"/>
</div>
<div>
<Projektor :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type"/>
<Lift :room="props.room" :position="_stranski_position" />
<Platno :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type" />
</div>
</div>
</template>
<style scoped>
</style>

45
frontend/vju_display/src/components/pages/ServisPage.vue
View file

@ -1,8 +1,8 @@
<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 {ref, onMounted, reactive, watch} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
// import Projektor from '../Projektor.vue'
import Platno from '../Platno.vue'
import Lift from '../Lift.vue';
@ -11,43 +11,66 @@ import ProjectorPowerModule from "@/components/ProjectorPowerModule.vue";
import AudioControlModule from "@/components/AudioControlModule.vue";
import MasterPowerControlModule from "@/components/MasterPowerControlModule.vue";
import ResetButton from "@/components/ResetButton.vue";
import Numpad from "@/components/Numpad.vue";
const props = defineProps({
room: String,
currentlyActive: Boolean,
})
const _glavni_position = ref('main')
const _stranski_position = ref('side')
const _ctrl_type = ref('service')
const showServis = ref(false)
watch(props, (ca) => {
if (!props.currentlyActive) {
showServis.value = false
}
}, {
immediate: true,
deep: true,
})
</script>
<template>
<div style="display: flex; gap: 1rem">
<div>
<Projektor :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type" />
<Lift :room="props.room" :position="_glavni_position" />
<div v-show="!showServis" style="display: flex">
<Numpad @submit-passcode="(b: boolean) => showServis = b"/>
</div>
<div v-show="showServis" style="display: flex; gap: 1rem">
<div>
<Projektor :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type"/>
<Lift :room="props.room" :position="_glavni_position"/>
<Platno :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type"/>
</div>
<div>
<Projektor :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type"/>
<Lift :room="props.room" :position="_stranski_position" />
<Platno :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type" />
<Lift :room="props.room" :position="_stranski_position"/>
<Platno :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type"/>
</div>
<div>
<h5>POWER CONTROL</h5>
<div>
<ProjectorPowerModule :room="props.room" />
<AudioControlModule :room="props.room" />
<MasterPowerControlModule :room="props.room" />
<ProjectorPowerModule :room="props.room"/>
<AudioControlModule :room="props.room"/>
<MasterPowerControlModule :room="props.room"/>
</div>
<div></div>
<ResetButton :room="props.room"/>
</div>
</div>
</div>
</template>
<style scoped>
</style>
<!-- scaling UIja, buttons as big as can, text as big (within reason), clear feedback, mqtt defaults to host font family noto sans, sans serif, chrome disable -->
<!-- naj se odziva ono sam na platno status fuj fej -->

19
frontend/vju_display/src/components/pages/VideoPage.vue
View file

@ -16,14 +16,14 @@ const _test = ref('test')
</script>
<template>
<div style="display: flex; gap: 1rem">
<div>
<h4>Glavni</h4>
<div class="page">
<div class="col">
<h3>Glavni</h3>
<Projektor :room="props.room" :position="_glavni_position" :ctrl-type="_test" />
<Platno :room="props.room" :position="_glavni_position" :ctrl-type="_test" />
</div>
<div>
<h4>Stranski</h4>
<div class="col">
<h3>Stranski</h3>
<Projektor :room="props.room" :position="_stranski_position" :ctrltype="_test"/>
<Platno :room="props.room" :position="_stranski_position" :ctrl-type="_test"/>
</div>
@ -31,5 +31,12 @@ const _test = ref('test')
</template>
<style scoped>
.page {
display: flex;
flex-direction: row;
gap: 1rem;
}
.col {
flex: 1;
}
</style>

1
frontend/vju_display/src/components/tabs/Tab.vue
View file

@ -16,7 +16,6 @@ const props = defineProps({
font-weight: bold;
}
.tab:hover {
cursor: pointer;
}

1
frontend/vju_display/src/components/tabs/VerticalTabs.vue
View file

@ -8,7 +8,6 @@
<style scoped>
.tab:hover {
cursor: pointer;
}

6
frontend/vju_display/src/main.ts
View file

@ -10,20 +10,20 @@ createApp(App)
createPahoMqttPlugin({
PluginOptions: {
autoConnect: true,
showNotifications: true,
showNotifications: false,
},
MqttOptions: {
//host: import.meta.env.VITE_MQTT_HOST,
//host: "localhost",
host: urlParams.get('mqtt') || 'localhost',
host: urlParams.get('mqtt') || window.location.hostname,
port: 8080,
useSSL: false,
//port: parseInt(import.meta.env.VITE_MQTT_PORT),
//useSSL: ["1", "true", "True"].includes(import.meta.env.VITE_MQTT_SSL),
clientId: `vju-${Math.random() * 9999}`,
//mainTopic: '',
enableMainTopic: false
enableMainTopic: false,
},
})
)

63
tse_serial/tse_serial_controler.py
View file

@ -23,7 +23,7 @@ portList = serial.tools.list_ports.comports()
if len(portList) < 1:
sys.exit("No serial port found")
#TODO if multiple ports idk, shouldn't ever happen but still
(serport, serdesc, serhwid) = portList[0]
(serport, serdesc, serhwid) = portList[0] #TODO CHECK FOR TTYUSB0
#TODO if port provided from conf, set, otherwise autodetect magical thing just works
aser: aioserial.AioSerial = aioserial.AioSerial(
@ -120,7 +120,7 @@ async def handleTsePower(client, sysSelect, cmd):
async def handleTseSencilo(client, cmd):
#relName = tval.split('/')[3]
topicPub = f'{room}/firanki/status'
topicPub = f'{room}/shades/status'
if cmd == "MOVE_UP":
rel = RelayState(shades_mapping['UP'], True)
await executeAndPublish(client, topicPub, "MOVING_UP", rel)
@ -132,14 +132,17 @@ async def handleTseSencilo(client, cmd):
await executeAndPublish(client, topicPub, "STOPPED", RelayState(shades_mapping['DOWN'], False))
platnoBckgdMoving = False # mucho importante variable prav zares dedoles
platnoBckgdMoving = {
'main': False,
'side': False,
} # mucho importante variable prav zares dedoles
async def platnoTimeout(mqttClient, pubTopic, pubPayload, relStat: RelayState, intent):
async def platnoTimeout(mqttClient, pubTopic, pubPayload, relStat: RelayState, intent, select):
global platnoBckgdMoving
await asyncio.sleep(25) #TODO time actual delay
relStat.state = False
await executeAndPublish(mqttClient, pubTopic, intent, relStat)
platnoBckgdMoving = False #TODO properly document why this is here and what it does
platnoBckgdMoving[select] = False #TODO properly document why this is here and what it does
async def handleTsePlatno(client, proj, cmdType, cmd):
global platnoBckgdMoving
@ -148,49 +151,56 @@ async def handleTsePlatno(client, proj, cmdType, cmd):
#projector = topicSplit[2]
#command = topicSplit[4]
pubTop = f'{room}/projectors/{proj}/platno/status'
if platnoBckgdMoving:
if not (proj == "main" or proj == "side"):
return
if platnoBckgdMoving[proj]:
if cmd == 'STOP':
pubPld = 'UNKNOWN'
rel1 = RelayState(platno_mapping[proj]['UP'], False)
rel2 = RelayState(platno_mapping[proj]['DOWN'], False)
await executeAndPublish(client,pubTop, pubPld, rel1)
await executeAndPublish(client,pubTop, pubPld, rel2)
platnoBckgdMoving = False
platnoBckgdMoving[proj] = False
else:
return #TODO print ignore any other move commands while moving
print("Ignored command because already moving", proj, cmdType, cmd)
return
#movement cmds
elif cmdType == 'move':
if cmdType == 'move':
print('move')
rel: RelayState
if cmd == 'UP':
rel = RelayState(platno_mapping[proj]['UP'], True)
pubPld = 'MOVING_UP'
elif cmd == 'DOWN':
rel = RelayState(platno_mapping[proj]['DOWN'], True)
pubPld = 'MOVING_DOWN'
else:
return # in case of invalid input skip
platnoBckgdMoving = True #TODO rename to moving, add comment how it works
pubPld = 'MOVING'
platnoBckgdMoving[proj] = True #TODO rename to moving, add comment how it works
await executeAndPublish(client, pubTop, pubPld, rel)
#TODO WTF HAPPENS IF YOU SEND UP AND DOWN AT ONCE?? (screenshot?)
#TODO WTF HAPPENS IF YOU SEND UP AND DOWN AT ONCE?? (screenshot?)
#TODO daj ignore print ko je locked up
elif cmdType == 'goto':
# print('received GOTO')
print('received GOTO')
rel: RelayState
if cmd == 'UP':
rel = RelayState(platno_mapping[proj]['UP'], True)
intent = 'UP'
pubPld = 'MOVING_UP'
elif cmd == 'DOWN':
rel = RelayState(platno_mapping[proj]['DOWN'], True)
intent = 'DOWN'
pubPld = 'MOVING_DOWN'
else:
return # in case of invalid input skip
platnoBckgdMoving = True
pubPld = 'MOVING'
platnoBckgdMoving[proj] = True
# pubPld = 'MOVING'
await executeAndPublish(client, pubTop, pubPld, rel)
asyncio.create_task(platnoTimeout(client, pubTop, pubPld, rel, intent))
asyncio.create_task(platnoTimeout(client, pubTop, pubPld, rel, intent, proj))
return
else:
print('unknown command')
async def task_command2serial(controlClient: aiomqtt.Client):
#print('oge')
@ -208,16 +218,21 @@ async def task_command2serial(controlClient: aiomqtt.Client):
cmnd = mesg.payload.decode()
#print('Received on: ', topicVal, ' with:', cmnd)
#print('bfr')
if mesg.topic.matches(f'{room}/projectors/+/platno/#'):
proj = msgTopic[2] # glavni / stranski
cmdType = msgTopic[4] # move / goto
if mesg.topic.matches(f'{room}/projectors/+/platno/move') or mesg.topic.matches(f'{room}/projectors/+/platno/goto'):
proj = msgTopic[-3]
cmdType = msgTopic[-1] # move / goto
print(f'on {topicVal} received: {cmnd}')
await handleTsePlatno(controlClient, proj, cmdType, cmnd) #TODO odzadi index
elif mesg.topic.matches(f'{room}/power/+/set'):
systype = msgTopic[2]
systype = msgTopic[-2]
print(f'on {topicVal} received: {cmnd}')
print('calling power')
await handleTsePower(controlClient, systype, cmnd)
elif mesg.topic.matches(f'{room}/firanki/move'):
elif mesg.topic.matches(f'{room}/shades/move'):
print(f'on {topicVal} received: {cmnd}')
print('calling move')
await handleTseSencilo(controlClient, cmnd)
else: