WIP pinout tab

This commit is contained in:
Sacha Weatherstone 2022-04-14 23:04:36 +10:00
parent ba1004ea79
commit 3178fc8186
4 changed files with 254 additions and 3 deletions

View file

@ -29,7 +29,7 @@ export const HardwareModal = ({
close,
}: HardwareModal): JSX.Element => {
const [hideDetails, setHideDetails] = useState(false);
const { breakpoint } = useBreakpoint(BREAKPOINTS);
const { breakpoint } = useBreakpoint(BREAKPOINTS, 'md');
return (
<Modal open={open} onClose={close}>
@ -142,7 +142,7 @@ export const HardwareModal = ({
/>
</motion.div>
</div>
<div className="mt-[25%] flex h-full flex-col md:ml-[20%] md:mt-0 md:w-4/5">
<div className="z-[1] mt-[25%] flex h-full flex-col md:ml-[20%] md:mt-0 md:w-4/5">
<div className="z-0 hidden pb-2 md:flex">
<VariantSelectButton options={device.variants} />
</div>

View file

@ -9,5 +9,28 @@ export interface PinoutTabProps {
}
export const PinoutTab = ({ device }: PinoutTabProps): JSX.Element => {
return <Tab.Panel className="h-32">Content 1</Tab.Panel>;
return (
<Tab.Panel className="flex">
<div className="m-auto flex gap-4 rounded-lg bg-slate-700 px-2 py-1 shadow-md">
{[
device.pinout.slice(0, device.misc.pinoutSplit),
device.pinout.slice(device.misc.pinoutSplit, device.pinout.length),
].map((group, index) => (
<div key={index}>
{group.map((pin, pinIndex) => (
<div
className={`flex gap-1 ${
index === 0 ? 'flex-row' : 'flex-row-reverse'
}`}
key={pinIndex}
>
<div className="m-auto h-3 w-3 rounded-full border bg-yellow-500" />
<span className="m-auto font-mono text-white">{pin.label}</span>
</div>
))}
</div>
))}
</div>
</Tab.Panel>
);
};

View file

@ -10,6 +10,21 @@ export enum UseCase {
Portable,
}
enum PinUsage {
LoRa,
GNSS,
}
export interface Pin {
offset: {
x: number;
y: number;
};
name: string;
label: string;
usage?: PinUsage;
}
export type DeviceName = 'tbeam' | 'techo';
export type BLEVersion = '4.2' | '5.0';
@ -49,6 +64,7 @@ export interface IDevice {
SuggestedUse: UseCase[];
Stability: Stability;
Gradient: string;
pinoutSplit: number;
};
images: {
Front: string;
@ -73,5 +89,6 @@ export interface IDevice {
PSRAM: number;
RAM?: number;
};
pinout: Pin[];
variants: Variant[];
}

View file

@ -6,6 +6,7 @@ export const tbeam: IDevice = {
Stability: Stability.Stable,
SuggestedUse: [UseCase.Portable],
Gradient: 'bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500',
pinoutSplit: 13,
},
images: {
Front: '/img/hardware/tbeam-v1.1.svg',
@ -63,4 +64,214 @@ export const tbeam: IDevice = {
},
},
],
pinout: [
{
label: 'VP',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'VN',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'RST',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '15',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '35',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '32',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '33',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '25',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '14',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '13',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '2',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'GND',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '5V',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'TX',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'RX',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '23',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '4',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '0',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'GND',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '3V3',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'GND',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '22',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '21',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: '3.3V',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'LoRa2',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
{
label: 'LoRa1',
name: 'IO1',
offset: {
x: 5,
y: 5,
},
},
],
};