آموزش برنامه نویسی ساخت منو در آردوینو با نمایشگر LCD Arduino – بخش اول

طراحی واسط کاربری حرفه‌ای در نرم اقزار‌ها از نقات قوت یک سیستم می‌باشد.در این پست به آموزش ساخت منو در آردوینو می‌پردازیم. منو ساختاری سلسله مراتبی و تودرتوست که برای طبقه بندی و دسته بندی منطقی فرامین و یا اطلاعات در نرم افزارهای گوناگون استفاده می شود تا افراد بتوانند آنچه را می خواهند به راحتی پیدا کنند. معمولا در کار روزمره با نرم افزارهای مختلف با انواع منو سروکار داشته ایم . منوی Start ویندوز نمونه ای آشناست , منویی آبشاری که با حرکت  اشاره گر روی هر کدام از گزینه هایش , در صورت وجود , مجموعه ای از گزینه های زیر مجموعه را نمایش میدهد و بدینصورت افراد می توانند گزینه نهایی مورد نظر خود را به راحتی پیدا کنند.در ادامه آموزش با مرجع تخصصی آردوینو ، دیجی اسپارک همراه باشید.

شیوه‌های مختلفی به منظور ساخت منو وجود دارد ولی از آنجایی که آردوینو پلتفرمی دارای کتابخانه‌های فراوانی می‌باشد ، به جای برنامه ‌نویسی‌های پیچیده  از کتابخانه MenuBackend استفاده می‌کنیم که لینک دانلود آن در قسمت زیر قرار داده  شده است.پس از دانلود کتابخانه ، آن را به نرم افزار آردوینو اضافه نمایید. دانلود کتابخانهMenuBackend در این آموزش از کتابخانه دیبانسینگ و همچنین LCD کاراکتری استفاده شده است که قبل از مطالعه این پست پیشنهاد می‌کنیم دو پست زیر را مطالعه کنید.

آموزش LCD کاراکتری در آردوینو

آموزش دیبانسیتگ یا نویزگیری کلید در آردوینو

روش اجرای پروژه

پیش از انجام هر کاری ابتدا باید یک ساختار کلی از منویی که مدنظرمان می‌باشد ترسیم کنیم.  طرحی از منویی که در ذهن داریم. برای منوی خود باید کلید‌هایی در نظر بگیریم که هر کدام از آن‌ها عملیات خاصی را انجام بدهد. ما در منوی خود از چهار کلید استفاده کرده‌ایم که به ترتیب زیر می‌باشند:

• ۱ عدد کلید برای رفتن به سمت راست منو(جابه جایی در بین آیتم‌های منو)
• ۱ عدد کلید برای رفتن به سمت چپ منو (جابه‌جایی در بین آیتم‌های منو)
• ۱ عدد کلید به منظور  وارد شدن به منو ( عملیات Enter)
• ۱ عدد کلید به منظور رفتن به ابتدای منو ( عملیات)

کد‌های پروژه منو با آردوینو

ابتدا کد‌های زیر را در آردوینو خود آپلود کنید  و نتیچه را مشاهده کنید. اگر مراحل را به درستی انجام داده باید مشاهده می‌کنید که در صورت فشردن کلید ها منوی شما مطابق ساختار زیر عمل می‌کند:

MenuBackend menu = MenuBackend (menuUse, menuChange);

