Edgeline v0.3 + Arduino

Hi,

as I´m using just Arduino for my coding I wanted to try include exported LVGL app from Edgeline.

I made it work after bit of straggle and here is what I found.

Code of my .ino file:

#include <lvgl.h>
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h" 
#include "FM_office_ui.h"

#define _cs   5  // goes to TFT CS
#define _dc   21  // goes to TFT DC
#define _mosi 23  // goes to TFT MOSI
#define _sclk 18  // goes to TFT SCK/CLK
#define _rst  -1   // goes to TFT RESET
#define _miso 19

char ssid[] = "FL test";
char user[] = "FabLab Test";
char versionFM[] = "1.0.0.5.beta";
char wifi[] = "WiFi";

Adafruit_ILI9341 tft = Adafruit_ILI9341(_cs, _dc, _rst); // HW SPI

static lv_disp_buf_t disp_buf;
static lv_color_t buf[LV_HOR_RES_MAX * 10];

#if USE_LV_LOG != 0
/* Serial debugging */
void my_print(lv_log_level_t level, const char * file, uint32_t line, const char * dsc)
{

  Serial.printf("%s@%d->%s\r\n", file, line, dsc);
  Serial.flush();
}
#endif

/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
  uint32_t w = (area->x2 - area->x1 + 1);
  uint32_t h = (area->y2 - area->y1 + 1);
  uint32_t wh = w * h; //for Adafruit library

  tft.startWrite();
  tft.setAddrWindow(area->x1, area->y1, w, h);
  
  /* for Adafruit library */
  while (wh--){
    tft.writeColor(color_p++->full, 1);
  }
  /*------------------*/
  
  tft.endWrite();

  lv_disp_flush_ready(disp);
}

void setup()
{
  Serial.begin(115200); /* prepare for possible serial debug */
  lv_init();

#if USE_LV_LOG != 0
  lv_log_register_print_cb(my_print); /* register print function for debugging */
#endif

  tft.begin(); /* TFT init */
  tft.setRotation(1); /* Landscape orientation */

  lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);

  /*Initialize the display*/
  lv_disp_drv_t disp_drv;
  lv_disp_drv_init(&disp_drv);
  disp_drv.hor_res = 320;
  disp_drv.ver_res = 240;
  disp_drv.flush_cb = my_disp_flush;
  disp_drv.buffer = &disp_buf;
  lv_disp_drv_register(&disp_drv);

  BuildPages();
}

void loop()
{
  lv_task_handler(); /* let the GUI do its work */
  delay(5);
}

Exported and edited .c file from Edgeline:

#include "FM_office_ui.h"

///////////////////// VARIABLES ////////////////////
lv_obj_t * loopScreen;
lv_obj_t * bg;
lv_obj_t * netLabel;
lv_obj_t * SSID;
lv_obj_t * wifiSymbol;
lv_obj_t * fwVersion;
lv_obj_t * userName;
lv_obj_t * version;

///////////////////// IMAGES ////////////////////

#ifndef ARDUINO // I have to undefine Arduino, otherwise it will not compile as does not know all these functions

///////////////////// FUNCTIONS ////////////////////
#define BAR_PROPERTY_VALUE 0
#define BAR_PROPERTY_VALUE_WITH_ANIM 1

void SetBarProperty(lv_obj_t * target, int id, int val)
{
  if (id == BAR_PROPERTY_VALUE_WITH_ANIM) lv_bar_set_value(target, val, LV_ANIM_ON);
  if (id == BAR_PROPERTY_VALUE) lv_bar_set_value(target, val, LV_ANIM_OFF);
}

#define BASIC_PROPERTY_POSITION_X 0
#define BASIC_PROPERTY_POSITION_Y 1
#define BASIC_PROPERTY_WIDTH 2
#define BASIC_PROPERTY_HEIGHT 3
#define BASIC_PROPERTY_CLICKABLE 4
#define BASIC_PROPERTY_HIDDEN 5
#define BASIC_PROPERTY_DRAGABLE 6
#define BASIC_PROPERTY_DISABLED 7

