Biểu Tượng

Tất cả biểu tượng có thể được sử dụng ở nhiều nơi trên hình ảnh trực quan. Vì vậy, có thể định nghĩa chúng như một biến hoặc văn bản.

Để hiển thị một biểu tượng trên hình ảnh trực quan, nó được khai báo trực tiếp trong văn bản bằng thẻ [icon:SYMBOLPFAD]. Đường dẫn biểu tượng có thể được sao chép từ thư viện biểu tượng bằng cách nhấp chuột phải hoặc bằng CTRL+C. Nếu có thể, chỉ nên chọn Material Symbols để phong cách của hình ảnh trực quan vẫn giữ nguyên.

Thư Viện Biểu Tượng

Tất cả các biểu tượng có sẵn có thể được gọi và tìm kiếm dưới menu ngữ cảnh Hình Ảnh Trực Quan ▸ Biểu Tượng. Cũng có thể nhập một bộ biểu tượng riêng vào thư viện. Quy trình sẽ được giải thích chi tiết bên dưới.

Lưu Ý: Tên hiển thị trên danh sách biểu tượng không giống với đường dẫn biểu tượng. Nếu không chỉ định bộ biểu tượng trong đường dẫn, bộ Glyphicons sẽ được sử dụng tự động.

Bộ lọc trong thư viện biểu tượng cũng tìm kiếm theo các thẻ đã lưu trữ. Nếu không muốn có hành vi này, có thể bắt đầu bộ lọc bằng một dấu = để chỉ tìm kiếm trong tên.

Bộ Biểu Tượng Material Symbols (Mặc Định)

Bộ biểu tượng này hoàn toàn động và phong cách của biểu tượng được cấu hình tự động theo thiết kế của hình ảnh trực quan. Ngoài ra, một biểu tượng được điền sẽ được sử dụng tự động nếu biểu tượng cần phải hoạt động. Tuy nhiên, không tất cả các biểu tượng đều có phiên bản được điền.

Các biểu tượng sẽ được làm tròn tự động khi bán kính nút bấm lớn hơn hoặc bằng 16 Pixel. Nếu bán kính bằng 0px, các biểu tượng sắc nhọn sẽ được sử dụng. Trong trình soạn thảo, luôn sử dụng các biểu tượng bình thường.

Lưu Ý: Được khuyến nghị sử dụng bộ "Material Symbols" để thiết kế hình ảnh trực quan một cách thống nhất.

Bộ Biểu Tượng Material Animated

Có một số biểu tượng được chọn từ Material Symbols đã được hoạt hóa để thể hiện giá trị. Các biểu tượng này chỉ có một hoạt ảnh với biểu tượng của cấu trúc. Khi chọn, các biến khác sẽ được kích hoạt.

Bộ Biểu Tượng Philips Hue

Các biểu tượng của Philips Hue có thể được sử dụng tự do nếu giao diện Hue được sử dụng. Ngoài ra, còn có một bộ biểu tượng Hue bổ sung của cộng đồng Home Assistant HASS. Thông tin chi tiết hơn sẽ được tìm thấy ở cuối chương này.

Bộ Biểu Tượng Thiên Tai

Bộ biểu tượng này hiển thị các biểu tượng thời tiết trên hình ảnh trực quan. Chúng được hỗ trợ một cách liên tục bởi nhiều giao diện khác nhau. Xem chương dưới đây Thiên Tai-Icons.

Bộ Biểu Tượng Legacy (Cũ)

Bộ biểu tượng Legacy bao gồm tất cả các biểu tượng của hình ảnh trực quan cũ. Phong cách hiển thị của giao diện mới vẫn giữ nguyên. Các biểu tượng này không nên được sử dụng nữa vì chúng chưa được tối ưu hóa cho giao diện mới.

Một số biểu tượng cũ vẫn hoạt động:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Biểu Tượng Ẩn

Cũng có các biểu tượng ẩn cho hình ảnh trực quan. Chúng sẽ được giải thích chi tiết hơn trong các chương dưới đây.

Để gọi các biểu tượng, chỉ cần một tiền tố URL.

Bộ Biểu Tượng Riêng

Có thể nhập một bộ biểu tượng riêng vào dự án. Mỗi bộ biểu tượng phải được chuẩn bị dưới dạng tệp ZIP. Một số dữ liệu mẫu có thể được tải xuống tại đây:

Mẹo Nâng Cao: Sau khi nhập thành công, có thể xuất bộ biểu tượng dưới dạng .antobj để đơn giản hóa quá trình nhập. Để làm điều đó, nhấp chuột phải vào một bộ biểu tượng và chọn Xuất.

Các quy tắc sau định nghĩa cấu trúc và yêu cầu của một bộ biểu tượng. Vui lòng đọc kỹ chúng và tuân theo chúng chính xác.

