Smart Displays và ứng dụng đã xuất bản
Trên trang này
Smart Display là màn hình hiển thị một ứng dụng do AI Agent của bạn lưu trữ. Vì agent vận hành ứng dụng, agent có thể thay đổi nội dung màn hình hiển thị khi mọi thứ xung quanh thay đổi: giờ cao điểm bữa trưa tại quầy, một vị khách mở cửa trước, sảnh khách sạn đông dần, phòng chờ đông người, hội viên đến tham gia thử thách lượt đến. Hãy mô tả điều bạn muốn bằng ngôn ngữ thông thường. Agent xây dựng ứng dụng, giữ ứng dụng luôn cập nhật, và bạn đưa ứng dụng lên màn hình như mọi nội dung khác.


Hình 1: Một Smart Display trong khu tập của phòng tập. Agent đếm lại các lượt check-in vài phút một lần và cho các hội viên vừa đến biết thứ hạng của họ. Câu lạc bộ và các hội viên đều là hư cấu.
Bạn luôn nắm quyền kiểm soát: mọi ứng dụng đều nằm trong Library của bạn, nơi bạn có thể xem trước, xem ứng dụng đang được dùng ở đâu, và thay đổi hoặc gỡ bỏ ứng dụng.
Màn hình thông minh
Smart Display sử dụng một Agent: Published App: một ứng dụng web do AI Agent của bạn xây dựng, chạy trực tiếp trên thiết bị AI Agent của cơ sở. Màn hình hiển thị ứng dụng trực tiếp, vì vậy khi agent thay đổi nội dung ứng dụng, màn hình cũng thay đổi theo. Không ai cần xuất bản lại bất cứ thứ gì.
Agent giữ ứng dụng luôn cập nhật theo một trong hai cách:
- Theo lịch. Một tác vụ tự động chạy vài phút một lần trong những khung giờ quan trọng. Thông qua kết nối với Performance Hub, agent đọc những gì cần thiết, chẳng hạn lượt check-in, sự kiện cửa hoặc số đếm từ camera, và cập nhật ứng dụng. Mỗi lần chạy đều phát sinh chi phí AI, vì vậy chỉ nên kiểm tra với tần suất cần thiết.
- Khi có sự kiện xảy ra. Một sự kiện tại địa điểm của bạn, chẳng hạn thẻ của khách mở cửa trước, sẽ thúc đẩy agent cập nhật ứng dụng. Màn hình thay đổi ngay sau sự kiện, và agent không phải làm gì trong khoảng thời gian giữa các sự kiện. Xem bảng chào mừng tại sảnh văn phòng.
Smart Display chỉ có thể sử dụng những gì agent có thể đọc. Quyền truy cập MCP của agent phải bao gồm cơ sở và các khả năng mà ứng dụng cần, chẳng hạn Door & Gate Access cho sự kiện cửa hoặc camera giám sát cho lượt check-in và số đếm từ camera. Xem Kết nối với Performance Hub.
Hai cách để ứng dụng đến được màn hình của bạn
| Agent: Published App (Smart Display) | On-Device Web App | |
|---|---|---|
| Ai xây dựng | AI Agent của bạn | Bạn, một nhà phát triển, hoặc bất kỳ AI agent nào được kết nối qua MCP |
| Nơi chạy | Trên thiết bị AI Agent của bạn, được hiển thị trực tiếp trên màn hình | Trên từng màn hình (màn hình tải ứng dụng xuống) |
| Liên tục thích ứng | Có: agent thay đổi ứng dụng khi mọi thứ tại địa điểm của bạn thay đổi | Không: ứng dụng phát cùng các tệp cho đến khi có phiên bản mới được xuất bản |
| Dữ liệu của cơ sở | Có, mọi dữ liệu agent có thể đọc | Không: chỉ dữ liệu công khai, chẳng hạn thời tiết |
| Nếu mất internet hoặc agent ngừng hoạt động | Bị bỏ qua cho đến khi agent hoạt động trở lại | Vẫn tiếp tục phát |
| Phiên bản và khôi phục | Do agent quản lý | Có, trong Library |
| Mô-đun cần có | Display Screens, AI Agent và Custom Apps | Display Screens |
Agent của bạn cũng có thể xây dựng On-Device Web App cho bạn, nhưng sau khi được xuất bản, ứng dụng đó không thể liên tục thích ứng. Ứng dụng phát cùng các tệp trên mọi màn hình cho đến khi có người xuất bản phiên bản mới, và không thể sử dụng dữ liệu của cơ sở. Chỉ Agent: Published App mới liên tục thay đổi theo những gì diễn ra xung quanh màn hình.
Hãy chọn Smart Display khi màn hình cần phản ứng với địa điểm của bạn: ai đã đến, mức độ đông đúc, hoặc điều gì vừa xảy ra. Hãy chọn On-Device Web App cho nội dung không thay đổi hoặc chỉ cần dữ liệu công khai, và phải tiếp tục phát khi ngoại tuyến.
Ví dụ về Smart Display
Mỗi ví dụ dưới đây là một thiết lập thực tế: màn hình phản ứng với điều gì, hiển thị gì, agent giữ màn hình luôn cập nhật như thế nào và bạn cần những gì. Các doanh nghiệp và con người đều là hư cấu.
Bảng xếp hạng thử thách lượt đến chào đón hội viên khi họ đến
Một không gian làm việc chung, một thư viện trong khuôn viên trường hoặc một phòng tập tổ chức thử thách lượt đến trong tháng. Agent của nơi đó lưu trữ một bảng xếp hạng cho các màn hình mà hội viên đi ngang qua, xếp hạng hội viên theo số lượt đến trong tháng này và chào đón các hội viên tham gia thử thách khi họ ở gần màn hình. Trong các hình minh họa, một phòng tập tổ chức thử thách lượt đến tháng Mười trên các màn hình ở khu tập.
- Phản ứng với: những ai đang ở gần màn hình. Agent biết điều này thông qua tính năng nhận diện khuôn mặt của Performance Hub, các lượt check-in gần đây, hoặc cả hai, tùy theo cách địa điểm của bạn thiết lập. Mỗi hội viên tham gia thử thách ở gần màn hình sẽ nhận được nhãn Just in và một thẻ cho biết thứ hạng của họ. Trong các hình minh họa, phòng tập sử dụng các lượt check-in trong 30 phút gần nhất.
- Hiển thị: các hội viên dẫn đầu theo số lượt đến, chỉ gồm tên và chữ cái đầu của họ, số ngày còn lại của thử thách và giải thưởng.
- Luôn cập nhật: cứ 5 phút một lần trong giờ mở cửa, agent đếm lại các lượt check-in của tháng này bằng
insights_checkins, kiểm tra những ai đang ở gần màn hình và cập nhật ứng dụng. - Bạn cần: camera giám sát với AI Insights & People, với tính năng nhận diện khuôn mặt trên các camera gần màn hình, lượt check-in từ hệ thống quản lý hội viên của bạn, hoặc cả hai, và danh sách những hội viên đã đồng ý tham gia thử thách.


