Tùy chỉnh giao diện bảng thông tin

Bảng thông tin của Omniscol được thiết kế để hòa hợp về mặt hình ảnh với bộ nhận diện của trường bạn. Có hai mức tùy chỉnh: (1) các thiết lập trong giao diện (đủ dùng cho phần lớn trường hợp), (2) thay thế hoàn toàn trang web hiển thị bảng thông tin (dành cho những triển khai có bản sắc thị giác mạnh).

Thiết lập trong giao diện

Trong mô-đun Thời khóa biểu, nút Bảng thông tin mở màn hình cấu hình bảng thông tin. Màn hình này cung cấp các tùy chọn hiển thị sau, thay đổi được mà không cần đụng đến mã nguồn:

  • Cỡ chữ — nhỏ, vừa hoặc lớn. Phần hiển thị dùng đơn vị tương đối theo kích thước cửa sổ (vmin), nên độ dễ đọc vẫn nhất quán dù màn hình ở định dạng nào (16:9, 4:3, dọc).
  • Màu sắc — màu nền, màu chữ, màu của các dòng chẵn và dòng lẻ trong lưới tiết học. Mọi mã màu thập lục phân đều được chấp nhận; bạn có thể tái hiện đúng bảng màu của bộ nhận diện.
  • Dải tiêu đề — tổ hợp có thứ tự của: tiêu đề, logo, ngày hôm nay. Bạn chọn nội dung nào xuất hiện ở phần đầu trang và theo thứ tự nào.
  • Cột của lưới — chọn và sắp xếp trong số: phòng học, lớp, giáo viên, môn học, thời gian. Ẩn một cột (ví dụ cột giáo viên trên bảng thông tin công khai đặt ở lối vào) hay đổi thứ tự cột đều có hiệu lực ngay.
  • Định dạng tên giáo viên — tên-họ, họ-tên, danh xưng + họ (Bà Nguyễn), danh xưng + tên. Các danh xưng Ông và Bà tự động theo ngôn ngữ của giao diện; điều bạn đặt riêng cho từng bảng là định dạng đã chọn.
  • Logo — logo đã tải lên trong phần cấu hình của trường có thể hiển thị trên dải tiêu đề.

Các thiết lập này được lưu trong cấu hình của bảng thông tin. Lưu ý: khác với tiết học và thông báo vốn tự làm mới, những tùy chọn hình ảnh này (màu sắc, cỡ chữ, cột, dải tiêu đề, định dạng tên) được nhúng vào trang ngay lúc trang được tải. Sau khi lưu, hãy tải lại các thẻ trình duyệt đang mở trên những màn hình đó (F5 hoặc khởi động lại trang ở chế độ kiosk) để chúng nhận giao diện mới.

Thay thế hoàn toàn mẫu trang (giấy phép MIT)

Mẫu trang dùng để hiển thị bảng thông tin được ghi rõ là theo giấy phép MIT và có thể sao chép rồi chỉnh sửa để tùy biến bảng thông tin của một trường.

Điều đó mở ra nhiều hướng đi cho những trường muốn tiến xa hơn các thiết lập có sẵn:

  • Làm lại toàn bộ giao diện — viết lại HTML/CSS của mẫu trang để bám sát một bộ nhận diện mạnh (phông chữ riêng, hiệu ứng động đặc thù, bố cục không theo chuẩn).
  • Tích hợp vào hệ thống hiển thị (signage) sẵn có — nhúng nội dung của một bảng thông tin Omniscol vào một trang hiển thị tổng thể, nơi luân phiên tiết học, thời tiết, tin tức của trường, video…
  • Dạng xem riêng theo nghiệp vụ — chẳng hạn tạo màn hình cho nhân viên giám thị (ai phải làm gì), cho bộ phận kỹ thuật (tình trạng sử dụng phòng học kèm nhu cầu thiết bị), v.v.