Quy Tắc

  • Tiền tố
    • Chỉ được chứa _, a–z và 0–9.
    • Chữ hoa sẽ được chuyển thành chữ thường tự động.
    • Các tên dự trữ như sys, src hoặc doc không hợp lệ.
    • Phải bắt đầu bằng một chữ cái (a–z). Chỉ số là không được phép.
    • Dấu gạch dưới ở cuối (_) sẽ bị loại bỏ.
    • Phải có ít nhất 3 ký tự.
    • Dấu gạch dưới kép (__) sẽ được giảm xuống còn một.
  • Tên Biểu Tượng
    • Sẽ được chuyển thành chữ thường tự động.
    • Các ký tự được phép là -, _, a–z và 0–9.
    • Tránh các tên dài và tiền tố.
    • Một tiền tố phải là duy nhất và chỉ được sử dụng một lần.
    • Nếu một biểu tượng có cùng tên và tiền tố với một biểu tượng hệ thống, nó có thể thay thế nó.
  • Giới Hạn Tệp
    • Kích thước tệp tối đa sau khi sạch: 10 kB. Các tệp lớn hơn sẽ bị từ chối.
    • Các tệp SVG phải được làm sạch:
      • Xóa dòng tự động.
      • Các phần tử sau sẽ bị xóa: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Các thuộc tính sau sẽ bị xóa: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Các biểu tượng với script, hình ảnh, CSS hoặc tài nguyên bên ngoài được nhúng sẽ bị từ chối.
      • Nếu Styles chứa màu sắc hoặc khối Style, nhập liệu cũng có thể bị từ chối.
  • Yêu Cầu Header SVG
    • Phải chứa: viewBox, width và height. Các giá trị thiếu sẽ được bổ sung tự động nếu có thể.
    • Phải chứa không gian tên: xmlns="http://www.w3.org/2000/svg". Nếu nó thiếu hoặc sai, nó sẽ được bổ sung tự động.
    • Tên biểu tượng phải khớp chính xác với kích thước, nếu không biểu tượng sẽ bị từ chối.
    • Kích thước phải là hình vuông (Chiều rộng = Chiều cao). Mặc định: 24px.
    • Tránh các phong cách mâu thuẫn hoặc kích thước không phù hợp.
  • Chung
    • Các biểu tượng được tạo ra không tốt có thể làm chậm quá trình hiển thị mạnh mẽ hoặc ngay cả lỗi.
    • Hãy chú ý đến bản quyền của các biểu tượng.
    • Tất cả các vector sẽ được làm tròn đến ba chữ số thập phân.

Cấu Trúc

  • Tệp iconset.ini là bắt buộc để nhận diện bộ biểu tượng.
    • Nó có thể nằm trong thư mục gốc của tệp ZIP hoặc trong một thư mục con.
    • Phải được viết bằng chữ thường (iconset.ini).
    • Tên tệp biểu tượng không phân biệt hoa thường.
  • Quá trình nhập liệu không tự động tìm kiếm các tệp SVG.
    • Thư mục biểu tượng phải được định nghĩa rõ ràng trong iconset.ini (phân biệt chữ hoa và thường).
    • Trong mẫu tệp ZIP đã được định nghĩa một thư mục có tên là icons/.
  • Thư Mục Con
    • Các thư mục con trong thư mục được định nghĩa (icons/) được sử dụng như các danh mục.
    • Tên biểu tượng phải duy nhất trên tất cả các danh mục.
    • Quy tắc đặt tên trong thư mục biểu tượng:
      • Ít nhất: Chỉ kích thước và phần mở rộng tệp (ví dụ: 24.svg).
      • Các biến thể như filled24.svg hoặc round_filled_24.svg là hợp lệ.
      • Tên tệp với nhiều số (ví dụ: 24_48.svg) không hợp lệ.
      • Các biến thể phong cách được nhận diện bởi:
        • Được điền: Phải chứa filled hoặc fill.
        • Tròn: Phải chứa round.
        • Góc: Phải chứa sharp.
        • Tròn và góc không thể kết hợp với nhau.
      • Nếu nhiều quy tắc áp dụng, tệp được nhận diện cuối cùng sẽ được sử dụng (lựa chọn có thể ngẫu nhiên).
  • Quy Tắc Khác
    • Không tìm kiếm các thư mục con lồng nhau (chúng có thể được sử dụng cho sao lưu hoặc bản gốc).
    • Các tệp không có .svg sẽ bị bỏ qua.
    • Trong một thư mục biểu tượng, có thể có một tệp tên là tags.txt để thêm các thẻ tìm kiếm.
      • Các thẻ có thể được phân tách bằng ,, ; hoặc Xóa Dòng.

Bộ Biểu Tượng Đặc Biệt

Cũng có nhiều bộ biểu tượng đặc biệt khác có thể được nhập liệu như các bộ biểu tượng riêng, nhưng không cần phải tuân theo các quy định trên.

Hass Hue Icons

Một trong số đó là từ trang Gibhub hass-hue-icons. Đây là một bộ biểu tượng Hue bổ sung của cộng đồng Home Assistant HASS và chỉ được phép sử dụng cho các dự án không thương mại vì nó nằm dưới giấy phép Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. Vì vậy, bộ biểu tượng này không được cung cấp cùng với Antcas Control. Tuy nhiên, các biểu tượng có thể được nhập liệu vào dự án bất kỳ lúc nào bằng tệp ZIP hass-hue-icons-main.zip như một bộ biểu tượng mới. Hãy lưu ý điều kiện giấy phép của dự án trên trang web Github.

Nguồn: https://github.com/arallsopp/hass-hue-icons.

Material Design Icons của Pictogrammers

Một bộ khác là từ Pictogrammers. Để làm điều đó, tệp mdi-###.json phải được nén vào một tệp ZIP và nhập liệu. Tệp có thể được tìm thấy và tải xuống trong console phát triển của trình duyệt. Được cố gắng kết hợp các biểu tượng outline với các biểu tượng điền đầy. Thư viện gần giống với Material Symbols. Tuy nhiên, có nhiều mở rộng cộng đồng. Nếu muốn tích hợp các bộ biểu tượng khác vào thư viện, hãy liên hệ với chúng tôi.

Nguồn: https://pictogrammers.com/library/mdi/

Trang con