jaro/vue-camera
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Manage door

Browse Source
This commit is contained in:
Jaro
2021-11-05 06:03:12 +01:00
parent 3bb0b4d4d4
commit a41d8a81fa
1 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Hero.vue
View File

@@ -6,7 +6,7 @@
<img
class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
alt="Main camera"
:src="mjpegSrc[clickMJ % 2]" @click="clickMJ++"
:src="mjpegSrc[clickMJ % 2]" @click="clickMain()"
/>
</div>
<div
@@ -19,20 +19,21 @@
<img
class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
alt="Main camera"
:src="previewSrc[clickPW % 2]" @click="clickPW++"
:src="previewSrc[clickPW % 2]" @click="clickPreview()"
/>
<p class="mb-8">
Ovládanie dverí
</p>
<div class="flex justify-center">
<a href="https://vuejs.org/v2/guide/" target="_blank">
<ButtonPrimary> Otvor </ButtonPrimary>
</a>
<RouterLink :to="{ name: 'About' }">
<ButtonSecondary> Zatvor </ButtonSecondary>
</RouterLink>
<ButtonTerciary> Podrž </ButtonTerciary>
<button @click="openDoor()" class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100">
Otvor
</button>
<button @click="closeDoor()" class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100">
Zatvor
</button>
<button @click="pulseDoor()" class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100">
Podrž
</button>
</div>
</div>
@@ -58,5 +59,31 @@ export default defineComponent({
return { appName, previewSrc, mjpegSrc, clickMJ, clickPW };
},
methods: {
clickPreview() {
console.log('Click preview',this.clickPW);
//stop
this.clickMJ = 1;
this.$nextTick(() => {
// The whole view is rendered, so I can safely access or query
// the DOM. ¯\_(ツ)_/¯
this.clickPW++;
})
},
clickMain() {
console.log('Click main',this.clickMJ);
this.clickMJ++;
},
openDoor() {
console.log('Open Door');
},
closeDoor() {
console.log('Close Door');
},
pulseDoor() {
console.log('Send pulse to Door');
}
}
});
</script>