Gadget 2025

This version of Gadget used a node-based scheme to allow the user to express their desires. When the program begins a large window opens, which has a menu at the top and a canvas for image display at the lower right. The large center region is for the placement of nodes that the artist can use to create their work. The opening page looks like this:

The operations are grouped into functional uints and assigned to one of the menus. When the mouse is placed over a menu the operations for that menu appear in a list that pops down from the mouse cursor position. For example, the first menu, File, would look like this:

The operations shown are "Get image" (Read an image from a file), "Save image" (save the image that appears in the canvas), "New Program" (clear the nodes from the screen and start again), "Get program" (read a set of nodes from a file), and "Save program" (Save this set of nodes into a file). These are essential bookkeeping operations.

The initial window has within it a box, which we call a node, that is labelled "Get image".


This node represents the operation that reads an image. This node is typical of other nodes, so we should examine it before going further. In the upper left corner of the node we see a gear shape. If you click on this a window opens that will permit you to select an image:

Double click on any image to load it. The image will appear in the canvas in the lower right or the window.This is where all results will be displayed. If you click on this image, it will be expanded to fill the window.

Click again and it reverts to its original size and location.

Now look at the lower right of the Get image node. There is a small blue image that turns red when the mouse is positioned over it. This is the output from that node, which in this case will be an image, and the region in the node will be called the output connector. We cen feed this image into another node using the mouse. We don't have any other nodes yet, so let's make one. Place the mouse over the Filter menu and select "Threshold".


A node labelled Threshold will appear attached to the mouse. Right click the mouse to place this on the screen. Remember, a right click will remove it. Now we can see this:

To apply this node (threshold) to the image, we do the following:
1. Place the mouse cursor over the output connector on the "Get image" node.
2. Press down the left mouse button and hold it down.
3. Draw the mouse so the cursor rests over the blue box on the upper right of the "Threshold" node. This is an input connector, and tells this node which image to operate on. When you do this you will see a red line connect the output of the "Get image" node to the mouse cursor as you drag it.
4. Release the mouse button. There should be a blue line connecting the "Get image" output to the "Threshold" input.


Note that nothing happens to the image displayed in the canvas. We have not told the system to execute the set of nodes. What we have done is to connect the output from "Get image" to the input of "Threshold", so that the threshold operation will use the image in the canvas as its data. To execute the 'program' so far, which is to say to have the nodes operate on their data, simply click the mouse on the start symbol of the upper right of the screen:

When that happens, the threhold node will operate on its image and the display in the canvas will reflect its output. It that does not happen, then click on the Threshold node again. The result should be:

The result is an image having only black and white, rather than the original colors. That's what the threshold operator does. Details of each operator are given later on this page.

The Coordinate System

When drawing using a computer we use numerical coordinates to identify locations for points, lines, images, and such. The upper left corner is the coordinate (0,0).

The Shapes Menu

These operations will draw geometric shapes. They generally require the input of the position where the object is to be drawn. In gadget these coordinates are relative to the upper left of the canvas region:

The X coordinate is horizontal, and the Y coordinate is vertical.

Let's see what each menu contains and what the nodes do.

Draw Line


This node draws a line. There are six inputs:
x0: the x (horizontal) coordinate of the start of the line. A number.
y0: the y (vertical) coordinate of the start of the line. A number.
x1: the x (horizontal) coordinate of the end of the line. A number.
y1: the y (vertical) coordinate of the end of the line. A number.
w: the width of the line, in pixels, between 0 and 16. A number.
c: the colour with which to draw the line. A colour (r,g,b).

Draws a line from (x0,y0) to (x1,y1) in the specified color and at the specified thickness, in pixels. Default thickness is 1, default colour is red. (x0,y0) defalts to (0,0) and (x1,y1) defaults to (200,200).

Draw Line dXY

Rectangle


This node draws a rectangle. There are seven inputs:
x0: the x (horizontal) coordinate of the upper left of the rectangle. A number.
y0: the y (vertical) coordinate of the upper left of the rectangle. A number.
x1: the x (horizontal) coordinate of the lower right of the rectangle. A number.
y1: the y (vertical) coordinate of the lower right of the rectangle. A number.
w: the width of the line, in pixels, between 0 and 16. A number.
c: the colour with which to draw the line. A colour (r,g,b).
f: the color with which to fill the rectangle.

Ellipse

This node draws an ellipse. It will be contained within a bounding rectangle specified by (x0,y0) and (x1,y1). There are seven inputs:

 This node draws a triangle. There are nine inputs:
x0: the x (horizontal) coordinate of the upper left of the ellipse. A number.
y0: the y (vertical) coordinate of the upper left of the ellipse. A number.
x1: the x (horizontal) coordinate of the lower right of the ellipse. A number.
y1: the y (vertical) coordinate of the lower right of the ellipse. A number.
w: the width of the line, in pixels, between 0 and 16. A number.
c: the colour with which to draw the lines. A colour (r,g,b).
f: the color with which to fill the ellipse.

Triangle


This node draws a triangle using three points. There are nine inputs:
x0: the x (horizontal) coordinate of the first point. A number.
y0: the y (vertical) coordinate of the first point. A number.
x1: the x (horizontal) coordinate of the second point. A number.
y1: the y (vertical) coordinate of the second point. A number.
x2: the x (horizontal) coordinate of the third point. A number.
y2: the y (vertical) coordinate of the third point. A number.
w: the width of the line, in pixels, between 0 and 16. A number.
c: the colour with which to draw the lines. A colour (r,g,b).
f: the color with which to fill the triangle.

The Value Menu

Contrast

Get Pixel

Set Pixel

Extract Region

Mean value

The Transform Menu

Rotate

The Combine Menu

Add

Subtract

The Filter Menu

Mean filter

Median filter

Med threshold

Threshold

Sobel Edges

Laplace edges

Dilate

Erode

The Colour Menu

Color picker

Make color

Get red

Get green

Get blue

Get alpha

Random

Grey

Reverse

Colorize

The Code Menu

Constant

Plus

Minus

Multiply

Divide

Rand Num

Loop

Equal?

Greater>

Less

If -> image

If -> number

If ->colour

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7: