You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							1112 lines
						
					
					
						
							45 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							1112 lines
						
					
					
						
							45 KiB
						
					
					
				| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
|     <title>ESPuino-Konfiguration</title> | |
|     <meta charset="utf-8"> | |
|     <meta name="viewport" content="width=device-width, initial-scale=1"> | |
|     <link rel="shortcut icon" type="image/x-icon" href="https://espuino.de/espuino/favicon.ico"> | |
|     <link rel="stylesheet" href="https://espuino.de/espuino/css/bootstrap.min.css"> | |
|     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/> | |
|     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/> | |
|     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/> | |
|     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" /> | |
|     <script src="https://espuino.de/espuino/js/jquery.min.js"></script> | |
|     <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> | |
|     <script src="https://espuino.de/espuino/js/popper.min.js"></script> | |
|     <script src="https://espuino.de/espuino/js/bootstrap.min.js"></script> | |
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> | |
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> | |
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script> | |
|     <style type="text/css"> | |
|         .filetree { | |
|             border: 1px solid black; | |
|             height: 200px; | |
|             margin: 0em 0em 1em 0em; | |
|             overflow-y: scroll; | |
|         } | |
|         .slider.slider-horizontal { | |
|             width: 60%; | |
|             margin-left: 1em; | |
|             margin-right: 1em; | |
| 
 | |
|         } | |
|         .slider-handle{ | |
|             height: 30px; | |
|             width: 30px; | |
|             top: -5px; | |
|         } | |
| 
 | |
|         legend.scheduler-border { | |
|             width:inherit; /* Or auto */ | |
|             padding:0 10px; /* To give a bit of padding on the left and right */ | |
|             border-bottom:none; | |
|         } | |
| 
 | |
|         .icon-pos{ | |
|             top: 0.3em; | |
|             position: relative; | |
|          } | |
|         .reboot{ | |
|             color:white; | |
|         } | |
|         .reboot:hover{ | |
|             color: orange; | |
|         } | |
| 
 | |
|         .fa-sync:hover { | |
|             color: #666666; | |
|         } | |
| 
 | |
|         .clickForRefresh { | |
|             text-align: center; | |
|             color: gray; | |
|             cursor: pointer; | |
|             margin-top: 5em; | |
|         } | |
| 
 | |
|         .clickForRefresh:hover { | |
|             color: darkgray; | |
|         } | |
| 
 | |
|         .filetree-container { | |
|             position: relative; | |
|         } | |
| 
 | |
|         .indexing-progress { | |
|             width: 100%; | |
|             height: 100%; | |
|             position: absolute; | |
|             top: 0; | |
|             left: 0; | |
|             opacity: 0.7; | |
|             display: none; | |
|         } | |
| 
 | |
|         .refreshAction{ | |
|             text-align: right; | |
|             font-size: 0.8em; | |
|         } | |
| 
 | |
|         .refreshAction:hover{ | |
|             cursor: pointer; | |
|             color: darkgray; | |
|         } | |
| 
 | |
|         .overlay { | |
|             z-index: 9; | |
|             opacity: 0.8; | |
|             background: #1a1919; | |
|             height: 200px; | |
|             display: none; | |
|             width: 100%; | |
|         } | |
| 
 | |
|         #SubTabContent.tab-content { | |
|             display: flex; | |
|         } | |
| 
 | |
|         #SubTabContent.tab-content > .tab-pane { | |
|             display: block; /* undo "display: none;" */ | |
|             visibility: hidden; | |
|             margin-right: -100%; | |
|             width: 100%; | |
|         } | |
| 
 | |
|         #SubTabContent.tab-content > .active { | |
|             visibility: visible; | |
|         } | |
| 
 | |
