Developer UI



The node pico engine includes a developer UI consisting of a single page application written using React:

  1. 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

  2. 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

1 http://localhost:3000/#/

Using the pico engine through the UI

Developer UI -- main page

Developer UI -- Logging tab

Developer UI -- Testing tab

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

1 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, 

1 {"version":"1.0.2","eci":"ckj5q44eq00017a2rcvxs8evv"}


The pico engine installs the following rulesets in the root pico:

  1. io.picolabs.wrangler - provides an operating system or the pico and includes functions and rules that make interacting with the pico more convenient.

  2. io.picolabs.subscription - provides functions and rules that support pico-to-pico bi-directional subscriptions.

  3. io.picolabs.pico-engine-ui - provides an API for the engine UI.

The ui channel has policies in place which allow the UI application 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:

1 http://localhost:3000/sky/cloud/ckj5q44eq00017a2rcvxs8evv/io.picolabs.pico-engine-ui/box

will return information about the root pico:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "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):

1 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.