فیلم آموزش TFT LCD با TouchGFX و STM32

فیلم آموزش TFT LCD با TouchGFX و STM32 یوبرد برای ساخت یک Embedded Graphics  (گرافیک سیستم های تعبیه شده) در آموزش پیشرفته STM32 تدارک دیده شده است. ببینیم منظور از Embedded و Graphics چه چیزهایی می تواند باشد:

• کلمه Embeddedمعنای مختلفی دارد. برای برخی، به معنای یک میکروکنترلر 8 بیتی بدون سیستم عامل، و تقریباً بدون RAM و ROM است. در جای دیگر ممکن است به معنای یک تلفن هوشمند مدرن با گیگابایت ها حافظه باشد.
• دوم اینکه کلمه Graphicsتعابیر زیادی دارد. برای برخی به این معنی است که پیکسل ها در برنامه ای ساده ترسیم شود. برای برخی صرفا راه اندازی LCD رنگی و برای برخی دیگر به معنای نرم افزار رندر سه بعدی است که روی کنسول بازی شما اجرا می شود.

و اما منظور ما از کلمات Embedded و Graphics در فیلم آموزش TFT LCD با TouchGFX و STM32 چیست؟

• در چهارچوب این آموزش و از نظر TouchGFX (در ادامه می بینیم که TouchGFX چیست)، منظور از سیستم‌های تعبیه شده (Embedded) به معنای هر سیستمی است که مبتنی بر میکروکنترلرهای STM32 باشد. و Graphics به معنای برنامه های تعاملی با رابط کاربری است که با سرعت 60 فریم در ثانیه اجرا می شود.

تصویر 1 –نمونه ای از صفحات طراحی شده در نرم افزار TouchGFX در فیلم آموزش TFT LCD با TouchGFX و STM32

فیلم آموزش TFT LCD با TouchGFX و STM32 یوبرد برای راه اندازی و ساخت یک محیط گرافیکی با میکروکنترلرهای STM32 تدارک دیده شده است. هدف صرفا راه اندازی LCD رنگی با STM32 نیست. وقتی به سراغ استفاده از نمایشگرهای گرافیکی مثلا TFT LCD می رویم، هدف ساخت یک رابط گرافیکی کاربر پسند و امروزی است. اینکه ما از TFT LCD استفاده کنیم و همان متنی که روی LCD کارکتری نشان می دادیم را روی نمایشگر TFT LCD نشان دهیم، قدم مفیدی نبوده است. یا جالب توجه نیست که حداکثر از یک تصویر پس زمینه و یک سری اشکال هندسی استفاده کنیم. باید بتوانیم یک GUI با میکروکنترلر (Graphical User Interface) پیاده سازی کنیم. در این آموزش STM32 یوبرد، ما رابط های گرافیکی می سازیم که نمونۀ آن را در ویدئوهای موجود در این صفحه می توانید ببینید.

گرافیک LCD را خودمان طراحی کنیم یا به نرم افزارهای مربوطه بسپاریم؟

ساخت یک GUI با کتابخانه ها و توابعی که خودمان بنویسیم کار بسیار دشوار و زمانبر است. تصور کنید که محیط گرافیکی که در ویدئوهای این صفحه آنها را بررسی کردیم را بخواهیم کاملا با استفاده از توابع خودمان پیاده سازی کنیم. شاید این کار ماه ها زمانبر باشد. اگر بخواهیم محیط گرافیکی را تغییر دهیم و از المان های دیگری استفاده کنیم، باید مجددا این زمان را صرف کنیم. همچنین هرچقدر که محیط گرافیکی جلوه های پیچیده تری داشته باشد، کار دشوارتر می شود. توجه داشته باشید که منظور ما صرفا راه اندازی LCD TFT با STM32  نیست. منظور ما ساخت یک رابط کاربری حرفه ای برای یک محصول مبتنی بر میکروکنترلر است. امروزه حتی شرکتهای بزرگ خودروسازی مثل تسلا، شرکت های بزرگ ساخت تجهیزات پزشکی، شرکت های ساخت تجهیزات صنعتی هم خودشان این کار را انجام نمی دهند و از نرم افزارهایی به این منظور استفاده می کنند. در فیلم آموزش TFT LCD با TouchGFX و STM32 هدف ما ساخت یک محیط گرافیکی حرفه ای بر روی یک نمایشگر گرافیکی است.