|         /* IOS display fix */ | |
|         select { | |
|             -webkit-appearance: none; | |
|             -moz-appearance: none; | |
|             appearance: none; | |
|             background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAAAAADhgtq/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAR0lEQVR4nGP5z4ADsOCSGOoyC+NRabjMQqjQQrgUTCYeIrQQyEI3DSyFJIHkApAUkgSy21B0oLo6fiGSBKp/kCUGU4hSRQYAYg0Rw+gGlUQAAAAASUVORK5CYII=') no-repeat; | |
|             background-position: center right; | |
|         } | |
|     </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> | |
|     <div class="col-md-12"> | |
|     <a class="float-left navbar-brand"> | |
|         <img src="https://www.espuino.de/espuino/Espuino32.png" | |
|              width="35" height="35" class="d-inline-block align-top" alt=""/> | |
|         ESPuino | |
|     </a> | |
|     <a class="reboot float-right nav-link" href="/restart"><i class="fas fa-redo"></i> Neustart</a> | |
|     <a class="reboot float-right nav-link" href="/shutdown"><i class="fas fa-power-off"></i> Ausschalten</a> | |
|     <a class="reboot float-right nav-link" href="/log"><i class="fas fa-book"></i> Log</a> | |
|     </div> | |
| </nav> | |
| <br/> | |
|     <nav> | |
|         <div class="container nav nav-tabs" id="nav-tab" role="tablist"> | |
|             <a class="nav-item nav-link" id="nav-control-tab" data-toggle="tab" href="#nav-control" role="tab" aria-controls="nav-control" aria-selected="false"><i class="fas fa-gamepad"></i><span class=".d-sm-none .d-md-block"> Steuerung</span></a> | |
|             <a class="nav-item nav-link active" id="nav-rfid-tab" data-toggle="tab" href="#nav-rfid" role="tab" aria-controls="nav-rfid" aria-selected="true"><i class="fas fa-dot-circle"></i> RFID</a> | |
|             <a class="nav-item nav-link" id="nav-wifi-tab" data-toggle="tab" href="#nav-wifi" role="tab" aria-controls="nav-wifi" aria-selected="false"><i class="fas fa-wifi"></i><span class=".d-sm-none .d-md-block"> WLAN</span></a> | |
|             %SHOW_MQTT_TAB% | |
|             %SHOW_FTP_TAB% | |
|             <a class="nav-item nav-link" id="nav-general-tab" data-toggle="tab" href="#nav-general" role="tab" aria-controls="nav-general" aria-selected="false"><i class="fas fa-sliders-h"></i> Allgemein</a> | |
|             <a class="nav-item nav-link" id="nav-tools-tab" data-toggle="tab" href="#nav-tools" role="tab" aria-controls="nav-tools" aria-selected="false"><i class="fas fa-wrench"></i> Tools</a> | |
|             <a class="nav-item nav-link" id="nav-forum-tab" data-toggle="tab" href="#nav-forum" role="tab" aria-controls="nav-forum" aria-selected="false"><i class="fas fa-comment"></i><span class=".d-sm-none .d-md-block"> Forum</span></a> | |
|         </div> | |
|     </nav> | |
| <br> | |
| <div class="tab-content" id="nav-tabContent"> | |
|     <div class="tab-pane fade" id="nav-wifi" role="tabpanel" aria-labelledby="nav-wifi-tab"> | |
|         <div class="container" id="wifiConfig"> | |
|             <form action="#wifiConfig" method="POST" onsubmit="wifiConfig('wifiConfig'); return false"> | |
|                 <div class="form-group col-md-12"> | |
|                     <legend>WLAN-Einstellungen</legend> | |
|                     <label for="ssid">WLAN-Name (SSID):</label> | |
|                     <input type="text" class="form-control" id="ssid" placeholder="SSID" name="ssid" required> | |
|                     <div class="invalid-feedback"> | |
|                         Bitte SSID des WLANs eintragen. | |
|                     </div> | |
|                     <label for="pwd">Passwort:</label> | |
|                     <input type="password" class="form-control" id="pwd" placeholder="Passwort" name="pwd" required> | |
|                     <label for="hostname">ESPuino-Name (Hostname):</label> | |
|                     <input type="text" class="form-control" id="hostname" placeholder="espuino" name="hostname" | |
|                            value="%HOSTNAME%" pattern="^[^-\.]{2,32}" required> | |
|                 </div> | |
|                 <br> | |
|                 <div class="text-center"> | |
|                 <button type="reset" class="btn btn-secondary">Reset</button> | |
|                 <button type="submit" class="btn btn-primary">Absenden</button> | |
|                 </div> | |
|             </form> | |
|         </div> | |
|     </div> | |
|     <div class="tab-pane fade" id="nav-control" role="tabpanel" aria-labelledby="nav-control-tab"> | |
|         <div class="container" id="navControl"> | |
|                 <div class="form-group col-md-12"> | |
|                     <legend>Steuerung</legend> | |
|                     <div class="buttons"> | |
|                         <button type="button" class="btn btn-default btn-lg" onclick="sendControl(173)"> | |
|                             <span class="fas fa-fast-backward"></span> | |
|                         </button> | |
|                         <button type="button" class="btn btn-default btn-lg" onclick="sendControl(171)"> | |
|                             <span class="fas fa-backward"></span> | |
|                         </button> | |
|                         <button type="button" class="btn btn-default btn-lg" onclick="sendControl(170)"> | |
|                             <i class="fas fa-pause"></i> | |
|                         </button> | |
|                         <button type="button" class="btn btn-default btn-lg" onclick="sendControl(172)"> | |
|                             <span class="fas fa-forward"></span> | |
|                         </button> | |
|                         <button type="button" class="btn btn-default btn-lg" onclick="sendControl(174)"> | |
|                             <span class="fas fa-fast-forward"></span> | |
|                         </button> | |
|                     </div> | |
|                 </div> | |
|                 <br> | |
|                 <div class="form-group col-md-12"> | |
|                     <legend>Lautstärke</legend> | |
|                         <i class="fas fa-volume-down fa-2x .icon-pos"></i> <input data-provide="slider" type="number" data-slider-min="1" data-slider-max="21" min="1" max="21" class="form-control" id="setVolume" | |
|                             data-slider-value="%CURRENT_VOLUME%" value="%CURRENT_VOLUME%" onchange="sendVolume(this.value)">  <i class="fas fa-volume-up fa-2x .icon-pos"></i> | |
|                 </div> | |
|                 <br/> | |
|         </div> | |
|     </div> | |
|     <div class="tab-pane fade show active" id="nav-rfid" role="tabpanel" aria-labelledby="nav-rfid-tab"> | |
|         <div class="container" id="filetreeContainer"> | |
|             <fieldset> | |
|                 <legend>Dateien</legend> | |
| 				<div class="filetree-container"> | |
| 				<div id="filebrowser"> | |
| 					<div class="filetree demo" id="explorerTree"></div> | |
| 				</div> | |
| 				<div> | |
| 					<form id="explorerUploadForm" method="POST" enctype="multipart/form-data" action="/explorer"> | |
|                         <div class="input-group"> | |
|                             <span class="form-control" id="uploaded_file_text"></span> | |
|                             <span class="input-group-btn"> | |
|                                 <span class="btn btn-secondary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span> | |
|                                 <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').submit();">Upload</span> | |
|                                 <input name="uploaded_file" id ="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file" multiple> | |
|                             </span> | |
|                         </div> | |
|                     </form> | |
|                     <br> | |
|                     <div class="progress"> | |
|                         <div id="explorerUploadProgress" class="progress-bar" role="progressbar" ></div> | |
|                     </div> | |
|                 </div> | |
|                 <br> | |
| 				</div> | |
|             </fieldset> | |
|         </div> | |
|         <div class="container" id="rfidMusicTags"> | |
|             <fieldset> | |
|                 <legend>RFID-Zuweisungen</legend> | |
|             <form action="#rfidMusicTags" method="POST" onsubmit="rfidAssign('rfidMusicTags'); return false"> | |
|                 <div class="form-group col-md-12"> | |
|                     <label for="rfidIdMusic">RFID-Chip-Nummer (12-stellig)</label> | |
|                     <input type="text" class="form-control" id="rfidIdMusic" maxlength="12" pattern="[0-9]{12}" | |
|                            placeholder="%RFID_TAG_ID%" name="rfidIdMusic" required> | |
|                     <br> | |
|                     <ul class="nav nav-tabs" id="SubTab" role="tablist"> | |
|                         <li class="nav-item"> | |
|                             <a class="nav-link active" id="rfid-music-tab" data-toggle="tab" href="#rfidmusic" role="tab"><i class="fas fa-music"></i> Musik</a> | |
|                         </li> | |
|                         <li class="nav-item"> | |
|                             <a class="nav-link" id="rfid-mod-tab" data-toggle="tab" href="#rfidmod" role="tab"><i class="fas fa-cog"></i> Modifikation</a> | |
|                         </li> | |
|                     </ul> | |
|                     <div class="tab-content" id="SubTabContent"> | |
|                         <div class="tab-pane show active" id="rfidmusic" role="tabpanel"> | |
|                             <br> | |
|                             <label for="fileOrUrl">Datei, Verzeichnis oder URL (^ und # als Zeichen nicht erlaubt)</label> | |
|                             <input type="text" class="form-control" id="fileOrUrl" maxlength="255" placeholder="z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3" pattern="^[^\^#]+$" name="fileOrUrl" required> | |
|                             <label for="playMode">Abspielmodus</label> | |
|                             <select class="form-control" id="playMode" name="playMode"> | |
|                                 <option class="placeholder" disabled selected value="">Modus auswählen</option> | |
|                                 <option class="option-file" value="1">Einzelner Titel</option> | |
|                                 <option class="option-file" value="2">Einzelner Titel (Endlosschleife)</option> | |
|                                 <option class="option-file-and-folder" value="3">Hörbuch</option> | |
|                                 <option class="option-file-and-folder" value="4">Hörbuch (Endlosschleife)</option> | |
|                                 <option class="option-folder" value="5">Alle Titel eines Verzeichnis (sortiert)</option> | |
|                                 <option class="option-folder" value="6">Alle Titel eines Verzeichnis (zufällig)</option> | |
|                                 <option class="option-folder" value="7">Alle Titel eines Verzeichnis (sortiert, Endlosschleife)</option> | |
|                                 <option class="option-folder" value="9">Alle Titel eines Verzeichnis (zufällig, Endlosschleife)</option> | |
|                                 <option class="option-stream" value="8">Webradio</option> | |
|                             </select> | |
|                         </div> | |
|                         <div class="tab-pane " id="rfidmod" role="tabpanel"> | |
|                             <label for="modId"></label> | |
|                             <select class="form-control" id="modId" name="modId"> | |
|                                 <option class="placeholder" disabled selected value="">Modifikation auswählen</option> | |
|                                 <option value="100">Tastensperre</option> | |
|                                 <option value="101">Schlafen nach 15 Minuten</option> | |
|                                 <option value="102">Schlafen nach 30 Minuten</option> | |
|                                 <option value="103">Schlafen nach 1 Stunde</option> | |
|                                 <option value="104">Schlafen nach 2 Stunden</option> | |
|                                 <option value="105">Schlafen nach Ende des Titels</option> | |
|                                 <option value="106">Schlafen nach Ende der Playlist</option> | |
|                                 <option value="107">Schlafen nach fünf Titeln</option> | |
|                                 <option value="110">Wiederhole Playlist (endlos)</option> | |
|                                 <option value="111">Wiederhole Titel (endlos)</option> | |
|                                 <option value="120">Dimme LEDs (Nachtmodus)</option> | |
|                                 <option value="130">Aktiviere/deaktive WLAN</option> | |
|                                 <option value="140">Aktiviere/deaktiviere Bluetooth</option> | |
|                                 <option value="150">Aktiviere FTP</option> | |
|                                 <option value="0">Lösche Zuordnung</option> | |
|                             </select> | |
|                         </div> | |
|                     </div> | |
|                 </div> | |
|                 <br> | |
|                 <div class="text-center"> | |
|                 <button type="reset" class="btn btn-secondary">Reset</button> | |
|                 <button type="submit" class="btn btn-primary">Absenden</button> | |
|                 </div> | |
|             </form> | |
|             </fieldset> | |
|         </div> | |
|         <br /> | |
|     </div> | |
|     <div class="tab-pane fade" id="nav-mqtt" role="tabpanel" aria-labelledby="nav-mqtt-tab"> | |
|         <div class="container" id="mqttConfig"> | |
| 
 | |
|             <form class="needs-validation" action="#mqttConfig" method="POST" | |
|                   onsubmit="mqttSettings('mqttConfig'); return false"> | |
|                 <div class="form-check col-md-12"> | |
|                     <legend>MQTT-Einstellungen</legend> | |
|                     <input class="form-check-input" type="checkbox" value="1" id="mqttEnable" name="mqttEnable" %MQTT_ENABLE%> | |
|                     <label class="form-check-label" for="mqttEnable"> | |
|                         MQTT aktivieren | |
|                     </label> | |
|                 </div> | |
|                 <div class="form-group my-2 col-md-12"> | |
|                     <label for="mqttServer">MQTT-Server</label> | |
|                     <input type="text" class="form-control" id="mqttServer" minlength="7" maxlength="%MQTT_SERVER_LENGTH%" | |
|                            placeholder="z.B. 192.168.2.89" name="mqttServer" value="%MQTT_SERVER%"> | |
|                     <label for="mqttUser">MQTT-Benutzername (optional):</label> | |
|                     <input type="text" class="form-control" id="mqttUser" maxlength="%MQTT_USER_LENGTH%" | |
|                            placeholder="Benutzername" name="mqttUser" value="%MQTT_USER%"> | |
|                     <label for="mqttPwd">MQTT-Passwort (optional):</label> | |
|                     <input type="password" class="form-control" id="mqttPwd" maxlength="%MQTT_PWD_LENGTH%" | |
|                            placeholder="Passwort" name="mqttPwd" value="%MQTT_PWD%"> | |
|                     <label for="mqttPort">MQTT-Port:</label> | |
|                     <input type="number" class="form-control" id="mqttPort" min="1" max="65535" | |
|                             placeholder="Port" name="mqttPort" value="%MQTT_PORT%" required> | |
|                 </div> | |
|                 <br> | |
|                 <div class="text-center"> | |
|                 <button type="reset" class="btn btn-secondary">Reset</button> | |
|                 <button type="submit" class="btn btn-primary">Absenden</button> | |
|                 </div> | |
|             </form> | |
|         </div> | |
|     </div> | |
|     <div class="tab-pane fade" id="nav-ftp" role="tabpanel" aria-labelledby="nav-ftp-tab"> | |
|         <div class="container" id="ftpConfig"> | |
| 
 | |
|             <form action="#ftpConfig" method="POST" onsubmit="ftpSettings('ftpConfig'); return false"> | |
|                 <div class="form-group col-md-12"> | |
|                     <legend>FTP-Einstellungen</legend> | |
|                     <label for="ftpUser">FTP-Benutzername:</label> | |
|                     <input type="text" class="form-control" id="ftpUser" maxlength="%FTP_USER_LENGTH%" | |
|                            placeholder="Benutzername" name="ftpUser" value="%FTP_USER%" required> | |
|                     <label for="pwd">FTP-Passwort:</label> | |
|                     <input type="password" class="form-control" id="ftpPwd" maxlength="%FTP_PWD_LENGTH%" placeholder="Passwort" | |
|                            name="ftpPwd" value="%FTP_PWD%" required> | |
|                 </div> | |
|                 <br> | |
|                 <div class="text-center"> | |
|                 <button type="reset" class="btn btn-secondary">Reset</button> | |
|                 <button type="submit" class="btn btn-primary">Absenden</button> | |
|                 </div> | |
|             </form> | |
|         </div> | |
|     </div> | |
| 
 | |
|     <div class="tab-pane fade" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab"> | |
|         <div class="container" id="generalConfig"> | |
| 
 | |
|             <form action="#generalConfig" method="POST" onsubmit="genSettings('generalConfig'); return false"> | |
|                     <div class="form-group col-md-12"> | |
|                     <fieldset> | |
|                             <legend class="w-auto">Lautstärke</legend> | |
|                     <label for="initialVolume">Nach dem Einschalten</label> | |
|                         <div class="text-center"> | |
|                     <i class="fas fa-volume-down fa-2x .icon-pos"></i> <input data-provide="slider" type="number" data-slider-min="1" data-slider-max="21" min="1" max="21" class="form-control" id="initialVolume" name="initialVolume" | |
|                         data-slider-value="%INIT_VOLUME%"  value="%INIT_VOLUME%" required>  <i class="fas fa-volume-up fa-2x .icon-pos"></i></div> | |
|                         <br> | |
|                     <label for="maxVolumeSpeaker">Maximal (Lautsprecher)</label> | |
|                         <div class="text-center"> | |
|                      <i class="fas fa-volume-down fa-2x .icon-pos"></i>   <input data-provide="slider" type="number" data-slider-min="1" data-slider-max="21" min="1" max="21" class="form-control" id="maxVolumeSpeaker" name="maxVolumeSpeaker" | |
|                         data-slider-value="%MAX_VOLUME_SPEAKER%"  value="%MAX_VOLUME_SPEAKER%" required>  <i class="fas fa-volume-up fa-2x .icon-pos"></i> | |
|                         </div> | |
|                         <br> | |
|                     <label for="maxVolumeHeadphone">Maximal (Kopfhörer)</label> | |
|                         <div class="text-center"> | |
|                     <i class="fas fa-volume-down fa-2x .icon-pos"></i> <input data-provide="slider" type="number" data-slider-min="1" data-slider-max="21" min="1" max="21" class="form-control" id="maxVolumeHeadphone" name="maxVolumeHeadphone" | |
|                          data-slider-value="%MAX_VOLUME_HEADPHONE%" value="%MAX_VOLUME_HEADPHONE%" required>  <i class="fas fa-volume-up fa-2x .icon-pos"></i> | |
|                         </div> | |
|                 </fieldset> | |
|                 </div> | |
|                 <br> | |
|                 <div class="form-group col-md-12"> | |
|                     <fieldset > | |
|                         <legend class="w-auto">Neopixel (Helligkeit)</legend> | |
|                     <label for="initBrightness">Nach dem Einschalten:</label> | |
|                         <div class="text-center"> | |
|                             <i class="far fa-sun fa-2x .icon-pos"></i> | |
|                         <input data-provide="slider" type="number" data-slider-min="0" data-slider-max="255" min="0" max="255" class="form-control" id="initBrightness" name="initBrightness" | |
|                                data-slider-value="%INIT_LED_BRIGHTNESS%"  value="%INIT_LED_BRIGHTNESS%" required><i class="fas fa-sun fa-2x .icon-pos"></i> | |
|                         </div> | |
| 
 | |
|                     <label for="nightBrightness">Im Nachtmodus</label> | |
|                         <div class="text-center"> | |
|                         <i class="far fa-sun fa-2x .icon-pos"></i><input data-provide="slider" type="number" data-slider-min="0" data-slider-max="255" min="0" max="255" class="form-control" id="nightBrightness" name="nightBrightness" data-slider-value="%NIGHT_LED_BRIGHTNESS%" value="%NIGHT_LED_BRIGHTNESS%" required><i class="fas fa-sun fa-2x .icon-pos"></i> | |
|                         </div> | |
|                     </fieldset> | |
|                 </div> | |
| <br> | |
|                 <div class="form-group col-md-12"> | |
|                     <fieldset> | |
|                         <legend>Deep Sleep</legend> | |
| 
 | |
|                         <label for="inactivityTime">Inaktivität nach (in Minuten)</label> | |
|                         <div class="text-center"><i class="fas fa-hourglass-start fa-2x .icon-pos"></i> <input type="number" data-provide="slider" data-slider-min="0" data-slider-max="30" min="1" max="120" class="form-control" id="inactivityTime" name="inactivityTime" | |
|                          data-slider-value="%MAX_INACTIVITY%"  value="%MAX_INACTIVITY%" required><i class="fas fa-hourglass-end fa-2x .icon-pos"></i></div> | |
|                     </fieldset> | |
|                 </div> | |
| <br> | |
| 
 | |
|                 <div class="form-group col-md-12"> | |
|                     <fieldset> | |
|                         <legend>Batterie</legend> | |
|                     <div>Status über Neopixel anzeigen</div> | |
|                         <br> | |
|                     <label for="warningLowVoltage">Unter dieser Spannung wird eine Warnung angezeigt. | |
|                     </label> | |
|                         <div class="text-center"> | |
|                         <i class="fas fa-battery-quarter fa-2x .icon-pos"></i> <input  data-provide="slider"  data-slider-step="0.1" data-slider-min="3.0" data-slider-max="5.0"  min="3.0" max="5.0" type="text" class="form-control" id="warningLowVoltage" name="warningLowVoltage" | |
|                         data-slider-value="%WARNING_LOW_VOLTAGE%" value="%WARNING_LOW_VOLTAGE%" pattern="^\d{1,2}(\.\d{1,3})?" required> <i class="fas fa-battery-three-quarters fa-2x .icon-pos" fa-2x .icon-pos></i> | |
|                         </div> | |
| <br> | |
|                     <label for="voltageIndicatorLow">Eine LED leuchtet bei dieser Spannung | |
|                         </label> | |
|                         <div class="text-center"> | |
|                         <i class="fas fa-battery-quarter fa-2x .icon-pos"></i> <input data-provide="slider" min="2.0" data-slider-step="0.1" data-slider-min="2.0" data-slider-max="5.0" max="5.0" type="text" class="form-control" id="voltageIndicatorLow" name="voltageIndicatorLow" | |
|                           data-slider-value="%VOLTAGE_INDICATOR_LOW%"  value="%VOLTAGE_INDICATOR_LOW%" pattern="^\d{1,2}(\.\d{1,3})?" required> <i class="fas fa-battery-three-quarters fa-2x .icon-pos" fa-2x .icon-pos></i> | |
|                         </div> | |
|                         <br> | |
|                         <label for="voltageIndicatorHigh">Alle LEDs leuchten bei dieser Spannung</label> | |
| 
 | |
|                             <div class="text-center"> | |
|                                 <i class="fas fa-battery-quarter fa-2x .icon-pos"></i><input data-provide="slider" data-slider-step="0.1"  data-slider-min="2.0" data-slider-max="5.0" min="2.0" max="5.0" type="text" class="form-control" id="voltageIndicatorHigh" name="voltageIndicatorHigh" | |
|                            data-slider-value="%VOLTAGE_INDICATOR_HIGH%"  value="%VOLTAGE_INDICATOR_HIGH%" pattern="^\d{1,2}(\.\d{1,3})?" required> <i class="fas fa-battery-three-quarters fa-2x .icon-pos" fa-2x .icon-pos></i> | |
|                         </div> | |
| 
 | |
|                         <br> | |
|                     <label for="voltageCheckInterval">Zeitabstand der Messung (in Minuten)</label> | |
|                         <div class="text-center"><i class="fas fa-hourglass-start fa-2x .icon-pos"></i> | |
|                             <input data-provide="slider" data-slider-min="1" data-slider-max="60" type="number" min="1" max="60" class="form-control" id="voltageCheckInterval" | |
|                                    data-slider-value="%VOLTAGE_CHECK_INTERVAL%"  name="voltageCheckInterval" value="%VOLTAGE_CHECK_INTERVAL%" required><i class="fas fa-hourglass-end fa-2x .icon-pos"></i> | |
|                     </div> | |
| 
 | |
|                     </fieldset> | |
|                 </div> | |
| <br> | |
|                 <div class="text-center"> | |
|                 <button type="reset" class="btn btn-secondary">Reset</button> | |
|                 <button type="submit" class="btn btn-primary">Absenden</button> | |
|                 </div> | |
|             </form> | |
|         </div> | |
|         <br /> | |
|     </div> | |
|     <div class="tab-pane fade" id="nav-tools" role="tabpanel" aria-labelledby="nav-tools-tab"> | |
|         <div class="container" id="importNvs"> | |
|             <legend>NVS-Importer</legend> | |
|             <form action="/upload" enctype="multipart/form-data" method="POST"> | |
|                 <div class="form-group"> | |
|                     <label for="nvsUpload">Hier kann eine Backup-Datei importiert werden.</label> | |
|                     <input type="file" class="form-control-file" id="nvsUpload" name="nvsUpload" accept=".txt"> | |
|                 </div> | |
|                 <button type="submit" class="btn btn-primary">Absenden</button> | |
|             </form> | |
|         </div> | |
|     </div> | |
|     <div class="tab-pane fade" id="nav-forum" role="tabpanel" aria-labelledby="nav-forum-tab"> | |
|         <div class="container" id="forum"> | |
|             <legend>Forum</legend> | |
|             <p>Du hast Probleme mit ESPuino oder bist an einem Erfahrungsaustausch interessiert?<br /> | |
|                 Dann schaue doch mal im <a href="https://forum.espuino.de" target="_blank">ESPuino-Forum</a> vorbei! Insbesondere gibt es dort auch einen<br /> | |
|                 <a href="https://forum.espuino.de/c/dokumentation/anleitungen/10" target="_blank">Bereich</a>, in dem reichlich Dokumentation hinterlegt ist. Wir freuen uns auf deinen Besuch! | |
|             </p> | |
|         </div> | |
|     </div> | |
| </div> | |
| <script type="text/javascript"> | |
|     var DEBUG = false; | |
|     var lastIdclicked = ''; | |
|     var ActiveSubTab = 'rfid-music-tab'; | |
|     var host = $(location).attr('hostname'); | |
| 
 | |
|     /* show active / selected tab */ | |
|     $('#SubTab.nav-tabs a').on('shown.bs.tab', function (e) { | |
|         ActiveSubTab = $(e.target).attr('id'); | |
|         console.log ( ActiveSubTab); | |
|         if (ActiveSubTab == 'rfid-music-tab') { | |
|             document.getElementById("fileOrUrl").required = true; | |
|         } else { | |
|             document.getElementById("fileOrUrl").required = false; | |
|         } | |
| }); | |
| 
 | |
|     if (DEBUG) { | |
|         host = "192.168.178.114"; | |
|     } | |
| 
 | |
|     toastr.options = { | |
|         "closeButton": false, | |
|         "debug": false, | |
|         "newestOnTop": false, | |
|         "progressBar": false, | |
|         "positionClass": "toast-top-right", | |
|         "preventDuplicates": false, | |
|         "onclick": null, | |
|         "showDuration": "300", | |
|         "hideDuration": "1000", | |
|         "timeOut": "5000", | |
|         "extendedTimeOut": "1000", | |
|         "showEasing": "swing", | |
|         "hideEasing": "linear", | |
|         "showMethod": "fadeIn", | |
|         "hideMethod": "fadeOut" | |
|     }; | |
| 
 | |
|     function postRendering(event, data) { | |
|         Object.keys(data.instance._model.data).forEach(function (key, index) { | |
| 
 | |
|             var cur = data.instance.get_node(data.instance._model.data[key]); | |
|             var lastFolder = cur['id'].split('/').filter(function (el) { | |
|                 return el.trim().length > 0; | |
|             }).pop(); | |
|             if ((/\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|flac|FLAC|m4a|M4A)$/i).test(lastFolder)) { | |
|                 data.instance.set_type(data.instance._model.data[key], 'audio'); | |
|             } else { | |
|                 if (data.instance._model.data[key]['type'] == "file") { | |
|                     data.instance.disable_node(data.instance._model.data[key]); | |
|                 } | |
|             } | |
|             data.instance.rename_node(data.instance._model.data[key], lastFolder); | |
|         }); | |
|     } | |
| 
 | |
