Web config power on/off indicator per section (gate, comp, rev, mod, del, amp) on left side tab overview

[Fozziemusic]

I just got started with all of this great stuff and enjoy it hugely - thanks for all the greatness!

Now the idea - first the issue: I have an S32-S3 Zero as I wanted to keep the footprint as small as possible and use my phone as visual interface via web config. I use an Mvave Chocolate to turn on/off FX, however, it also does not give any visual feedback, and the web interface only shows enabled/disabled state per tab. I would like to see an overview of enabled/disabled functions as on the S32 versions with screens - but on the web configurator

Suggested solution: can the tab on the left side of the screen indicate active sections by a visual cue (e.g. font color change, or background color change)? This applies to the sections that have the 'enable' option: gate, comp, reverb, Mod, Delay, Amp. The visual cue can be similar-to-but-different-from the current visual cue to show the highlighted tab (orange background, orange font).

In this way, on overview of active sections can be had in one view without adding new tabs or elements to the web config.

[Fozziemusic]

Alternative option: add a tab with an overview of active functions - mirroring the icons of active elements on screen-equipped boards.

I have no experience with html/webdesign - no clue what would be easier. The functionality would really be helpful for me and possibly all Zero/screenless users.

[Builty]

Yes I like this idea. A few others have suggested similar, to make the main web page a "performance" view or something, which has the amp skin and preset name and status of effects, and then press a settings button to get to the sliders for adjustment.

Web coding is not so easy for me, but I would like to do it. I need to get through some other tasks first however.

[unplug0168]

I also wanted that kind of feature so I implemented a little something. Not the most beautiful thing, but it works.
As of now, it only works for compressor, modulation and delay. I did not implemented reverb since I run an external reverb that is On pretty much all the time.

[Fozziemusic]

Nice, that is indeed what I am looking for! Care to share how you achieved this? I'm not a programmer, so not sure I will be able to understand, but I've been able to do some scripting in the past.

[unplug0168]

case TONEX_PARAM_COMP_ENABLE:
configureParamSwitch("cp_enable", value);
setParamData("cp_enable", parseInt(key));
if (value == 1) {
tablinks = document.getElementsByClassName("tablinks");
if (tablinks[1].className == "tablinks fxactive") {
tablinks[1].className = tablinks[1].className.replace(" fxactive", "");
tablinks[1].className += " fxactive";
}
else {tablinks[1].className += " fxactive";}
//console.log(tablinks);
//console.log("The Compressor state has changed");
}
else if (value == 0) {
tablinks = document.getElementsByClassName("tablinks");

                                for (i = 0; i < tablinks.length; i++) {
                                    tablinks[i].className = tablinks[i].className.replace(" fxactive", "");
                                }
                                if (document.getElementById("mo_enable").checked == true){ tablinks[4].className += " fxactive";}
                                if (document.getElementById("dl_enable").checked == true){ tablinks[5].className += " fxactive";}
                                //console.log(tablinks);
                            }
                        break;

That's one the edits I made in the HTML file to activate the different tabs. This one is for the COMP, but basically you have to do it for all the effects that need to be controlled.
I also added a style in the style description to make the tab blue.
.tab button.fxactive { background-color: #037ffc; color: #FB9230; }
Again, not the most elegant thing in the world, but it works.

[Fozziemusic]

Thanks a lot! This seems to be comprehensible for simple minds like me 👍

[unplug0168]

Now all I need is to be able to control 3 leds to show the state of the effects, but that one I can’t figure it out yet. Not sure where those values are stored.

[mchbrk]

What are the limitations of the web app for the controller? From dev perspective its getting very big and shady as one html file to work with 🫣😇😅

[mchbrk]

Wondering about porting web app into OO typescript 😎🤓😇

[Builty]

The effect icons use a flex layout to evenly space along with the screen width.

Yeah the index file is a beast. The controller has no file system, so it needs Jquery, Bootstrap and the images all embedded inside.
The ESP-IDF does support a file system on flash, which I have been thnking about, but its not a trivial thing to do.

[Fozziemusic]

This is looking really really great. Can't wait!

[mchbrk]

I was looking at ESPUI and ESP32-sveltekit libraries today a bit... ESPUI is very "oldschool" while the other one is afaik platformio based with some examples I will look into later more 😇 I am too newbie in embed coding but quite robust with web tech I think 😇

Btw. Fun fact, I discovered that @vit3k whose you mention as USB protocol demistifier is Polish guy as I am 😇 That's a huge distance intercontinental connection in the community 🤩