This is the example app for the Fabmo platform. Fabmo is an intelligent fabrication platform that brings the concept of apps to the world of computer aided manufacturing. Fabmo apps (like this one) run right in the browser, but have access to CNC hardware to make tools work for developers.

If you're running this app on a tool, it provides a nice demo of tool functionality, but be careful, because these functions will actually drive the tool. If you're running this example by simply viewing it in a browser outside the fabmo dashboard, the fabmo.js module runs in simulation mode using javascript alerts to mock up the behavior of the dashboard without actually being connected to a tool. In this way, you can develop your apps with nothing but a web browser and a text editor, without being too concerned about communication with an actual tool until it's time to test.


This app is organized to be easy to read and to edit. The js directory contains a collection of individual javascript files, each of which corresponds to a tab in this view. If you are interested in the example on a particular tab, examine its HTML code in index.html and corresponding javascript functions in the .js file that corresponds to the tab name.


In the documentation for these examples, file and directory names are shown in this style while function and variable names look like this


Manually Controlling the Tool

For simple operations, G-Code can be executed immediately on the tool using the runGCode function. The example below collects a position from the user, and moves to the tool to that position when requested using the runGCode function.


Getting Tool Feedback

Fabmo provides status reports when the system status changes, or on request. Apps can subscribe to these notifications, and convey information about what's happening with the tool. If you are running this app on an actual Fabmo system, you can drive the tool around manually, and observe these numbers changing.


In the example above, the tool position will only be filled in once a status report is recieved from the tool. If you are running the app in simulation mode (outside the dashboard) these numbers will never be filled in.

Interacting with the Dashboard

The dashboard is the in-browser portion of the FabMo framework. Using fabmo.js you can interact with the dashboard as well as the tool directly.

Displaying the DRO

If you're going to manipulate the tool directly, you may wish to display the Digital ReadOut, or DRO. Although you can implement your own DRO using HTML/Javascript, it's probably better to use the dashboard's built-in DRO. To control display of the DRO, you use the showDRO and hideDRO functions.

Notifying the User

The dashboard has a built in notification system, which you can access using the notify function. Notifications can have several types including info success warning and error

Switching Apps

Sometimes it's appropriate for an app to hand control over to another app. A common example of this is jumping from the current app to the previewer, or editor, or job manager. Each app has an id, and apps can be launched by calling launchApp with the appropriate id. Only one app runs at a time, so be careful with the launchApp function. When you call it, you are exiting your app to launch another one!

Displaying Information

URL-accessible information (e.g. pages, PDFs, etc.) can be displayed using the fabmo.navigate(URL, {target}) function.

Check Online Status

You can check whether internet access is available using the fabmo.isOnline() function.

Tool online status: Unknown


Most of the time, rather than manipulating the tool directly, you will be interacting with it via the job manager. The job manager is like a "print queue" for the tool, managing work in the form of CAM data for the tool to run. The workflow of most apps will be to accept the user's input, use it to fill in some sort of parametric design, and post the G-Code resulting from the design process to the tool as a job.

If you're running this example in the dashboard, submitting a job will take you immediately to the job manager app, which shows your recently submitted job and gives you the option to run it. If you're viewing this app standalone in a browser, the dashboard library simulates the job submission by simply downloading the G-Code file.

Hole Cutter

The form below is a very simple parametric design: Given a few simple inputs, it cuts a circle. When the Cut Circle button is clicked, The G-code for the circle is generated with javascript, and submitted to the tool as a job using the submitJob function.



Fabmo supports several levels of configuration, and apps have access to the system-wide, their own app-specific configuration, as well as configuration that lives locally in the browser.

System Configuration

Each fabmo tool has a system-wide configuration tree, which can be retrieved using the getConfig function. The system-wide configuration is editable, and changes are persistent. The configuration of this system is shown below:

On a live Fabmo system, system configuration information would appear here.