Eltra Web Client

Browser (slave) connector for the Eltra IoT Hub - sign in, bind a device, browse and edit parameters, live updates over WebSocket.

Live demo

The widget below talks to this hub. To try it out start the TestMaster sample (sdk/unittests/TestMaster) pointing at this hub, then sign in with your own account and bind with the device credentials printed by TestMaster (default alias: test4@eltra.ch / 1234).

Embed it in your own page

The client is two small dependency-free ES modules served by the hub. Drop-in widget:

<link rel="stylesheet" href="https://YOUR-HUB/eltra-client/eltra.css">
<div id="eltra"></div>
<script type="module">
    import { mountEltraBrowser } from 'https://YOUR-HUB/eltra-client/eltra-ui.js';

    mountEltraBrowser(document.getElementById('eltra'), {
        host: 'https://YOUR-HUB',   // omit when served by the hub itself
        role: 'engineer'            // user level used for parameter visibility
    });
</script>

Use the API directly

For custom UIs use EltraClient - it mirrors the C# AgentConnector workflow:

import { EltraClient } from 'https://YOUR-HUB/eltra-client/eltra.js';

const client = new EltraClient({ host: 'https://YOUR-HUB' });

// 1. identify yourself (creates the account on demand)
await client.signIn('me@example.com', 'secret', true);

// 2. open the slave channel + bind your identity to the device identity
await client.connect({ login: 'test4@eltra.ch', password: '1234' });

// 3. browse channels -> devices -> object dictionary
const channels = await client.getChannels();
const device   = channels.find(c => c.Id !== client.channelId).Devices[0];
const od       = await client.getObjectDictionary(device);   // parsed XDD

// 4. read + write parameter values
const counter = od.parameters.find(p => p.uniqueId === 'PARAM_Counter');
console.log('counter =', await client.readValue(device, counter));

const controlWord = od.parameters.find(p => p.index === 0x6040 && p.subIndex === 0);
await client.writeValue(device, controlWord, 0x000F);        // SetObject on the master

// 5. live updates over the websocket
client.on('parameterChanged', u => console.log(u.parameter?.label, '=', u.value));
await client.registerParameterUpdate(device, counter);

// 6. device commands (e.g. TestMaster's StartCounting)
await client.executeCommand(device, 'StartCounting', { Step: 1, Delay: 500 });

Notes: the hub uses cookie authentication, so cross-origin embedding requires the embedding site to be allowed by the hub's CORS/cookie policy - same-origin hosting (this page) works out of the box. Parameter visibility/editability follows the device description user levels (role) and the ro/rw/wo access flags.