John1 - Edit and run Lua code with a multi-file editor. Save locally or upload/run remotely on the Lua device.
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-luaeditor |
| Name | Widget / Lua Editor for John1 |
| Description | John1 - Edit and run Lua code with a multi-file editor. Save locally or upload/run remotely on the Lua device. |
| chilipeppr.load() URL | http://raw.githubusercontent.com/johnlauer/widget-luaeditor/master/auto-generated-widget.html |
| Edit URL | http://ide.c9.io/johnlauer/widget-luaeditor |
| Github URL | http://github.com/johnlauer/widget-luaeditor |
| Test URL | https://preview.c9users.io/johnlauer/widget-luaeditor/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="myDivWidgetLuaeditor"><' + '/div>');
chilipeppr.load(
"#myDivWidgetLuaeditor",
"http://raw.githubusercontent.com/johnlauer/widget-luaeditor/master/auto-generated-widget.html",
function() {
// Callback after widget loaded into #myDivWidgetLuaeditor
// Now use require.js to get reference to instantiated widget
cprequire(
["inline:com-chilipeppr-widget-luaeditor"], // the id you gave your widget
function(myObjWidgetLuaeditor) {
// Callback that is passed reference to the newly loaded widget
console.log("Widget / Lua Editor for John1 just got loaded.", myObjWidgetLuaeditor);
myObjWidgetLuaeditor.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 |
|---|---|
| /com-chilipeppr-widget-luaeditor/loadScript | Publish an object of {name:"myfile.lua", content:"print(\"hello world\")"} and we will open a new tab with the contents of the file. |
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 |
|---|---|
| (No signals defined in this widget/element) | |
The table below shows, in order, the methods and properties inside the widget/element.
| Method / Property | Type | Description |
|---|---|---|
| id | string | "com-chilipeppr-widget-luaeditor" The ID of the widget. You must define this and make it unique. |
| name | string | "Widget / Lua Editor for John1" |
| desc | string | "John1 - Edit and run Lua code with a multi-file editor. Save locally or upload/run remotely on the Lua device." |
| url | string | "http://raw.githubusercontent.com/johnlauer/widget-luaeditor/master/auto-generated-widget.html" |
| fiddleurl | string | "http://ide.c9.io/johnlauer/widget-luaeditor" |
| githuburl | string | "http://github.com/johnlauer/widget-luaeditor" |
| testurl | string | "http://widget-luaeditor-johnlauer.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. |
| jscript | object | |
| editor | object | |
| init | function | function () |
| setupSubscribe | function | function () Setup subscribe so others can publish to us and ask us to open a file, i.e. the NodeMCU Files widget sends this to us. |
| loadScript | function | function (data) The method that receives the /loadScript publishes |
| loadPrevFiles | function | function () |
| getDeviceFileList | function | function () |
| aceId | string | "com-chilipeppr-luaeditor" The DOM ID of the element that should be the Ace Editor |
| aceSessionName | object | |
| aceSessions | object | |
| aceCurrentSession | object | |
| aceIsLoaded | boolean | |
| loadAce | function | function (sessionName) |
| fileNewCtr | number | |
| fileNew | function | function (evt) |
| createFileTab | function | function (id, filename) |
| onFileTabShow | function | function (e) |
| onFileTabClose | function | function (e) |
| renameFileNeedSaveAfter | boolean | |
| renameFileShow | function | function (evt) |
| renameFileHide | function | function (evt) |
| renameFile | function | function () |
| getActiveFile | function | function () |
| fileLocalSave | function | function (evt) |
| refreshFileList | function | function () Update the file pulldown to show the new files in localStorage. |
| fileLocalOpen | function | function (fi) |
| fileUploadAndRun | function | function (evt) |
| fileUpload | function | function (evt) |
| rawUploadAndRun | function | function (txt, filename) |
| fileDump | function | function (evt) |
| fileDelete | function | function (evt) |
| fileRun | function | function (evt) |
| cleanupFilename | function | function () |
| setupUploadRun | function | function () Setup the Upload -> Run button |
| onOpenUploadRunRegion | function | function (evt) |
| onCloseUploadRunRegion | function | function () |
| flashMsg | function | function (title, msg) |
| setupStartup | function | function () |
| editStartup | function | function (evt) |
| saveStartup | function | function (evt) |
| makeTextareaAcceptTabs | function | function () |
| sendCtr | number | Keep a counter so each send has its own ID so we can use jsonSend and get complete statuses back from SPJS when we send each line to the serial port. |
| send | function | function (txt) Send the script off to the serial port. |
| getScript | function | function () |
| runScript | function | function (macroStr, helpTxt) |
| jscriptKeypress | function | function (evt) |
| saveTemporaryFile | function | function (evt) |
| getTemporaryFile | function | function () |
| setScriptFromTemporaryFile | function | function () |
| showData | function | function (datatxt) |
| saveScript | function | function () |
| deleteRecentFiles | function | function () |
| createRecentFileEntry | function | function (fileStr, info) |
| buildRecentFileMenu | function | function () |
| loadFileFromLocalStorageKey | function | function (key) |
| resizeEditor | function | function () |
| resize | function | function () Resize the widget to the height of the window |
| loadJscript | function | function (txt) |
| setupSamples | function | function () |
| getMethodString | function | function (methodToGet) |
| autoAddMacros | object | |
| generateZigZag | function | function () This macro helps you generate a zig zag tool path inside of an overall rectangular shape. Give it the width and height of the rectangular shape. Then give it the step over value and it will generate the gcode and then send it to the workspace so you can visualize it and run it. This can be used to mill out or pocket a work piece. It can also be used to scan a laser over a surface to ablate or cure material by scanning back and forth with a step over. |
| sendSerial | function | function (gcode) |
| statEl | object | |
| status | function | function (txt) |
| forkSetup | function | function () Add the fork menu to upper right corner caret. |
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?