|     /* File Explorer functions begin*/ | |
|     var lastSelectedNodePath = ""; | |
| 
 | |
|     $('#explorerTree').on('select_node.jstree', function (e, data) { | |
| 
 | |
|         $('input[name=fileOrUrl]').val(data.node.data.path); | |
| 
 | |
|         if (ActiveSubTab !== 'rfid-music-tab') { | |
|             $('#SubTab.nav-tabs a[id="rfid-music-tab"]').tab('show'); | |
|         } | |
| 
 | |
|         if (data.node.type == "folder") { | |
|             $('.option-folder').show(); | |
|             $('.option-file').hide(); | |
|             $('#playMode option').removeAttr('selected').filter('[value=3]').attr('selected', true); | |
|         } | |
| 
 | |
|         if (data.node.type == "audio") { | |
|             $('.option-file').show(); | |
|             $('.option-folder').hide(); | |
|             $('#playMode option').removeAttr('selected').filter('[value=1]').attr('selected', true); | |
|         } | |
| 
 | |
|         if(lastSelectedNodePath != data.node.data.path) { | |
|             if (data.node.data.directory) { | |
| 
 | |
|                 var ref = $('#explorerTree').jstree(true), | |
|                     sel = ref.get_selected(); | |
|                 if(!sel.length) { return false; } | |
|                 sel = sel[0]; | |
|                 var children = $("#explorerTree").jstree("get_children_dom",sel); | |
|                 /* refresh only, when there is no child -> possible not yet updated */ | |
|                 if(children.length < 1){ | |
|                     refreshNode(sel); | |
|                 } | |
| 
 | |
|             } | |
|          lastSelectedNodePath = data.node.data.path; | |
|         } | |
| 
 | |
| 
 | |
|     }); | |
| 
 | |
