iobroker.fully-tablet-control
Version:
830 lines (762 loc) • 120 kB
HTML
<html>
<head>
<!-- Load ioBroker scripts and styles-->
<!-- Materialze style -->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- For menu to select states styles-->
<link type="text/css" rel="stylesheet" href="../../lib/css/themes/jquery-ui/default/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" href="../../lib/css/fancytree/ui.fancytree.min.css"/>
<link rel="stylesheet" type="text/css" href="../../lib/css/iob/selectID.css"/>
<!-- Load ioBroker scripts -->
<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="../../js/translate.js"></script>
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<!-- For menu to select states scripts-->
<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
<script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>
<script type="text/javascript" src="../../lib/js/selectID.js"></script>
<!-- Load our own files -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript">
// TODO: info-big.png in admin/img einfügen oder media umbenennen bild bereits vorhanden wird für selectID benötigt
let brightness = [];
let screenSaver = [];
let devices = [];
let telegram = [];
let motion = [];
let charger = [];
let visView = [];
let TabletName = [];
let firstName = [];
let telegramAdapter = false;
let visAdapter = false;
let active = false;
function showHideSettings() {
let telegram_enabled = JSON.parse($('#telegram_enabled').val());
let chargerON = JSON.parse($('#chargerON').val());
let viewChange_enabled = JSON.parse($('#viewChange_enabled').val());
let motionSensor_enabled = JSON.parse($('#motionSensor_enabled').val());
let screenSaverON = JSON.parse($('#screenSaverON').val());
let brightness_on = JSON.parse($('#brightness_on').val());
let timeMode = JSON.parse($('#timeMode').val());
let record_mode = JSON.parse($('#record_mode').val());
//charger Table show/hide
if (chargerON) {
$('#charger').show();
}
else {
$('#charger').hide();
}
//Brightness Table show/hide
if (brightness_on) {
$('#brightness').show();
$('.sub-title-table').show();
$('.sub-title-TimeControl').show();
// Time Mode ( Astro or Manuel )
if (timeMode) {
$('.selectBrightness_time').hide();
$('.selectAstroBrightness').show();
$('.selectBrightness_checkInterval').show();
$('.AstroBrightness').show();
}
else {
$('.AstroBrightness').hide();
$('.selectAstroBrightness').show();
$('.selectBrightness_checkInterval').show();
$('.selectBrightness_time').show();
}
}
else {
$('#brightness').hide();
$('.AstroBrightness').hide();
$('.selectBrightness_time').hide();
$('.selectAstroBrightness').hide();
$('.selectBrightness_checkInterval').hide();
$('.sub-title-TimeControl').hide();
$('.sub-title-table').hide();
}
//screenSaver Table show/hide
if (screenSaverON) {
$('#screenSaver').show();
$('.ManualMode').hide();
}
else {
$('#screenSaver').hide();
$('.ManualMode').show();
}
//motionSensor Table show/hide
if (motionSensor_enabled) {
$('#motion').show();
}
else {
$('#motion').hide();
}
// VisView mode and Table show/hide
if (visAdapter) {
$('.visAdapter').hide();
if (viewChange_enabled) {
$('.viewMode').show();
$('#visView').show();
}
else {
$('.viewMode').hide();
$('#visView').hide();
}
}
else {
$('.visAdapter').show();
}
// telegram Tabel show/hide
if (telegram_enabled) {
if (telegramAdapter) {
$('.TelegramAdapter').hide();
if (firstName.length !== 0) {
$('.telegram').show();
$('.TelegramUser').hide();
}
else {
$('.telegram').hide();
$('.TelegramUser').show();
}
}
else {
$('.TelegramAdapter').show();
}
}
else {
$('.telegram').hide();
$('.TelegramAdapter').hide();
$('.TelegramUser').hide();
}
// image_capture show/hide
if (record_mode) {
$('#ul_single_shot').hide();
$('#ul_series_shot').show();
} else {
$('#ul_series_shot').hide();
$('#ul_single_shot').show();
}
}
//the function loadSettings has to exist ...
function load(settings, onChange) {
if (!settings) return;
let namespace = `${adapter}.${instance}`;
socket.emit('getState', `system.adapter.${namespace}.alive`, function (err, state) {
active = /*common.enabled ||*/ (state && state.val);
if (!active) {
console.log('Not_active');
$('#divInterval').hide();
$('#divFireTablet').hide();
$('.devicesLogin').hide();
$('#tabTrigger').addClass('disabled');
$('#tabBrightness').addClass('disabled');
$('#tabScreen').addClass('disabled');
$('#tabTelegram').addClass('disabled');
$('#tabMotion').addClass('disabled');
$('#tabVis_view').addClass('disabled');
$('#tabImage_capture').addClass('disabled');
$('.adapter_offline').show();
}
else {
$('.adapter_offline').hide();
$('#divInterval').show();
$('#divFireTablet').show();
$('.devicesLogin').show();
$('#tabTrigger').removeClass('disabled');
$('#tabBrightness').removeClass('disabled');
$('#tabScreen').removeClass('disabled');
$('#tabTelegram').removeClass('disabled');
$('#tabMotion').removeClass('disabled');
$('#tabVis_view').removeClass('disabled');
$('#tabImage_capture').removeClass('disabled');
}
});
devices = settings.devices || [];
brightness = settings.brightness || [];
screenSaver = settings.screenSaver || [];
telegram = settings.telegram || [];
motion = settings.motion || [];
charger = settings.charger || [];
visView = settings.visView || [];
$('.value').each(function () {
const $key = $(this);
const 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', () => {
showHideSettings();
onChange();
});
}
else {
// do not call onChange direct, because onChange could expect some arguments
$key.val(settings[id])
.on('change', () => {
showHideSettings();
onChange();
})
.on('keyup', () => onChange());
}
});
$('.collapsible').collapsible();
onChange(false);
// reinitialize all the Materialize labels on the page if you are dynamically adding inputs:
showHideSettings();
$('#check').click(() => {
let Tablet_Name = `</div>`;
//Große Massage Fenster muss noch getestet werden
// showMessage('Hallo das ist ein Test', 'Test')
// if (!active) {
// console.log('Not_active');
// const toastHTML = `<i class="warn_icon material-icons left">warning</i><span class="warning_msg"> ${_(' Please activate instance ')} </span><i class="warn_icon material-icons right">warning</i>`;
// M.toast({html: toastHTML, displayLength: 5000, inDuration: 50, outDuration: 50, classes: 'orange'});
// return;
// }
$('.Load_ring').show();
sendTo(namespace, 'pingTablet', devices, (result) => {
for (const n in devices) {
if (devices[n].enabled) {
if (result[n] && devices[n].enabled) {
Tablet_Name += `<i class="online_icon material-icons left">tablet</i><span class="online_msg"> ${devices[n].name}: Online </span><i class="online_icon material-icons right">mobile_friendly</i>`;
Tablet_Name += `<div></div>`
}
else {
Tablet_Name += `<i class="warn_icon material-icons left">warning</i><span class="offline_msg"> ${devices[n].name}: Offline </span><i class="warn_icon material-icons right">mobile_off</i>`;
Tablet_Name += `<div></div>`
}
}
else {
Tablet_Name += `<i class="Disabled_icon material-icons left">mobile_off</i><span class="Disabled_msg"> ${devices[n].name} ${_('is Disabled')} </span><i class="Disabled_icon material-icons right">search_off</i>`;
Tablet_Name += `<div></div>`
}
}
Tablet_Name += `</div>`
$('.Load_ring').hide();
setTimeout(() => {
M.toast({html: Tablet_Name, displayLength: 2000, inDuration: 50, outDuration: 50});
}, 100)
});
});
$('#bri_addDevice').click(() => {
$(document).ready(function () {
for (const n in devices) {
TabletName[n] = devices[n].name;
for (let i = 0; i < brightness.length; i++) {
brightness[i].TabletName = TabletName[i];
}
}
setTimeout(function () {
$('#brightness tr').each(function () {
$(this).find('td:first .values-input').prop('disabled', true);
});
}, 130);
});
});
$('#addScreensaver').click(() => {
$(document).ready(function () {
for (const n in devices) {
TabletName[n] = devices[n].name;
for (let i = 0; i < screenSaver.length; i++) {
screenSaver[i].TabletName = TabletName[i];
}
}
setTimeout(function () {
$('#screenSaver tr').each(function () {
$(this).find('td:first .values-input').prop('disabled', true);
});
}, 130);
});
});
$('#chAddDevice').click(() => {
$(document).ready(function () {
for (const n in devices) {
TabletName[n] = devices[n].name;
for (let i = 0; i < charger.length; i++) {
charger[i].TabletName = TabletName[i];
}
}
setTimeout(function () {
$('#charger tr').each(function () {
$(this).find('td:first .values-input').prop('disabled', true);
});
}, 130);
});
});
// Ask if the TelegramAdapter is installed if yes enter all users in a table select
sendTo(namespace, 'TelegramUser', 'TelegramUser', (result) => {
console.log(`TelegramUser Request ${result}`);
telegramAdapter = result.telegramAdapter;
$(document).ready(function () {
firstName = result.User;
// check if firstname not undefined
if (firstName !== undefined) {
$('#User').attr('data-options', firstName.join(';'));
console.log(firstName.join(';'))
values2table('telegram', telegram, onChange);
}
showHideSettings();
});
});
// query if VisAdapter is installed in the backend
sendTo(namespace, 'VisAdapter', 'VisAdapter', (result) => {
console.log(`VisAdapter Request ${result}`);
visAdapter = result.visAdapter;
$(document).ready(function () {
visView = result.visView;
showHideSettings();
});
});
values2table('brightness', brightness, onChange);
values2table('screenSaver', screenSaver, onChange);
values2table('devices', devices, onChange);
values2table('motion', motion, onChange);
values2table('charger', charger, onChange);
// values2table('telegram', telegram, onChange);
values2table('visView', visView, onChange);
setTimeout(function () {
$('#charger tr').each(function () {
$(this).find('td:first .values-input').prop('disabled', true);
});
$('#brightness tr').each(function () {
$(this).find('td:first .values-input').prop('disabled', true);
});
$('#screenSaver tr').each(function () {
$(this).find('td:first .values-input').prop('disabled', true);
});
}, 130);
if (M) M.updateTextFields();
}
//###### END LOAD #######
//########### SAVE #########
// ... and the function save has to exist.
// you have to make sure the callback is called with the settings object as first param!
function save(callback) {
// example: select elements with class=value and build settings object
const obj = {};
$('.value').each(function () {
const $this = $(this);
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
}
else {
obj[$this.attr('id')] = $this.val();
}
});
//save table2values
obj.brightness = table2values('brightness');
obj.screenSaver = table2values('screenSaver');
obj.devices = table2values('devices');
obj.telegram = table2values('telegram');
obj.motion = table2values('motion');
obj.charger = table2values('charger');
obj.visView = table2values('visView');
callback(obj);
}
//###### END SAVE #######
</script>
</head>
<body>
<!-- you have to put your config page in a div with id adapter-container -->
<div class="m adapter-container">
<div class="row">
<!-- Tabs: Menu -->
<div class="col s12">
<ul class="tabs">
<!-- Single tab entry -->
<li id='tabDevices' class="tab col s3"><a href="#tab-devices" class="translate">fully browser</a></li>
<li id='tabTrigger' class="tab col s3"><a href="#tab-charger" class="translate">charger</a></li>
<li id='tabBrightness' class="tab col s3"><a href="#tab-brightness" class="translate">brightness</a></li>
<li id='tabScreen' class="tab col s3"><a href="#tab-screen" class="translate">screen</a></li>
<li id='tabTelegram' class="tab col s3"><a href="#tab-telegram" class="translate">telegram</a></li>
<li id='tabMotion' class="tab col s3"><a href="#tab-motion" class="translate">motion detector</a></li>
<li id='tabImage_capture' class="tab col s3"><a href="#tab-image_capture" class="translate">Image capture</a></li>
<li id='tabVis_view' class="tab col s3"><a href="#tab-vis_view" class="translate">vis view</a></li>
</ul>
</div>
<div id="tab-image_capture" class="col s12 ">
<div class="row">
<div>
<ul id='test-container' class="collapsible">
<li>
<div>
<div class="collapsible-header blue lighten-1">
<i class="material-icons">camera_indoor</i><span class='translate headerFont'>Activate Automatic the motionDetection</span>
</div>
</div>
<div class="collapsible-body blue lighten-5">
<div class='row center'>
<h5 class='translate'>Activate a function that sets Automatic the state motionDetection to true when taking a picture</h5>
<h5 class='translate'>the state must be Manuel deactivated when it is no longer needed</h5>
</div>
<div class="row auto_motionDetection">
<div class="input-field fontS">
<select class="value" autofocus="autofocus" data-default="false" id="auto_motionDetection">
<option class="translate" value="true">Automatic</option>
<option class="translate" value="false" selected>Manuell</option>
</select>
<label for="auto_motionDetection"></label>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="collapsible-header blue lighten-1">
<i class="material-icons translate">camera_indoor</i><span class='translate headerFont'>Selection of the type of recording mode</span>
</div>
</div>
<div class="collapsible-body blue lighten-5">
<div class='row center'>
<h5 class='translate'>No.1: in the single shot is always taken only one image.</h5> <br>.
<h5 class='translate'>No.2: in the series recording as many images are recorded, as one has specified. Attention the series recording must not be greater than the number of images to be saved if so only as many images are made as specified when saving</h5>.
</div>
<div class="row ">
<div class='col s5'></div>
<div class="col s5 input-field fontS">
<select class="value" autofocus="autofocus" data-default="false" id="record_mode">
<option class="translate" value="true">series recording</option>
<option class="translate" value="false" selected>single shot</option>
</select>
<label for="record_mode"></label>
</div>
<div class='col s5'></div>
</div>
<ul id='ul_single_shot' class="collapsible">
<li>
<div>
<div class="collapsible-header blue lighten-1">
<i class="material-icons translate">camera_indoor</i><span class="translate headerFont">Number of images to be saved for single shot</span>
</div>
</div>
<div class="collapsible-body blue lighten-5 div_single_shot">
<div class='row center'>
<h5 class='translate'>You must specify how many images you want to save</h5>
</div>
<div class='row'>
<div class='col s5'></div>
<div class="col s5 input-field">
<input type="number" class="value" id="single_shot" max="30" min="1" value="1"/>
<label for="single_shot" class="translate single_shot_label">Number of images that will be saved for single shot</label>
<div></div>
<span class='translate MAX'>MAX 30 images</span>
</div>
<div class='col s5'></div>
</div>
</div>
</li>
</ul>
<ul id='ul_series_shot' class="collapsible">
<li>
<div>
<div class="collapsible-header blue lighten-1">
<i class="material-icons translate">camera_indoor</i><span class='translate headerFont'>Number of images to be saved for series recording</span>
</div>
</div>
<div class="collapsible-body blue lighten-5">
<div class='row center'>
<h5 class='translate'>You must specify how many images you want to make and save</h5>
</div>
<div class='row'>
<div class="col s5 input-field ">
<input type="number" class="value" id="series_shot" max="30" min="1" value="2"/>
<label for="series_shot" class="translate series_shot_label">Number of images to be taken with continuous shooting</label>
<div></div>
<span class='translate MAX'>MAX 30 images</span>
</div>
<div class="col s5 input-field ">
<input type="number" class="value" id="series_shot_safe" max="30" min="1" value="2"/>
<label for="series_shot_safe" class="translate series_shot_label_safe">Number of images that will be saved for series recording</label>
<div></div>
<span class='translate MAX'>MAX 30 images</span>
</div>
<div class="col s2 input-field ">
<input type="number" class="value" id="imageTimeout" max="5" min="1" value="1"/>
<label for="imageTimeout" class="translate imageTimeout">Time for the series picture function in ( sec )</label>
<div></div>
<span class='translate MAX'>MAX 5 Seconds</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab with id "tab-devices" -->
<div id="tab-devices" class="col s12 " style="top: 20px">
<!-- logo -->
<div class="row">
<div class="col s12 m4 l2">
<img src="tablet-control.png"><h3 class='adapter_offline translate' style='display: none'>The adapter is deactivated please activate the adapter to unlock all functions</h3><img class="logo">
</div>
</div>
<!-- end logo -->
<!-- polling interval -->
<div id='divInterval' class="col s1.1 input-field ">
<input type="number" class="value intervalField" id="interval" max="3600" min="0" value="30"/>
<label for="interval" class="translate">interval</label>
</div>
<!-- end polling interval -->
<!-- back to Fully Browser -->
<div id='divFireTablet' class="col m4 l4 input-field">
<input type="number" class="value intervalField" id="fireTablet" max="120" min="1" value="3">
<label class="translate" for="fireTablet">back to Fully Browser in (min)</label>
<div class="row"></div>
<span class="translate tabletMessage">Brings the browser back to the foreground</span>
</div>
<!-- end back to Fully Browser -->
<div class="Load_ring">
Loading
<span id='Load_span' style='display: none'></span>
</div>
<!-- fully browser login table -->
<div class="col s12 devicesLogin" id="devices">
<div class="row center">
<a id='addDevice' class="waves-effect waves-light btn table-button-add button:hover"><i class="material-icons left">tablet</i><span class='translate'> add Device</span></a>
<a id='check' class="waves-effect waves-light btn button:hover"><i class="material-icons left">mobile_friendly</i><span class='translate'> Check connection</span></a>
</div>
<div class="table-values-div">
<table class="table-values ">
<thead>
<tr>
<th class="header devicesIndex translate" data-name="_index">Nr.</th>
<th class="header devicesName translate" data-name="name">name</th>
<th class="header devicesIp translate" data-name="ip">ip</th>
<th class="header devicesPort translate" data-type="number" data-default="2323" data-name="port">port</th>
<th class="header devicesPw translate" data-name="password" data-type="password">password</th>
<th class="header devicesEnabled translate" data-default="true" data-type="checkbox" data-name="enabled">enabled</th>
<th class="header Delete translate" data-buttons="delete">delete</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- end fully browser table -->
</div>
<!-- end Tab with id "tab-devices" -->
<!-- Tab with id "tab-charger" -->
<div id="tab-charger" class="col s12">
<div class="row"></div>
<!-- charger table -->
<div class="row">
<!-- select screen active -->
<div class="input-field col s3 selectCharger">
<select class="value" autofocus="autofocus" data-default="false" id="chargerON">
<option class="translate" value="true">Switch on charging control</option>
<option class="translate" value="false" selected>Switch off charging control</option>
</select>
<label for="chargerON"></label>
</div>
<!-- end select screen active -->
<div class="col s12 charger" id="charger">
<div class="row center add-btn">
<a id='chAddDevice' class="waves-effect waves-light btn table-button-add"><i class="material-icons left">charging_station</i><span class='translate'> add charger Device</span></a>
</div>
<div class="table-values-div">
<table class="table-values">
<thead>
<tr>
<th class="header chargerName translate" data-name="TabletName">name</th>
<th class="header chargerId translate" data-type='OID' data-name="chargerid">chargerID</th>
<th class="header chargerMode translate" data-type="select" data-name="power_mode" data-options="true/Charge cycle;false/Continuous current;off/Off">power_mode</th>
<th class="header chargerStart translate" data-default="20" data-type="select" data-name="loadStart" data-options="20/20%;25/25%;30/30%;35/35%;40/40%;45/45%;50/50%">load start</th>
<th class="header chargerStop translate" data-default="85" data-type="select" data-name="loadStop" data-options="55/55%;60/60%;65/65%;70/70%;75/75%;80/80%;85/85%;90/90%;95/95%;100/100%">load stop</th>
<th class="header Delete translate" data-buttons="delete">delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- end charger table -->
</div>
<!-- end Tab with id "tab-charger" -->
<!-- Tab with id "tab-brightness" -->
<div id="tab-brightness" class="col s12">
<div class="row"></div>
<!-- brightness table -->
<div class="row">
<!-- select screen active -->
<div class="input-field col s3 selectScreenOn">
<select class="value" autofocus="autofocus" id="screen_on">
<option class="translate" value="true" selected>Screen on</option>
<option class="translate" value="false">Screen auto</option>
</select>
<label for="screen_on"></label>
</div>
<!-- end select screen active -->
<div class="row"></div>
<p class="translate sub-title-brightness">brightness</p>
<!-- select screen active -->
<div class="input-field col s3 selectBrightness_on">
<select class="value" autofocus="autofocus" id="brightness_on">
<option class="translate" value="true">Brightness control via config page</option>
<option class="translate" value="false" selected>Brightness control manually</option>
</select>
<label for="brightness_on"></label>
</div>
<!-- end select screen active -->
<!-- select screen active -->
<div class="input-field col s3 selectAstroBrightness">
<select class="value" autofocus="autofocus" id="timeMode">
<option class="translate" value="true" selected>astro time</option>
<option class="translate" value="false">Manual time</option>
</select>
<label for="timeMode"></label>
</div>
<!-- end select screen active -->
<!-- check interval -->
<div class="col s3 input-field selectBrightness_checkInterval">
<input class="value" type="number" id="checkInterval" max="120" min="1" value="5"/>
<label class="selectBrightness_label translate" for="checkInterval">Check interval</label>
</div>
<!-- end check interval -->
<div class="row"></div>
<p class="translate sub-title-TimeControl">TimeControl</p>
<!-- select screen active -->
<div class="input-field col s3 AstroBrightness">
<select class="value" autofocus="autofocus" id="astroSelectDay">
<option class="translate" value="sunrise" selected>sunrise</option>
<option class="translate" value="sunriseEnd">sunriseEnd</option>
<option class="translate" value="goldenHourEnd">goldenHourEnd</option>
<option class="translate" value="solarNoon">solarNoon</option>
<option class="translate" value="goldenHour">goldenHour</option>
<option class="translate" value="sunsetStart">sunsetStart</option>
<option class="translate" value="sunset">sunset</option>
<option class="translate" value="dusk">dusk</option>
<option class="translate" value="nauticalDusk">nauticalDusk</option>
<option class="translate" value="night">night</option>
<option class="translate" value="nadir">nadir</option>
<option class="translate" value="nightEnd">nightEnd</option>
<option class="translate" value="nauticalDawn">nauticalDawn</option>
<option class="translate" value="dawn">dawn</option>
</select>
<label class="selectBrightness_label translate" for="astroSelectDay">astro time day</label>
</div>
<!-- end select screen active -->
<!-- select screen active -->
<div class="input-field col s3 AstroBrightness">
<select class="value" autofocus="autofocus" id="astroSelectNight">
<option class="translate" value="sunrise">sunrise</option>
<option class="translate" value="sunriseEnd">sunriseEnd</option>
<option class="translate" value="goldenHourEnd">goldenHourEnd</option>
<option class="translate" value="solarNoon">solarNoon</option>
<option class="translate" value="goldenHour">goldenHour</option>
<option class="translate" value="sunsetStart">sunsetStart</option>
<option class="translate" value="sunset" selected>sunset</option>
<option class="translate" value="dusk">dusk</option>
<option class="translate" value="nauticalDusk">nauticalDusk</option>
<option class="translate" value="night">night</option>
<option class="translate" value="nadir">nadir</option>
<option class="translate" value="nightEnd">nightEnd</option>
<option class="translate" value="nauticalDawn">nauticalDawn</option>
<option class="translate" value="dawn">dawn</option>
</select>
<label class="selectBrightness_label translate" for="astroSelectNight">astro time night</label>
</div>
<!-- end select screen active -->
<!-- select dayTime active -->
<div class="input-field col s3 selectBrightness_time">
<select class="value" autofocus="autofocus" id="dayTime">
<option class="translate" value="4">4Clock</option>
<option class="translate" value="5">5Clock</option>
<option class="translate" value="6">6Clock</option>
<option class="translate" value="7" selected>7Clock</option>
<option class="translate" value="8">8Clock</option>
<option class="translate" value="9">9Clock</option>
<option class="translate" value="10">10Clock</option>
</select>
<label class="selectBrightness_label translate" for="dayTime">In the morning</label>
</div>
<!-- end select dayTime active -->
<!-- select midTime active -->
<div class="input-field col s3 selectBrightness_time">
<select class="value" autofocus="autofocus" id="midTime">
<option class="translate" value="11">11Clock</option>
<option class="translate" value="12">12Clock</option>
<option class="translate" value="13" selected>13Clock</option>
<option class="translate" value="14">14Clock</option>
<option class="translate" value="15">15Clock</option>
<option class="translate" value="16">16Clock</option>
<option class="translate" value="17">17Clock</option>
</select>
<label class="selectBrightness_label translate" for="midTime">afternoon</label>
</div>
<!-- end select midTime active -->
<!-- select nightTime active -->
<div class="input-field col s3 selectBrightness_time">
<select class="value" autofocus="autofocus" id="nightTime">
<option class="translate" value="18">18Clock</option>
<option class="translate" value="19">19Clock</option>
<option class="translate" value="20">20Clock</option>
<option class="translate" value="21">21Clock</option>
<option class="translate" value="22" selected>22Clock</option>
<option class="translate" value="23">23Clock</option>
</select>
<label class="selectBrightness_label translate" for="nightTime">At night</label>
</div>
<!-- end select nightTime active -->
<!-- select brightness table -->
<div class="row"></div>
<p class="translate sub-title-table">table</p>
<div class="col s12 briTables" id="brightness">
<div class="row center">
<a id='bri_addDevice' class="waves-effect waves-light btn table-button-add "><i class="material-icons left">brightness_medium</i><span class='translate'> add brightness control</span></a>
</div>
<div class="table-values-div">
<table class="table-values">
<thead>
<tr>
<!-- <th class="header translate" data-name="_index">Nr.</th>-->
<th class="header brightnessName translate" data-name="TabletName">name</th>
<th class="header brightnessday translate" data-name="dayBrightness" data-default="20" data-type="select" data-options="0/0%;1/1%;2/2%;3/3%;4/4%;5/5%;6/6%;7/7%;8/8%;9/9%;10/10%;11/11%;12/12%;13/13%;14/14%;15/15%;16/16%;17/17%;18/18%;19/19%;20/20%;
;21/21%;22/22%;23/23%;24/24%;25/25%;26/26%;27/27%;28/28%;29/29%;30/30%;31/31%;32/32%;33/33%;34/34%;35/35%;36/36%;37/37%;38/38%;39/39%;40/40%;
;41/41%;42/42%;43/43%;44/44%;45/45%;46/46%;47/47%;48/48%;49/49%;50/50%;51/51%;52/52%;53/53%;54/54%;55/55%;56/56%;57/57%;58/58%;59/59%;60/60%;
;61/61%;62/62%;63/63%;64/64%;65/65%;66/66%;67/67%;68/68%;69/69%;70/70%;71/71%;72/72%;73/73%;74/74%;75/75%;76/76%;77/77%;78/78%;79/79%;80/80%;
;81/81%;82/82%;83/83%;84/84%;85/85%;86/86%;87/87%;88/88%;89/89%;90/90%;91/91%;92/92%;93/93%;94/94%;95/95%;96/96%;97/97%;98/98%;100/100%">morningtime brightness</th>
<th class="header brightnessMidTime translate" data-name="midTimeBrightness" data-default="20" data-type="select" data-options="0/0%;1/1%;2/2%;3/3%;4/4%;5/5%;6/6%;7/7%;8/8%;9/9%;10/10%;11/11%;12/12%;13/13%;14/14%;15/15%;16/16%;17/17%;18/18%;19/19%;20/20%;
;21/21%;22/22%;23/23%;24/24%;25/25%;26/26%;27/27%;28/28%;29/29%;30/30%;31/31%;32/32%;33/33%;34/34%;35/35%;36/36%;37/37%;38/38%;39/39%;40/40%;
;41/41%;42/42%;43/43%;44/44%;45/45%;46/46%;47/47%;48/48%;49/49%;50/50%;51/51%;52/52%;53/53%;54/54%;55/55%;56/56%;57/57%;58/58%;59/59%;60/60%;
;61/61%;62/62%;63/63%;64/64%;65/65%;66/66%;67/67%;68/68%;69/69%;70/70%;71/71%;72/72%;73/73%;74/74%;75/75%;76/76%;77/77%;78/78%;79/79%;80/80%;
;81/81%;82/82%;83/83%;84/84%;85/85%;86/86%;87/87%;88/88%;89/89%;90/90%;91/91%;92/92%;93/93%;94/94%;95/95%;96/96%;97/97%;98/98%;100/100%">midTime brightness</th>
<th class="header brightnessNight translate" data-name="nightBrightness" data-default="0" data-type="select" data-options="0/0%;1/1%;2/2%;3/3%;4/4%;5/5%;6/6%;7/7%;8/8%;9/9%;10/10%;11/11%;12/12%;13/13%;14/14%;15/15%;16/16%;17/17%;18/18%;19/19%;20/20%;
;21/21%;22/22%;23/23%;24/24%;25/25%;26/26%;27/27%;28/28%;29/29%;30/30%;31/31%;32/32%;33/33%;34/34%;35/35%;36/36%;37/37%;38/38%;39/39%;40/40%;
;41/41%;42/42%;43/43%;44/44%;45/45%;46/46%;47/47%;48/48%;49/49%;50/50%;51/51%;52/52%;53/53%;54/54%;55/55%;56/56%;57/57%;58/58%;59/59%;60/60%;
;61/61%;62/62%;63/63%;64/64%;65/65%;66/66%;67/67%;68/68%;69/69%;70/70%;71/71%;72/72%;73/73%;74/74%;75/75%;76/76%;77/77%;78/78%;79/79%;80/80%;
;81/81%;82/82%;83/83%;84/84%;85/85%;86/86%;87/87%;88/88%;89/89%;90/90%;91/91%;92/92%;93/93%;94/94%;95/95%;96/96%;97/97%;98/98%;100/100%">Night brightness</th>
<th class="header brightnessLoading translate" data-name="loadingLowering" data-default="10" data-type="select" data-options="0/0%;1/1%;2/2%;3/3%;4/4%;5/5%;6/6%;7/7%;8/8%;9/9%;10/10%;11/11%;12/12%;13/13%;14/14%;15/15%;16/16%;17/17%;18/18%;19/19%;20/20%;
;21/21%;22/22%;23/23%;24/24%;25/25%;26/26%;27/27%;28/28%;29/29%;30/30%;31/31%;32/32%;33/33%;34/34%;35/35%;36/36%;37/37%;38/38%;39/39%;40/40%;
;41/41%;42/42%;43/43%;44/44%;45/45%;46/46%;47/47%;48/48%;49/49%;50/50%;51/51%;52/52%;53/53%;54/54%;55/55%;56/56%;57/57%;58/58%;59/59%;60/60%;
;61/61%;62/62%;63/63%;64/64%;65/65%;66/66%;67/67%;68/68%;69/69%;70/70%;71/71%;72/72%;73/73%;74/74%;75/75%;76/76%;77/77%;78/78%;79/79%;80/80%;
;81/81%;82/82%;83/83%;84/84%;85/85%;86/86%;87/87%;88/88%;89/89%;90/90%;91/91%;92/92%;93/93%;94/94%;95/95%;96/96%;97/97%;98/98%;100/100%">lowering when loading</th>
<th class="header brightnessEnabled translate " data-default="true" data-type="checkbox" data-name="enabledBrightness">enabled</th>
<th class="header Delete translate" data-buttons="delete">delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- end brightness table -->
</div>
<!-- end Tab with id "tab-brightness" -->
<!-- Tab with id "tab-screen"-->
<div id="tab-screen" class="col s12">
<div class="row">
<!-- select screen active -->
<div class="input-field col s3 selectScreenSaver">
<select class="value" autofocus="autofocus" data-default="false" id="screenSaverON">
<option class="translate" value="true">Screensaver on</option>
<option class="translate" value="false" selected>Screensaver off</option>
</select>
<label for="screenSaverON"></label>
</div>