Redesigned OLED menu. Better UI, easier development.

[PSHarold]

Main features:

• Easier development and cleaner codes. You can now dynamically create menu items, thus supporting showing preset names rather than 1234567. (16 presets max, use WebUI for more)
• Translations. Menu items that need to be translated use xbm images instead of C/C++ strings. Run generate_translations.py to update translations. Menu items can have varying font sizes.
• Long text will automatically scroll.
• Better UI. A unified status bar for navigation and pagination.
• Two new menu items for checking WiFI info and clearing connection (reset to AP mode).
• Shows a screensaver after 3 minutes of inactivity.
• OLEDMenuConfig.h contains some options. Be careful with these options as you can easily run out of BSS.
• OSD menu
  • Brightness
  • Constrast
  • Hue: Not in use.
  • Volume: Not in use.
  • Horizontal Shift
  • Vertical Shift
  • Horizontal Scaling
  • Vertical Scaling

Generate translations for menu items:

1. Open generate_translations.py and locate menu_items.
2. Translate all items in the list by adding "key: value" to the dictionaries, where key is the language code (can be any string) and value is the translated string in the target language.
3. Run python generate_translations.py -font size1@path_to_font1 size2@path_to_font2 ... LANG, where size1, size2, ... are the sizes specified in menu_items. path_to_font1, path_to_font2,... are paths to font files. LANG is the language code used as keys in menu_items For example: python generate_translations.py --font 12@/Users/xxx/Library/Fonts/MesloLGLNerdFontMono-Regular.ttf 16@/Users/xxx/Library/Fonts/MesloLGLNerdFontMono-Regular.ttf will update English strings (en-US is default and can be omitted) python generate_translations.py --font 12@some-font.ttf 16@some-other-chinese-font.ttf zh-CN will translate the strings into Simplified Chinese and use 2 different fonts.

Misc:

• Move some struct definitions to header files.

Need testing.

[PSHarold]

I do not have a rotary encoder on my gbsc (only buttons). Could someone help me test this?

[Metaln00b]

I have one and could test. But we need more testers.

EDIT: Encoder is working, and my first tests are good. Nice work

[PSHarold]

@nyanpasu64 @rickdgray

[rickdgray]

Just hooked up the rotary encoder a couple hours ago. I'll load it up tomorrow and try it

[YoImLee]

I really appreciate the new font, it's much easier to read. I have been testing for a little while and have found a few things.

• There seems to be a problem when more than 10 presets are saved on the device. When entering and backing out of 3 different menus the OLED displays "Maximum number of items" on screen before rebooting. With 10 presets or less this doesn't occur.

Picture


• There still seems to be an issue where custom presets need to be loaded twice before the correct one is loaded. I have tried it with another clean ESP unit and the same happens there. Custom filter settings are also not loaded, even with the setting enabled in the web UI.

• This is fairly minor, but the "Connected" checkmark on the wifi info screen is cut off and doesn't automatically scroll. Perhaps the checkmark symbol could just be removed or the text could be moved to the left slightly.

Picture


• The OSD is a neat addition, but the rotary encoder controls seem to be inverted currently.

[nyanpasu64]

The error actually says Maxmimum (misspelled),which may help in grepping the code for where it comes from.

[rickdgray]

Hey pulled down your branch and gave it a try.

Man, this is such an improvement to the old UI.

I agree, the new font is better and more readable since it's larger. It does cut off the checkmark now, though.

I'm not really sure what the new menu item is for? OSD Menu? When clicked, I just see a timer and that's it.

IDK if it's just my rotary encoder, but the rotations are not always consistent. Sometimes I turn it and it doesn't move. Sometimes it's delayed. Seems like it maybe it is not reading input while processing a selection change? Like I have to briefly pause between each turn to make it change selection properly. Again, I'm not sure if it's just me. I did buy a pretty cheap encoder and I just have it wired up on breadboard right now.

I also find the reversed movement of the encoding kind of off. I expect the selection to go down if I turn it clockwise. Currently, it goes down if turned counterclockwise.

I haven't tried the issue with many presets, yet.

