Project:Instant messaging

From SpinetiX Support Wiki

Jump to: navigation, search

Applies to: HMP350, HMP200, HMP130, HMP100.

Introduction

The "Instant Messaging" sample-projects below are based on the Shared Variables mechanism and demonstrate how to interact with the HMP (i.e. trigger a content change on the screen) by updating a shared variable.

Instant Messaging project

Specification

Description

Screenshot v1.4

This project contains three text widgets that demonstrate different ways of displaying the value of a Shared Variable: as a text ticker, as a text roll or as a text bar. These widgets are are built using the feed widgets present in Elementi Library. The project also includes an index.html file that can be used to update the value of the "message" (see the technical note below) from a browser.

To use this project, follow these steps:

  1. Enable the Network API on the HMP (this feature is disabled by default)
  2. Publish this project on the HMP.
  3. Update the "message" (i.e. the Shared Variable) using any of the following methods:


"Technical note"
The text widgets are using a default Shared Variable named "message" - this can be changed to another local / remote shared variable by opening the "Data source" property and changing the variable name. To connect to a remote shared variable, use the variable name followed by '@' and the hostname or IP address of the remote HMP and, optionally, by a TCP port (if the port number on the server is different from the port number on the local host) - e.g., var@remotehost:4567.

Deprecated projects

Specification

  • Category: Interactivity
  • Author: SpinetiX S.A.
  • License: GPL Version 3
  • Target: HMD

Instant Messaging project (HMD)

Files description:

  1. IMS_receiver.svg - this is a SVG file (based on a news template) that receives the messages (sent from the first file) and displays them. In case there are more messages, they will be displayed one after another.
  2. IMS_receiver_ticker.svg - this is a SVG file (based on a ticker template) that receives the messages (sent from the first file) and displays them one after another continuously.
  3. IMS_browser_interface.html - this is a pre-written HTML file that need to be loaded in your browser. On the left side, insert the IP address of your HMP (e.g. 192.168.1.10) or use the default value (e.g. localhost) to send messages to HMD and press the "Set IP address" button. Then insert your message(s) on the right side (one message per line) and press the "Send message" button.

Instant Messaging Queue project (HMD)

Files description:

  1. receiver.svg - this is a SVG file that receives the data (sent from the first file) and displays the new information, along with playing an animation and a sound. On the "Properties" tab of the file, you can configure the animation settings and the audio effect settings.
  2. IMq_browser_interface.html - this is a pre-written HTML file that need to be loaded in your browser. On the left side, insert the IP address of your HMP (e.g. 192.168.1.10) or use the default value (e.g. localhost) to send messages to HMD and press the "Set IP address" button. Then insert the values for queue, area and room fields on the right side and press the "Send the information!" button.

JavaScript code:

function onUpdate( x ) {
  var el = document.getElementById(x.name);
  el.textContent = x.value;
  sound.beginElement();
  animation.beginElement();
}
var q = createSharedVariable( 'q' ).addUpdateListener( onUpdate );
var a = createSharedVariable( 'a' ).addUpdateListener( onUpdate );
var r = createSharedVariable( 'r' ).addUpdateListener( onUpdate );
var sound = document.getElementById("sound");
var animation = document.getElementById("animation");
This page was last modified on 28 March 2017, at 10:45.