Widget / Hello World

This widget is just a Hello World example.

by chilipeppr

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="com-chilipeppr-widget-hello" class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group">
            </div>
            <div class="btn-group">
                <div class="dropdown">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                
                </ul>
                </div>
            </div>
        </div>
        <span class="panel-title" data-toggle="popover">Hello World</span>
    </div>
    <div id="com-chilipeppr-widget-hello-body" class="panel-body">
        Hello World inside the body of the widget.
        
    </div>
    <div id="com-chilipeppr-widget-hello-ftr" class="panel-footer hidden">
</div>

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-hello"], function (hello) {
    console.log("test running of " + hello.id);
    hello.init();

    setTimeout(function() {
        chilipeppr.publish("/com-chilipeppr-widget-serialport/ws/onconnect", "");
    }, 1000);
    
    setTimeout(function() {
        var obj = {
            ws: "ws://192.168.1.7:8989/ws", 
            port: "COM22", 
            dataline: '{"r":{"fb":380.08,"f":[1,0,10,2393]}}\n'
        };
        chilipeppr.publish("/com-chilipeppr-widget-serialport/recvline", obj);
    }, 2000);
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-hello", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-hello",
        url: "http://fiddle.jshell.net/chilipeppr/K9f3m/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/K9f3m/",
        name: "Widget / Hello World",
        desc: "This widget is just a Hello World example.",
        publish: {
        },
        subscribe: {},
        foreignPublish: {
        },
        foreignSubscribe: {
        },
        init: function () {

            this.forkSetup();

            // we want to know when the serial port connects
            chilipeppr.subscribe("/com-chilipeppr-widget-serialport/ws/onconnect", this, function() {
                console.log("we got the onconnect signal");
                $('#com-chilipeppr-widget-hello-body').append("<div>We got the /ws/onconnect signal. " + new Date().toLocaleString() + "</div>");
                
                // when the serial port sends data back, i must be subscribed
                // or this widget won't see it
                // we want to look for {"r":{"fb":380.08,"f":[1,0,10,2393]}}
                chilipeppr.subscribe(
                    '/com-chilipeppr-widget-serialport/recvline', this, 
                    function(data) {
                        console.log("HELLO WORLD: i...