Project:Instant messaging
From SpinetiX Support Wiki
Applies to: HMP350, HMP200, HMP130, HMP100.
Contents
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
- Category: Interactivity
- Author: SpinetiX S.A.
- License: GPL Version 3
- Target: Elementi
Description
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:
- Enable the Network API on the HMP (this feature is disabled by default)
- Open HMP Control Center > Network Settings > Advanced tab and activate "Enable API server using port" option.
- Publish this project on the HMP.
- Update the "
message
" (i.e. the Shared Variable) using any of the following methods:- Open "
http://HMP_address/content/
" in your browser. (whereHMP_address
is the IP or the hostname of the HMP) - Type "
http://HMP_address:1234/update?message=Hello
" into your browser's address field. - Use the Shared Variable AJAX Updater, or the Shared Variable Updater if the former poses any problems.
- Use a Telnet client to sent commands to the HMP.
- Open "
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:
- 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.
- 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.
- 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:
- 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.
- 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");