giao diện Screen zoom và chuyển modbile

 Tôi sẽ giải nén dự án và tìm phần xử lý chế độ Tablet/Mobile cùng trang Quản lý người dùng.

Admin giờ có ô tích để tắt chế độ Tablet/Mobile cho cả hệ thống. Tôi chưa build hay chạy thử được vì môi trường này không có .NET. Tôi chỉ kiểm tra cú pháp scada.js (đạt) và đọc lại code, nên bạn build và thử giúp tôi.

Cách dùng: vào tab Người dùng, ngay dưới tiêu đề “Quản lý người dùng” có ô tích “Cho phép chế độ Tablet / Mobile”.

• Bỏ tích (tắt):
  • Giao diện luôn là PC, không tự nhận diện lại.
  • Zoom trình duyệt (Ctrl + lăn chuột) hay thu nhỏ cửa sổ không còn nhảy sang Tablet hoặc Mobile.
  • Nhóm nút chọn Tự động / PC / Tablet / Mobile trên thanh trên bị ẩn.
  • Người dùng đang mở ở chế độ khác sẽ được đưa về PC ngay.
• Tích (bật): giữ nguyên hành vi cũ, mặc định vẫn là bật.

Lưu ý:

• Cài đặt áp dụng cho mọi người dùng và được lưu vào file ui_settings.json trong thư mục dữ liệu. Các máy khác đang mở cần tải lại trang để nhận.
• Khi tắt, ở điện thoại trang vẫn hiển thị theo bề rộng PC và bạn zoom bằng tay (chụm ngón tay). Tôi chủ ý giữ vậy để bố cục PC không bị vỡ.
• Ở PC, các quy tắc ẩn ô trạng thái và tên user khi cửa sổ hẹp dưới 1700 hoặc 1500 px (CSS có sẵn) vẫn còn. Nếu bạn muốn bỏ luôn thì nói tôi.

File đã sửa: UiSettings.cs (mới), Program.cs, Components/App.razor, Components/Home.razor, wwwroot/scada.js. Tôi đã nâng số phiên bản scada.js lên v=18 để trình duyệt tự tải bản mới.

File đính kèm: ScadaWeb_tat_tablet_mobile.zipNguyên nhân: ở chế độ chạy, canvas tự co vừa cửa sổ. Khi bạn zoom trình duyệt thì cửa sổ (tính theo CSS px) nhỏ lại, canvas co theo nên widget trông như không phóng to, chỉ có thanh menu phóng to. Tôi sẽ bù hệ số zoom của trình duyệt vào tỉ lệ canvas.

Tôi đã sửa để khi zoom trình duyệt (Ctrl + lăn chuột), cả menu lẫn widget phóng to hoặc thu nhỏ cùng nhau. Tôi chưa build hay chạy thử được (môi trường này không có .NET), nên bạn build và thử giúp tôi.

Nguyên nhân: ở chế độ chạy, canvas tự co vừa khung cửa sổ. Khi bạn zoom trình duyệt, cửa sổ tính theo CSS px nhỏ lại, canvas co theo, nên widget trông như không đổi còn thanh menu thì to ra.

Cách sửa (trong wwwroot/scada.js):

• Tôi thêm hàm browserZoom(), suy ra mức zoom từ tỉ lệ outerWidth/innerWidth rồi làm tròn về các mức chuẩn của Chrome/Edge (50%, 67%, 75%, 90%, 110%, 125%, 150%...).
• Tỉ lệ canvas được nhân thêm hệ số này, nên canvas giữ đúng tỉ lệ so với khung ở 100%.
• Toạ độ widget vẫn tính theo hệ thiết kế, nên khi zoom widget và icon không bị xê dịch.

Giới hạn:

• Cách này chỉ đo được khi cửa sổ bình thường. Nếu mở DevTools dạng dock, hoặc cửa sổ có tỉ lệ lạ (lệch hơn 4% so với mức zoom chuẩn), hệ số quay về 1 và canvas co vừa khung như trước.
• Màn cảm ứng (điện thoại, tablet) không dùng cách này, vì ở đó bạn zoom bằng ngón tay.
• Chế độ chỉnh sửa của Admin vốn đã giữ tỉ lệ 1:1 nên không bị ảnh hưởng.
• Tôi đã nâng số phiên bản scada.js lên v=19, trình duyệt sẽ tự tải bản mới.