| 	function doRest(path, callback, obj) { | |
| 		obj.url      = path; | |
| 		obj.dataType = "json"; | |
| 		obj.contentType= "application/json;charset=IBM437", | |
|         obj.scriptCharset= "IBM437", | |
|         obj.success  = function(data, textStatus, jqXHR) { | |
| 			if (callback) { | |
| 				callback(data); | |
| 			} | |
| 		}; | |
| 		obj.error    = function(jqXHR, textStatus, errorThrown) { | |
| 			console.log("AJAX error"); | |
| 			/*debugger; */ | |
| 		}; | |
| 		jQuery.ajax(obj); | |
| 	} /* doRest */ | |
| 
 | |
| 	function getData(path, callback) { | |
| 		doRest(path, callback, { | |
| 			method   : "GET" | |
| 		}); | |
| 	} /* getData */ | |
| 
 | |
| 	function deleteData(path, callback, _data) { | |
| 		doRest(path, callback, { | |
| 			method   : "DELETE", | |
| 			data: _data | |
| 		}); | |
| 	} /* deleteData */ | |
| 
 | |
| 	function patchData(path, callback, _data) { | |
| 		doRest(path, callback, { | |
| 			method   : "PATCH", | |
| 			data: _data | |
| 		}); | |
| 	} /* patchData */ | |
| 
 | |
