<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Workspace / Sample</title>
<!-- ChiliPeppr is based on bootstrap CSS. -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
ChiliPeppr's dependency system works as it's based on require.js. -->
<script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
<style type='text/css'>
/* Workspace CSS */
.sample {
border:2px silver dashed;
border-radius:4px;
padding:10px;
}
.com-chilipeppr-ws-hdr {
padding:10px 15px;
}
.col-pad10 {
padding-left:5px;
padding-right:5px;
}
.col-nopadrt {
padding-right:0;
}
.col-nopadleft {
padding-left:0;
}
/* Feel free to remove this css tag to change the margin below the widgets */
.well, div.panel.panel-default {
margin-bottom:10px;
}
.billboard-content {
padding: 6px 20px;
}
.billboard-title {
margin-bottom:6px;
}
.billboard-url {
/* font-size: 9px; */
padding-top:0px;
margin-bottom:6px;
font-size:12px;
}
.billboard-img {
border:0px solid red;
border-radius: 5px;
position: relative;
width:100%;
height:160px;
background-position: center;
background-size: cover;
}
.billboard-imgcontain {
border:0px solid red;
position: relative;
}
.billboard-stats {
position: absolute;
top: 4px;
left: 10px;
}
.billboard-desc {
/* font-size:11px; */
}
.billboard-detail-title {
font-weight: bold;
}
.billboard-stats2 {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 4px 10px 10px 10px;
background-color: rgba(255, 255, 255, 0.5);
}
</style>
<script type='text/javascript'>
//<![CDATA[
/* global cpdefine chilipeppr cprequire */
cprequire_test(["inline:com-chilipeppr-workspace-sample"], function(ws) {
console.log("initting workspace");
/**
* The Root workspace (when you see the ChiliPeppr Header) auto Loads the Flash
* Widget so we can show the 3 second flash messages. However, in test mode we
* like to see them as well, so just load it from the cprequire_test() method
* so we have similar functionality when testing this workspace.
*/
var loadFlashMsg = function() {
chilipeppr.load("#com-chilipeppr-widget-flash-instance",
"http://raw.githubusercontent.com/chilipeppr/element-flash/master/auto-generated-widget.html",
// "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",
function() {
console.log("mycallback got called after loading flash msg module");
cprequire(["inline:com-chilipeppr-elem-flashmsg"], function(fm) {
//console.log("inside require of " + fm.id);
fm.init();
});
}
);
};
loadFlashMsg();
// Init workspace
ws.init();
// Do some niceties for testing like margins on widget and title for browser
$('title').html("Sample Workspace");
$('body').css('padding', '10px');
} /*end_test*/ );
// This is the main definition of your widget. Give it a unique name.
cpdefine("inline:com-chilipeppr-workspace-sample", ["chilipeppr_ready"], function() {
return {
/**
* The ID of the widget. You must define this and make it unique.
*/
id: "com-chilipeppr-workspace-sample", // Make the id the same as the cpdefine id
name: "Workspace / Sample", // The descriptive name of your widget.
desc: `A ChiliPeppr Workspace sample.`,
url: "http://raw.githubusercontent.com/chilipeppr/workspace-sample/master/auto-generated-workspace.html", // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
fiddleurl: "http://ide.c9.io/chilipeppr/workspace-sample", // The edit URL. This can be auto-filled by runme.js in Cloud9 if you'd like, or just define it on your own to help people know where they can edit/fork your widget
githuburl: "http://github.com/chilipeppr/workspace-sample", // The backing github repo
testurl: "http://workspace-sample-chilipeppr.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
/**
* Contains reference to the Console widget object. Hang onto the reference
* so we can resize it when the window resizes because we want it to manually
* resize to fill the height of the browser so it looks clean.
*/
widgetConsole: null,
/**
* Contains reference to the Serial Port JSON Server object.
*/
widgetSpjs: null,
/**
* The workspace's init method. It loads the all the widgets contained in the workspace
* and inits them.
*/
init: function() {
// Most workspaces will instantiate the Serial Port JSON Server widget
this.loadSpjsWidget();
// Most workspaces will instantiate the Serial Port Console widget
this.loadConsoleWidget(function() {
setTimeout(function() { $(window).trigger('resize'); }, 100);
});
this.loadTemplateWidget();
// Create our workspace upper right corner triangle menu
this.loadWorkspaceMenu();
// Add our billboard to the menu (has name, url, picture of workspace)
this.addBillboardToWorkspaceMenu();
// Setup an event to react to window resize. This helps since
// some of our widgets have a manual resize to cleanly fill
// the height of the browser window. You could turn this off and
// just set widget min-height in CSS instead
this.setupResize();
setTimeout(function() { $(window).trigger('resize'); }, 100);
},
/**
* Returns the billboard HTML, CSS, and Javascript for this Workspace. The billboard
* is used by the home page, the workspace picker, and the fork pulldown to show a
* consistent name/image/description tag for the workspace throughout the ChiliPeppr ecosystem.
*/
getBillboard: function() {
var el = $('#' + this.id + '-billboard').clone();
el.removeClass("hidden");
el.find('.billboard-desc').text(this.desc);
return el;
},
/**
* Inject the billboard into the Workspace upper right corner pulldown which
* follows the standard template for workspace pulldown menus.
*/
addBillboardToWorkspaceMenu: function() {
// get copy of billboard
var billboardEl = this.getBillboard();
$('#' + this.id + ' .com-chilipeppr-ws-billboard').append(billboardEl);
},
/**
* Listen to window resize event.
*/
setupResize: function() {
$(window).on('resize', this.onResize.bind(this));
},
/**
* When browser window resizes, forcibly resize the Console window
*/
onResize: function() {
if (this.widgetConsole) this.widgetConsole.resize();
},
/**
* Load the Template widget via chilipeppr.load() so folks have a sample
* widget they can fork as a starting point for their own.
*/
loadTemplateWidget: function(callback) {
chilipeppr.load(
"#com-chilipeppr-widget-template-instance",
"http://raw.githubusercontent.com/chilipeppr/widget-template/master/auto-generated-widget.html",
function() {
// Callback after widget loaded into #myDivWidgetTemplate
// Now use require.js to get reference to instantiated widget
cprequire(
["inline:com-chilipeppr-widget-template"], // the id you gave your widget
function(myObjWidgetTemplate) {
// Callback that is passed reference to the newly loaded widget
console.log("Widget / Template just got loaded.", myObjWidgetTemplate);
myObjWidgetTemplate.init();
}
);
}
);
},
/**
* Load the Serial Port JSON Server widget via chilipeppr.load()
*/
loadSpjsWidget: function(callback) {
var that = this;
chilipeppr.load(
"#com-chilipeppr-widget-serialport-instance",
"http://raw.githubusercontent.com/chilipeppr/widget-spjs/master/auto-generated-widget.html",
// "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",
function() {
console.log("mycallback got called after loading spjs module");
cprequire(["inline:com-chilipeppr-widget-serialport"], function(spjs) {
//console.log("inside require of " + fm.id);
spjs.setSingleSelectMode();
spjs.init({
isSingleSelectMode: true,
defaultBuffer: "default",
defaultBaud: 115200,
bufferEncouragementMsg: 'For your device please choose the "default" buffer in the pulldown and a 115200 baud rate before connecting.'
});
//spjs.showBody();
//spjs.consoleToggle();
that.widgetSpjs - spjs;
if (callback) callback(spjs);
});
}
);
},
/**
* Load the Console widget via chilipeppr.load()
*/
loadConsoleWidget: function(callback) {
var that = this;
chilipeppr.load(
"#com-chilipeppr-widget-spconsole-instance",
"http://raw.githubusercontent.com/chilipeppr/widget-console/master/auto-generated-widget.html",
// "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/",
function() {
// Callback after widget loaded into #com-chilipeppr-widget-spconsole-instance
cprequire(
["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget
function(mywidget) {
// Callback that is passed reference to your newly loaded widget
console.log("My Console widget just got loaded.", mywidget);
that.widgetConsole = mywidget;
// init the serial port console
// 1st param tells the console to use "single port mode" which
// means it will only show data for the green selected serial port
// rather than for multiple serial ports
// 2nd param is a regexp filter where the console will filter out
// annoying messages you don't generally want to see back from your
// device, but that the user can toggle on/off with the funnel icon
that.widgetConsole.init(true, /myfilter/);
if (callback) callback(mywidget);
}
);
}
);
},
/**
* Load the workspace menu and show the pubsubviewer and fork links using
* our pubsubviewer widget that makes those links for us.
*/
loadWorkspaceMenu: function(callback) {
// Workspace Menu with Workspace Billboard
var that = this;
chilipeppr.load(
"http://raw.githubusercontent.com/chilipeppr/widget-pubsubviewer/master/auto-generated-widget.html",
// "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/",
function() {
require(['inline:com-chilipeppr-elem-pubsubviewer'], function(pubsubviewer) {
var el = $('#' + that.id + ' .com-chilipeppr-ws-menu .dropdown-menu-ws');
console.log("got callback for attachto menu for workspace. attaching to el:", el);
pubsubviewer.attachTo(
el,
that,
"Workspace"
);
if (callback) callback();
});
}
);
},
}
});
//]]>
</script>
</head>
<body>
<div id="com-chilipeppr-widget-flash-instance"></div>
<div id="com-chilipeppr-workspace-sample" class="xhidden">
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<!-- Change the width by adjusting col-md-4 to be col-md-3 for skinnier, or col-md-5 for wider -->
<!-- You must have all columns add up to 12 since we use bootstrap's col-md technique, i.e. col-md-2, col-md-7, col-md-3 adds to 12 -->
<div class="col-md-4 col-pad10">
<div class="com-chilipeppr-ws-hdr well">
Workspace - Sample
<div class="com-chilipeppr-ws-menu pull-right">
<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-ws xdropdown-menu-right" role="menu">
<li class="com-chilipeppr-ws-menu-billboard" style="width:350px;">
<!-- Billboard -->
<div class="com-chilipeppr-ws-billboard">
</div>
<!-- End Billboard -->
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="mywidget1-instance">
<p class="sample">Widget 1 goes here</p>
</div>
<div id="com-chilipeppr-widget-template-instance">
<p class="sample">Template Widget goes here</p>
</div>
<div id="com-chilipeppr-widget-spconsole-instance">
Serial Port Console goes here.
</div>
</div>
<!-- Center Column -->
<div class="col-md-5 col-pad10">
<div id="mywidget2-instance">
<p class="sample" style="min-height:200px;">Widget 2 goes here</p>
</div>
</div>
<!-- Right Column -->
<div class="col-md-3 col-pad10">
<div id="com-chilipeppr-widget-serialport-instance">
Widget 3 goes here
</div>
<div id="mywidget3-instance">
<p class="sample">Widget 3 goes here</p>
</div>
</div>
</div>
</div>
</div>
<!-- Keep this div hidden so it can be cloned and used by the Javascript -->
<div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
<div class="billboard-content">
<h4 class="billboard-title" style="">Sample Workspace</h4>
<p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
</p>
<div class="billboard-imgcontain" style="">
<a href="http://chilipeppr.com/sample">
<div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
</a>
<div class="billboard-stats2">
</div>
</div>
<p class="billboard-desc">
A ChiliPeppr Workspace that lets you do stuff.
</p>
</div>
</div>
</body>
</html>