finalized scripts for prototype deployment, added some features on frontend

frontend/vju_display/src/App.vue

@@ -7,6 +7,7 @@ import Tab from './components/tabs/Tab.vue';
 import LightingPage from './components/pages/LightingPage.vue';
 import ServisPage from './components/pages/ServisPage.vue';
 
+
 let urlParams = new URLSearchParams(window.location.search);
 
 const currentRoom = ref(urlParams.get('room') || 'none') // if no param specified
@@ -16,32 +17,16 @@ const currentRoom = ref(urlParams.get('room') || 'none') // if no param specifie
 
 
 const pageNum = ref(0)
-const srvcUnlocked = ref(false) 
+const srvcUnlocked = ref(true) 
 const showPinPopup = ref(false)
 
-function openPinDiag() {
 
-}
-
-function closePinDiag() {
-
-}
-
-function unlockServicePage() {
-  showPinPopup.value = true
-  while (true) {
-    if ('' == '') {
-      srvcUnlocked.value = true
-      closePinDiag()
-      break
-    }
-  }
-}
 
 function lockServicePage() {
   srvcUnlocked.value = false
 }
 
+
 </script>
 
 <template>
@@ -59,18 +44,17 @@ function lockServicePage() {
         <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; unlockServicePage()" :selected="pageNum==4">Servis</Tab>
+        <Tab @click="pageNum=4; lockServicePage()" :selected="pageNum==4">Servis</Tab>
       </VerticalTabs>
       <large style="display: flex;">turbo odličen super mega kontrol panel</large>
     </header>
-
     <main>
       <MainPage v-if="pageNum == 0" :room="currentRoom" />
       <VideoPage v-else-if="pageNum == 1" :room="currentRoom" />
       
       <LightingPage v-else-if="pageNum == 3" :room="currentRoom" />
 
-      <ServisPage v-else-if="pageNum == 4 && srvcUnlocked" :room="currentRoom" />
+      <ServisPage v-else-if="pageNum == 4" :room="currentRoom" />
     </main>
   </div>
 </template>
@@ -100,4 +84,8 @@ h1 {
   padding: .4rem;
 }
 
+* {
+cursor: none;
+}
+
 </style>

frontend/vju_display/src/components/AudioControlModule.vue

@@ -0,0 +1,87 @@
+<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'
+
+const props = defineProps({
+  room: String,
+})
+
+const topicstrs = [ //TODO everything else
+  props.room + '/power/audio/status',
+]
+
+const subscriptions =
+  topicstrs.map(topic => {
+    // console.log('subbing to', topic)
+    $mqtt.subscribe(topic, (msg) => {
+      // console.log('received:', topic, msg)
+      handleIncomingMQTT(topic, msg)
+    })
+  })
+
+
+const audioStatus = ref(false)
+
+function handleIncomingMQTT(topic: string, msg: string) {
+  console.log('Received on', topic, 'with message', msg)
+  audioStatus.value = msg == '1'
+}
+
+onMounted(() => {
+  // console.log('test')
+  //$mqtt.publish('peepee', 'poopoo', 'Qr') // dela
+
+})
+
+function publishMQTTMsg(topic: string, msg: string) {
+  //msg = msg.toString()
+  console.log('Sending to [', topic, '] with message [', msg, ']')
+  $mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
+  console.log('sent')
+}
+
+async function setAudio() {
+    let topicPref = props.room + "/power/audio/set"
+    let command = '0'
+    if (!audioStatus.value) {
+        command = '1'
+    }
+    publishMQTTMsg(topicPref, command)
+    //audioStatus.value = command == '1'
+}
+
+
+
+//TODO organize better, binds, etc.
+
+
+const roomState = ref(0)
+// OFF -> 0; ON -> 1; IN BETWEEN -> 2
+
+
+</script>
+
+<template>
+  <div>
+    <!-- TODO lepš -->
+    <div>
+        <h3>Ozvočenje</h3>
+        <button style="" @click="setAudio()">
+        {{ audioStatus ? 'UGASNI' : 'PRIŽGI' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.disabled {
+  opacity: .8;
+  pointer-events: none;
+}
+button {
+  padding: 1rem;
+  width: 100%;
+}
+</style>

frontend/vju_display/src/components/LectureModule.vue

@@ -66,7 +66,7 @@ function publishMQTTMsg(topic: string, msg: string) {
 
 async function setLecture(pos?: String) {
     if (!pos) { return }
-    let topicPref = props.room + "/projektorji/" + props.position + "/"
+    let topicPref = props.room + "/projectors/" + props.position + "/"
     let command = '0'
     if (roomState.value == 0) {
         command = '1'
@@ -75,8 +75,8 @@ async function setLecture(pos?: String) {
     } else { return }
     publishMQTTMsg((topicPref + 'set/power'), command)
     publishMQTTMsg((topicPref + 'platno/goto'), command == '1' ? 'DOWN' : 'UP')
-    publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'up') ), command) 
-    await sleep(500)  
+    publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'up') ), '1') 
+    await sleep(1000)  
     publishMQTTMsg((topicPref + 'platno/goto'), 'STOP')
     publishMQTTMsg((topicPref + 'lift/move/' + (command == '1' ? 'down' : 'up') ), '0')
 }