| 	function postData(path, callback, _data) { | |
| 		doRest(path, callback, { | |
| 			method   : "POST", | |
| 			data: _data | |
| 		}); | |
| 	} /* postData */ | |
| 
 | |
| 
 | |
| 	function putData(path, callback, _data) { | |
| 		doRest(path, callback, { | |
| 			method   : "PUT", | |
| 			data: _data | |
| 		}); | |
| 	} /* putData */ | |
| 
 | |
| 
 | |
| 	/* File Upload */ | |
| 	$('#explorerUploadForm').submit(function(e){ | |
| 		e.preventDefault(); | |
| 		console.log("Upload!"); | |
| 		var data = new FormData(this); | |
| 
 | |
| 		var ref = $('#explorerTree').jstree(true), | |
| 			sel = ref.get_selected(), | |
| 			path = "/"; | |
|         if(!sel.length) { alert("Please select the upload location!");return false; } | |
|         if(!document.getElementById('uploaded_file').files.length > 0) { alert("Please select files to upload!");return false; } | |
| 		sel = sel[0]; | |
| 		selectedNode = ref.get_node(sel); | |
| 		if(selectedNode.data.directory){ | |
| 			path = selectedNode.data.path | |
| 		} else { | |
| 			/* remap sel to parent folder */ | |
| 			sel = ref.get_node(ref.get_parent(sel)); | |
| 			path = parentNode.data.path; | |
| 			console.log("Parent path: " + path); | |
| 		} | |
| 
 | |
| 		$.ajax({ | |
| 			url: '/explorer?path=' + path, | |
|             type: 'POST', | |
|             data: data, | |
|             contentType: false, | |
|             processData:false, | |
| 			xhr: function() { | |
| 				var xhr = new window.XMLHttpRequest(); | |
| 
 | |
| 				xhr.upload.addEventListener("progress", function(evt) { | |
| 				  if (evt.lengthComputable) { | |
| 					var percentComplete = evt.loaded / evt.total; | |
| 					percentComplete = parseInt(percentComplete * 100); | |
|                     console.log(percentComplete); | |
|                     var percent = percentComplete + '%'; | |
|                     $("#explorerUploadProgress").css('width', percent).text(percent); | |
| 				  } | |
| 				}, false); | |
| 
 | |
| 				return xhr; | |
| 			}, | |
| 			success: function(data, textStatus, jqXHR) { | |
|                 console.log("Upload success!"); | |
|                 $("#explorerUploadProgress").text("Upload success!"); | |
|                 document.getElementById('uploaded_file').value = ''; | |
|                 document.getElementById('uploaded_file_text').innerHTML = ''; | |
| 
 | |
| 				getData("/explorer?path=" + path, function(data) { | |
| 					/* We now have data! */ | |
| 					deleteChildrenNodes(sel); | |
| 					addFileDirectory(sel, data); | |
| 					ref.open_node(sel); | |
| 
 | |
| 
 | |
| 				}); | |
| 
 | |
| 			} | |
|         }); | |
| 	}); | |
| 
 | |
