11import { Box } from "@mui/material" ;
2- import { PvComponent , PvItem , PvDescription , useParsedPvConnection } from "../pv/PvComponent" ;
2+ import {
3+ PvComponent ,
4+ PvItem ,
5+ PvDescription ,
6+ useParsedPvConnection ,
7+ } from "../pv/PvComponent" ;
38import { parseNumericPv , pvIntArrayToString } from "../pv/util" ;
49import React from "react" ;
510
6- export const useContainerDimensions = ( ref : React . MutableRefObject < HTMLHeadingElement | null > ) => {
11+ export const useContainerDimensions = (
12+ ref : React . MutableRefObject < HTMLHeadingElement | null > ,
13+ ) => {
714 const [ dimensions , setDimensions ] = React . useState ( { width : 0 , height : 0 } ) ;
815 React . useEffect ( ( ) => {
916 const getDimensions = ( ) => ( {
@@ -34,7 +41,7 @@ export function OavVideoStream(
3441 crosshairX : number ;
3542 crosshairY : number ;
3643 onCoordClick : ( x : number , y : number ) => void ; // handler for clicking on the OAV: x and y are the pixels on the original OAV stream
37- }
44+ } ,
3845) {
3946 const [ crosshairX , crosshairY ] = [ props . crosshairX , props . crosshairY ] ;
4047 const onCoordClick = props . onCoordClick ;
@@ -45,14 +52,14 @@ export function OavVideoStream(
4552 pv : props . pv + "MJPG:ArraySize1_RBV" ,
4653 label : "OAV MJPG stream x size" ,
4754 transformValue : parseNumericPv ,
48- } )
55+ } ) ,
4956 ) ;
5057 const yDim = Number (
5158 useParsedPvConnection ( {
5259 pv : props . pv + "MJPG:ArraySize2_RBV" ,
5360 label : "OAV MJPG stream x size" ,
5461 transformValue : parseNumericPv ,
55- } )
62+ } ) ,
5663 ) ;
5764 console . log ( `original stream size ${ [ xDim , yDim ] } ` ) ;
5865 const [ streamUrl , setStreamUrl ] = React . useState < string > ( "not connected" ) ;
@@ -62,7 +69,10 @@ export function OavVideoStream(
6269 label : props . label ,
6370 render : ( props : PvItem ) => {
6471 const value = props . value ? props . value : "undefined" ;
65- if ( ! streamUrl . startsWith ( "http" ) && value . toString ( ) . startsWith ( "http" ) ) {
72+ if (
73+ ! streamUrl . startsWith ( "http" ) &&
74+ value . toString ( ) . startsWith ( "http" )
75+ ) {
6676 setStreamUrl ( value . toString ( ) ) ;
6777 }
6878 return (
@@ -85,15 +95,15 @@ export function OavVideoStream(
8595function drawCanvas (
8696 canvasRef : React . MutableRefObject < HTMLCanvasElement | null > ,
8797 crosshairX : number ,
88- crosshairY : number
98+ crosshairY : number ,
8999) {
90100 const context = canvasRef . current ?. getContext ( "2d" ) ;
91101 if ( context ) {
92102 context . clearRect (
93103 0 ,
94104 0 ,
95105 canvasRef . current ?. width as number ,
96- canvasRef . current ?. height as number
106+ canvasRef . current ?. height as number ,
97107 ) ;
98108 context . strokeStyle = "red" ;
99109 context . font = "50px sans-serif" ;
@@ -148,8 +158,12 @@ function VideoBoxWithOverlay(props: {
148158 // x and y relative to the crosshair
149159 const [ relX , relY ] = [ x - props . crosshairX , y - props . crosshairY ] ;
150160 // fraction of the image in x/y * original dimension in pixels
151- const scaledX = props . originalDims ? ( relX / width ) * props . originalDims . width : x ;
152- const scaledY = props . originalDims ? ( relY / height ) * props . originalDims . height : y ;
161+ const scaledX = props . originalDims
162+ ? ( relX / width ) * props . originalDims . width
163+ : x ;
164+ const scaledY = props . originalDims
165+ ? ( relY / height ) * props . originalDims . height
166+ : y ;
153167 props . onCoordClick ( scaledX , scaledY ) ;
154168 }
155169 }
0 commit comments