Idea for better web Addons

[black-raison-detre]

I have some new idea about extending the webUI
My previous post here

I am currently pocking with httpd webAPI and I think I have figured out most of it.
currently I am able to get & set nvram_settings, trigger rc_service script, reading and writing /jffs/addons/custom_settings.txt.

In my previous post I am trying to add new API to httpd. Allow writing multiple config file, write one values at a time like nvram_settings. But having issue with segmentation fault when trying to read file. Maybe I am just making things more complicated.

I trying to create a new way to write web addons, not by messing with the old asp web page. By using Vuejs web app method to create more dynamic and extendable page. I will upload it to GitHub when I manage to work out the framework.

Feel free to ask me about the httpApi stuff, It is pure javascript stuff. you can test it on browser's console.

 

[black-raison-detre]

Some api if you are interested.

All of them use js fetch method

• appGet.cgi
  Get values, by http query string, method GET
  

  fetch('/appGet.cgi?hook=<insert method here>', { credentials: 'same-origin' }).then(resp => console.log(resp))

  example method:
  nvram_get(<nvram_vals>)
  for multiple values separate nvram_get() with %3b
  there are more methods but just try this one out for now
• applyapp.cgi
  Apply values, method POST, sending formatted js object
  

  fetch('/applyapp.cgi', { method: 'POST', credentials: 'same-origin', body: new URLSearchParams({ action_mode: 'apply', <js object> }) }).toString() }).then(resp => console.log(resp))

  for example, if you are trying to set ui language to English. replace <js object> with preferred_lang: 'EN'
  

expand the return promise object on browser console then you can see the API responses.

 

[heysoundude]

I have to first say that I'm not a person who knows code, so take what I say with this in mind: You've come to the right place to talk about these things as they pertain to Asuswrt-Merlin, but I can't explain why your approach hasnt been used so far in its development. Have you tried to contact the developers of the addons/scripts we use at the present time to work your ideas out, or get an explanation as to why your approach hasn't been tried before?

 

[black-raison-detre]

Source code updated.
A new way to add add-on webpage

Now it looks like this
And the setting file. I just reuse the tools page because I dont have a test page ready yet.

web_addons 1
Test_Addon menu_Addon&Tools_Sysinfo.asp&Sysinfo&Tools_OtherSettings.asp&Other_Settings

 

[heysoundude]

Uhh, is that icon you used possibly copyrighted or a trademark?

 

[black-raison-detre]

Source code updated.
A new way to add add-on webpage
View attachment 52132
Now it looks like this
And the setting file. I just reuse the tools page because I dont have a test page ready yet.

web_addons 1
Test_Addon menu_Addon&Tools_Sysinfo.asp&Sysinfo&Tools_OtherSettings.asp&Other_Settings

I download it on svgrepo.com. MIT license.
https://www.svgrepo.com/svg/452159/app-store

 

[kernol]

Uhh, is that icon you used possibly copyrighted or a trademark?

Interesting how IP is replicated and ostensibly "licensed" by all and sundry these days. Applies especially to graphic designs and logos etc.
Apple clearly lays claim to this one - yet if you drop the icon image into Google you will get LOTS of sites offering it. Go figure ???

This screen grab is from Apple's Marketing Resources and Identity Guidelines ...

Note the red "X" marks within the two right hand images - the bottom right includes the icon under discussion ???
@black-raison-detre ... maybe a rethink on that icon use? Your call .

 

[black-raison-detre]

Interesting how IP is replicated and ostensibly "licensed" by all and sundry these days. Applies especially to graphic designs and logos etc.
Apple clearly lays claim to this one - yet if you drop the icon image into Google you will get LOTS of sites offering it. Go figure ???

This screen grab is from Apple's Marketing Resources and Identity Guidelines ...
View attachment 52136
Note the red "X" marks within the two right hand images - the bottom right includes the icon under discussion ???
@black-raison-detre ... maybe a rethink on that icon use? Your call .

