uppercase descriptions, and add interface opts

This commit is contained in:
bakedpotatolord 2025-09-22 21:08:22 -06:00
commit 409ecc0c4c

View file

@ -4,65 +4,70 @@ import "react-responsive-carousel/lib/styles/carousel.min.css";
const imageDescripts = { const imageDescripts = {
outline: [ outline: [
["/1.png", "outline of a complex part"], ["/1.png", "Outline of a complex part"],
["/2.png", "outline of a non-flat part with inside holes"], ["/2.png", "Outline of a non-flat part with inside holes"],
["/3.png", "outside-only outline"], ["/3.png", "Outside-only outline"],
["/4.png", "inside-only outline"], ["/4.png", "Inside-only outline"],
], ],
level: [ level: [
["/1.png", "level of a large part"], ["/1.png", "Level of a large part"],
["/2.png", `level of a square part's stock`], ["/2.png", `Level of a square part's stock`],
["/3.png", `level of a part with a non-uniform top surface`], ["/3.png", `Level of a part with a non-uniform top surface`],
], ],
rough: [ rough: [
["/1.png", "rough cut of two parts"], ["/1.png", "Rough cut of two parts"],
["/2.png", "side-view of a rough cut"], ["/2.png", "Side-view of a rough cut"],
["/3.png", "rough cut of a part with a complex top surface"], ["/3.png", "Rough cut of a part with a complex top surface"],
["/4.gif", "animate of complex rough cut"], ["/4.gif", "Animate of complex rough cut"],
], ],
contour: [ contour: [
["/1.png", "close-up of a precise contour"], ["/1.png", "Close-up of a precise contour"],
["/2.png", "contour of multiple parts at once"], ["/2.png", "Contour of multiple parts at once"],
["/3.png", "low precision contour"], ["/3.png", "Low precision contour"],
], ],
register: [ register: [
["/1.png", "2-drill register"], ["/1.png", "2-drill register"],
["/2.png", "3-drill register"], ["/2.png", "3-drill register"],
["/3.png", "jigsaw register"], ["/3.png", "Jigsaw register"],
], ],
drill: [ drill: [
["/1.png", "drills for a robot baseplate"], ["/1.png", "Drills for a robot baseplate"],
["/2.png", "drills for a pegboard"], ["/2.png", "Drills for a pegboard"],
["/3.png", "selecting only matching-size holes"], ["/3.png", "Selecting only matching-size holes"],
], ],
trace: [ trace: [
["/1.png", "toolpath tracing a design into a part"], ["/1.png", "Toolpath tracing a design into a part"],
["/2.png", "selecting loops to trace"], ["/2.png", "Selecting loops to trace"],
["/3.png", "tracing edges for deburring"], ["/3.png", "Tracing edges for deburring"],
["/4.png", "trace to clear a pocket"], ["/4.png", "Trace to clear a pocket"],
["/5.png", "arbitrary offset outline"], ["/5.png", "Arbitrary offset outline"],
], ],
pocket: [ pocket: [
["/1.png", "selecting areas to pocket"], ["/1.png", "Selecting areas to pocket"],
["/2.png", "toolpath for pocket"], ["/2.png", "Toolpath for pocket"],
["/3.gif", "pocket animation"], ["/3.gif", "Pocket animation"],
["/4.png", "toolpath for v-bit carve"], ["/4.png", "Toolpath for v-bit carve"],
["/5.png", "many-pocketed part"], ["/5.png", "Many-pocketed part"],
], ],
gcode: [["/1.png", "the gcode editor popup"]], gcode: [["/1.png", "The gcode editor popup"]],
laserOn: [], laserOn: [],
laserOff: [], laserOff: [],
index: [], index: [],
lathe: [], lathe: [],
tabs: [ tabs: [
["/1.png", "tabs added to part"], ["/1.png", "Tabs added to part"],
["/2.png", "sliced part with tabs"], ["/2.png", "Sliced part with tabs"],
], ],
camInterface:[ camInterface:[
["/1.png", "empty Ops list"], ["/1.png", "Empty Ops list"],
["/2.png", "sample Ops list"], ["/2.png", "Sample Ops list"],
["/3.png", "Ops list with history bar"], ["/3.png", "Ops list with history bar"],
] ],
prefs: [
["/prefs-CAM.png", "Preferences in CAM mode"],
["/prefs-FDM.png", "Preferences in FDM mode"],
["/prefs-LASER.png", "Preferences in laser mode"],
],
}; };
/** /**
@ -71,9 +76,9 @@ const imageDescripts = {
* @param {keyof typeof imageDescripts} images - The key to an array of images and descriptions. * @param {keyof typeof imageDescripts} images - The key to an array of images and descriptions.
* @returns {ReactElement} - A carousel of the given images. * @returns {ReactElement} - A carousel of the given images.
*/ */
export function ImageCarousel({ base, images }) { export function ImageCarousel({ base, images, sml }) {
return ( return (
<div class="carouselWrapper"> <div className={sml ?"carouselWrapper": ""}>
<Carousel showThumbs={false}> <Carousel showThumbs={false}>
{imageDescripts[images].map(([image, caption], index) => ( {imageDescripts[images].map(([image, caption], index) => (