otStudio: WYSIWYG - Code example

#include "main.h"
#include <otSerial.h>
#include <otTimer.h>
#include <otPrintf.h>
#include <otILI9341.h>
#include <otMalloc.h>
#include <otString.h>
#include <otScheduler.h>
#include <otWYSIWYG.h>

// The GUI that we want to create
// Each text in the string can be used as identifier for a GUI function
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             ";

// Text used to create a string list in the GUI
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"
};

// Text used to show an animated help
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 ....";

// Display driver
otILI9341   tft;
// The GUI library
otWYSIWYG   gui;
// A simple scheduler to all actions
otScheduler run;

// Global variables used for our test
S8  h = 0, m = 0, s = 0;
U32 t = 0;
U16 il, ih, im, is, keyidx[3], ii = 0, ps = 0, ll, lli = 0, hh;
U16 vb[8], vx = 0, hb, hx = 0, rid;
F32 real = 3.14;

// Callback used by related button
void startCallback(U16 id)
{
}

// Callback used by related button
void stopCallback(U16 id)
{
}

// Callback used by related button
void clearCallback(U16 id)
{
}

// Task executed every second to increment the time
void _incTime(U32 idx)
{
    t++;
    h = t / 3600;
    m = (t - h * 3600) / 60;
    s = t - h * 3600 - m * 60;
    gui.regen(ih);
    gui.regen(im);
    gui.regen(is);
}

// Help update
void _helpRefresh(U32 idx)
{
    gui.regen(hh);
}

// Change the state for created buttons
void _buttonActivate(U32 idx)
{
    switch(ps)
    {
        case 0:
                gui.setState(keyidx[ii], otWYSIWYG::OBJ_STAT_NORMAL);
                break;
        case 1:
                gui.setState(keyidx[ii], otWYSIWYG::OBJ_STAT_SELECTED);
                break;
        case 2:
                gui.setState(keyidx[ii], otWYSIWYG::OBJ_STAT_ACTIVATED);
                break;
        case 3: gui.setState(keyidx[ii++], otWYSIWYG::OBJ_STAT_NORMAL);
                if(ii > 2) ii = 0;
                ps = 0;
                break;
    }
    ps++;
    
    // Update a real variable 
    real += 0.01f;
    gui.regen(rid);
    if(real > 9.99f) real = 0.0f;
}

// Update the list
void _listChange(U32 idx)
{
    gui.setList(ll, lli++);
    gui.regen(ll);
    if(lli == 10) lli = 0;
}

// Update VBAR and HBAR
void _vbar(U32 idx)
{
    U16 v1 = 100 - vx;
    U16 c1 = RGB565((255 * vx) / 100, 0, 255 * (100 - vx) / 100);
    U16 c2 = RGB565((255 * v1) / 100, 0, 255 * (100 - v1) / 100);
    gui.setBar(vb[0], vx, c1);
    gui.regen(vb[0]);
    gui.setBar(vb[1], v1, c2);
    gui.regen(vb[1]);
    gui.setBar(vb[2], vx, c1);
    gui.regen(vb[2]);
    gui.setBar(vb[3], v1, c2);
    gui.regen(vb[3]);
    gui.setBar(vb[4], vx, c1);
    gui.regen(vb[4]);
    gui.setBar(vb[5], v1, c2);
    gui.regen(vb[5]);
    gui.setBar(vb[6], vx, c1);
    gui.regen(vb[6]);
    gui.setBar(vb[7], v1, c2);
    gui.regen(vb[7]);
    
    c2 = RGB565((255 * vx) / 100, 255 * (100 - vx) / 100, 255 * (100 - vx) / 100);
    gui.setBar(hb, vx, c2);
    gui.regen(hb);
    
    vx += 5;
    if(vx > 100) vx = 0;
}

// Show on console the status of all tasks
void _status(U32 idx)
{
    for(U32 i = 0; i < run.size(); i++)
        if(run.function(i) && run.enable(i))
            printf("[%3d]:[%20s] > %8u ms | %8u ms\n", i, run.text(i), run.interval(i), run.speed(i));
}

// Init 
void setup()
{
        UartEnableSignals(UART0);
        UartSetBaud(UART0, 115200);
        setStdout(1024, UART0); // printf output is now directed on UART0
        
    tft.init();
        tft.setRotation(otILI9341::IR_270);
        tft.clear();
        tft.setTextColor(RGB565_YELLOW, RGB565_BLACK);
        tft.setTextSize(1);
    
    // Init the scheduler
    run.init(16, TIMER4);
}

void loop()
{
    // Create the GUI objects
    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);
    
    // Init the scheduler
    run.addTask(1500,   _listChange,        "List changing");
    run.addTask(1000,   _incTime,           "Clock Time Base");
    run.addTask(500,    _buttonActivate,    "Button activate");
    run.addTask(250,    _vbar,              "VBar animation");
    run.addTask(200,    _helpRefresh,       "Help refresh");
    run.addTask(5000,   _status,            "Scheduler status");
    run.run(true);
    // Scheduler run
    run.process();
    
    IDLE;
}
WYSIWYG - Code example [WYSIWYG - What You See Is What You Get, a very simple approach to manage menus, buttons and GUIs in general.]

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