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.