درس ۸ از ۱۵۱۸ دقیقه
ساخت داشبورد دوبعدی
هدف درس
یک داشبورد دوبعدی بسازید، المان‌ها را از پالت روی بوم بچینید، ظاهر و چیدمان آن‌ها را تنظیم کنید و داشبورد را ذخیره، کپی، صادر یا حذف کنید.
کجای نرم‌افزار
«طراحی سیستم» ← «طراحی داشبورد» ← «داشبوردهای من» ← «داشبورد جدید»
داشبورد دوبعدی رایج‌ترین نمای بهره‌برداری است: یک بوم که روی آن متن، مقدار زندهٔ نقاط، نمودار، گیج، دکمهٔ فرمان و تصویر پلان کنار هم چیده می‌شوند. در این درس یک داشبورد دوبعدی می‌سازید، المان‌ها را از پالت روی بوم می‌گذارید، ظاهر و چیدمان آن‌ها را تنظیم می‌کنید و داشبورد را ذخیره، کپی، صادر یا حذف می‌کنید. اتصال المان‌ها به داده و فرمان موضوع درس بعد (B9) است.
صفحه را بشناسید
کار از صفحهٔ داشبوردهای من شروع می‌شود؛ مسیر آن «طراحی سیستم» ← «طراحی داشبورد» ← «داشبوردهای من» است. این صفحه همهٔ داشبوردهای پروژه را در گروه‌های تاشو نشان می‌دهد: داشبوردهای سیستمی، داشبوردهای دوبعدی، داشبوردهای سه‌بعدی، داشبوردهای لیستی، داشبوردهای خودکار، داشبوردهای نقشه، داشبوردهای ترکیبی، داشبوردهای موبایل و الگوها.
| بخش | کاربرد |
|---|---|
| داشبورد جدید و وارد کردن داشبورد | ساخت داشبورد تازه یا وارد کردن فایلی که از سامانهٔ دیگری صادر شده است |
| کارت‌های آماری | کل داشبوردها، فعال، علاقه‌مندی‌ها، سیستمی |
| جستجوی داشبورد... | جست‌وجو بر اساس عنوان |
| مرتب‌سازی | آخرین تغییرات، عنوان (الفبا)، نوع داشبورد، بیشترین بازدید، تاریخ ایجاد |
| وضعیت | همه، فعال، پیش‌نویس |
| منوی سه‌نقطهٔ هر کارت | ویرایش، کپی، اشتراک‌گذاری، صدور، حذف |
طراح دوبعدی سه ناحیه دارد:
- نوار بالا: دکمهٔ ذخیره، بازگشت به فهرست، واگرد و تکرار، بزرگنمایی، ابزارهای تراز: و توزیع:، و دکمه‌های وارد کردن داشبورد و صادرات داشبورد. زیر عنوان، نام ابزار به انگلیسی (Dashboard Designer) دیده می‌شود.
- پانل کناری راست: دو زبانهٔ لایه‌ها (فهرست همهٔ المان‌های بوم، با نمایش/مخفی، قفل و حذف) و Components (پالت المان‌ها). به‌طور پیش‌فرض لایه‌ها باز است.
- پانل ویژگی‌ها در سمت چپ: چهار زبانهٔ آیکونی که نامشان فقط با نگه‌داشتن نشانگر دیده می‌شود: ویژگی‌ها (چرخ‌دنده)، ENIDs (زنجیر)، Styles (پالت رنگ) و پس زمینه (منظره). تا المانی انتخاب نشود، پیام هیچ عنصری انتخاب نشده دیده می‌شود.
پالت ۲۴ المان در ۱۰ گروه دارد. نام گروه‌ها و المان‌ها در رابط انگلیسی است:
| گروه | المان‌ها | کاربرد |
|---|---|---|
| Containers | Panel | قاب گروه‌بندی با پس‌زمینه و حاشیه |
| Basic Widgets | Text، Value Display، Button، Image | عنوان و برچسب، مقدار نقطه با واحد، دکمهٔ فرمان یا پیوند، لوگو و پلان |
| Charts & Gauges | Chart، Gauge، Gauge Pro | نمودار زمانی و گیج |
| Advanced Controls | Switch Pro، Slider Pro، Knob، Thermostat | کنترل‌های فرمان: کلید، اسلایدر، ولوم و ترموستات |
| Media & Display | Web View، Camera، Animation | صفحهٔ وب، تصویر دوربین، انیمیشن ساده |
| Navigation | Dashboard Link | رفتن به داشبورد دیگر |
| Time & Date | Clock، Weather | ساعت و آب‌وهوا |
| BMS Equipment | BMS Animation، Animation Pro | انیمیشن تجهیزات مثل پمپ، فن، شیر و چیلر |
| 3D Objects | Object 3D، 3D Dashboard | یک شیء سه‌بعدی یا جاسازی یک داشبورد سه‌بعدی |
| Data Display | Advanced List، پایش گرافیکی تجهیزات | جدول پیشرفته و کارت‌های وضعیت تجهیزات |
گام‌به‌گام
- صفحهٔ داشبوردها را باز کنید. از منو «طراحی سیستم» ← «طراحی داشبورد» ← «داشبوردهای من» را بزنید و سپس روی داشبورد جدید کلیک کنید.
- دیالوگ ایجاد را پر کنید. در پنجرهٔ ایجاد داشبورد جدید:
- عنوان داشبورد *: مثلاً «اتاق سرور — طبقه ۲». حداکثر ۲۵۵ نویسه.
- نوع داشبورد *: داشبورد 2D (پیش‌فرض). گزینه‌های دیگر داشبورد 3D، داشبورد لیستی، داشبورد نقشه، داشبورد خودکار، داشبورد ترکیبی و داشبورد موبایل هستند.
- سطح دسترسی: خصوصی (فقط من) (پیش‌فرض)، عمومی (همه) یا بر اساس نقش.
- در صورت نیاز توضیحات (حداکثر ۵۰۰ نویسه)، آیکون و تگ‌ها (Enter برای افزودن). هر تگ را بنویسید و Enter بزنید.
ایجاد داشبورد جدید · فهرست «نوع داشبورد *» باز است؛ «داشبورد 2D» پیش‌فرض است - طراح را باز کنید. داشبورد تازه را در گروه داشبوردهای دوبعدی پیدا کنید و روی کارت آن کلیک کنید. کلیک روی کارت داشبورد دوبعدی مستقیماً طراح را باز می‌کند.
- بوم را آماده کنید. در پانل ویژگی‌ها زبانهٔ پس زمینه (آیکون منظره) را باز کنید. در اندازه بوم ابعاد بوم را تعیین کنید. برای گذاشتن پلان یا نقشهٔ طبقه، در تصویر پس زمینه دکمهٔ آپلود تصویر را بزنید. فرمت‌های مجاز JPG، PNG و WebP است و حجم فایل حداکثر ۵ مگابایت. پس از بارگذاری، پیام «تصویر با موفقیت آپلود شد!» می‌آید. در همین زبانه رنگ و گرادیان پس‌زمینه و فیلترها (روشنایی، کنتراست، اشباع) هم هست.
زبانهٔ پس زمینه · بخش‌های «اندازه بوم» و «تصویر پس زمینه» با دکمهٔ «آپلود تصویر» - المان اضافه کنید. در پانل راست زبانهٔ Components را باز کنید و روی یک آیتم کلیک کنید؛ مثلاً ابتدا Panel، سپس Text و دو Value Display. المان با اندازهٔ پیش‌فرض روی بوم ظاهر می‌شود (مثلاً Panel ۳۰۰×۳۰۰، Value Display ۱۵۰×۸۰، Button ۱۲۰×۴۰) و پیام انگلیسی Element added می‌آید. افزودن با کلیک انجام می‌شود، نه با کشیدن آیتم از پالت.
پالت، بخش بالا · Containers تا Advanced Controls 
پالت، بخش پایین · Media & Display تا Data Display - جا و اندازه را تنظیم کنید. المان را روی بوم بکشید، یا در زبانهٔ ویژگی‌ها بخش موقعیت و اندازه مقدار دقیق X، Y، عرض و ارتفاع را وارد کنید. با کلیدهای جهت هم می‌توانید المان انتخاب‌شده را جابه‌جا کنید؛ با Shift گام ریزتر می‌شود. کلید G شبکه، R خط‌کش و S چسبندگی به شبکه را روشن و خاموش می‌کند.
- ظاهر را تنظیم کنید. همهٔ المان‌ها در زبانهٔ ویژگی‌ها این بخش‌های مشترک را دارند:
- تبدیل: چرخش:، قابل مشاهده، قفل شده
- ظاهر: رنگ پس زمینه و شفافیت
- گرادیان، انیمیشن
- حاشیه: عرض، سبک (یکدست، نقطه‌چین و…)، رنگ و شعاع حاشیه:
- فاصله و جلوه ها (سایه)
- طرح بندی: Z-Index، یعنی ترتیب نمایش؛ عدد بالاتر جلوتر است
المان انتخاب‌شده · بخش «موقعیت و اندازه» باز است و بقیهٔ بخش‌های ویژگی زیر آن آمده‌اند؛ در سمت راست، زبانهٔ «لایه‌ها» - چند المان را مرتب کنید. چند المان را با هم انتخاب کنید (Ctrl+A همه را انتخاب می‌کند) و از نوار بالا یکی از ابزارهای تراز: (مثلاً تراز کردن در بالا) یا توزیع: (توزیع افقی (فضا به طور مساوی)) را بزنید. توزیع دست‌کم دو المان انتخاب‌شده لازم دارد. برای جلو و عقب بردن المان‌ها از آوردن به جلو و ارسال به عقب استفاده کنید؛ برای تکثیر المان Ctrl+D را بزنید.
- ذخیره کنید. ذخیره یا Ctrl+S را بزنید. پیام انگلیسی Saved (N elements) تعداد المان‌های ذخیره‌شده را نشان می‌دهد. طراح هر ۳۰ ثانیه هم خودکار ذخیره می‌کند. انتشار جداگانه‌ای وجود ندارد: آنچه ذخیره شد، با همان سطح دسترسی که هنگام ساخت تعیین کردید، در دسترس کاربران است.
- از طراح خارج شوید. دکمهٔ بازگشت به لیست (پیکان کنار عنوان) را بزنید. اگر تغییر ذخیره‌نشده باشد، پرسش «تغییرات ذخیره نشده‌اند. بدون ذخیره از طراحی خارج می‌شوید؟» ظاهر می‌شود.
- داشبورد را مدیریت کنید. در داشبوردهای من از منوی سه‌نقطهٔ کارت:
- کپی: یک نسخهٔ تازه می‌سازد (پیام «داشبورد "…" کپی شد»).
- صدور: فایل داشبورد را بیرون می‌دهد.
- حذف: پس از تأیید «آیا از حذف داشبورد "…" اطمینان دارید؟ این عمل غیرقابل بازگشت است.» حذف می‌کند.
صادرات داشبورد · گزینهٔ «ZIP (کامل)» همراه تصاویر، و JSON فقط تنظیمات
پشت صحنه: کل محتوای داشبورد (المان‌ها، موقعیت‌ها، ظاهر، اتصال‌ها و پس‌زمینه) به‌صورت یک سند روی سرور ذخیره می‌شود. حجم این سند حدود ۵ میلیون نویسه محدودیت دارد؛ داشبوردی که تصاویر حجیم زیادی در خود جاسازی کند ممکن است به این سقف برسد. تاریخچهٔ واگرد تا ۵۰ مرحله نگه داشته می‌شود. اجازهٔ ذخیره را سرور بررسی می‌کند: مالک داشبورد و کلیدهای سطح اصلی و سیستمی همیشه می‌توانند ذخیره کنند؛ برای داشبورد عمومی، راهبر هم می‌تواند. در غیر این صورت ذخیره رد می‌شود.
نکته‌ها و اشتباه‌های رایج
- کلیک روی کارت داشبورد دوبعدی طراح را باز می‌کند، نه نمای کاربر نهایی. نمای زنده را در «پیشخوان‌ها» ← «دیدکلی» ببینید.
- نوع داشبورد را همان هنگام ساخت درست انتخاب کنید. فهرست نوع‌ها در صفحهٔ ویرایش داشبورد با فهرست دیالوگ ساخت یکی نیست.
- پیام‌های درون طراح انگلیسی‌اند، مثل Saved، Deleted، Duplicated و Aligned. این رفتار عادی است.
- راهنمای داخل طراح از «کشیدن» المان از پالت حرف می‌زند، ولی افزودن فقط با کلیک انجام می‌شود.
- صفحه‌های الگوهای داشبورد و مدیریت رسانه در نسخهٔ فعلی نمایشی‌اند. ساخت داشبورد از قالب در این نسخه فعال نیست؛ تصویر پلان را از زبانهٔ پس زمینه در خود طراح بارگذاری کنید.
- فایل صادرشده از یک داشبورد سه‌بعدی را در طراح دوبعدی وارد نکنید؛ سامانه آن را رد می‌کند.
- اگر عنوان خالی بماند، پیام «عنوان داشبورد الزامی است» می‌آید و داشبورد ساخته نمی‌شود.
خلاصه
- داشبورد دوبعدی از «داشبوردهای من» ← «داشبورد جدید» با نوع «داشبورد 2D» ساخته می‌شود.
- پالت ۲۴ المان در ۱۰ گروه دارد و افزودن المان با کلیک روی آیتم انجام می‌شود.
- جا و ظاهر المان در زبانهٔ «ویژگی‌ها» و بوم و پلان در زبانهٔ «پس زمینه» تنظیم می‌شوند.
- «ذخیره» (یا ذخیرهٔ خودکار ۳۰ ثانیه‌ای) همان انتشار است؛ دسترسی را «سطح دسترسی» تعیین می‌کند.
- برای انتقال به سامانهٔ دیگر از «صادرات داشبورد» ← «ZIP (کامل)» و در مقصد از «وارد کردن داشبورد» استفاده کنید.
تمرین عملی روی دموی زنده
در دموی عمومی (bms.argsrv.com، پروژهٔ «هولدینگ ارگ»). داده‌ها و داشبوردهای موجود دمو را تغییر ندهید یا حذف نکنید.
- در داشبوردهای من یک داشبورد با عنوان «تمرین — نام شما»، نوع داشبورد * = داشبورد 2D و سطح دسترسی = خصوصی (فقط من) بسازید.
- در طراح، از Components یک Panel، یک Text با متن «اتاق سرور» و دو Value Display اضافه کنید و آن‌ها را داخل Panel بچینید.
- دو Value Display را با هم انتخاب کنید و با تراز کردن در بالا هم‌تراز کنید.
- ذخیره را بزنید و پیام Saved را ببینید.
- در پایان، داشبورد تمرین را از منوی کارت حذف کنید.
اگر حساب دمو اجازهٔ ذخیره نداد، تا مرحلهٔ پیش‌نمایش پیش بروید: دیالوگ ساخت را پر کنید، سپس یکی از داشبوردهای دوبعدی موجود را باز کنید و فقط پالت، زبانه‌های پانل ویژگی و منوی صادرات داشبورد را بررسی کنید، بی آنکه چیزی را ذخیره کنید.
آزمون درس
برای گذراندن درس دست‌کم به ۳ پرسش از ۴ پرسش پاسخ درست بدهید.
- ۱. برای افزودن المان Value Display به بوم چه باید کرد؟
- ۲. کدام المان جزو گروه Advanced Controls است؟
- ۳. طراح دوبعدی هر چند وقت یک‌بار خودکار ذخیره می‌کند؟
- ۴. برای بردن یک داشبورد همراه با تصاویرش به سامانهٔ دیگر، کدام گزینه مناسب است؟