The node pico engine includes a developer UI consisting of a single page application written using React:
- the main page lets you see a visual representation of all of your picos, including their parent/child relationships and subscriptions as lines connecting them
- a detail page which lets you see information about one of your picos, organized into tabs
Although you can use the pico engine directly* from your own applications, you may find this developer UI useful to get things set up, and to have an independent view of your application's picos.
Assuming your pico engine is running on localhost
port 3000
, the page is located, at
http://localhost:3000/#/
Using the pico engine through the UI
Developer UI -- Subscriptions tab
*Using the pico engine directly
You can make requests to your engine over HTTP (using curl
in a linux shell, or Postman, or a browser location bar). For example, the request
http://localhost:3000/api/ui-context
will allow you to know which version of the pico engine you are running and give you an event channel identifier (ECI) for the engine's root pico, so that you can begin interacting with it programmatically. For example,
{"version":"1.0.2","eci":"ckj5q44eq00017a2rcvxs8evv"}
The pico engine installs three rulesets in the root pico : io.picolabs.wrangler
and io.picolabs.pico-engine-ui
. The first of these is required in every pico. The second is expected by the UI to be installed in every pico. The channel you are given has policies in place which allow you to send events that are handled by the io.picolabs.pico-engine-ui
ruleset, and to make queries to functions defined and shared by that same ruleset.
For example, a request like:
http://localhost:3000/sky/cloud/ckj5q44eq00017a2rcvxs8evv/io.picolabs.pico-engine-ui/box
will return information about the root pico:
{ "eci": "ckj5q44eq00017a2rcvxs8evv", "children": [ "ckj61req3000aor2r6p5k49zs", ... "ckja93fod000vuq2rfgn87l3a" ], "name": "Pico", "backgroundColor": "#87cefa", "x": 366, "y": 91, "width": 100, "height": 100 }
This will confirm the engine ui
channel of the pico (line 2), and give you the engine ui
channel for each of its direct children (lines 3-7), along with the pico's name (line 8), its background color, position and size in the UI.
To install a ruleset in the pico, use an event like this (here using the hello_world
ruleset as an example):
http://localhost:3000/sky/event/ckj5q44eq00017a2rcvxs8evv/none/engine_ui/install?url=https://raw.githubusercontent.com/Picolab/pico_lessons/master/hello_world.krl
Your ruleset could, upon installation, create a channel and return it to you in a directive, and you could then continue on to do other things, directly, without using the developer UI.
A command line UI
Some developers prefer using the command line. You can do this using the curl
command, or you can try pico-debug an experimental command line interface.