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

On click change image

Browse Source
This commit is contained in:
Jaro
2021-11-03 16:41:46 +01:00
parent ad3b758fd0
commit 235cbebe9c
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Hero.vue
View File

@@ -6,7 +6,7 @@
<img <img
class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded" class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
alt="Main camera" alt="Main camera"
src="@/assets/mvsr-logo.png" :src="mjpegSrc[clickMJ % 2]" @click="clickMJ++"
/> />
</div> </div>
<div <div
@@ -14,12 +14,12 @@
> >
<Heading1>Preview</Heading1> <Heading1>Preview</Heading1>
<p class="mb-8 leading-relaxed dark:text-gray-300"> <p class="mb-8 leading-relaxed dark:text-gray-300">
Zobrazuje snimku kazdych x sekund z {{ previewUrl }} Zobrazuje snimku pri kliknuti
</p> </p>
<img <img
class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded" class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
alt="Main camera" alt="Main camera"
src="@/assets/mvsr-logo.png" :src="previewSrc[clickPW % 2]" @click="clickPW++"
/> />
<p class="mb-8"> <p class="mb-8">
Ovládanie dverí Ovládanie dverí
@@ -43,6 +43,7 @@
import { computed, defineComponent } from "vue-demi"; import { computed, defineComponent } from "vue-demi";
import { routes } from "@/router"; import { routes } from "@/router";
import { useDark, useToggle } from "@vueuse/core"; import { useDark, useToggle } from "@vueuse/core";
import logoUrl from '@/assets/mvsr-logo.png';
export default defineComponent({ export default defineComponent({
setup: (_, ctx) => { setup: (_, ctx) => {
@@ -50,9 +51,12 @@ export default defineComponent({
const appName = import.meta.env.VITE_APP_NAME; const appName = import.meta.env.VITE_APP_NAME;
const urlMjpeg = import.meta.env.VITE_APP_ESP32_MJPEG; const urlMjpeg = import.meta.env.VITE_APP_ESP32_MJPEG;
const previewUrl = import.meta.env.VITE_APP_ESP32_PREVIEW; const previewUrl = import.meta.env.VITE_APP_ESP32_PREVIEW;
var clickMJ = 0;
var clickPW = 0;
var previewSrc = [ logoUrl, previewUrl];
var mjpegSrc = [ urlMjpeg, logoUrl];
return { appName, previewSrc, mjpegSrc, clickMJ, clickPW };
return { appName, urlMjpeg, previewUrl };
}, },
}); });
</script> </script>