Layouts
Layouts – Bố cục
Bố cục bảng điều khiển sắp xếp cách các widget xuất hiện trên lưới bảng điều khiển. Mỗi trạng thái bảng điều khiển có thể có loại bố cục, cài đặt và điểm ngắt riêng, giúp tạo ra các trình bày trực quan phù hợp cho các trường hợp sử dụng IoT khác nhau và độ phân giải màn hình khác nhau.
Để chỉnh sửa bố cục cho một trạng thái cụ thể, làm theo các bước sau:
- Vào chế độ chỉnh sửa bảng điều khiển bằng cách nhấp vào nút Chế độ chỉnh sửa ở góc trên bên phải của cửa sổ;
- Nhấp vào nút Bố cục ở góc trên bên trái của cửa sổ bảng điều khiển. Cửa sổ quản lý bố cục sẽ mở ra.
Trong cửa sổ Quản lý bố cục, bạn có thể chọn loại bố cục phù hợp với nhu cầu:
- Mặc định: Bố cục đa năng, linh hoạt.
- SCADA: Phù hợp nhất để hiển thị giao diện người-máy SCADA (HMI).
- Phân cách: Hữu ích để phân tách các phần một cách trực quan.
Điểm ngắt cho phép tạo bố cục đáp ứng, thích ứng với các kích thước màn hình khác nhau. Bạn có thể thêm và cấu hình điểm ngắt để đảm bảo bảng điều khiển hiển thị hoàn hảo trên mọi thiết bị. Chi tiết về cách thiết lập từng loại bố cục và cấu hình điểm ngắt sẽ được trình bày dưới đây.
Các loại bố cục
Nền tảng hỗ trợ ba loại bố cục: Mặc định, SCADA và Phân cách. Mỗi trạng thái bảng điều khiển được cấu hình với chính xác một loại bố cục.
Bố cục Mặc định
Bố cục Mặc định là bố cục đa năng phù hợp với hầu hết các bảng điều khiển. Loại bố cục này hỗ trợ điểm ngắt màn hình để thiết kế đáp ứng.
SCADA
Bố cục SCADA được thiết kế để tạo giao diện người-máy SCADA (HMI). Giao diện SCADA thường bao gồm các widget có thể mở rộng gọi là biểu tượng SCADA. Tuy nhiên, bạn cũng có thể kết hợp các biểu tượng SCADA với hơn 500 widget hiện có của ESG IoT trên cùng một bố cục. Loại bố cục này cũng hỗ trợ điểm ngắt màn hình để thiết kế đáp ứng.
Phân cách
Bố cục Phân cách kế thừa cho phép chia một bố cục Mặc định thành hai bố cục phụ: trái và phải. Bạn có thể cấu hình chiều rộng của các bố cục phụ này bằng giá trị pixel cố định hoặc phần trăm chiều rộng màn hình. Hầu hết các tham số bố cục có sẵn cho bố cục Mặc định cũng được hỗ trợ bởi các bố cục phụ, nhưng hiện tại các bố cục phụ không hỗ trợ điểm ngắt.
Để thử, hãy thiết lập cả hai bố cục theo cách hoàn toàn khác nhau. Ví dụ, thêm hình nền cho bố cục bên trái và áp dụng màu nền mới cho bố cục bên phải. Sau đó, điều chỉnh kích thước cửa sổ theo tỷ lệ phần trăm nhất định (đây chỉ là ví dụ, không phải khuyến nghị). Sau khi thiết lập tham số, nhấp Lưu trong cửa sổ Bố cục để xem thay đổi.
Điểm ngắt
Điểm ngắt được giới thiệu trong ESG IoT 3.8.0, cho phép xác định các cài đặt bố cục và widget khác nhau dựa trên chiều rộng màn hình của người dùng cuối.
Mỗi trạng thái bảng điều khiển có một Điểm ngắt Mặc định. Bố cục này được sử dụng nếu không có điểm ngắt nào khác khớp với độ phân giải màn hình hiện tại.
Bạn có thể xác định các điểm ngắt sau:
- Máy tính để bàn (xl): Tối thiểu 1920px, tối đa 5000px;
- Máy tính để bàn (lg): Tối thiểu 1280px, tối đa 1919px;
- Máy tính xách tay (md): Tối thiểu 960px, tối đa 1279px;
- Máy tính bảng (sm): Tối thiểu 600px, tối đa 959px;
- Điện thoại (xs): Tối đa 599px.
Thêm điểm ngắt
- Mở cửa sổ Quản lý bố cục và nhấp vào nút “+” trong bảng điểm ngắt;
- Chọn điểm ngắt từ danh sách thả xuống;
- Khi thêm điểm ngắt mới, bạn có thể chọn độ phân giải màn hình tương ứng và sao chép cả widget và cài đặt bố cục từ một điểm ngắt khác. Nhấp Thêm.
- Nhấp vào biểu tượng bánh răng để mở cài đặt bố cục cho điểm ngắt đó. Cài đặt bố cục xác định cấu hình nền của bảng điều khiển và cách sắp xếp widget trên đó.
- Nhấp vào biểu tượng thùng rác để xóa điểm ngắt và xác nhận trong hộp thoại.
Chuyển đổi giữa các điểm ngắt
Khi người dùng mở bảng điều khiển, bố cục điểm ngắt phù hợp sẽ tự động được chọn dựa trên độ phân giải màn hình.
Khi chỉnh sửa bảng điều khiển, người dùng có thể chuyển đổi giữa các bố cục bằng hộp chọn ở góc trên bên trái màn hình.
Bảng điều khiển demo điểm ngắt
Chúng tôi đã chuẩn bị một bảng điều khiển demo với các điểm ngắt được cấu hình. Bạn có thể nhập nó vào môi trường của mình để khám phá cách chuyển đổi giữa các điểm ngắt trong chế độ chỉnh sửa. Bạn cũng có thể thay đổi độ phân giải màn hình trong công cụ phát triển của trình duyệt để xem bố cục thay đổi khi vượt qua các ngưỡng độ phân giải màn hình.
Xem bảng điều khiển trông như thế nào trên các loại màn hình:
- Điểm ngắt Mặc định.
- Điểm ngắt Máy tính xách tay.
- Điểm ngắt Điện thoại.
Tham chiếu widget so với bản sao widget
Tham chiếu widget
Khi làm việc với nhiều điểm ngắt, cần hiểu sự khác biệt giữa tham chiếu widget và bản sao widget.
Mặc định, khi tạo bố cục điểm ngắt mới, tất cả widget từ bố cục nguồn được sao chép dưới dạng tham chiếu. Ví dụ, nếu hai điểm ngắt—Mặc định và Máy tính để bàn (xl)—tham chiếu cùng một widget biểu đồ, bất kỳ thay đổi nào trong cấu hình widget sẽ được đồng bộ giữa cả hai bố cục. Tuy nhiên, thay đổi về vị trí và kích thước widget là độc lập cho từng bố cục.
- Để sao chép widget dưới dạng tham chiếu, nhấp chuột phải vào widget và chọn Sao chép tham chiếu (Ctrl+R);
- Để dán widget dưới dạng tham chiếu trong bố cục điểm ngắt khác, nhấp chuột phải vào khoảng trống và chọn Dán tham chiếu (Ctrl+I).
Trong chế độ chỉnh sửa, bạn có thể nhận biết widget tham chiếu bằng nút Tham chiếu trong bảng chỉnh sửa widget.
Để thay thế tham chiếu bằng bản sao widget, nhấp vào nút Tham chiếu trên bảng chỉnh sửa widget hoặc nhấp chuột phải vào widget và chọn Thay thế tham chiếu bằng bản sao widget.
Bản sao widget
Bản sao widget là một bản sao hoàn chỉnh và độc lập của cấu hình widget. Thay đổi trên bản sao widget không ảnh hưởng đến widget gốc.
- Để sao chép widget, nhấp chuột phải vào widget và chọn Sao chép (Ctrl+C);
- Để dán widget trong bố cục điểm ngắt khác, nhấp chuột phải vào khoảng trống và chọn Dán (Ctrl+V).
Cài đặt bố cục
Nhấp vào biểu tượng bánh răng đối diện với điểm ngắt để mở cài đặt bố cục.
Số cột
Khi chỉnh sửa bảng điều khiển, đặc biệt là kích thước và khoảng cách của widget, bạn sẽ thấy lưới màu trắng trên nền xám. Đây là các cột xác định số lượng widget có thể đặt ngang trên bảng điều khiển. Mặc định, số cột là 24. Bạn có thể tăng hoặc giảm số cột, với tối thiểu 10 cột và tối đa 1000 cột.
Chiều rộng bố cục tối thiểu
Mặc định, số cột tối thiểu là 24. Bạn có thể tăng hoặc giảm số này, nhưng nên bằng hoặc lớn hơn số cột.
Khoảng cách giữa các widget
Tham số này xác định khoảng cách giữa các widget. Mặc định, khoảng cách là 10. Bạn có thể đặt về 0 để loại bỏ khoảng cách hoặc tăng lên, tối đa là 50.
Áp dụng khoảng cách cho các cạnh bố cục
Tham số này quyết định liệu giá trị Khoảng cách giữa các widget có được áp dụng cho các cạnh của bố cục hay không.
- Có khoảng cách giữa widget và cạnh bố cục.
- Không có khoảng cách giữa widget và cạnh bố cục.
Tự động điền chiều cao bố cục
Mặc định, hộp kiểm Tự động điền chiều cao bố cục không được chọn để bạn có thể tự do điều chỉnh kích thước widget. Nếu bật, tất cả widget trên bảng điều khiển sẽ lấp đầy không gian màn hình theo chiều dọc.
Màu nền
Tùy chọn Màu nền cho phép tùy chỉnh màu nền của bảng điều khiển. Để thay đổi, nhấp vào ô màu bên phải trong phần màu nền, chọn màu và độ trong suốt mong muốn trong cửa sổ bật lên, sau đó nhấp Chọn. Áp dụng cài đặt bố cục và lưu để xem nền đã tùy chỉnh.
Hình nền
Tùy chọn này cho phép đặt hình ảnh làm nền bảng điều khiển. Bạn có thể chọn hình ảnh từ Thư viện hình ảnh hoặc đặt liên kết trực tiếp.
- Để chọn hình ảnh từ thư viện, nhấp Duyệt từ thư viện, chọn hình ảnh đã tải hoặc thêm hình mới.
- Để điều chỉnh vị trí hình ảnh chính xác hơn, nhấp vào menu thả xuống trong phần Chế độ kích thước nền và chọn cách hình ảnh lấp đầy không gian nền, ví dụ: Che phủ. Nhấp Lưu để xem thay đổi.
Cài đặt bố cục di động
Mặc định, hộp kiểm Tự động điền chiều cao bố cục không được chọn để bạn có thể tự do điều chỉnh kích thước widget cho thiết bị di động. Nếu bật, tất cả widget trên bảng điều khiển sẽ lấp đầy không gian màn hình theo chiều dọc.
Chiều cao hàng di động
Chiều cao hàng di động xác định độ cao của widget trên thiết bị di động. Mặc định là 70px, nhưng bạn có thể điều chỉnh nhỏ hơn hoặc lớn hơn, với tối thiểu 5px và tối đa 200px.