Hình 2: Yêu cầu AI Agent của bạn tạo bảng xếp hạng. Agent xây dựng ứng dụng, mở ứng dụng bên cạnh cuộc trò chuyện, và đếm lại các lượt check-in cứ 5 phút một lần. Cuộc trò chuyện chỉ là ví dụ.


Hình 3: Cùng bảng xếp hạng đó trên màn hình dọc
Quyền riêng tư. Chỉ đưa vào những hội viên đã đồng ý, hiển thị không quá tên và chữ cái đầu của họ, và không bao giờ hiển thị thông tin hội viên hoặc sức khỏe.
Bảng thực đơn quán ăn nhanh phản ứng với giờ cao điểm bữa trưa
Một nhà hàng phục vụ nhanh yêu cầu agent tạo bảng thực đơn phía trên quầy. Bảng chuyển đổi thực đơn trong ngày và, khi quầy đông khách, đưa các món chế biến nhanh nhất lên đầu.
- Phản ứng với: thời điểm trong ngày, và mức độ đông đúc tại quầy: số người mà camera tại quầy đã đếm được tính đến thời điểm hiện tại trong giờ này, so với một giờ bình thường.
- Hiển thị: thực đơn bữa sáng đến 11 giờ sáng, bữa trưa đến 3 giờ chiều, sau đó là thực đơn buổi chiều. Khi đông khách, một biểu ngữ Ready in under 3 minutes với các món chế biến nhanh, và nhãn Quick trên các món đó trong thực đơn.
- Luôn cập nhật: cứ 5 phút một lần, agent kiểm tra số đếm từ camera trong ngày hôm nay trong AI Insights & People và cập nhật ứng dụng. Giá và thời gian chế biến lấy từ một tệp thực đơn mà bạn cung cấp cho agent.
- Bạn cần: camera giám sát với AI Insights & People, với một camera bao quát quầy.


Hình 4: Agent xây dựng bảng thực đơn và mở bảng bên cạnh cuộc trò chuyện. Agent chỉ sử dụng số đếm ẩn danh. Cuộc trò chuyện chỉ là ví dụ.


