ocearo-ui
Version:
Ocean Robot UI: 3D visualization dashboard for signalk
1 lines • 6 kB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,35637,t=>{"use strict";t.s(["drawAttitudeInstrument",0,(t,e)=>{let{w:a,h:l,roll:i,pitch:o,yaw:s,nightMode:n=!1,showHeading:r=!0,showPitchScale:h=!0,showRollScale:c=!0,showBezel:d=!0,compact:x=!1,colors:f={}}=e,g=a/2,u=l/2,m=Math.min(a,l)/(x?80:200),b=t=>t*m,M=t=>Math.max(.5,t*m),p={sky:n?"#1a0000":f.sky||"#87CEEB",sea:n?"#000000":f.sea||f.oGray2||"#424242",horizon:n?f.oNight||"#ef4444":f.oYellow||"#ffbe00",bezel:n?"#330000":f.bezel||f.oGray2||"#424242",text:n?f.oNight||"#ef4444":f.text||"var(--hud-text-main)",boat:n?f.oNight||"#ef4444":f.boat||f.oYellow||"#ffbe00",rollScale:n?f.oNight||"#ef4444":f.rollScale||f.oRed||"#cc000c",headingMarks:n?f.oNight||"#ef4444":f.headingMarks||"var(--hud-text-main)",pitchMarks:n?"rgba(239, 68, 68, 0.6)":f.pitchMarks||"var(--hud-text-secondary)",...f};t.clearRect(0,0,a,l);let k=Math.min(g,u)-b(x?5:20);if(t.save(),t.beginPath(),t.arc(g,u,k,0,2*Math.PI),t.clip(),t.translate(g,u),t.rotate(i*Math.PI/180),t.translate(0,o/90*k*(x?1:1.5)),t.fillStyle=p.sky,t.fillRect(-a,-(2*l),2*a,2*l),t.fillStyle=p.sea,t.fillRect(-a,0,2*a,2*l),t.beginPath(),t.moveTo(-a,0),t.lineTo(a,0),t.strokeStyle=p.horizon,t.lineWidth=M(x?1.5:3),t.stroke(),h){t.strokeStyle=p.pitchMarks,t.fillStyle=p.pitchMarks,t.font=`${Math.round(b(x?8:12))}px sans-serif`,t.textAlign="center",t.textBaseline="middle";let e=x?60:30,a=x?20:10;for(let l=-e;l<=e;l+=a){if(0===l)continue;let e=-(l/90)*k*(x?1:1.5),a=b(Math.abs(l)%20!=0||x?x?15:30:50);t.beginPath(),t.moveTo(-a/2,e),t.lineTo(a/2,e),t.lineWidth=M(Math.abs(l)%20==0?2:1),t.stroke(),x&&Math.abs(l)%40!=0||(t.fillText(Math.abs(l)+"°",a/2+b(10),e),t.fillText(Math.abs(l)+"°",-a/2-b(10),e))}}if(t.restore(),d&&(t.beginPath(),t.arc(g,u,Math.min(g,u)-b(x?2:8),0,2*Math.PI),t.strokeStyle=p.bezel,t.lineWidth=M(x?2:12),t.stroke(),x||(t.beginPath(),t.arc(g,u,k,0,2*Math.PI),t.strokeStyle=p.bezel,t.lineWidth=M(2),t.stroke())),r){t.save(),t.translate(g,u),t.font=`bold ${Math.round(b(x?7:10))}px sans-serif`,t.textAlign="center";let e=x?15:10;for(let a=0;a<360;a+=e){let e=(a-s-90)*Math.PI/180,l=k+b(2*!!x),i=a%(x?90:30)==0,o=b(i?x?5:20:x?2:10),r=l*Math.cos(e),h=l*Math.sin(e),c=(l-o)*Math.cos(e),d=(l-o)*Math.sin(e);if(t.beginPath(),t.moveTo(r,h),t.lineTo(c,d),t.strokeStyle=i?p.headingMarks:n?"rgba(239, 68, 68, 0.4)":p.pitchMarks,t.lineWidth=M(i?1.5:x?.5:2),t.stroke(),i&&!x){let i=["N","E","S","W"];if(a%90==0){let o=(l-b(35))*Math.cos(e),s=(l-b(35))*Math.sin(e)+b(4);t.fillStyle=p.text,t.fillText(i[a/90],o,s)}}}t.restore()}if(t.save(),t.translate(g,u),x?(t.rotate(s*Math.PI/180),t.beginPath(),t.moveTo(0,-b(10)),t.lineTo(b(5),b(5)),t.lineTo(-b(5),b(5)),t.closePath(),t.fillStyle=p.boat,t.fill(),t.strokeStyle=n?p.boat:f.oGray||"#989898",t.lineWidth=M(1),t.stroke()):(t.beginPath(),t.moveTo(0,-b(25)),t.lineTo(b(12),b(12)),t.lineTo(0,b(8)),t.lineTo(-b(12),b(12)),t.closePath(),t.fillStyle=p.horizon,t.fill(),t.strokeStyle=p.text,t.lineWidth=M(2),t.stroke(),t.beginPath(),t.arc(0,0,b(3),0,2*Math.PI),t.fillStyle=p.text,t.fill()),t.restore(),c&&!x){t.save(),t.translate(g,u),t.rotate(i*Math.PI/180);for(let e=-60;e<=60;e+=30){if(0===e)continue;let a=e*Math.PI/180,l=Math.min(g,u)-b(30),i=l*Math.sin(a),o=-l*Math.cos(a),s=(l-b(15))*Math.sin(a),n=-(l-b(15))*Math.cos(a);t.beginPath(),t.moveTo(i,o),t.lineTo(s,n),t.strokeStyle=p.rollScale,t.lineWidth=M(3),t.stroke()}t.restore()}}])},90741,t=>{"use strict";var e=t.i(43476),a=t.i(71645),l=t.i(67561),i=t.i(46991),o=t.i(85709),s=t.i(35637);t.i(85269);var n=t.i(22831);function r(){let{t}=(0,n.useTranslation)(),{nightMode:r}=(0,l.useOcearoContext)(),h=(0,a.useRef)(null),[c,d]=(0,a.useState)("canvas"),x=(0,o.useSignalKPath)("navigation.attitude"),f=(0,a.useMemo)(()=>({roll:(0,i.toDegrees)(x?.roll)||0,pitch:(0,i.toDegrees)(x?.pitch)||0,yaw:(0,i.toDegrees)(x?.yaw)||0}),[x]);return(0,a.useEffect)(()=>{if("canvas"!==c||!h.current)return;let t=h.current.getContext("2d");if(!t)return;let{roll:e,pitch:a,yaw:i}=f;(0,s.drawAttitudeInstrument)(t,{w:80,h:80,roll:e,pitch:a,yaw:i,nightMode:r,compact:!0,colors:{sky:"transparent",sea:l.oGray2,horizon:l.oBlue,boat:l.oBlue,pitchMarks:l.oGray,oBlue:l.oBlue,oRed:l.oRed,oYellow:l.oYellow,oNight:l.oNight}})},[f,c,r]),(0,e.jsx)("div",{className:"mt-6 cursor-pointer select-none group",style:{width:"80px",minHeight:"80px",boxSizing:"content-box"},onClick:()=>{d(t=>"canvas"===t?"text":"canvas")},title:t("indicators.clickToToggle"),children:"canvas"===c?(0,e.jsx)("div",{className:"relative p-1 rounded-xl transition-all duration-300",children:(0,e.jsx)("canvas",{ref:h,width:80,height:80,className:`w-full h-full ${r?"brightness-75 contrast-125":"drop-shadow-lg"}`})}):(0,e.jsxs)("div",{className:`p-3 rounded-xl transition-all duration-300 flex flex-col items-end space-y-2 ${r?"text-oNight":"text-hud-main"}`,children:[(0,e.jsxs)("div",{className:"flex flex-col items-end",children:[(0,e.jsx)("span",{className:`text-xs font-black uppercase tracking-widest leading-none mb-1 ${r?"text-oNight/40":"text-hud-dim"}`,children:t("indicators.roll")}),(0,e.jsxs)("span",{className:`text-xs font-mono font-bold ${r?"text-oNight":"text-oRed"}`,children:[f.roll.toFixed(1),"°"]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end",children:[(0,e.jsx)("span",{className:`text-xs font-black uppercase tracking-widest leading-none mb-1 ${r?"text-oNight/40":"text-hud-dim"}`,children:t("indicators.pitch")}),(0,e.jsxs)("span",{className:`text-xs font-mono font-bold ${r?"text-oNight":"text-oBlue"}`,children:[f.pitch.toFixed(1),"°"]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end",children:[(0,e.jsx)("span",{className:`text-xs font-black uppercase tracking-widest leading-none mb-1 ${r?"text-oNight/40":"text-hud-dim"}`,children:t("indicators.yaw")}),(0,e.jsxs)("span",{className:`text-xs font-mono font-bold ${r?"text-oNight":"text-oYellow"}`,children:[f.yaw.toFixed(1),"°"]})]})]})})}t.s(["default",()=>r])},84237,t=>{t.n(t.i(90741))}]);