نرم افزارهای موتور گرافیکی مثل TouchGFX چه می کنند؟ TouchGFX چیست؟

این نرم افزارها شامل یک محیط Designer هستند که در آن گرافیک موردنظرمان را طراحی می کنیم. این گرافیک حرفه ای طراحی شدۀ ما توسط نرم افزار به کد تبدیل می شود. در نهایت این نرم افزار Designer به ما یک سورس کد می دهد که آنچه که ما طراحی کردیم به آن سورس کد تبدیل شده است. سورس کد خروجی TouchGFX به زبان C++ است. همچنین بسیاری از موارد دیگر نیز در این سورس کد انجام شده است. مثلا فایل Linker مناسب ساخته می شود. این فایل Linker باعث می شود که هر دیتا در جایگاه مناسب برنامه ریزی شود مثلا:

1. دیتاهای تصاویر و متن ها که به آنها Assets یا دارایی های برنامه گفته می شود، در حافظۀ مربوطه قرار بگیرد. این دیتاها معمولا بیشترین حجم برنامه را به خود اختصاص می دهند و معمولا FLASH خارجی ذخیره می شوند. همچنین کدهای مربوط به اشیایی که در صفحه نمایشگر مدیریت و نمایش داده می شود، و همچنین مابقی کدهای برنامه در حافظه FLASH داخلی ذخیره می شود.
2. متغیری که حاوی دیتایی است که باید روی نمایشگر نشان داده شود FrameBuffer نام دارد. این متغیر نیز یک متغیر حجیم است و حجم آن برابر تعداد پیکسل های طول نمایشگر * تعداد پیکسل های عرض نمایشگر * عمق رنگ بر حسب بایت است. این متغیر نیز معمولا در حافظۀ RAM خارجی است. مابقی دیتاهای موقت در RAM داخلی ذخیره می شود.

همچنین سورس کدی که موتور گرافیکی TouchGFX می سازد، در معماری MVP یا Model View Presenter است. این معماری بسیار معروف و مورد استفاده در اکثر زمینه های برنامه نویسی مثل برنامه نویسی تحت وب و … است. با هدف راه اندازی LCD TFT با STM32 می توان گفت که TouchGFX بهترین گزینه است. با آموختن معماری معروف MVP یا MVC (Model View Controller) در این آموزش، درصورتی که روزی بخواهید وارد زمینه های دیگر برنامه نویسی بشوید، آمادگی خوبی خواهید داشت. چرا که از این معماری در بسیاری از پلتفرم های برنامه نویسی برای موبایل، دسکتاپ و وب نیز استفاده می شود.

تصویر 2 – معماری MVP در Touchgfx

TouchGFX وظایف خودش را جدا از دیگر وظایف میکروکنترلر پیاده می کند. به نحوی که ما می توانیم به راحتی تمام دیگر کارهای میکروکنترلر مثل خواندن سنسورها، کنترل موتور، کنترل ورودی خروجی ها و … را به همان روال گذشته، انجام دهیم. به نحوی که حتی اگر یک محصول صنعتی داریم و سالها بدون رابط کاربری گرافیکی توسعه داده شده است و بخواهیم با استفاده از TouchGFX برای آن رابط گرافیکی کاربرپسند و امروزی اضافه کنیم، این کار قابل انجام است و چندان دشوار نخواهد بود. همچنین می توانیم TouchGFX را هم با استفاده از OS استاندارد و هم بدون استفاده از OS استاندارد مثل FreeRTOS راه اندازی کنیم. در زمان استفاده از OS، موتور گرافیکی TouchGFX در یک تسک با اولویت متوسط پیاده می شود. و در زمانی که از OS استفاده نمی شود و برنامه در یک حلقه While بصورت Superloop کار می کند، TouchGFX در یک تابع در حلقه While پیاده می شود.

