LogoLogo
GitHubBlynk WebsiteLogin to Blynk.Console
  • Introduction
  • Getting Started
    • Supported Hardware
    • Quickstart
      • Next Steps After Quickstart
      • Quickstart Device: Code Overview
      • Troubleshooting
    • Device Activation Methods
      • Manual Device Activation
      • WiFi provisioning
      • Static Token
    • Template Quick Setup
      • Set Up Datastreams
      • Set Up Web Dashboard
      • Set Up Mobile App Dashboard
      • Prepare Your Code
      • Test your Template
    • Send Data From Hardware To Blynk
    • Control Devices (GPIOs and beyond)
    • Events
    • Notifications (Alerts)
    • Sign Up / Sign In
  • General Concepts
    • Developer Mode
    • Device
    • Device Template
    • Connection Lifecycle
      • Disconnections And Heartbeat
    • Users
      • Multi-tenancy
    • Organizations
    • Automations
      • Forward Device Data
  • Message Usage
  • Integration Guides
    • Node-RED
    • The Things Stack
      • Getting Started
      • Device Grouping
      • Automated Device Onboarding
      • System DataStreams
    • Blues
    • NCD Industrial Vibration Sensor
    • Particle - monitor with Blynk
    • Particle - control with Blynk
    • AWS IoT Core
  • OpenWeather
  • Blynk.Console
    • Overview
    • Dashboards
    • Devices
      • Device profile
        • Dashboard
        • Device Info & Metadata
        • Notifications & Events
        • Developer tools
          • General
          • Datastreams
          • Testing
          • Actions Log
      • Actions with devices
      • Segments
      • Filters
      • Notifications Settings
      • Device Sharing
    • Locations
      • Location Profile
      • Assigning Devices to the Locations
    • Organizations
      • Create a Sub-Organization
      • Working with Sub-Organizations
    • Users
      • User Profile
    • Device Templates
      • Working With Templates
      • Info
        • Offline Ignore Period
        • Manufacturer
        • Template ID
        • Categories
        • Hotspot Prefix
      • Datastreams
        • Datastream Settings
          • Name
          • Alias
          • Virtual Pin
          • Color
          • Data Type
          • Min Value
          • Max Value
          • Default Value
          • Save RAW Data
          • Invalidate Value
          • Wait for confirmation from device
          • Sync with latest server value every time device connects to the cloud
          • Expose to Voice Assistants
        • Virtual Pin
        • Location
        • Enumerable
      • Web Dashboard
        • Multiple Dashboard Tabs
      • Metadata
        • Metadata Tutorial
      • Connection Lifecycle
      • Events
        • Custom Events
          • Event Settings
          • How to Send/Log Events
          • Content Events
        • Notifications Settings
          • Custom Sounds and Critical Notifications
      • User Guides
      • Assets
    • Widgets (Console)
      • Switch
      • Slider
      • Number Input
      • Image Button
      • Web Page Image Button
      • LED
      • Label
      • Gauge
      • Chart
      • Map
      • Image Gallery
      • Custom Chart
      • Heatmap Chart
      • Video
      • Terminal
      • Segmented Switch
      • Alarm & Sound Widget
      • Modules
    • Blynk.Air
      • Shipment Details
      • Shipment Management
        • New Shipping
      • Device shipment statuses
      • User-Controlled Shipments
    • Settings
      • Organization Settings
        • General
        • Users
        • Locations (Job Site or Facilities)
        • Tags
      • Roles and Permissions
      • Developers
        • OAuth2
        • Webhooks
        • Create New Webhook
      • Integrations
    • User Profile Menu
    • Limits
  • Blynk.Apps
    • Overview
    • Mobile Dashboard Editor
    • Device Header Constructor
      • Header Design
      • Header Mini Widgets
        • Connection Status Widget
        • Last Reported Widget
        • Tabs Widget
        • Datastream Value Widget
        • Image Widget
        • Battery Level Widget
        • Signal Level Widget
        • Tags Widget
      • Header Buttons
    • Pages
    • Widgets (app)
      • Common Widget Settings
      • List of Datastreams types supported by Widgets
    • Widgets Controllers
      • Button
      • Styled Button
      • Icon Button
      • Image Button
      • Slider
      • Vertical Slider
      • Step Slider
      • Vertical Step Slider
      • Joystick
      • zeRGBa
      • RGB Light Control
      • Step H
      • Step V
      • Slope Control
      • Switch
      • Level Slider
      • Level Slider with Switch
    • Widgets Displays
      • Value Display
      • Labeled Value
      • LED
      • Gauge
      • Radial Gauge
      • Enhanced Gauge
      • LCD
      • Simple Chart
      • SuperChart
      • Terminal
      • Video Stream
      • Level H
      • Level V
      • Image Gallery
      • Gradient Ramp
      • Icon
      • Image Animation
      • Lottie Animation
    • Widgets Interface
      • Tabs
      • Menu
      • Map
      • Text Input
      • Numeric Input
      • Time input
      • Segmented Switch
      • Icon Segmented Switch
      • Text
      • Formatted Text
      • Dynamic Spacer
    • Widgets Other
      • Music Player
      • WebPage Button
      • WebPage Image Button
      • Alias Name
    • Main Menu
      • My Profile
      • Organization
      • Settings
      • Help
      • About
      • Log Out
    • Devices
      • Add New Device
    • Automations
    • Notifications & Events
  • Blynk.Edgent
    • Blynk.Edgent overview
    • Blynk.Inject and Blynk.Air
    • OTA: Firmware Over-The-Air updates
  • Blynk.NCP
    • Blynk.NCP overview
    • Supported Connectivity Modules
    • OTA: Firmware Over-The-Air updates
  • Blynk Library - firmware API
    • Installation
      • Install Blynk Library in Arduino IDE
      • Install Blynk Library for Platformio.org
      • Install ESP8266 core for Arduino IDE
    • Configuration
    • Connection Management
    • Device Online/Offline Status
    • Digital/Analog Pins
    • Virtual Pins
    • Widget Properties
    • State Syncing
    • Timers
    • Time (RTC clock)
    • Timezone / Location
    • Log Event
    • Metadata
    • Debug
    • Reboot
    • Over-The-Air Firmware Updates (OTA)
    • Other
    • Limitations and Recommendations
    • Blynk Protocol
  • BLYNK.CLOUD MQTT API
    • Device MQTT API
      • Authentication
      • Topic Structure
      • Datastreams
      • Widget Properties
      • Events
      • Metadata
      • Timezone/Location
      • OTA
      • Miscelaneous
  • BLYNK.CLOUD HTTPS API
    • Device HTTPS API
      • Get Datastream Value
      • Get Multiple Datastream Values
      • Get Historical Data From Device
      • Update Datastream Value
      • Update Multiple Datastreams Simultaneously
      • Upload a Set of Timestamped Data
      • Update Widget/Datastream Property
      • Send/Log An Event
      • Get Device Metadata Value
      • Update Device Metadata Value
      • Is Device Connected
      • Upload a File
      • HTTPS API Troubleshooting
    • Platform API
      • Authentication
      • Ogranization API
        • Get Own Organization Info
        • Get Organization Info
        • Search Organizations
        • Create Organization
        • Get Static Tokens
        • Get Organization Tags
        • Get Organization Automations
      • Devices API
        • Get All Devices
        • Search Devices
        • Get Devices by Owner Email
        • Get Devices in user organization
        • Get Recently Activated Devices
        • Get Device Info
        • Get Connection Status
        • Create Device
        • Edit Device
        • Get Datastream Values
        • Update Datastream Value
        • Update Multiple Datastreams Values
        • Import Datastream Values
        • Update Datastream Property
        • Get Datastream Historical Data
        • Get Device Metadata
        • Update Device Metadata
        • Get Device Tags
        • Get Device Timeline Log
        • Log a Device Event
        • Get Actions Log
        • Erase All Data
        • Remove Device Owner
        • Transfer Device
        • Delete Device
      • Users API
        • Get All Users
        • Search Users
        • Create New User
        • Invite User
        • Get User Info
        • Update User Role
      • Templates API
        • Get All Templates
        • Get Template Info
        • Get Template Metadata
        • Get Template Datastreams
        • Get Template Events
    • Security
  • Downloads
    • Blynk Mobile Apps
    • Blynk Library
  • Troubleshooting
    • General Issues
    • Developer Mode
    • Changes from Blynk 0.1
      • Migrating to the new Blynk - Full Guide
    • Glossary
    • Links
  • Commercial Use
    • Deploying Products With Dynamic AuthTokens
    • Deploying Products With Static Tokens
    • Working With Clients
    • Supported topologies
    • Business Plan (White Label Solution)
      • App Publishing Process And Timeline
      • What's Needed To Publish Your Apps And Go Live
      • Branding Materials
      • Custom Email Address For Transactional Emails
      • Application Settings
        • General
        • Design
        • Mobile Apps
        • Sign Up
  • Add-Ons
    • Add-on list
    • Amazon Alexa
    • Google Assistant
    • Localization
    • Database Access
    • Marketing
