Graphical user interface for ioBroker based on TileBoard
npm install iobroker.tileboard!Logo
Message;;info`.
* changeView - switch to desired view. "control.data" must have the index or title of view, like defined in config.
* refresh - reload TileBoard, for instance after project is changed to reload on all browsers.
* reload - same as refresh.
* popup - opens a new browser window. Link must be specified in "control.data", e.g. http://google.com
* playSound - play sound file. The link to file is specified in "control.data", e.g. http://www.modular-planet.de/fx/marsians/Marsiansrev.mp3.
You can upload your own file in TileBoard and let it play as for instance "/tileboard.0/main/img/myFile.mp3".
If user changes the view or at start the variables will be filled by TileBoard with
- "control.instance": browser instance and ack=true
- "control.data": the page title as defined in config
- "control.command": "changedView" and ack=true
You can write the JSON-string or Object into control.command as `{instance: 'AABBCCDD', command: 'cmd', data: 'ddd'}`. In this case the instance and data will be taken from JSON object.
$3
To get more settings for alert you can send following structure to adjust every parameter of the notification popup from script adapter.
`
setState('tileboard.0.control.command', JSON.stringify({
command: "alert",
instance: "*",
data: {
"icon": "mdi-car", // Material icon
"type": "info", // Type: info, warning, error, success
"title": "Information", // Header of the message
"message": "Hello world", // Text of the message
"lifetime": 5, // Seconds
}
}));
`
For developers
How to merge the original repository into this one:
Following files were change:
- /index.html - added ../tileboard.0/custom.css, ../../lib/js/socket.io.js, ./_socket/info.js and scripts/vendors/conn.js, removed styles/custom.css
- /scripts/models/api.js - completely replaced
- /scripts/controllers/main.js -
Extended function getItemEntity:
`
$scope.getItemEntity = function (item) {
if(typeof item.id === "object") return item.id;
if(!(item.id in $scope.states)) { // IoB
if (typeof Api.getState === 'function') {
Api.getState(item.id);
} else {
warnUnknownItem(item);
}
return null;
}
return $scope.states[item.id];
};
`
added function setNewStates:
`
// IoB - required for lazy load of the states, becasue every update of the single state cause the request of all states again.
// To avoid that all states must be updated at once and only then updateView should be called.
function setNewStates (states) {
states.forEach(function (state) {
if(!$scope.states[state.entity_id]) $scope.states[state.entity_id] = state.new_state;
// Is it required? If $scope.states[key] just assigned?
for(var k in state.new_state) $scope.states[state.entity_id][k] = state.new_state[k];
});
}
`
Modified function:
`
function handleEvent (event) {
try {
if (event.event_type === "state_changed") {
debugLog('state change', event.data.entity_id, event.data.new_state);
if (event.data instanceof Array) { // IoB
setNewStates(event.data);
event.data.forEach(function (state) {
checkStatesTriggers(state.entity_id, state.new_state);
});
} else {
setNewState(event.data.entity_id, event.data.new_state);
checkStatesTriggers(event.data.entity_id, event.data.new_state);
}
}
else if (event.event_type === "tileboard") {
debugLog('tileboard', event.data);
triggerEvents(event.data);
}
}
catch (e) {console.error(e);}
updateView();
}
`
At the end:
` if(CONFIG.pingConnection !== false) {`
=>
`
if (CONFIG.pingConnection) { // Changed for IoB
`
- /styles/main.less(css)
Added:
`
@media screen and (max-height: 770px) { // IoB
.header {
display: none;
}
}
``