آموزش FreeRTOS یوبرد.

تصویر 3 – مثالی از تخصیص تسک در یک پروژۀ TouchGFX

در فیلم آموزش TFT LCD با TouchGFX و STM32 می بینیم که TouchGFX از نوع نمایشگر و درایور نمایشگر، نوع Touch و درایور آن و حافظه ها مستقل است. همۀ انواع نمایشگر، درایورهای نمایشگرها، انواع Touch و حافظه ها، با TouchGFX مدیریت می شود. به عبارتی مواردی مثل راه اندازی OLD با STM32، راه اندازی ILI9341 با STM32، راه اندازی SSD1963 با STM32، راه اندازی FT800 با STM32، راه اندازی ILI9488 با STM32 همه با TouchGFX قابل انجام است. TouchGFX یک موتور گرافیکی ساخت شرکت ST برای ساخت رابط کاربری برای میکروکنترلرهای STM32 است که با سرعت 60 فریم در ثانیه اجرا شود. احتمالا تا به اینجا متوجه شده ایم که TouchGFX چیست. البته TouchGFX ویژگی های بسیار دیگری هم دارد که بررسی آنها در این صفحه نمی گنجد و در آموزش بررسی خواهد شد.

ویدئوی 1 – دموی TouchGFX ارائه شده توسط ST.

مقایسۀ TouchGFX و EMWIN

بطور کلی EMWIN قابل مقایسه با TouchGFX نیست. کسانی که با EMWIN آشنایی دارند با آموزش TouchGFX در همان ابتدا این موضوع را متوجه می شوند. برای درک بهتر این موضوع ابتدا یک مقدمه ارائه می شود. موتورهای گرافیکی را می توان به دو دسته اصلی تقسیم کرد:

1. موتورهای گرافیکی حالت فوری (Immediate mode): یک API یا Application Programming Interface ارائه می‌کنند که به برنامۀ توسعه دهنده امکان می‌دهد مستقیماً اشیا را در نمایشگر نمایش دهد. این مسئولیت برنامۀ توسعه دهنده است که اطمینان حاصل کند که عملیات ترسیم صحیح در زمان مناسب فراخوانی شده است. به عبارتی اگر در نمایشگر خود چند صفحه داشته باشیم که هر صفحه تعدادی ویجت های گرافیکی دارد، باید هم سیکل نمایش هر ویجت و ارتباط آنها با هم و هم انتقال بین صفحات مختلف و امور بسیار دیگر را خودمان مدیریت کنیم. و موتور گرافیکی حالت فوری مثل EMWIN صرفا ویجت ها را برای ما می سازد و توابعی برای ساخت آنها در اختیار ما قرار می دهد و مدیریت آنها بر عهدۀ ما است.
2. موتورهای گرافیکی حالت حفظ شده (Retained mode): به کاربر اجازه می دهند مدلی انتزاعی از اجزای نمایش داده شده را به میل خود ویرایش کند. موتور گرافیکی حالت حفظ شده، ترجمه این مدل به عملیات ترسیم گرافیکی صحیح و مدیریت آن در زمان های مناسب است. به عبارتی ما در یک موتور گرافیکی حالت حفظ شده مثل TouchGFX صرفا در نرم افزار TouchGFX Designer صفحات مختلف خود را طراحی می کنیم. در مدیریت صفحه نمایش ما دو مفهوم Trigger و Action را داریم. که Trigger به عواملی گفته می شود که باعث یک تغییر در صفحه نمایش شوند. مثلا زمانی که یک قسمت از صفحه نمایش لمس شود یا انتقال یک فریم انجام شود و … . و Action نیز به تغییری در صفحه نمایش که با وقوع یک Trigger اتفاق می افتد گفته می شود. مثلا صفحۀ نمایش داده شده روی LCD عوض شود و به یک صفحه دیگر برود یا مثلا یک تابع به یک نام خاص برای ما ساخته شود که ما خودمان کد بنویسیم که چه اتفاقی بیفتد. در قسمتی از این نرم افزار بخشی به نام Interactions وجود دارد که دو عامل Trigger و Action قابل تعریف با جزئیات بیشتر هستند.

