iobroker.energiefluss-erweitert
Version:
This ioBroker adapter is the next Version of the energiefluss with the attribute 'erweitert' and allows to display an energyflow animation inside an iframe or HTML DIV.
177 lines (165 loc) • 6.15 kB
HTML
<html>
<head>
<!-- Load ioBroker scripts and styles-->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<!-- Load our own files -->
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
// This will be called by the admin adapter when the settings page loads
function load(settings, onChange) {
// example: select elements with id=key and class=value and insert value
if (!settings) return;
$('.value').each(function () {
var $key = $(this);
var id = $key.attr('id');
if ($key.attr('type') === 'checkbox') {
// do not call onChange direct, because onChange could expect some arguments
$key.prop('checked', settings[id])
.on('change', () => onChange());
} else {
// do not call onChange direct, because onChange could expect some arguments
$key.val(settings[id])
.on('change', () => onChange())
.on('keyup', () => onChange());
}
});
onChange(false);
// reinitialize all the Materialize labels on the page if you are dynamically adding inputs:
if (M) M.updateTextFields();
}
// This will be called by the admin adapter when the user presses the save button
function save(callback) {
// example: select elements with class=value and build settings object
var obj = {};
$('.value').each(function () {
var $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else if ($this.attr('type') === 'number') {
obj[$this.attr('id')] = parseFloat($this.val());
} else {
obj[$this.attr('id')] = $this.val();
}
});
callback(obj);
}
</script>
<style>
.adapter-body {
overflow: hidden ;
}
@media screen and (max-width: 768px) {
.adapter-body {
overflow: auto;
}
}
</style>
</head>
<body>
<div class="m adapter-container">
<div class="row" style="height: 100%;">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4"><a href="#tab-main" class="translate">Main settings</a></li>
<li class="tab col s4"><a href="#tab-password" class="translate" data-lang="password">Password</a></li>
<li class="tab col s4"><a href="https://github.com/SKB-CGN/ioBroker.energiefluss-erweitert/wiki"
target="_blank" class="translate" data-lang="wiki">Wiki</a></li>
</ul>
</div>
<div id="tab-main" class="col s12 page">
<div class="row">
<div class="col s12 m4 l2">
<img src="energiefluss-erweitert.png" class="logo">
</div>
</div>
<div class="row">
<div class="col s12">
<p class="translate" data-lang="donate">If you like this adapter, please consider making a donation
to support my work.</p>
<p><a href="https://www.paypal.com/donate/?hosted_button_id=XNR6XFB9UZ8UJ" target="_blank"><img
src="paypal-donate-button.png" alt="Donate" title="Donate"></a></p>
</div>
</div>
<div class="row">
<div class="col s6">
<p class="translate" data-lang="introTx">To configure the adapter, please open it via the instance
link. There you will find the configuration wheel!</p>
</div>
<div class="col s6">
<p class="translate" data-lang="lostConfigTx">If you disabled the configuration wheel und need
again
access to the config, please follow the steps:</p>
<p class="translate" data-lang="accessKeyTx">Use the browser access key <b style="color: red;">e</b>
inside the live
view, to reach out to the config page again.</p>
<p><a href="https://en.wikipedia.org/wiki/Access_key" target="_blank">AccessKey at Wikipedia</a></p>
</div>
</div>
<div class="row">
<div class="col s12">
<table>
<thead>
<tr>
<th>Browser</th>
<th class="translate" data-lang="keyCombinationTx">Key</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>Windows: <kbd>Alt</kbd> + (<kbd>⇧ Shift</kbd>) + <kbd>e</kbd><br>Mac:
<kbd>Ctrl</kbd>
+ <kbd>⌥ Opt</kbd> + e
</td>
</tr>
<tr>
<td>Firefox</td>
<td><kbd>Alt</kbd> + <kbd>⇧ Shift</kbd> + <kbd>e</kbd><br>Mac: <kbd>Ctrl</kbd>
+ <kbd>⌥ Opt</kbd> + e</td>
</tr>
<tr>
<td>Internet Explorer</td>
<td><kbd>Alt</kbd></td>
</tr>
<tr>
<td>Microsoft Edge</td>
<td><kbd>Alt</kbd></td>
</tr>
<tr>
<td>Opera >=15</td>
<td><kbd>Alt</kbd> + <kbd>⇧ Shift</kbd> + <kbd>e</kbd></td>
</tr>
<tr>
<td>Opera <= 12</td>
<td><kbd>⇧ Shift</kbd> + <kbd>ESC</kbd> + <kbd>e</kbd></td>
</tr>
<tr>
<td>Safari</td>
<td>Windows:<kbd>Alt</kbd> + <kbd>e</kbd><br>Mac: <kbd>Crtl</kbd> + <kbd>e</kbd></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="tab-password" class="col s12 page">
<div class="row">
<div class="input-field col s12 m10 l8">
<input class="value" id="password" type="password" />
<label for="password" class="translate" data-lang="password">Password:</label>
<span class="translate" data-lang="ex_password">Set a password, to protect the configuration inside the
workspace</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>