com-chilipeppr-widget-xyz

This widget shows your XYZ position. It can also show your A position. You have jog controls and axis zeroing and homing.

ChiliPeppr Widget / XYZ Axes for Grbl

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-xyz
Name	Widget / XYZ Axes for Grbl
Description	This widget shows your XYZ position. It can also show your A position. You have jog controls and axis zeroing and homing.
chilipeppr.load() URL	http://raw.githubusercontent.com/chilipeppr-grbl/widget-grbl-xyz/master/auto-generated-widget.html
Edit URL	http://ide.c9.io/chilipeppr/widget-grbl-xyz
Github URL	https://github.com/chilipeppr-grbl/widget-grbl-xyz
Test URL	https://preview.c9users.io/chilipeppr/widget-grbl-xyz/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="myDivWidgetXyz"><' + '/div>');

chilipeppr.load(
  "#myDivWidgetXyz",
  "http://raw.githubusercontent.com/chilipeppr-grbl/widget-grbl-xyz/master/auto-generated-widget.html",
  function() {
    // Callback after widget loaded into #myDivWidgetXyz
    // Now use require.js to get reference to instantiated widget
    cprequire(
      ["inline:com-chilipeppr-widget-xyz"], // the id you gave your widget
      function(myObjWidgetXyz) {
        // Callback that is passed reference to the newly loaded widget
        console.log("Widget / XYZ Axes for Grbl just got loaded.", myObjWidgetXyz);
        myObjWidgetXyz.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
(No signals defined in this widget/element)

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
(No signals defined in this widget/element)

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-xyz/com-chilipeppr-widget-serialport/send	We publish to the serial port Gcode jog commands

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
/com-chilipeppr-widget-xyz/com-chilipeppr-interface-cnccontroller/axes	We want XYZA axis updates.
/com-chilipeppr-widget-xyz/com-chilipeppr-interface-cnccontroller/units	Deprecated. Not listening to this anymore. We want to know if the units changed for inch/mm.
/com-chilipeppr-widget-xyz/com-chilipeppr-interface-cnccontroller/plannerpause	We need to know when to pause sending jog cmds.
/com-chilipeppr-widget-xyz/com-chilipeppr-interface-cnccontroller/plannerresume	We need to know when to resume jog cmds.
/com-chilipeppr-widget-xyz/com-chilipeppr-widget-3dviewer/unitsChanged	Listenting to see if the 3D Viewer is telling us that the user Gcode is in a specific coordinate and then just assuming we will only be sent axes coordinate updates in that unit. Not using /com-chilipeppr-interface-cnccontroller/units anymore.

Methods / Properties

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

Method / Property	Type	Description
id	string	"com-chilipeppr-widget-xyz"
url	string	"http://raw.githubusercontent.com/chilipeppr-grbl/widget-grbl-xyz/master/auto-generated-widget.html"
fiddleurl	string	"http://ide.c9.io/chilipeppr/widget-grbl-xyz"
githuburl	string	"https://github.com/chilipeppr-grbl/widget-grbl-xyz"
testurl	string	"http://widget-grbl-xyz-chilipeppr.c9users.io/widget.html"
name	string	"Widget / XYZ Axes for Grbl"
desc	string	"This widget shows your XYZ position. It can also show your A position. You have jog controls and axis zeroing and homing."
publish	object	Please see docs above.
subscribe	object	Please see docs above.
foreignPublish	object	Please see docs above.
foreignSubscribe	object	Please see docs above.
init	function	function ()
initAs3dPrinting	function	function ()
setupShowHideWcsBtn	function	function ()
toggleWcs	function	function (evt)
setupShowHideTouchBtn	function	function ()
showHideTouchBtn	function	function ()
canvas	object
el	object
ctx	object
setupTouchArea	function	function ()
toggleTouchJog	function	function ()
canvasResize	function	function ()
drawText	function	function ()
isMouseDown	boolean
mouseLastOffset	object
onMouseDown	function	function (evt)
onMouseMove	function	function (evt)
onMouseUp	function	function (evt)
scrollPrev	object
scrollFadeTimer	object
scrollLastPosDir	string	"up"
onScroll	function	function (evt)
ongoingTouches	object
start	object
inZMode	boolean
handleStart	function	function (evt)
sendCtr	number
sendMove	function	function (touchid, prevpos, newpos)
sendDone	function	function ()
sendMoveZ	function	function (touchid, prevpos, newpos)
handleMove	function	function (evt)
handleEnd	function	function (evt)
handleCancel	function	function (evt)
colorForTouch	function	function (touch)
copyTouch	function	function (touch)
ongoingTouchIndexById	function	function (idToFind)
log	function	function (msg)
findPos	function	function (obj)
lastImage	object
fadeCanvas	function	function ()
fadeCtr	number
fadeCanvasStep	function	function ()
drawCircle	function	function (ctx, e)
toolbarSetup	function	function ()
bodyShowSmall	function	function ()
bodyShowNormal	function	function ()
options	object
setupUiFromCookie	function	function ()
saveOptionsCookie	function	function ()
pauseBtnIcon	object
isPausedByPlanner	boolean
onPlannerPause	function	function ()
onPlannerResume	function	function ()
toggleInMm	function	function ()
currentUnits	object
updateUnitsFromStatus	function	function (units)
axisx	object
axisy	object
axisz	object
axisa	object
axes	object
setupAxes	function	function ()
updateAxesFromStatus	function	function (axes)
lastVal	object
updateAxis	function	function (axis, val)
menuSetup	function	function ()
gotoZero	function	function (evt)
zeroOutAxisG28	function	function (evt)
zeroOutAxisG92	function	function (evt)
unzeroOutAxisG92	function	function (evt)
homeAxis	function	function (evt)
isAAxisShowing	boolean
showHideAxisA	function	function ()
btnSetup	function	function ()
jogFocusIndicate	function	function ()
jogFocusUnindicate	function	function ()
isInCustomMenu	boolean
customMenuSetVal	function	function (itemNum)
jogSetup	function	function ()
jogBtn	function	function (evt)
baseval	number
accelBaseval	number
customOrigVal	object
accelBaseValHilite	function	function (evt)
accelBaseValUnhilite	function	function ()
changeBaseVal	function	function (evt)
jog	function	function (direction, isFast, is100xFast, is1000xFast, is10000xFast)
initBody	function	function (evt)
toggleBody	function	function (evt)
showBody	function	function (evt)
hideBody	function	function (evt)
forkSetup	function	function ()

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?