ماژول هایی برای آینه جادویی خود ایجاد کنید

آیا نمی توانید ماژول مناسب برای آینه جادویی رزبری پای خود را پیدا کنید؟ چرا افزونه ی مخصوص خودتان را نمیسازید؟ در این آموزش ما یک ماژول سرگرم کننده برای MagicMirror2 ایجاد می کنیم.

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

 

01 آینه تان را تنظیم کنید

برای اطمینان از این که اشتباهی صورت نگیرد، توصیه می کنیم همه چیز را به جز ساعت از صفحه نمایش خود حذف کنید – که از آن برای بررسی کارکردن همه چیز به نحو درست استفاده خواهیم کرد. زیرا MagicMirror2 تمام تلاش خود را می کند تا در صورت خرابی یک ماژول، کارکرد خود را حفظ کند و ادامه دهد. با وارد شدن به عنوان کاربر “pi” ، ابتدا یک کپی از فایل پیکربندی تهیه کنید:

cp ~/MagicMirror/config/config.js

~/MagicMirror/config/config-backup.js

حالا نگاهی به فایل پرونده بیندازید:

nano ~/MagicMirror/config/config.js

متنی با فرمت JSON را مشاهده خواهید کرد. بخش “modules” را پیدا کرده و همه چیز را حذف کنید تا به این شکل باشد:

] :modules

                   }

                           module: “clock”,

                           position: “top_left”

                   {

[

CTRL+X و سپس Y را برای ذخیره کردن فشار دهید. اکنون نرم افزار را مجدداً راه اندازی کنید تا مطمئن شوید همه چیز درست است:

pm2 restart MagicMirror

 

02 نحوه کدگذاری را انتخاب کنید

اگر نمی توانید با صفحه نمایش و صفحه کلید به آینه  دسترسی پیدا کنید، باید راهی برای کدگذاری روی رزبری پای بیابید. در صورت تمایل می توانید از SSH استفاده کرده و از nano یا vi استفاده کنید. اگر سرویس گیرنده SFTP دارید، می توانید از آن برای دسترسی به فایل های فهرست اصلی خود استفاده کنید و سپس روی رایانه معمولی خود با استفاده از ویرایشگر کد جاوا اسکریپت مانند Visual Studio Code کار کنید. MagicMirror2 با استفاده از جاوا اسکریپت نوشته شده است. بنابراین نمی توان از ویرایشگرهای پایتون مانند Thonny استفاده کرد.

 

03 نحوه ایجاد یک ماژول

هر ماژول MagicMirror2 یک فایل جاوا اسکریپت است و کد داخل آن کلاس نامیده می شود. کلاس دارای چندین متد داخلی است (مانند توابع) که ما آنها را نمی بینیم و سرور آنها را فرا می خواند تا اطلاعات مورد نیاز برای ایجاد صفحه نمایش را بدست آورد. کاری که ما باید انجام دهیم این است که یک یا چند روش را برای بدست آوردن خروجی مورد نظر خود جایگزین کنیم. همه ماژول ها را در فهرست ~/MagicMirror/modules پیدا خواهید کرد. در کمال تعجب، نمایشگرهای داخلی مانند ساعت در حالت “پیش فرض” هستند. یک پوشه در کنار پیش فرض به نام (MMM = Magic Mirror Module) ایجاد کنید. در داخل پوشه ، یک فایل خالی با نام MMM-Hello-World.js ایجاد کنید.

ماژول آینه جادویی رزبری پای

روبات های Smol توماس هیسمن-هانت در جامعه رزبری پای محبوب هستند. او حتی ربات Pi Wars را طراحی کرده است!

ماژول آینه جادویی رزبری

04 Hello World

همانطور که احتمالاً حدس زده اید ما قصد داریم یک ماژول ساده “Hello World” ایجاد کنیم. با استفاده از ویرایشگر کد، کد را در list1.js (یا از magpi.cc/mm4git دانلود کنید) وارد کنید. در صورت تمایل از نانو استفاده کنید. اما یک ویرایشگر مناسب انواع هایلایت کردن و بررسی syntax را انجام می دهد که اصلاحا غلط املایی و اشکالات را بسیار آسان می کند. کد، متد “getDom” را لغو می کند که وقتی سرور از ما می خواهد برخی از محتوا را برگردانیم، فراخوانی شود. در اینجا ما یک عنصر HTML ، “div” ایجاد می کنیم و متنی را که در قسمت پیش فرض تعریف شده است به آن اضافه می کنیم. سپس آن کد HTML را به سرور باز می گردانیم تا روی صفحه نمایش قرار گیرد.

 

05 امتحان کن!

برای اینکه پیام ما روی صفحه نمایش داده شود، باید از MagicMirror2 بخواهیم که ماژول را بارگذاری کند. برگردیم به فایل پیکربندی:

nano ~/MagicMirror/config/config.js

همانطور که قبلاً انجام دادیم. بلوک ‘modules’ را پیدا کنید و آن را به صورت زیر تغییر دهید:

] :modules

 }

 module: “clock”,