Hình 5: Kết quả phía trên quầy trong giờ cao điểm bữa trưa
Bảng chào mừng tại sảnh văn phòng cho từng khách
Một văn phòng cấp cho mỗi khách một thẻ Door & Gate Access có hiệu lực trong thời gian của chuyến thăm. Khi thẻ của khách mở cửa trước, màn hình tại sảnh chào khách bằng tên, kèm người tiếp đón, phòng họp và chỉ dẫn đường đi, sau đó quay lại lời chào thông thường sau một phút.
- Phản ứng với: thẻ của khách mở cửa trước.
- Hiển thị: "Hi Priya, great to see you", tên và nhóm của người tiếp đón, phòng họp và giờ họp, cùng chỉ dẫn đường đi từng bước.
- Luôn cập nhật: một quy trình kích hoạt lời chào khi thẻ của khách mở cửa trước. Agent đối chiếu người trong sự kiện cửa với danh sách khách hôm nay, danh sách do quầy lễ tân lưu giữ và cung cấp cho agent, kèm người tiếp đón, phòng họp và chỉ dẫn đường đi của từng khách. Sự kiện cửa không bao gồm tên, người tiếp đón hay phòng họp, vì vậy luôn cần có danh sách này.
- Bạn cần: Door & Gate Access và danh sách khách trong ngày.


Hình 6: Agent xây dựng màn hình chào mừng và mở màn hình bên cạnh cuộc trò chuyện. Cuộc trò chuyện chỉ là ví dụ.


Hình 7: Kết quả trên màn hình dọc tại sảnh
Cùng thiết lập này có thể chào đón chính nhóm của bạn. Ví dụ, màn hình có thể chúc mừng sinh nhật một thành viên trong nhóm khi họ đến vào ngày sinh nhật, dựa trên danh sách sinh nhật của những người đã đồng ý. Ngày sinh là thông tin cá nhân: chỉ đưa vào những người đã đồng ý, và hiển thị không quá tên của họ.
Cân nhắc những ai có thể nhìn thấy màn hình. Bất kỳ ai ở sảnh đều có thể thấy lời chào. Hiển thị không quá tên của người được chào, và không bao giờ hiển thị thông tin riêng tư như sức khỏe, thông tin hội viên hoặc thông tin nhân sự.
Bảng phòng chờ với thời gian chờ trực tiếp
Một phòng khám hoặc trung tâm dịch vụ hiển thị thời gian chờ hiện tại, để những người đang chờ biết điều gì sẽ diễn ra.
- Phản ứng với: số người ước tính đang chờ, từ số đếm ẩn danh của camera bao quát khu vực chờ, và lượt đến từ các lượt check-in ở những nơi địa điểm của bạn ghi nhận.
- Hiển thị: thời gian chờ ước tính và số người ước tính đang chờ, giờ mở cửa, và một thông điệp trấn an khi đông người.
- Luôn cập nhật: vài phút một lần, agent đọc số đếm và lượt đến mới nhất và tính toán thời gian chờ dựa trên thời gian trung bình cho mỗi lượt khám mà bạn cung cấp.
- Bạn cần: camera giám sát với AI Insights & People, với một camera bao quát khu vực chờ.
Ví dụ về nội dung màn hình hiển thị khi đông người:
Khoảng 25 phút
Khoảng 7 người đang chờ
Sáng nay chúng tôi đông hơn thường lệ. Cảm ơn bạn đã kiên nhẫn: chúng tôi sẽ gọi bạn ngay khi sẵn sàng.
Không bao giờ hiển thị thông tin bệnh nhân hoặc khách hàng. Bảng chỉ hiển thị tổng số, không bao giờ hiển thị tên hoặc lý do của lượt khám.
Bảng tại sảnh khách sạn thay đổi theo thời điểm trong ngày
Một khách sạn hoặc địa điểm tổ chức sự kiện cho khách biết các hoạt động đang diễn ra, thay đổi theo thời điểm trong ngày và mức độ đông đúc của sảnh.
- Phản ứng với: thời điểm trong ngày, và mức độ đông đúc của sảnh, từ số đếm ẩn danh của camera tại sảnh.
- Hiển thị: thông tin nhận phòng và thông tin Wi-Fi vào buổi chiều, các sự kiện tối nay và tình trạng bàn trống của nhà hàng vào buổi tối, giờ ăn sáng và lời nhắc trả phòng vào buổi sáng. Khi sảnh đông, thông tin nhận phòng và Wi-Fi được hiển thị trước tiên, để khách mới đến tìm thấy nhanh chóng.
- Luôn cập nhật: vài phút một lần, agent đọc số đếm tại sảnh và cập nhật ứng dụng. Thông tin sự kiện và tình trạng bàn trống của nhà hàng lấy từ các danh sách hoặc hệ thống mà bạn cấp quyền truy cập cho agent.
- Bạn cần: camera giám sát với AI Insights & People để đếm người tại sảnh. Khi không có camera giám sát, bảng vẫn thay đổi theo thời điểm trong ngày.
Ví dụ về nội dung màn hình hiển thị lúc 6 giờ chiều:
Tối nay tại Demo Harbour Hotel
Nhạc jazz tại sảnh chờ, từ 7 giờ đến 10 giờ tối
Harbour Grill: có bàn trống từ 8:30 tối. Đặt bàn tại quầy lễ tân.
Bữa sáng ngày mai từ 6:30 sáng tại Harbour Grill.
Biển hiệu trung tâm mua sắm thay đổi theo đối tượng khách
Một trung tâm mua sắm yêu cầu agent tạo biển hiệu tại khu vực sảnh giữa, chọn chương trình khuyến mãi dựa trên cơ cấu độ tuổi và giới tính của khách mua sắm ở gần biển hiệu.
- Phản ứng với: cơ cấu độ tuổi và giới tính của khách mua sắm ở gần biển hiệu trong 5 phút gần nhất, dưới dạng số đếm tổng hợp ẩn danh: tổng số theo nhóm tuổi (18-24, 25-34, 35-44, 45-54 và 55+) và theo giới tính. Không một cá nhân nào bị nhận dạng hoặc theo dõi.
- Hiển thị: chương trình khuyến mãi dành cho gia đình, sinh viên hoặc người cao tuổi, hoặc một chương trình chung, kèm đồng hồ và các hoạt động hôm nay, và không có thông tin gì về những người ở gần.
- Luôn cập nhật: cứ 5 phút một lần, agent đọc dữ liệu nhân khẩu học từ dữ liệu thị giác máy tính của cơ sở trong AI Insights & People và, bất cứ khi nào cần đổi chương trình khuyến mãi, làm mới ứng dụng.
- Bạn cần: camera giám sát với AI Insights & People tại cơ sở.