Để làm việc đó, có hai cách tiếp cận bổ trợ cho nhau:

  1. Fork mẫu trang — nếu bạn tự lưu trữ Omniscol, hãy nhân bản panel.dot, sửa lại rồi triển khai phiên bản của bạn. Giấy phép MIT cho phép rõ ràng việc sửa đổi, phân phối lại và sử dụng cho mục đích thương mại.
  2. API JSON của bảng thông tin — nếu bạn muốn giữ Omniscol làm nguồn dữ liệu nhưng để bên thứ ba lo phần hiển thị, URL của bảng thông tin còn cung cấp một biến thể JSON (GET /panels/:accesshash/lessons). Nó trả về danh sách các tiết học đã lọc theo cấu hình của bảng, sẵn sàng cho một hệ thống signage bên thứ ba sử dụng (Yodeck, Xibo, ScreenCloud, hoặc một trang tổng quan tự xây). URL này mở được bằng khóa truy cập của bảng, không cần thêm mã thông báo nào. Với những tích hợp hệ thống với hệ thống ở quy mô lớn hơn, API REST của Omniscol được mô tả trong API Omniscol.

Khuyến nghị thực tế

Vài điểm thường gặp trong các đợt triển khai:

  • Độ tương phản — nền tối kèm chữ sáng dễ chịu cho mắt hơn nền trắng khi màn hình chạy 12 giờ mỗi ngày.
  • Cỡ chữ "Lớn" ngay khi màn hình được đọc từ khoảng cách trên 2 m (điển hình là sảnh lối vào). Giữ "Vừa" cho màn hình đặt trước cửa phòng học, vốn được nhìn ở khoảng cách gần.
  • Logo trên dải tiêu đề — luôn hữu ích để nhận biết nhanh khi nhiều bảng thông tin cùng tồn tại trong một cơ sở lớn.
  • Ngày trên dải tiêu đề — hữu ích ở sảnh (khách đến trường hay xem ngày), ít hữu ích hơn khi đặt trước một phòng học (bối cảnh đã rõ).
  • Ẩn cột giáo viên trên các bảng thông tin công khai nếu trường bạn có quy định nội bộ về việc hiển thị họ tên.

Hướng dẫn

Áp bộ nhận diện của trường lên một bảng thông tin

  1. Hai mức tùy chỉnh: (1) thiết lập trong giao diện (đủ dùng trong 90% trường hợp), (2) thay thế hoàn toàn mẫu trang MIT cho những bộ nhận diện mạnh.

  2. Mở cấu hình của bảng thông tin trong mô-đun Thời khóa biểu, qua nút Bảng thông tin. Màn hình cho thấy các tùy chọn hiển thị: màu sắc, cỡ chữ, dải tiêu đề, cột, định dạng tên.

  3. Chỉnh màu theo bộ nhận diện của bạn: màu nền, màu chữ, màu các dòng chẵn/lẻ. Chấp nhận mã màu thập lục phân. Với màn hình chạy 12 giờ mỗi ngày, hãy ưu tiên nền tối kèm chữ sáng (dễ chịu cho mắt hơn).

  4. Dải tiêu đề: chọn thứ tự của logo, tiêu đề, ngày. Logo hữu ích ngay khi một cơ sở có nhiều bảng thông tin. Ngày hữu ích ở sảnh, có thể bỏ khi đặt trước phòng học.

  5. Cột của lưới: chọn và sắp xếp lại trong số phòng học, lớp, giáo viên, môn học, thời gian. Với bảng thông tin công khai đặt ở lối vào mà quy định nội bộ của trường cấm hiển thị họ tên, hãy ẩn cột giáo viên.

    Định dạng tên (nếu vẫn giữ cột): tên-họ, họ-tên, danh xưng+họ, danh xưng+tên.

  6. Cỡ chữ: lớn ngay khi màn hình được đọc từ trên 2 m (sảnh), vừa cho màn hình trước cửa phòng học (nhìn gần). Đơn vị tương đối vmin — độ dễ đọc vẫn nhất quán dù màn hình ở định dạng nào.

  7. Lưu lại, rồi tải lại các màn hình. Những thiết lập hiển thị này được nhúng vào trang lúc tải: hãy tải lại (F5) các thẻ trình duyệt đang mở trên các bảng thông tin để chúng nhận giao diện mới.

    Để đi xa hơn (làm lại toàn bộ giao diện, tích hợp với hệ thống signage bên thứ ba Yodeck/Xibo/ScreenCloud): mẫu trang panel.dot nằm dưới giấy phép MIT, được phép fork. Biến thể JSON của URL bảng thông tin (GET /panels/:accesshash/lessons) cung cấp dữ liệu sẵn sàng cho một hệ thống bên ngoài sử dụng, với khóa truy cập của bảng. Về API REST rộng hơn, xem API Omniscol.

Xem thêm