19Labs Custom Wellness Portal SDK

Overview

Welcome to the 19Labs Custom Wellness Portal SDK documentation.

This document is intended to give you all the information you need to build a custom HTML page that loads on the 19Gale platform.

Installing

Manually

To add the captive portal library to an existing project:

yarn add @19labs/gale-wellness
or
npm install @19labs/gale-wellness

Functionality of the API

The API allows the following functionality, either with JavaScript or with the DOM elements:

1. Login, Signup, Logout
2. Navigate to a native Gale screen
3. Get list of sensors & clinics from the active configuration
4. Start a sensor measurement
5. Retrieve or update the intake data
6. Get the sensor measurements for the current session
7. Save or restore a session
8. Create or update patient profiles
9. Respond to system events

Examples

There are two public git repositories with examples using the api

the first is a simple sample that demonstrates all of the bridge api calls

https://bitbucket.org/19labs_external/wellness-test-pwa.git

the second is a more sophisticated example that shows a more complex nodejs/express application that uses both the api and the Dom custom elements to connect to a demonstration FHIR based sytem

https://bitbucket.org/19labs_external/fhir.git

Developing

The gale-wellness library provides two ways of building captive portals:

1. A JavaScript API that talks to the Gale native components
2. Built-in custom HTML elements that make it easy to build a captive portal for the Gale platform.

Using the JavaScript API

The entry point to the JavaScript API is GaleAPIBridge.

Using the builtin DOM capabilities

The Gale SDK comes with several custom HTML elements that can help building a captive wellness page without dealing with the nits and grits of JavaScript.

The elements come with a default style, but can be fully stylable using CSS.

Easy navigation

If the Gale DOM library is imported, it is possible to navigate to different native screens using hash addresses. Available navigations:

• #gale:sensor/sensor-type

  Start a sensor measurement. For example:

  <a href="#gale:sensor/Weight Scale>Get my weight</a>

• #gale:clinic/clinic-name

  Start a video call visit. For example:

  <a href="#gale:clinic/My Clinic>Start Video Visit</a>

• #gale:login: Go to the login screen

See here for the available screen names.

The included elements:

The root element

• <gale-root>

  Contains the context of the app, such as knowledge about whether the user is currently logged in.

  <gale-root>
  ...
      <div class="when-logged-in">You are logged in!</div>
  ...
  </gale-root>
  

  Outputs

Output elements show dynamic information read from Gale.

• <gale-user>

  Show information about the current user, with a template. For example:

  <gale-user>Welcome {firstName} {lastName}</gale-user>

• <gale-sensor-output>

  Shows the current measurement of a specific sensor, for example:

  <gale-sensor-output type="Blood Pressure Monitor">No data</gale-sensor-output>.

  The inner HTML of the gale-sensor-output element represents the placeholder in case no data is available.

  The available sensor types and their fields are found here.

Links

• <gale-link>

  A link to a native Gale screen. For example:

  <gale-link href="logout">Log out</gale-link>.

  The available link targets are specified here.

• <gale-sensor-link>

  A link to start a sensor measurement. For example:

  `Start blood pressure.

  To get a list of sensor types, see here.

• <gale-clinic-link>

  A link to start a call to a clinic. For example:

  `Start call with my clinic.

  To get a list of sensor types, see here.

• <gale-patient-profile-link>

  A link to select a patient profile. For example:

  <gale-patient-profile-link name="Mrs Patient" dateOfBirth="1980-01-01">Mrs. Patient</gale-patient-profile-link>.

  To get a list of sensor types, see here.

Forms

Forms allow the user to input data that would be submitted into Gale. This include login, signup, intake, and patient-profile.

A Gale Form may have a target attribute, which is the location to navigate to once the form is submitted. If the form has an element with class="error", it will receive the output in case the submition has failed.

• <gale-login-form>

  Wraps a form to login to Gale with the results once submitted. The login form should have email and password fields, a potential error output field to show errors, and a target attribute with the location to navigate to once login has succeeded.

  Example:

      <gale-login-form target="#nrxt">
          <form>
              <label>Email: <input type="email" name="email"></label>
              <label>Password: <input type="password" name="password"></label>
              <input type="submit" value="Log In" />
              <output class="error"></output>
          </form>
      </gale-login-form>
  

• <gale-signup-form>

  Wraps a form to signup to Gale with a new account once submitted.

  The signup form should have the same fields expected by the SignupInfo

  Note that the signup form automatically logs in after signin up.

• <gale-intake-form>

  Wraps a form to submit intake information.

  The intake doesn't have a pre-defined schema, and all the submitted fields would be added to the intake data.

• <gale-patient-profile-form>

  Wraps a form to submit new patient profile information.

  The fields required are dateOfBirth and name.

Lists

Lists allows repeating a given template based on array-like information from Gale, such as sensors, clinics and patient profiles.

A Gale List element should always have a templateelement as its child, with its dynamic text as handlebars.

• <gale-patient-profile-list>

  Repeats the given template based on the list of existing patient profile on the Gale device.

  The dynamic content of each item can be expressed using handlebars. Each patient profile corresponds to the PatientProfile interface.

  For example:

  <gale-patient-profile-list>
      <template>
          <h4>{{name}}</h4>
          <p>{{dateOfBirth}}</p>
      </template>
  </gale-patient-profile-list>
  

• <gale-sensor-list>

  Repeats the given template based on the list of available sensors on the Gale device.

  The dynamic content of each item can be expressed using handlebars. Each sensor corresponds to the Sensor interface.

• <gale-clinic-list>

  Repeats the given template based on the list of available callable clinics defined in the Gale configuration.

  The dynamic content of each item can be expressed using handlebars. Each sensor corresponds to the Clinic interface.

To initialize the custom elements:

import {GaleAPIBridge} from '@19labs/gale-wellness/bridge'
const galeBridge = new GaleAPIBridge({apiKey: 'MY-API-KEY', simulatorPort: 9393 /* optional*/})
import {init} from '@19labs/gale-wellness/dom'
init(galeBridge)

Style Considerations

Stay responsive

Gale tablets can come in several resolutions. Keep your UI resposive! Follow best practices for layout, especially flex-box and grid.

Preconfigured style

The SDK comes with an optional preconfigured stylesheet for Gale. To use it: import "@19labs/gale-wellness/style.css"

Testing

Using a Gale device

deploy your application to a server or host visible to the internet. 19Labs recommends using NGrok to expose your app running on a local device to the internet

Update your device's configuration on 19Labs DMS to the internet address of your applicationto test your portal on a Gale device.