a429-flight-display
Version:
React components for ARINC 429 Flight Display with primary flight instruments
2 lines (1 loc) • 14.7 kB
JavaScript
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.A429FlightDisplay={},n.React))})(this,function(n,e){"use strict";var $=Object.defineProperty;var j=(n,e,x)=>e in n?$(n,e,{enumerable:!0,configurable:!0,writable:!0,value:x}):n[e]=x;var v=(n,e,x)=>j(n,typeof e!="symbol"?e+"":e,x);class x{constructor(h,l,d,o){v(this,"label");v(this,"sdi");v(this,"data");v(this,"ssm");v(this,"parity");this.label=h,this.sdi=l,this.data=d,this.ssm=o,this.parity=this.calculateParity()}calculateParity(){const h=this.label<<24|this.sdi<<22|this.data<<3|this.ssm<<1;let l=0;for(let d=0;d<31;d++)h&1<<d&&l++;return l%2===0?1:0}}const g={ALTITUDE:131,AIRSPEED:134,MACH:135,HEADING:146,VERTICAL_SPEED:245,PITCH:212,ROLL:213,TEMPERATURE:137},m={NORMAL_OPERATION:3},u=({flightData:t})=>{const h=()=>[new x(g.ALTITUDE,0,Math.round(t.altitude),m.NORMAL_OPERATION),new x(g.AIRSPEED,0,Math.round(t.airspeed),m.NORMAL_OPERATION),new x(g.MACH,0,Math.round(t.mach*1e5),m.NORMAL_OPERATION),new x(g.HEADING,0,Math.round(t.heading),m.NORMAL_OPERATION),new x(g.VERTICAL_SPEED,0,Math.round(t.verticalSpeed),m.NORMAL_OPERATION),new x(g.PITCH,0,Math.round(t.pitch*100),m.NORMAL_OPERATION),new x(g.ROLL,0,Math.round(t.roll*100),m.NORMAL_OPERATION)];return e.jsxs("div",{className:"bg-gray-900 rounded-xl p-6 shadow-2xl",children:[e.jsxs("div",{className:"flex justify-between items-center mb-4",children:[e.jsx("h2",{className:"text-xl font-bold text-white",children:"Live ARINC 429 Data Bus"}),e.jsx("div",{className:"text-green-400 font-mono text-sm",children:t.timestamp.toLocaleTimeString()})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",children:h().map((l,d)=>{const o=Object.keys(g).find(r=>g[r]===l.label),s="0x"+(l.label<<24|l.sdi<<22|l.data<<3|l.ssm<<1|l.parity).toString(16).toUpperCase().padStart(8,"0");return e.jsxs("div",{className:"bg-gray-800 rounded-lg p-4 border border-gray-600",children:[e.jsx("div",{className:"text-yellow-400 font-semibold text-sm mb-2",children:o}),e.jsxs("div",{className:"text-white font-mono text-xs space-y-1",children:[e.jsxs("div",{children:["Label: ",l.label.toString(8).padStart(3,"0")]}),e.jsxs("div",{children:["Data: ",l.data]}),e.jsxs("div",{children:["Hex: ",s]})]}),e.jsx("div",{className:"text-green-400 text-xs mt-2",children:"● NORMAL"})]},d)})}),e.jsx("div",{className:"mt-6 text-center",children:e.jsxs("div",{className:"inline-flex items-center space-x-4 bg-gray-800 px-6 py-3 rounded-lg",children:[e.jsx("div",{className:"w-3 h-3 bg-green-400 rounded-full animate-pulse"}),e.jsx("span",{className:"text-white font-semibold",children:"ARINC 429 Bus Active"}),e.jsx("span",{className:"text-gray-400 font-mono text-sm",children:"12.5 kHz"})]})})]})},M=({pitch:t,roll:h})=>{const d=()=>{const s=[];for(let r=-30;r<=30;r+=5){if(r===0)continue;const a=r%10===0;s.push(e.jsx("div",{className:"absolute flex items-center justify-center w-full",children:e.jsxs("div",{className:"flex items-center justify-center",style:{transform:`translateY(${-r*3}px)`},children:[e.jsx("div",{className:`bg-white ${a?"h-0.5 w-16":"h-0.5 w-8"}`}),a&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"text-white text-xs font-mono ml-2 select-none",children:Math.abs(r)}),e.jsx("div",{className:"bg-white h-0.5 w-16 ml-2"}),e.jsx("span",{className:"text-white text-xs font-mono ml-2 select-none",children:Math.abs(r)})]})]})},r))}return s},o=()=>{const s=[];return[-60,-45,-30,-20,-10,0,10,20,30,45,60].forEach(a=>{const c=[0,-30,30,-60,60].includes(a),b=[-10,-20,10,20,-45,45].includes(a);s.push(e.jsxs("div",{className:"absolute top-1 left-1/2 origin-bottom transform -translate-x-1/2",style:{transform:`translateX(-50%) rotate(${a}deg)`,transformOrigin:"center 92px"},children:[e.jsx("div",{className:`bg-white ${c?"w-0.5 h-4":b?"w-0.5 h-3":"w-0.5 h-2"}`}),(a===-30||a===30||a===-60||a===60)&&e.jsx("div",{className:"text-white text-xs font-mono text-center mt-1 select-none",children:Math.abs(a)})]},a))}),s};return e.jsxs("div",{className:"relative w-48 h-48 rounded-full overflow-hidden border-4 border-gray-600 shadow-2xl bg-gray-900",children:[e.jsxs("div",{className:"absolute inset-0 bg-gradient-to-b from-sky-400 via-sky-300 to-amber-500",style:{transform:`rotate(${h}deg) translateY(${t*3}px)`,transformOrigin:"center center",width:"200%",height:"200%",left:"-50%",top:"-50%"},children:[e.jsx("div",{className:"absolute left-0 right-0 h-1 bg-white",style:{top:"50%",transform:"translateY(-50%)"}}),e.jsx("div",{className:"absolute inset-0 flex justify-center items-center",style:{top:"50%",left:"50%",transform:"translate(-50%, -50%)"},children:d()})]}),e.jsx("div",{className:"absolute inset-0",children:o()}),e.jsx("div",{className:"absolute top-1 left-1/2 w-0 h-0 border-l-3 border-r-3 border-b-6 border-transparent border-b-yellow-400 transform -translate-x-1/2 z-20",style:{transform:`translateX(-50%) rotate(${h}deg)`,transformOrigin:"center 92px"}}),e.jsx("div",{className:"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-30",children:e.jsxs("div",{className:"relative flex items-center justify-center",children:[e.jsx("div",{className:"w-12 h-1 bg-yellow-400"}),e.jsx("div",{className:"absolute w-1 h-6 bg-yellow-400"}),e.jsx("div",{className:"absolute w-2 h-2 bg-yellow-400 rounded-full"})]})}),e.jsx("div",{className:"absolute top-2 left-1/2 w-0 h-0 border-l-2 border-r-2 border-b-4 border-transparent border-b-white transform -translate-x-1/2 z-10"})]})},A=({value:t,title:h,unit:l,unitTooltip:d,generateMarks:o,getValueColor:s=()=>"text-white",isMajorTick:r=i=>i%20===0,formatValue:a=i=>i.toString(),formatCurrentValue:c=i=>Math.round(i).toString(),pixelsPerUnit:b=2,pointerSide:f="right",className:p=""})=>{const i=o(t),N=f==="left";return console.log(),e.jsxs("div",{className:`bg-gray-900 text-white rounded-lg w-32 h-64 relative overflow-hidden border-2 border-gray-600 flex flex-col ${p}`,children:[e.jsx("div",{className:"text-center text-xs font-bold text-gray-300 py-1 border-b border-gray-600",children:h}),e.jsxs("div",{className:"flex-1 relative overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 flex flex-col justify-center",children:e.jsx("div",{className:"relative h-48 mx-2",children:i.map(y=>{const T=(t-y)*b,w=96+T;if(Math.abs(T)>90||w<0||w>202)return null;const E=r(y);return e.jsxs("div",{className:"absolute flex items-center w-full",style:{top:`${w}px`,transform:"translateY(-50%)",flexDirection:N?"row-reverse":"row"},children:[E&&e.jsx("div",{className:`text-xs font-mono w-8 ${N?"text-left":"text-right"} ${s(y)}`,children:a(y)}),e.jsx("div",{className:`${N?"mr-1":"ml-1"} bg-white ${E?"h-0.5 w-4":"h-0.5 w-2"}`})]},y)})})}),e.jsx("div",{className:`absolute ${N?"left-2":"right-2"} top-1/2 w-0 h-0 ${N?"border-t-4 border-b-4 border-r-6 border-transparent border-r-yellow-400":"border-t-4 border-b-4 border-l-6 border-transparent border-l-yellow-400"} transform -translate-y-1/2 z-20`}),e.jsx("div",{className:`absolute top-1/2 ${N?"left-8":"right-8"} bg-black px-2 py-1 border border-white text-yellow-400 font-bold text-sm transform -translate-y-1/2 z-10 min-w-[3rem] text-center`,children:c(t)})]}),e.jsxs("div",{className:"relative group text-center text-xs text-gray-300 py-1 border-t border-gray-600",children:[e.jsx("span",{className:"cursor-help",children:l}),d&&e.jsxs("div",{className:"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none max-w-32 text-center whitespace-normal",children:[d,e.jsx("div",{className:"absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-2 border-transparent border-t-gray-800"})]})]})]})},S=({airspeed:t})=>{const h=o=>{const s=[],c=Math.max(0,Math.floor((o-100)/10)*10),b=Math.ceil((o+100)/10)*10;for(let f=c;f<=b;f+=10)s.push(f);return s},l=o=>o>=40&&o<=100?"text-white":o>=100&&o<=180?"text-green-400":o>=180&&o<=220?"text-yellow-400":o>220?"text-red-400":"text-gray-400",d=o=>o%20===0;return e.jsx(A,{value:t,title:"AIRSPEED",unit:"KTS",unitTooltip:"Knots (nautical mph)",generateMarks:h,getValueColor:l,isMajorTick:d,pixelsPerUnit:2,pointerSide:"right"})},I=({altitude:t})=>{const h=s=>{const r=[],b=Math.max(0,Math.floor((s-5e3)/100)*100),f=Math.ceil((s+5e3)/100)*100;for(let p=b;p<=f;p+=100)r.push(p);return r},l=s=>s<1e3?"text-red-400":s>=1e3&&s<=1e4?"text-white":s>1e4&&s<=4e4?"text-green-400":s>4e4?"text-yellow-400":"text-gray-400",d=s=>s%500===0,o=s=>s.toString();return e.jsx(A,{value:t,title:"ALTITUDE",unit:"FT",unitTooltip:"Feet above sea level",generateMarks:h,getValueColor:l,isMajorTick:d,formatValue:o,pixelsPerUnit:.1,pointerSide:"left"})},P=({heading:t})=>{const l=(()=>{const r=[];for(let a=0;a<72;a++){const c=a*5,b=c%90===0,f=c%30===0,p=c%10===0;let i="";c===0?i="N":c===90?i="E":c===180?i="S":c===270?i="W":f&&(i=(c/10).toString().padStart(2,"0")),r.push({angle:c,label:i,isCardinal:b,isMajor:f,isMinor:p,x:a*4})}return r})(),d=(t%360+360)%360,s=96-d*4;return e.jsxs("div",{className:"bg-gray-900 text-white rounded-lg w-48 h-16 relative overflow-hidden border-2 border-gray-600 shadow-lg",children:[e.jsx("div",{className:"absolute top-0 left-1/2 w-0 h-0 border-l-3 border-r-3 border-b-6 border-transparent border-b-yellow-400 transform -translate-x-1/2 z-10"}),e.jsx("div",{className:"absolute top-1 flex transition-transform duration-200 ease-out",style:{transform:`translateX(${s}px)`},children:l.concat(l).concat(l).map((r,a)=>e.jsxs("div",{className:"relative flex flex-col items-center",style:{width:"4px"},children:[e.jsx("div",{className:`bg-white ${r.isCardinal?"w-0.5 h-4":r.isMajor?"w-0.5 h-3":r.isMinor?"w-px h-2":"w-px h-1"}`}),r.label&&e.jsx("div",{className:`mt-0.5 text-xs font-mono whitespace-nowrap ${r.isCardinal?"text-yellow-400 font-bold":"text-white"}`,style:{fontSize:"10px"},children:r.label})]},a))}),e.jsxs("div",{className:"absolute bottom-1 left-1/2 bg-black px-2 py-0.5 border border-gray-400 text-green-400 font-bold text-xs transform -translate-x-1/2 rounded whitespace-nowrap",children:["HDG ",Math.round(d).toString().padStart(3,"0"),"°"]}),e.jsx("div",{className:"absolute top-0 left-0 w-4 h-full bg-gradient-to-r from-gray-900 to-transparent pointer-events-none z-20"}),e.jsx("div",{className:"absolute top-0 right-0 w-4 h-full bg-gradient-to-l from-gray-900 to-transparent pointer-events-none z-20"})]})},O=({verticalSpeed:t})=>{const l=(()=>{const r=[];for(let b=-3e3;b<=3e3;b+=200){const f=50-b/3e3*40,p=b%1e3===0,i=p;r.push({value:b,yPercent:f,isMajor:p,showLabel:i,label:i?(b/1e3).toString():""})}return r})(),o=50-Math.max(-3e3,Math.min(3e3,t))/3e3*40,s=()=>{const r=Math.abs(t);return r<50?"00":Math.floor(r/100).toString().padStart(2,"0")};return e.jsxs("div",{className:"bg-gray-900 text-white rounded-lg w-20 h-64 relative border-2 border-gray-600 shadow-lg overflow-hidden",children:[e.jsx("div",{className:"absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-mono text-gray-300 font-semibold",children:"V/S"}),e.jsx("div",{className:"absolute right-1 top-8 bottom-8 w-16",children:l.map((r,a)=>e.jsxs("div",{className:"absolute w-full flex items-center justify-end",style:{top:`${r.yPercent}%`},children:[r.showLabel&&e.jsx("div",{className:"mr-1 text-xs font-mono text-white",children:r.label}),e.jsx("div",{className:`bg-white h-0.5 ${r.isMajor?"w-4":"w-2"} ${r.value===0?"bg-yellow-400 w-6":"bg-white"}`})]},a))}),e.jsx("div",{className:"absolute left-2 top-1/2 w-0 h-0 border-t-2 border-b-2 border-r-4 border-transparent border-r-yellow-400 transform -translate-y-1/2 z-10"}),e.jsx("div",{className:"absolute left-8 w-6 h-0.5 bg-cyan-400 transform -translate-y-1/2 transition-all duration-300 z-20",style:{top:`${o}%`}}),e.jsxs("div",{className:"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black px-2 py-1 border border-gray-400 rounded z-30",children:[e.jsx("div",{className:"text-cyan-400 font-bold text-lg font-mono",children:s()}),e.jsx("div",{className:"text-gray-400 text-xs text-center",children:t>=0?"▲":"▼"})]}),e.jsx("div",{className:"absolute bottom-1 left-1/2 transform -translate-x-1/2 text-xs text-gray-400 font-mono",children:"FPM"}),e.jsx("div",{className:"absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-gray-900 to-transparent pointer-events-none z-40"}),e.jsx("div",{className:"absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-gray-900 to-transparent pointer-events-none z-40"})]})};function L({flightData:t}){return e.jsx(e.Fragment,{children:e.jsxs("div",{className:"bg-black rounded-xl p-8 shadow-2xl mb-6",children:[e.jsxs("div",{className:"flex justify-center items-center space-x-8",children:[e.jsx("p",{children:"AirSpeed"}),e.jsx(S,{airspeed:t.airspeed}),e.jsxs("div",{className:"flex flex-col items-center space-y-4",children:[e.jsx(M,{pitch:t.pitch,roll:t.roll}),e.jsx(P,{heading:t.heading})]}),e.jsx(I,{altitude:t.altitude}),e.jsx(O,{verticalSpeed:t.verticalSpeed})]}),e.jsxs("div",{className:"flex justify-center space-x-8 mt-6 text-white",children:[e.jsxs("div",{className:"bg-gray-800 px-4 py-2 rounded border",children:[e.jsx("span",{className:"text-gray-400",children:"MACH:"}),e.jsx("span",{className:"text-cyan-400 ml-2 font-mono",children:t.mach.toFixed(3)})]}),e.jsxs("div",{className:"bg-gray-800 px-4 py-2 rounded border",children:[e.jsx("span",{className:"text-gray-400",children:"OAT:"}),e.jsxs("span",{className:"text-blue-300 ml-2 font-mono",children:[Math.round(t.temperature),"°C"]})]}),e.jsxs("div",{className:"bg-gray-800 px-4 py-2 rounded border",children:[e.jsx("span",{className:"text-gray-400",children:"GS:"}),e.jsx("span",{className:"text-green-400 ml-2 font-mono",children:"420 KT"})]})]})]})})}const C=({flightData:t})=>e.jsx("div",{className:"min-h-screen bg-gray-800 p-6",children:e.jsxs("div",{className:"max-w-7xl mx-auto",children:[e.jsx("div",{className:"mb-6 text-center",children:e.jsx("div",{className:"bg-gray-900 rounded-lg p-4 inline-block",children:e.jsxs("div",{className:"text-green-400 font-mono text-lg",children:[t.timestamp.toLocaleDateString()," - ",t.timestamp.toLocaleTimeString()]})})}),e.jsx(L,{flightData:t}),e.jsx(u,{flightData:t})]})});n.ARINC429DataBus=u,n.ARINC429Word=x,n.ARINC429_LABELS=g,n.AircraftPFD=C,n.AirspeedIndicator=S,n.AltitudeIndicator=I,n.AttitudeIndicator=M,n.HeadingIndicator=P,n.SSM=m,n.VerticalSpeedIndicator=O,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});