Create your own screen

custom it make it your own

start with basic widget

“Label”

สร้างแถบข้อความ Hello world บนหน้าจอ Widget : Label

lv_obj_t * label1 = lv_label_create(lv_scr_act());          /*สร้างแถบข้อความ*/
    lv_label_set_text(label1, "Hello world");               /*กำหนดข้อความ*/
    lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0); /*วางข้อความไว้กลางแถบข้อความ*/
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, -40);          /*วางแถบข้อความไว้กลางจอแล้วเลื่อนไปด้านบน*/

  lv_obj_t * label2 = lv_label_create(lv_scr_act());        /*สร้างแถบข้อความ*/
    lv_label_set_recolor(label2, true);                     /*เปิดโหมดเปลี่ยนสีข้อความ/
    lv_label_set_text(label2, "#0000ff Hello world but blue");     /*กำหนดข้อความ*/
    lv_obj_set_style_text_align(label2, LV_TEXT_ALIGN_CENTER, 0);  /*วางข้อความไว้กลางแถบข้อความ*/
    lv_obj_align(label2, LV_ALIGN_CENTER, 0, 0);            /*วางแถบข้อความไว้กลางจอ*/
  
  lv_obj_t * label3 = lv_label_create(lv_scr_act());        /*สร้างแถบข้อความ*/
    lv_label_set_recolor(label3, true);                     /*เปิดโหมดเปลี่ยนสีข้อความ/
    lv_label_set_text(label3, "#ff0000 Hello world but red");      /*กำหนดข้อความ*/
    lv_obj_set_style_text_align(label3, LV_TEXT_ALIGN_CENTER, 0);  /*วางข้อความไว้กลางแถบข้อความ*/
    lv_obj_align(label3, LV_ALIGN_CENTER, 0, 40);           /*วางแถบข้อความไว้กลางจอแล้วเลื่อนไปด้านล่าง*/

รหัสสีที่ใช้คือรหัสสี Hex color

สามารถดูตำแหน่งการวาง object บนจอได้ ที่นี่

“Arc”

สร้างเส้นโค้งบนหน้าจอ Widget : Arc

lv_obj_t * arc = lv_arc_create(lv_scr_act()); /*สร้างเส้นโค้ง*/
    lv_obj_set_size(arc, 150, 150); /*กำหนดขนาด กว้างxยาว*/
    lv_arc_set_rotation(arc, 135);  /*กำหนดมุมเริ่มต้นของเส้นโค้ง*/
    lv_arc_set_bg_angles(arc, 0, 270);  /*กำหนดความยาวของเส้นโค้ง(หน่วยเป็นมุมองศา)*/
    lv_arc_set_value(arc, 40);  /*กำหนดค่าเริ่มต้นที่มีในเส้น*/
    lv_obj_center(arc);  /*จัดวางอุปกรณ์ไว้กลางจอ*/

lv_arc_set_value(arc,99)//สามารถใช้คำสั่งนี้เพื่อเติมแถมที่ฟ้าได้

“Button”

สร้างปุ่มกดของคุณ Widget : Button

  lv_obj_t * label; /*สร้าง object เปล่าขึ้นมา*/

  lv_obj_t * btn1 = lv_btn_create(lv_scr_act()); /*สร้างปุ่มกดบนจอหลัก*/
      lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40); /*กำหนดตำแหน่งของปุ่มกด*/

      label = lv_label_create(btn1); /**/
      lv_label_set_text(label, "Button"); /**/
      lv_obj_center(label); /**/

  lv_obj_t * btn2 = lv_btn_create(lv_scr_act()); /**/
      lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40); /**/
      lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE); /**/

      label = lv_label_create(btn2); /**/
      lv_label_set_text(label, "Toggle"); /**/
      lv_obj_center(label); /**/

“Bar”

สร้างแถบสถานะของคุณเอง Widget : Bar

    lv_obj_t * bar1 = lv_bar_create(lv_scr_act()); //สร้าง object bar
    lv_obj_set_size(bar1, 200, 20); //กำหนดขนาด ยาวxสูง
    lv_bar_set_value(bar1,20,LV_ANIM_OFF); //กำหนดค่าใส่ใน bar
    lv_obj_align(bar1, LV_ALIGN_CENTER, 0, -60);
    
    lv_obj_t * bar2 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar2, 200, 20);
    lv_bar_set_value(bar2,90,LV_ANIM_OFF);
    lv_obj_align(bar2, LV_ALIGN_CENTER, 0, -30);

    lv_obj_t * bar3 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar3, 200, 20);
    lv_bar_set_value(bar3,20,LV_ANIM_ON); //มี animation เวลาเปิดขึ้นมา
    lv_obj_align(bar3,LV_ALIGN_CENTER, 0, 30);

    lv_obj_t * bar4 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar4, 200, 20);
    lv_bar_set_value(bar4,90,LV_ANIM_ON);
    lv_obj_align(bar4, LV_ALIGN_CENTER, 0, 60);

“Status”

สร้าง label แสดงค่าของ Object คุณ Widget : Arc (can be anything else)

  lv_obj_t * arc = lv_arc_create(lv_scr_act());
  lv_arc_set_bg_angles(arc,180,360); // สร้างครึ่งวงกลม
  lv_arc_set_value(arc,80); //เติมครึ่งวงกลมไป 80%
  lv_obj_set_size(arc, 150, 150);
  lv_obj_align(arc, LV_ALIGN_CENTER, 0, 0);

  lv_obj_t * label_arc = lv_label_create(lv_scr_act()); //สร้างข้อความบนครึ่งวงกลม
  lv_label_set_text_fmt(label_arc,"%d%%",lv_arc_get_value(arc));//นำค่าที่เติมบน Arc มาแสดงผล
  lv_obj_align(label_arc, LV_ALIGN_CENTER, 0, 0); //จัดต่ำแหน่งข้อความให้อยู่ตรงกลางของ Arc

Extend : "Arc + text"

สร้าง Half Arc + ข้อความ

  lv_obj_t * arc = lv_arc_create(lv_scr_act());
  lv_arc_set_bg_angles(arc,180,360); // สร้างครึ่งวงกลม
  lv_arc_set_value(arc,80); //เติมครึ่งวงกลมไป 80%
  lv_obj_set_size(arc, 150, 150);
  lv_obj_align(arc, LV_ALIGN_CENTER, 0, 0);

  lv_obj_t * label_arc = lv_label_create(lv_scr_act()); //สร้างข้อความบนครึ่งวงกลม
  lv_label_set_text_fmt(label_arc,"%d%%",lv_arc_get_value(arc));//นำค่าที่เติมบน Arc มาแสดงผล
  lv_obj_align(label_arc, LV_ALIGN_CENTER, 0, 0); //จัดต่ำแหน่งข้อความให้อยู่ตรงกลางของ Arc

  lv_obj_t * label = lv_label_create(arc); // สร้างข้อความบนครึ่งวงกลม
  lv_label_set_text(label, "Value"); // ใส่ข้อความลงบนครึ่งวงกลม
  lv_obj_align(label, LV_ALIGN_CENTER, 0, -20); // ใส่ตำแหน่งข้อความ