رابط های گرافیکی محصولات همیشه برای من خیلی جذاب هستند. به دلایل مختلفی مثل:

• تصویری بودن
• زیباتر بودن
• بامعنا بودن
• استفاده آسان تر

یکی از دلایلی که من آی‌کد را هم خیلی دوست دارم همین قابلیت طراحی رابط های گرافیکی برای پروژه های سخت افزاری است. رابط گرافیکی یا به اختصار GUI (Graphic User Interface)، همان چیزی است که شما هر روز با آن سر و کار دارید. وقتی با گوشی هوشمندتان بازی می‌کنید، وقتی یک برنامه را روی کامپیوتر باز می‌کنید و یا حتی وقتی با ریموت کنترل تلویزیون خود کار می‌کنید، در حال استفاده از یک رابط گرافیکی هستید.

دقت کردید؟ گفتم کنترل تلویزیون! البته که کنترل یک محصول نرم افزاری نیست. معمولاً هر وقت صحبت از رابط گرافیکی می شود همه حواسشان به اپلیکیشن ها و نرم افزارها می رود اما هر محصولی برای خودش یک رابط گرافیکی دارد. مثلاً یک جاروبرقی که مامان ها در خانه بیشتر با آن سروکار دارند، با داشتن یک رابط گرافیکی پیچیده می تواند اعصاب مامان ها را حسابی خورد کند. مثلاً اگر دکمه ها در محل خوبی قرار نگرفته باشند، بیرون کشیدن سیم جاروبرقی سخت باشد؛ یا شیوه عوض کردن کیسه جاروبرقی پیچیده باشد. پس محصولات فیزیکی و مکانیکی هم از رابط های گرافیکی استفاده می کنند.

اوه یک مثال عالی به ذهنم رسید! چند وقت پیش سوار اتوبوس بین شهری شده بودم. اتوبوس قدیمی بود. صندلی من خیلی عقب رفته بود و در طول مسیر 4-5 ساعته سفرم خیلی اذیت شدم. هر از گاهی دستم را زیر صندلی می بردم تا دنبال یک دکمه یا اهرم بگردم که پشتی صندلی را جلوتر بیاورم. چندین بار این کار را کردم اما موفقیت آمیز نبود. بالاخره کمردرد چنان من را آشفته کرد که خم شدم تا زیر صندلی را نگاه کردم، صندلی های بقیه مسافران را برانداز کردم تا متوجه شدم آن اهرم لعنتی کجاست؟! تقریباً اواخر مسیر بودیم ولی خوشحال کننده بود. اما وقتی اهرم را تکان دادم متوجه شدم خراب است و صندلی به همین شکل مانده است. در عوض حالا می دانستم خراب است و در کل مسیر به اینکه اهرم کجاست فکر نمی کردم. این یک رابط گرافیکی بد بود که مرا در کل مسیر کلافه کرده بود.

رابط گرافیکی چیست؟

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

معرفی پنل آی‌کد

حالا من می خوام پروژه قبلی که با آی‌کد انجام دادم را توسعه دهم و کامل تر کنم. می خوام یک رابط گرافیکی برای این پروژه طراحی کنم. آی‌کد یک فضای شبیه سازی و طراحی دارد که رابط گرافیکی را در آن بخش قرار می دهیم. این فضا در آی‌کد “پَنِل” نام دارد. پنل معادل انگلیسی Panel است و واژه فارسی خوبی برایش پیدا نکردم! به همین دلیل و به دلیل کاربرد شناخته شده این کلمه در رباتیک و اتوماسیون ما هم از همین کلمه استفاده کرده ایم.

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

همانطور که می بینید من از یک بلوک نارنجی رنگ استفاده کرده ام که مقدار یک متغیر به نام “پیام” را با کلیک شدن هر یک از دایره ها عوض می کند. اگر دایره قرمز کلیک شود پیام برابر خواهد شد با قرمز و اگر دایره آبی کلیک شود پیام برابر خواهد شد با آبی. این روش در برنامه نویسی بسیار پرکاربرد است. این روش برای تشخیص این است که کاربر چه چیزی را انتخاب کرده است.

سپس با استفاده از بلوک شرطی “اگر” وضعیت “پیام” را بررسی می کنیم. حالا بقیه مراحل ساده می شود. اگر دایره آبی کلیک شده باشد پایه های 3 و 4 به گونه ای مقدار دهی می شوند که رنگ LED آبی باشد و برعکس.

به نظرتان چطور می شود این رابط گرافیکی کنترل ال ای دی آردوینو را جذاب تر کرد؟