Building a 2D Dashboard

A 2D dashboard is the most common operating view: a canvas on which text, live point values, charts, gauges, command buttons, and floor-plan images are arranged together. In this lesson you build a 2D dashboard, place elements from the palette onto the canvas, adjust their appearance and layout, and save, duplicate, export, or delete the dashboard. Connecting elements to data and commands is covered in the next lesson (B9).

Get to know the screen

Work starts on the داشبوردهای من (My Dashboards) page; its path is «طراحی سیستم» ← «طراحی داشبورد» ← «داشبوردهای من» (System Design → Dashboard Design → My Dashboards). This page lists every dashboard in the project in collapsible groups: داشبوردهای سیستمی (System Dashboards), داشبوردهای دوبعدی (2D Dashboards), داشبوردهای سه‌بعدی (3D Dashboards), داشبوردهای لیستی (List Dashboards), داشبوردهای خودکار (Automatic Dashboards), داشبوردهای نقشه (Map Dashboards), داشبوردهای ترکیبی (Combined Dashboards), داشبوردهای موبایل (Mobile Dashboards), and الگوها (Templates).

The 2D designer has three regions:

• Top bar: the ذخیره (Save) button, back to list, undo and redo, zoom, the تراز: (Align:) and توزیع: (Distribute:) tools, and the وارد کردن داشبورد and صادرات داشبورد (Export Dashboard) buttons. Below the title, the tool's name (Dashboard Designer) is shown.
• Right side panel: two tabs, لایه‌ها (Layers) (a list of every element on the canvas, with show/hide, lock, and delete) and Components (the element palette). لایه‌ها is open by default.
• Left properties panel: four icon tabs whose names show only on hover: ویژگی‌ها (Properties) (gear icon), ENIDs (chain icon), Styles (color palette icon), and پس زمینه (Background) (landscape icon). Until an element is selected, the message هیچ عنصری انتخاب نشده (No element selected) is shown.

The palette has 24 elements in 10 groups. Group and element names are shown in English in the interface:

Step by step

1. Open the dashboards page. From the menu click «طراحی سیستم» ← «طراحی داشبورد» ← «داشبوردهای من», then click داشبورد جدید.
2. Fill in the creation dialog. In the ایجاد داشبورد جدید (Create New Dashboard) window:
   • عنوان داشبورد * (Dashboard Title *): for example "Server Room — Floor 2". Maximum 255 characters.
   • نوع داشبورد * (Dashboard Type *): داشبورد 2D (2D Dashboard) (default). The other options are داشبورد 3D (3D Dashboard), داشبورد لیستی (List Dashboard), داشبورد نقشه (Map Dashboard), داشبورد خودکار (Automatic Dashboard), داشبورد ترکیبی (Combined Dashboard), and داشبورد موبایل (Mobile Dashboard).
   • سطح دسترسی (Access Level): خصوصی (فقط من) (Private (only me)) (default), عمومی (همه) (Public (everyone)), or بر اساس نقش (Role-based).
   • If needed, توضیحات (Description) (up to 500 characters), آیکون (Icon), and تگ‌ها (Enter برای افزودن) (Tags (press Enter to add)). Type each tag and press Enter.
   Then click ایجاد داشبورد (Create Dashboard). The message "Dashboard '…' created" appears.

   

3. Open the designer. Find the new dashboard in the داشبوردهای دوبعدی group and click its card. Clicking a 2D dashboard card opens the designer directly.
4. Prepare the canvas. In the properties panel, open the پس زمینه tab (landscape icon). Under اندازه بوم (Canvas Size) set the canvas dimensions. To place a floor plan or map, click تصویر پس زمینه (Upload Image) under آپلود تصویر (Background Image). Allowed formats are JPG, PNG, and WebP, up to 5 MB. After upload, the message "Image uploaded successfully!" appears. The same tab also has background color and gradient, plus فیلترها (Filters) (brightness, contrast, saturation).

   

5. Add an element. In the right panel open the Components tab and click an item — for example first a Panel, then a Text, then two Value Displays. The element appears on the canvas at its default size (for example Panel 300×300, Value Display 150×80, Button 120×40) and the message Element added appears. Elements are added by clicking, not by dragging from the palette.

   

   

