mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-26 01:51:40 +00:00
31013346c0
* Rename MJPEG streams when camera name changes * Change camera name to HTTP request This allows us to wait for it to for sure be done * Fix reload logic * whee lnt * Reload on backend connect too * Update CameraAndPipelineSelect.vue
62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
|
<img
|
|
:id="id"
|
|
crossOrigin="anonymous"
|
|
:style="styleObject"
|
|
:src="src"
|
|
alt=""
|
|
@click="e => $emit('click', e)"
|
|
>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CvImage",
|
|
// eslint-disable-next-line vue/require-prop-types
|
|
props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
|
|
data() {
|
|
return {
|
|
seed: 1.0,
|
|
}
|
|
},
|
|
computed: {
|
|
styleObject: {
|
|
get() {
|
|
let ret = {
|
|
"border-radius": "3px",
|
|
"display": "block",
|
|
"object-fit": "contain",
|
|
"object-position": "50% 50%",
|
|
"max-width": "100%",
|
|
"margin-left": "auto",
|
|
"margin-right": "auto",
|
|
"max-height": this.maxHeight,
|
|
height: `${this.scale}%`,
|
|
cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "") + "default",
|
|
};
|
|
|
|
if (this.$vuetify.breakpoint.xl) {
|
|
ret["max-height"] = this.maxHeightXl;
|
|
} else if (this.$vuetify.breakpoint.mdAndUp) {
|
|
ret["max-height"] = this.maxHeightMd;
|
|
}
|
|
|
|
return ret;
|
|
}
|
|
},
|
|
src: {
|
|
get() {
|
|
return this.disconnected ? require("../../assets/noStream.jpg") : this.address + "?" + this.seed // This prevents caching
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
this.reload(); // Force reload image on creation
|
|
},
|
|
methods: {
|
|
reload() {
|
|
this.seed = new Date().getTime();
|
|
}
|
|
},
|
|
}
|
|
</script> |