@19labs/gale-wellness

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>@19labs/gale-wellness</title> <meta name="description" content="Documentation for @19labs/gale-wellness"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> <script async src="assets/js/search.js" id="search-script"></script> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">@19labs/gale-wellness</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> All <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <h1>@19labs/gale-wellness</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <a href="#19labs-custom-wellness-portal-sdk" id="19labs-custom-wellness-portal-sdk" style="color: inherit; text-decoration: none;"> <h1>19Labs Custom Wellness Portal SDK</h1> </a> <a href="#overview" id="overview" style="color: inherit; text-decoration: none;"> <h2>Overview</h2> </a> Welcome to the <a href="https://19labs.com">19Labs</a> 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 <a href="https://www.19labs.com/platform">19Gale platform</a>. <a href="#installing" id="installing" style="color: inherit; text-decoration: none;"> <h2>Installing</h2> </a> <a href="#manually" id="manually" style="color: inherit; text-decoration: none;"> <h3>Manually</h3> </a> To add the captive portal library to an existing project: <pre><code>yarn add @19labs/gale-wellness or npm install @19labs/gale-wellness </code></pre> <a href="#functionality-of-the-api" id="functionality-of-the-api" style="color: inherit; text-decoration: none;"> <h2>Functionality of the API</h2> </a> The API allows the following functionality, either with JavaScript or with the DOM elements: <ol> <li>Login, Signup, Logout</li> <li>Navigate to a native Gale screen</li> <li>Get list of sensors & clinics from the active configuration</li> <li>Start a sensor measurement</li> <li>Retrieve or update the intake data</li> <li>Get the sensor measurements for the current session</li> <li>Save or restore a session</li> <li>Create or update patient profiles</li> <li>Respond to system events</li> </ol> <a href="#examples" id="examples" style="color: inherit; text-decoration: none;"> <h2>Examples</h2> </a> 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 <a href="https://bitbucket.org/19labs_external/wellness-test-pwa.git">https://bitbucket.org/19labs_external/wellness-test-pwa.git</a> 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 <a href="https://bitbucket.org/19labs_external/fhir.git">https://bitbucket.org/19labs_external/fhir.git</a> <a href="#developing" id="developing" style="color: inherit; text-decoration: none;"> <h2>Developing</h2> </a> The gale-wellness library provides two ways of building captive portals: <ol> <li>A JavaScript API that talks to the Gale native components</li> <li>Built-in custom HTML elements that make it easy to build a captive portal for the Gale platform.</li> </ol> <a href="#using-the-javascript-api" id="using-the-javascript-api" style="color: inherit; text-decoration: none;"> <h3>Using the JavaScript API</h3> </a> The entry point to the JavaScript API is <a href="classes/galeapibridge.html">GaleAPIBridge</a>. <a href="#using-the-builtin-dom-capabilities" id="using-the-builtin-dom-capabilities" style="color: inherit; text-decoration: none;"> <h3>Using the builtin DOM capabilities</h3> </a> The Gale SDK comes with several <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">custom HTML elements</a> 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. <a href="#easy-navigation" id="easy-navigation" style="color: inherit; text-decoration: none;"> <h4>Easy navigation</h4> </a> If the Gale DOM library is imported, it is possible to navigate to different native screens using hash addresses. Available navigations: <ul> <li><code>#gale:sensor/sensor-type</code> Start a sensor measurement. For example: <code><a href="#gale:sensor/Weight Scale>Get my weight</a></code> </li> <li><code>#gale:clinic/clinic-name</code> Start a video call visit. For example: <code><a href="#gale:clinic/My Clinic>Start Video Visit</a></code> </li> <li><code>#gale:login</code>: Go to the login screen </li> </ul> See <a href="modules.html#screenname">here</a> for the available screen names. <a href="#the-included-elements" id="the-included-elements" style="color: inherit; text-decoration: none;"> <h4>The included elements:</h4> </a> <a href="#the-root-element" id="the-root-element" style="color: inherit; text-decoration: none;"> <h4>The root element</h4> </a> <ul> <li><code><gale-root></code> Contains the context of the app, such as knowledge about whether the user is currently logged in. <pre><code><gale-root> ... <div class="when-logged-in">You are logged in!</div> ... </gale-root> </code></pre> <a href="#outputs" id="outputs" style="color: inherit; text-decoration: none;"> <h5>Outputs</h5> </a> </li> </ul> Output elements show dynamic information read from Gale. <ul> <li><code><gale-user></code> Show information about the current user, with a template. For example: <code><gale-user>Welcome {firstName} {lastName}</gale-user></code> </li> <li><code><gale-sensor-output></code> Shows the current measurement of a specific sensor, for example: <code><gale-sensor-output type="Blood Pressure Monitor">No data</gale-sensor-output></code>. The inner HTML of the <code>gale-sensor-output</code> element represents the placeholder in case no data is available. The available sensor types and their fields are found <a href="modules.html#builtinsensortypes">here</a>. </li> </ul> <a href="#links" id="links" style="color: inherit; text-decoration: none;"> <h5>Links</h5> </a> <ul> <li><code><gale-link></code> A link to a native Gale screen. For example: <code><gale-link href="logout">Log out</gale-link></code>. The available link targets are specified <a href="modules.html#screenname">here</a>. </li> <li><code><gale-sensor-link></code> A link to start a sensor measurement. For example: `<gale-sensor-link type="Blood Pressure Monitor">Start blood pressure</gale-sensor-link>. To get a list of sensor types, see <a href="interfaces/sensortypes.html">here</a>. </li> <li><code><gale-clinic-link></code> A link to start a call to a clinic. For example: `<gale-clinic-link name="My clinic name">Start call with my clinic</gale-clinic-link>. To get a list of sensor types, see <a href="interfaces/sensortypes.html">here</a>. </li> <li><code><gale-patient-profile-link></code> A link to select a patient profile. For example: <code><gale-patient-profile-link name="Mrs Patient" dateOfBirth="1980-01-01">Mrs. Patient</gale-patient-profile-link></code>. To get a list of sensor types, see <a href="interfaces/sensortypes.html">here</a>. </li> </ul> <a href="#forms" id="forms" style="color: inherit; text-decoration: none;"> <h5>Forms</h5> </a> Forms allow the user to input data that would be submitted into Gale. This include <code>login</code>, <code>signup</code>, <code>intake</code>, and <code>patient-profile</code>. A Gale Form may have a <code>target</code> attribute, which is the location to navigate to once the form is submitted. If the form has an element with <code>class="error"</code>, it will receive the output in case the submition has failed. <ul> <li><code><gale-login-form></code> Wraps a form to login to Gale with the results once submitted. The login form should have <code>email</code> and <code>password</code> fields, a potential <code>error</code> output field to show errors, and a <code>target</code> attribute with the location to navigate to once login has succeeded. Example: <pre><code> <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> </code></pre> </li> <li><code><gale-signup-form></code> Wraps a form to signup to Gale with a new account once submitted. The signup form should have the same fields expected by the <a href="nterfaces/signupinfo.html">SignupInfo</a> Note that the signup form automatically logs in after signin up. </li> </ul> <ul> <li><code><gale-intake-form></code> 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. </li> <li><code><gale-patient-profile-form></code> Wraps a form to submit new patient profile information. The fields required are <code>dateOfBirth</code> and <code>name</code>. </li> </ul> <a href="#lists" id="lists" style="color: inherit; text-decoration: none;"> <h5>Lists</h5> </a> 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 <code>template</code>element as its child, with its dynamic text as handlebars. <ul> <li><code><gale-patient-profile-list></code> 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 <a href="interfaces/patientprofile.html">PatientProfile</a> interface. For example: <pre><code><gale-patient-profile-list> <template> <h4>{{name}}</h4> <p>{{dateOfBirth}}</p> </template> </gale-patient-profile-list> </code></pre> </li> <li><code><gale-sensor-list></code> 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 <a href="interfaces/sensor.html">Sensor</a> interface. </li> <li><code><gale-clinic-list></code> 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 <a href="interfaces/clinic.html">Clinic</a> interface. </li> </ul> <a href="#to-initialize-the-custom-elements" id="to-initialize-the-custom-elements" style="color: inherit; text-decoration: none;"> <h4>To initialize the custom elements:</h4> </a> <pre><code>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) </code></pre> <a href="#style-considerations" id="style-considerations" style="color: inherit; text-decoration: none;"> <h2>Style Considerations</h2> </a> <a href="#stay-responsive" id="stay-responsive" style="color: inherit; text-decoration: none;"> <h3>Stay responsive</h3> </a> Gale tablets can come in several resolutions. Keep your UI resposive! Follow best practices for layout, especially flex-box and grid. <a href="#preconfigured-style" id="preconfigured-style" style="color: inherit; text-decoration: none;"> <h3>Preconfigured style</h3> </a> The SDK comes with an optional preconfigured stylesheet for Gale. To use it: <code>import "@19labs/gale-wellness/style.css"</code> <a href="#testing" id="testing" style="color: inherit; text-decoration: none;"> <h2>Testing</h2> </a> <a href="#using-a-gale-device" id="using-a-gale-device" style="color: inherit; text-decoration: none;"> <h3>Using a Gale device</h3> </a> 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. </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class=" "> <a href="modules.html">Exports</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> <li class=" tsd-kind-class"> <a href="classes/galeapibridge.html" class="tsd-kind-icon">GaleAPIBridge</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/galeevent.html" class="tsd-kind-icon">GaleEvent</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/bloodpressuremeasurement.html" class="tsd-kind-icon">BloodPressureMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/bloodpressuremeasurementdata.html" class="tsd-kind-icon">BloodPressureMeasurementData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/camerameasurementdata.html" class="tsd-kind-icon">CameraMeasurementData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/clinic.html" class="tsd-kind-icon">Clinic</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/documentdata.html" class="tsd-kind-icon">DocumentData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/galeeventtypes.html" class="tsd-kind-icon">GaleEventTypes</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/genericmeasurement.html" class="tsd-kind-icon">GenericMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/glucometerdata.html" class="tsd-kind-icon">GlucometerData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/glucometermeasurement.html" class="tsd-kind-icon">GlucometerMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/healthhistorydata.html" class="tsd-kind-icon">HealthHistoryData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/imagefiledata.html" class="tsd-kind-icon">ImageFileData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/intakedata.html" class="tsd-kind-icon">IntakeData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/location.html" class="tsd-kind-icon">Location</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/logininfo.html" class="tsd-kind-icon">LoginInfo</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/measurementdata.html" class="tsd-kind-icon">MeasurementData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/measurementdatawithtimestamp.html" class="tsd-kind-icon">MeasurementDataWithTimestamp</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/measurementfiledatasummary.html" class="tsd-kind-icon">MeasurementFileDataSummary</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/measurementwithoptionaltimestamp.html" class="tsd-kind-icon">MeasurementWithOptionalTimestamp</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/multifunctionmeasurement.html" class="tsd-kind-icon">MultifunctionMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/otoscopeimagedata.html" class="tsd-kind-icon">OtoscopeImageData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/participant.html" class="tsd-kind-icon">Participant</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/participants.html" class="tsd-kind-icon">Participants</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/patientprofile.html" class="tsd-kind-icon">PatientProfile</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/pdfdatasummary.html" class="tsd-kind-icon">PdfDataSummary</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/pdffiledata.html" class="tsd-kind-icon">PdfFileData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/prescriptiontext.html" class="tsd-kind-icon">PrescriptionText</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/prescriptiontextdata.html" class="tsd-kind-icon">PrescriptionTextData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/pulseoxmeasurement.html" class="tsd-kind-icon">PulseOxMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/pulseoximeterdata.html" class="tsd-kind-icon">PulseOximeterData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/sensor.html" class="tsd-kind-icon">Sensor</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/sensortypes.html" class="tsd-kind-icon">SensorTypes</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/signupinfo.html" class="tsd-kind-icon">SignUpInfo</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/singlemeasurementdata.html" class="tsd-kind-icon">SingleMeasurementData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/spirometermeasurement.html" class="tsd-kind-icon">SpirometerMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/stethoscopefiledata.html" class="tsd-kind-icon">StethoscopeFileData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/stethoscopemeasurementdata.html" class="tsd-kind-icon">StethoscopeMeasurementData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/thermometermeasurement.html" class="tsd-kind-icon">ThermometerMeasurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/thermometermeasurementdata.html" class="tsd-kind-icon">ThermometerMeasurementData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/updateuserinfo.html" class="tsd-kind-icon">UpdateUserInfo</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/user.html" class="tsd-kind-icon">User</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/weightscaledata.html" class="tsd-kind-icon">WeightScaleData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/weightscalemeaurement.html" class="tsd-kind-icon">WeightScaleMeaurement</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/zoomcallurl.html" class="tsd-kind-icon">ZoomCallUrl</a> </li> <li class=" tsd-kind-type-alias"> <a href="modules.html#builtinsensortypes" class="tsd-kind-icon">BuiltinSensorTypes</a> </li> <li class=" tsd-kind-type-alias"> <a href="modules.html#eventtype" class="tsd-kind-icon">EventType</a> </li> <li class=" tsd-kind-type-alias"> <a href="modules.html#screenname" class="tsd-kind-icon">ScreenName</a> </li> <li class=" tsd-kind-type-alias"> <a href="modules.html#sensormeasurementdata" class="tsd-kind-icon">SensorMeasurementData</a> </li> <li class=" tsd-kind-type-alias"> <a href="modules.html#sensorstate" class="tsd-kind-icon">SensorState</a> </li> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-constructor tsd-parent-kind-class">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-class">Property</li> <li class="tsd-kind-method tsd-parent-kind-class">Method</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-interface">Property</li> </ul> </div> </div> </footer> <div class="container tsd-generator"> Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> </body> </html>