[ramapcsx2]

Okay, I think the rotary encoder stuff will be tricky. This seems to be something that needs tuned delays on parsing state changes, to debounce the reads and to try and avoid missing steps. It's not really an UI thing, but it seems it got changed in this commit? Maybe to tune it, have a couple of options exposed for users to try different delay / debounce settings. This way, working values could be reported.. Maybe overkill though :p

Double load requirement of custom presets sounds like a new logic bug.

[YoImLee]

The OSD menu opens a menu on screen that lets you tweak a few settings. My rotary encoder seems to work correctly where clockwise is down and vice versa. There's #define NEW_OLED_MENU_REVERSE_ROTATORY_ENCODER in gbs-control.ino to change the direction if needed.

[rickdgray]

I wonder if perhaps your encoder is wired in reverse? Mine is wired as per this

Edit: oh sorry; I didn't notice it was not harold responding. Well that's two votes for both directions, then. Which direction should be default?

[PSHarold]

I wonder if perhaps your encoder is wired in reverse? Mine is wired as per this

I do not have an encoder on my gbsc. That's why there are some problems with the encoder. I will "re-reverse" it in the code to make it behave normally. Also, There's a #define NEW_OLED_MENU_REVERSE_ROTATORY_ENCODER 0 in gbs-control.ino, if at anytime you want to reverse it again, change it to 1.

[PSHarold]

Working on the problems.

[rickdgray]

OK I just loaded up what's in master to compare (sorry, only just got my build in a running state yesterday!).

The direction of the encoder is actually the same. But I do still feel it's backwards and probably should be switched regardless. That's just my opinion; I realize this could be subjective.

I don't actually think this PR introduced a bug with debouncing or buffering the inputs. Master branch also has the same behavior. If you spin the encoder quickly, it skips a lot of inputs. I definitely feel like there's some improvement to be made, but in my opinion, it is out of scope and should be it's own PR.

I see now the on screen display; it is very cool! Very convenient to be able to change on the fly. The scroll bars are bugged currently however. A single shift left or right jumps from 0 to 100. The change still works correctly, so probably just the percent calculation for the OSD.

[PSHarold]

OK I just loaded up what's in master to compare (sorry, only just got my build in a running state yesterday!).

The direction of the encoder is actually the same. But I do still feel it's backwards and probably should be switched regardless. That's just my opinion; I realize this could be subjective.

I don't actually think this PR introduced a bug with debouncing or buffering the inputs. Master branch also has the same behavior. If you spin the encoder quickly, it skips a lot of inputs. I definitely feel like there's some improvement to be made, but in my opinion, it is out of scope and should be it's own PR.

I see now the on screen display; it is very cool! Very convenient to be able to change on the fly. The scroll bars are bugged currently however. A single shift left or right jumps from 0 to 100. The change still works correctly, so probably just the percent calculation for the OSD.

Sorry, haven't pushed yet. I also think it's subjective. Sometimes I feel it's reverserd and the next day I feel it's normal. So
I stopped using the encoder and replaced it with buttons (there are some pins not in use). As for the OSD, only Brightess and Constrast can be adjusted progressively (percent bar). The other settings either don't have upper/lower boundaires or have just 2 values (on/off), so the bars are either full or empty.

[YoImLee]

@rickdgray have you tried changing #define NEW_OLED_MENU_REVERSE_ROTATORY_ENCODER to 1? I think wiring the rotary encoder one way or another depends on the way you interpret the symbol on the schematic and this option makes it a non-issue anyway.

[rickdgray]

As for the OSD, only Brightess and Constrast can be adjusted progressively (percent bar). The other settings either don't have upper/lower boundaires or have just 2 values (on/off), so the bars are either full or empty.

Right, that makes sense.

@rickdgray have you tried changing #define NEW_OLED_MENU_REVERSE_ROTATORY_ENCODER to 1? I think wiring the rotary encoder one way or another depends on the way you interperet the symbol on the schematic and this option makes it a non-issue anyway.

