trang tiến hành tổ máy Screen

 Mình sẽ giải nén và xem cấu trúc screens.json trước.

Mình đã bố trí lại xong màn “Thiết bị Phụ” và đóng gói thành Screen_Thiet_bi_Phu_pro.zip, có manifest.json và screens.json ở gốc. Các file images/ và widgets/ giữ nguyên từng byte. Mình chưa import thử vào ScadaWeb. Ảnh xem trước là mô phỏng, nên ScadaWeb có thể hiển thị lệch đôi chút.

Những gì đã đổi (đều chỉ là giá trị số hoặc màu, không thêm/xoá widget, không đổi tên key):

• Bố cục: chia 3 cột lưới đều, lề 28px, khoảng cách giữa các cột 30px.
  • Cột trái: bơm dầu H1, bơm dầu H12 và nén khí, mỗi khối cao 300px. Hai bơm nằm cùng hàng với hai ô hiển thị bên phải, tâm bơm trùng tâm ống.
  • Cột giữa: hai khung Tổ máy 1 và 2 ở trên, ba cụm bơm cứu hỏa, rò rỉ, tháo cạn ở dưới, đều nhau.
  • Cột phải: Van đĩa H1 và H2.
• Chỗ chồng nhau ở bản gốc đã hết: hai bể dầu H1/H12 không còn đè lên nhau, và các ô hiển thị không còn nằm đè lên thân bể.
• Cỡ chữ: tất cả thanh tiêu đề có cùng chiều cao 32px nên chữ đều nhau. Nhãn “Bơm 1”, “Bơm 2”, “Motor1”, “Motor2” đặt bên trái bơm, cùng cỡ.
• Màu:
  • Ống: bật #2bb7ff, tắt #34475a.
  • Thanh mức bể: bật #00b0ff.
  • Bơm và van: Tắt #78909c, Bật giữ #00e676.
  • Mình không đổi màu của Label, Picture và các widget lib: vì không rõ chúng dùng màu đó vào việc gì.

Giữ nguyên, nên chữ trong ô hiển thị có thể chưa như ý:

• Ống: kích thước ống và Points giữ nguyên, nên mình chỉ dời vị trí. Ống ngắn hơn khoảng cách mong muốn thì bể và khung được đặt sát lại cho khớp.
• Props: mình không đụng tới Props, nên cỡ chữ của lib:label_pro và lib:display vẫn là tự động theo W/H của ô.

Trùng Tag trong file gốc: DI2_Unit2_154 đang gắn cho cả hai ống của Tổ máy 2, trong khi bơm đầu tiên dùng DI2_Unit2_152. Mình không đổi vì bạn yêu cầu giữ nguyên Tag, nhưng có thể đây là lỗi gõ tag.

Files are in /home/claude:

• Screen_Thiet_bi_Phu_pro.zip

• Được, mình sẽ mở rộng phạm vi: tạo thẻ nền (card) cho từng khu vực, tiêu đề dạng thanh nhấn, ống dẫn đẹp hơn, chỉnh Props của nhãn và ô hiển thị. Trước tiên mình xem các preset và thuộc tính mà widget thư viện hỗ trợ.

  Mình đã làm xong bản thiết kế v2, đóng gói thành Screen_Thiet_bi_Phu_pro_v2.zip. Cấu trúc zip giữ nguyên, chỉ screens.json thay đổi. Mình chưa import thử vào ScadaWeb; ảnh xem trước chỉ là mô phỏng gần đúng.

  Phong cách: giao diện tối kiểu phòng điều khiển. Mỗi khu vực nằm trong một thẻ bo góc, canh đều lề 16px và khoảng cách 16px.

  • Màu theo hệ thống: vạch màu ở thanh tiêu đề và màu ống đồng bộ với nhau.
    • Dầu: vàng hổ phách.
    • Nén khí: cyan.
    • Nước kỹ thuật: xanh dương.
    • Cứu hỏa: đỏ.
    • Rò rỉ: cam đậm.
    • Tháo cạn: tím xanh.
    • Van đĩa: xanh dương nhạt.
  • Tiêu đề: thanh tiêu đề đều chữ 18px, canh trái, có vạch màu bên trái.
  • Khung Tổ máy: viền tối, tên “TỔ MÁY 1/2” hiển thị kiểu màn LED phát sáng.
  • Ô hiển thị: viền và đơn vị theo màu hệ thống, bo góc, tỏa sáng nhẹ. Đã đổi icon thành “pressure” cho áp lực và “gauge” cho trạng thái van.
  • Ống: màu theo môi chất, viền tối phẳng hơn.
  • Khác: thanh mức bể dầu đổi sang màu vàng của hệ dầu.
  • Layout: 3 cột. Dầu và khí ở bên trái, nước kỹ thuật cùng 3 cụm bơm hố ở giữa, van đĩa H1/H2 bên phải. Toàn bộ nằm gọn trong 1600×1000.

  Lưu ý:

  • Widget thêm mới: 11 widget (1 nền và 10 thẻ) thêm vào dưới cùng, nên tổng là 84. Chúng là bản sao của một label_pro có sẵn, chỉ để làm nền và không gắn Tag.
  • Giữ nguyên: toàn bộ widget cũ vẫn giữ Tag, Text, PopupScreen, Pens, Rows và ảnh. Các nhãn “Bơm 1/2” và “Motor1/2” thuộc loại Label thường, không có thuộc tính style nên giữ kiểu gốc.
  • Tag trùng: hai ống của Tổ máy 2 cùng mang tag DI2_Unit2_154. Mình chưa sửa vì không rõ có phải gõ nhầm.

  Nếu muốn đổi tông màu (ví dụ sáng hơn, hoặc theo màu thương hiệu của nhà máy) hay thêm thanh tiêu đề chung ở đầu màn hình, bạn cho mình biết.

  Files are in /home/claude:

  • Screen_Thiet_bi_Phu_pro_v2.zip

Nội dung chính