how to change the order of the titles #510

hongthiet1994 · 2022-07-27T08:28:49Z

hongthiet1994
Jul 27, 2022

How to change order of this

Jul 28, 2022

@hongthiet1994 If you are envisioning an API that allows you to easily change the order on the sketch, AutoConnect does not provide such an interface.
However, if you are willing to modify the AutoConnect source code to achieve this, the part that generates the menu HTML is as follows:

AutoConnect/src/AutoConnectPage.cpp

Lines 970 to 981 in 8f60762

     String AutoConnect::_token_MENU_PRE(PageArgument& args) {  
   String currentMenu = FPSTR(_ELM_MENU_PRE);  
   String menuItem = _attachMenuItem(AC_MENUITEM_CONFIGNEW) +  
   _attachMenuItem(AC_MENUITEM_OPENSSIDS) +  
   _attachMenuItem(AC_MENUITEM_DISCONNECT) +  
   _attachMenuItem(AC_MENUITEM_RESET);  
   currentMenu.replace(String(F

View full answer

Hieromon · 2022-07-28T00:48:17Z

Hieromon
Jul 28, 2022
Maintainer

What is this? If you don`t present clearly what you have done, it will be difficult for many people to help you.
Anyway, this kind of topic goes to Discussions.

0 replies

hongthiet1994 · 2022-07-28T01:34:03Z

hongthiet1994
Jul 28, 2022
Author

how to change order of "HOME" "EEPROM" "Reset" "Time zone" title

0 replies

Hieromon · 2022-07-28T13:05:02Z

Hieromon
Jul 28, 2022
Maintainer

@hongthiet1994 If you are envisioning an API that allows you to easily change the order on the sketch, AutoConnect does not provide such an interface.
However, if you are willing to modify the AutoConnect source code to achieve this, the part that generates the menu HTML is as follows:

AutoConnect/src/AutoConnectPage.cpp

Lines 970 to 981 in 8f60762

    
           String AutoConnect::_token_MENU_PRE(PageArgument& args) { 
        
             String  currentMenu = FPSTR(_ELM_MENU_PRE); 
        
             String  menuItem = _attachMenuItem(AC_MENUITEM_CONFIGNEW) + 
        
                                _attachMenuItem(AC_MENUITEM_OPENSSIDS) + 
        
                                _attachMenuItem(AC_MENUITEM_DISCONNECT) + 
        
                                _attachMenuItem(AC_MENUITEM_RESET); 
        
             currentMenu.replace(String(F("MENU_LIST")), menuItem); 
        
             currentMenu.replace(String(F("BOOT_URI")), _getBootUri()); 
        
             currentMenu.replace(String(F("MENU_TITLE")), _menuTitle); 
        
             currentMenu.replace(String(F("{{CUR_SSID}}")), _token_ESTAB_SSID(args)); 
        
             return currentMenu; 
        
           }

In the above _token_MENU_PRE function, it is the concatenation order of the String menuItem variable that determines some menu orderliness. By changing this concatenation order, you can change the order of the Config New and Open SSIDs and Disconnect and RESET items.

On the other hand, changing the menu item for a custom web page that includes AutoConnectAux --- you see it as Time/Zone, EEPROM --- requires knowledge of PageBuilder. It is a so-called simple lexical analyzer with templates and tokens. You can find its structure in the PageBuilder repository. The declaration of the template in the second half part of the menu item is located at:

AutoConnect/src/AutoConnectAux.cpp

Lines 29 to 72 in 8f60762

    
           const char AutoConnectAux::_PAGE_AUX[] PROGMEM = { 
        
             "{{HEAD}}" 
        
             "<title>{{AUX_TITLE}}</title>" 
        
             "<style type=\"text/css\">" 
        
             "{{CSS_BASE}}" 
        
             "{{CSS_UL}}" 
        
             "{{CSS_INPUT_BUTTON}}" 
        
             "{{CSS_INPUT_TEXT}}" 
        
             "{{CSS_LUXBAR}}" 
        
             "{{AUX_CSS}}" 
        
             "</style>" 
        
             "</head>" 
        
             "<body style=\"padding-top:58px;\">" 
        
             "<div class=\"container\">" 
        
             "{{MENU_PRE}}" 
        
             "{{MENU_AUX}}" 
        
             "{{MENU_POST}}" 
        
             "<div class=\"base-panel\"><div class=\"aux-page\">" 
        
             "<form id='_aux' method=\"post\" onsubmit=\"return false;\" {{ENC_TYPE}}>" 
        
             "<ul class=\"noorder\">" 
        
             "{{AUX_ELEMENT}}" 
        
             "</ul>" 
        
             "</form>" 
        
             "</div></div>" 
        
             "</div>" 
        
             "<script>" 
        
             "function _bu(url) {" 
        
             "var uri=document.createElement('input');" 
        
             "uri.setAttribute('type','hidden');" 
        
             "uri.setAttribute('name','" AUTOCONNECT_AUXURI_PARAM "');" 
        
             "uri.setAttribute('value','{{AUX_URI}}');" 
        
             "var fm=document.getElementById('_aux');" 
        
             "fm.appendChild(uri);" 
        
             "fm.action=url;" 
        
             "return fm;" 
        
             "}" 
        
             "function _sa(url) {" 
        
             "_bu(url).submit();" 
        
             "}" 
        
             "{{POSTSCRIPT}}" 
        
             "</script>" 
        
             "</body>" 
        
             "</html>" 
        
           };

The code to replace the {{MEMU_POST}} token in the above template with HTML is the following part:

AutoConnect/src/AutoConnectPage.cpp

Lines 983 to 990 in 8f60762

    
           String AutoConnect::_token_MENU_POST(PageArgument& args) { 
        
             AC_UNUSED(args); 
        
             String  postMenu = FPSTR(_ELM_MENU_POST); 
        
             postMenu.replace(String(F("MENU_HOME")), _attachMenuItem(AC_MENUITEM_HOME)); 
        
             postMenu.replace(String(F("HOME_URI")), _apConfig.homeUri); 
        
             postMenu.replace(String(F("MENU_DEVINFO")), _attachMenuItem(AC_MENUITEM_DEVINFO)); 
        
             return postMenu; 
        
           }

Note that the order of menu items to the custom web page depends on the order of loading. Its loading order matches the order defined in JSON or specified as a parameter list of the AutoConnect::join function.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to change the order of the titles #510

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

	String AutoConnect::_token_MENU_PRE(PageArgument& args) {
	String currentMenu = FPSTR(_ELM_MENU_PRE);
	String menuItem = _attachMenuItem(AC_MENUITEM_CONFIGNEW) +
	_attachMenuItem(AC_MENUITEM_OPENSSIDS) +
	_attachMenuItem(AC_MENUITEM_DISCONNECT) +
	_attachMenuItem(AC_MENUITEM_RESET);
	currentMenu.replace(String(F

how to change the order of the titles #510

hongthiet1994 Jul 27, 2022

Replies: 3 comments

Hieromon Jul 28, 2022 Maintainer

hongthiet1994 Jul 28, 2022 Author

Hieromon Jul 28, 2022 Maintainer

hongthiet1994
Jul 27, 2022

Hieromon
Jul 28, 2022
Maintainer

hongthiet1994
Jul 28, 2022
Author

Hieromon
Jul 28, 2022
Maintainer