uielements/min.html

<!DOCTYPE html>

<head>
    <title>Min</title>

    <script type="module" src="./uielements.html.js"></script>
    <link rel="stylesheet" href="./uielements.css" />
</head>

<body>

    <script type="module">
        // ====== Import uielements.js, only additional import needed ======

        import * as UI from './uielements.js'
        import elements from './minElements.js'

        // ====== The views2 code as-is ======

        import Animator from "https://code.agentscript.org/src/Animator.js"
        import TwoDraw from "https://code.agentscript.org/src/TwoDraw.js"
        import Model from "../models/MinModel.js"

        const model = new Model()
        model.setup()

        const view = new TwoDraw(model, {
            div: 'modelDiv',
            patchSize: 10,
            drawOptions: { turtlesSize: 2.5 }
        })

        const anim = new Animator(
            () => {
                model.step()
                view.draw()
            },
            500, // run for 500 steps
            30 // at 30 steps/second
        )

        // ====== Additional code for uielements usage ======

        anim.stop() // let uielements start/stop animator
        anim.setSteps(-1) // in case you want to run forever

        await UI.setAppState(model, view, anim) // connect model to uielements

        UI.createElements() // use minElements, editable
        // UI.createElements(elements, true) // use elements from file, editable
        // UI.createElements(elements) // use elements from file, not editable

        // console.log(JSON.stringify(elements));
    </script>

    <!-- <div id="modelDiv"></div>
    <div id="plotDiv"></div> -->
    <div id="modelDiv"></div>

</body>

</html>