Hình 8: Agent xây dựng ứng dụng và mở ứng dụng bên cạnh cuộc trò chuyện. Agent chỉ sử dụng số đếm ẩn danh, không bao giờ sử dụng dữ liệu về từng cá nhân. Cuộc trò chuyện chỉ là ví dụ.


Hình 9: Kết quả trên màn hình ngang. Màn hình hiển thị chương trình khuyến mãi, không bao giờ hiển thị bất cứ điều gì về những người ở gần.


Hình 10: Cùng ứng dụng đó trên màn hình dọc
Quyền riêng tư. Chỉ sử dụng số đếm tổng hợp, tuân thủ luật về quyền riêng tư áp dụng cho bạn, và thông báo cho khách mua sắm rằng camera và tính năng đo lường đối tượng khách đang được sử dụng.
Hướng dẫn an toàn trong trường hợp khẩn cấp
Bất kỳ địa điểm nào cũng có thể cho màn hình chuyển sang hướng dẫn an toàn trong trường hợp khẩn cấp, và trở lại bình thường khi tình huống kết thúc.
- Phản ứng với: bất kỳ trình kích hoạt nào mà địa điểm của bạn chọn, ví dụ một đợt phong tỏa hoặc sơ tán do địa điểm của bạn khởi động, và thời điểm sự kiện đó kết thúc.
- Hiển thị: các hướng dẫn bạn đã chuẩn bị cho sự kiện đó, thay cho mọi nội dung khác trên các màn hình bạn chọn. Khi sự kiện kết thúc, màn hình quay lại nội dung thông thường.
- Luôn cập nhật: các màn hình bạn chọn chuyển sang hướng dẫn của bạn khi trình kích hoạt bạn chọn xảy ra, và chuyển trở lại khi sự kiện kết thúc. Agent của bạn có thể giúp bạn soạn hướng dẫn và thiết lập tính năng này.
- Bạn cần: Display Screens, và các hướng dẫn đã được thống nhất với người chịu trách nhiệm về an toàn tại địa điểm của bạn.
Hãy chuẩn bị hướng dẫn dưới dạng hình ảnh hoặc On-Device Web App thay vì Agent: Published App, để hướng dẫn vẫn hiển thị nếu agent ngoại tuyến. Hãy thống nhất nội dung màn hình hiển thị, và những màn hình nào hiển thị, với người chịu trách nhiệm về an toàn tại địa điểm của bạn, và cùng họ kiểm tra.
Không đưa báo động im lặng lên màn hình công cộng. Báo động Duress là báo động im lặng, vì vậy không nên dùng để điều khiển các màn hình hướng ra công chúng. Chiếm quyền màn hình khi có báo động Duress chỉ hợp lý trên các màn hình ở khu vực riêng, không công khai, chẳng hạn văn phòng phía sau.
Tác nhân: Ứng dụng đã xuất bản
Agent: Published App là một ứng dụng web do AI Agent của bạn xây dựng, chạy trực tiếp trên thiết bị AI Agent của cơ sở. Vì chạy trên agent, ứng dụng có thể có phần máy chủ riêng và tự cập nhật. Màn hình hiển thị ứng dụng trực tiếp từ agent.
Xây dựng ứng dụng qua cuộc trò chuyện
Hãy yêu cầu AI Agent của bạn tạo màn hình bạn muốn, bao gồm vị trí đặt màn hình và những gì màn hình cần phản ứng. Agent xây dựng ứng dụng và mở ứng dụng bên cạnh cuộc trò chuyện để bạn kiểm tra. Ví dụ:
- "Hãy xây dựng bảng xếp hạng cho thử thách lượt đến tháng Mười của chúng tôi từ các lượt check-in, và cập nhật bảng vài phút một lần trong giờ mở cửa."
- "Hãy tạo bảng thực đơn cho quầy, chuyển từ bữa sáng sang bữa trưa lúc 11 giờ sáng và quảng bá các món chế biến nhanh khi đông khách."
- "Hãy tạo màn hình chào mừng tại sảnh, chào từng khách khi thẻ của họ mở cửa trước."
Màn hình bài tập trong khu tập của phòng tập
Một phòng tập yêu cầu agent tạo màn hình bài tập dọc cho khu tập. Màn hình hiển thị hai trạm, trạm này nằm trên trạm kia: bài kiểm tra chuẩn trên máy ski erg và bài gập bụng, mỗi trạm có mục tiêu và một đoạn video minh họa ngắn phát lặp lại. Ở giữa là một bộ hẹn giờ vòng cỡ lớn, với cường độ mục tiêu ở chính giữa.