void SetBasicProperty(lv_obj_t * target, int id, int val)
{
  if (id == BASIC_PROPERTY_POSITION_X) lv_obj_set_x(target, val);
  if (id == BASIC_PROPERTY_POSITION_Y) lv_obj_set_y(target, val);
  if (id == BASIC_PROPERTY_WIDTH) lv_obj_set_width(target, val);
  if (id == BASIC_PROPERTY_HEIGHT) lv_obj_set_height(target, val);
}

void SetBasicPropertyB(lv_obj_t * target, int id, bool val)
{
  if (id == BASIC_PROPERTY_CLICKABLE) lv_obj_set_click(target, val);
  if (id == BASIC_PROPERTY_HIDDEN) lv_obj_set_hidden(target, val);
  if (id == BASIC_PROPERTY_DRAGABLE) lv_obj_set_drag(target, val);
  if (id == BASIC_PROPERTY_DISABLED) {
    if (val) lv_obj_add_state(target, LV_STATE_DISABLED);
    else lv_obj_clear_state(target, LV_STATE_DISABLED);
  }
}

#define BUTTON_PROPERTY_TOGGLE 0
#define BUTTON_PROPERTY_CHECKED 1

void SetButtonProperty(lv_obj_t * target, int id, bool val)
{
  if (id == BUTTON_PROPERTY_TOGGLE) lv_btn_toggle(target);
  if (id == BUTTON_PROPERTY_CHECKED) lv_btn_set_state(target, val ? LV_BTN_STATE_CHECKED_RELEASED : LV_BTN_STATE_RELEASED);
}

#define DROPDOWN_PROPERTY_SELECTED 0

void SetDropdownProperty(lv_obj_t * target, int id, int val)
{
  if (id == DROPDOWN_PROPERTY_SELECTED) lv_dropdown_set_selected(target, val);
}

#define IMAGE_PROPERTY_IMAGE 0

void SetImageProperty(lv_obj_t * target, int id, uint8_t * val)
{
  if (id == IMAGE_PROPERTY_IMAGE) lv_img_set_src(target, val);
}

#define LABEL_PROPERTY_TEXT 0

void SetLabelProperty(lv_obj_t * target, int id, char * val)
{
  if (id == LABEL_PROPERTY_TEXT) lv_label_set_text(target, val);
}

#define ROLLER_PROPERTY_SELECTED 0
#define ROLLER_PROPERTY_SELECTED_WITH_ANIM 1

void SetRollerProperty(lv_obj_t * target, int id, int val)
{
  if (id == ROLLER_PROPERTY_SELECTED_WITH_ANIM) lv_roller_set_selected(target, val, LV_ANIM_ON);
  if (id == ROLLER_PROPERTY_SELECTED) lv_roller_set_selected(target, val, LV_ANIM_OFF);
}

#define SLIDER_PROPERTY_VALUE 0
#define SLIDER_PROPERTY_VALUE_WITH_ANIM 1

void SetSliderProperty(lv_obj_t * target, int id, int val)
{
  if (id == SLIDER_PROPERTY_VALUE_WITH_ANIM) lv_slider_set_value(target, val, LV_ANIM_ON);
  if (id == SLIDER_PROPERTY_VALUE) lv_slider_set_value(target, val, LV_ANIM_OFF);
}

void ChangeScreen(lv_obj_t * target, int fademode, int spd, int delay)
{
  lv_scr_load_anim(target, fademode, spd, delay, false);
}

void SetOpacity(lv_obj_t * target, int val)
{
  lv_obj_set_style_local_opa_scale(target, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, val);
}

void anim_callback_set_x(lv_anim_t * a, lv_anim_value_t v)
{
  lv_obj_set_x(a->user_data, v);
}

void anim_callback_set_y(lv_anim_t * a, lv_anim_value_t v)
{
  lv_obj_set_y(a->user_data, v);
}

void anim_callback_set_width(lv_anim_t * a, lv_anim_value_t v)
{
  lv_obj_set_width(a->user_data, v);
}

void anim_callback_set_height(lv_anim_t * a, lv_anim_value_t v)
{
  lv_obj_set_height(a->user_data, v);
}
#endif

///////////////////// ANIMATIONS ////////////////////

///////////////////// FUNCTIONS2 ////////////////////

