plugin.html

<plugin>
    <div class="mobile-header">This is title for mobile devices</div>

    <div class="plugin-content">
        <h2>Plugin on the left side</h2>

        <p>
            Use left side window to present larger amount of information. Check
            the plugin in mobile phone display to see effect of
            'plugin-mobile-fullscreen' class
        </p>

        <p>This plugin also demonstrates:</p>

        <p>
            1) Receiving broadcasted messages. Open your console, to see
            console.log messages
        </p>

        <p>2) Using store to programatically change overlay</p>
    </div>
    <script>
        import bcast from '@windy/broadcast';
        import store from '@windy/store';

        let hasHooks = false,
            timer = null;

        let overlays = ['rain', 'wind', 'temp', 'clouds'],
            i = 0;

        const log = params =>
            console.log('Received "redrawFinished" bcast', params);

        //	this.onopen method is called when your plugin is being opened
        this.onopen = () => {
            if (hasHooks) {
                return;
            }

            // Change overlay programatically
            timer = setInterval(() => {
                i = i === 3 ? 0 : i + 1;
                store.set('overlay', overlays[i]);
            }, 2000);

            // Observe the change
            bcast.on('redrawFinished', log);

            hasHooks = true;
        };

        this.onclose = () => {
            if (hasHooks) {
                clearInterval(timer);

                bcast.off('redrawFinished', log);

                hasHooks = false;
            }
        };
    </script>
</plugin>