LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • How to check if PhotonSync is supported
  • Typical use case
  • Sending data
  • Receiving data
  • Example
  • Usage notes
  1. Build your App
  2. JS / TS APIs

PhotonSync

PreviousNFCNextSerialPort

Last updated 2 years ago

Version compatibility

  • PhotonSync was introduced in version 4.59.0 of the JourneyApps Container.

  • PhotonSync is currently only available for customers on the plan.

JourneyApps supports offline data transmission between devices. This is achieved by using flashing QR Codes in a component called PhotonSync.

How to check if PhotonSync is supported

If users are using versions below 4.59.0, you will have to check that the PhotonSync object is available:

main.js
    if(PhotonSync) {
        // use PhotonSync here
    }

Some devices may not be able to receive or transmit data. To check this, call:

main.js
    var capabilities = PhotonSync.getCapabilities();

This returns:

    {
        transmit: true|false,
        receive: true|false
    }

Typical use case

PhotonSync is intended to copy data between users who are not necessarily connected to a network. An example is a user who has captured data in the field, and wants to share it with a colleague in a remote area. Typically, the data would be exported and copied to an external device and imported by the other user.

This takes a lot of time, and the user could forget to remove the data from the external device.

With PhotonSync, the user with the data will have flashing QR Codes on their screen. The user that wants to receive the data will point their device with a camera to the flashing QR Codes until the progress bar is full. They will then have the intended data.

PhotonSync can be thought of as a pipe between the two users. This means that the format of the data is completely in the hands of the developer, and they have to check the data format received for errors etc.

Sending data

PhotonSync is capable of sending any text or ArrayBuffer data. If your data is an object, you will have to convert it to text first, using e.g. JSON.stringify() or converting it to a CSV string.

To send, use:

main.js
PhotonSync.transmit(data, options);

where optional options:

value
Details
Default

compressText

Compresses text to transmit text faster

true

color

Color of the QR Code. Can be a named color, e.g. "primary". or hex value, e.g. "#123456"

black

FPS

Frames Per Second. The maximum number of codes to flash per second

5

packetSize

Size of pieces of the data when splitting in bytes. E.g. 400

Depends on the screen of the sender, but typically 500 on small devices and 1200 on larger devices. Do not go higher than 1200.

Receiving data

To receive data, use:

var received = PhotonSync.receive(options);
if(received) {
    // use data
} else {
    // cancelled or error
}

where optional options:

value
Details
Default

type

Type of the data to receive. Can be "utf8", "arraybuffer", "uint8array" or "base64"

"utf8

progressColor

Color of the progress bar. Can be a named color, e.g. "primary". or hex value, e.g. "#123456"

"primary"

Example

Consider the use case where we want to transmit some “valve” objects from one user to another. We would have a sendValves function that can be triggered from a button etc:

function sendValves() {
    var valvesArray = LocalDB.valve.all().toArray();
    var jsonToTransmit = JSON.stringify(valvesArray);
    PhotonSync.transmit(jsonToTransmit);
}

On the receiver, we would have a receiveValves function:

function receiveValves() {
    LocalDB.valve.where('original = ?', false).destroyAll();

    var received = PhotonSync.receive();
    if(received) {
        var receivedArray = JSON.parse(received);
        receivedArray.forEach(function(r) {
           var newValve = LocalDB.valve.create();
           newValve.serial = r.serial;
           newValve.size = r.size;
           newValve.health = r.health;
           newValve.age = r.age;
           newValve.original = false;
           newValve.save();
        });
        view.receivedValves = LocalDB.valve.where('original = ?', false).orderBy('serial');
    }
}

Note: Since this data was copied from the one device to the other, the developer has to keep track of which data is the copy and which is the original. In this example, the model for the valve has an explicit “original” field:

schema.xml
<model name="valve" label="Valve">
    <field name="serial" label="Serial" type="text" />
    <field name="size" label="Size" type="text" />
    <field name="age" label="Age" type="number" />
    <field name="health" label="Health" type="text" />
    <field name="original" label="Original" type="boolean" />
    <display>Valve: {serial}</display>
</model>

Keeping track of this is up to the developer, so other options can be used. Just remember that not keeping track of this may lead to duplicate models in the backend that will have different id’s, but the same data.

Usage notes

  • Unfortunately, Android devices are not able to receive data, yet. Android may be supported for receiving soon, so ensure that PhotonSync.getCapabilities() is checked before using it.

  • Currently, PhotonSync cannot copy attachments, like photos or signatures, though this may change in the future.

  • The speed that PhotonSync is able to copy data at is non-deterministic and depends on many factors. With internal tests, which should be representative of good conditions, we were able to copy 1000 database objects in five seconds.

💻
Enterprise