Yeah, I did just now. It felt perfect after that. No big deal either way. I'll probably make a PR for the documentation; I think the direction should be mentioned there.

[PSHarold]

@rickdgray You can now reverse control for menu navigation and OSD navigation separately in OLEDMenuConfig.h via REVERSE_ROTARY_ENCODER_FOR_OLED_MENU and REVERSE_ROTARY_ENCODER_FOR_OSD

@YoImLee

• Custom presets loading should be working correctly now, I think. I don't have a retro console to test it.
• The menu can now list up to 16 custom presets. If you have more, there will be a prompt saying you need to use WebUI to access the remaining ones.

[YoImLee]

Custom presets now load first try! It would be nice if filter settings saved to the presets were loaded in as well. The old menu didn't do this either though, so if it's not possible it's no big deal.

The REVERSE_ROTARY_ENCODER_FOR_OLED_MENU option works as expected. REVERSE_ROTARY_ENCODER_FOR_OSD doesn't seem to work for me however.

Having more than 10 presets no longer causes the "Maximum number of items" error and works properly all the way up to 16. Having more than 16 indeed shows a prompt.

The menu seems quite stable now, I like it.

[PSHarold]

Custom presets now load first try! It would be nice if filter settings saved to the presets were loaded in as well. The old menu didn't do this either though, so if it's not possible it's no big deal.

The REVERSE_ROTARY_ENCODER_FOR_OLED_MENU option works as expected. REVERSE_ROTARY_ENCODER_FOR_OSD doesn't seem to work for me however.

Having more than 10 presets no longer causes the "Maximum number of items" error and works properly all the way up to 16. Having more than 16 indeed shows a prompt.

The menu seems quite stable now, I like it.

I'm glad you like it. I don't understand how saving and loading presets work and hopefully someone can make that happen.

REVERSE_ROTARY_ENCODER_FOR_OSD should now work correctly. (btw did you set both REVERSE_ROTARY_ENCODER_FOR_OLED_MENU and REVERSE_ROTARY_ENCODER_FOR_OSD to 1? In that case the old code just reversed osd nav to normal, kinda like -1*-1=1 because osd nav depended on oled nav)

[YoImLee]

Yeah, I did try all combinations and I don't remember exactly what caused it to not behave as expected. Either way this new code seems to work correctly for me.

[rickdgray]

Awesome work!

[rickdgray]

I just pulled down the latest and everything discussed works correctly. The only things I would mention is that the 2 OSD menus are still disabled, and that in 1080 resolution, the OSD is stretched and doesn't follow the same aspect ratio.

[ramapcsx2]

All good then? :)

[Metaln00b]

@PSHarold Hey, the scrensaver is nice :D and it could solve #506

[rickdgray]

@ramapcsx2 I vote to merge.

@Metaln00b I agree! This would resolve that ticket too.

[lito69]

Hello, I would love to have those menus, but I don't know how to do it, can someone please compile a bin for me? Or explanation of how to compile it. I have gbsc retroescaler Thank you

[ramapcsx2]

Okay, thanks to version control, even if this somehow turns sour, we can revert it later. Going to merge in 1-2 days! :)

[lito69]

Bien, gracias al control de versiones, incluso si esto de alguna manera se vuelve amargo, podemos revertirlo más tarde. ¡Se fusionará en 1-2 días! :)

Thanks, it would be very fun to see an OSD with basic resolution information and HZ that we are using.

[nyanpasu64]

Don't have time to review this pull request, but if it works fine in testing I'll let it be merged. (I've decided to stop insisting that I fully understand projects I'm not actively maintaining.)

---

It would be nice if filter settings saved to the presets were loaded in as well.

I don't understand how saving and loading presets work and hopefully someone can make that happen.

Story time... currently if you load a preset along with its filter settings, your browser first makes a web request to load a preset, and during preset loading your browser makes another request to restore filters.

const loadPreset = () => {
    loadUser("3").then(() => {
        if (GBSStorage.read("customSlotFilters") === true) {
            setTimeout(() => {
                fetch(`/gbs/restore-filters?${+new Date()}`);
            }, 250);
        }
    });
};