File đính kèm: ScadaWeb_tat_tablet_mobile.zip (đã gồm cả thay đổi Tablet/Mobile ở lượt trước).Ở chế độ Runtime, giữ Ctrl + lăn chuột (hoặc chụm 2 ngón trên touchpad) sẽ zoom sơ đồ ngay tại điểm con trỏ. Tôi chưa build hay chạy thử được vì môi trường này không có .NET, nên bạn build và thử giúp tôi.

• Zoom tại con trỏ: điểm dưới con trỏ đứng yên, phần còn lại phóng ra hoặc thu vào quanh điểm đó.
• Widget không xê dịch: cả canvas dùng một phép co giãn chung, nên widget và icon giữ nguyên vị trí tương đối.
• Mức zoom: từ 50% đến 400%. Khi phóng to hơn khung, dùng thanh cuộn của vùng sơ đồ để di chuyển.
• Zoom vùng sơ đồ, không zoom thanh menu: Ctrl + lăn chuột chỉ phóng to phần sơ đồ, thanh menu giữ nguyên. Đây là cách duy nhất để zoom đúng tại con trỏ. Zoom của trình duyệt chỉ phóng quanh góc trang nên không làm được. Nếu để con trỏ trên thanh menu, Ctrl + lăn chuột vẫn là zoom thường của trình duyệt.
• Phím Ctrl + / Ctrl −: vẫn zoom cả trang như trước, và sơ đồ vẫn phóng đồng bộ theo như bản trước.
• Không bị chiếm thao tác: khi con trỏ nằm trong widget Trend, Alarm, bản đồ, ô chọn hoặc ô nhập, Ctrl + lăn chuột vẫn giữ tác dụng riêng của chúng.
• Chế độ thiết kế: Admin vẫn dùng cách zoom CAD sẵn có (lăn chuột), không đổi.

Tôi đã nâng scada.js lên v=20 để trình duyệt tự tải bản mới. File đính kèm: ScadaWeb_tat_tablet_mobile.zip, gồm cả các thay đổi ở hai lượt trước.Giờ sơ đồ tự vừa khít cửa sổ khi đăng nhập, khi bấm “Toàn màn hình” và khi đổi sang màn hình khác. Chế độ zoom thông minh chỉ chạy khi chính người dùng zoom. Tôi chưa build hay chạy thử được vì môi trường này không có .NET, nên bạn build và thử giúp tôi.

Tự vừa màn hình: khi đăng nhập, bấm “Toàn màn hình”, thoát toàn màn hình hoặc đổi màn hình, hệ thống làm đủ bốn việc sau:

• bỏ mức zoom cũ của người dùng;
• cuộn về góc trên-trái;
• tính lại kích thước để vừa khít khung;
• chạy lại thêm hai lần sau 150 ms và 500 ms, vì cửa sổ đổi cỡ dần khi vào hoặc thoát toàn màn hình.

Zoom chỉ tính khi người dùng zoom:

• Cách cũ suy mức zoom từ tỉ lệ cửa sổ ngoài và trong, dễ đoán sai và có thể làm sơ đồ bị lệch ngay từ đầu.
• Cách mới chỉ so mức zoom hiện tại với mức lúc hệ thống tự vừa màn hình gần nhất.
• Chưa zoom thì hệ số là 1, sơ đồ vừa khít cửa sổ dù trình duyệt đang đặt zoom bao nhiêu. Chỉ khi bạn bấm Ctrl + / Ctrl − thì sơ đồ mới phóng đồng bộ theo menu.
• Ctrl + lăn chuột vẫn zoom tại điểm con trỏ như lượt trước.

Chưa rõ: trong ảnh, sơ đồ không phủ hết bề ngang và có thanh cuộn dọc. Tôi chưa biết chắc nguyên nhân. Có thể do hệ số zoom đoán sai ở bản cũ, và cách mới sẽ khắc phục. Cũng có thể màn hình này có widget nằm ngoài vùng thiết kế 1700×850, và nếu vậy bản này không tự co theo phần đó. Bạn thử bản mới, nếu vẫn lệch thì gửi lại ảnh kèm cỡ cửa sổ.