menuChange : تابعی است که هنگامی که جابه‌جایی بین گزینه‌های منو به صورت خودکار فراخوانی ‌می‌شود( این تابع را باید خودمان بعد از loop برنامه بنویسیم.

menuUse : تابعی است که هنگامی که منوی را مورد استفاده قرار می‌دهیم به صورت خودکار فراخوانی می‌شود ( ابن تابع را نیز باید در پایان کدها بنویسیم)

پس باید اینگونه عمل کنیم:

#include <MenuBackend.h>

MenuBackend menu = MenuBackend (menuUse, menuChange);



void setup ()
  {


  }

void loop ()
  {

  }


void menuChange (MenuChangeEvent changed)
  {
//بعد از جابه حایی بین گزینه های منو کد های این قسمت به صورت خودکار اجرا میشوند
  }

void menuUse (MenuUseEvent used)
  {
  //بعد از استفاه از یک منو ، کد های موجود در این قسمت به صورت خودکار فراخوانی مشود
  }

در مرحله‍‌ی بعدی باید ایتم‌هایی که در منوی ما به کار برده می‌شود را تعریف کنیم.بری تعریف ایتم‌ها مطایق دستور العمل زیر عمل می‌کنیم.

MenuItem menuItem = MenuItem ("Name of menuItem");

پس طبق ساختار فوق ، ایتم‌های منو را طبق قطعه کد زیر تعریف می‌کنیم:

#include <MenuBackend.h>

MenuBackend menu = MenuBackend (menuUse, menuChange);

    MenuItem menu1Item1 = MenuItem ("Item1");
         MenuItem menuItem1SubItem1 = MenuItem ("Item1SubItem1");
         MenuItem menuItem1SubItem2 = MenuItem ("Item1SubItem2");
    MenuItem menu1Item2 = MenuItem ("Item2");
         MenuItem menuItem2SubItem1 = MenuItem ("Item2SubItem1");
         MenuItem menuItem2SubItem2 = MenuItem ("Item2SubItem2");
         MenuItem menuItem3SubItem3 = MenuItem ("Item2SubItem3");
    MenuItem menu1Item3 = MenuItem ("Item3");

void setup ()
  {


  }

void loop ()
  {

  }


void menuChange (MenuChangeEvent changed)
  {
//بعد از جابه حایی بین گزینه های منو کد های این قسمت به صورت خودکار اجرا میشوند
  }

void menuUse (MenuUseEvent used)
  {
  //بعد از استفاه از یک منو ، کد های موجود در این قسمت به صورت خودکار فراخوانی مشود
  }


MenuItem menuItem = MenuItem ("Name of menuItem");

معرفی چند تابع ایجاد منو در آردوینو

getRoot ()

به وسیله این تابع به ابتدای منوی ساخته شده می‌رویم.

add(menu Name)

به وسیله این تابع می‌توان یک آیتم را به آیتم دیگر اضافع نمود ( یعنی می‌توان یک آیتم را به عنوان زیر‌شاخه یک آیتم دیگر قرار داد یا به عبارت دیگر یک منو را به منویی دیگر اضافه نمود). به عنوان مثال در قطعه کد زیر ، آیتم subMenuItem1 را به عنوان زیر شاخه آیتم menuItem1 اضافه می‌کنیم:

menuItem1.add(subMenuItem1);

آیتم‌ها را  در setup برنامه به یکدیگر اضافه می‌کنیم.

مرحله اول

menu.getRoot ().add (menu1Item1);

مرحله دوم

menu1Item1.addRight (menu1Item2).addRight (menu1Item3);

مرحله سوم

menu1Item1.add (menuItem1SubItem1).addRight (menuItem1SubItem2);

و در نهایت

menu1Item2.add (menuItem2SubItem1).addRight (menuItem2SubItem2).addRight (menuItem3SubItem3);

پس کد‌های برنامه تا این قسمت به صورت زیر می‌شود:

هم اکنون باید وضعیت LOW شدن هر یک از ۴ عدد تاچ سوئیچ را بررسی کرده و در صورت فشرده شدن هر کدام ، شماره‌ی پین آن را در متغیر  lastButtonPushed میریزیم. کد‌های ما به صورت  زیر می‌شود:

#include <Bounce2.h>
#include <MenuBackend.h>



const int buttonPinLeft = 8;      // pin for the Up button
const int buttonPinRight = 9;    // pin for the Down button
const int buttonPinEsc = 10;     // pin for the Esc button
const int buttonPinEnter = 11;   // pin for the Enter button

int lastButtonPushed = 0;

//ایجاد یک آبجکت برای هر کلید از کلاس Bounce
Bounce esc = Bounce ();
Bounce enter = Bounce ();
Bounce left = Bounce ();
Bounce right = Bounce ();



//ایجاد منو
MenuBackend menu = MenuBackend (menuUse, menuChange);
//اایجاد آیتم های منو
MenuItem menu1Item1 = MenuItem ("Item1");
     MenuItem menuItem1SubItem1 = MenuItem ("Item1SubItem1");
     MenuItem menuItem1SubItem2 = MenuItem ("Item1SubItem2");
MenuItem menu1Item2 = MenuItem ("Item2");
     MenuItem menuItem2SubItem1 = MenuItem ("Item2SubItem1");
     MenuItem menuItem2SubItem2 = MenuItem ("Item2SubItem2");
     MenuItem menuItem3SubItem3 = MenuItem ("Item2SubItem3");
MenuItem menu1Item3 = MenuItem ("Item3");





void setup ()
  {

//////////////////////////////////////////////////تنظیم دیبانسینگ کلیدها
  pinMode (buttonPinEsc, INPUT_PULLUP);
  pinMode (buttonPinEnter, INPUT_PULLUP);
  pinMode (buttonPinLeft, INPUT_PULLUP);
  pinMode (buttonPinRight, INPUT_PULLUP);

  esc.attach (buttonPinEsc);
  enter.attach (buttonPinEnter);
  right.attach (buttonPinRight);
  left.attach (buttonPinLeft);
  esc.interval (50);
  enter.interval (50);
  right.interval (50);
  left.interval (50);
////////////////////////////////////////////////////



  menu.getRoot ().add (menu1Item1);
  menu1Item1.addRight (menu1Item2).addRight (menu1Item3);
  menu1Item1.add (menuItem1SubItem1).addRight (menuItem1SubItem2);
  menu1Item2.add (menuItem2SubItem1).addRight (menuItem2SubItem2).addRight (menuItem3SubItem3);
  menu.toRoot ();

  }





void loop ()
  {

  }


void menuUse (MenuUseEvent used)
  {

  }


void menuChange (MenuChangeEvent changed)
  {

  }


void readBuutton ()
  {

  enter.update ();
  right.update ();
  left.update ();
  esc.update ();

  if ( enter.fell () )
    {
    lastButtonPushed = buttonPinEnter;

    }
  else if ( esc.fell () )
    {
    lastButtonPushed = buttonPinEsc;
    }
  else if ( right.fell () )
    {
    lastButtonPushed = buttonPinRight;
    }
  else if ( left.fell () )
    {
    lastButtonPushed = buttonPinLeft;
    }
  else{
    lastButtonPushed = 0;
    }
  }

اکنون باید تابعی بنویسیم که بعد از هر بار فشرده شدن کلید‌ها وضعیت بین منو‌ها تغییر کند. تابع مورد  نظر ما به صورت زیر می‌باشد:

void navigateMenus ()
  {

  //ایتمی که بر روی آن قرار داریم را بدست می آوریم
  MenuItem currentMenu = menu.getCurrent ();

  switch ( lastButtonPushed ){
      case buttonPinEnter:
        if ( !(currentMenu.moveDown ()) ){  //if the current menu has a child and has been pressed enter then menu navigate to item below
          menu.use ();
          }
        else{  //otherwise, if menu has no child and has been pressed enter the current menu is used
        menu.moveDown ();

          }
        break;
      case buttonPinEsc:

        menu.toRoot ();  //به ابتدای منو باز می گردیم

        break;
      case buttonPinRight:
        //به ایتم سمت راست حرکت می کنیم
        menu.moveRight ();
        break;
      case buttonPinLeft:
        //به آیتم سمت چپ حرکت میکنیم
        menu.moveLeft ();
        break;
    }
  lastButtonPushed = 0;
  }

اکنون برای نمایش دادن نام هر یک از ITEM ها در LCD هنگام جابه‌جایی در میان آیتم‌ها تابع menuChange را باید طبق کد‌های زیر توسعه دهیم:

void menuChange (MenuChangeEvent changed)
  {
  lcd.clear ();
  MenuItem newMenuItem = changed.to; //آیتمی را که بر روی آن قرار داریم بدست می آوریم


  if ( newMenuItem.getName () == menu.getRoot () ){
    lcd.print ("Main Menu       ");
    }
  else if ( newMenuItem.getName () == "Item1" ){
    lcd.print ("Item1           ");
    }
  else if ( newMenuItem.getName () == "Item1SubItem1" ){
    lcd.print ("Item1SubItem1");
    }
  else if ( newMenuItem.getName () == "Item1SubItem2" ){
    lcd.print ("Item1SubItem2   ");
    }
  else if ( newMenuItem.getName () == "Item2" ){
    lcd.print ("Item2           ");
    }
  else if ( newMenuItem.getName () == "Item2SubItem1" ){
    lcd.print ("Item2SubItem1   ");
    }
  else if ( newMenuItem.getName () == "Item2SubItem2" ){
    lcd.print ("Item2SubItem2   ");
    }
  else if ( newMenuItem.getName () == "Item2SubItem3" ){
    lcd.print ("Item2SubItem3   ");
    }
  else if ( newMenuItem.getName () == "Item3" ){
    lcd.print ("Item3           ");
    }
  }

و همچنین برای نمایش دادن نام هر یک از زیرمنوها که مورد استفاه (use) قرار می‌دهیم تابع  menuUse را طبق کد‌های زیر توسعه می‌دهیم:

void menuUse (MenuUseEvent used)
  {
  lcd.clear ();
  lcd.print ("You used        ");
  lcd.setCursor (1, 1);
  lcd.print (used.item.getName ());
  menuUs = used.item.getName ();
  }

و در پایان ؛ کد‌های نهایی پروژه به صورت زیر می‌باشد:

وسایل مورد نیاز

آردوینو Uno

میکروسوئیچ بزرگ

LCD کاراکتری ۲*۱۶

برد بورد