| 	/* File Delete */ | |
| 	function handleDeleteData(nodeId) { | |
| 		var ref = $('#explorerTree').jstree(true); | |
| 		var node = ref.get_node(nodeId); | |
| 		console.log("call delete request: " + node.data.path); | |
| 		deleteData("/explorer?path=" + node.data.path); | |
| 	} | |
| 
 | |
| 	function fileNameSort( a, b ) { | |
| 		if ( a.dir && !b.dir ) { | |
| 			return -1 | |
| 		} | |
| 		if ( !a.dir && b.dir ) { | |
| 			return 1 | |
| 		} | |
| 		if ( a.name < b.name ){ | |
| 			return -1; | |
| 		} | |
| 		if ( a.name > b.name ){ | |
| 			return 1; | |
| 		} | |
| 		return 0; | |
| 	} | |
| 
 | |
| 	function createChild(nodeId, data) { | |
| 		var ref = $('#explorerTree').jstree(true); | |
| 		var node = ref.get_node(nodeId); | |
| 		var parentNodePath = node.data.path; | |
| 		/* In case of root node remove leading '/' to avoid '//' */ | |
| 		if(parentNodePath == "/"){ | |
| 			parentNodePath = ""; | |
| 		} | |
| 		var child = { | |
| 			text: data.name, | |
| 			type: getType(data), | |
| 			data: { | |
| 				path: parentNodePath + "/" + data.name, | |
| 				directory: data.dir | |
| 			} | |
| 		}; | |
| 
 | |
| 		return child; | |
| 
 | |
| 	} | |
| 
 | |