///////////////////// SCREENS ////////////////////
void BuildPages(void)
{
  loopScreen = lv_obj_create(NULL, NULL);

  bg = lv_obj_create(loopScreen, NULL);
  lv_obj_set_click(bg, false);
  lv_obj_set_hidden(bg, false);
  lv_obj_clear_state(bg, LV_STATE_DISABLED);
  lv_obj_set_size(bg, 320, 240);  // force: 0
  lv_obj_align(bg, loopScreen, LV_ALIGN_CENTER, 0, 0); // force: 320
  lv_obj_set_drag(bg, false);
  lv_obj_set_style_local_bg_color(bg, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0 * 256 * 256 + 0 * 256 + 0));
  lv_obj_set_style_local_bg_opa(bg, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_border_width(bg, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 0);

  netLabel = lv_label_create(bg, NULL);
  lv_label_set_long_mode(netLabel, LV_LABEL_LONG_EXPAND);
  lv_label_set_align(netLabel, LV_LABEL_ALIGN_CENTER);
  lv_label_set_text(netLabel, "Network:");
  lv_obj_set_size(netLabel, 45, 11);  // force: -132
  lv_obj_set_click(netLabel, false);
  lv_obj_set_hidden(netLabel, false);
  lv_obj_clear_state(netLabel, LV_STATE_DISABLED);
  lv_obj_set_drag(netLabel, false);
  lv_obj_set_style_local_text_color(netLabel, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                    lv_color_hex(255 * 256 * 256 + 255 * 256 + 255));
  lv_obj_set_style_local_text_opa(netLabel, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_text_font(netLabel, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_10); // I had to change last parameter from LV_font_montserrat_10 to &lv_font_montserrat_10 to make it compile

  lv_obj_align(netLabel, bg, LV_ALIGN_CENTER, -132, -108); // force: 45

  SSID = lv_label_create(bg, NULL);
  lv_label_set_long_mode(SSID, LV_LABEL_LONG_EXPAND);
  lv_label_set_align(SSID, LV_LABEL_ALIGN_CENTER);
  lv_label_set_text(SSID, ssid);
  lv_obj_set_size(SSID, 0, 11);  // force: -87
  lv_obj_set_click(SSID, false);
  lv_obj_set_hidden(SSID, false);
  lv_obj_clear_state(SSID, LV_STATE_DISABLED);
  lv_obj_set_drag(SSID, false);
  lv_obj_set_style_local_text_color(SSID, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                    lv_color_hex(255 * 256 * 256 + 255 * 256 + 255));
  lv_obj_set_style_local_text_opa(SSID, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_text_font(SSID, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_10);

  lv_obj_align(SSID, bg, LV_ALIGN_CENTER, -87, -108); // force: 0

  wifiSymbol = lv_label_create(bg, NULL);
  lv_label_set_long_mode(wifiSymbol, LV_LABEL_LONG_EXPAND);
  lv_label_set_align(wifiSymbol, LV_LABEL_ALIGN_CENTER);
  lv_label_set_text(wifiSymbol, wifi);
  lv_obj_set_size(wifiSymbol, 0, 11);  // force: 140
  lv_obj_set_click(wifiSymbol, false);
  lv_obj_set_hidden(wifiSymbol, false);
  lv_obj_clear_state(wifiSymbol, LV_STATE_DISABLED);
  lv_obj_set_drag(wifiSymbol, false);
  lv_obj_set_style_local_text_color(wifiSymbol, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                    lv_color_hex(255 * 256 * 256 + 255 * 256 + 255));
  lv_obj_set_style_local_text_opa(wifiSymbol, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_text_font(wifiSymbol, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_10);

  lv_obj_align(wifiSymbol, bg, LV_ALIGN_CENTER, 140, -108); // force: 0

  fwVersion = lv_label_create(bg, NULL);
  lv_label_set_long_mode(fwVersion, LV_LABEL_LONG_EXPAND);
  lv_label_set_align(fwVersion, LV_LABEL_ALIGN_CENTER);
  lv_label_set_text(fwVersion, "FW version:");
  lv_obj_set_size(fwVersion, 58, 11);  // force: 49
  lv_obj_set_click(fwVersion, false);
  lv_obj_set_hidden(fwVersion, false);
  lv_obj_clear_state(fwVersion, LV_STATE_DISABLED);
  lv_obj_set_drag(fwVersion, false);
  lv_obj_set_style_local_text_color(fwVersion, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                    lv_color_hex(255 * 256 * 256 + 255 * 256 + 255));
  lv_obj_set_style_local_text_opa(fwVersion, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_text_font(fwVersion, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_10);

  lv_obj_align(fwVersion, bg, LV_ALIGN_CENTER, 49, 105); // force: 58

  userName = lv_label_create(bg, NULL);
  lv_label_set_long_mode(userName, LV_LABEL_LONG_EXPAND);
  lv_label_set_align(userName, LV_LABEL_ALIGN_CENTER);
  lv_label_set_text(userName, user);
  lv_obj_set_size(userName, 0, 22);  // force: 0
  lv_obj_set_click(userName, false);
  lv_obj_set_hidden(userName, false);
  lv_obj_clear_state(userName, LV_STATE_DISABLED);
  lv_obj_set_drag(userName, false);
  lv_obj_set_style_local_text_color(userName, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                    lv_color_hex(255 * 256 * 256 + 255 * 256 + 255));
  lv_obj_set_style_local_text_opa(userName, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_text_font(userName, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_20);

  lv_obj_align(userName, bg, LV_ALIGN_CENTER, 0, 0); // force: 0

  version = lv_label_create(bg, NULL);
  lv_label_set_long_mode(version, LV_LABEL_LONG_EXPAND);
  lv_label_set_align(version, LV_LABEL_ALIGN_CENTER);
  lv_label_set_text(version, versionFM);
  lv_obj_set_size(version, 0, 11);  // force: 115
  lv_obj_set_click(version, false);
  lv_obj_set_hidden(version, false);
  lv_obj_clear_state(version, LV_STATE_DISABLED);
  lv_obj_set_drag(version, false);
  lv_obj_set_style_local_text_color(version, LV_BTN_PART_MAIN, LV_STATE_DEFAULT,
                                    lv_color_hex(255 * 256 * 256 + 255 * 256 + 255));
  lv_obj_set_style_local_text_opa(version, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 255);
  lv_obj_set_style_local_text_font(version, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_10);

  lv_obj_align(version, bg, LV_ALIGN_CENTER, 115, 105); // force: 0

  lv_scr_load(loopScreen); // this call was not in export from Edgeline
}

Exported and edited .h file from Edgeline:

#ifndef FM_OFFICE_UI_H
#define FM_OFFICE_UI_H

#ifdef __cplusplus
extern "C" {
#endif

#if ARDUINO >=100 // if we are using Arduino
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif 

extern lv_obj_t * loopScreen;
extern lv_obj_t * bg;
extern lv_obj_t * netLabel;
extern lv_obj_t * SSID;
extern lv_obj_t * wifiSymbol;
extern lv_obj_t * fwVersion;
extern lv_obj_t * userName;
extern lv_obj_t * version;

#if ARDUINO >=100 // if we are using Arduino, also include these functions & variables
void BuildPages(void);
extern char ssid[];
extern char user[];
extern char versionFM[];
extern char wifi[];
#endif 

#ifdef __cplusplus
} /*extern "C"*/
#endif

#endif

Please look at the comments in code, but here are main issues:

  • parameter for text font was not properly called (LV_font_montserrat_10 instead of &lv_font_montserrat_10)
  • export was missing call for screen object ( lv_scr_load(loopScreen); ) ← my bad, I just found this in release info for Edgeline v0.3

I´m including project file if anyone want to try it in Edgeline :wink:
FM_office.zip (46.0 KB)
(It would be good to include Edgeline file extension to upload form so we do not need to ZIP it :slightly_smiling_face: )

Also I want to ask:

  • is there way, in Edgeline, to make/declare text as variable?
  • is there way, in Edgeline, how to disable corner radius of panel widget?
    image

Anyway, I hope these findigs will help someone or they wlll be included in some version fo Edgeline :slightly_smiling_face:

Thanks, I added it to our issue tracker.

Enabled :slight_smile:

Not now :frowning:

You can do it here:
image

1 Like