@@ -91,6 +91,8 @@ const roomStatus = reactive({
   platno_state: 'UNKNOWN',
 })
 
+
+
 const roomState = ref(0)
 // OFF -> 0; ON -> 1; IN BETWEEN -> 2
 
@@ -115,7 +117,7 @@ watch (roomStatus, (_, _newState) => {
     <!-- TODO lepš -->
     <div>
         <h3 v-if="roomState == 1">AKTIVNO</h3>
-        <h3 v-else-if="roomState == 0">V PRIPRAVLJENOSTI</h3>
+        <h3 v-else-if="roomState == 0">PRIPRAVLJENOST</h3>
         <h3 v-else-if="roomState == 2">POČAKAJTE</h3>
         <h3 v-else="roomState == 1">NAPAKA</h3>
         <button style="" @click="setLecture(props.position)" :disabled="roomState == 2">

frontend/vju_display/src/components/MasterPowerControlModule.vue

@@ -0,0 +1,87 @@
+<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'
+
+const props = defineProps({
+  room: String,
+})
+
+const topicstrs = [ //TODO everything else
+  props.room + '/power/master/status',
+]
+
+const subscriptions =
+  topicstrs.map(topic => {
+    // console.log('subbing to', topic)
+    $mqtt.subscribe(topic, (msg) => {
+      // console.log('received:', topic, msg)
+      handleIncomingMQTT(topic, msg)
+    })
+  })
+
+
+const MasterStatus = ref(false)
+
+function handleIncomingMQTT(topic: string, msg: string) {
+  console.log('Received on', topic, 'with message', msg)
+  audioStatus.value = msg == '1'
+}
+
+onMounted(() => {
+  // console.log('test')
+  //$mqtt.publish('peepee', 'poopoo', 'Qr') // dela
+
+})
+
+function publishMQTTMsg(topic: string, msg: string) {
+  //msg = msg.toString()
+  console.log('Sending to [', topic, '] with message [', msg, ']')
+  $mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
+  console.log('sent')
+}
+
+async function setMaster() {
+    let topicPref = props.room + "/power/audio/set"
+    let command = '0'
+    if (!MasterStatus.value) {
+        command = '1'
+    }
+    publishMQTTMsg(topicPref, command)
+    //audioStatus.value = command == '1'
+}
+
+
+
+//TODO organize better, binds, etc.
+
+
+const roomState = ref(0)
+// OFF -> 0; ON -> 1; IN BETWEEN -> 2
+
+
+</script>
+
+<template>
+  <div>
+    <!-- TODO lepš -->
+    <div>
+        <h3>Sistem</h3>
+        <button style="" @click="setMaster()">
+        {{ MasterStatus ? 'UGASNI' : 'PRIŽGI' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.disabled {
+  opacity: .8;
+  pointer-events: none;
+}
+button {
+  padding: 1rem;
+  width: 100%;
+}
+</style>

frontend/vju_display/src/components/PinPopup.vue

@@ -0,0 +1,78 @@
+<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>
+  

frontend/vju_display/src/components/Platno.vue

@@ -87,15 +87,17 @@ const platnoStatus = ref(platnoState.UNKNOWN)
 </script>
 
 <template>
-    <div>
+    <div style="display:flex; gap: 1rem">
         <!-- <h3>{{ props.room }}</h3> -->
     <!-- <form> -->
       <!-- TODO lepš -->
+      <div>
       <h4>platna {{ props.position }}</h4>
       <button 
         @click="publishMQTTMsg(publishPrefix + 'goto', 'UP')"><UpIcon/></button>
       <button 
       @click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')"><DownIcon/></button>
+      </div>
       <div v-if="props.ctrlType == 'service'">
         <h5>Manual control</h5>
         <button 
@@ -113,5 +115,9 @@ const platnoStatus = ref(platnoState.UNKNOWN)
 </template>
 
 <style scoped>
-
+button {
+  padding: 1rem;
+  margin: 0.1rem;
+  width: 45%;
+}
 </style>

frontend/vju_display/src/components/ProjectorPowerModule.vue

@@ -0,0 +1,87 @@
+<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'
+
+const props = defineProps({
+  room: String,
+})
+
+const topicstrs = [ //TODO everything else
+  props.room + '/power/projectors/status',
+]
+
+const subscriptions =
+  topicstrs.map(topic => {
+    // console.log('subbing to', topic)
+    $mqtt.subscribe(topic, (msg) => {
+      // console.log('received:', topic, msg)
+      handleIncomingMQTT(topic, msg)
+    })
+  })
+
+
+const projectorsStatus = ref(false)
+
+function handleIncomingMQTT(topic: string, msg: string) {
+  console.log('Received on', topic, 'with message', msg)
+  projectorsStatus.value = msg == '1'
+}
+
+onMounted(() => {
+  // console.log('test')
+  //$mqtt.publish('peepee', 'poopoo', 'Qr') // dela
+
+})
+
+function publishMQTTMsg(topic: string, msg: string) {
+  //msg = msg.toString()
+  console.log('Sending to [', topic, '] with message [', msg, ']')
+  $mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
+  console.log('sent')
+}
+
+async function setProjectors() {
+    let topicPref = props.room + "/power/projectors/set"
+    let command = '0'
+    if (!projectorsStatus.value) {
+        command = '1'
+    }
+    publishMQTTMsg(topicPref, command)
+    //audioStatus.value = command == '1'
+}
+
+
+
+//TODO organize better, binds, etc.
+
+
+const roomState = ref(0)
+// OFF -> 0; ON -> 1; IN BETWEEN -> 2
+
+
+</script>
+
+<template>
+  <div>
+    <!-- TODO lepš -->
+    <div>
+        <h3>Projektorji</h3>
+        <button style="" @click="setProjectors()">
+          {{ projectorsStatus ? 'UGASNI' : 'PRIŽGI' }}
+        </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.disabled {
+  opacity: .8;
+  pointer-events: none;
+}
+button {
+  padding: 1rem;
+  width: 100%;
+}
+</style>

frontend/vju_display/src/components/Projektor.vue

@@ -7,7 +7,7 @@ import { $mqtt } from 'vue-paho-mqtt'
 const props = defineProps({
   room: String,
   position: String,
-  ctrlType: [String, null]
+  ctrltype: [String, null]
 })
 
 const topicstrs = [ //TODO everything else

frontend/vju_display/src/components/ResetButton.vue

@@ -0,0 +1,83 @@
+<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'
+
+const props = defineProps({
+  room: String,
+})
+
+const topicstrs = [ //TODO everything else
+  props.room + '',
+]
+
+const subscriptions =
+  topicstrs.map(topic => {
+    // console.log('subbing to', topic)
+    $mqtt.subscribe(topic, (msg) => {
+      // console.log('received:', topic, msg)
+      handleIncomingMQTT(topic, msg)
+    })
+  })
+
+
+const audioStatus = ref(false)
+
+function handleIncomingMQTT(topic: string, msg: string) {
+  console.log('Received on', topic, 'with message', msg)
+  audioStatus.value = msg == '1'
+}
+
+onMounted(() => {
+  // console.log('test')
+  //$mqtt.publish('peepee', 'poopoo', 'Qr') // dela
+
+})
+
+function publishMQTTMsg(topic: string, msg: string) {
+  //msg = msg.toString()
+  console.log('Sending to [', topic, '] with message [', msg, ']')
+  $mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
+  console.log('sent')
+}
+
+async function resetAll() {
+  let topicPref = props.room + "/power/"
+  publishMQTTMsg(topicPref + 'audio/set', '0')
+  publishMQTTMsg(topicPref + 'projectors/set', '1')
+  publishMQTTMsg(topicPref + 'master/set', '1')
+  publishMQTTMsg(props.room + "/projectors/main/lift/move/up", '1')
+  publishMQTTMsg(props.room + "/projectors/side/lift/move/up", '1')
+  //TODO NOT HARDCODE THISEFEWGJREWGREW
+  publishMQTTMsg(props.room + "/projectors/main/platno/goto", 'UP')
+  publishMQTTMsg(props.room + "/projectors/side/platno/goto", 'UP')
+    //audioStatus.value = command == '1'
+}
+
+
+
+</script>
+
+<template>
+  <div>
+    <!-- TODO lepš -->
+    <div>
+        <h3>Reset sistema</h3>
+        <button style="" @click="resetAll()">
+        RESET
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.disabled {
+  opacity: .8;
+  pointer-events: none;
+}
+button {
+  padding: 1rem;
+  width: 100%;
+}
+</style>

frontend/vju_display/src/components/pages/LightingPage.vue

@@ -75,7 +75,7 @@ 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 + '/firanki/')
+const publishPrefix = ref(props.room + '/')
 
 
 </script>
@@ -89,15 +89,26 @@ const publishPrefix = ref(props.room + '/firanki/')
             <h4>Firanki</h4>
             
             <button 
-          @mousedown="publishMQTTMsg(publishPrefix + 'move', 'MOVE_UP')" 
-          @mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
+          @mousedown="publishMQTTMsg(publishPrefix + 'firanki/move', 'MOVE_UP')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'firanki/move', 'STOP')" >
           <UpIcon /></button>
           <button 
-          @mousedown="publishMQTTMsg(publishPrefix + 'move', 'MOVE_DOWN')" 
-          @mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
+          @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>
+        <button @click="publishMQTTMsg(publishPrefix + 'lightpresets/set', 'A')"A>Plchldr A</button>
+        <button @click="publishMQTTMsg(publishPrefix + 'lightpresets/set', 'B')"A>Plchldr B</button>
+        <button @click="publishMQTTMsg(publishPrefix + 'lightpresets/set', 'C')"A>Plchldr C</button>
+        <button @click="publishMQTTMsg(publishPrefix + 'lightpresets/set', 'D')"A>Plchldr D</button>
+        <button @click="publishMQTTMsg(publishPrefix + 'lightpresets/set', 'E')"A>Plchldr E</button>
+        <button @click="publishMQTTMsg(publishPrefix + 'lightpresets/set', 'F')"A>Plchldr F</button>
+      </div>
+    </div>
 </template>
 
 <style scoped>

frontend/vju_display/src/components/pages/MainPage.vue

@@ -5,21 +5,22 @@ import Projektor from '../Projektor.vue';
 import Platno from '../Platno.vue';
 import Lift from '../Lift.vue';
 import LectureModule from '../LectureModule.vue';
+import AudioControlModule from '../AudioControlModule.vue';
 
 const props = defineProps({
     room: String
 })
 
-const _glavni_position = ref('glavni')
-const _stranski_position = ref('stranski')
+const _glavni_position = ref('main')
+const _stranski_position = ref('side')
 
-let _glavni = ref('glavni')
-let _stranski = ref('stranski')
+let _glavni = ref('main')
+let _stranski = ref('side')
 
 </script>
 
 <template>
-  <div style="display:flex; gap: 1rem">
+  <div style="display:flex; gap: 1rem; margin:inherit">
     <div style="width: 50%;">
         <h4>Glavni:</h4>
         <LectureModule :room="props.room" :position="_glavni" />
@@ -29,4 +30,13 @@ let _stranski = ref('stranski')
         <LectureModule :room="props.room" :position="_stranski" />
     </div>
   </div>
-</template>
+  <div>
+    <AudioControlModule :room="props.room" />
+  </div>
+</template>
+
+<style lang="css">
+* {
+cursor: pointer;
+}
+</style>

frontend/vju_display/src/components/pages/PinPage.vue

@@ -0,0 +1,38 @@
+
+<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>

frontend/vju_display/src/components/pages/ServisPage.vue

@@ -4,15 +4,21 @@
 import {ref, onMounted, reactive } from 'vue'
 import { $mqtt } from 'vue-paho-mqtt'
 // import Projektor from '../Projektor.vue'
-// import Platno from '../Platno.vue'
+import Platno from '../Platno.vue'
 import Lift from '../Lift.vue';
 import Projektor from '../Projektor.vue';
+import ProjectorPowerModule from "@/components/ProjectorPowerModule.vue";
+import AudioControlModule from "@/components/AudioControlModule.vue";
+import MasterPowerControlModule from "@/components/MasterPowerControlModule.vue";
+import ResetButton from "@/components/ResetButton.vue";
+
+
 
 const props = defineProps({
     room: String,
 })
-const _glavni_position = ref('glavni')
-const _stranski_position = ref('stranski')
+const _glavni_position = ref('main')
+const _stranski_position = ref('side')
 const _ctrl_type = ref('service')
 </script>
 
@@ -29,6 +35,16 @@ const _ctrl_type = ref('service')
           <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" />
+        </div>
+        <div></div>
+          <ResetButton :room="props.room"/>
+      </div>
     </div>
 </template>
 

frontend/vju_display/src/components/pages/VideoPage.vue

@@ -9,8 +9,8 @@ import Platno from '../Platno.vue'
 const props = defineProps({
     room: String,
 })
-const _glavni_position = ref('glavni')
-const _stranski_position = ref('stranski')
+const _glavni_position = ref('main')
+const _stranski_position = ref('side')
 const _test = ref('test')
 
 </script>
@@ -20,12 +20,12 @@ const _test = ref('test')
         <div>
             <h4>Glavni</h4>
             <Projektor :room="props.room" :position="_glavni_position" :ctrl-type="_test" />
-            <Platno :room="props.room" :position="_glavni_position" />
+            <Platno :room="props.room" :position="_glavni_position" :ctrl-type="_test" />
         </div>
         <div>
             <h4>Stranski</h4>
-            <Projektor :room="props.room" :position="_stranski_position" />
-            <Platno :room="props.room" :position="_stranski_position" />
+            <Projektor :room="props.room" :position="_stranski_position" :ctrltype="_test"/>
+            <Platno :room="props.room" :position="_stranski_position" :ctrl-type="_test"/>
         </div>
     </div>
 </template>