Unfortunately, not only does preset loading not finish by the time the browser tells the GBS to restore filters, but worse yet the GBS runs the "/gbs/restore-filters" callback/handler during the middle of talking to hardware using I2C, which I suspect may lead to stack overflows and crashes! This is not easily fixable without replacing the web framework (which requires a substantial code rewrite beyond the energy I can volunteer).

• Anyway... if you want to restore a filter in this PR, you can either copy-paste the contents of the "/gbs/restore-filters" callback, or (better) extract it to a free function to avoid duplicate logic.
• Unfortunately you don't know(!) whether the user wants to restore a filter or not, because customSlotFilters (the option to restore filters with a preset slot) is stored in the browser rather than the GBS-C!!!
  • Perhaps we should move it to a variable in the GBS's settings, but this may change the settings file format and IDK if our code can migrate saved settings or not. Also users may be confused if the toggle resets to its default value when flashing new firmware (unless you change the HTML to upload the old value to the GBS on page load, before clearing the flag, or something like that).
• I think letting the user choose whether to restore filters or not is well beyond the scope of this PR, because of the refactoring required and unanswered design questions.
  • [ ] Is it a bad idea to unconditionally load filters when loading presets (or with a build-time flag)?

---

The rest of this post is more brainstorming than related to this PR directly... As a fix to existing code (not introduced in this PR), I very much think that this code should not run from "/gbs/restore-filters", but instead after case '3': // load custom preset (to both avoid sending web requests during I2C, and avoid potential race conditions though I don't see anything obvious). But I again don't know how to only run it if the user enables per-slot filters.

• As mentioned, you could move customSlotFilters from browser storage to the GBS firmware itself.
• Are we out of command characters, and can't introduce a "load preset and filters" command?
• The worse solution is to have the browser send a second type 2 userCommand for loading presets. This isn't a good design, because userCommand is set by the web server too (again during I2C requests sadly), and user commands overwrite unprocessed commands rather than being queued! (I think this won't overwrite any commands in practice, but it's bad design IMO.)
  • TBH I don't think there's a perfect solution if one or more browsers sends commands faster than the server can handle. Different (not necessarily exclusive) changes include queueing requests to a limit before replying to browser requests with an error, making the browser wait until a preset is fully loaded before loading filters (and dropping unfinished loads if you load a different one???), or dropping concurrent requests without queueing at all (is this worse than current behavior?)

[YoImLee]

Very interesting. I always found it a bit odd how that particular setting was saved in the browser.

[rickdgray]

@lito69 https://ramapcsx2.github.io/gbs-control/Wiki/Software-Setup.html

[lito69]

@lito69 https://ramapcsx2.github.io/gbs-control/Wiki/Software-Setup.html

Hello, yes, the bin to flash my esp8266 with the files can be compiled, but I don't know how to implement everything they edit here for these mods

[ramapcsx2]

Sounds like the entire server stuff should be redone, ideally when moving to other hardware (exploit their improvements, such as multi core). This PR though sounds good. Let's hope the server will manage :)

[ramapcsx2]

Thanks for the work done here everyone! It would be great if you could monitor a bit, see whether people have issues they can't solve :)

[lito69]

I have found an error: When I select 1289x960 it is not marked in the web interface. The OSD sometimes when you raise or lower the bar goes to extremes, it does not go up percentage wise. The osd cannot select volume or what I think is color. GBSC is wonderful now! Thank you very much, I am happy with these things, if there could be temporarily an osd with basic resolution and hz information that would be wonderful.

https://www.youtube.com/watch?v=EyoqJvYDYd8

[PSHarold]

I have found an error: When I select 1289x960 it is not marked in the web interface. The OSD sometimes when you raise or lower the bar goes to extremes, it does not go up percentage wise. The osd cannot select volume or what I think is color. GBSC is wonderful now! Thank you very much, I am happy with these things, if there could be temporarily an osd with basic resolution and hz information that would be wonderful.

https://youtu.be/EyoqJvYDYd8?si=IfbWwkx-vgS3QJqN