position: “top_left”

 {,

 }

 “,module: “MMM-Hello-World

 “position: “lower_third

 {

[

فایل را ذخیره کرده و MagicMirror2 را مانند مرحله قبل راه اندازی مجدد کنید. اکنون باید “Hello World!” را در پایین آینه مشاهده کنید. شما اولین ماژول خود را ایجاد کرده اید! همچنین می توانید یک پیام سفارشی در config.js به این شکل مشخص کنید:

}

 “module: “MMM-Hello-World

 “position: “lower_third

 } :config

 “text: “MagPi rocks

 {

}

این کار هر چیز “پیش فرض” در ماژول را لغو میکند.

 

06 ماژول Smol Robots را ایجاد کنید

بیایید کمی حرفه ای تر به موضوع نگاه کنیم. توماس هیسمن-هانت چند بار در هفته روبات های کوچک زیبا می کشد و آنها را در توییتر پست می کند. بنظرتان جذاب نیست که وقتی صبح به آینه نگاه می کنیم با استقبال روبات کوچولویی روبرو شویم؟ خوشبختانه، تام پنتون یک API ایجاد کرده است که به ما امکان می دهد جدیدترین ربات را بیاوریم. بنابراین می توانیم از آن برای گرفتن تصویر ربات و نمایش آن استفاده کنیم. یک دایرکتوری تحت ماژول ها ایجاد کنید:

mkdir ~/MagicMirror/modules/MMM-Smol-Robots

اکنون یک فایل جاوا اسکریپت مطابق آن ایجاد کنید:

touch ~/MagicMirror/modules/MMM-Smol-Robots/ MMM-Smol-Robots.js

 

07 دسترسی به API

فایلی را که در مرحله قبل ایجاد کرده اید در ویرایشگر مورد علاقه خود باز کرده و کد را در list2.js وارد کنید. این جاوا اسکریپت است، بنابراین مراقب پرانتزها و نقطه ویرگول باشید. باز هم «getDom» را لغو می کنیم اما این بار از تابع «fetch» داخلی برای به دست آوردن اطلاعات از API روبات های Smol استفاده می کنیم. اگر می خواهید آنچه را که دریافت می کنیم ببینید ، URL زیر را در یک مرورگر وب وارد کنید:

https://mrpjevans.com/smol/api/latest/1

چیزی که فراخوانی می شود، بلوکی از داده های فرمت JSON درباره آخرین ربات است. شما باید بتوانید نام، توضیحات و از همه مهمتر محل فایل تصویر را پیدا کنید.

ماژول آینه جادویی رزبری

 

08 یک ربات بگیرید!

کد خود را ذخیره کرده و مجدداً فایل پیکربندی را ویرایش کنید تا ماژول ‘Hello world’ جایگزین شود. بلوک ماژول های فایل پیکربندی شما باید به این شکل باشد:

] :modules

}

 “module: “clock

 “position: “top_left

 {,

 }

 “module: “MMM-Smol-Robots

 “position: “lower_third

 {

 [

مجددا MagicMirror2 را مانند قبل راه اندازی کنید. در عرض چند ثانیه، یک ربات دلپذیر صفحه شما را مزین می کند. کد به API دسترسی پیدا کرده ، آدرس URL را در تصویر قرار داده است و یک بلوک از HTML ایجاد کرده است که تصویر را در اندازه مناسب فراخوانی می کند (با خیال راحت آن را اصلاح کنید). سپس کد HTML تولید شده به سرور بازگردانده می شود و آن را در موقعیت دلخواه قرار می دهد.

 

09 بیایید منفی نگر باشیم

اما صبر کنید! مشکلی وجود دارد! روبات های Smol همیشه جوهر سیاه روی صفحه ی سفید هستند که با آینه ما خوب کار نمی کند. مطمئناً این به شما بستگی دارد که از نمایش به این شکل راضی باشید یا نه. اما اگر بتوانیم عکس را وارونه کنیم، بسیار بهتر به نظر خواهد رسید. خوشبختانه دنیای قدرتمند CSS (Cascading Style Sheets) می تواند این کار را انجام دهد. خطی را که می خوانید پیدا کنید:

;”;img.style = “width: 300px

حالا آن را تغییر دهید تا به این شکل خوانده شود:

;”;img.style = “width: 300px; filter: invert(1)

“فیلتر” یک روش قدرتمند برای تغییر سبک است که می تواند انواع ترفندها را روی تصاویر پیاده کند. در این مورد از آن برای تغییر رنگ ها استفاده میکنیم. فایل را ذخیره کرده و آینه جادویی خود را دوباره بارگیری کنید. بله، این بسیار زیباتر است: به نظر می رسد که ربات ما اکنون روی صفحه شناور است.

 

10 ربات های بیشتر!

ربات ما در حال نمایش است. اما وقتی یک ربات جدید از آزمایشگاه Smol Robots رها می شود چطور؟ به طور معمول این اتفاق چند بار در هفته رخ می دهد. بنابراین یک بررسی روزانه باید کافی باشد. ما می توانیم این کار را با تنظیم یک تابع زمان سنج برای رفرش کردن ماژول انجام دهیم. درست بعد از بلوک “پیش فرض (defaults)” ، listing3.js را اضافه کنید. این لغو کردن یکبار هنگام راه اندازی سرور فراخوانی می شود. ما از آن برای تنظیم زمان سنجی استفاده می کنیم که یک بار در روز updateDom را فرا میخواند (که به نوبه ی خود باعث فعال شدن getDom می شود). می توانید این مقدار را در قسمت پیش فرض یا تعیین مقدار در config.js تغییر دهید. اکنون ربات های شما مانند جادو ظاهر می شوند.

 

11 انتشار ماژول ها

اگر ایده ای برای یک ماژول دارید و اکنون دانش کافی برای شروع اینکار دارید، عالی است! پس از اتمام کار چرا آن را با جامعه به اشتراک نگذارید؟ صفحه اصلی ماژول ها magpi.cc/mirrormodules است. توصیه می کنیم ماژول خود را در سرویسی مانند GitHub به اشتراک بگذارید. سپس می توانید این صفحه وب را ویرایش کرده و ماژول خود را به لیست اضافه کنید. اطمینان حاصل کنید که دستورالعمل ها را بخوانند (و پیروی کنند) و برای ارائه پشتیبانی آماده باشید.

 

12 آزمایش کنید

این قسمت فقط یک معرفی کوتاه برای دنیای ماژول های MagicMirror2 بوده است. اطلاعات زیادی در اسناد رسمی (magpi.cc/mm2doc) وجود دارد که در آن می توانید با سایر ترفندهای ممکن آشنا شوید. همانطور که در اینجا با جهان خارج ارتباط برقرار کرده اید. می توانید با سایر ماژول ها ارتباط برقرار کنید. ماژول آب و هوا می تواند دما را به شما بگوید یا در صورت وجود اطلاعات جدید به شما هشدار دهد. تقویم، هشدار را هنگام وقت ملاقات پخش می کند و شما می توانید به آن واکنش نشان دهید. امیدواریم برنامه ریزی داشته باشید وما دوست داریم نتایج را ببینیم.

ماژول آینه جادویی رزبری

 

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

گردآوری و ترجمه:صبا علیزاده

منبع: The official Raspberry Pi Handbook

 

کتاب راهنمای رسمی شروع کار با رزبری پای