احتمالا با این توضیحات تا حدودی متوجه تفاوت اصلی EMWIN و TouchGFX شده اید. همچنین سورس کدی که موتور گرافیکی TouchGFX در اختیار ما قرار می دهد بسیار حرفه ای است. یک کد C++ شی گرا و در معماری MVP است. که قابل مقایسه با توابع گسستۀ EMWIN نیست. همچنین نرم افزار TouchGFX Designer منطبق بر نرم افزار STM32CubeMX است. به عبارت دیگر پروژه ای که با TouchGFX Designer ساخته می شود، یک فایل STM32CubeMX هم خواهد داشت و کاملا از کتابخانه های STM32CubeMX استفاده می کند و کتابخانه های خود را بر روی STM32CubeMX پیاده می کند. با آموزش TouchGFX دیگر نیازی به آموزش EMWIN در STM32 نیست. معمولا افرادی که قصد پیاده سازی یک رابط گرافیکی برای میکروکنترلر را دارند با جستجوی عبارتی مثل راه اندازی LCD رنگی با میکروکنترلر، به آموزش EMWIN می رسند. چرا که EMWIN قدیمی بوده و آموزش فارسی آن وجود دارد. اما آموزش TouchGFX یوبرد، اولین آموزش TouchGFX به زبان فارسی است. هدف ما این بوده که با فیلم آموزش TFT LCD با TouchGFX و STM32، راه اندازی LCD TFT با STM32 و حتی ساخت یک GUI برای STM32 در زمان بسیار کوتاهی انجام می شود.

ویدئوی 2 – ارائۀ پروژۀ انجام شده در آموزش TouchGFX

سخت افزار راه اندازی TFT LCD

بحث سخت افزار راه اندازی TFT LCD معمولا برای توسعه دهندگان در این زمینه چالش است. سخت افزار این آموزش برد توسعۀ STM32F7 Discovery با میکروکنترلر STM32F746NGH است. هدف این بوده که با استفاده از این برد توسعه در این آموزش هیچ درگیری سخت افزاری وجود نداشته باشد. آموزش TouchGFX دو جلسه است. جلسۀ 8 ساعتۀ فعلی، جلسۀ اول این آموزش است. درگیر شدن با سخت افزار و طراحی سخت افزار برای میکروکنترلر STM32 خاص خودمان در جلسۀ بعدی این آموزش بررسی خواهد شد.

تصویر 4 – touchgfx در نمایشگرهای مختلف

چرا آموزش TFT LCD با TouchGFX و STM32 یوبرد؟

1. تمام مقدمات لازم درمورد موتورهای گرافیکی و اجزا و اصول عملکرد آن، رنگ ها و هرآنچه درمورد آنها برای ساخت یک Embedded Graphics باید بدانیم، چالش انتخاب سخت افزار از جمله میکروکنترلر، حافظه ها و صفحه نمایش، چالش های ساخت یک محیط گرافیکی با میکروکنترلر، اصول بالابردن راندمان در یک امبدد گرافیک، اصول استفاده از OSدر پروژه های Embedded Graphicsبرای اولین بار بصورت یکپارچه و در یک منبع در چند ساعت بررسی می شوند.
2. بررسی کامل معماری MVP و ساختار کدها در آن باتوجه به اینکه TouchGFX مبتنی بر این معماری است.
3. بررسی مفصل نرم افزار TouchGFX Designer و ابزارهای آن
4. ساخت یک پروژۀ خوب در این آموزش با ارتباط بین لایه های Model و View و Presenter در کدهای TouchGFX و ارتباط TouchGFXدر کنترل و فرمان با دیتاهای سمت میکروکنترلر مثل دیتاهای سنسورها و عملگرهای مختلف.

سرفصل های آموزش TFT LCD با TouchGFX و STM32 یوبرد

