[GH-ISSUE #1653] New button with menu config item MQTT #1405

New issue

Open

opened 2026-02-28 01:29:56 +03:00 by kerem · 0 comments

kerem commented

2026-02-28 01:29:56 +03:00

Owner

Originally created by @Elmrz on GitHub (Sep 2, 2023).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1653

I really like using your creation in my projects, for the convenience and ease of connection! For this, great gratitude and prosperity! In the latest release, you added the input of MQTT server parameters and that's what I wanted to ask for! Is it possible to display the input of parameters on a separate page (button) of the main menu ("wifi", "mqtt", "sep", "restart", "exit") and the choice of authentication (API or User/Password) so that they can be used to connect to your server?

Sample sketch

EspMQTTClient client(
  wm.mqttserver,     // MQTT Broker server ip (String)
  wm.mqttip,           // The MQTT port, default to 1883. this line can be omitted
  wm.mqttapi,         // MQTT API key
  wm.mqttlogin,      // Login for authentication on server(String)
  wm.mqttpass,       // Password for authentication on server(String)
  wm.mqttname     // Client name that uniquely identify your  device(String)

Original sketch

EspMQTTClient client(
  "localhost",     // MQTT Broker server ip (String)
  1883,           // The MQTT port, default to 1883. this line can be omitted
  "aspocirDFOjSDofeorejfpEOfjfef",         // MQTT API key(String)
  "Testlogin",      // Login for authentication on server(String)
  "Testpass",       // Password for authentication on server(String)
  "MyNewItem"     // Client name that uniquely identify your  device(String)

I created an example page of how it might look like!

<h2>/mqtt</h3><hr>
<dt>Input parameters for connect you MQTT server</dt>
<form method='get' action='mqttsave'>
<br/><label for='mqttname'>Server name or IP</label>
<br/><input id='mqttname' name='mqttname' length=32 placeholder='Client name'>
<br/><label for='mqttip'>Server name or IP</label>
<br/><input id='mqttip' name='mqttip' length=32 placeholder='MQTT Server IP' value='localhost'>
<br/><label for='mqttport'>Server port</label>
<br/><input id='mqttport' name='mqttport' length=5 placeholder='MQTT Port' value='1883'>
<br/><label for='mqttapi'>Server Login/Username</label>
<br/><input id='mqttapi' name='mqttapi' length=32 placeholder='MQTT API Key'>
<br/><label for='mqttlogin'>Server Login/Username</label>
<br/><input id='mqttlogin' name='mqttlogin' length=32 placeholder='MQTT Login'>
<br/><label for='mqttpass'>Server Password</label>
<br/><input id='mqttpass' name='mqttpass' length=64 placeholder='MQTT Password'>
<br/>
<br/><button type='submit'>Save</button></form>
<br/>
<br/><form action='/' method='post'><button>Back</button></form><br/>

Originally created by @Elmrz on GitHub (Sep 2, 2023). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1653 I really like using your creation in my projects, for the convenience and ease of connection! For this, great gratitude and prosperity! In the latest release, you added the input of MQTT server parameters and that's what I wanted to ask for! Is it possible to display the input of parameters on a separate page (button) of the main menu ("wifi", "mqtt", "sep", "restart", "exit") and the choice of authentication (API or User/Password) so that they can be used to connect to your server? ### Sample sketch ```cpp EspMQTTClient client( wm.mqttserver, // MQTT Broker server ip (String) wm.mqttip, // The MQTT port, default to 1883. this line can be omitted wm.mqttapi, // MQTT API key wm.mqttlogin, // Login for authentication on server(String) wm.mqttpass, // Password for authentication on server(String) wm.mqttname // Client name that uniquely identify your device(String) ``` ### Original sketch ```cpp EspMQTTClient client( "localhost", // MQTT Broker server ip (String) 1883, // The MQTT port, default to 1883. this line can be omitted "aspocirDFOjSDofeorejfpEOfjfef", // MQTT API key(String) "Testlogin", // Login for authentication on server(String) "Testpass", // Password for authentication on server(String) "MyNewItem" // Client name that uniquely identify your device(String) ``` I created an example page of how it might look like! ```cpp <h2>/mqtt</h3><hr> <dt>Input parameters for connect you MQTT server</dt> <form method='get' action='mqttsave'> <br/><label for='mqttname'>Server name or IP</label> <br/><input id='mqttname' name='mqttname' length=32 placeholder='Client name'> <br/><label for='mqttip'>Server name or IP</label> <br/><input id='mqttip' name='mqttip' length=32 placeholder='MQTT Server IP' value='localhost'> <br/><label for='mqttport'>Server port</label> <br/><input id='mqttport' name='mqttport' length=5 placeholder='MQTT Port' value='1883'> <br/><label for='mqttapi'>Server Login/Username</label> <br/><input id='mqttapi' name='mqttapi' length=32 placeholder='MQTT API Key'> <br/><label for='mqttlogin'>Server Login/Username</label> <br/><input id='mqttlogin' name='mqttlogin' length=32 placeholder='MQTT Login'> <br/><label for='mqttpass'>Server Password</label> <br/><input id='mqttpass' name='mqttpass' length=64 placeholder='MQTT Password'> <br/> <br/><button type='submit'>Save</button></form> <br/> <br/><form action='/' method='post'><button>Back</button></form><br/> ```