6. Set position and size. Drag the element on the canvas, or in the ویژگی‌ها tab, under موقعیت و اندازه (Position and Size), enter exact X, Y, عرض (Width), and ارتفاع (Height) values. Arrow keys also move the selected element; hold Shift for a finer step. The G key toggles the grid, R the ruler, and S snap-to-grid.
7. Adjust the appearance. Every element shares these sections in the ویژگی‌ها tab:
   • تبدیل (Transform): چرخش: (Rotation:), قابل مشاهده (Visible), قفل شده (Locked)
   • ظاهر (Appearance): رنگ پس زمینه (Background Color) and opacity
   • گرادیان (Gradient), انیمیشن (Animation)
   • حاشیه (Border): width, style (solid, dashed, etc.), color, and شعاع حاشیه: (Border radius:)
   • فاصله (Spacing) and جلوه ها (Effects) (shadow)
   • طرح بندی (Layout): Z-Index, i.e. stacking order — a higher number sits in front
   After these come settings specific to each element type. For a Value Display, for example, there is a تنظیمات مقدار (Value Settings) section (prefix, suffix, واحد (Unit), مکان های اعشاری: (Decimal places:)) and a تنظیمات برچسب (Label Settings) section.

   

8. Arrange several elements. Select multiple elements together (Ctrl+A selects all) and, from the top bar, use one of the تراز: tools (for example تراز کردن در بالا (Align top)) or توزیع: (توزیع افقی (فضا به طور مساوی) (Distribute horizontally (equal spacing))). Distribute needs at least two selected elements. Use آوردن به جلو (Bring to front) and ارسال به عقب (Send to back) to reorder elements; press Ctrl+D to duplicate an element.
9. Save. Click ذخیره or press Ctrl+S. The message Saved (N elements) shows how many elements were saved. The designer also autosaves every 30 seconds. There is no separate publishing step: whatever is saved becomes available to users under the سطح دسترسی chosen at creation time.
10. Leave the designer. Click بازگشت به لیست (Back to list) (the arrow beside the title). If there are unsaved changes, the prompt "Unsaved changes. Leave the designer without saving?" appears.
11. Manage the dashboard. In داشبوردهای من, from the card's three-dot menu:
    • کپی: creates a fresh copy (message "Dashboard '…' duplicated").
    • صدور: outputs the dashboard file.
    • حذف: deletes it after confirming "Are you sure you want to delete dashboard '…'? This action cannot be undone."
    To move a dashboard entirely to another installation, from inside the designer click صادرات داشبورد → ZIP (کامل) (ZIP (complete)). This option "includes images" and is labeled "recommended". The JSON option outputs "settings only". On the destination installation, load the file with وارد کردن داشبورد.

    

Tips and common mistakes

• Clicking a 2D dashboard card opens the designer, not the end-user view. See the live view under «پیشخوان‌ها» ← «دیدکلی» (Consoles → Overview).
• Choose the dashboard type correctly at creation time. The type list on the dashboard edit page is not the same as the list in the creation dialog.
• Messages inside the designer are in English, such as Saved, Deleted, Duplicated, and Aligned. This is expected behavior.
• The in-designer help text talks about "dragging" an element from the palette, but adding an element is done only by clicking.
• The الگوهای داشبورد (Dashboard Templates) and مدیریت رسانه (Media Management) pages are demonstrational in the current version. Building a dashboard from a template is not active in this version; load the floor plan image from the پس زمینه tab inside the designer itself.
• Do not import a file exported from a 3D dashboard into the 2D designer; the system rejects it.
• If the title is left blank, the message "Dashboard title is required" appears and the dashboard is not created.

Summary

• A 2D dashboard is created from "My Dashboards" → "New Dashboard" with type "2D Dashboard".
• The palette has 24 elements in 10 groups; elements are added by clicking an item.
• An element's position and appearance are set in the "Properties" tab, and the canvas and floor plan in the "Background" tab.
• "Save" (or the 30-second autosave) is the publish step; "Access Level" determines who can view it.
• To move a dashboard to another installation, use "Export Dashboard" → "ZIP (complete)", and "Import Dashboard" on the destination.