Hình 11: Yêu cầu AI Agent của bạn tạo màn hình bài tập. Agent xây dựng ứng dụng và mở ứng dụng bên cạnh cuộc trò chuyện. Cuộc trò chuyện chỉ là ví dụ.


Hình 12: Kết quả trên màn hình dọc trong khu tập của phòng tập
Xuất bản ứng dụng từ AI Agent của bạn
Trong AI Agent → Published apps, chọn Publish to Performance Hub và điền:
| Cài đặt | Chức năng |
|---|---|
| Name | Tối đa 60 ký tự |
| Icon và Description | Cách ứng dụng được liệt kê. Mô tả có thể dài tối đa 300 ký tự. |
| Support email | Người cần liên hệ về ứng dụng |
| Health checks & auto-repair | Bật theo mặc định. Agent khởi động lại hoặc sửa chữa ứng dụng nếu ứng dụng ngừng hoạt động. |
| Allow on display screens | Tắt theo mặc định. Bật để cho phép ứng dụng được hiển thị trên màn hình. Cài đặt này cảnh báo: "Anyone near those screens can see it, so only allow apps without private information." |
| Audience | Ai có thể sử dụng ứng dụng: Only me (testing), Specific people, This facility (mặc định), Selected facilities, Whole brand hoặc Entire organisation. Phạm vi này không bao giờ được rộng hơn quyền truy cập của chính bạn, và đối tượng là thương hiệu hoặc tổ chức cần quyền truy cập cấp tổ chức. |
Từ cùng thẻ đó, bạn có thể Pause và Resume, Edit, Unpublish, Transfer ownership và Show on screens.
Hiển thị ứng dụng trên màn hình
- Trong Display Screens, mở Library và nhấp vào Add content → Agent: Published App.
- Chọn ứng dụng. Mỗi ứng dụng đủ điều kiện được liệt kê kèm hình ảnh của ứng dụng, và nhãn Ngoại tuyến nếu agent đang ngoại tuyến.
- Đặt Name cho ứng dụng, và tùy chọn Tags và Show for (seconds), sau đó nhấp vào Add to library.
- Xuất bản ứng dụng lên màn hình, hoặc thêm vào một danh sách phát.


Hình 13: Thêm Agent: Published App vào Library. Chọn ứng dụng, đặt tên và nhấp vào Add to library. Hình ảnh của các ứng dụng không thuộc ví dụ này đã được làm mờ.


