frontend overhaul, minor backend bugfixes
This commit is contained in:
parent
acc38950e7
commit
c1325c0eda
28 changed files with 767 additions and 481 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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"/>
|
||||
<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">
|
||||
<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" />
|
||||
<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>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -9,10 +9,13 @@ const props = defineProps({
|
|||
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 =
|
||||
|
@ -33,15 +36,22 @@ function handleIncomingMQTT(topic: string, msg: string) {
|
|||
typ = topic.split('/')[3]
|
||||
} 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,19 +70,24 @@ 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')
|
||||
|
@ -82,7 +97,6 @@ async function setLecture(pos?: String) {
|
|||
}
|
||||
|
||||
|
||||
|
||||
//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 }
|
||||
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>
|
||||
|
||||
<!--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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
125
frontend/vju_display/src/components/Numpad.vue
Normal 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>
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<template>
|
||||
🢃
|
||||
▼
|
||||
</template>
|
|
@ -1,3 +1,3 @@
|
|||
<template>
|
||||
🢁
|
||||
▲
|
||||
</template>
|
53
frontend/vju_display/src/components/pages/AudioPage.vue
Normal file
53
frontend/vju_display/src/components/pages/AudioPage.vue
Normal 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>
|
|
@ -12,12 +12,12 @@ 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 => {
|
||||
|
@ -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>
|
||||
|
|
|
@ -20,21 +20,28 @@ let _stranski = ref('side')
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div style="display: flex; gap: 1rem; margin:inherit">
|
||||
<div style="width: 50%;">
|
||||
<h4>Glavni:</h4>
|
||||
<h3>Glavni projektor</h3>
|
||||
<LectureModule :room="props.room" :position="_glavni"/>
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<h4>Stranski:</h4>
|
||||
<h3>Stranski projektor</h3>
|
||||
<LectureModule :room="props.room" :position="_stranski"/>
|
||||
</div>
|
||||
<AudioControlModule :room="props.room" />
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<AudioControlModule :room="props.room" :big="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="css">
|
||||
* {
|
||||
cursor: pointer;
|
||||
<style scoped>
|
||||
.page {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
|
@ -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>
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
//import HelloWorld from './components/HelloWorld.vue'
|
||||
//import TheWelcome from './components/TheWelcome.vue'
|
||||
import {ref, onMounted, reactive } from 'vue'
|
||||
import {ref, onMounted, reactive, watch} from 'vue'
|
||||
import {$mqtt} from 'vue-paho-mqtt'
|
||||
// import Projektor from '../Projektor.vue'
|
||||
import Platno from '../Platno.vue'
|
||||
|
@ -11,19 +11,38 @@ 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>
|
||||
<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"/>
|
||||
|
@ -46,8 +65,12 @@ const _ctrl_type = ref('service')
|
|||
<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 -->
|
|
@ -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>
|
||||
|
|
|
@ -16,7 +16,6 @@ const props = defineProps({
|
|||
font-weight: bold;
|
||||
}
|
||||
.tab:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
|
||||
<style scoped>
|
||||
.tab:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
)
|
||||
|
|
|
@ -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 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:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue