Giter Club home page Giter Club logo

widget-spjs's Introduction

com-chilipeppr-widget-serialport

The essential widget if you want your workspace to talk to the Serial Port JSON Server (SPJS). This widget enables numerous pubsub signals so you can publish to SPJS and receive data back when you subscribe to the appropriate signals.

alt text

ChiliPeppr Widget / Serial Port JSON Server

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-serialport
Name Widget / Serial Port JSON Server
Description The essential widget if you want your workspace to talk to the Serial Port JSON Server (SPJS). This widget enables numerous pubsub signals so you can publish to SPJS and receive data back when you subscribe to the appropriate signals.
chilipeppr.load() URL http://raw.githubusercontent.com//DanalEstes/widget-spjs/master/auto-generated-widget.html
Edit URL http://ide.c9.io/danal/widget-spjs
Github URL http://github.com//DanalEstes/widget-spjs
Test URL https://preview.c9users.io/danal/widget-spjs/widget.html

Example Code for chilipeppr.load() Statement

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="myDivWidgetSerialport"><' + '/div>');

chilipeppr.load(
  "#myDivWidgetSerialport",
  "http://raw.githubusercontent.com//DanalEstes/widget-spjs/master/auto-generated-widget.html",
  function() {
    // Callback after widget loaded into #myDivWidgetSerialport
    // Now use require.js to get reference to instantiated widget
    cprequire(
      ["inline:com-chilipeppr-widget-serialport"], // the id you gave your widget
      function(myObjWidgetSerialport) {
        // Callback that is passed reference to the newly loaded widget
        console.log("Widget / Serial Port JSON Server just got loaded.", myObjWidgetSerialport);
        myObjWidgetSerialport.init();
      }
    );
  }
);

Publish

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-serialport/listSends the list of serial ports shown in this widget including the connect state so other widgets/elements in ChiliPeppr can use the list including knowing what serial ports to send/recv from. Send in /getList and get back a /list with the JSON payload of the list.
/com-chilipeppr-widget-serialport/listAfterMetaDataAddedSimilar to /list but the list will have meta data added to it like an image, or default baud rates, or a modified friendly name. It may even be marked as deleted for dual port scenarios where a port may be considered the 2nd port.
/com-chilipeppr-widget-serialport/ws/onconnectWhen the websocket connects. This widget currently supports only a single websocket. In the future, multiple websockets will be supported and a ws identifier will be attached. For now, you will receive the string "connected" in the payload. The 2nd parameter will be the websocket in case you need it like to retrieve the IP address of SPJS. For multiple websockets an additional parameter will be published with the ws:// url
/com-chilipeppr-widget-serialport/ws/ondisconnectWhen the websocket disconnects.
/com-chilipeppr-widget-serialport/ws/sysA system message. Mostly for visual display like an error.
/com-chilipeppr-widget-serialport/ws/recvA signal published when the websocket receives data from the serial port server. The serial port, i.e. COM21, the websocket identifier, and data are sent.
/com-chilipeppr-widget-serialport/onportopenPublished when the Serial Port JSON Server tells us a port was opened. This could happen from the user clicking to open, or if another browser or websocket client opens it, we will fire off this signal as well. The payload looks like {Cmd: "Open", Desc: "Got register/open on port.", Port: "COM22", Baud: 115200, BufferType: "tinyg"}
/com-chilipeppr-widget-serialport/onportclosePublished when the Serial Port JSON Server tells us a port was closed. This could happen from the user clicking to close, or if another browser, or SPJS, or websocket client closes it, we will fire off this signal. The payload looks like {Cmd: "Close", Desc: "Got unregister/close on port.", Port: "COM22", Baud: 115200}
/com-chilipeppr-widget-serialport/onportopenfailPublished when the Serial Port JSON Server tells us a port was attempting to be opened but failed for some reason. This could happen from the user clicking to open, or if another browser tries to open, but an error arose such as the port being locked by another process. The payload looks like {Cmd: "OpenFail", Desc: "Got error reading on port. ", Port: "COM22", Baud: 115200}
/com-chilipeppr-widget-serialport/recvlineWe publish this signal in tandem with /ws/recv but we only publish this signal per newline. That way your widget can consume per line data which is typically the way you want it. We recommend you subscribe to this channel instead of /ws/recv to have less work to do of looking for newlines. When in setSingleSelectMode() we will only send you data for the port that is selected (in green in UI). You will not get this signal for secondary ports that are open. For secondary ports, you need to subscribe to /ws/recv and do lower level parsing.
/com-chilipeppr-widget-serialport/recvVersionWe send you this back if you published a /requestVersion signal. This is so other widgets can pivot off of what version of Serial Port JSON Server is running. For example, the Arduino/Atmel programmer sends in a /requestVersion to get a callback on /recvVersion to determine if you are at version 1.83 or above to know whether you have the correct functionality.
/com-chilipeppr-widget-serialport/recvSingleSelectPortIn case any other widget/element wants to know what port is single selected (when in setSingleSelectMode()), they can send a signal to /requestSingleSelectPort and we'll respond back with this signal with an object like: { "Name": "COM22", "Friendly": "USB Serial Port (COM22)", "IsOpen": true, "Baud": 115200, "RtsOn": true, "DtrOn": false, "BufferAlgorithm": "tinyg", "AvailableBufferAlgorithms": [ "default", "tinyg", "dummypause" ], "Ver": 1.7 }. Will send back a null if no ports or no singleSelectPort is defined.
/com-chilipeppr-widget-serialport/onQueueThis signal is published when a command is queued on SPJS. Payload is {"Id":"123", "D":"G0 X1 ", "QCnt":1, "Port":"COM2"}. You get the data back because if another browser sent into the SPJS, you get that data reflected in other browsers which is important for synchronizing. See /jsonSend for more info.
/com-chilipeppr-widget-serialport/onWriteThis signal is published when a command is written to the serial port on SPJS. Payload is {"Id":"123", "QCnt":0, "Port":"COM2"}. The serial command is not reiterated in this signal like it is in /onQueue. See /jsonSend for more info.
/com-chilipeppr-widget-serialport/onCompleteThis signal is published when a command is done being written on SPJS and is known to have been processed by the serial device. Payload is {"Id":"123"}. Please note that sometimes /onComplete could come back before /onWrite due to the multi-threaded nature of serial ports and writing/reading as well as network congestion. See /jsonSend for more info.
/com-chilipeppr-widget-serialport/onErrorThis signal is published when a command produces an error in the CNC controller either due to a gcode syntax problem, or an unsupported gcode command. This signal can be used by the cnc-interface widget to handle for errors, or pause/cancel gcode execution so that the problem can be rectified.
/com-chilipeppr-widget-serialport/onBroadcastThis signal is published when we see a broadcast message come in from SPJS and we simply regurgitate it out on this signal for any widget to listen to. To send a broadcast signal into SPJS you just use the command "broadcast blah blah" and then SPJS re-broadcasts that to all listeners with a packet like {Cmd:"Broadcast", Msg:"blah blah"}. For example, the ShuttleXpress CNC jog shuttle connects to SPJS on its own and when you click buttons on the device it broadcasts them to SPJS so widgets inside ChiliPeppr can respond to those clicks.
/com-chilipeppr-widget-serialport/onAnnounceThis signal is published when we see an announce message come in from SPJS and we simply regurgitate it out on this signal for any widget to listen to. An announce signal is part of the Cayenn protocol. Basically an IoT device like an ESP8266 sends in a UDP broadcast to the network announcing its existence. SPJS listens for those and then sends a copy of the announcement to any SPJS listeners, like us. Then this SPJS widget publishes it out so other widgets inside ChiliPeppr can listen for the message.
/com-chilipeppr-widget-serialport/onFeedRateOverrideThis signal is published when we get a feed rate override update from SPJS. It will contain the payload similar to {"Cmd":"FeedRateOverride","Desc":"Providing you status of feed rate override.","Port":"COM7","FeedRateOverride":0,"IsOn":false}
/com-chilipeppr-widget-serialport/recvStatusSend in a /requestStatus and we will send you back a /recvStatus letting you know if SPJS is connected or not to the Serial Port JSON Server. The payload that comes to you in /recvStatus looks like {"Connected":true, "Websocket": ws } or {"connected":false, "websocket":null}. If you want to be pushed an event when the socket connects or disconnects you should subscribe to /ws/onconnect and /ws/ondisconnect

