UNPKG

ocearo-ui

Version:

Ocean Robot UI: 3D visualization dashboard for signalk

1 lines 1.43 kB
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,28843,t=>{"use strict";var e=t.i(43476),a=t.i(71645),s=t.i(46932),l=t.i(67561),i=t.i(85709);t.s(["default",0,()=>{let{nightMode:t}=(0,l.useOcearoContext)(),o=(0,i.useSignalKPath)("steering.rudderAngle",0),d=(0,a.useMemo)(()=>180*o/Math.PI,[o]);return(0,e.jsx)("div",{style:{width:"400px"},className:"mx-auto p-4 transition-all duration-300 group",children:(0,e.jsxs)("div",{className:"w-full bg-hud-elevated h-1.5 rounded-full relative",children:[(()=>{let a=[];for(let s=-60;s<=60;s+=10){let l=s/120*100;a.push((0,e.jsx)("div",{className:"absolute h-1.5 w-[1px] bg-hud-muted opacity-20",style:{left:`${50+l}%`,bottom:"0"},children:(0,e.jsx)("span",{className:`absolute -top-5 left-1/2 -translate-x-1/2 text-xs font-black uppercase tracking-tighter ${t?"text-oNight/40":"text-hud-muted"}`,children:Math.abs(s)})},s))}return a})(),(0,e.jsx)(s.motion.div,{initial:!1,animate:{width:`${Math.abs(d)/120*100}%`,left:d<0?`${50-Math.abs(d)/120*100}%`:"50%"},transition:{type:"spring",stiffness:300,damping:30},className:`absolute top-0 h-full rounded-full ${d<0?"bg-oRed":"bg-oGreen"} shadow-[0_0_15px_var(--hud-text-main)] shadow-opacity-20`}),(0,e.jsx)("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-3 bg-hud-muted opacity-20 rounded-full z-10"})]})})}])},50226,t=>{t.n(t.i(28843))}]);