A web component for viewing Microsim images.

If you don't have node and/or gh installed run brew install node gh.

Clone this repo (or fork it and clone your fork), cd in this project directory, and run:

gh repo clone tlambert03/microsim-web-component  # or your fork
cd microsim-web-component
npm install

Now, to run the development server with hot-reloading, run:

npm run dev

This will open http://localhost:5173/ in your browser.

Maintainers can create a new release by clicking the button below:

Click Run workflow, enter a version tag (e.g., v1.0.0), and the built files will be attached to a new GitHub release.

To embed the microsim-viewer web component in your HTML page, include the following snippet in your HTML file, replacing vX.Y.Z with the desired version number:

<microsim-viewer></microsim-viewer>
<script type="module" src="https://cdn.jsdelivr.net/gh/tlambert03/microsim-web-component@vX.Y.Z/dist/microsim-viewer.js"></script>

<div data-component="microsim-viewer"></div>
<script type="module" src="https://cdn.jsdelivr.net/gh/tlambert03/microsim-web-component@vX.Y.Z/dist/microsim-viewer.js"></script>

• Component not loading: Check browser console for errors. Ensure your hosting server allows cross-origin requests. Open an issue.

• index.html - Entry point for testing the component
• src/microsim-viewer.js - Lit web component with slider and image display
• src/public/images/ - Pre-generated images loaded by viewer
• package.json - Javascript dependencies and metadata
• pyproject.toml - Python dependencies and metadata
• vite.config.js - Dev server configuration
• scripts/ - Python scripts for image generation