Hình 14: Một Agent: Published App trong Library. Bản xem trước là hình ảnh của ứng dụng trực tiếp, do Performance Hub chụp. Where it is used liệt kê các màn hình và lịch phát đang hiển thị ứng dụng. Câu lạc bộ và các hội viên đều là hư cấu.
Các bản xem trước, chẳng hạn Preview landscape, Preview portrait và bản xem trước của danh sách phát, không thể hiển thị ứng dụng trực tiếp, vì vậy chúng hiển thị nội dung giữ chỗ "Shown live on the screen".
Yêu cầu
- Mô-đun AI Agent, để xuất bản ứng dụng.
- Mô-đun Custom Apps (AI Agent: Published Apps) tại cơ sở, để hiển thị ứng dụng trên màn hình.
- Ứng dụng phải đang hoạt động, đã bật Allow on display screens, và có đối tượng bao gồm cơ sở.
Khi nào màn hình bỏ qua ứng dụng agent
Màn hình chuyển sang mục tiếp theo khi một ứng dụng agent:
- bị tạm dừng hoặc bị hủy xuất bản,
- không được phép hiển thị trên màn hình,
- có đối tượng không bao gồm cơ sở,
- ở tại một cơ sở không có mô-đun Custom Apps, hoặc
- không thể kết nối được vì agent đang ngoại tuyến.
Nếu một ứng dụng bị hủy xuất bản vĩnh viễn, hãy gỡ ứng dụng khỏi các danh sách phát và lịch phát của bạn.
Ứng dụng web trên thiết bị
On-Device Web App là một gói tĩnh gồm HTML, CSS và JavaScript. Màn hình tải ứng dụng xuống và phát từ bộ nhớ của chính màn hình, vì vậy ứng dụng vẫn tiếp tục phát nếu mất kết nối internet. Loại ứng dụng này phù hợp với nội dung không cần phản ứng với địa điểm của bạn, ví dụ:
- Bất kỳ doanh nghiệp nào có quầy lễ tân: biển chào mừng tại quầy lễ tân với logo của bạn, ngày giờ và dải tin tức chạy chữ. Văn phòng, phòng khám, phòng tập, khách sạn, trường học và phòng trưng bày đều có thể sử dụng. Xem Ví dụ: biển chào mừng tại quầy lễ tân.
- Nhà hàng khách sạn: bảng thực đơn chuyển từ bữa sáng sang bữa trưa rồi bữa tối vào các giờ định sẵn.
- Bán lẻ: chương trình khuyến mãi trên cửa kính cửa hàng, luân chuyển qua các ưu đãi đặc biệt trong tuần này.
- Giáo dục: bảng thông báo trong khuôn viên trường với các sự kiện và lời nhắc hôm nay.


Hình 15: Reception Welcome Sign, một On-Device Web App, trên màn hình ngang. Đồng hồ, ngày và lời chào sử dụng múi giờ của cơ sở. Nhãn Preview chỉ xuất hiện trong bản xem trước, không xuất hiện trên màn hình thực tế. Acme Demo Co. là hư cấu, và các tiêu đề tin trong ảnh chụp màn hình này chỉ là ví dụ.


Hình 16: Cùng ứng dụng đó trên màn hình dọc
Ví dụ: biển chào mừng tại quầy lễ tân
Reception Welcome Sign chào đón mọi người tại quầy lễ tân của bạn với logo, ngày giờ và dải tin tức chạy chữ. Ứng dụng này phù hợp với bất kỳ doanh nghiệp nào có quầy lễ tân hoặc lối vào.
- Phát từ màn hình: logo, hình nền, phông chữ, đồng hồ, ngày và lời chào đều là một phần của ứng dụng, vì vậy vẫn hoạt động khi không có internet. Đồng hồ theo múi giờ của cơ sở.
- Một phần sử dụng internet: dải tin tức chạy chữ. Theo mặc định, dải này hiển thị các tiêu đề tin từ mục "In the news" của Wikipedia, có ghi nguồn trên màn hình. Thay vào đó, dải này có thể đọc bất kỳ nguồn cấp RSS nào cho phép yêu cầu liên trang, ví dụ một nguồn cấp tin tức thông qua máy chủ chuyển tiếp của riêng bạn.
- Xử lý khi ngoại tuyến: dải tin tức ẩn đi khi màn hình ngoại tuyến, hoặc khi không thể tải các tiêu đề tin, và xuất hiện trở lại khi màn hình trực tuyến lại. Mọi nội dung khác được phát từ bản sao của chính màn hình.
- Tùy chỉnh theo ý bạn: tải biển xuống từ phần Dành cho nhà phát triển bên dưới, thay
logo.svgvàbackground.jpg, và thay đổi văn bản chào mừng và cài đặt tin tức trongconfig.js, hoặc tắt dải tin tức. Sau đó tải lên: Library → Add content → On-Device Web App → Choose ZIP → Publish app.