Powered by GitBook
On this page
  • Select the template
  • Choose the Tile Design
  • Create Mobile Dashboard
  • Switch widget settings
  • Labeled Value widget settings
  • SuperChart widget settings

Was this helpful?

  1. Getting Started
  2. Template Quick Setup

Set Up Mobile App Dashboard

PreviousSet Up Web DashboardNextPrepare Your Code

Last updated 12 months ago

Was this helpful?

Now let's set up the mobile UI for our device.

In Blynk you can build different dashboards for the web and for the mobile app. Because screen sizes are all different, you can adapt the interface to make it user-friendly.

You would need Blynk mobile app for iOS or Android to continue. Make sure Developer mode is turned on in your Profile.

Select the template

Tap on Go to Developer Mode to get to the Developer zone with the list of templates.

Tap on the template you would like to work with. If you are new to Blynk and used the Quickstart flow to get your device online, there will be just one template named Quickstart Template. Now you can configure how your device's dashboard should work in the mobile app.

Choose the Tile Design

You can choose how a device tile will look in the list of devices when added using this template. Tap on the Settings icon in the design panel at the bottom, then tap on Tile type to select the preset from the menu.

There are currently 8 Device Tile presets with different interactions:

  • Key Value – shows Datastream value in real-time (e.g.: temperature, volume, percentage, etc.)

  • Button – tap on the Device Tile will trigger an action or toggle ON/OFF state. Tap on the name to open the device dashboard

  • 2 Labels – you can display up to 2 values, a device image, plus a switch control

  • 3 Labels – you can display up to 3 important values plus a switch control

  • Gauge - displays values of datastream of data type integer as a gauge. The visual options that may be set are:

    • Template Icon - the icon chosen here will be the default device icon.

    • Value - the display of the numerical value under the gauge may be enabled or disabled. Choose the color, alpha, or define custom colors for the value based on the datastream value.

    • Label - choose an icon (optional), and/or a label. A switch enables or disables the display of the label + icon above the gauge. The icon and label color may be customized.

    • Gauge - set the line width and gauge color. The gauge color can be solid and with a specific color and alpha, or choose ‘Ramp’ and to assign either a linear or step gradient with up to six colors and datastream values.

    • Indicator - set the style (dot or tick), and the color of that indicator.

  • Level – visualizes a certain level (brightness, power, water level, etc.) based on selected Datastream value

  • Image (default) – shows device image or icon. Tap anywhere will open the device dashboard

  • Color – indicates color, brightness, etc., and can quickly turn the device ON/OFF. Tap on the name to open the device dashboard

