Devesh36/pocket-audio-player

oled-shape.tsx

import { Fragment } from "react"
import { assembly, jscad } from "tscircuit"
import { PixelText, textWidth } from "./pixel-text"

// Waveshare 1.9inch LCD Module (ST7789V2), landscape 320 x 170.
// Manufacturer STEP is converted to native CAD geometry by generate-lcd-model.tsx.
// All coordinates here are in mm; attachment origin is J_LCD (0, -7, 0.8).
export const oledDimensions={width:51.2,height:27.3,boardBottomZ:6.5,
 boardTopZ:8.1,faceZ:10.0,activeWidth:42.72,activeHeight:22.7,
 modelBottomZ:3.0,manufacturer:"Waveshare 1.9inch LCD Module"}
export const oledMounts=[-22.8,22.8].flatMap(x=>[13.15,34.85].map(y=>[x,y-6.8] as const))
// Conservative envelope for interference checks; four real M2 mount locations.
export function OledShape(){return <jscad.translate offset={[0,0.2,-1.1]}><jscad.union>
 <jscad.subtract>
  <jscad.cuboid size={[51.2,27.3,1.6]} center={[0,24,7.6]}/>
  {oledMounts.map(([x,y])=><jscad.cylinder key={`${x},${y}`} radius={1} height={2} center={[x,y+6.8,7.6]}/>)}
 </jscad.subtract>
 <jscad.cuboid size={[50.17,25.81,1.9]} center={[-0.22,24,9.35]}/>
 <jscad.cuboid size={[4.2,14.75,3.5]} center={[-10.985,24,5.05]}/>
 <jscad.cuboid size={[6.51,16.1,2]} center={[14.04,24.15,5.8]}/>
 {oledMounts.map(([x,y])=><jscad.cylinder key={`stud${x},${y}`} radius={1.75} height={4} center={[x,y+6.8,6.3]}/>)}
</jscad.union></jscad.translate>}
export function LcdMenu(){
 const z=10.015
 return <jscad.translate offset={[0,-6.8,0]}><Fragment>
 <jscad.colorize color="#d9d9cb"><jscad.cuboid size={[42.72,22.7,0.01]} center={[0,24,z]}/></jscad.colorize>
 <jscad.colorize color="#555750">
  <PixelText text="iPod" x={-textWidth("iPod",0.28)/2} y={34.55} z={z+0.02} pitch={0.28}/>
  <jscad.cuboid size={[42.72,0.1,0.01]} center={[0,31.8,z+0.01]}/>
  <jscad.cuboid size={[42.72,3.65,0.01]} center={[0,29.8,z+0.01]}/>
  <jscad.subtract><jscad.cuboid size={[4,1.75,0.025]} center={[17.8,33.5,z+0.02]}/><jscad.cuboid size={[3.5,1.25,0.04]} center={[17.8,33.5,z+0.02]}/></jscad.subtract>
  {[0,1,2,3].map(i=><jscad.cuboid key={i} size={[0.5,0.95,0.025]} center={[16.5+i*0.85,33.5,z+0.02]}/>)}
 </jscad.colorize>
 {["Playlists","Artists","Songs","Contacts","Settings"].map((text,i)=><jscad.colorize key={text} color={i===0?"#f0f0e8":"#555750"}>
  <PixelText text={text} x={-19.2} y={31-i*3.65} z={z+0.04} pitch={0.28}/>
  <jscad.translate offset={[19.5,29.9-i*3.65,z+0.04]}><jscad.extrudeLinear height={0.025}><jscad.polygon points={[[-.6,-.65],[-.35,-.9],[.55,0],[-.35,.9],[-.6,.65],[.1,0]]}/></jscad.extrudeLinear></jscad.translate>
 </jscad.colorize>)}
 </Fragment></jscad.translate>
}