• مفاهیم اولیه: شامل چهار بخش اصلی Embedded Graphics شامل RAM و FLASHو  MCU و  LCD، فرمت های رنگ، عمق رنگ، فرمت های تصویری، فرمت های متنی، کیفیت تصویر، Frame Buffer، موتور گرافیکی، حلقه اصلی موتور گرافیکی شامل Collect و Update و Render، مدیریت Frame Buffer تکی و دوتایی، اندازه گیری زمان رندرینگ، شمارش فریم های از دست رفته و جبران آن، تعداد لایه ها در گرافیک و دیگر نکات افزایش راندمان یک امبدد گرافیک، اصول استفاده از OS در پروژه های Embedded Graphics است.
• انتخاب سخت افزار: هدف از این بخش ارائه نکات برای ملاحظاتی است که قبل از تصمیم گیری در مورد سخت افزار باید در نظر گرفته شود. مواردی از جمله فرکانس پردازنده و واحدهای مرتبط با گرافیک، ویژگی های شتاب دهندۀ سخت افزار، کدک سخت افزاری، FLASH و RAM داخلی، کنترلر LCD، ورودی خروجی ها، رابط حافظه، معماری پردازنده و باس ها، نوع صفحه نمایشگر، ویژگی های نمایشگر، روشنایی و نور پس زمینه، زاویه دید، طول عمر نمایشگر، تراکم پیکسل، محیط مورد استفاده، نمایشگر لمسی/غیرلمسی، صفحه نمایش با RAM، پیکسل های غیر مربعی، لنز پوششی، تراکم، کارایی، نوع رابط، لایحه مواد، استراتژی FrameBuffer و مصرف انرژی مورد بررسی قرار می گیرند.
• معماری MVP: بررسی کامل معماری MVP و این معماری در TouchGFX، مزایای معماری MVP، ارتباط بین قسمت UI و غیر UI در پروژه انجام می شود.
• نصب نرم افزارها: تمام نرم افزارهای موردنیاز این آموزش از جمله STM32CubeMX و STM32CubeIDE و TouchGFX و STM32CubeProg نصب و ارتباط بین آنها بررسی می شود.
• ساخت پروژه: ساخت پروژه در TouchGFX و راحت ترین روش ساخت پروژه بررسی می شود.
• انجام پروژه: یک پروژه با 6 صفحه که در معرفی این آموزش می توانید ببینید، در TouchGFX Designer ساخته می شود. سپس با کدنویسی، دیتاهایی را از سمت میکروکنترلر برای نمایش روی LCD ارسال می کنیم و همچنین دیتاهایی که با فشردن کلیدها از صفحه نمایش دریافت می شود را برای میکروکنترلر ارسال می کنیم. این کدنویسی بصورت اصولی در معماری MVP انجام می شود.

 دانلود STM32CubeMX دانلود نرم افزار STM32CubeIDE دانلود نرم افزار TouchGFX

مخاطبان و پیش نیازهای آموزش TFT LCD با TouchGFX و STM32 یوبرد

• باتوجه به اینکه کدهای خروجی TouchGFX در زبان C++بوده برای بهره مندی کامل از این آموزش نیاز است که آموزش زبان C++ میکروکنترلر گذرانده شده باشد.
• آشنایی قبلی با میکروکنترلرهای STM32 و نرم افزار STM32CubeMX درحد آموزش مقدماتی STM32 یوبرد نیاز است.
• توضیحات کامل درمورد معماری MVP در این آموزش ارائه شده است. و نیازی پیشین به دانش درمورد این معماری نیست.

اهداف یوبرد از آموزش TFT LCD با TouchGFX و STM32

تا قبل از پرداخت یوبرد به مبحث ساخت رابط گرافیکی برای میکروکنترلرها، این مبحث یکی از مباحث چالش برانگیز و سخت در کشور بوده است. با ارائۀ این آموزش در آموزش پیشرفته STM32 امید داریم که از این پس این مبحث، مقولۀ سختی نباشد.

پیش نمایش 1 – بخشی از مبحث مصرف حافظه

پیش نمایش 2 – معرفی پروژۀ اول آموزش TouchGFX

پیش نمایش 3 – بخش کوتاهی از توضیح نمونه کد پروژه اول