آموزش رزبری پای اینترنت اشیا IOT اینترنت اشیاء عملی پروژه رزبری پای

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

Node-red-IOT-HTTP-picture-part-8--digispark
نوشته شده توسط پریسا پوربلورچیان

نرم افزار نودرد 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> تعریف می‌شوند، مانند:

حال با توجه به توضیحات گفته شده، برای نمایش دیتا در محیط گرافیکی 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 نمایش داده می‌شود. همانطور که در متن آموزش گفته ام، انتخاب سایز تصویر دلخواه است و می‌توانید بر اساس نوع کاربری خود آن را تغییر دهید.

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

 

درباره نویسنده

پریسا پوربلورچیان

تولید کننده محتوا / کارشناس IOT

زندگی یعنی پژوهش و فهمیدن چیزی جدید

تلاشم بر این است تجربیاتم در زمینه IOT‌ را به بهترین شکل با شما در میان بگذارم.

تبادل نظر و رفع عیب با ثبت دیدگاه

۶ دیدگاه

  • با سلام و تشکر از آموزش خوبتون ، راهیکه بشه عکس رو از داخل خود رزبری مستقیم در ui نمایش داد هم هست بدون اپلود در سایت . مثلا من نیاز دارم دوربین رزبری رو راه بندازم و بدون اینترنت و استفاده از شبکه وای فای داخلی در node red تصویر رو مشاهده کنم . باتشکر

    • سلام
      از توجه شما ممنونم.
      بله از طریق سرویس IBM امکان پذیر است که در اینجا با توجه به محدودیت دسترسی به این سرویس به این موضوع نپرداخته ام. در نهایت باید از کامند ارسال عکس بر روی UI و سرویس IBM استفاده کنید.

      • سلام من موفق شدم یه راه ساده تر و کاربردی تر پیداکنم که بدون اینترنت تصویر گرفته شده با دوربینو نمایش بدم تو ui چجوری میتونم اموزشش رو برا دیگر دوستان اشتراک بزارم

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