| 	function deleteChildrenNodes(nodeId) { | |
| 		var ref = $('#explorerTree').jstree(true); | |
| 		var children = $("#explorerTree").jstree("get_children_dom",nodeId); | |
| 		for(var i=0;i<children.length;i++) | |
| 		{ | |
| 			ref.delete_node(children[i].id); | |
| 		} | |
| 
 | |
| 	} | |
| 
 | |
| 	function refreshNode(nodeId) { | |
| 
 | |
| 		var ref = $('#explorerTree').jstree(true); | |
| 
 | |
| 		var node = ref.get_node(nodeId); | |
| 
 | |
| 		getData("/explorer?path=" + node.data.path, function(data) { | |
| 			/* We now have data! */ | |
| 
 | |
| 			deleteChildrenNodes(nodeId); | |
| 			addFileDirectory(nodeId, data); | |
| 			ref.open_node(nodeId); | |
| 
 | |
| 		}); | |
| 
 | |
| 
 | |
| 	} | |
| 
 | |
| 	function getType(data) { | |
| 		var type = ""; | |
| 
 | |
| 		if(data.dir) { | |
| 			type = "folder"; | |
| 		} else if ((/\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|flac|FLAC)$/i).test(data.name)) { | |
| 			type = "audio"; | |
| 		} else { | |
| 			type = "file"; | |
| 		} | |
| 
 | |
| 		return type; | |
| 	} | |
| 
 | |
| 
 | |
| 	function addFileDirectory(parent, data) { | |
| 
 | |
| 		data.sort( fileNameSort ); | |
| 		var ref = $('#explorerTree').jstree(true); | |
| 
 | |
| 		for (var i=0; i<data.length; i++) { | |
| 			console.log("Create Node"); | |
| 			ref.create_node(parent, createChild(parent, data[i])); | |
| 		} | |
| 	} /* addFileDirectory */ | |
| 
 | |
| 	function buildFileSystemTree(path) { | |
| 
 | |
| 		$('#explorerTree').jstree({ | |
| 				"core" : { | |
| 						"check_callback" : true, | |
| 						'force_text' : true, | |
| 						"themes" : { "stripes" : true }, | |
| 						'data' : {	text: '/', | |
| 									state: { | |
| 										opened: true | |
| 									}, | |
| 									type: 'folder', | |
| 									children: [], | |
| 									data: { | |
| 										path: '/', | |
| 										directory: true | |
| 								}} | |
| 					}, | |
| 					'types': { | |
| 						'folder': { | |
| 							'icon': "fa fa-folder" | |
| 						}, | |
| 						'file': { | |
| 							'icon': "fa fa-file" | |
| 						}, | |
| 						'audio': { | |
| 							'icon': "fa fa-file-audio" | |
| 						}, | |
| 						'default': { | |
| 							'icon': "fa fa-folder" | |
| 						} | |
| 					}, | |
| 				plugins: ["contextmenu", "themes", "types"], | |
| 				contextmenu: { | |
| 					items: function(nodeId) { | |
| 						var ref = $('#explorerTree').jstree(true); | |
| 						var node = ref.get_node(nodeId); | |
| 						var items = {}; | |
| 
 | |
| 
 | |
| 						if (node.data.directory) { | |
| 							items.createDir = { | |
| 								label: "Neuer Ordner", | |
| 								action: function(x) { | |
| 									var childNode = ref.create_node(nodeId, {text: "Neuer Ordner", type: "folder"}); | |
| 									if(childNode) { | |
| 										ref.edit(childNode, null, function(childNode, status){ | |
| 											putData("/explorer?path=" + node.data.path + "/" + childNode.text); | |
| 											refreshNode(nodeId); | |
| 										}); | |
| 									} | |
| 								} | |
| 							}; | |
| 						} | |
| 
 | |
| 						/* Play */ | |
| 						items.play = { | |
| 							label: "Abspielen", | |
| 							action: function(x) { | |
| 								var playMode = node.data.directory?"5":"1"; | |
| 								postData("/exploreraudio?path=" + node.data.path + "&playmode=" + playMode); | |
| 							} | |
| 						}; | |
| 
 | |
| 						/* Refresh */ | |
| 						items.refresh = { | |
| 							label: "Aktualisieren", | |
| 							action: function(x) { | |
| 								refreshNode(nodeId); | |
| 							} | |
| 						}; | |
| 
 | |
| 						/* Delete */ | |
| 						items.delete = { | |
| 							label: "Löschen", | |
| 							action: function(x) { | |
| 								handleDeleteData(nodeId); | |
| 								refreshNode(ref.get_parent(nodeId)); | |
| 							} | |
| 						}; | |
| 
 | |
| 						/* Rename */ | |
| 						items.rename = { | |
| 							label: "Umbenennen", | |
| 							action: function(x) { | |
| 								var srcPath = node.data.path; | |
| 								ref.edit(nodeId, null, function(node, status){ | |
| 									node.data.path = node.data.path.substring(0,node.data.path.lastIndexOf("/")+1) + node.text; | |
| 									patchData("/explorer?srcpath=" + srcPath + "&dstpath=" + node.data.path); | |
| 									refreshNode(ref.get_parent(nodeId)); | |
| 								}); | |
| 							} | |
| 						}; | |
| 
 | |
| 					   return items; | |
| 					} | |
| 				} | |
| 			}); | |
| 
 | |
| 		if (path.length == 0) { | |
| 			return; | |
| 		} | |
| 		getData("/explorer?path=/", function(data) { | |
| 			/* We now have data! */ | |
| 			$('#explorerTree').jstree(true).settings.core.data.children = []; | |
| 
 | |
| 			data.sort( fileNameSort ); | |
| 
 | |
| 
 | |
| 			for (var i=0; i<data.length; i++) { | |
| 				var newChild = { | |
| 					text: data[i].name, | |
| 					type: getType(data[i]), | |
| 					data: { | |
| 						path: "/" + data[i].name, | |
| 						directory: data[i].dir | |
| 					}, | |
| 					children: [] | |
| 				}; | |
| 				$('#explorerTree').jstree(true).settings.core.data.children.push(newChild); | |
| 			} | |
| 
 | |
| 			$("#explorerTree").jstree(true).refresh(); | |
| 
 | |
| 
 | |
| 		}); | |
| 	} /* buildFileSystemTree */ | |
| 
 | |