1. Only Brightess and Constrast can be adjusted progressively (percent bar). Scaling and Moving cannot because I used exisiting code to achieve these two functions and haven't implemented percentage. It requires refactoring some functions. I'll fix it.
2. Volume and Hue are disabled because there are no corresponding controls in gbsc, I think.
3. As for WebUI, can someone help confirm and locate the problem?

[lito69]

Thank you, it's fun for me to try, I put in my previous message a link to YouTube where I try it, I'm proud of the community.

https://www.youtube.com/watch?v=43IozivnS9Y

Is there a possibility of making an osd with basic resolution and hz information? As on the OLED screen but on the TV, a duration of 5s is enough

[YoImLee]

I have found an error: When I select 1289x960 it is not marked in the web interface.

1280x960 will only work with 60Hz. It seems like you're using a 50Hz source in your video, which will only work with 1280x1024. I think this is by design and not a bug.

When using a 50Hz and selecting 1280x960 the GBS will automatically switch to 1280x1024, and vice versa.

[lito69]

He encontrado un error: Cuando selecciono 1289x960 no está marcado en la interfaz web.

1280x960 sólo funcionará con 60Hz. Parece que estás usando una fuente de 50 Hz en tu vídeo, que sólo funcionará con 1280x1024. Creo que esto es por diseño y no un error.

Cuando utilice 50 Hz y seleccione 1280 x 960, el GBS cambiará automáticamente a 1280 x 1024 y viceversa.

ok, perfect

[TaHo82]

I recently switched to this version. And I've noticed that all my profiles for the 50 Hz consoles only output a "squeezed" picture like 16:9. The resolution is 1280x1024. If I then set the resolution to 1920X1080 everything is back to 4:3 but I lose the Wifi connection to the GBS-C.

Am I the only one who has this problem?

[nyanpasu64]

Do you get different results here vs. older software versions? Are you applying profiles from the web UI (behavior inadvertently changed in this PR?) or the OLED menu (rewritten)?

[TaHo82]

In the old version, the aspect ratio was correct at a resolution of 1280x1024. The profiles were created in the old version via the web UI and also worked. It is possible that a value was changed by mistake, but I am not sure what can cause such behavior? I have also tried to do a complete reset and create new profiles. But unfortunately with the same result. I will switch to an old software version when I get the chance and see if it works again.

[nyanpasu64]

Are you applying profiles from the web UI or the OLED menu?

[TaHo82]

I have tried both, with the same result.

[Metaln00b]

I have tried both, with the same result.

Can you show us the output of the console? Use the serial console via USB. Maybe then we can see why the connection breaks off and maybe we can also see if something goes wrong when switching.

[ramapcsx2]

@YoImLee By design, yea. PAL sources have a higher line count than NTSC, so they get a different ideally matching line multiplier. It comes out to "by 1024" for PAL and "by 960" for NTSC. And yea, they're the recommended profiles for each format.

[Aleksandr-S12]

The new menu looks very good ! But still there is no better full-fledged OSD. I'm sorry, I'm not doing projects on (github), but I made OSD on STV 9426 separately. If someone wants to create such a mod or integrate it into the GBS control project, I can give the source code. This is the old version https://youtu.be/mX-OPXw0_Cs. Here is the new design

[Aleksandr-S12]

Completed the OSD migration to the new GPS control firmware. Here you can download the source code + instructions https://drive.google.com/file/d/1A3cEvOVxRw7vXp-hBSo_EXhc9TweQ5E0/view?usp=sharing

[nyanpasu64]

• Does this require more chips beyond an unmodified GBS-C?
• Please create a new issue (or pull request) to discuss OSD, or post in an existing issue like #521. It's best not to spam users who were discussing the OLED menu as opposed to an OSD.
• I can't review the code now, but why didn't you publish it as a Git branch/commits rather than a source code archive?

[Aleksandr-S12]

Unfortunately, there is no time to learn how to work on github (. I hope that someone will do it for me, so I posted the archive. To control the OSD menu, you only need to connect the STV9426 chip. You can buy STV9426 on Aliexpress