Well, didn’t notice this one and I am a Mac user . But I am just using it for testing css. Not going to include any actual icon in the firmware.

 

[black-raison-detre]

More update:
Latest commit
So here is what i have done to the webUI

1. create a new ej_function in httpd to read the /jffs/addons/addon_settings.txt. (Mostly just copy&paste existing ej_get_custom_settings())
2. modify menuTree.js, read the config_file. If web_addons flag is enable. Add new entry to menuTree. (support adding tabs to Tools and create new menu&tabs)
3. Also inject a new stylesheet to html head so custom menu icons can be added.

So the step to add a new page to the webUI is like this

1. add a line to the /jffs/addons/addon_settings.txt with format below
   Add an new menu entry:
   <addon_name> <index>&<tab_url>&<tab_name>......
   addon_name : the name of the addon (underscore will be replaced with space)
   index: for the menu icon (should be named as menu_<addon_name>)
   tab_url: page file name ***.asp ("user/" prefix will be added automatically)
   tab_name: name of the tab (underscore will be replaced with space)
   add more <tab_url>&<tab_name> for more tab
   Add a tab to Tools:
   tools_tab_<tab_name> <tab_url>&<tab_name>.....
   same method as above, but the key must have "tools_tab_" as prefix
2. copy or link the actual asp page to /www/user/*
3. if need to add icons to menu, create or link directory "menu_icons" to /www/user/*
   put icons to that directory and create an icons.css file
   

   /* The index name you put into the config fileand the icon file name in the menu_icons folder */
   .<index>{
           background: url(<icon_name>);
           background-size: 100%;
           background-repeat: no-repeat;
   }

An example config file

web_addons 1
Test_Addon menu_Addon&test_addon.asp&Addon_Test
tools_tab_test1 test1.asp&Test_Tab_1
tools_tab_test2 test2.asp&Test_Tab_2

 

[black-raison-detre]

I just thinking, maybe changing the name of the config file addon_settings.txt to addon_menus.txt is more appropriate.
Also why the 20 tabs limit on Tools tabs? Are there any more limitations on how many menus and tabs can be added to the UI? Currently I haven’t put any limitations on tabs and menu numbers.

 

[heysoundude]

Well, didn’t notice this one and I am a Mac user . But I am just using it for testing css. Not going to include any actual icon in the firmware.

I'm sure the IP lawyers Apple has won't notice this...hopefully for you.

I just thinking, maybe changing the name of the config file addon_settings.txt to addon_menus.txt is more appropriate.
Also why the 20 tabs limit on Tools tabs? Are there any more limitations on how many menus and tabs can be added to the UI? Currently I haven’t put any limitations on tabs and menu numbers.

just how many addons do you want our little consumer/SOHO routers to be running? I'd offer if you need that much space, you should be looking at bigger commercial solutions or DIY with docker packages on significantly more capable hardware

 

[JGrana]

While I do agree that these consumer routers likely don’t “need” 20 tabs, I am encouraged that someone like @black-raison-detre is looking into an easier way to support web based Addons.
Also, as time goes on and new routers spring up, we are seeing some pretty good uplift in processing and memory - right now - Quad Core 64bit 2Ghz processors, 1GB RAM, faster USB3 for external storage/swap.

Writing shell scripts is pretty easy given all the tools/hooks @RMerlin (and Asus) have provided. But, creating an Addon that also utilizes the WebUI is a different beast.

@black-raison-detre , also take a look at some of @Jack Yaz scripts. He is a gifted coder and many of us have taken many parts/functions for our scripting. One can almost create an “Addon Template” based on these scripts.

 

[heysoundude]

Heck yeah, look at @Jack Yaz 's stuff, and @Martineau 's and @thelonelycoder 's and ...well, everything that's mentioned in the Addons forum, including amtm (maybe this is where to start, amtm).

 

[black-raison-detre]

Now working on Vuejs template.
vuejs-template for web addons

The idea is, develop and test the addon page locally, using Vite. API call will be proxied to router. Still need to figure out how the login page work and get the auth token for proxied api call.