index.html

<link rel="stylesheet" type="text/css" href="barrel.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />


<script type="importmap">
    {
      "imports": {
        "picodash": "./dist/picodash-base.esm.js"
      }
    }
</script>

<script type="module" src="./dist/picodash-plugin-units-bundled.esm.js"></script>
<script type="module" src="./dist/picodash-plugin-confetti-bundled.esm.js"></script>


<script type="module">
    import picodash from "./dist/picodash-base.esm.js"

    var ds1 = new picodash.SimpleVariableDataSource("myDataSource", { step: 0.25 })
    await ds1.register()
    await ds1.pushData(10)


    var ds2 = new picodash.SimpleVariableDataSource("myDataSource2", {})
    await ds2.register()


    var ds3 = new picodash.SimpleVariableDataSource("demo1", {})
    await ds3.register()
    await ds3.pushData(0)

    var ds4 = new picodash.SimpleVariableDataSource("confetti", {})
    await ds4.register()
    await ds4.pushData(0)

    var count = [0]

    for (var i = 0; i < 100; i++) {
        ds2.pushData(count[0])
        count[0] += 1
    }
    setInterval(function () {
        ds2.pushData(count[0])
        count[0] += 1

    }, 2500)


    class Nop extends picodash.Filter {
        constructor(s, conf, prev) {
            // Prev can be undefined, the data source object,
            // Or the previous filter
            super(s, conf, prev)
        }

        async get(unfiltered) {
            // Convert from unfiltered to filtered
            return unfiltered
        }

        async set(val) {
            // Convert from filtered to unfiltered
            return val
        }
    }

    picodash.addFilterProvider('nop', Nop)
</script>


<main>
    <h2>Picodash Demo</h2>
    <section class="window margin">

        <div class="stacked-form">


            <label>Random Data(Fixed Point)
                <ds-span source="random:" filter="fixedpoint: 3"></ds-span>
            </label>

            <label>Random Data(nop filter does nothing)
                <ds-meter source="random:" filter="nop:" class="w-4rem"></ds-meter>
            </label>

            <label>Readonly Data
                <ds-input source="fixed:124.6779" filter="fixedpoint: 3"></ds-input>
            </label>

            <label>Two fields with same data source
                <ds-input type="number" source="myDataSource"></ds-input>
            </label>

            <label>Two fields with same data source
                <ds-input type="number" source="myDataSource"></ds-input>
            </label>

            <label>Same data source, but with multiplier x10 filter
                <ds-input type="number" source="myDataSource" filter="mult: 10"></ds-input>
            </label>


            <label>Multiplier x50 and offset +1000 filter stacked
                <ds-input type="number" source="myDataSource" filter="mult: 50 | offset: 1000"></ds-input>
            </label>

            <label>Trigger Buttons send an incrementing counter by default
                <ds-button source="myDataSource">Press Me!</ds-button>
            </label>

            <label>Scrolling log window(x5 multiplier filter)
                <ds-logwindow source="myDataSource2" filter="mult: 5" class="scroll max-h-12rem"></ds-logwindow>
            </label>
        </div>
    </section>

    <section class="window margin">

        <div class="stacked-form">


            <label>The confetti plugin puts confetti everywhere on changes.
                <ds-input source="confetti" filter="confetti:"></ds-input>
            </label>


            <label>Button can set this to a random value!
                <ds-span source="demo1" filter="fixedpoint: 3"></ds-span>
            </label>

            <p>The button uses source-pressed to set a specific value,
                which it gives the main source when pressed.
            </p>
            <p>
                We multiply the rand val by 100. Our filter stack is "fixedpoint: 1 | mult: 0.01".
            </p>
            <p>
                Note that the filters are the reverse
                order of what you'd think, because we're going from widget to source.
            </p>
            <p>Filters only apply to the primary source.</p>
            <label>
                <ds-button source="demo1" source-pressed="random:" filter="fixedpoint: 1 | mult: 0.01">Press
                    Me!</ds-button>
            </label>
        </div>
    </section>


    <script type="module">
        import picodash from "./dist/picodash-base.esm.js"
        let ds4 = new picodash.SimpleVariableDataSource('snackbar', {})
        ds4.register()

        let ds5 = new picodash.SimpleVariableDataSource('vib', {})
        ds5.register()
    </script>
    <section class="window margin">
        <div class="stacked-form">
            <p>When this value changes, put up a snackbar</p>
            <label>text

                <ds-input source="snackbar" filter="notify: You changed the value!"></ds-input>
            </label>

            <label>Vibrate on change with the vibrate: filter
                <ds-input source="vib" filter="vibrate:"></ds-input>
            </label>


            <label>Require confirmation
                <ds-input source="vib" filter="confirm: Really change value?"></ds-input>
            </label>
        </div>
    </section>



    <script type="module">
        import picodash from "./dist/picodash-base.esm.js"
        let p = new picodash.SimpleVariableDataSource('pt', {})
        p.register()


    </script>
    <section class="window margin">
        <div class="stacked-form">
            <p>The prompt: provider lets you ask the user questions.</p>
            <label>text
                <ds-input source="pt"></ds-input>
            </label>

            <label>Set Value
                <ds-button source="pt" source-pressed="prompt: enter a new value">Set value</ds-button>
            </label>

        </div>
    </section>

    <script type="module">
        import picodash from "./dist/picodash-base.esm.js"
        let p2 = new picodash.SimpleVariableDataSource('nav', {})
        p2.pushData([1, 2, 3, 4])
        p2.register()
    </script>

    <section class="window margin">
        <div class="stacked-form">
            <p>The nav: key filter lets you get or set just one element of an array or object.</p>
            <label>The json filter lets you work with lists and objects as json strings.
                <ds-input source="nav" filter="json:" disabled></ds-input>
            </label>

            <p>Just edits the third element</p>
            <label>Third Val
                <ds-input type="number" source="nav" filter="nav: 2"></ds-input>
            </label>

        </div>
    </section>

    <script type="module">
        import picodash from "./dist/picodash-base.esm.js"
        let p3 = new picodash.SimpleVariableDataSource('temp', { unit: "C" })
        p3.pushData(30)
        p3.register()

        let pb = new picodash.SimpleVariableDataSource('pb', {})
        pb.pushData(1)
        pb.register()
    </script>

    <section class="window margin">
        <div class="stacked-form">
            <p>The unit: filter converts to the given unit. It does nothing if the input data has no unit.</p>


            <label>ds-span auto-shows the unit
                <ds-span source="temp" filter="fixedpoint: 2"></ds-span>
            </label>

            <label>Degrees C
                <ds-input source="temp" filter="fixedpoint: 2"></ds-input>
            </label>


            <label>Degrees F
                <ds-input source="temp" filter="unit: F | fixedpoint: 2"></ds-input>
            </label>


            <label>Toggles push true/false but can take 0/1
                <ds-input type="checkbox" class="toggle" source="pb"></ds-input>
            </label>

            <label>Number inputs can take true/false
                <ds-input type="number" source="pb"></ds-input>
            </label>
        </div>
    </section>
</main>