|     /* File Explorer functions end */ | |
| 
 | |
|     var socket = undefined; | |
|     var tm; | |
| 
 | |
|     function connect() { | |
|         socket = new WebSocket("ws://" + host + "/ws"); | |
| 
 | |
|         socket.onopen = function () { | |
|             setInterval(ping, 15000); | |
|         }; | |
| 
 | |
|         socket.onclose = function (e) { | |
|             console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason); | |
|             socket = null; | |
|             setTimeout(function () { | |
|                 connect(); | |
|             }, 5000); | |
|         }; | |
| 
 | |
|         socket.onerror = function (err) { | |
|             console.error('Socket encountered error: ', err.message, 'Closing socket'); | |
|         }; | |
| 
 | |
|         socket.onmessage = function(event) { | |
|           console.log(event.data); | |
|           var socketMsg = JSON.parse(event.data); | |
|           if (socketMsg.rfidId != null) { | |
|               document.getElementById('rfidIdMusic').value = socketMsg.rfidId; | |
|               toastr.info("RFID Tag mit "+ socketMsg.rfidId + " erkannt." ); | |
|               $("#rfidIdMusic").effect("highlight", {color:"#abf5af"}, 3000); | |
|           } if ("status" in socketMsg) { | |
|               if (socketMsg.status == "ok") { | |
|                   toastr.success("Aktion erfolgreich ausgeführt." ); | |
|               } | |
|           } if ("pong" in socketMsg) { | |
|               if (socketMsg.pong == 'pong') { | |
|                   pong(); | |
|               } | |
|           } | |
|       }; | |
|     } | |
| 
 | |
|     function ping() { | |
|         var myObj = { | |
|             "ping": { | |
|                 ping: 'ping' | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|         tm = setTimeout(function () { | |
|             toastr.warning('Die Verbindung zum ESPuino ist unterbrochen! Bitte Seite neu laden.'); | |
|         }, 5000); | |
|     } | |
| 
 | |
|     function pong() { | |
|         clearTimeout(tm); | |
|     } | |
| 
 | |
|     function genSettings(clickedId) { | |
|         lastIdclicked = clickedId; | |
|         var myObj = { | |
|             "general": { | |
|                 iVol: document.getElementById('initialVolume').value, | |
|                 mVolSpeaker: document.getElementById('maxVolumeSpeaker').value, | |
|                 mVolHeadphone: document.getElementById('maxVolumeHeadphone').value, | |
|                 iBright: document.getElementById('initBrightness').value, | |
|                 nBright: document.getElementById('nightBrightness').value, | |
|                 iTime: document.getElementById('inactivityTime').value, | |
|                 vWarning: document.getElementById('warningLowVoltage').value, | |
|                 vIndLow: document.getElementById('voltageIndicatorLow').value, | |
|                 vIndHi: document.getElementById('voltageIndicatorHigh').value, | |
|                 vInt: document.getElementById('voltageCheckInterval').value | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
| 
 | |
|     function ftpSettings(clickedId) { | |
|         lastIdclicked = clickedId; | |
|         var myObj = { | |
|             "ftp": { | |
|                 ftpUser: document.getElementById('ftpUser').value, | |
|                 ftpPwd: document.getElementById('ftpPwd').value | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
| 
 | |
|     function mqttSettings(clickedId) { | |
|         lastIdclicked = clickedId; | |
|         var val; | |
|         if (document.getElementById('mqttEnable').checked) { | |
|             val = document.getElementById('mqttEnable').value; | |
|         } else { | |
|             val = 0; | |
|         } | |
|         var myObj = { | |
|             "mqtt": { | |
|                 mqttEnable: val, | |
|                 mqttServer: document.getElementById('mqttServer').value, | |
|                 mqttUser: document.getElementById('mqttUser').value, | |
|                 mqttPwd: document.getElementById('mqttPwd').value, | |
|                 mqttPort: document.getElementById('mqttPort').value | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
| 
 | |
|     function removeTrSlash(str) { | |
|         if (str.substr(-1) === '/') { | |
|             return str.substr(0, str.length - 1); | |
|         } | |
|         return str; | |
|     } | |
| 
 | |
|     function rfidAssign(clickedId) { | |
|         lastIdclicked = clickedId; | |
|         if (ActiveSubTab == 'rfid-music-tab') { | |
|             var myObj = { | |
|                 "rfidAssign": { | |
|                     rfidIdMusic: document.getElementById('rfidIdMusic').value, | |
|                     fileOrUrl: removeTrSlash(document.getElementById('fileOrUrl').value), | |
|                     playMode: document.getElementById('playMode').value | |
|                 } | |
|             }; | |
|         } else { | |
|             var myObj = { | |
|                 "rfidMod": { | |
|                     rfidIdMod: document.getElementById('rfidIdMusic').value, | |
|                     modId: document.getElementById('modId').value | |
|                 } | |
|             }; | |
|         } | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
| 
 | |
|     function wifiConfig(clickedId) { | |
|         lastIdclicked = clickedId; | |
|         var myObj = { | |
|             "wifiConfig": { | |
|                 ssid: document.getElementById('ssid').value, | |
|                 pwd: document.getElementById('pwd').value, | |
|                 hostname: document.getElementById('hostname').value | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
|     function sendControl(cmd) { | |
|         var myObj = { | |
|             "controls": { | |
|                 action: cmd | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
|     function sendVolume(vol) { | |
|         var myObj = { | |
|             "controls": { | |
|                 set_volume: vol | |
|             } | |
|         }; | |
|         var myJSON = JSON.stringify(myObj); | |
|         socket.send(myJSON); | |
|     } | |
| 
 | |
|     $(document).ready(function () { | |
|         connect(); | |
| 		buildFileSystemTree("/"); | |
| 
 | |
|         console.log(parseInt(document.getElementById('warningLowVoltage').value)); | |
|         $(function () { | |
|             $('[data-toggle="tooltip"]').tooltip(); | |
|         }); | |
| 
 | |
|     }); | |
| </script> | |
| </body> | |
| </html> |