Project:LocalStorage tester

Specification

LocalStorage tester

Version: 1.0 (2014-03-11)

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

Description

This sample project can be used to test the localStorage object of the Web Storage API and the SV JavaScript API within firmware 3.0.x.

• Note that starting with 3.1.0 release, the Shared Variables are automatically saved into local Storage (i.e. changing a Shared Variable triggers a modification of the localStorage), thus is no longer needed to manually write their values into localStorage as this project does.

It contains two files:

• index.svg

  Reads the configured key (var1 by default) from the localStorage object every 3 seconds and displays its value on the top part of the screen.

• shared variable tester.svg

  Listens for update events of the configured shared variable (var1 by default) and displays the last update details on the bottom part of the screen. Whenever there's an update, the shared variable name (used as key) and value is written into localStorage.

How to use it

To use this project onto an HMP, follow these steps:

1. Open HMP Control Center > Network Settings > Advanced tab and activate "Enable API server using port" option.
2. Publish this project on the HMP.
3. Update the Shared Variable using any of the following methods:
   • Type "http://HMP_address:1234/update?var1=Hello" into your browser's address field. (where HMP_address is the IP or the hostname of the HMP)
   • 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.
4. Restart the HMP from Maintenance page or using the blue button.
5. Check that the value of the last update is read back from the localStorage object.

Sample code

index.svg

    function getValue() {
        var sv_value = localStorage.getItem( config.key ); // read the value from the localStorage
        $('#t').text( sv_value );
    }
    
    getValue(); 
    
    $.setInterval( getValue, 3000 ); // call the getValue function every 3 seconds

shared variable tester.svg

    // create the shared variable
    var v = createSharedVariable( config.sv_name );

    // register the update listener
    v.addUpdateListener( function( sv ) { 
        // ...

        localStorage.setItem( sv.name, sv.value ); // write the shared variable value into localStorage
    }, false);