ocearo-ui/_next/static/chunks/2474c03b842c10ab.js

Ocean Robot UI: 3D visualization dashboard for signalk

(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,82897,60099,e=>{"use strict";let t,r;var n=e.i(31067),a=e.i(71645),i=e.i(15080),l=e.i(71753),o=e.i(90072);let s=a.forwardRef(({envMap:e,resolution:t=256,frames:r=1/0,makeDefault:s,children:u,...c},d)=>{let g=(0,i.useThree)(({set:e})=>e),m=(0,i.useThree)(({camera:e})=>e),h=(0,i.useThree)(({size:e})=>e),f=a.useRef(null);a.useImperativeHandle(d,()=>f.current,[]);let v=a.useRef(null),p=function(e,t,r){let n=(0,i.useThree)(e=>e.size),l=(0,i.useThree)(e=>e.viewport),s="number"==typeof e?e:n.width*l.dpr,u=n.height*l.dpr,c=("number"==typeof e?void 0:e)||{},{samples:d=0,depth:g,...m}=c,h=null!=g?g:c.depthBuffer,f=a.useMemo(()=>{let e=new o.WebGLRenderTarget(s,u,{minFilter:o.LinearFilter,magFilter:o.LinearFilter,type:o.HalfFloatType,...m});return h&&(e.depthTexture=new o.DepthTexture(s,u,o.FloatType)),e.samples=d,e},[]);return a.useLayoutEffect(()=>{f.setSize(s,u),d&&(f.samples=d)},[d,f,s,u]),a.useEffect(()=>()=>f.dispose(),[]),f}(t);a.useLayoutEffect(()=>{c.manual||(f.current.aspect=h.width/h.height)},[h,c]),a.useLayoutEffect(()=>{f.current.updateProjectionMatrix()});let x=0,y=null,M="function"==typeof u;return(0,l.useFrame)(t=>{M&&(r===1/0||x<r)&&(v.current.visible=!1,t.gl.setRenderTarget(p),y=t.scene.background,e&&(t.scene.background=e),t.gl.render(t.scene,f.current),t.scene.background=y,t.gl.setRenderTarget(null),v.current.visible=!0,x++)}),a.useLayoutEffect(()=>{if(s)return g(()=>({camera:f.current})),()=>g(()=>({camera:m}))},[f,s,g]),a.createElement(a.Fragment,null,a.createElement("perspectiveCamera",(0,n.default)({ref:f},c),!M&&u),a.createElement("group",{ref:v},M&&u(p.texture)))});e.s(["PerspectiveCamera",()=>s],82897);var u=e.i(88014);let c=new o.Vector3,d=new o.Vector3,g=new o.Vector3,m=new o.Vector2;function h(e,t,r){let n=c.setFromMatrixPosition(e.matrixWorld);n.project(t);let a=r.width/2,i=r.height/2;return[n.x*a+a,-(n.y*i)+i]}let f=e=>1e-10>Math.abs(e)?0:e;function v(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=f(t[r]*e.elements[r])+(15!==r?",":")");return r+n}let p=(t=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>v(e,t)),x=(r=e=>[1/e,1/e,1/e,1,-1/e,-1/e,-1/e,-1,1/e,1/e,1/e,1,1,1,1,1],(e,t)=>v(e,r(t),"translate(-50%,-50%)")),y=a.forwardRef(({children:e,eps:t=.001,style:r,className:s,prepend:v,center:y,fullscreen:M,portal:b,distanceFactor:P,sprite:R=!1,transform:w=!1,occlude:T,onOcclude:E,castShadow:S,receiveShadow:k,material:C,geometry:j,zIndexRange:O=[0x1000037,0],calculatePosition:$=h,as:F="div",wrapperClass:W,pointerEvents:G="auto",...I},z)=>{let{gl:A,camera:L,scene:N,size:U,raycaster:D,events:H,viewport:K}=(0,i.useThree)(),[V]=a.useState(()=>document.createElement(F)),B=a.useRef(null),Y=a.useRef(null),Z=a.useRef(0),X=a.useRef([0,0]),_=a.useRef(null),q=a.useRef(null),J=(null==b?void 0:b.current)||H.connected||A.domElement.parentNode,Q=a.useRef(null),ee=a.useRef(!1),et=a.useMemo(()=>{var e;return T&&"blending"!==T||Array.isArray(T)&&T.length&&(e=T[0])&&"object"==typeof e&&"current"in e},[T]);a.useLayoutEffect(()=>{let e=A.domElement;T&&"blending"===T?(e.style.zIndex=`${Math.floor(O[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)},[T]),a.useLayoutEffect(()=>{if(Y.current){let e=B.current=u.createRoot(V);if(N.updateMatrixWorld(),w)V.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{let e=$(Y.current,L,U);V.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return J&&(v?J.prepend(V):J.appendChild(V)),()=>{J&&J.removeChild(V),e.unmount()}}},[J,w]),a.useLayoutEffect(()=>{W&&(V.className=W)},[W]);let er=a.useMemo(()=>w?{position:"absolute",top:0,left:0,width:U.width,height:U.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:y?"translate3d(-50%,-50%,0)":"none",...M&&{top:-U.height/2,left:-U.width/2,width:U.width,height:U.height},...r},[r,y,M,U,w]),en=a.useMemo(()=>({position:"absolute",pointerEvents:G}),[G]);a.useLayoutEffect(()=>{var t,n;ee.current=!1,w?null==(t=B.current)||t.render(a.createElement("div",{ref:_,style:er},a.createElement("div",{ref:q,style:en},a.createElement("div",{ref:z,className:s,style:r,children:e})))):null==(n=B.current)||n.render(a.createElement("div",{ref:z,style:er,className:s,children:e}))});let ea=a.useRef(!0);(0,l.useFrame)(e=>{if(Y.current){L.updateMatrixWorld(),Y.current.updateWorldMatrix(!0,!1);let e=w?X.current:$(Y.current,L,U);if(w||Math.abs(Z.current-L.zoom)>t||Math.abs(X.current[0]-e[0])>t||Math.abs(X.current[1]-e[1])>t){var r;let t,n,a,i,l=(r=Y.current,t=c.setFromMatrixPosition(r.matrixWorld),n=d.setFromMatrixPosition(L.matrixWorld),a=t.sub(n),i=L.getWorldDirection(g),a.angleTo(i)>Math.PI/2),s=!1;et&&(Array.isArray(T)?s=T.map(e=>e.current):"blending"!==T&&(s=[N]));let u=ea.current;s?ea.current=function(e,t,r,n){let a=c.setFromMatrixPosition(e.matrixWorld),i=a.clone();i.project(t),m.set(i.x,i.y),r.setFromCamera(m,t);let l=r.intersectObjects(n,!0);if(l.length){let e=l[0].distance;return a.distanceTo(r.ray.origin)<e}return!0}(Y.current,L,D,s)&&!l:ea.current=!l,u!==ea.current&&(E?E(!ea.current):V.style.display=ea.current?"block":"none");let h=Math.floor(O[0]/2),v=T?et?[O[0],h]:[h-1,0]:O;if(V.style.zIndex=`${function(e,t,r){if(t instanceof o.PerspectiveCamera||t instanceof o.OrthographicCamera){let n=c.setFromMatrixPosition(e.matrixWorld),a=d.setFromMatrixPosition(t.matrixWorld),i=n.distanceTo(a),l=(r[1]-r[0])/(t.far-t.near),o=r[1]-l*t.far;return Math.round(l*i+o)}}(Y.current,L,v)}`,w){let[e,t]=[U.width/2,U.height/2],r=L.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:a,left:i,bottom:l,right:o}=L,s=p(L.matrixWorldInverse),u=n?`scale(${r})translate(${f(-(o+i)/2)}px,${f((a+l)/2)}px)`:`translateZ(${r}px)`,c=Y.current.matrixWorld;R&&((c=L.matrixWorldInverse.clone().transpose().copyPosition(c).scale(Y.current.scale)).elements[3]=c.elements[7]=c.elements[11]=0,c.elements[15]=1),V.style.width=U.width+"px",V.style.height=U.height+"px",V.style.perspective=n?"":`${r}px`,_.current&&q.current&&(_.current.style.transform=`${u}${s}translate(${e}px,${t}px)`,q.current.style.transform=x(c,1/((P||10)/400)))}else{let t=void 0===P?1:function(e,t){if(t instanceof o.OrthographicCamera)return t.zoom;if(!(t instanceof o.PerspectiveCamera))return 1;{let r=c.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld);return 1/(2*Math.tan(t.fov*Math.PI/180/2)*r.distanceTo(n))}}(Y.current,L)*P;V.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}X.current=e,Z.current=L.zoom}}if(!et&&Q.current&&!ee.current)if(w){if(_.current){let e=_.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){let{isOrthographicCamera:t}=L;if(t||j)I.scale&&(Array.isArray(I.scale)?I.scale instanceof o.Vector3?Q.current.scale.copy(I.scale.clone().divideScalar(1)):Q.current.scale.set(1/I.scale[0],1/I.scale[1],1/I.scale[2]):Q.current.scale.setScalar(1/I.scale));else{let t=(P||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;Q.current.scale.set(r,n,1)}ee.current=!0}}}else{let t=V.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){let e=1/K.factor,r=t.clientWidth*e,n=t.clientHeight*e;Q.current.scale.set(r,n,1),ee.current=!0}Q.current.lookAt(e.camera.position)}});let ei=a.useMemo(()=>({vertexShader:w?void 0:`
          /*
            This shader is from the THREE's SpriteMaterial.
            We need to turn the backing plane into a Sprite
            (make it always face the camera) if "transfrom"
            is false.
          */
          #include <common>

          void main() {
            vec2 center = vec2(0., 1.);
            float rotation = 0.0;

            // This is somewhat arbitrary, but it seems to work well
            // Need to figure out how to derive this dynamically if it even matters
            float size = 0.03;

            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
            vec2 scale;
            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );

            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
            if ( isPerspective ) scale *= - mvPosition.z;

            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
            vec2 rotatedPosition;
            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
            mvPosition.xy += rotatedPosition;

            gl_Position = projectionMatrix * mvPosition;
          }
      `,fragmentShader:`
        void main() {
          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
        }
      `}),[w]);return a.createElement("group",(0,n.default)({},I,{ref:Y}),T&&!et&&a.createElement("mesh",{castShadow:S,receiveShadow:k,ref:Q},j||a.createElement("planeGeometry",null),C||a.createElement("shaderMaterial",{side:o.DoubleSide,vertexShader:ei.vertexShader,fragmentShader:ei.fragmentShader})))});e.s(["Html",()=>y],60099)},62588,e=>{"use strict";var t=e.i(43476),r=e.i(71645);e.i(49018);var n=e.i(83402),a=e.i(66799),i=e.i(67561),l=e.i(85709);let o=(0,r.createContext)(),s=(e,t,r,n)=>{let a=r.split(".").reduce((e,t)=>e?.[t],n);void 0!==a&&(e[t]=a)};e.s(["AISProvider",0,({children:e})=>{let[u,c]=(0,r.useState)({}),[d,g]=(0,r.useState)([]),m=(0,r.useRef)(null),h=(0,r.useRef)({}),f=(0,r.useRef)(null),{convertLatLonToXY:v}=(0,i.useOcearoContext)(),p=(0,l.useSignalKPath)("navigation.position"),x=(0,r.useRef)(),y=(0,r.useRef)(),M=(0,r.useCallback)(e=>{if(e.latitude&&e.longitude&&p&&p.latitude&&p.longitude&&e.latitude!=p.latitude&&e.longitude!=p.longitude){let t=n.default.get("aisLengthScalingFactor")||.7,{x:r,y:a}=v({lat:e.latitude,lon:e.longitude},{lat:p.latitude,lon:p.longitude});e.sceneX=r*t,e.sceneZ=-a*t,e.rotationAngleY=(e=>{if(!e)return 0;let t=e.heading||e.headingMagnetic;return e.cog||e.cogMagnetic||t||0})(e),e.distanceMeters=Math.sqrt(r**2+a**2);let i=e.visible;return e.visible=e.distanceMeters>10&&e.distanceMeters<=5e3,i!==e.visible}return!1},[p,v]),b=(0,r.useCallback)(()=>{f.current&&(clearTimeout(f.current),f.current=null);let e=Object.values(u).filter(e=>e.visible);((e,t)=>{if(e.length!==t.length)return!0;let r=new Set(e.map(e=>e.mmsi)),n=new Set(t.map(e=>e.mmsi));if(r.size!==n.size)return!0;for(let e of r)if(!n.has(e))return!0;return!1})(d,e)&&(console.log(`Updating visible vessels: ${e.length} vessels`),g(e))},[u,d]),P=(0,r.useCallback)(()=>{f.current&&clearTimeout(f.current),f.current=setTimeout(()=>{b(),f.current=null},100)},[b]);return(0,r.useEffect)(()=>{x.current=M,y.current=P},[M,P]),(0,r.useEffect)(()=>{let e=setInterval(()=>{let e=Date.now();c(t=>{let r=!1,n={...t};return(Object.entries(n).forEach(([t,a])=>{e-a.lastUpdate>6e5&&(delete n[t],r=!0)}),r)?(P(),n):t})},6e4);return()=>clearInterval(e)},[P]),(0,r.useEffect)(()=>{let e=async e=>{console.log("Fetching static vessel info...");try{let t=await e.API().then(e=>e.vessels()),r=Object.entries(t).map(([e,t])=>{let r={mmsi:e};return s(r,"name","name",t),s(r,"latitude","navigation.position.value.latitude",t),s(r,"longitude","navigation.position.value.longitude",t),s(r,"sog","navigation.speedOverGround.value",t),s(r,"cog","navigation.courseOverGroundTrue.value",t),s(r,"cogMagnetic","navigation.courseOverGroundMagnetic.value",t),s(r,"heading","navigation.headingTrue.value",t),s(r,"headingMagnetic","navigation.headingMagnetic.value",t),s(r,"length","design.length.value.overall",t),s(r,"beam","design.beam.value",t),s(r,"callsign","communication.callsignVhf",t),s(r,"shipType","design.aisShipType.value.id",t),r.lastUpdate=Date.now(),r.distanceMeters=null,r.sceneX=null,r.sceneZ=null,r.rotationAngleY=null,r.visible=!1,r}),n={};if(r.forEach(e=>{e.mmsi&&"self"!=e.mmsi&&(null!==e.latitude||null!==e.longitude)&&(x.current(e),n[e.mmsi]=e)}),console.log(`Fetched ${r.length} vessels.`),Object.keys(n).length>0){console.log(`Initializing AIS data with ${Object.keys(n).length} vessels`),c(n);let e=Object.values(n).filter(e=>e.visible);g(e),console.log(`${e.length} vessels initially visible`)}}catch(e){console.error("Error fetching static info:",e)}},t=e=>{if(!e?.updates)return void console.warn("Missing delta or no updates:",e);let t=e.context.replace("vessels.","");t?(h.current[t]=Date.now(),c(r=>{let n=r[t]||{mmsi:t,name:"unknown",latitude:null,longitude:null,sog:null,cog:null,cogMagnetic:null,heading:null,headingMagnetic:null,distanceMeters:null,sceneX:null,sceneZ:null,rotationAngleY:null,visible:!1,length:null,beam:null,shipType:null};n.lastUpdate=h.current[t];let a=!1,i=!1;return e.updates.forEach(e=>{e.values&&e.values.forEach(e=>{switch(e.path){case"name":n.name=e.value;break;case"navigation.position":n.latitude=e.value.latitude,n.longitude=e.value.longitude,a=!0;break;case"navigation.speedOverGround":n.sog=e.value;break;case"navigation.courseOverGroundTrue":n.cog=e.value,i=!0;break;case"navigation.courseOverGroundMagnetic":n.cogMagnetic=e.value,i=!0;break;case"navigation.headingTrue":n.heading=e.value,i=!0;break;case"navigation.headingMagnetic":n.headingMagnetic=e.value,i=!0}})}),(x.current(n)||a||i)&&y.current(),{...r,[t]:n}})):console.warn("Update without MMSI context:",e)};return(async()=>{try{let{signalkUrl:r}=n.default.getAll();if(console.log("SignalK URL:",r),!r)throw Error("SignalK URL is undefined or invalid.");console.log(`Connecting to SignalK at: ${r}`);let i=a.default.createClient({subscriptions:[{context:"vessels.*",subscribe:[{path:"navigation.position"},{path:"navigation.speedOverGround"},{path:"navigation.courseOverGroundTrue"},{path:"navigation.courseOverGroundMagnetic"},{path:"navigation.headingTrue"},{path:"navigation.headingMagnetic"}]}]});m.current=i,await i.connect(),console.log("SignalK client connected."),await e(i),i.on("delta",t)}catch(e){console.warn("Error connecting to SignalK:",e)}})(),()=>{console.log("Disconnecting SignalK client..."),f.current&&clearTimeout(f.current),m.current?.disconnect()}},[]),(0,t.jsx)(o.Provider,{value:{aisData:u,vesselIds:d},children:e})},"useAIS",0,()=>(0,r.useContext)(o)])},32615,13035,e=>{"use strict";var t=e.i(43476),r=e.i(71645),n=e.i(31067),a=e.i(90072);function i(e,t){let a=e+"Geometry";return r.forwardRef(({args:e,children:i,...l},o)=>{let s=r.useRef(null);return r.useImperativeHandle(o,()=>s.current),r.useLayoutEffect(()=>void(null==t||t(s.current))),r.createElement("mesh",(0,n.default)({ref:s},l),r.createElement(a,{attach:"geometry",args:e}),i)})}let l=i("sphere"),o=i("ring");e.s(["Ring",()=>o,"Sphere",()=>l],13035);var s=e.i(16196),u=e.i(67561),c=e.i(85709),d=e.i(83402);let g=r.default.memo(({radius:e,isOuter:n,markerColorPrimary:i,markerColorGreen:o,markerColorRed:u})=>{let c=(0,r.useMemo)(()=>{let r=[];for(let c=0;c<360;c+=10){let d=a.MathUtils.degToRad(c-90),g=c%30==0,m=n?g?.35:.15:g?.25:.1,h=(e+.5*m+.2)*Math.cos(d),f=(e+.5*m+.2)*Math.sin(d),v=n&&c>0&&c<61,p=n&&c>=300&&c<360,x=v?o:p?u:i;if(!n&&g){let e;e=0===c?"N":90===c?"E":180===c?"S":270===c?"W":c.toString(),r.push((0,t.jsx)(s.Text,{characters:"NESW0123456789",position:[h,.02,f],color:i,fontSize:.6,rotation:[-Math.PI/2,0,Math.PI/2-d],font:"fonts/Roboto-Bold.ttf",anchorY:"middle",fillOpacity:.9,children:e},`text-${c}`))}else r.push((0,t.jsx)(l,{args:[m/2,16,16],position:[h,0,f],children:(0,t.jsx)("meshBasicMaterial",{color:x,transparent:!0,opacity:g?.8:.4})},`marker-${n?"outer":"inner"}-${c}`))}return r},[e,n,i,o,u]);return(0,t.jsx)(t.Fragment,{children:c})});g.displayName="StaticMarkers";let m=r.default.memo(({innerRadius:e,outerRadius:r,dialColor:n,opacity:i=1,transparent:l=!1})=>(0,t.jsx)(o,{args:[e,r,64],rotation:[Math.PI/2,0,0],children:(0,t.jsx)("meshBasicMaterial",{color:n,side:a.DoubleSide,transparent:l,opacity:i,depthWrite:!1})}));m.displayName="StaticRing";let h=({outerRadius:e,innerRadius:n})=>{let{nightMode:a}=(0,u.useOcearoContext)(),i=a?u.oNight:"#ffffff",l=u.oGreen,o=u.oRed,s=(0,r.useMemo)(()=>["navigation.headingTrue","navigation.headingMagnetic","navigation.courseOverGroundTrue","navigation.courseOverGroundMagnetic"],[]),h=(0,c.useSignalKPaths)(s),f=(0,r.useMemo)(()=>{let e=d.default.get("preferredHeadingPath")||"courseOverGroundTrue",t=h[`navigation.${e}`];if(null!=t)return t;let r=h["navigation.headingTrue"]||h["navigation.headingMagnetic"];return h["navigation.courseOverGroundTrue"]||h["navigation.courseOverGroundMagnetic"]||r||0},[h]),v=a?"#000000":"#0a0a0a",p=d.default.get("compassNorthUp"),x=(0,r.useMemo)(()=>({innerRadius:n,outerRadius:e,dialColor:v,markerColorPrimary:i,markerColorGreen:l,markerColorRed:o}),[n,e,v,i,l,o]);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("group",{rotation:[0,f+(p?0:Math.PI),0],children:[(0,t.jsx)(m,{innerRadius:x.innerRadius,outerRadius:x.outerRadius,dialColor:x.dialColor,transparent:!0,opacity:.1}),(0,t.jsx)(g,{radius:x.innerRadius,isOuter:!1,markerColorPrimary:x.markerColorPrimary,markerColorGreen:x.markerColorGreen,markerColorRed:x.markerColorRed})]}),(0,t.jsxs)("group",{children:[(0,t.jsx)(m,{innerRadius:x.innerRadius+.8,outerRadius:x.outerRadius+.8,dialColor:x.dialColor,transparent:!0,opacity:.15}),(0,t.jsx)(g,{radius:x.innerRadius+.8,isOuter:!0,markerColorPrimary:x.markerColorPrimary,markerColorGreen:x.markerColorGreen,markerColorRed:x.markerColorRed})]})]})};h.displayName="CompassDial";var f=e.i(84226);e.s(["default",0,({visible:e=!0,position:r,scale:n})=>!e||d.default.get("hide3DCompass")?null:(0,t.jsxs)("group",{position:r,scale:n,children:[(0,t.jsx)(h,{outerRadius:5.6,innerRadius:5}),(0,t.jsx)(f.default,{outerRadius:5.6+1.1})]})],32615)},49626,e=>{e.v(t=>Promise.all(["static/chunks/ff5e78db2e2b69dd.js"].map(t=>e.l(t))).then(()=>t(50454)))},16033,e=>{e.v(t=>Promise.all(["static/chunks/b9d9a7e1cf2f6019.js"].map(t=>e.l(t))).then(()=>t(45432)))},63912,e=>{e.v(t=>Promise.all(["static/chunks/2296899bc46a0855.js"].map(t=>e.l(t))).then(()=>t(30909)))},36914,e=>{e.v(t=>Promise.all(["static/chunks/3abe6b32c7676e49.js"].map(t=>e.l(t))).then(()=>t(97391)))},95548,e=>{e.v(t=>Promise.all(["static/chunks/55be29098903fc19.js"].map(t=>e.l(t))).then(()=>t(87050)))}]);