Hình 17: Khi không thể tải các tiêu đề tin, hoặc màn hình ngoại tuyến, biển sẽ ẩn dải tin tức và tiếp tục hiển thị mọi nội dung khác. Dải tin tức xuất hiện trở lại khi các tiêu đề tin tải được.
Dành cho nhà phát triển: cách biển được xây dựng
Tải xuống Reception Welcome Sign (ZIP, 134 KB)
| Tệp | Chức năng |
|---|---|
index.html | Trang chính. Tải Display App SDK, config.js và app.js. |
config.js | Văn bản chào mừng, lời chào, múi giờ dự phòng và cài đặt tin tức |
app.js | Đồng hồ, ngày và lời chào theo múi giờ của cơ sở, và dải tin tức |
style.css | Bố cục cho màn hình ngang và dọc |
logo.svg, background.jpg, source-sans-3.woff2 | Logo, hình nền và phông chữ, được lưu trong ứng dụng |
README.txt, OFL.txt | Cách tùy chỉnh biển theo ý bạn, và giấy phép của phông chữ |
Ứng dụng đọc múi giờ và ngôn ngữ của cơ sở từ PHDisplay.onInit(ctx). Nếu không thể tải SDK, ví dụ khi màn hình khởi động ở trạng thái ngoại tuyến, ứng dụng sẽ dùng timeZone trong config.js hoặc múi giờ của chính màn hình.
Dải tin tức là phần duy nhất lấy dữ liệu trực tiếp. Display App SDK tùy chọn được tải từ máy chủ ứng dụng của Performance Hub. Khi màn hình ngoại tuyến, dải tin tức không gửi yêu cầu nào và vẫn ẩn, và sự kiện online của trình duyệt sẽ tải lại các tiêu đề tin:
function loadNews() {
clearTimeout(nextTimer);
if (navigator.onLine === false) {
hideTicker();
return; // the 'online' event loads it again
}
if (loading) return;
loading = true;
var load = news.source === 'rss' ? rssHeadlines : wikipediaHeadlines;
load()
.then(function (headlines) {
failures = 0;
showTicker(headlines.slice(0, news.maxHeadlines || 8));
schedule(news.refreshMinutes || 15);
})
.catch(function () {
hideTicker();
// ... schedules the next try
})
.then(function () { loading = false; });
}
window.addEventListener('offline', function () { clearTimeout(nextTimer); hideTicker(); });
window.addEventListener('online', function () { failures = 0; loadNews(); });
Để sử dụng một nguồn tin tức khác, hãy đặt source: 'rss' và rssUrl trong config.js thành một nguồn cấp cho phép yêu cầu liên trang (nguồn cấp gửi tiêu đề Access-Control-Allow-Origin), ví dụ một nguồn cấp tin tức thông qua máy chủ chuyển tiếp của riêng bạn. Hãy kiểm tra điều khoản của nguồn cấp có cho phép hiển thị trên màn hình của bạn hay không. Để tắt dải tin tức, đặt enabled: false trong news.
Có hai cách để thêm một ứng dụng:
- Yêu cầu AI agent xây dựng và xuất bản ứng dụng.
- Tự thêm: Library → Add content → On-Device Web App, sau đó tải lên một tệp ZIP, một thư mục hoặc các tệp. Xem Thêm nội dung.


Hình 18: Yêu cầu AI Agent của bạn tạo một màn hình. Agent xây dựng ứng dụng, mở ứng dụng bên cạnh cuộc trò chuyện để bạn kiểm tra, và thêm ứng dụng vào Library của Display Screens dưới dạng On-Device Web App, sẵn sàng để đưa lên màn hình. Cuộc trò chuyện chỉ là ví dụ.
Để xuất bản On-Device Web App, agent:
- Đọc hướng dẫn ứng dụng của Display Screens, để ứng dụng vừa với màn hình và tuân theo các quy tắc bên dưới.
- Xuất bản ứng dụng vào Library của bạn. Trong cùng bước đó, agent có thể xuất bản ứng dụng lên màn hình hoặc nhóm, lên lịch cho ứng dụng, hoặc chiếm quyền màn hình.
- Kiểm tra kết quả bằng ảnh chụp màn hình của ứng dụng đã hiển thị.
- Khôi phục về phiên bản trước nếu bạn yêu cầu.
Bất kỳ AI agent nào được kết nối qua MCP đều có thể thực hiện việc này nếu quyền truy cập của agent bao gồm khả năng Display Screens, kể cả AI Agent của bạn. Xem các công cụ MCP của Display Screens và Tạo khóa MCP. Agent của bạn sẽ yêu cầu bạn xác nhận trước khi thực hiện thao tác trên nhiều màn hình cùng lúc.


Hình 19: Lọc Library theo On-Device Web Apps để xem mọi ứng dụng tại cơ sở. Hình thu nhỏ của các ứng dụng không thuộc ví dụ này đã được làm mờ.
Đưa ứng dụng lên màn hình
Để tự đưa ứng dụng lên màn hình, hãy mở ứng dụng trong Library và nhấp vào Xuất bản. Trong Show on screens, chọn mọi màn hình tại cơ sở hoặc từng màn hình riêng lẻ, sau đó chọn When: Always (default), Scheduled hoặc Take over now. Xem Xuất bản nội dung.


