Add function in AutoConnect Config to allow use logo image in header encoded as base64 string

pull/226/head
Jose Manuel Casillas Martin 5 years ago
parent fc83f34155
commit 1cb7a2b443
  1. 7
      examples/HelloWorld_Image/HelloWorld_Image.ino
  2. 9
      src/AutoConnect.h
  3. 16
      src/AutoConnectPage.cpp

@ -35,6 +35,7 @@ ACImage(Caption, "iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAgVBMVEX///8AAA
//AutoConnectAux for the custom Web page. //AutoConnectAux for the custom Web page.
AutoConnectAux helloPage(HELLO_URI, "Hello", true, { Caption }); AutoConnectAux helloPage(HELLO_URI, "Hello", true, { Caption });
AutoConnect portal; AutoConnect portal;
AutoConnectConfig Config;
// JSON document loading buffer // JSON document loading buffer
String ElementJson; String ElementJson;
@ -65,11 +66,17 @@ void loadParam(const char* fileName) {
SPIFFS.end(); SPIFFS.end();
} }
void setup_AutoConnect(AutoConnect &Portal, AutoConnectConfig &Config){
Config.logo = "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";
Portal.config(Config); // Configure AutoConnect
}
void setup() { void setup() {
delay(1000); delay(1000);
Serial.begin(115200); Serial.begin(115200);
loadParam(PARAM_STYLE); // Pre-load the element from JSON. loadParam(PARAM_STYLE); // Pre-load the element from JSON.
setup_AutoConnect(portal, Config); // Comment this line if you do not want to use the logo in header
helloPage.on(onHello); // Register the attribute overwrite handler. helloPage.on(onHello); // Register the attribute overwrite handler.
portal.join(helloPage); // Join the hello page. portal.join(helloPage); // Join the hello page.
portal.begin(); portal.begin();

@ -118,7 +118,8 @@ class AutoConnectConfig {
staGateway(0U), staGateway(0U),
staNetmask(0U), staNetmask(0U),
dns1(0U), dns1(0U),
dns2(0U) {} dns2(0U),
logo(String("")) {}
/** /**
* Configure by SSID for the captive portal access point and password. * Configure by SSID for the captive portal access point and password.
*/ */
@ -154,7 +155,8 @@ class AutoConnectConfig {
staGateway(0U), staGateway(0U),
staNetmask(0U), staNetmask(0U),
dns1(0U), dns1(0U),
dns2(0U) {} dns2(0U),
logo(String("")) {}
~AutoConnectConfig() {} ~AutoConnectConfig() {}
@ -191,6 +193,7 @@ class AutoConnectConfig {
staNetmask = o.staNetmask; staNetmask = o.staNetmask;
dns1 = o.dns1; dns1 = o.dns1;
dns2 = o.dns2; dns2 = o.dns2;
logo = o.logo;
return *this; return *this;
} }
@ -227,6 +230,7 @@ class AutoConnectConfig {
IPAddress staNetmask; /**< Station subnet mask */ IPAddress staNetmask; /**< Station subnet mask */
IPAddress dns1; /**< Primary DNS server */ IPAddress dns1; /**< Primary DNS server */
IPAddress dns2; /**< Secondary DNS server */ IPAddress dns2; /**< Secondary DNS server */
String logo; /** String in base64 to add logo **/
}; };
typedef std::vector<std::reference_wrapper<AutoConnectAux>> AutoConnectAuxVT; typedef std::vector<std::reference_wrapper<AutoConnectAux>> AutoConnectAuxVT;
@ -306,6 +310,7 @@ class AutoConnect {
/** Utilities */ /** Utilities */
String _attachMenuItem(const AC_MENUITEM_t item); String _attachMenuItem(const AC_MENUITEM_t item);
String _attachLogoItem();
static uint32_t _getChipId(void); static uint32_t _getChipId(void);
static uint32_t _getFlashChipRealSize(void); static uint32_t _getFlashChipRealSize(void);
static String _toMACAddressString(const uint8_t mac[]); static String _toMACAddressString(const uint8_t mac[]);

@ -523,6 +523,7 @@ const char AutoConnect::_ELM_MENU_PRE[] PROGMEM = {
"<input type=\"checkbox\" class=\"lb-cb\" id=\"lb-cb\"/>" "<input type=\"checkbox\" class=\"lb-cb\" id=\"lb-cb\"/>"
"<div class=\"lb-menu lb-menu-right lb-menu-material\">" "<div class=\"lb-menu lb-menu-right lb-menu-material\">"
"<ul class=\"lb-navigation\">" "<ul class=\"lb-navigation\">"
"MENU_LOGO"
"<li class=\"lb-header\">" "<li class=\"lb-header\">"
"<a href=\"BOOT_URI\" class=\"lb-brand\">MENU_TITLE</a>" "<a href=\"BOOT_URI\" class=\"lb-brand\">MENU_TITLE</a>"
"<label class=\"lb-burger lb-burger-dblspin\" id=\"lb-burger\" for=\"lb-cb\"><span></span></label>" "<label class=\"lb-burger lb-burger-dblspin\" id=\"lb-burger\" for=\"lb-cb\"><span></span></label>"
@ -953,6 +954,8 @@ String AutoConnect::_token_MENU_PRE(PageArgument& args) {
_attachMenuItem(AC_MENUITEM_OPENSSIDS) + _attachMenuItem(AC_MENUITEM_OPENSSIDS) +
_attachMenuItem(AC_MENUITEM_DISCONNECT) + _attachMenuItem(AC_MENUITEM_DISCONNECT) +
_attachMenuItem(AC_MENUITEM_RESET); _attachMenuItem(AC_MENUITEM_RESET);
String logoItem = _attachLogoItem();
currentMenu.replace(String(F("MENU_LOGO")), logoItem);
currentMenu.replace(String(F("MENU_LIST")), menuItem); currentMenu.replace(String(F("MENU_LIST")), menuItem);
currentMenu.replace(String(F("BOOT_URI")), _getBootUri()); currentMenu.replace(String(F("BOOT_URI")), _getBootUri());
currentMenu.replace(String(F("MENU_TITLE")), _menuTitle); currentMenu.replace(String(F("MENU_TITLE")), _menuTitle);
@ -1391,6 +1394,19 @@ String AutoConnect::_attachMenuItem(const AC_MENUITEM_t item) {
return String(li); return String(li);
} }
/**
* Generate AutoConnect logo item configured by AutoConnectConfig::attachMenu.
* @param item An enumerated value for the generating item configured in AutoConnectConfig.
* @return HTML string of a li tag with the menu item.
*/
String AutoConnect::_attachLogoItem() {
if (_apConfig.logo==String("")){
return String("");
}
String resp = "<li class=\"lb-header\"><img src=\"data:image/png;base64," + _apConfig.logo + "\" alt=\"Logo Failed\" id=\"itemImg\" height=\"60\" width=\"60\"></li>";
return resp;
}
/** /**
* This function dynamically build up the response pages that conform to * This function dynamically build up the response pages that conform to
* the requested URI. A PageBuilder instance is stored in _responsePage * the requested URI. A PageBuilder instance is stored in _responsePage

Loading…
Cancel
Save