This example widget gives you a framework for creating your own widget. Please change this description once you fork this template and create your own widget. Make sure to run runme.js every time you are done editing your code so you can regenerate your README.md file, regenerate your auto-generated-widget.html, and automatically push your changes to Github.
All ChiliPeppr widgets/elements are defined using cpdefine() which is a method that mimics require.js. Each defined object must have a unique ID so it does not conflict with other ChiliPeppr widgets.
| Item | Value |
|---|---|
| ID | com-chilipeppr-widget-stlViewer |
| Name | Widget / stlViewer |
| Description | This example widget gives you a framework for creating your own widget. Please change this description once you fork this template and create your own widget. Make sure to run runme.js every time you are done editing your code so you can regenerate your README.md file, regenerate your auto-generated-widget.html, and automatically push your changes to Github. |
| chilipeppr.load() URL | http://raw.githubusercontent.com/raykholo/widget-stlViewer/master/auto-generated-widget.html |
| Edit URL | http://ide.c9.io/raykholo/widget-stlviewer |
| Github URL | http://github.com/raykholo/widget-stlViewer |
| Test URL | https://preview.c9users.io/raykholo/widget-stlviewer/widget.html |
You can use the code below as a starting point for instantiating this widget inside a workspace or from another widget. The key is that you need to load your widget inlined into a div so the DOM can parse your HTML, CSS, and Javascript. Then you use cprequire() to find your widget's Javascript and get back the instance of it.
// Inject new div to contain widget or use an existing div with an ID
$("body").append('<' + 'div id="myDivWidgetStlViewer"><' + '/div>');
chilipeppr.load(
"#myDivWidgetStlViewer",
"http://raw.githubusercontent.com/raykholo/widget-stlViewer/master/auto-generated-widget.html",
function() {
// Callback after widget loaded into #myDivWidgetStlViewer
// Now use require.js to get reference to instantiated widget
cprequire(
["inline:com-chilipeppr-widget-stlViewer"], // the id you gave your widget
function(myObjWidgetStlViewer) {
// Callback that is passed reference to the newly loaded widget
console.log("Widget / stlViewer just got loaded.", myObjWidgetStlViewer);
myObjWidgetStlViewer.init();
}
);
}
);This widget/element publishes the following signals. These signals are owned by this widget/element and are published to all objects inside the ChiliPeppr environment that listen to them via the chilipeppr.subscribe(signal, callback) method. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/
| Signal | Description |
|---|---|
| /com-chilipeppr-widget-stlViewer/onExampleGenerate | Example: Publish this signal when we go to generate gcode. |
This widget/element subscribes to the following signals. These signals are owned by this widget/element. Other objects inside the ChiliPeppr environment can publish to these signals via the chilipeppr.publish(signal, data) method. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/
| Signal | Description |
|---|---|
| (No signals defined in this widget/element) | |
This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/
| Signal | Description |
|---|---|
| (No signals defined in this widget/element) | |
This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/
| Signal | Description |
|---|---|
| /com-chilipeppr-widget-stlViewer/com-chilipeppr-elem-dragdrop/ondroppedSTL | We subscribe to this signal at a higher priority to intercept the signal, double check if it is an Eagle Brd file and if so, we do not let it propagate by returning false. That way the 3D Viewer, Gcode widget, or other widgets will not get Eagle Brd file drag/drop events because they will not know how to interpret them. |
The table below shows, in order, the methods and properties inside the widget/element.
| Method / Property | Type | Description |
|---|---|---|
| id | string | "com-chilipeppr-widget-stlViewer" The ID of the widget. You must define this and make it unique. |
| name | string | "Widget / stlViewer" |
| desc | string | "This example widget gives you a framework for creating your own widget. Please change this description once you fork this template and create your own widget. Make sure to run runme.js every time you are done editing your code so you can regenerate your README.md file, regenerate your auto-generated-widget.html, and automatically push your changes to Github." |
| url | string | "http://raw.githubusercontent.com/raykholo/widget-stlViewer/master/auto-generated-widget.html" |
| fiddleurl | string | "http://ide.c9.io/raykholo/widget-stlviewer" |
| githuburl | string | "http://github.com/raykholo/widget-stlViewer" |
| testurl | string | "http://widget-stlviewer-raykholo.c9users.io/widget.html" |
| publish | object | Please see docs above. Define the publish signals that this widget/element owns or defines so that other widgets know how to subscribe to them and what they do. |
| subscribe | object | Please see docs above. Define the subscribe signals that this widget/element owns or defines so that other widgets know how to subscribe to them and what they do. |
| foreignPublish | object | Please see docs above. Document the foreign publish signals, i.e. signals owned by other widgets or elements, that this widget/element publishes to. |
| foreignSubscribe | object | Please see docs above. Document the foreign subscribe signals, i.e. signals owned by other widgets or elements, that this widget/element subscribes to. |
| stlloader | object | The main object for this widget is the STL Loader so it is available in this property for all methods to refer to. |
| object | object | |
| init | function | function () All widgets should have an init method. It should be run by the instantiating code like a workspace or a different widget. |
| stlMasterObj | object | |
| stlMasterArr | object | |
| onGotNewStlFile | function | function (stlGeo, stlMesh, stlObj, info) //voodoo, I call this from stl.js' onGeometry(). It's like a hardcoded callback |
| getReadyToSlice | function | function () |
| setupSlicingParamUI | function | function () |
| paramElements | object | |
| buildSlic3rParamString | function | function () |
| createHtmlElements | function | function (inputJSON) //jQuery is fun |
| bindSlicingParam | function | function () |
| onParamChange | function | function (el, el2) |
| selectedParams | object | |
| getUniqueParamName | function | function (input) |
| combineInputDataTypes | function | function (value, ticked) |
| setupParamsFromLocalStorage | function | function () |
| saveParamsLocalStorage | function | function () When a user changes a value that is stored as an option setting, you should call this method immediately so that on next load the value is correctly set. |
| testCube | function | function () |
| smoothieIpAddress | object | |
| setupApiTab | function | function () |
| smoothiePostGcode | function | function () |
| btnSetup | function | function () Call this method from init to setup all the buttons when this widget is first loaded. This basically attaches click events to your buttons. It also turns on all the bootstrap popovers by scanning the entire DOM of the widget. |
| onResetParamBtnClick | function | function (evt) Call this method from init to setup all the buttons when this widget is first loaded. This basically attaches click events to your buttons. It also turns on all the bootstrap popovers by scanning the entire DOM of the widget. / btnSetup: function() { // Chevron hide/show body var that = this; $('#' + this.id + ' .hidebody').click(function(evt) { console.log("hide/unhide body"); if ($('#' + that.id + ' .panel-body').hasClass('hidden')) { // it's hidden, unhide that.showBody(evt); } else { // hide that.hideBody(evt); } }); // Ask bootstrap to scan all the buttons in the widget to turn // on popover menus $('#' + this.id + ' .btn').popover({ delay: 1000, animation: true, placement: "auto", trigger: "hover", container: 'body' }); // Init Say Hello Button on Main Toolbar // We are inlining an anonymous method as the callback here // as opposed to a full callback method in the Hello Word 2 // example further below. Notice we have to use "that" so // that the this is set correctly inside the anonymous method chilipeppr.publish( "/com-chilipeppr-elem-flashmsg/flashmsg", "Slicer Params", JSON.stringify(that.selectedParams, null, 2), 1000 ); }); // Init Hello World 2 button on Tab 1. Notice the use // of the slick .bind(this) technique to correctly set "this" // when the callback is called $('#' + this.id + ' .btn-helloworld2').click(this.onHelloBtnClick.bind(this)); $('#' + this.id + ' .btn-smoothieSendGcode').click(this.smoothiePostGcode.bind(this)); }, /* onRecv3dObject: function () { console.log ("received Object3D!"); if (this.sliceBtnWaitingForCallback == true) { var group = new THREE.Object3D();//create an empty container console.log ("waiting for and received Object3D!"); this.sliceBtnWaitingForCallback = false; } }, |
| sliceBtnWaitingForCallback | boolean | |
| onSliceBtnClick | function | function (evt) |
| onHelloBtnClick | function | function (evt) onHelloBtnClick is an example of a button click event callback |
| options | object | |
| setupUiFromLocalStorage | function | function () Call this method on init to setup the UI by reading the user's stored settings from localStorage and then adjust the UI to reflect what the user wants. |
| saveOptionsLocalStorage | function | function () When a user changes a value that is stored as an option setting, you should call this method immediately so that on next load the value is correctly set. |
| showBody | function | function (evt) Show the body of the panel. evt ({jquery_event}) - If you pass the event parameter in, we know it was clicked by the user and thus we store it for the next load so we can reset the user's preference. If you don't pass this value in we don't store the preference because it was likely code that sent in the param. |
| hideBody | function | function (evt) Hide the body of the panel. evt ({jquery_event}) - If you pass the event parameter in, we know it was clicked by the user and thus we store it for the next load so we can reset the user's preference. If you don't pass this value in we don't store the preference because it was likely code that sent in the param. |
| forkSetup | function | function () This method loads the pubsubviewer widget which attaches to our upper right corner triangle menu and generates 3 menu items like Pubsub Viewer, View Standalone, and Fork Widget. It also enables the modal dialog that shows the documentation for this widget. By using chilipeppr.load() we can ensure that the pubsubviewer widget is only loaded and inlined once into the final ChiliPeppr workspace. We are given back a reference to the instantiated singleton so its not instantiated more than once. Then we call it's attachTo method which creates the full pulldown menu for us and attaches the click events. |
| setupDragDrop | function | function () |
| onDroppedSTL | function | function (data) |
| clear3dViewer | function | function () |
| init3d | function | function () |
| onInit3dSuccess | function | function () |
| obj3d | object | |
| obj3dmeta | object | |
| userCallbackForGet3dObj | object | |
| get3dObj | function | function (callback) |
| get3dObjCallback | function | function (data, meta) |
| is3dViewerReady | boolean | |
| mySceneGroup | object | |
| sceneReAddMySceneGroup | function | function () |
| sceneRemoveMySceneGroup | function | function () |
| sceneAdd | function | function (obj) |
| sceneRemove | function | function (obj) |
| bind | function | function (dropDomElemSelector, txtDomElemSelector) |
| parseStlBinary | function | function (stl) //this is from jsstl. we have a failure on the new DataView |
ChiliPeppr is a hardware fiddle, meaning it is a website that lets you easily create a workspace to fiddle with your hardware from software. ChiliPeppr provides a Serial Port JSON Server that you run locally on your computer, or remotely on another computer, to connect to the serial port of your hardware like an Arduino or other microcontroller.
You then create a workspace at ChiliPeppr.com that connects to your hardware by starting from scratch or forking somebody else's workspace that is close to what you are after. Then you write widgets in Javascript that interact with your hardware by forking the base template widget or forking another widget that is similar to what you are trying to build.
ChiliPeppr is massively capable such that the workspaces for TinyG and Grbl CNC controllers have become full-fledged CNC machine management software used by tens of thousands.
ChiliPeppr has inspired many people in the hardware/software world to use the browser and Javascript as the foundation for interacting with hardware. The Arduino team in Italy caught wind of ChiliPeppr and now ChiliPeppr's Serial Port JSON Server is the basis for the Arduino's new web IDE. If the Arduino team is excited about building on top of ChiliPeppr, what will you build on top of it?