Packages

zotonic_mod_base

1.0.0-d1
1.0.0-rc.17 1.0.0-rc.15 1.0.0-rc.14 1.0.0-rc.13 1.0.0-rc.12 1.0.0-rc.11 1.0.0-rc.10 1.0.0-rc.9 1.0.0-rc.8 1.0.0-rc.7 1.0.0-rc.6 1.0.0-rc.5 1.0.0-rc.4 1.0.0-rc.3 1.0.0-rc.2 1.0.0-rc.1 1.0.0-rc.0 1.0.0-d1 1.0.0-alpha.8

Basic scomps, actions and validators

HexDocs

Current section

Files

Jump to
Readme
19 Versions
1 Dependency
Dependants
Files
Activity
zotonic_mod_base priv lib-src cotonic examples js_clock.html
Raw

priv/lib-src/cotonic/examples/js_clock.html 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>SVG Clock</title>

        <style>

            #root {

                margin:auto;

                max-width:600px;

                width:100%;

            }

        </style>

    </head>

    <body>

        <div id="root">

          <!-- The svg can be placed as is.  -->

          <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

            <g transform="translate(150,150)">

                <g>

                    <circle fill="none" r="108" stroke="gray" stroke-width="4"></circle>

                    <circle fill="none" r="97" stroke="black" stroke-dasharray="4,46.789082" stroke-width="11" transform="rotate(-1.5)"></circle>

                    <circle fill="none" r="100" stroke="black" stroke-dasharray="2,8.471976" stroke-width="5" transform="rotate(-.873)"></circle>

                </g>

                <g id="hands" transform="rotate(180)">

                    <g id="hour"></g>

                    <g id="minute"></g>

                    <g id="second"></g>

                </g>

            </g>

          </svg>

        </div>



        <script type="text/javascript" src="../lib/incremental-dom.js"></script>

        <script type="text/javascript" src="../src/cotonic.tokenizer.js"></script>

        <script type="text/javascript" src="../src/cotonic.idom.js"></script>

        <script type="text/javascript" src="../src/cotonic.ui.js"></script>



        <script>

            function second_hand(date) {

                const angle = date.getSeconds() * 6;



                // Return svg snippet

                return `<g transform="rotate(${angle})">

                    <line stroke="red" stroke-linecap="round" stroke-width="2" y1="-20" y2="102"></line>

                    <circle fill="blue" r="4"></circle>

                </g>`;

            }



            function minute_hand(date) {

                const angle = date.getMinutes() * 6;



                return `<g transform="rotate(${angle})">

                    <line opacity=".9" stroke="green" stroke-linecap="round" stroke-width="4" y2="93"></line>

                    <circle fill="red" r="6"></circle>

                </g>`;

            }



            function hour_hand(date) {

                const angle = (date.getHours() % 12) * 30 + date.getMinutes() / 2;



                return `<g transform="rotate(${angle})">

                    <line opacity=".5" stroke="blue" stroke-linecap="round" stroke-width="5" y2="75"></line>

                    <circle r="7"></circle>

                </g>`;

            }



                

            function init() {

                let date = new Date();

                cotonic.ui.insert("second", true, second_hand(date), 10);

                cotonic.ui.insert("minute", true, minute_hand(date), 10);

                cotonic.ui.insert("hour", true, hour_hand(date), 10);

            }



            /* Update the clock every second */

            setInterval(function() {

                let date = new Date();

                cotonic.ui.update("second", second_hand(date));

                cotonic.ui.update("minute", minute_hand(date));

                cotonic.ui.update("hour", hour_hand(date));

            }, 1000);



            /* The rendering itself can be done separately */

            init()



        </script>

    </body>

</html>