The Console widget lets you see the serial port log as well as send serial port commands into the selected serial port in the SPJS widget (the green one). There is a filter feature you can toggle in case your serial device sends large amounts of data that can overwhelm the user, but that you occasionally want to view by toggling the funnel. The console also lets you jump to previous commands using the up/down arrows in the input textbox.
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-spconsole |
| Name | Widget / Serial Port Console v1.7 |
| Description | The Console widget lets you see the serial port log as well as send serial port commands into the selected serial port in the SPJS widget (the green one). There is a filter feature you can toggle in case your serial device sends large amounts of data that can overwhelm the user, but that you occasionally want to view by toggling the funnel. The console also lets you jump to previous commands using the up/down arrows in the input textbox. |
| chilipeppr.load() URL | http://raw.githubusercontent.com/chilipeppr/widget-console/master/auto-generated-widget.html |
| Edit URL | http://ide.c9.io/chilipeppr/widget-console |
| Github URL | http://github.com/chilipeppr/widget-console |
| Test URL | https://preview.c9users.io/chilipeppr/widget-console/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="myDivWidgetSpconsole"><' + '/div>');
chilipeppr.load(
"#myDivWidgetSpconsole",
"http://raw.githubusercontent.com/chilipeppr/widget-console/master/auto-generated-widget.html",
function() {
// Callback after widget loaded into #myDivWidgetSpconsole
// Now use require.js to get reference to instantiated widget
cprequire(
["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget
function(myObjWidgetSpconsole) {
// Callback that is passed reference to the newly loaded widget
console.log("Widget / Serial Port Console v1.7 just got loaded.", myObjWidgetSpconsole);
myObjWidgetSpconsole.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 |
|---|---|
| (No signals defined in this widget/element) | |
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 |
|---|---|
| /com-chilipeppr-widget-spconsole/com-chilipeppr-widget-serialport/send | (High-level mode) When the user types a command, we send this signal so the serial port widget can pass the command along to the serial port server. This is the high-level send command that is used when in single port mode where we can ignore which serial port we are sending to and let the serial port widget figure it out. To get into this mode you must call init(true) to put this widget into singlePortMode. Optionally you can also call setSinglePortMode(). |
| /com-chilipeppr-widget-spconsole/com-chilipeppr-widget-serialport/ws/send | (Low-level mode) When the user types in a command, we send it to the serial port widget. This is the low-level command where we have to specify the serial port and the command. This happens in non-single port mode. When in single port mode, we do not send commands on this signal. We instead send a /com-chilipeppr-widget-serialport/send signal because we can then let the serial port widget decide which serial port to send to. |
| /com-chilipeppr-widget-spconsole/com-chilipeppr-widget-serialport/getlist | (Low-level mode) When in low-level mode we must request the serial port list from the serial port widget so we can show the user which port to pick. When in single port mode, we do not use this signal because we do not have to worry about which port we are sending on. |
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-spconsole/com-chilipeppr-widget-serialport/recvline | (High-level mode) When in high-level mode, i.e. setSinglePortMode(), this is the signal we receive incoming serial data on. This signal sends us data in a per-line format so we do not have to piece the data together like we do in low-level mode. |
| /com-chilipeppr-widget-spconsole/com-chilipeppr-widget-serialport/ws/recv | (Low-level mode) When in low-level mode, this is the signal we receive the incoming serial data on. We will have to filter which data we want to show based on the port the user bound this widget to because we will get data for all connected serial ports including ones we do not want data for. It is up to this widget to decide what to show. |
| /com-chilipeppr-widget-spconsole/com-chilipeppr-widget-serialport/list | (Low-level mode) We subscribe to this signal so we know what the list of serial ports is, so we can ask the user to bind this widget to the correct serial port. This is useful if you are instantiating this widget a couple of times or opening multiple serial ports for your app and you just want this specific widget to bind to a particular serial port. This is considered low-level mode because you have more work to do. This widget then must also send the commands using the /com-chilipeppr-widget-serialport/ws/send publish signal and specify the port and command when sending. |
The table below shows, in order, the methods and properties inside the widget/element.
| Method / Property | Type | Description |
|---|---|---|
| id | string | "com-chilipeppr-widget-spconsole" |
| url | string | "http://raw.githubusercontent.com/chilipeppr/widget-console/master/auto-generated-widget.html" |
| fiddleurl | string | "http://ide.c9.io/chilipeppr/widget-console" |
| githuburl | string | "http://github.com/chilipeppr/widget-console" |
| testurl | string | "http://widget-console-chilipeppr.c9users.io/widget.html" |
| name | string | "Widget / Serial Port Console v1.7" |
| desc | string | "The Console widget lets you see the serial port log as well as send serial port commands into the selected serial port in the SPJS widget (the green one). There is a filter feature you can toggle in case your serial device sends large amounts of data that can overwhelm the user, but that you occasionally want to view by toggling the funnel. The console also lets you jump to previous commands using the up/down arrows in the input textbox." |
| foreignPublish | object | Please see docs above. |
| foreignSubscribe | object | Please see docs above. |
| portBoundTo | object | |
| portIsBound | boolean | |
| isSinglePortMode | boolean | |
| isInitted | boolean | |
| init | function | function (isSinglePortMode, filterRegExp) |
| setupRegexpEditButtons | function | function () |
| filterRegExp | object | |
| isFilterActive | boolean | |
| setFilter | function | function (filterRegExp) |
| getFilter | function | function () |
| setupClearBtn | function | function () |
| onClear | function | function (evt) |
| setupPauseBtn | function | function () |
| isPaused | boolean | |
| onPause | function | function (evt) |
| isPasteSetup | boolean | |
| setupOnPaste | function | function () |
| onPaste | function | function (evt) |
| isInJsonMode | boolean | |
| isAlreadySubscribeToRecvLine | boolean | |
| setSinglePortMode | function | function () |
| setupJsonMode | function | function () |
| unsetupJsonMode | function | function () |
| jsonOnSend | function | function (data) |
| jsonOnQueue | function | function (data) |
| jsonOnWrite | function | function (data) |
| jsonOnComplete | function | function (data) |
| onRecvLine | function | function (data) |
| onEchoOfSend | function | function (data) |
| setupResizeable | function | function () |
| subscribeSetup | function | function () |
| onRecvSingleSelectPort | function | function (data) |
| onPortList | function | function (ports) |
| resizePtr | object | |
| resize | function | function () |
| resizeCallback | function | function () |
| resizerSetup | function | function () |
| forkSetup | function | function () |
| btnBarSetup | function | function () |
| history | object | |
| historyLastShownIndex | object | |
| pushOntoHistory | function | function (cmd) |
| onHistoryMenuClick | function | function (evt) |
| globalCmdCtr | number | |
| consoleSetup | function | function () |
| jumpCursorToEnd | function | function (myelem) |
| isAlreadySubscribedToWsRecv | boolean | |
| dataBuffer | string | |
| consoleSubscribeToLowLevelSerial | function | function () |
| appendLogEchoCmd | function | function (msg) |
| logSetup | function | function () |
| logEls | object | |
| appendLog | function | function (msg) |
| serialConsoleSaveCookie | function | function (portname) |
| serialConsoleGetCookie | function | function (portname) |
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?