savings
Piggy
Demo UI kit · Mizsoft
savingsPiggy

Bộ giao diện ứng dụng đếm heo bằng AI & vận hành trại

Material 3 · Flutter · iOS & Android · chế độ sáng & tối · tối ưu dùng ngoài trời, một tay, đeo găng

Seed #2F5D3ATương phản caoVùng chạm 48dp
5màn hình cốt lõi
2chế độ sáng / tối
20+thành phần & trạng thái
M3Material 3 · Flutter
01TOKENS

Bảng màu Material 3

Toàn bộ palette phái sinh từ màu hạt giống #2F5D3A — đầy đủ token ngữ nghĩa cho cả chế độ sáng lẫn tối, đảm bảo tương phản cao khi dùng ngoài nắng.

light_modeChế độ sáng
Primary
#2F5D3A
Prim. Container
#DFEBD8
Surface
#F3EAD9
Surf. Container
#ECE1CF
Error
#B3261E
Warning
#9C5A16
Info
#3E7CA0
On Surface
#3A2E22
dark_modeChế độ tối
Primary
#E7A97E
Prim. Container
#4A2E1C
Surface
#201811
Surf. Container
#241B14
Error
#FFB4A6
Warning
#FFC078
Info
#9CC6E0
On Surface
#EFE3D3
02FOUNDATIONS

Kiểu chữ & giãn cách

Space Grotesk cho số liệu lớn & tiêu đề, Manrope cho toàn bộ giao diện, Roboto Mono cho nhãn kỹ thuật. Thang giãn cách 4dp giữ nhịp điệu nhất quán trên mọi màn hình.

4.820Space Grotesk 700 · số đếm 40–64
Tổng quanSpace Grotesk 700 · tiêu đề 20–22
Nhãn thẻ & nội dungManrope 600 · title/card 14–16
Overline · LabelManrope 500 · 11–12
Thang giãn cách · cơ số 4dp
4
xs · khoảng cách icon
8
sm · dòng danh sách
12
md · lề trong thẻ
16
lg · lề màn hình
24
xl · khoảng cách khối
32
2xl · khối hero

Bo góc: thẻ 22 · ô nhập 14 · chip 10 · pill/FAB 18–26. Vùng chạm tối thiểu 48×48dp — thao tác chắc chắn dù đeo găng tay.

03SCREENS

Năm màn hình chính

Mỗi màn hình đều có bản sáng và tối — dùng nút Chế độ tối ở thanh trên để xem toàn bộ hệ thống đổi chủ đề tức thì. Số liệu lớn, tương phản cao, vùng chạm rộng cho thao tác một tay ngoài trời.

01loginĐăng nhập

Đăng nhập nhanh bằng email & mật khẩu, có trạng thái lỗi rõ ràng để tránh thao tác lại nhiều lần ngoài đồng.

8:24network_cellwifibattery_full
savings
Piggy
Quản lý trại heo thông minh
Email
mailquanly@daihoa.vn
Mật khẩu
lock••••••••visibility_off
errorEmail hoặc mật khẩu không đúng
02dashboardTổng quan

Tổng đàn heo, cảnh báo mới nhất và tình trạng từng dãy chuồng — tất cả trong một màn hình, đọc được trong một cái liếc mắt.

8:24network_cellwifibattery_full
Tổng quan
Trại Đông Hòa
HL
TỔNG ĐÀN HEOtrending_up
4.820
arrow_upward32 hôm nay98% chính xác
sick
Nghi bệnh · Ô C-02
2 phút trước
warning
Nghi cắn đuôi · Ô B-07
5 phút trước
Dãy A
8 ô · bình thường
1.240
Dãy B
10 ô · 1 cảnh báo
1.586
Dãy C
12 ô · bình thường
1.994
03checklistVận hành

Danh sách việc trong ngày theo dãy chuồng: cho ăn, kiểm tra sức khỏe, vệ sinh — lọc nhanh theo nhóm công việc.

8:24network_cellwifibattery_full
Vận hành
Thứ 6, 19/07 · 5 việc
Tất cảCho ănSức khỏeAn toàn
restaurant
Cho ăn sáng
Dãy A, B, C · 06:00
Xong
vaccines
Kiểm tra sức khỏe
Ô B-07 · nghi cắn đuôi
Đang làm
sanitizer
Vệ sinh sát trùng
Cổng trại · 14:00
Chưa
monitor_weight
Cân trọng lượng
Dãy C · 15:30
Chưa
04grid_viewChi tiết ô chuồng