Let's select Button for this demonstration (you can edit it later). On choosing the preset, tile settings will open. Select the datastream that will be linked to the tile action.

Select the Tap Interaction - Switch. It will allow toggling the device ON/OFF when tapping on the device tile.

Tiles can feature one of the additional labels to show connection status, last reported time, or battery level as a subtitle.

Subtitle labels are available with plan PRO and higher.

Tap on 'x' to exit the screen. All the edits to your tile will be saved automatically.

Create Mobile Dashboard

Now you can start building a mobile UI for your device. Tap anywhere on the canvas and add these widgets:

  • Switch

  • Labeled Value

  • SuperChart

Switch widget settings

Select the datastream that will be connected to the widget's action. Use the datastream's default min/max values or set up your own.

In the Design tab give the widget a title (optional), and set up colors for the light and dark theme.

Labeled Value widget settings

For example, you want to show a temperature in the labeled value widget. Pick a datastream for temperature. In the design tab you can choose to use Title field to place the label above the value or Label filed to configure the message of your choice, placing the text to the right and/or to the left of the value.

SuperChart widget settings

Now choose a SuperChart widget, and set up 2 datastreams, for example for power and temperature. Adjust the colors, graph type and axes for each datastream to your needs. Select the predefined time ranges you'd like to use and set up other settings. You can adjust the widget's title, legend and time axis visibility in the design tab.

Now your template is ready. Let's finish with the sketch and make it work.

Developer Zone
Choose the tile design
Button tile settings
Empty mobile dashboard editing
Switch widget settings
Labeled Value widget settings
SuperChart widget settings
Mobile dashboard editing