ocearo-ui
Version:
Ocean Robot UI: Sailing made smarter
1 lines • 16.8 kB
JavaScript
;(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[199],{86199:function(e,t,a){a.r(t);var l=a(57437),s=a(2265),r=a(53082),n=a(15008),i=a(51268),o=a(35217);let c=e=>{let{data:t,dataKey:a,color:s,scale:n,label:i,unit:o,showPoints:c=!1,lineWidth:x=.5}=e,{nightMode:d}=(0,r.yC)(),m=t.filter(e=>null!==e[a]&&void 0!==e[a]);if(0===m.length)return(0,l.jsx)("div",{className:"flex items-center justify-center h-full",children:"No data available"});let u=Math.min(...m.map(e=>e[a])),h=Math.max(...m.map(e=>e[a])),g=Math.max(n.min,u-(h-u)*.1),f=Math.min(n.max,h+(h-u)*.1),p=h-u>(n.max-n.min)*.05,b=p?g:n.min,v=p?f:n.max,j=t.map((e,l)=>{let s=l/(t.length-1)*100;return null===e[a]||void 0===e[a]?{x:s,y:null,value:null,time:e.time}:{x:s,y:100-Math.min(100,Math.max(0,(e[a]-b)/(v-b)*100)),value:e[a],time:e.time}}).filter(e=>null!==e.y),N=j.reduce((e,t,a)=>e+(0===a?"M ".concat(t.x,",").concat(t.y):" L ".concat(t.x,",").concat(t.y)),""),y=Array.from({length:5}).map((e,t)=>({position:t/4*100,value:v-(v-b)/4*t}));return(0,l.jsxs)("div",{className:"h-full w-full relative",children:[(0,l.jsx)("div",{className:"absolute inset-0",children:y.map((e,t)=>(0,l.jsx)("div",{className:"absolute w-full border-t border-gray-300 opacity-20",style:{top:"".concat(e.position,"%")},children:(0,l.jsxs)("span",{className:"absolute -left-10 text-xs ".concat(d?"text-oNight":"text-white"),children:[e.value.toFixed(e.value<10?1:0),o]})},t))}),(0,l.jsx)("div",{className:"absolute bottom-0 w-full",children:t.filter((e,t)=>t%10==0).map((e,a,s)=>(0,l.jsx)("span",{className:"absolute text-xs ".concat(d?"text-oNight":"text-white"," transform -translate-x-1/2"),style:{left:"".concat(10*a/(t.length-1)*100,"%"),bottom:"-20px"},children:e.time.split(":").slice(1).join(":")},a))}),(0,l.jsx)("div",{className:"absolute inset-0 bg-gray-800 bg-opacity-10 rounded"}),p&&(0,l.jsxs)("div",{className:"absolute top-0 right-0 bg-gray-800 bg-opacity-70 px-2 py-1 rounded text-xs text-white",children:["Auto: ",b.toFixed(1)," - ",v.toFixed(1),o]}),(0,l.jsxs)("svg",{className:"w-full h-full",preserveAspectRatio:"none",viewBox:"0 0 100 100",children:[(0,l.jsx)("defs",{children:(0,l.jsxs)("linearGradient",{id:"gradient-".concat(a),x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,l.jsx)("stop",{offset:"0%",stopColor:s,stopOpacity:"0.3"}),(0,l.jsx)("stop",{offset:"100%",stopColor:s,stopOpacity:"0.05"})]})}),(0,l.jsx)("path",{d:"".concat(N," L ").concat(j[j.length-1].x,",100 L ").concat(j[0].x,",100 Z"),fill:"url(#gradient-".concat(a,")")}),(0,l.jsx)("path",{d:N,fill:"none",stroke:s,strokeWidth:x,strokeLinecap:"round",strokeLinejoin:"round"}),c&&j.map((e,t)=>(0,l.jsx)("circle",{cx:e.x,cy:e.y,r:.5,fill:s,className:"hover:r-4 transition-all duration-150",children:(0,l.jsx)("title",{children:"".concat(i,": ").concat(e.value.toFixed(2)).concat(o)})},t))]})]})},x=e=>{let{socPercentage:t,voltage:a,current:s,temperature:r,isCharging:c}=e,x=(0,n.z)(t),d=t<=n.vp.DANGER_THRESHOLD,m=null!==r;return(0,l.jsxs)("div",{className:"flex flex-col items-center",children:[(0,l.jsxs)("div",{className:"relative w-20 h-40 mb-4",children:[(0,l.jsxs)("div",{className:"absolute w-full h-[90%] bottom-0 rounded-md border-2 border-white overflow-hidden",children:[(0,l.jsx)("div",{className:"absolute bottom-0 w-full transition-all duration-700 ".concat(x),style:{height:"".concat(t,"%")}}),(0,l.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,l.jsxs)("span",{className:"text-xl font-bold text-white drop-shadow-lg",children:[Math.round(t),"%"]})}),d&&(0,l.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,l.jsx)("span",{className:"text-4xl animate-pulse text-red-500 opacity-70",children:"⚠️"})})]}),(0,l.jsx)("div",{className:"absolute w-[40%] h-[10%] top-0 left-1/2 -translate-x-1/2 bg-white rounded-t-sm"}),c&&(0,l.jsx)("div",{className:"absolute top-[-1.5rem] left-1/2 -translate-x-1/2 text-yellow-400 animate-pulse",children:(0,l.jsx)(i.G,{icon:o.BDt,size:"xl"})})]}),(0,l.jsxs)("div",{className:"flex ".concat(m?"flex-wrap":""," gap-4 justify-center"),children:[(0,l.jsxs)("div",{className:"text-center",children:[(0,l.jsx)("span",{className:"text-xs opacity-70",children:"Voltage"}),(0,l.jsxs)("p",{className:"text-lg font-medium",children:[a.toFixed(1),"V"]})]}),(0,l.jsxs)("div",{className:"text-center",children:[(0,l.jsx)("span",{className:"text-xs opacity-70",children:"Current"}),(0,l.jsxs)("p",{className:"text-lg font-medium",children:[s.toFixed(1),"A"]})]}),m&&(0,l.jsxs)("div",{className:"text-center",children:[(0,l.jsx)("span",{className:"text-xs opacity-70",children:"Temp"}),(0,l.jsxs)("p",{className:"text-lg font-medium",children:[r.toFixed(1),"\xb0C"]})]})]})]})},d=e=>{let{value:t,min:a,max:s,label:r,color:n,icon:o}=e;return(0,l.jsxs)("div",{className:"flex flex-col items-center",children:[(0,l.jsxs)("div",{className:"relative w-32 h-16 mb-2",children:[(0,l.jsx)("div",{className:"absolute w-full h-full bg-gray-800 rounded-t-full overflow-hidden"}),(0,l.jsx)("div",{className:"absolute bottom-0 left-0 w-full origin-bottom overflow-hidden",style:{height:"100%",transform:"rotate(".concat(-90+(t-a)/(s-a)*100/100*180,"deg)"),transformOrigin:"bottom center"},children:(0,l.jsx)("div",{className:"absolute bottom-0 left-0 w-0.5 h-full ".concat(n),style:{left:"50%",boxShadow:"0 0 8px 1px currentColor"}})}),[0,25,50,75,100].map(e=>(0,l.jsx)("div",{className:"absolute bottom-0 w-1 h-2 bg-white",style:{left:"".concat(e,"%")}},e)),o&&(0,l.jsx)("div",{className:"absolute top-1 left-1/2 -translate-x-1/2 text-white opacity-70",children:(0,l.jsx)(i.G,{icon:o})}),(0,l.jsx)("div",{className:"absolute bottom-0 left-1/2 -translate-x-1/2 -translate-y-1/2",children:(0,l.jsx)("span",{className:"font-bold text-white",children:t.toFixed(1)})})]}),(0,l.jsx)("span",{className:"text-sm opacity-80",children:r})]})};t.default=()=>{let{nightMode:e,getSignalKValue:t}=(0,r.yC)(),a=(0,s.useRef)(performance.now()),m=(0,s.useRef)(performance.now()),u=(0,s.useRef)(0),[h,g]=(0,s.useState)("voltage"),[f,p]=(0,s.useState)("fps"),b=(0,s.useCallback)(()=>{let e=new Date().toLocaleTimeString(),a=t("electrical.batteries.1.voltage")||12,l=t("electrical.batteries.1.capacity.stateOfCharge"),s=t("electrical.batteries.1.current")||5,i=t("electrical.batteries.1.temperature"),o=null!==i?(0,r.G5)(i):null;return{time:e,voltage:a,current:s,stateOfCharge:null!==l?l:(0,n.Si)(a),power:a*s,temperature:o}},[t]),[v,j]=(0,s.useState)(()=>Array(60).fill(null).map(b)),[N,y]=(0,s.useState)(()=>{let e=new Date().toLocaleTimeString();return Array(60).fill({time:e,fps:60,ms:16.67,drawCalls:0,triangles:0,geometries:0,textures:0,memory:0})}),w=(0,s.useCallback)(e=>{let a=v[v.length-1],l=t("electrical.batteries.1.voltage")||a.voltage,s=t("electrical.batteries.1.current")||a.current,i=t("electrical.batteries.1.capacity.stateOfCharge"),o=null!==i?i:(0,n.Si)(l),c=t("electrical.batteries.1.temperature");return{time:e,voltage:l,current:s,stateOfCharge:o,power:l*s,temperature:null!==c?(0,r.G5)(c):null}},[t,v]),C=(0,s.useRef)(null);(0,s.useEffect)(()=>{window.__OCEARO_RENDERER&&(C.current=window.__OCEARO_RENDERER)},[]),(0,s.useEffect)(()=>{let e;let t=()=>{let l=new Date().toLocaleTimeString();u.current++;let s=performance.now();if(a.current,s>=m.current+1e3){var r,n,i,o,c,x,d,h;let e=1e3*u.current/(s-m.current),t=e>0?1e3/e:0,a=0,g=0,f=0,p=0,b=0;if(window.performance&&window.performance.memory&&(b=Math.round(window.performance.memory.usedJSHeapSize/1048576)),C.current){let e=C.current.info;a=(null===(r=e.render)||void 0===r?void 0:r.calls)||0,g=(null===(n=e.render)||void 0===n?void 0:n.triangles)||0,f=(null===(i=e.memory)||void 0===i?void 0:i.geometries)||0,p=(null===(o=e.memory)||void 0===o?void 0:o.textures)||0}else if(window.__OCEARO_RENDER_INFO){let e=window.__OCEARO_RENDER_INFO;a=(null===(c=e.render)||void 0===c?void 0:c.calls)||0,g=(null===(x=e.render)||void 0===x?void 0:x.triangles)||0,f=(null===(d=e.memory)||void 0===d?void 0:d.geometries)||0,p=(null===(h=e.memory)||void 0===h?void 0:h.textures)||0}y(s=>[...s.slice(1),{time:l,fps:e,ms:t,drawCalls:a,triangles:g,geometries:f,textures:p,memory:b}]),j(e=>[...e.slice(1),w(l)]),m.current=s,u.current=0}a.current=s,e=requestAnimationFrame(t)};return e=requestAnimationFrame(t),()=>cancelAnimationFrame(e)},[w]);let R={voltage:{min:10.5,max:15,step:1},current:{min:-5,max:50,step:5},soc:{min:0,max:100,step:25},temperature:{min:10,max:60,step:10}},G={fps:{min:0,max:60,step:15},drawCalls:{min:0,max:500,step:100},triangles:{min:0,max:5e5,step:1e5},memory:{min:0,max:500,step:100}},O=v[v.length-1],E=(0,n.d3)(O.voltage),_=null!==O.temperature;return(0,l.jsx)("div",{className:"p-6 flex flex-col h-full bg-rightPaneBg overflow-auto",children:(0,l.jsxs)("div",{className:"grid gap-6 md:grid-cols-2 auto-rows-fr h-full",children:[(0,l.jsxs)("div",{className:"bg-oGray2 rounded-lg shadow-lg p-4 flex flex-col md:row-span-2",children:[(0,l.jsxs)("h2",{className:"text-lg font-semibold ".concat(e?"text-oNight":"text-white"," mb-6 text-center"),children:[(0,l.jsx)(i.G,{icon:o.RoX,className:"mr-2"}),"Battery Status"]}),(0,l.jsxs)("div",{className:"flex-1 flex flex-col justify-between",children:[(0,l.jsx)("div",{className:"flex-1 flex items-center justify-center",children:(0,l.jsx)(x,{socPercentage:O.stateOfCharge,voltage:O.voltage,current:O.current,temperature:O.temperature,isCharging:E})}),(0,l.jsxs)("div",{className:"flex justify-center flex-wrap gap-6 mb-4",children:[(0,l.jsx)(d,{value:O.voltage,min:R.voltage.min,max:R.voltage.max,label:"Voltage",color:"text-blue-500",icon:o.BDt}),(0,l.jsx)(d,{value:O.current,min:R.current.min,max:R.current.max,label:"Current",color:"text-red-500",icon:o.Tr1}),_&&(0,l.jsx)(d,{value:O.temperature,min:R.temperature.min,max:R.temperature.max,label:"Temperature",color:"text-orange-500",icon:o.ccn})]}),(0,l.jsxs)("div",{className:"flex justify-center space-x-3 pt-2 border-t border-gray-700",children:[(0,l.jsxs)("div",{className:"px-3 py-1 rounded-full text-sm flex items-center \n ".concat(E?"bg-green-900 text-green-200":"bg-gray-700 text-gray-300"),children:[(0,l.jsx)(i.G,{icon:o.Tr1,className:"mr-1"}),E?"Charging":"Not Charging"]}),(0,l.jsxs)("div",{className:"px-3 py-1 rounded-full text-sm flex items-center\n ".concat("bg-oGreen"===(0,n.z)(O.stateOfCharge)?"bg-green-900 text-green-200":"bg-oYellow"===(0,n.z)(O.stateOfCharge)?"bg-yellow-700 text-yellow-100":"bg-red-900 text-red-200"),children:[(0,l.jsx)(i.G,{icon:o.RoX,className:"mr-1"}),O.stateOfCharge>=75?"Good":O.stateOfCharge>=30?"Fair":"Low"]})]})]})]}),(0,l.jsxs)("div",{className:"bg-oGray2 rounded-lg shadow-lg p-4 flex flex-col h-full",children:[(0,l.jsxs)("div",{className:"flex justify-between items-center mb-4",children:[(0,l.jsx)("h2",{className:"text-lg font-semibold ".concat(e?"text-oNight":"text-white"),children:"Battery Graph"}),(0,l.jsxs)("div",{className:"flex space-x-2",children:[(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("voltage"===h?"bg-blue-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>g("voltage"),children:"Voltage"}),(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("current"===h?"bg-red-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>g("current"),children:"Current"}),(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("soc"===h?"bg-green-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>g("soc"),children:"SoC"}),_&&(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("temperature"===h?"bg-orange-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>g("temperature"),children:"Temp"})]})]}),(0,l.jsxs)("div",{className:"h-48 relative",children:["voltage"===h&&(0,l.jsx)(c,{data:v,dataKey:"voltage",color:"#3b82f6",scale:R.voltage,label:"Voltage",unit:"V",showPoints:!0}),"current"===h&&(0,l.jsx)(c,{data:v,dataKey:"current",color:"#ef4444",scale:R.current,label:"Current",unit:"A",showPoints:!0}),"soc"===h&&(0,l.jsx)(c,{data:v,dataKey:"stateOfCharge",color:"#22c55e",scale:R.soc,label:"State of Charge",unit:"%",showPoints:!0}),"temperature"===h&&_&&(0,l.jsx)(c,{data:v,dataKey:"temperature",color:"#f97316",scale:R.temperature,label:"Temperature",unit:"\xb0C",showPoints:!0})]})]}),(0,l.jsxs)("div",{className:"bg-oGray2 rounded-lg shadow-lg p-4 flex flex-col h-full",children:[(0,l.jsxs)("div",{className:"flex justify-between items-center mb-4",children:[(0,l.jsxs)("h2",{className:"text-lg font-semibold ".concat(e?"text-oNight":"text-white"," flex items-center"),children:[(0,l.jsx)(i.G,{icon:o.zvy,className:"mr-2"}),"3D Performance"]}),(0,l.jsxs)("div",{className:"flex space-x-2",children:[(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("fps"===f?"bg-cyan-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>p("fps"),children:"FPS"}),(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("drawCalls"===f?"bg-purple-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>p("drawCalls"),children:"Draw Calls"}),(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("triangles"===f?"bg-indigo-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>p("triangles"),children:"Triangles"}),(0,l.jsx)("button",{className:"px-2 py-1 rounded text-xs ".concat("memory"===f?"bg-emerald-500 text-white":"bg-gray-700 text-gray-300"),onClick:()=>p("memory"),children:"Memory"})]})]}),(0,l.jsxs)("div",{className:"h-48 relative",children:["fps"===f&&(0,l.jsx)(c,{data:N,dataKey:"fps",color:"#06b6d4",scale:G.fps,label:"FPS",unit:"",lineWidth:.5,showPoints:!0}),"drawCalls"===f&&(0,l.jsx)(c,{data:N,dataKey:"drawCalls",color:"#8b5cf6",scale:G.drawCalls,label:"Draw Calls",unit:"",lineWidth:.5,showPoints:!0}),"triangles"===f&&(0,l.jsx)(c,{data:N,dataKey:"triangles",color:"#6366f1",scale:G.triangles,label:"Triangles",unit:"",lineWidth:.5,showPoints:!0}),"memory"===f&&(0,l.jsx)(c,{data:N,dataKey:"memory",color:"#10b981",scale:G.memory,label:"Memory",unit:"MB",lineWidth:.5,showPoints:!0})]}),(0,l.jsxs)("div",{className:"grid grid-cols-2 gap-4 mt-4",children:[(0,l.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,l.jsx)(i.G,{icon:o.zvy,className:"text-cyan-500 text-lg"}),(0,l.jsxs)("div",{children:[(0,l.jsx)("p",{className:"text-xs ".concat(e?"text-oNight":"text-white"," opacity-70"),children:"FPS / Frame Time"}),(0,l.jsxs)("p",{className:"text-base font-semibold ".concat(e?"text-oNight":"text-white"),children:[N[N.length-1].fps.toFixed(1)," fps /",N[N.length-1].ms.toFixed(1),"ms"]})]})]}),(0,l.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,l.jsx)(i.G,{icon:o.dT$,className:"text-purple-500 text-lg"}),(0,l.jsxs)("div",{children:[(0,l.jsx)("p",{className:"text-xs ".concat(e?"text-oNight":"text-white"," opacity-70"),children:"Draw Calls"}),(0,l.jsx)("p",{className:"text-base font-semibold ".concat(e?"text-oNight":"text-white"),children:N[N.length-1].drawCalls.toLocaleString()})]})]}),(0,l.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,l.jsx)(i.G,{icon:o.hGM,className:"text-indigo-500 text-lg"}),(0,l.jsxs)("div",{children:[(0,l.jsx)("p",{className:"text-xs ".concat(e?"text-oNight":"text-white"," opacity-70"),children:"Triangles / Geometries"}),(0,l.jsxs)("p",{className:"text-base font-semibold ".concat(e?"text-oNight":"text-white"),children:[(N[N.length-1].triangles/1e3).toFixed(1),"k /",N[N.length-1].geometries]})]})]}),(0,l.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,l.jsx)(i.G,{icon:o.$v3,className:"text-emerald-500 text-lg"}),(0,l.jsxs)("div",{children:[(0,l.jsx)("p",{className:"text-xs ".concat(e?"text-oNight":"text-white"," opacity-70"),children:"Memory / Textures"}),(0,l.jsxs)("p",{className:"text-base font-semibold ".concat(e?"text-oNight":"text-white"),children:[N[N.length-1].memory," MB /",N[N.length-1].textures||0]})]})]})]})]})]})})}},15008:function(e,t,a){a.d(t,{Si:function(){return s},d3:function(){return r},vp:function(){return l},z:function(){return n}});let l={WARNING_THRESHOLD:50,DANGER_THRESHOLD:20,CHARGING_THRESHOLD:13.2,MIN_VOLTAGE:10.5,MAX_VOLTAGE:14.4},s=e=>{if(!e||"number"!=typeof e)return 0;if(e>=13)return 100;if(e<=l.MIN_VOLTAGE)return 0;let t=[{voltage:12.85,soc:100},{voltage:12.75,soc:90},{voltage:12.65,soc:80},{voltage:12.55,soc:70},{voltage:12.45,soc:60},{voltage:12.35,soc:50},{voltage:12.25,soc:40},{voltage:12.15,soc:30},{voltage:12.05,soc:20},{voltage:11.95,soc:15},{voltage:11.8,soc:10},{voltage:11.6,soc:5},{voltage:10.5,soc:0}];for(let a=0;a<t.length-1;a++)if(e>=t[a+1].voltage){let l=t[a].voltage,s=t[a+1].voltage,r=t[a].soc,n=t[a+1].soc;return Math.round(n+(e-s)/(l-s)*(r-n))}return 0},r=e=>e>l.CHARGING_THRESHOLD,n=e=>e>l.WARNING_THRESHOLD?"bg-oGreen":e>l.DANGER_THRESHOLD?"bg-oYellow":"bg-oRed"}}]);