Subscribe

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-serialport/ws/sendThis widget subscribes to this signal so anybody can publish to SPJS by publishing here. You can send any command that SPJS supports. Please see the docs for all support SPJS commands on Github at https://github.com/chilipeppr/serial-port-json-server#supported-commands.

Example
chilipeppr.publish("/com-chilipeppr-widget-serialport/ws/send", "send COM22 G0 X0\n");

Example of sending non-buffered command
chilipeppr.publish("/com-chilipeppr-widget-serialport/ws/send", "sendnobuf /dev/ttyUSB0 M3 S1000\n");
/com-chilipeppr-widget-serialport/sendThis widget subscribes to this signal whereby you can simply send to this pubsub channel (instead of /ws/send which is lower level) and the widget will send to the default serial ports that you are connected to (the green highlight in the UI). Most serial devices expect newline characters, so you should send those in your string as this pubsub channel does not add them.

Example
chilipeppr.publish("/com-chilipeppr-widget-serialport/send", "G1 X10 F500\n");
/com-chilipeppr-widget-serialport/jsonSend

This signal is like /send but a more structured version where you can send us commands like {"D": "G0 X1 ", "Id":"123"} or an array like [{"D": "G0 X1 ", "Id":"123"}, {"D": "G0 X2 ", "Id":"124"}] and then this widget will send callback signals in order of /onQueue, /onWrite, /onComplete. The payload is {"Id":"123"} on each of those.

The SPJS has 3 steps to get your command to the serial device. Step 1 is /onQueue and this will come back immediately when SPJS has taken your command and queued it to memory/disk. Step 2 is /onWrite when SPJS actually has written your command to the serial device. If the device takes a while to execute the command it could be a bit of time until that command is physically executed. Step 3 is /onComplete which is SPJS attempting to watch for a response from the serial device to determine that indeed your command is executed. Please note /onComplete can come back prior to /onWrite based on your serial device and how fast it may have executed your serial command.

You can omit the Id if you do not care about tracking. You will get callbacks with an empty Id so you will not be able to match them up. If you send in /jsonSend {"D": "G0 X1 G0 X0 ", "Id":"123"} you will get back /onQueue [{"D":"G0 X1 ","Id":"123","Buf":"Buf"},{"D":"G0 X0 ","Id":"123-part-2-2","Buf":"Buf"}] because technically those are 2 commands with one Id. Some commands sent into Serial Port JSON Server get additional commands auto-added. For example, if you send in a command to TinyG that would put it in text mode, SPJS appends a command to put TinyG back in JSON mode. In those cases you will get parts added to your command and will see that in the response.

/com-chilipeppr-widget-serialport/getlistIn case any other widget/element wants to request the list at any time, they can send a signal to this channel and we'll respond back with a /list
/com-chilipeppr-widget-serialport/requestVersionSend in this signal to get back a /recvVersion. This is so other widgets can pivot off of what version of Serial Port JSON Server is running. For example, the Arduino/Atmel programmer sends in a /requestVersion to get a callback on /recvVersion to determine if you are at version 1.83 or above to know whether you have the correct functionality.
/com-chilipeppr-widget-serialport/requestSingleSelectPortIn case any other widget/element wants to know what port is single selected (when in setSingleSelectMode()), they can send a signal to this channel and we'll respond back with a /recvSingleSelectPort with an object like: { "Name": "COM22", "Friendly": "USB Serial Port (COM22)", "IsOpen": true, "Baud": 115200, "RtsOn": true, "DtrOn": false, "BufferAlgorithm": "tinyg", "AvailableBufferAlgorithms": [ "default", "tinyg", "dummypause" ], "Ver": 1.7 }. Will send back a null if no ports or no singleSelectPort is defined.
/com-chilipeppr-widget-serialport/requestFroSend in this signal to have this widget send in a request to SPJS for the Feed Rate Override status on the singleSelectPort, i.e. the port that is hilited green. This widget will send SPJS something like "fro COM7" and then the data will come back and a publish will occur on /onFeedRateOverride. If you send in an empty payload this will simply request the status. If you send in a float or integer it will actually set the Feed Rate Override multiplier to that value.
/com-chilipeppr-widget-serialport/requestStatusIf you want to request the connected/disconnected status of this widget, you can send this pubsub signal in and we will send you back the connected status in the /recvStatus signal. We will also include the websocket object in case you were interested in it. Please see docs for /recvStatus for further info.

