From 8fd73c4ed3264abe4bb77f87364401fea97900e9 Mon Sep 17 00:00:00 2001
From: Ori Barbut <ori@oribarbut.com>
Date: Tue, 22 Oct 2024 15:32:20 -0400
Subject: [PATCH] Textarea fields in usermods

A textarea with a label ending in `>` will be presented as a textarea,
allowing for multi-line text.
---
 usermods/EXAMPLE_v2/usermod_v2_example.h | 13 +++++++++++++
 wled00/data/settings_um.htm              |  9 +++++++--
 wled00/data/style.css                    |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/usermods/EXAMPLE_v2/usermod_v2_example.h b/usermods/EXAMPLE_v2/usermod_v2_example.h
index 659d3e58be..8a44619177 100644
--- a/usermods/EXAMPLE_v2/usermod_v2_example.h
+++ b/usermods/EXAMPLE_v2/usermod_v2_example.h
@@ -35,6 +35,7 @@ class MyExampleUsermod : public Usermod {
     unsigned long testULong = 42424242;
     float testFloat = 42.42;
     String testString = "Forty-Two";
+    String testMultilineString = "Forty...\nTwo"; // Key has > as final character, makes it multiline
 
     // These config variables have defaults set inside readFromConfig()
     int testInt;
@@ -232,6 +233,7 @@ class MyExampleUsermod : public Usermod {
       top["testULong"] = testULong;
       top["testFloat"] = testFloat;
       top["testString"] = testString;
+      top["testMultilineString>"] = testMultilineString; // Key has > as final character, makes it multiline
       JsonArray pinArray = top.createNestedArray("pin");
       pinArray.add(testPins[0]);
       pinArray.add(testPins[1]); 
@@ -267,6 +269,17 @@ class MyExampleUsermod : public Usermod {
       configComplete &= getJsonValue(top["testULong"], testULong);
       configComplete &= getJsonValue(top["testFloat"], testFloat);
       configComplete &= getJsonValue(top["testString"], testString);
+      configComplete &= getJsonValue(top["testMultilineString>"], testMultilineString);
+
+      // Remove any carriage returns (\r) from testMultilineString, leave only newlines (\n)
+      int i=0;
+      int lastI;
+      while(true) {
+        lastI = i;
+        i = testMultilineString.indexOf('\r',lastI);
+        if (i < 0) break;
+        testMultilineString.remove(i,1);
+      }
 
       // A 3-argument getJsonValue() assigns the 3rd argument as a default value if the Json value is missing
       configComplete &= getJsonValue(top["testInt"], testInt, 42);  
diff --git a/wled00/data/settings_um.htm b/wled00/data/settings_um.htm
index abcfef20d2..9b3c55fb4f 100644
--- a/wled00/data/settings_um.htm
+++ b/wled00/data/settings_um.htm
@@ -153,14 +153,19 @@
 					}
 					break;
 				default:
-					t = "text"; c = `value="${o}" style="width:250px;"`;
+					if (f.substr(-1)===">") {
+						t = "textarea"; c = `style="width:300px;height:150px;"`;
+					} else {
+						t = "text"; c = `value="${o}" style="width:250px;"`;
+					}
 					break;
 			}
 			urows += ` ${initCap(f)} `; //only show field (key is shown in grouping)
 			// https://stackoverflow.com/questions/11657123/posting-both-checked-and-unchecked-checkboxes
 			if (t=="checkbox") urows += `<input type="hidden" name="${k}:${f}${a?"[]":""}" value="false">`;
 			else if (!a)       urows += `<input type="hidden" name="${k}:${f}${a?"[]":""}" value="${t}">`;
-			urows += `<input type="${t==="int"?"number":t}" name="${k}:${f}${a?"[]":""}" ${c} oninput="check(this,'${k.substr(k.indexOf(":")+1)}')"><br>`;
+			if (t=="textarea") urows += `<br><textarea name="${k}:${f}${a?"[]":""}" ${c}>${o}</textarea><br>`;
+			else               urows += `<input type="${t==="int"?"number":t}" name="${k}:${f}${a?"[]":""}" ${c} oninput="check(this,'${k.substr(k.indexOf(":")+1)}')"><br>`;
 		}
 	}
 	function pinDropdowns() {
diff --git a/wled00/data/style.css b/wled00/data/style.css
index 5daca929a4..e4517ad479 100644
--- a/wled00/data/style.css
+++ b/wled00/data/style.css
@@ -67,7 +67,7 @@ button.sml {
 .warn {
   color: #fa0;
 }
-input {
+input, textarea {
   background: #333;
   color: #fff;
   font-family: Verdana, sans-serif;