Tôi đã nâng scada.js lên v=21. File đính kèm: ScadaWeb_tat_tablet_mobile.zip, gồm cả các thay đổi ở những lượt trước.Khi mất kết nối, trang giờ tự nối lại, hoặc tự tải lại khi server chạy lại, nên người dùng không phải bấm “Reload” nữa. Tôi chưa build hay chạy thử được vì môi trường này không có .NET, nên bạn build và thử giúp tôi.

Nguyên nhân: Blazor Server chỉ thử nối lại 8 lần rồi dừng. Nếu server khởi động lại thì phiên cũ không còn, nên chỉ còn nút “Reload”.

Cách sửa:

• wwwroot/reconnect.js (file mới): Blazor nối lại không giới hạn số lần, mỗi 2 giây.
• Nối lại được: trang giữ nguyên, không tải lại.
• Server chạy lại nhưng phiên cũ mất: nếu 5 giây sau khi server lên mà vẫn chưa nối lại được, trang tự tải lại. Server chưa lên thì cứ chờ.
• Có mạng trở lại hoặc quay lại tab trình duyệt: kiểm tra ngay, không chờ chu kỳ 2 giây.
• App.razor: tôi chuyển Blazor sang khởi động thủ công để áp các thiết lập trên.
• Program.cs: server giữ phiên đã ngắt 10 phút (mặc định 3 phút), nên mất kết nối ngắn thì nối lại đúng phiên cũ.

Lưu ý:

• Trong lúc chờ, vẫn thấy lớp mờ “Could not reconnect...” của Blazor, nhưng sẽ tự biến mất. Nếu muốn ẩn hẳn lớp mờ hoặc thay bằng thông báo tiếng Việt như “Đang kết nối lại…”, tôi làm thêm được.
• Hàm cấu hình nối lại này theo cách dùng của .NET 8. Phần phát hiện mất kết nối còn có một đường dự phòng đọc trạng thái của lớp mờ mặc định. Bạn thử bằng cách tắt rồi bật lại ScadaWeb.exe khi đang mở trang, và báo tôi nếu trang không tự quay lại.

File đính kèm: ScadaWeb_tat_tablet_mobile.zip, gồm cả các thay đổi ở những lượt trước.Khi tự kết nối lại (hoặc nhấn F5), trang giờ quay về đúng màn hình đang mở, không về màn hình chính nữa. Tôi chưa build hay chạy thử được vì môi trường này không có .NET, nên bạn build và thử giúp tôi.

Nguyên nhân: màn hình đang xem chỉ nằm trong bộ nhớ của phiên. Khi phiên mất và trang tải lại, địa chỉ vẫn là / nên hệ thống đưa về màn hình mặc định.

Cách sửa:

• Mỗi khi đổi màn hình, địa chỉ trang tự cập nhật thành dạng /?v=scr:<id>&r=0. Cập nhật bằng history.replaceState, nên không tải lại trang và không thêm mục vào lịch sử trình duyệt.
• v là màn hình hay tab đang mở, gồm màn hình, Trend, Alarm, Báo cáo, Thiết bị, Người dùng.
• r là chế độ của Admin: 1 là Runtime, 0 là Edit.
• Khi trang tải lại, hệ thống đọc v và r rồi mở đúng chỗ đó.
• Màn hình nào user không còn quyền vào, hoặc đã bị xoá, thì tự chuyển sang màn hình được phép đầu tiên.
• Địa chỉ này còn dùng để gửi link đúng màn hình cho người khác. Họ vẫn phải đăng nhập, và chỉ vào được màn hình họ có quyền.

Lưu ý:

• Đăng nhập mới (không có ?v=) vẫn vào màn hình mặc định của user như trước.
• Nếu phiên đăng nhập hết hạn trong lúc mất kết nối, trang sẽ về trang đăng nhập. Đăng nhập xong sẽ vào màn hình mặc định, chưa quay lại đúng chỗ cũ. Nếu muốn quay lại đúng chỗ cũ thì tôi làm thêm được.
• Chỉ nhớ được màn hình và chế độ. Popup đang mở, vùng chọn hay mức zoom thì không giữ.

Tôi đã nâng scada.js lên v=22. Các file đã sửa: Components/Home.razor, wwwroot/scada.js, Components/App.razor. File đính kèm: ScadaWeb_tat_tablet_mobile.zip, gồm cả các thay đổi ở những lượt trước.

Nội dung chính