DOCSEARCHbyAlgolia
Submit Docs

Omni Widgets Documentation

website·Indexed 31 days ago

https://omni.2f0.cn

A tool app for creating DIY widgets for iOS and HarmonyOS. Documentation covers widget components (Text, Grid, Stack, Gauge, etc.), JS API modules for network requests, file management, device information, and location, as well as the use of placeholders to bridge JS data into components.

Tokens
79.5K
Snippets
435
Records
593
Agent score
46%

What's inside Omni Widgets

  1. Overview of the Canvas component

    The Canvas component generates graphics based on a set of drawing instructions. It is ideal for creating progress rings, line charts, bar charts, badges, dashboards, and outlined text. It does not execute arbitrary code, ensuring the same instructions work for both editor previews and desktop cards. Note that it does not support direct image drawing in the current version.

  2. Overview of AWidget Markup (AWML)

    AWidget Markup (AWML) uses XML-style native component tags to describe widget layouts. Layout source is stored separately from the JavaScript that supplies variables. AWML supports Home Screen, Lock Screen, control widgets, and Live Activities. Tags compile to native layouts, and visual changes in the editor synchronize with the source code.

  3. Overview of the Canvas component

    The Canvas component generates graphics based on a set of drawing instructions. It is ideal for creating progress rings, line charts, bar charts, badges, dashboards, and outlined text. It does not execute arbitrary code, ensuring that the same set of instructions works consistently across the editor preview and desktop cards.

  4. Overview of Omni Widgets for HarmonyOS

    Omni Widgets for HarmonyOS allows users to DIY custom home screen and lock screen cards. It provides a visual editor for simple layouts and a built-in JavaScript runtime for complex logic such as fetching API data, reading local files, and conditional styling.

  5. Overview of Omni Widgets capabilities

    Omni Widgets allows users to create custom iOS widgets without code via a visual editor, or with complex logic using a built-in JavaScript runtime. It supports 9 widget types: home screen (small, medium, large), lock screen (circular, rectangular, inline), Control Center (button, toggle), and Live Activities (Dynamic Island). Key features include a visual editor for components (text, images, SF Symbols, buttons, shapes, containers), JavaScript APIs for network requests, weather, location, health, calendar, and files, and deep system integration via iCloud sync, URL Schemes, and Shortcuts.

  6. Overview of Omni Widgets capabilities

    Omni Widgets is a tool for creating custom iOS widgets. It provides a visual editor for non-coders and a full JavaScript runtime for developers to create complex, interactive widgets that can fetch network data. Key features include:

    • Support for 9 widget types: Home Screen (Small, Medium, Large), Lock Screen (Circular, Rectangular, Inline), Control Center (Buttons, Switches), and Live Activities (Dynamic Island).
    • Visual Editor: Drag-and-drop support for text, images, SF Symbols, buttons, shapes, and containers.
    • JavaScript Integration: APIs for network requests, weather, location, health, calendar, and file access, as well as control over widget refreshes and Live Activities.
    • Data Binding: Uses a placeholder syntax ${variable} to bind JavaScript data to widget components.
    • System Integration: Supports iCloud sync, URL Schemes, and Apple Shortcuts.

  7. Overview of Omni Widgets for HarmonyOS

    Omni Widgets for HarmonyOS allows users to create custom DIY home screen and lock screen widgets. It provides a visual editor for simple layouts and a built-in JavaScript runtime for complex logic such as fetching API data, reading local files, and conditional styling.

  8. Overview of AWidget Markup (AWML)

    AWidget Markup (AWML) uses XML-style tags to describe widget layouts. It is used for desktop, lock screen, control widgets, and Live Activities. Layout source code is stored independently, while JavaScript continues to provide the data variables. Tags are compiled into native layouts. Note: This feature may be temporarily disabled in some versions, but existing widgets continue to use their saved native layouts.

  9. Understand FileManager path conventions and sandboxing

    The FileManager operates within a sandbox directory specific to each card, with the root path defined as widgets/{id}/files/. All paths provided to the API are relative to this root.

    Path Security: To prevent unauthorized access to other cards or system files, the following are forbidden and will be rejected:

    • Absolute paths (starting with /)
    • Home directory shortcuts (starting with ~)
    • Parent directory traversal (..)
    • Empty segments (e.g., a//b)
    • Backslashes

    Path Formats: The API accepts both simple filenames (e.g., "foo.png") and paths with the files/ prefix (e.g., "files/foo.png"). Internally, the prefix is stripped. However, the write method always returns the canonical form: "files/<name>".

  10. Understand supported iOS widget locations in Omni

    Omni supports widgets across four primary iOS locations, each with different size options and capabilities (e.g., lock screen widgets do not support full color).
    CategoryTypeLocation
    Home ScreenSmall / Medium / LargeHome Screen
    Lock ScreenCircular / Rectangular / InlineLock Screen
    Control CenterButton / SwitchPull-down Control Center
    Dynamic IslandLive ActivityTop capsule area

  11. Understand FileManager path conventions and sandboxing

    The FileManager operates within a per-card sandbox directory with the root path widgets/{id}/files/. All paths provided to the API are relative to this root.

    Path Handling:

    • The API accepts both simple filenames (e.g., "foo.png") and paths with the files/ prefix (e.g., "files/foo.png"). The prefix is stripped internally.
    • FileManager.write returns the canonical path in the format "files/<name>". This canonical path must be used for the src field of Image components to render correctly.

    Security Constraints: To prevent access to other cards or system files, the following are forbidden and will be rejected:

    • Absolute paths (starting with /)
    • Home directory shortcuts (starting with ~)
    • Parent directory traversal (..)
    • Empty segments (e.g., a//b)
    • Backslashes

  12. Implement graphics using the Canvas component

    The Canvas component renders graphics based on a list of JSON commands. It is suitable for progress rings, line/bar charts, badges, and dashboards. It does not execute arbitrary code, ensuring consistent rendering across the editor preview, home screen widgets, and Live Activities.