Dynamix 1 Web App Quickstart

//Dynamix 1 Web App Quickstart
Dynamix 1 Web App Quickstart 2017-09-29T23:38:59+00:00


Need rich context information in your next Web app? What about enhanced interactions with nearby smart devices and sensors? With Dynamix, you’ll have access to a rapidly growing collection of powerful context plug-ins, which can handle a variety of sensing and actuation tasks. Web apps can fluidly interact with the physical world using Dynamix’s Web connector, which enables Web apps to install and use many Dynamix plug-ins – directly from the browser. Web apps communicate with Dynamix using two provided JavaScript support files that simplify service binding, API interactions, data serialization/deserialization, error handling and event processing. The following sections describe how to integrate Dynamix into your next Web project.


Download Dynamix!

Grab the latest Dynamix Framework, JavaScript SDK and example Web app, which is referenced throughout this tutorial.

Web App Integration

After downloading the Dynamix JavaScript files, simply include them in your Web project and reference them from your Website’s HTML as follows:
To interact with the Dynamix framework through JavaScript, use the API methods in dynamix.js and implement the necessary event handlers in dynamix_listener.js

Dynamix Binding

Next, connect your Webpage to the local Dynamix service by calling Dynamix.bind() from either HTML or JavaScript. Below is a simple example of calling bind from an HTML form:
Dynamix responds to bind/unbind requests by raising events in your Webpage’s dynamix_listener.js as follows:
Note that you can disconnect your Webpage from Dynamix using Dynamix.unbind() as follows:

Add a Dynamix Listener

Once the onDynamixFrameworkBound event is raised, you can add your Web page as a Dynamix listener as follows:
You can remove your Webpage as a Dynamix listener as follows:
Note that adding a Dynamix listener will automatically open a Dynamix session for your Webpage. During this interaction, Dynamix will alert the user that the Website’s domain wishes to use Dynamix services. The user must authorize the Website domain before further interactions with Dynamix will be allowed. The user may revoke security authorization at any time.
Dynamix responds to add/remove listener requests by raising events in your Webpage’s dynamix_listener.js as follows:
Note that you must wait for the onSessionOpened event to be raised before adding context support!

Add Context Support

Once your Webpage has an open Dynamix session, it’s time to install context support using Dynamix plug-ins! Start by browsing the available Dynamix plug-ins here, noting the plug-in identifier and/or the context type you’re interested in using. A “context type” is a specific kind of ambient functionality provided by a Dynamix plug-in, such as performing a particular sensing task or performing a particular remote interaction with a remote device. Note that some plug-ins support multiple context types. For additional information about Dynamix context support, check out the Dynamix overview.

You can add context support by specifying the plug-in id and context type as follows (battery level detection):
You can also add context support by specifying only the context type as follows:
When only specifying context type, Dynamix will attempt to discover and install appropriate plug-ins to handle the request. In this case, more than one context plug-in may be installed.
You can remove previously installed context support as follows:
Or Or
Dynamix responds to add/remove context support requests by raising events in your Webpage’s dynamix_listener.js as follows:

Handle Context Interactions and Events

After context support is installed, your Website may need to interact with the associated Dynamix plug-in to trigger context sensing and/or remote device interactions. Each plug-in provides its own set of context events and (optionally) an API for controlling its functionality (see the plug-in’s documentation for details). Some plug-ins run autonomously in the background broadcasting events as needed, whereas others require the Web app to trigger sensing or actuation.

The battery level sensor plug-in used in this example supports two modes simultaneously: autonomous and reactive. Since the plug-in supports autonomous mode, it will continually sense the device’s battery level and send events to the Web app whenever the batter level changes. Since the plug-in also supports reactive mode, the plug-in can also query the batter level on-demand as shown below.

Battery level context request (reactive mode):
Context information is sent from plug-ins to Web apps as context events, which arrive at the DynamixListener.onContextEvent handler in the dynamix_listener.js file. Incoming context events are automatically populated with specific data fields that are specific to the plug-in (or context type) used (see the plug-in’s documentation for details). Developers can access context information using simple ‘dot notation’, rather than parsing complex string data.

Dynamix sends context events to your Webpage’s dynamix_listener.js as follows:
Continuing our simple example, battery level events can be handled as follows: