Skip to content

Commit

Permalink
Deployed 9696308 with MkDocs version: 1.6.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmccreary
dmccreary committed Feb 5, 2025
1 parent 1533f63 commit c9c67af
Show file tree
Hide file tree
Showing 5 changed files with 484 additions and 259 deletions.
2 changes: 1 addition & 1 deletion search/search_index.json
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion sims/architectural-levels/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1191,7 +1191,8 @@
<h1>Architectural Levels</h1>

<h2 id="architectural-levels-zoom">Architectural Levels Zoom</h2>
<p><a href="main.html">React Main</a></p>
<p><a href="main.html">P5.js Version</a></p>
<p><a href="react.html">React Main</a></p>
<div class="admonition prompt">
<p class="admonition-title">Prompt</p>
<p>Create a MicroSim that shows different levels of Zoom. The highest level shows a single component and as you increase the Zoom level it shows more components.</p>
Expand Down
272 changes: 15 additions & 257 deletions sims/architectural-levels/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,268 +2,26 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock Architecture Visualization</title>

<!-- Tailwind CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>

<!-- React and ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

<!-- Babel for JSX -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<title>Binary Clock MicroSim in p5.js 1.11.1</title>
<!-- adjust as new versions of p5.js come out -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<style>
body {
padding: 0;
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.title {
text-align: center;
margin-bottom: 20px;
color: #2d3748;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Put your script file name here -->
<script src="./sketch.js"></script>
</head>
<body>
<div class="container">
<h1 class="title text-2xl font-bold">Clock Architecture Visualization</h1>
<div id="root"></div>
</div>

<script type="text/babel">
// Import our ArchitectureView component
const ArchitectureView = () => {
const [zoomLevel, setZoomLevel] = React.useState(1);

const DrawBox = ({ x, y, width, height, label, color = '#B0C4DE', fontSize = 16 }) => (
<g>
<rect
x={x}
y={y}
width={width}
height={height}
fill={color}
stroke="black"
strokeWidth="2"
rx="5"
/>
<text
x={x + width/2}
y={y + height/2}
textAnchor="middle"
dominantBaseline="middle"
fontSize={fontSize}
>
{label}
</text>
</g>
);

const DrawArrow = ({ x1, y1, x2, y2, label }) => (
<g>
<line
x1={x1}
y1={y1}
x2={x2}
y2={y2}
stroke="black"
strokeWidth="2"
markerEnd="url(#arrowhead)"
markerStart="url(#arrowhead)"
/>
{label && (
<text
x={(x1 + x2)/2}
y={(y1 + y2)/2}
textAnchor="middle"
dominantBaseline="middle"
fontSize={14}
>
{label}
</text>
)}
</g>
);

const renderLevel = () => {
switch(zoomLevel) {
case 1:
return (
<DrawBox
x={150}
y={100}
width={300}
height={200}
label="Clock"
fontSize={24}
/>
);

case 2:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
</g>
);

case 3:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
</g>
);

case 4:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
</g>
);

case 5:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
<DrawArrow x1={450} y1={300} x2={500} y2={300} label="I2C Bus" />
</g>
);

case 6:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
<DrawArrow x1={450} y1={300} x2={500} y2={300} label="I2C Bus" />
<DrawBox x={20} y={250} width={80} height={100} label="Buttons" />
</g>
);

case 7:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
<DrawArrow x1={450} y1={300} x2={500} y2={300} label="I2C Bus" />
<DrawBox x={20} y={250} width={80} height={100} label="Buttons" />
<DrawBox x={150} y={400} width={450} height={50} label="Power" color="#FFD700" />
</g>
);

case 8:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<DrawBox x={150} y={250} width={300} height={100} label="Microcontroller" />
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
<DrawArrow x1={450} y1={300} x2={500} y2={300} label="I2C Bus" />
<DrawBox x={20} y={250} width={80} height={100} label="Buttons" />
<DrawBox x={20} y={150} width={80} height={80} label="Speaker" />
<DrawBox x={150} y={400} width={450} height={50} label="Power" color="#FFD700" />
</g>
);

case 9:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<g>
<DrawBox x={150} y={250} width={300} height={100} label="" />
<DrawBox x={170} y={260} width={120} height={35} label="Core 1" color="#E6E6FA" />
<DrawBox x={170} y={305} width={120} height={35} label="Core 2" color="#E6E6FA" />
<text x={300} y={300} textAnchor="middle">Microcontroller</text>
</g>
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
<DrawArrow x1={450} y1={300} x2={500} y2={300} label="I2C Bus" />
<DrawBox x={20} y={250} width={80} height={100} label="Buttons" />
<DrawBox x={20} y={150} width={80} height={80} label="Speaker" />
<DrawBox x={150} y={400} width={450} height={50} label="Power" color="#FFD700" />
</g>
);

case 10:
return (
<g>
<DrawBox x={150} y={50} width={300} height={100} label="Display" />
<DrawArrow x1={300} y1={150} x2={300} y2={250} label="SPI Bus" />
<g>
<DrawBox x={150} y={250} width={300} height={100} label="" />
<DrawBox x={170} y={260} width={120} height={35} label="Core 1" color="#E6E6FA" />
<DrawBox x={170} y={305} width={120} height={35} label="Core 2" color="#E6E6FA" />
<DrawBox x={300} y={260} width={120} height={80} label="PIO" color="#E6E6FA" />
<text x={300} y={300} textAnchor="middle">Microcontroller</text>
</g>
<DrawBox x={500} y={250} width={100} height={100} label="RTC" />
<DrawArrow x1={450} y1={300} x2={500} y2={300} label="I2C Bus" />
<DrawBox x={20} y={250} width={80} height={100} label="Buttons" />
<DrawBox x={20} y={150} width={80} height={80} label="Speaker" />
<DrawBox x={150} y={400} width={450} height={50} label="Power" color="#FFD700" />
</g>
);

default:
return null;
}
};

return (
<div className="flex flex-col items-center w-full max-w-4xl mx-auto p-4">
<svg width="650" height="500" className="border border-gray-300">
<defs>
<marker
id="arrowhead"
markerWidth="10"
markerHeight="7"
refX="9"
refY="3.5"
orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="black" />
</marker>
</defs>
{renderLevel()}
</svg>
<div className="w-full mt-4 flex items-center gap-4">
<span className="text-sm">Zoom Level: {zoomLevel}</span>
<input
type="range"
min="1"
max="10"
value={zoomLevel}
onChange={(e) => setZoomLevel(parseInt(e.target.value))}
className="w-full"
/>
</div>
</div>
);
};

// Mount the component
ReactDOM.render(
<ArchitectureView />,
document.getElementById('root')
);
</script>
<!-- Put the following lines in your setup() function
const canvas = createCanvas(400, 400);
var mainElement = document.querySelector('main');
canvas.parent(mainElement);
-->
<main></main>
<a href="./">Back to Lesson Plan</a>
</body>
</html>
</html>
Loading

0 comments on commit c9c67af

Please sign in to comment.