6. Inkplate GUI designer

6.1. Introduction

GUI designer is intended to be a used as a tool for rapid design of user interfaces for Inkplate devices. It offers standard library primitives, but has support for more advaced usage examples, by allowing advaced users to create JS and C code to be run in editor and on Inkplate device (see Widgets). You can check it out here and in our git repository

_images/gui_designer.jpg

6.2. Nomenclature

6.2.1. Component

Primitive or widget, object representation that can be drawn to screen on Inkplate or in web editor.

6.2.2. Entity

Component but in code, or when rendering.

6.2.3. Primitives and widgets

A design component can be a primitive or a widget.
Primitives are simple drop in replacements of Arduino API elements.
Widgets on the other hand are more complex, and can’t have their attributes changed using simple editables.
Located on the left of the main screen.

6.2.4. Editables

Sliders, input boxes, buttons etc. on the right of the screen.

6.2.5. Modifiers

Draggable elements on screen, also mutable by editables if specified.
Also, by clicking on those after a red dot appears changes settings tab to current component.

6.3. Exporting code

After you’re done with editing, simlpy click on “Export C Code” in the upper left corner.
A download prompt will show and upon accepting it a header file will be downloaded.
Simply put the file in the same folder as your sketch, include it by putting:
#include "generatedUI.h"
With all your other includes.

6.4. In code rendering

Be sure to call mainDraw(); in your code when you want it to draw prespecified content.
You must clear the buffer before hand by calling display.clearDisplay();
and call display.display(); after mainDraw(); to put data on screen.
mainDraw();
display.display(); // Needs to be called to put buffer data on screen.

6.5. Custom data rendering

Of course you can leave the default values to be drawn on screen, but where’s the fun in that.
To change primitive or widget data, simply acces a global variable in C.
You can find it’s name in editor, on the top left,
where it says Editing [ name ] and adding _[ whatever property you want to change]
Example:
line0_start_x = 0;
Find all changeable properties under primitives and widgets documentation.
Note that you can’t change bitmap width or height afterwards, indicated by their const declaration in generated header.

6.6. Editing widgets

To be sure that widgets are as customizable as possible, they directly allow you to eddit their variables.
You can edit their JSON file by changing data under default or writing newer data into value slot, first one is always supported,
while second one is not guarantied.
To enter values click somewhere on screen to change focus.

6.7. Making widgets

We strongly encourage those familiar with JavaScript to try their luck making widgets.
Take a look in our source, under widgets/clock.js or graph.js.
Basicaly all there needs to be is name, type (widget), id initialized to 0,
variables shown to user, draw function (here used as a helper to _draw method),
getCCodeVariables (to be put globally) and getCCodeDraw (to be put into mainDraw);

You can also specify getIncludes to include fonts or other.
Be sure to also push your widget object to widgets array to be deep cloned later into entites array.

As for modifiers, make sure that in your variables you put set and distSqr (distance squared) functions into a specific variable.

z value is default 0 to be rendered same priority as all, but can be changed, might even as a editable.

6.8. Using fonts

Our editor does not include fonts, that needs to be done locally.
Easiest way is to use fonts already included in library, see tutorial draw
for list.

User specifies font size in pixels, for rendering in editor, using default Arial font, while
Inkplate commonly uses pt for pixel size, so be aware to convert those.
One px is 0.75 pt, or a pt is 1.33 px

More fonts can be added in /Fonts folder in Inkplate library, or by creating a /Fonts folder in sketch folder and adding them there.
As of writing, default supported fonts are:
FreeMono12pt7b.h                FreeSansBoldOblique12pt7b.h
FreeMono18pt7b.h                FreeSansBoldOblique18pt7b.h
FreeMono24pt7b.h                FreeSansBoldOblique24pt7b.h
FreeMono9pt7b.h                 FreeSansBoldOblique9pt7b.h
FreeMonoBold12pt7b.h            FreeSansOblique12pt7b.h
FreeMonoBold18pt7b.h            FreeSansOblique18pt7b.h
FreeMonoBold24pt7b.h            FreeSansOblique24pt7b.h
FreeMonoBold9pt7b.h             FreeSansOblique9pt7b.h
FreeMonoBoldOblique12pt7b.h     FreeSerif12pt7b.h
FreeMonoBoldOblique18pt7b.h     FreeSerif18pt7b.h
FreeMonoBoldOblique24pt7b.h     FreeSerif24pt7b.h
FreeMonoBoldOblique9pt7b.h      FreeSerif9pt7b.h
FreeMonoOblique12pt7b.h         FreeSerifBold12pt7b.h
FreeMonoOblique18pt7b.h         FreeSerifBold18pt7b.h
FreeMonoOblique24pt7b.h         FreeSerifBold24pt7b.h
FreeMonoOblique9pt7b.h          FreeSerifBold9pt7b.h
FreeSans12pt7b.h                FreeSerifBoldItalic12pt7b.h
FreeSans18pt7b.h                FreeSerifBoldItalic18pt7b.h
FreeSans24pt7b.h                FreeSerifBoldItalic24pt7b.h
FreeSans9pt7b.h                 FreeSerifBoldItalic9pt7b.h
FreeSansBold12pt7b.h            FreeSerifItalic12pt7b.h
FreeSansBold18pt7b.h            FreeSerifItalic18pt7b.h
FreeSansBold24pt7b.h            FreeSerifItalic24pt7b.h
FreeSansBold9pt7b.h             FreeSerifItalic9pt7b.h

6.9. Primitives list

6.9.1. Line

Basic line.
Modifiers
start - coordinate (accessed through _x and _y suffixes in c)
end - coordinate (accessed through _x and _y suffixes in c)
Editables
start - coordinate (accessed through _x and _y suffixes in c)
end - coordinate (accessed through _x and _y suffixes in c)
color - integer
thickness - float
gradient - float

6.9.2. Rectangle

Basic rectangle.
Modifiers
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
Editables
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
color - integer (0 to 7)
fill - bool
radius - integer (round corners)

6.9.3. Circle

Basic circle.
Modifiers
center - coordinate (accessed through _x and _y suffixes in c)
Editables
radius - integer
color - integer (0 to 7)
thickness - float
gradient - int (0 to 7, should be more than color to be used)

6.9.4. Triangle

Basic triangle.
Modifiers
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
c - coordinate (accessed through _x and _y suffixes in c)
Editables
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
c - coordinate (accessed through _x and _y suffixes in c)
color - integer (0 to 7)
fill - bool

6.9.5. Text

Basic text element.
Modifiers
cursor - coordinate (accessed through _x and _y suffixes in c
Editables
cursor - coordinate (accessed through _x and _y suffixes in c)
content - text
font - font (be sure to put editor size followed by font name in c, see “Using fonts” for example)
color - integer (0 to 7)

6.9.6. Bitmap

Basic bitmap, dithers and stores data into an array.
Modifiers
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
Editables
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
url - file (all standard image formats supported)

6.10. Widgets list

6.10.1. Graph

As seen in bitcoin tracker example.
On screen always draws a sine function.
Modifiers
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
Editables
a - coordinate (accessed through _x and _y suffixes in c)
b - coordinate (accessed through _x and _y suffixes in c)
data - array to be filled in C, or in editor for advaced uses

6.10.2. Clock

Simple auto scalable clock.
Modifiers
center - coordinate (accessed through _x and _y suffixes in c)
Editables
center - coordinate (accessed through _x and _y suffixes in c)
size - int
h - int (hours to be displayed)
m - int (minutes to be displayed)