آموزش نرم افزار اینترنت اشیا Node RED – بخش هشتم – قرار دادن عکس در محیط UI

نرم افزار نودرد Node Red یک پلتفرم اپن سورس برای راه اندازی پروژه‌های اینترنت اشیاء است. این نرم افزار توسط IBM طرح ریزی و تولید شده است. نگرش طراحی این نرم افزار، ایجاد یک پلتفرم برای کاربران بدون نیاز به دانش فنی بوده است. از این رو کاربران بدون نیاز به دانستن دانش کدنویسی می‌توانند پروژه‌های ساده تا حرفه‌ای را طراحی و پیاده سازی کنند. در این پلت فرم همه چیز به صورت پازل به هم مرتبط می‌شوند. وب سایت دیجی اسپارک به عنوان مرجع تخصصی اینترنت اشیاء IOT به زبان فارسی اولین مرجع نرم افزار اینترنت اشیاء Node Red به زبان فارسی است. در مجموعه آموزش‌های نود رد Node Red به صورت بخش بندی شده کار با این نرم افزار را به صورت پروژه محور آموزش می‌دهیم. در ادامه بخش اول آموزش کار با نرم افزار اینترنت اشیاء Node Red با مرجع تخصصی اینترنت اشیاء دیجی اسپارک همراه باشید.

محیط گرافیکی UI

محیط UI یک محیط گرافیکی جذاب برای کنترل وضعیت هر یک از خروجی‌ها در فلو های ایجاد شده در Node-RED می‌باشد. دسترسی به محیط UI و بررسی نودهای زیر شاخه آن در پست کنترل وسایل الکترونیکی از راه دور- بخش دوم کامل آموزش داده شده است. در واقع ui یک محیط گرافیکی ساده و جداب با کاربری بسیار ساده می‌باشد. در محیط ui کنترل فلوهای – Flow ایجاد شده با استفاده از سوییچ، کلید، فلوچارت و نودهای دیگری که در بخش UI قرار دارد، قابل کنترل است. در بسیاری از پروژه های اجرا شده در کنار کلید های کاربری UI متن و تصویر هم برای شرح وضعیت قرار داده شده است. در این بخش نحوه ی قرار دادن تصویر – Image در محیط گرافیکی UI را آموزش خواهیم داد.

ذخیره عکس در وب سرور:

برای نمایش تصویر – Image در محیط UI باید ابتدا تصویر مورد نظر را در یک وب سرور آپلود کنیم. برای این منظور سایت های متنوعی تحت عنوان آپلود عکس وجود دارد. در این آموزش من از سایت imgur.com استفاده می‌کنم که برای دسترسی به آن نیاز به VPN خواهید داشت. در ابتدا وارد سایت شده و لاگین – login شوید. برای نمایش تصویر – Image در UI، باید ابعاد عکس مورد نظر را تنظیم کنید. در این مورد پیشنهاد من این است که ابعاد عکس را در عرض بیشتر از ۶۰۰ پیکسل انتخاب نکنید. سپس تصویر را در سایت آپلود نمایید. پس از آپلود تصویر چند لینک در اختیار شما قرار داده می‌شود که باید کد HTML را انتخاب و کپی نمایید.

کد HTML

HTML مخفف Hyper Test Markup language می‌باشد. در HTML بر خلاف دیگر زبان ها که از اسکریپت برای اجرای عملکردها استفاده می‌کنند، HTML با استفاده از تگ و برچسب هابرای شناسایی محتوا استفاده می‌کند. در واقع شما با یادگیری HTML می‌توانید وب سایت خود را راه اندازی کنید. دنیای HTML بسیار پیچیده و مفصل است و از آموزش کامل آن معذوریم. با استفاده از کد های HTML میتوانید لینک سازی کنید.

HTML Link

از کد HTML Links برای نمایش محتوا در وب سرور استفاده می‌شود. با کلیک بر روی لینک ساخته شده در کد HTML محتوای مورد نظر شما نمایش داده خواهد شد. در کدنویسی HTML لینک ها توسط <a> تعریف می‌شوند، مانند:

<a href="آدرس سایت URL"> link test متن مورد نظر جهت نمایش</a>

حال با توجه به توضیحات گفته شده، برای نمایش دیتا در محیط گرافیکی UI از کدهای HTML استفاده می‌کنیم. برای قرار دادن لینک و تگ در محیط UI از نود Template در شاخه UI استفاده می‌کنیم.

راه‌اندازی نرم افزار اینترنت اشیاء Node RED

وارد محیط رزبین شده سپس از منو Programming ، نودرد Node-RED را انتخاب نمایید. آی پی آدرس IP Address برای اجرای نرم افزار در اختیار شما قرار داده می‌شود. حال در مرورگرIP Addrees:1880 را وارد کرده و سپس وارد محیط نود رد Node Red شوید. در نوار سمت چپ، از شاخه UI ، نود Template را انتخاب و وارد صفحه کنید.

نود Template

نود template برای نمایش محتوا و ساخت تگ HTML کاربرد دارد. از نود Template برای ساخت یک رابط کاربری پویا با اعمال ویژگی های منحصر به فردی مانند رنگ، جدول، تیتر با فرمت های متفاوت، ساخت لینک، درج تصویر و بسیاری از تغییرات دیگر، می‌توانید استفاده کنید. نود Template را از شاخه UI انتخاب کرده و وارد محیط Node-RED کنید.

تنظیم نود Template:

تنظیم نود template بسیار ساده می باشد. نود را انتخاب کرده و روی آن کلیک کنید:

• در قسمت TAB، میتوانید یک تب جدید برای نمایش در محیط UI بسازید و یا از تب پیشفرض Home استفاده کنید.
• در قسمت Name، نامی دلخواه برای نود Template میتوانید در نظر بگیرید. ( اختیاری است)
• در قسمت Group، گروهی با عنوان دلخواه برای نمایش در UI انتخاب کنید.
• در نهایت کد و یا محتوای مربوطه را در قسمت text وارد کنید.

حال کد HTML ساخته شده توسط سایت imgur.com را در قسمت Text، نود Template کپی کنید. سپس Deploy کرده و وارد محیط UI شوید. همانطور که مشاهده می‌کنید تصویر مورد نظر در صفحه UI نمایش داده می‌شود. همانطور که در متن آموزش گفته ام، انتخاب سایز تصویر دلخواه است و می‌توانید بر اساس نوع کاربری خود آن را تغییر دهید.

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