Chilipeppr Advanced Usage

chilipeppr edited this page Jun 23, 2014 · 4 revisions

This page is a place holder to describe sending files over the network to a SPJS listener (BBB or Raspberrypi)

Hello World Widget

If you are going to create a new widget in ChiliPeppr, here's a Hello World widget to give you a very simple view of what the most basic widget looks like.


<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 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">
        <span class="panel-title" data-toggle="popover">Hello World</span>
    <div id="com-chilipeppr-widget-hello-body" class="panel-body">
        Hello World
    <div id="com-chilipeppr-widget-hello-ftr" class="panel-footer hidden">


// 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 " +;

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-hello", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-widget-hello",
        url: "",
        fiddleurl: "",
        name: "Widget / Hello",
        desc: "This widget is just a hello world example.",
        publish: {
        subscribe: {},
        foreignPublish: {
        foreignSubscribe: {
        init: function () {

            console.log( + " done loading.");
        forkSetup: function () {
            var topCssSelector = '#' +;
            $(topCssSelector + ' .panel-title').popover({
                content: this.desc,
                html: true,
                delay: 200,
                animation: true,
                trigger: 'hover',
                placement: 'auto'
            var that = this;
            chilipeppr.load("", function () {
                require(['inline:com-chilipeppr-elem-pubsubviewer'], function (pubsubviewer) {
                    pubsubviewer.attachTo($(topCssSelector + ' .panel-heading .dropdown-menu'), that);
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.