build command line from website form (#12)

components/wifi-manager/code.js

@@ -1,3 +1,5 @@
+var commandHeader = 'squeezelite -b 500:2000 -d all=info ';
+
 // First, checks if it isn't implemented yet.
 if (!String.prototype.format) {
   String.prototype.format = function() {
@@ -173,10 +175,18 @@ $(document).ready(function(){
 		$( "#wifi" ).slideDown( "fast", function() {})
 	});
 	
-	$("#update-command").on("click", function() {
+	$("#update-command").click(function() {
 		updateAutoexec();
 	});	
 
+	$("#generate-command").click(function() {
+		generateCommand();
+	});	
+
+    $('[name=audio]').click(function(){
+        selectOutput(this);
+   	});
+
 	//first time the page loads: attempt get the connection status and start the wifi scan
 	refreshAP();
 	startCheckStatusInterval();
@@ -184,27 +194,6 @@ $(document).ready(function(){
     getConfig();
 });
 
-
-function performFactory(){
-		
-// 	$( "#ok-connect" ).prop("disabled",true);
-// 	$( "#ssid-wait" ).text(selectedSSID);
-// 	$( "#connect" ).slideUp( "fast", function() {});
-// 	$( "#connect_manual" ).slideUp( "fast", function() {});
-// 	$( "#connect-wait" ).slideDown( "fast", function() {});
-// 	// todo: should we update the UI here? 
-	
-	$.ajax({
-		url: '/factory.json',
-		dataType: 'json',
-		method: 'POST',
-		cache: false,
-		data: { 'timestamp': Date.now()}
-	});
-
-
-}
-
 function performConnect(conntype){
 	
 	//stop the status refresh. This prevents a race condition where a status 
@@ -407,3 +396,44 @@ function updateAutoexec(){
     console.log('sent config JSON with headers:', autoexec, autoexec1);
 }
 
+function performFactory(){
+// 	$( "#ok-connect" ).prop("disabled",true);
+// 	$( "#ssid-wait" ).text(selectedSSID);
+// 	$( "#connect" ).slideUp( "fast", function() {});
+// 	$( "#connect_manual" ).slideUp( "fast", function() {});
+// 	$( "#connect-wait" ).slideDown( "fast", function() {});
+// 	// todo: should we update the UI here? 
+	
+	$.ajax({
+		url: '/factory.json',
+		dataType: 'json',
+		method: 'POST',
+		cache: false,
+		data: { 'timestamp': Date.now()}
+	});
+}
+
+var output = '';
+function selectOutput(el) {
+    if ($(el).attr('id') == 'bt') {
+        $("#btsinkdiv").show(200);
+        output = 'bt';
+    } else {
+        $("#btsinkdiv").hide(200);
+        output = 'i2s';
+    }
+}
+
+function generateCommand() {
+    var commandLine = commandHeader + '-n ' + $("#player").val();
+
+    if (output == 'bt') {
+        commandLine += ' -o "BT -n \'' + $("#btsink").val() + '\'"  -R -u m -Z 192000 -r "44100-44100"';
+    } else {
+        commandLine += ' -o I2S';
+    }
+    if ($("#optional").val() != '') {
+        commandLine += ' ' + $("#optional").val();
+    }
+    $("#autoexec1").val(commandLine);
+}

components/wifi-manager/http_server.c

@@ -308,7 +308,7 @@ void http_server_netconn_serve(struct netconn *conn) {
 
 							if(autoexec_value ){
 								// todo: replace line below, as it causes an error during compile.
-								// snprintf(autoexec_value, lenS+1, autoexec_value);
+								snprintf(autoexec_value, lenS+1, autoexec_value);
 								if(lenS < MAX_COMMAND_LINE_SIZE ){
 									ESP_LOGD(TAG, "http_server_netconn_serve: config.json/ call, with %s: %s, length %i", autoexec_key, autoexec_value, lenS);
 									wifi_manager_save_autoexec_config(autoexec_value,autoexec_key,lenS);

components/wifi-manager/index.html

@@ -182,6 +182,29 @@ function handleClick(cb) {
                     </h2>
 
                     <div id="autoexec-command">
+                        <div id="audioout" class="toggle-buttons">
+                            <h2>Audio output</h2>
+                            <input type="radio" id="i2s" name="audio" />
+                            <label for="i2s">I2S</label>
+                            <input type="radio" id="bt" name="audio" />
+                            <label for="bt">Bluetooth</label>
+                        </div>
+                        <div id="btsinkdiv">
+                            <input id="btsink" type="text" value="BT sink name" />
+                        </div>
+                        <div>
+                            <h2>Player name</h2>
+                            <input id="player" type="text" value="squeezelite" />
+                        </div>
+                        <div>
+                            <h2>Optional setting (e.g. for LMS IP address)</h2>
+                            <input id="optional" type="text" value="" placeholder="-s 192.168.0.1" />
+                        </div>
+
+                        <div class="buttons">
+                            <input id="generate-command" type="button" value="Generate" />
+                        </div>
+
                         <h2>Command to run</h2>
                         <section id="command-list">
                             <textarea id="autoexec1" maxlength="120">squeezelite -o I2S -b 500:2000 -d all=info -M esp32</textarea>

components/wifi-manager/style.css

@@ -347,7 +347,32 @@ input#ota {
     margin-bottom: 15px;
 }
 
+#btsink, #player, #optional {
+    margin-left: 13px;
+}
+
+#btsinkdiv {
+    display: none;
+    margin-top: 20px;
+}
+
 textarea#autoexec1 {
     width: 100%;
 }
 
+.toggle-buttons input[type="radio"] {
+	visibility: hidden;
+    width: 3px;
+    margin-top: 10px;
+}
+
+.toggle-buttons label {
+	border: 1px solid #000;
+	border-radius: 0.5em;
+	padding: 0.5em;
+}
+
+.toggle-buttons input:checked + label {
+	background: #5a9900;
+	box-shadow: none;
+}