Main Page | Modules | Class Hierarchy | Alphabetical List | Data Structures | File List | Data Fields | Globals | Related Pages

WYSIWYG - What You See Is What You Get, a very simple approach to manage menus, buttons and GUIs in general.


Files

file  otWYSIWYG.h
 Class for create simple GUI.

Modules

 Version History
 WYSIWYG - Code example

Data Structures

class  otWYSIWYG
 Class for create simple GUI. More...
class  otWYSIWYG
 Class for create simple GUI. More...

Detailed Description

This is a very light library and does not need a DESIGNER to create a GUI. Draw the GUI in the source code and you're done!
See below example to understand how it work.
    SDRAM_DATA const char * screen =
    "    CHRONOMETER   "
    "     00:01:02     "
    " START STOP CLEAR "
    ".H                "
    "       X.XX       "
    "      LIST_0      "
    "                  "
    "                  "
    "                  "
    "                  "
    " .1.2.3.4.5.6.7.8 "
    " HELP             ";
    
    SDRAM_DATA const char * textList[] = {
        "LIST_0", "LIST_1", "LIST_2", "LIST_3", "LIST_4",
        "LIST_5", "LIST_6", "LIST_7", "LIST_8", "LIST_9"
    };
    
    SDRAM_DATA const char * help = "HELP EXAMPLE: Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua ....";
In real world begin:
wysiwyg.png
A portion of code to create it
    gui.init(32, screen, 18, 10, 10, &tft, 2);
    il = gui.addLabel(" CHRONOMETER ");
    ih = gui.addInteger("00", &h, otWYSIWYG::OBJ_VAR_S8);
    im = gui.addInteger("01", &m, otWYSIWYG::OBJ_VAR_S8);
    is = gui.addInteger("02", &s, otWYSIWYG::OBJ_VAR_S8);
    rid = gui.addReal("X.XX", &real);
    ll = gui.addList("LIST_0", textList, 10);
    keyidx[0] = gui.addButton("START", startCallback);
    keyidx[1] = gui.addButton("STOP", stopCallback);
    keyidx[2] = gui.addButton("CLEAR", clearCallback);
    vb[0] = gui.addVBar(".1", 5, 100);
    vb[1] = gui.addVBar(".2", 5, 100);
    vb[2] = gui.addVBar(".3", 5, 100);
    vb[3] = gui.addVBar(".4", 5, 100);
    vb[4] = gui.addVBar(".5", 5, 100);
    vb[5] = gui.addVBar(".6", 5, 100);
    vb[6] = gui.addVBar(".7", 5, 100);
    vb[7] = gui.addVBar(".8", 5, 100);
    hb = gui.addHBar(".H", 18, 100);
    hh = gui.addHelp("HELP", help, 16);
    gui.regen();
    // mark with different color the title
    gui.regen(il, RGB565_WHITE, RGB565_RED);
Below the complete code ...
With SIZE 1 screen can have 53 x 30 characters
With SIZE 2 screen can have 26 x 15 characters
With SIZE 3 screen can have 13 x 10 characters
Dependency:
Graphics - TFT display library for ILI9341,ILI9486,ILI9488 and ST7735 controller
Malloc - Memory management
String library
Printf - Print formatted data to stdout footer
otStudio - Library Reference - (C) 2020-23 Officina Turini, All Rights Reserved
Document built with Doxygen 1.4.0