Hình 20: Hiển thị Reception Welcome Sign trên màn hình Reception Lobby
Phiên bản
Mỗi lần xuất bản tạo ra một phiên bản mới không bao giờ thay đổi. Mở ứng dụng trong Library để xem Versions: phiên bản hiện tại được đánh dấu Live, và Make live trên bất kỳ phiên bản cũ hơn nào sẽ khôi phục về phiên bản đó. Trong Publish a new version, thả một tệp ZIP, một thư mục hoặc các tệp để tự tải lên một phiên bản mới.
Khi một phiên bản mới được xuất bản, Performance Hub hiển thị "New version published. Screens update within a few seconds." Sau khi nhấp Make live, Performance Hub xác nhận phiên bản nào đang chạy, ví dụ "Version 4 is now live". Thay đổi được áp dụng cho mọi màn hình đang hiển thị ứng dụng.


Hình 21: Reception Welcome Board trong Library: bản xem trước, Preview landscape và Preview portrait, và bốn phiên bản, với v4 đang chạy và Make live trên các phiên bản cũ hơn
Dùng Preview landscape và Preview portrait để mở ứng dụng ở kích thước màn hình và kiểm tra ứng dụng vừa khít trước khi xuất bản lên màn hình.
Cách ứng dụng chạy
- Ngoại tuyến: màn hình lưu giữ một bản sao của ứng dụng, vì vậy ứng dụng vẫn tiếp tục phát khi không có internet. Mọi nội dung ứng dụng tải từ internet sẽ không khả dụng khi màn hình ngoại tuyến.
- Dữ liệu trực tiếp: chỉ từ các API HTTPS công khai cho phép yêu cầu cross-origin.
- Cách ly: ứng dụng chạy trong môi trường sandbox, tách biệt với Performance Hub, không có quyền truy cập phiên Performance Hub của bạn.
Giới hạn
| Giới hạn | Giá trị |
|---|---|
| Tổng kích thước | 10 MB |
| Số lượng tệp | 200 |
| Kích thước một tệp | 5 MB |
| Độ dài đường dẫn tệp | 200 ký tự |
| Loại tệp | html, htm, css, js, mjs, json, svg, png, jpg, jpeg, webp, gif, woff, woff2, txt, map |
| Thời lượng hiển thị trong danh sách phát | 5 đến 3.600 giây |
Hướng dẫn thiết kế
- Lấp đầy màn hình mà không cần cuộn: 1920 × 1080 cho màn hình ngang, 1080 × 1920 cho màn hình dọc.
- Chữ lớn: văn bản nội dung tối thiểu 32 px, tiêu đề tối thiểu 64 px.
- Độ tương phản cao, để màn hình dễ đọc từ khắp căn phòng.
- Không có đăng nhập, biểu mẫu hay hiệu ứng di chuột. Không ai tương tác với màn hình.
- Nhẹ cho bộ xử lý, để ứng dụng chạy mượt mà trên player.
- Xử lý được khi ngoại tuyến, ví dụ khi không thể kết nối với một API công khai mà ứng dụng sử dụng.
- Sử dụng múi giờ của cơ sở cho đồng hồ và thời gian.
Các hướng dẫn này cũng phù hợp với Smart Displays.
Dành cho nhà phát triển: Display App SDK
Ứng dụng có thể tùy chọn sử dụng Display App SDK để biết thông tin về màn hình mà ứng dụng đang chạy và báo cáo trạng thái của ứng dụng.
| Lệnh gọi | Nội dung cung cấp |
|---|---|
PHDisplay.onInit(ctx) | Chạy khi ứng dụng khởi động. ctx bao gồm screen (id, name, orientation, width, height), facility (id, name, timezone), locale, brand (name, logoUrl, primaryColor), item (id, durationSec) và cho biết đây có phải là preview hay không |
onVisible, onHidden | Chạy khi ứng dụng được hiển thị hoặc ẩn trên màn hình |
ready(), done(), error() | Báo cáo trạng thái của ứng dụng cho màn hình |
durationSec là thời lượng hiển thị của mục, từ 5 đến 3.600 giây.
Trang liên quan
- Thêm nội dung: tự tải lên On-Device Web App
- Xuất bản nội dung: đưa ứng dụng lên màn hình
- Khả năng của AI Agent: những việc khác mà agent của bạn có thể làm
- Tác vụ tự động của AI Agent: giữ Smart Display luôn cập nhật theo lịch
- Door & Gate Access và AI Insights & People: lượt đến, sự kiện cửa và số đếm từ camera mà Smart Display có thể phản ứng
- Khắc phục sự cố: ứng dụng không hiển thị trên màn hình