Số đếm AI trực tiếp, camera theo yêu cầu, biểu đồ lịch sử 7 ngày và cảnh báo lệch số — mọi thứ về một ô chuồng.

8:24network_cellwifibattery_full
arrow_back
Ô A-03
Dãy A · heo thịt
more_vert
ĐANG ĐẾM TRỰC TIẾP
142
Sức chứa 150 · độ tin cậy 98%
TRỰC TIẾP
play_arrow
Camera A-03 · 1080p
Lịch sử đếm7 ngày
trending_down
Số đếm giảm 3 con
Hôm qua · 18:40
05settingsCài đặt

Chuyển chủ đề sáng/tối/tự động, quản lý thông báo, máy chủ & ngôn ngữ — cấu hình gọn trong một danh sách.

8:24network_cellwifibattery_full
Cài đặt
HL
Hoàng Lâm
quanly@daihoa.vn
Quản lý trại
contrastChủ đề
SángTốiTự động
notificationsThông báo đẩy
dnsMáy chủSản xuấtchevron_right
translateNgôn ngữTiếng Việtchevron_right
Piggy v2.4.1 · build 2026.07
04LIVE STREAM

Camera & luồng theo yêu cầu

Luồng theo yêu cầu (không phải CCTV luôn bật): chạm để bật, chờ khởi động, HLS trễ vài giây, tự dừng khi rảnh để tiết kiệm băng thông. Số đếm AI là lớp dữ liệu riêng — một con số, không vẽ khung lên video — có chỉ báo độ mới và so sánh với sổ sách. Camera mắt cá 360p, mỗi ô có thể gắn 2 camera.

8:24network_cellwifibattery_full
arrow_back
Ô A-03
Dãy A
TRỰC TIẾP · trễ ~vài giây
AI đếm
42
360p · fisheye · Cam 1
pause photo_camera
AI đếm hiện tại
42
sync2 phút
42AI
compare_arrows
45Sổ sách
chênh −3
Cam 1Cam 2Xem cả 2
play_circle

Bật khi cần

Chạm để yêu cầu luồng; tự dừng khi rảnh để tiết kiệm băng thông thay vì giữ camera bật liên tục như CCTV truyền thống.

tag

Số đếm là dữ liệu, không phải khung

Hiển thị một con số kèm độ mới của dữ liệu, không vẽ bounding box đè lên video — giữ hình ảnh sạch, dễ nhìn ngoài nắng.

balance

Đối chiếu sổ sách

So sánh số đếm AI với số ghi sổ tay, nêu rõ phần chênh lệch và cảnh báo khi dữ liệu đã cũ.

Đang khởi động…

Yêu cầu camera bật luồng

videocam_off

Camera offline

Không tín hiệu · 2 giờ

wifi_off

Mất kết nối

refreshThử lại
visibility

Vẫn đang xem?

Luồng sẽ tạm dừng để tiết kiệm băng thông

Tiếp tục xem
Cũng có: BufferingHạ băng thông 360p → 180pStream đã tạm dừng · Xem lạiĐã lưu ảnh chụp
05LIBRARY

Thư viện thành phần

Các khối UI dùng chung xuyên suốt ứng dụng: thẻ số đếm, mục cảnh báo theo mức độ, thẻ ô chuồng, thanh điều hướng, chip trạng thái, cùng các trạng thái tải / rỗng / lỗi.

Thẻ số đếm
TỔNG ĐÀN HEOtrending_up
4.820
arrow_upward32 hôm nay98% chính xác
Thẻ ô chuồng
Ô A-01 148 / 150 · bình thường
Ô B-07 96 / 100 · cần kiểm tra
Thanh điều hướng
Mục cảnh báo · theo mức độ
sick
Nghi bệnh · Ô C-02
2 phút trước
warning
Nghi cắn đuôi · Ô B-07
5 phút trước
trending_down
Số đếm giảm 6 · Ô A-01
12 phút trước
Chip trạng thái
Hoàn thành Đang làm Chưa làm
Trạng thái tải (skeleton)
Trạng thái rỗng
notifications_off
Không có cảnh báo

Đàn heo đang ổn định. Tuyệt vời!

Trạng thái lỗi
cloud_off
Không thể tải dữ liệu

Kiểm tra kết nối mạng của bạn