مدیریت و دسته بندی جریان ها در گروه ها

همانطور که در قسمت قبل مشاهده کردید می توان برای ویدجت هایی که در داشبورد قرار میگیرند گروه (group ui) و تب (tab ui) تعیین کرد که برای تمیز تر جلوه دادن عملیات ها و ویدجت ها و همچنین دسته بندی در صفحه صورت میگیرند که البته به صورت جزئی بررسی نشد. و در این قسمت قرار است که به این موضوع بپردازیم و دسته بندی ها را برای نمایش به شما نشان دهیم.

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

• اتاق خواب
  • کلید برق
  • پایشگر دما و رطوبت
• سالن اصلی
  • کلید برق و چراغ ها
  • پایشگر دما و رطوبت 
  • سیستم تشخیص حضور
• آشپزخانه
  • کلید برق
  • پایشگر دما و رطوبت

به در نظر گرفتن طرح بالا می توان این برداشت را داشت که می توانید کنترل کننده ها را در یک گروه و پایشگر ها را در یک گروه در نظر گرفت پس به نتیجه زیر خواهید رسید:

• Tab 1
  • اتاق خواب
    • Group 1
      • کلید برق
    • Group 2
      • پایشگر دما و رطوبت
• Tab 2
  • سالن اصلی
    • Group 1
      • کلید برق و چراغ ها
    • Group 2
      • پایشگر دما و رطوبت 
      • سیستم تشخیص حضور
• Tab 3
  • آشپزخانه
    • Group 1
      • کلید برق
    • Group 2
      • پایشگر دما و رطوبت

اما در آخر باید گفت که یک Tab خاصی با حالت درج یک کلید برای اتصال به یک آدرس وبسایت یا چیزی مشابه در نظر گرفته شده است تا بتوان در nodred به لینک های خارجی نیز متصل شد.

 خوب تا اینجا متوجه این شدیم که هر بخش چه کاری را بر عهده دارد اما برا ساخت آن چگونه باید عمل کنیم؟ 

1. ابتدا ویجت مورد نظر را در Flow با کشیدن و درج کردن قرار دهید.
2. به صفحه Properties ویجت مربوطه بروید و در بخش Group با کلیک بر روی آیکون Edit می توانید به صفحه تغییرات گروه ها وارد شوید و گروه مد نظر خود را ساخته و یا گروه فعلی را تخصیص دهید.
3. در صورتی که نیاز به تغییر Tab دارید می توانید با وارد شدن به بخش Edit تب های فعلی را انتخاب و یا یک تب جدید ایجاد کنید.
4. پس از انتخاب و تخصیص گروه و تب مد نظر می توانید save کنید 
5. حال با deploy کردن و وارد شدن به صفحه ui نتیجه عملیات انجام شده را شاهد باشید.

نمونه زیر ساخت یک flow نسبت به دیدگاه بالا برای اتاق خواب را به شما نشان می دهد.

نمونه json خروجی  export شده از flow:

[{"id":"f6f2187d.f17ca8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"d295685b.3e3a78","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"e5a40dc6.50e03","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#0094CE","value":"#0094CE","edited":false},"page-titlebar-backgroundColor":{"value":"#0094CE","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1bbfff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0094ce","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"282320d6.5e0b5","type":"ui_group","name":"Group1","tab":"","order":1,"disp":true,"width":"6","collapse":false},{"id":"a217a776.17fcc8","type":"ui_group","name":"Group1","tab":"d295685b.3e3a78","order":2,"disp":true,"width":"6","collapse":false},{"id":"b779b0dc.fde77","type":"ui_group","name":"Group 2","tab":"d295685b.3e3a78","order":2,"disp":true,"width":"6","collapse":false},{"id":"22968782.bdc508","type":"ui_group","name":"Group 2","tab":"","order":2,"disp":true,"width":6},{"id":"2de35d8c.0d80f2","type":"ui_link","name":"site link","link":"https://icc-aria.ir","icon":"open_in_browser","target":"newtab","order":3},{"id":"1dd9673e.3a52e9","type":"ui_button","z":"f6f2187d.f17ca8","name":"","group":"a217a776.17fcc8","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":270,"y":140,"wires":[[]]},{"id":"9d4b4a34.5cce88","type":"ui_gauge","z":"f6f2187d.f17ca8","name":"","group":"b779b0dc.fde77","order":0,"width":0,"height":0,"gtype":"gage","title":"temp","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":270,"y":200,"wires":[]},{"id":"e7fa9f06.1bf1","type":"ui_gauge","z":"f6f2187d.f17ca8","name":"","group":"b779b0dc.fde77","order":0,"width":0,"height":0,"gtype":"gage","title":"humidity","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":280,"y":240,"wires":[]}]

در زیر نمونه کاملی از یک رابط گرافیکی را که در یکی از پروژه های ما استفاده شده است را مشاهده کنید.