Heisenware Docs
Go to websiteGet a demo
  • 👋Welcome
  • Getting started
  • Release Notes
    • v84 - Get in the flow
    • v83 - Beauty treatment
    • v82 — Fully distributed
    • v81 — Removing old cruft
    • v80 — Chicks on fire
    • v79 — Nothing is forever
    • v78 — Keep moving
    • v77 — More intelligence
    • v76 — Well cooked
  • Build & Deploy Apps
    • Overview
    • Flow Builder
      • Nodes (Functions)
        • Inputs
        • Trigger
        • Output
      • Flows
      • Function Extensions
        • Modifier
        • Filter
        • Error handler
        • Memorizer
      • Objects & Instances
      • Utilities
        • Basic Functions
        • PDF functions
        • Circular buffer
        • Timer
        • Counter
    • Integrations
      • Protocol Connectors
        • GraphQL
        • HTTP/REST
        • MQTT
        • OPC UA
          • Heidenhain PLCs with OPC UA
        • RS-232/485
        • Siemens S7
      • Data Connectors
        • File
        • Relational Database
        • Time Series Database (WIP)
      • API Connectors
        • OGC SensorThings API
        • Operating System
        • Zebra RFID IoT Connector
      • Agent / (Edge Connector)
      • Calling Custom Code
    • UI Builder
      • Input Widgets
        • Form
        • File Upload
        • Photo
        • Signature
        • Barcode / QR-Code (WIP)
        • Document Scan (WIP)
      • Display Widgets
        • Chart
        • Chat
        • Circular Gauge
        • Data Grid
        • Linear Gauge
        • Map
        • Media View
        • Progress Bar
        • Sparkline
        • Status Lamp
        • Toast
        • Value Box
        • Kanban Board
        • Data Tiles
        • Pie Chart
        • Sankey
      • Buttons
      • Text Box
      • Images
      • Icons
    • Communication Interfaces
      • Email Notifications
      • OPC UA Server
    • Data & File Storage
      • Internal InfluxDB
      • Internal PostgreSQL
      • File Server
    • App Appearance
      • Pages
      • In-App Navigation
      • Screens & Devices
      • Theming
    • Simulation & Testing
      • Simulating Events
      • Simulating Data
    • PDF Templates
    • RAG-based Chatbot
    • Deployment
  • Manage Apps
    • Overview
    • Manage Apps
      • General Settings
      • Users and Access
      • Distribution & Versioning
    • Manage Integrations
    • Manage Account
      • Account Structure
      • Members
      • Workspaces
  • TUTORIALS
    • Build Your First Heisenware App
  • Connect Heidenhain CNC with OPC UA Support
  • Related links
    • Website
    • Privacy policy
    • Imprint
Powered by GitBook
On this page
  • Device preview
  • Customization
  • Zoom
  • Screen height
  1. Build & Deploy Apps
  2. App Appearance

Screens & Devices

Last updated 6 months ago

When using the App Builder to generate PWAs (Progressive Web Apps), the resulting apps are inherently responsive. They seamlessly operate across all devices, spanning smartphones, tablets, desktop PCs, and laptops, dynamically adapting their UI to each device's screen size.

Device preview

While the smartphone screen serves as the default view, the App Builder empowers you to create UIs tailored for all screen sizes. To toggle between device previews, utilize the device icons located in the top bar. The rotation icon facilitates the preview and construction of UIs for rotated smartphone and tablet screens.

Start by designing for mobile devices and have changes automatically applied to larger screens. Adjust the UI for other devices by editing them individually.

Customization

The UI for each device, including rotated versions, is fully customizable. Widget positions and sizes can be tailored individually for each screen. Configuring each device is optional, so you have the flexibility to design exclusively for the smartphone. In such cases, widgets automatically center on other screens. Nonetheless, we recommend a brief check of previews for other devices to rectify any potential UI errors.

Some laptops, particularly those with 13-inch screens or smaller, may display apps in rotated tablet mode.

Zoom

When creating UIs with the UI editor, you can zoom in and out using the zoom bar in the top bar.

Screen height

Increasing the screen height allows a page to hold more content and enables scrolling. You can customize the height independently for each device and every page within your app. Refer to the section to understand how to configure the height according to your specific preferences.

pages
Device and rotation icons