Foreign Publish

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-serialport/com-chilipeppr-elem-flashmsg/flashmsgWe publish system messages from the serial port server to the flash message element to display informational messages to the user.
/com-chilipeppr-widget-serialport/com-chilipeppr-interface-cnccontroller/plannerpauseWe publish a planner pause if we see that the buffer count in the Serial Port JSON Server gets above 20,000.
/com-chilipeppr-widget-serialport/com-chilipeppr-interface-cnccontroller/plannerresumeWe publish a planner resume when we get back to 15,000.

Foreign Subscribe

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)

Methods / Properties

The table below shows, in order, the methods and properties inside the widget/element.

Method / Property Type Description
idstring"com-chilipeppr-widget-serialport"
namestring"Widget / Serial Port JSON Server"
descstring"The essential widget if you want your workspace to talk to the Serial Port JSON Server (SPJS). This widget enables numerous pubsub signals so you can publish to SPJS and receive data back when you subscribe to the appropriate signals."
urlstring"http://raw.githubusercontent.com//DanalEstes/widget-spjs/master/auto-generated-widget.html"
fiddleurlstring"http://ide.c9.io/danal/widget-spjs"
githuburlstring"http://github.com//DanalEstes/widget-spjs"
testurlstring"http://widget-spjs-danal.c9users.io/widget.html"
publishobjectPlease see docs above.
subscribeobjectPlease see docs above.
foreignPublishobjectPlease see docs above.
isWsConnectedboolean
hostobject
portlistobject
connobject
isSingleSelectModeboolean
singleSelectPortobject
buffertypeobject
defaultBaudobject
defaultOptionsobject
isInittedboolean
initfunctionfunction (host, buffertype, defaultBaud, buffertypeDescription)
setupSubnetScanfunctionfunction ()
setupRecentServerListfunctionfunction ()
showRecentServerListfunctionfunction ()
setupStatusPubSubfunctionfunction ()
onRequestStatusfunctionfunction ()
setupFroPubSubfunctionfunction ()
onRequestFrofunctionfunction (payload)
versionobject
versionFloatnumber
setupVersionPubSubfunctionfunction ()
onRequestVersionfunctionfunction ()
onVersionfunctionfunction (version)
resetVersionfunctionfunction ()
hideVersionfunctionfunction ()
resetSpjsNamefunctionfunction ()
onSpjsNamefunctionfunction (spjsName)
setupCloudServersfunctionfunction ()
onCloudServerClickfunctionfunction (evt)
showBufferEncouragementfunctionfunction ()
hideBufferEncouragementfunctionfunction ()
bufferEncouragementfunctionfunction (list, arg2)
publishSingleSelectPortfunctionfunction ()
onRemoteHostConnectfunctionfunction ()
setSingleSelectModefunctionfunction ()
getPortListCountnumber
getPortListfunctionfunction ()
btnBarSetupfunctionfunction ()
restartSpjsfunctionfunction ()
exitSpjsfunctionfunction ()
disconnectfunctionfunction ()
consoleTogglefunctionfunction ()
consoleClearfunctionfunction ()
statusTogglefunctionfunction ()
historyobject
historyLastShownIndexobject
pushOntoHistoryfunctionfunction (cmd)
onHistoryMenuClickfunctionfunction (evt)
consoleSetupfunctionfunction ()
logobject
logIsShowingboolean
appendLogOldfunctionfunction (msg)
appendLogEchoCmdfunctionfunction (msg)
logElsobject
appendLogfunctionfunction (msg)
sendbufobject
isSendBufWaitingboolean
sendBufferedfunctionfunction (msg)
sendBufferedDoNextfunctionfunction ()
sendBufferedOnWsRecvfunctionfunction (data)
sendbufjsonobject
isSendBufWaitingJsonboolean
clearBufferfunctionfunction ()
sendBufferedJsonfunctionfunction (msg)
sendBufferedDoNextJsonfunctionfunction ()
sendBufferedOnWsRecvJsonfunctionfunction (data)
sendFromConsolefunctionfunction (msg)
sendViaJsonfunctionfunction (json)
onQueuedJsonfunctionfunction (data)
onQueuedTextfunctionfunction (data)
onWriteJsonfunctionfunction (data)
onCompleteJsonfunctionfunction (data)
onErrorJsonfunctionfunction (data)
onBroadcastfunctionfunction (data)
onAnnouncefunctionfunction (data)
onFeedRateOverridefunctionfunction (data)
sendfunctionfunction (msg)
sendNoBuffunctionfunction (msg)
wsSendfunctionfunction (msg)
serialSaveCookiefunctionfunction (portname, baud, isrts, isdtr, buffer)
serialGetCookiefunctionfunction (portname)
serialConnectfunctionfunction (portname, baud, buffer)
serialDisconnectfunctionfunction (portname)
reconMsgShowfunctionfunction ()
reconMsgHidefunctionfunction ()
wsWasEverConnectedboolean
wsConnectfunctionfunction (hostname, onsuccess, onfail)
wsScanfunctionfunction (callback, subnet)
serverListSetfunctionfunction (key, val)
serverListGetfunctionfunction ()
lastMsgobject
lastMsgTimenumber
publishSysMsgfunctionfunction (msg)
deDupeLastMsgobject
isInDeDupeModeboolean
publishMsgfunctionfunction (msg)
dataBufferobject
onWsMessagefunctionfunction (msg)
configSendCtrnumber
onPortOpenfunctionfunction (data)
onPortClosefunctionfunction (data)
onPortOpenFailfunctionfunction (data)
toSafePortNamefunctionfunction (portname)
fromSafePortNamefunctionfunction (safeportname)
onPlannerResumeSetupfunctionfunction ()
onPlannerResumefunctionfunction ()
queueMaxobject
queueElsobject
sendPauseAtnumber
sendResumeAtnumber
isPlannerPausedboolean
onUpdateQueueCntfunctionfunction (data)
deviceMetaobject
setPortItemsFromMetaDatafunctionfunction (dm /*device meta*/, item /*port*/, portlistIndex)
isInittingboolean
onPortListfunctionfunction (portlist)
showAllPopoversfunctionfunction ()
hideAllPopoversfunctionfunction ()
onPortSetDefaultClickedfunctionfunction (evt)
onPortProgramClickedfunctionfunction (evt)
onPortConfigClickedfunctionfunction (evt)
onPortConfigModalSavefunctionfunction (evt)
currentUserobject
checkLoginfunctionfunction ()
getUserDataKeysFromChiliPepprStoragefunctionfunction ()
onCloudScriptFileClickedfunctionfunction (evt)
onPortFriendlyClickedfunctionfunction (evt)
onPortCbClickedfunctionfunction (evt)
bufferAlgorithmsobject
getBufferAlgorithmsfunctionfunction ()
getBaudRatesfunctionfunction ()
onWsConnectfunctionfunction (event)
onWsDisconnectfunctionfunction (event)
statusWatcherfunctionfunction ()
initBodyfunctionfunction (evt)
toggleBodyfunctionfunction (evt)
showBodyfunctionfunction (evt)
hideBodyfunctionfunction (evt)
forkSetupfunctionfunction ()

About ChiliPeppr

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.