ElixirForge/WiFiManager
1
0
Fork 0
mirror of https://github.com/alexhopeoconnor/WiFiManager.git synced 2026-10-04 02:48:13 +10:00
Code Releases Activity

css tweaks for inputs including select,checkbox

Browse Source 
added vertical margins to inputs
This commit is contained in:
tablatronix
2022-02-22 13:41:27 -06:00
parent 14cf6b81d4
commit 5acc7cc9aa
5 changed files with 70 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WiFiManager.cpp
+4 -4
View File
@@ -33,20 +33,20 @@ WiFiManagerParameter::WiFiManagerParameter(const char *custom) {
_label = NULL;
_length = 1;
_value = NULL;
_labelPlacement = WFM_LABEL_BEFORE;
_labelPlacement = WFM_LABEL_DEFAULT;
_customHTML = custom;
}
WiFiManagerParameter::WiFiManagerParameter(const char *id, const char *label) {
init(id, label, "", 0, "", WFM_LABEL_BEFORE);
init(id, label, "", 0, "", WFM_LABEL_DEFAULT);
}
WiFiManagerParameter::WiFiManagerParameter(const char *id, const char *label, const char *defaultValue, int length) {
init(id, label, defaultValue, length, "", WFM_LABEL_BEFORE);
init(id, label, defaultValue, length, "", WFM_LABEL_DEFAULT);
}
WiFiManagerParameter::WiFiManagerParameter(const char *id, const char *label, const char *defaultValue, int length, const char *custom) {
init(id, label, defaultValue, length, custom, WFM_LABEL_BEFORE);
init(id, label, defaultValue, length, custom, WFM_LABEL_DEFAULT);
}
WiFiManagerParameter::WiFiManagerParameter(const char *id, const char *label, const char *defaultValue, int length, const char *custom, int labelPlacement) {
WiFiManager.h
+1
View File
@@ -129,6 +129,7 @@
#define WFM_LABEL_BEFORE 1
#define WFM_LABEL_AFTER 2
#define WFM_NO_LABEL 0
#define WFM_LABEL_DEFAULT 1
class WiFiManagerParameter {
public:
examples/Super/OnDemandConfigPortal/OnDemandConfigPortal.ino
+27 -3
View File
@@ -29,7 +29,7 @@ int TESP_CP_TIMEOUT = 90; // test cp timeout
bool TEST_NET = true; // do a network test after connect, (gets ntp time)
bool ALLOWONDEMAND = true; // enable on demand
int ONDDEMANDPIN = 0; // gpio for button
bool WMISBLOCKING = false; // use blocking or non blocking mode
bool WMISBLOCKING = true; // use blocking or non blocking mode, non global params wont work in non blocking
// char ssid[] = "*************"; // your network SSID (name)
// char pass[] = "********"; // your network password
@@ -90,7 +90,7 @@ void setup() {
// wm.erase();
// setup some parameters
WiFiManagerParameter custom_html("<p>This Is Custom HTML</p>"); // only custom html
WiFiManagerParameter custom_html("<p style=\"color:pink;font-weight:Bold;\">This Is Custom HTML</p>"); // only custom html
WiFiManagerParameter custom_mqtt_server("server", "mqtt server", "", 40);
WiFiManagerParameter custom_mqtt_port("port", "mqtt port", "", 6);
WiFiManagerParameter custom_token("api_token", "api token", "", 16);
@@ -98,7 +98,29 @@ void setup() {
WiFiManagerParameter custom_ipaddress("input_ip", "input IP", "", 15,"pattern='\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}'"); // custom input attrs (ip mask)
const char _customHtml_checkbox[] = "type=\"checkbox\"";
WiFiManagerParameter custom_checkbox("checkbox", "my checkbox", "T", 2, _customHtml_checkbox, WFM_LABEL_AFTER);
WiFiManagerParameter custom_checkbox("my_checkbox", "My Checkbox", "T", 2, _customHtml_checkbox,WFM_LABEL_AFTER);
const char *bufferStr = R"(
<!-- INPUT CHOICE -->
<br/>
<p>Select Choice</p>
<input style='display: inline-block;' type='radio' id='choice1' name='program_selection' value='1'>
<label for='choice1'>Choice1</label><br/>
<input style='display: inline-block;' type='radio' id='choice2' name='program_selection' value='2'>
<label for='choice2'>Choice2</label><br/>
<!-- INPUT SELECT -->
<br/>
<label for='input_select'>Label for Input Select</label>
<select name="input_select" id="input_select" class="button">
<option value="0">Option 1</option>
<option value="1" selected>Option 2</option>
<option value="2">Option 3</option>
<option value="3">Option 4</option>
</select>
)";
WiFiManagerParameter custom_html_inputs(bufferStr);
// callbacks
wm.setAPCallback(configModeCallback);
@@ -115,6 +137,8 @@ void setup() {
wm.addParameter(&custom_ipaddress);
wm.addParameter(&custom_checkbox);
wm.addParameter(&custom_html_inputs);
// set values later if you want
custom_html.setValue("test",4);
custom_token.setValue("test",4);
extras/WiFiManager.template.html
+35 -8
View File
@@ -43,18 +43,22 @@ body {
max-width:500px;
}
div,
input {
input,select {
padding: 5px;
font-size: 1em;
/*width: 100%;*/
margin:5px 0;
/*/*margin: 3px 0 10px 0; // BEFORE spacing shows label closer to input, but need to do same for AFTER*/
margin: 5px 0;
box-sizing: border-box;
}
input,button,.msg{
div{
margin: 5px 0;
}
input,button,select,.msg{
border-radius:.3rem;
width: 100%;
}
input[type=radio]{
input[type=radio],input[type=checkbox]{
width: auto;
}
button,input[type="button"],input[type="submit"] {
@@ -321,20 +325,43 @@ input:disabled {
<form method='POST' action='u' enctype='multipart/form-data'>
<input type='file' name='update' accept='.bin,application/octet-stream' onchange="(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)">
<button id='uploadbin' class="h">Submit</button>
</form>
<a href='http://192.168.4.1' target='_blank'><small>* Upload may not function inside captive portal, Open in browser - http://192.168.4.1</a></small>
<!-- /FORM_UPLOAD -->
<!-- FORM_EXTRAS -->
<br/><br/><br/><hr>
<br/><label for='custom'>Label for Custom Param</label>
<br/><input id='custom' name='custom' length='255' placeholder='placeholder' value='' {c}>
<br/><input style='display: inline-block;' type='radio' id='choice1' name='program_selection' value='1'>
<br/>
<label for='custom'>Label for Custom Param</label>
<br/>
<input id='custom' name='custom' length='255' placeholder='placeholder' value='' {c}>
<br/>
<!-- INOUT CHECKBOX -->
<!-- <label for='input_checkbox'>Label for Input Checkbox</label> -->
<input id='input_checkbox' name='input_checkbox' placeholder='placeholder' value='' type="checkbox" {c}>
<label for='input_checkbox'>Label for Input Checkbox</label>
<br/>
<!-- INPUT CHOICE -->
<p>Select Choice</p>
<input style='display: inline-block;' type='radio' id='choice1' name='program_selection' value='1'>
<label for='choice1'>Choice1</label><br>
<input style='display: inline-block;' type='radio' id='choice2' name='program_selection' value='2'>
<label for='choice2'>Choice2</label><br>
<!-- INPUT SELECT -->
<br/>
<label for='input_select'>Label for Input Select</label>
<select name="input_select" id="input_select" class="button">
<option value="0">Option 1</option>
<option value="1" selected>Option 2</option>
<option value="2">Option 3</option>
<option value="3">Option 4</option>
</select>
</form>
<!-- /FORM_EXTRAS -->
<!-- HTTP_END -->
strings_en.h
+3 -3
View File
@@ -60,7 +60,7 @@ const char HTTP_FORM_STATIC_HEAD[] PROGMEM = "<hr><br/>";
const char HTTP_FORM_END[] PROGMEM = "<br/><br/><button type='submit'>Save</button></form>";
const char HTTP_FORM_LABEL[] PROGMEM = "<label for='{i}'>{t}</label>";
const char HTTP_FORM_PARAM_HEAD[] PROGMEM = "<hr><br/>";
const char HTTP_FORM_PARAM[] PROGMEM = "<br/><input id='{i}' name='{n}' maxlength='{l}' value='{v}' {c}>";
const char HTTP_FORM_PARAM[] PROGMEM = "<br/><input id='{i}' name='{n}' maxlength='{l}' value='{v}' {c}>\n"; // do not remove newline!
const char HTTP_SCAN_LINK[] PROGMEM = "<br/><form action='/wifi?refresh=1' method='POST'><button name='refresh' value='1'>Refresh</button></form>";
const char HTTP_SAVED[] PROGMEM = "<div class='msg'>Saving Credentials<br/>Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>";
@@ -79,8 +79,8 @@ const char HTTP_STATUS_NONE[] PROGMEM = "<div class='msg'>No AP set</div>";
const char HTTP_BR[] PROGMEM = "<br/>";
const char HTTP_STYLE[] PROGMEM = "<style>"
".c,body{text-align:center;font-family:verdana}div,input{padding:5px;font-size:1em;margin:5px 0;box-sizing:border-box;}"
"input,button,.msg{border-radius:.3rem;width: 100%},input[type=radio]{width: auto}"
".c,body{text-align:center;font-family:verdana}div,input,select{padding:5px;font-size:1em;margin:5px 0;box-sizing:border-box}"
"input,button,select,.msg{border-radius:.3rem;width: 100%}input[type=radio],input[type=checkbox]{width:auto}"
"button,input[type='button'],input[type='submit']{cursor:pointer;border:0;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%}"
"input[type='file']{border:1px solid #1fa3ec}"
".wrap {text-align:left;display:inline-block;min-width:260px;max-width:500px}"