ساخت dashboard - Flova

Dashboard را با یک سؤال شروع کنید: کاربر برای تصمیم‌گیری یا کنترل دستگاه چه چیزی لازم دارد؟ یک صفحهٔ خوب همهٔ داده‌های ممکن را نشان نمی‌دهد؛ اطلاعاتی را نزدیک action مربوط به آن قرار می‌دهد.

widget	مناسب برای
status card	یک مقدار مهم و وضعیت اتصال
toggle	state بولی خواندنی و نوشتنی
button	action یا فرمان مشخص
gauge	مقدار عددی با بازه و واحد
line chart	تغییرات یک یا چند سری در زمان
text و input	توضیح، label یا ورودی کاربر
alarm/event list	رخدادها و هشدارهای ثبت‌شده

binding چیست؟

Binding پیوند بین property یک widget و منبع داده است. منبع می‌تواند datastream یک Device Type، مقدار دستگاه انتخاب‌شده یا saved query از FlovaQL باشد. برای widget خواندنی، datastream باید readable باشد. برای toggle، مقدار باید boolean و مقصد writable باشد. برای chart، query باید ستون زمان و سری‌های سازگار برگرداند.

responsive بودن

هر صفحه را در سه وضعیت ببینید: موبایل، tablet و دسکتاپ. صفحه‌ای که در canvas خوب به نظر می‌رسد ممکن است در موبایل دکمهٔ اصلی را پایین صفحه پنهان کند یا chart را بیش از حد فشرده نشان دهد. گروه‌بندی صفحه، فاصلهٔ بین بخش‌ها و ترتیب actionها را طوری انتخاب کنید که کاربر بدون زوم‌کردن مسیر را بفهمد.

یک الگوی ساده

بالای صفحه وضعیت اتصال و نام دستگاه را بگذارید. بعد مقدار اصلی را با gauge یا status card نشان دهید. actionهای کنترلی مثل toggle را نزدیک همان مقدار قرار دهید. chart تاریخچه را پایین‌تر بگذارید و برای نبودن داده، متن مشخصی نمایش دهید. اگر چند دستگاه دارید، device switcher را در سطح host نگه دارید تا صفحهٔ اصلی شلوغ نشود.