edgetx icon indicating copy to clipboard operation
edgetx copied to clipboard
verified publisher icon EdgeTX

feat(color): UI for 3.0

Open philmoz opened this issue 1 year ago • 7 comments

Adding this PR for the 3.0 UI branch so people can (hopefully) try it and give feedback.

First piece is a revised quick menu with two levels of navigation. Top level is the same as the current quick menu. When a menu item is selected that has a sub-menu, the sub menu is shown. Pressing ENTER switches navigation to the sub menu, RTN to go back to top level.

screenshot_tx16s_24-11-26_16-56-40

screenshot_tx16s_24-11-26_16-56-45

philmoz avatar Nov 26 '24 07:11 philmoz

How about vertical screens? How this shows in EL18?

richardclli avatar Dec 01 '24 01:12 richardclli

How about vertical screens? How this shows in EL18?

Same as current - less columns, more rows.

screenshot_el18_24-12-01_15-16-10

philmoz avatar Dec 01 '24 04:12 philmoz

Part 2 - remove tab page icons from Model and Radio setup menus.

  • Move title to top bar to give more room for page content
  • Add button to open quick menu (top left)
  • Add button to close and return to main view (top right)

Only the radio and model setup menus are changed for now. Pressing the quick menu button (top left) opens the quick menu with the current page selected. The UI for the quick menu and close buttons is placeholder at the moment (pending better design).

screenshot_tx16s_24-12-03_14-50-48 screenshot_tx16s_24-12-03_14-50-54

philmoz avatar Dec 03 '24 03:12 philmoz

Got your msg. :) Right on the spot I can see one UI/UX fix - there should be only one focus marker. That means that on top row you dim nonselected icons and selected icon is highlighted but without a frame that serves as focus marker. Will flash is today and give a test run.

JimB40 avatar Dec 03 '24 08:12 JimB40

Changes:

  • SYS key opens quick menu
  • Changed setup page header button UI
  • Long press RTN closes quick menu (shortcut so you don't have to press RTN twice when a sub menu is open)

screenshot_tx16s_24-12-09_08-07-24

philmoz avatar Dec 08 '24 21:12 philmoz

  • I prefer fullscreen popup for more space for the buttons
  • Better blur background effect, please take a look at the iPhone group apps. We shouldn't see through that background to make the popup more focus
  • Prefer different styles for main buttons and child buttons

nhutlv01 avatar Dec 10 '24 02:12 nhutlv01

question. why don't you make colored icon sets instead of having them all-white ? why are all app developers copying this design shit created by indians for M$ ? do you imagine if all of your iphone apps icons were all white like this ?

dsolaray avatar Jun 16 '25 13:06 dsolaray

I like the concept of what is being done here, but IMO the main/carrousel menu is completely unusable on at least the TX16 and T15 screen sizes/resolutions - the icon text is nearly illegible on the T15, and quite hard to read on the TX16. I would stick with two icon rows rather than try to pack three rows in - first line is the upper level, second line is the lower level, and if (spoiler, there will be) there are more icons than can be shown on one line, have scroll indicators/arrows on (each) end as needed and the icons just move along if you try to scroll past the last one shown on the screen (if it isn't the last one) - i.e. similar to the 2.6 behaviour (but it had nothing to indicate you could keep scrolling for more).

https://github.com/user-attachments/assets/1b0eb4f3-a5f2-472c-9aac-50c80f80d15d

Mixes and Outputs edit screens need the channel bars moved as the close button is under them.

Once both of these issues/concerns can be resolved, I don't see why this can't be merged and we'll deal with the fallout / user re-education campaign later 🤭 (I'm joking!! I don't think that will be necessary 🤪). I'd like to get this merged so it's one less branch to be rebased, and we can get on with more UI changes then... 😇

pfeerick avatar Jul 02 '25 03:07 pfeerick

MANAGE MODELS

  1. icon change
MANAGE MODELS

JimB40 avatar Jul 31 '25 19:07 JimB40

MODEL SETUP

  1. Quick Menu 1st level group name change "Model Settings" -> "MODEL SETUP"
  2. Quick Menu 2nd level item name change "MODEL SETUP" -> "GENERAL SETTINGS"
  3. Quick Menu 2nd level item name change "LOGICAL SWITCHES" -> "LOGIC SWITCHES"
  4. Quick Menu 2nd level item name change "CUSTOM SCRIPTS" -> "MIXER SCRIPTS"
  5. MIX Edit topbar channel preview needs to be reworked not to obscure close button
  6. OUTPUT Edit topbar channel preview needs to be reworked not to obscure close button
MODEL SETUP

JimB40 avatar Jul 31 '25 19:07 JimB40

RADIO SETUP

  1. Quick Menu 1st level group name change "Radio Settings" -> "RADIO SETUP"
  2. Quick Menu 2nd level item name change "RADIO SETUP" -> "GENERAL SETTINGS"
  3. Quick Menu item "TOOLS" removed from group
  4. Quick Menu item "SD Browser" removed from group
  5. Quick Menu item "THEMES" removed from group
  6. Screen "HARDWARE->ANALOGS" need to be reworked. Topbar shows group names and Grup item name as any other screen. Instead of icons buttons "<" and ">" should be placed left to close button to allow navigation through 4 different analog monitor srcreens
RADIO SETUP

JimB40 avatar Jul 31 '25 19:07 JimB40

UI SETUP

  1. Quick Menu 1st level group name change "Screens Settings" -> "UI SETUP"
  2. Quick Menu item "THEMES" added to group (moved from RADIO SETUP)
  3. Quick Menu 2nd level item name change "User Interface" -> "TOP BAR"
  4. "TOP BAR" (prevoiusly User Interface" screen needs to be reworked. Delete theme section as theme can be set via "THEMES" item
  5. Quick Menu 2nd level items name change "Main View X" -> "SCREEN X"
  6. Quick Menu 2nd level items name change "Add main view" -> "ADD SCREEN"
UI SETUP

JimB40 avatar Jul 31 '25 19:07 JimB40

TOOLS

  1. New group called "TOOLS".
  2. Quick Menu item "LUA APPS" added to group. Moved from RADIO SETUP called "Tools". New Icon.
  3. Quick Menu item "STORAGE BROWSED" added to group. Moved from RADIO SETUP called "SD CARD"
  4. Quick Menu item "FLIGHT RESET" added to group. Moved from Quick Menu 1st Level called "Reset flight". New Icon
  5. Quick Menu item "CHANNEL MONITOR" added to group. Moved from Quick Menu 1st Level group called "Channel Monitor".
  6. "CHANNEL MONITOR" screen needs to be reworked. Topbar shows group name "MONITOR" and Grup item name "CHANNELS 1-8" as any other screen. Buttons "<" and ">" should be placed left to close button to allow navigation through 4 different monitor srcreens "CHANNELS 1-8", "CHANNEL 9-16", "CHANNELS "17-25", "CHANNELS 25-32"
  7. Quick Menu item "LOGIC SW MONITOR" added to group. Moved from Quick Menu "Channel Monitor->LOGICAL SWITSHES MONITOR ".
  8. Quick Menu item "SPECTRUM ANALYSER" added to group. Moved from "Radio settings->Tools->Spektrum Analyser".
  9. Quick Menu item "STATISTIC" added to group. Moved from "Statistics->Statictics"
  10. Quick Menu item "DEBUG" added to group. Moved from "Statistics->Debug"
TOOLS

JimB40 avatar Jul 31 '25 20:07 JimB40

General remarks

  1. QUICK MENU 1st Level has 5 groups covering main areas (Models, Model, Radio, UI, Tools (Others) with space for additional group user defined "Favourites"
  2. From Quick Menu user can reach only Screens in column "CONFIGURATION SCREEN 1st Level"
  3. Navigation to other configuration sub-screens like "Input Edit", "Mix Edit" placed in columns "CONFIGURATION SCREEN 2nd Level", "CONFIGURATION SCREEN 3rd Level" is done via selecting something on "CONFIGURATION SCREEN 1st Level" and going back via RETURN, NEXT, PREV ets button placed on right side of top bar.

JimB40 avatar Jul 31 '25 20:07 JimB40

@JimB40 Comments on the above changes:

  • please provide .png files for the new icons (manage models, apps, etc). Three sizes are needed - 24x24px, 30x30px and 45x45px.
  • please provide visual design for the Hardware->Analogs and Channel Monitor pages.
  • 'Apps' is not just for Lua, there are built in tools that belong here (ghost config, spectrum analyser, etc).
  • Spectrum analyser does not belong as a separate item (see previous comment).
  • 'Model notes' is missing.
  • 'About EdgeTX' is missing.

philmoz avatar Aug 01 '25 02:08 philmoz

I have updated the PR with the revised menu structure.

The button size has been increased to accommodate a larger font for the text under the icons. This means that the top level is limited to 6 icons max and the sub level to 12 icons max (per top level item).

Outstanding issues:

  • [x] new 'Manage models' icon PNG files (3 sizes - 24x24px, 30x30px and 45x45px)
  • [x] new 'Apps' icon PNG files (3 sizes as above)
  • [x] new 'Flight reset' icon PNG files (3 sizes as above)
  • [ ] 'Model notes' not in menu structure (currently removed)
  • [x] 'About EdgeTX' not in menu structure (currently removed)
  • [x] Visual design for 'Channel monitor' to remove tabs
  • [x] Visual design for 'Hardware / Analogs' to remove tabs
  • [x] Update icon/menu page text strings to match design images above.
screenshot_tx16s_25-08-01_15-56-16 screenshot_el18_25-08-01_15-56-05

philmoz avatar Aug 01 '25 07:08 philmoz

Icons pack.

comparing to posted design

  • "Manage Models" new
  • "Radio Setup" new
  • "Radio Setup > General Settings" changed
  • "Model Setup > General Settings" changed (same as Radio)
  • "Tools > Apps" new
  • "Filght Reset" new

3 icons for TopBar navigation

  • "Close" smaller with frame
  • "Next" for LVGL button to navigate "Analogs" and/or "Channel Monitor"
  • "Prev" for LVGL button to navigate "Analogs" and/or "Channel Monitor"

2025-08-01 3.0 Icons.zip

JimB40 avatar Aug 01 '25 13:08 JimB40

Hardware > Analogs

screen-2000-09-18-063414 screen-2000-09-18-063424 screen-2000-09-18-063430 screen-2000-09-18-063436

JimB40 avatar Aug 01 '25 15:08 JimB40

About EdgeTX

  • Merged into on Screen
  • added text link to website
  • adjusted fw info labels/columns for better readability
  • because screen includes info abt Modules firmware better name for this nav tree item will be "SOFTWARE INFO"
Screenshot-2025-08-01-at-17 23 55 Screenshot-2025-08-01-at-17 48 05

JimB40 avatar Aug 01 '25 16:08 JimB40

Icons have been replaced. Channel Monitor and Analogs screen UI updated.

On landscape layouts I moved the title line for Channel Monitor and Analog into the top bar for consistency and to increase space for page content.

screenshot_tx16s_25-08-02_14-15-20 screenshot_tx16s_25-08-02_14-15-31

On portrait layouts I had to keep the extra line for the title due to space constriants.

screenshot_el18_25-08-02_14-19-43 screenshot_el18_25-08-02_14-19-54

philmoz avatar Aug 02 '25 06:08 philmoz

Merged the 'About' QR code into the 'Version' page. I changed the name to 'About EdgeTX'.

For portrait layout radios I have changed the quick menu top level to a vertical layout as I think it looks cleaner. The sub menus still layout by row. @JimB40 what do you think?

screenshot_el18_25-08-02_18-56-15 screenshot_el18_25-08-02_18-56-27

philmoz avatar Aug 02 '25 09:08 philmoz

Vertical layout may be good it has more 2nd level slots.

12 slots on horizontal is very constraining for Model Setup. Even HELI SETUP will vanish from QM (Quick Menu) as this is rare "set and forget feature" it leaves only one slot when everything is ON. Planned to move to QM at least:

  • RF modules
  • Timers
  • Startup check / Model Notes Thinking if we can fit.

But first thing first.

  • Typograpy and Naming
  • Navigation & Focusing

Will comment after test.

JimB40 avatar Aug 02 '25 09:08 JimB40

@JimB40 - I have updated the PR with all the new icons from the zip file. Please check that all are correct. In future it would help if you use the existing file names so I don't have to manually update each one.

philmoz avatar Aug 02 '25 23:08 philmoz

In future it would help if you use the existing file names so I don't have to manually update each one.

Already was trying to find a way in Figma to get objects custom name for export. So far no luck.

JimB40 avatar Aug 03 '25 08:08 JimB40

Okay so Typography for navigation tree

My go to solution for menu is always capitals for better readability. As we have in all other menus (lists) Navigation tree names appear in QM and TopBar, so I can see that using capitals will easily exeed alowed space in QM and TopBar for vertical LCD. No mentioning that in some cases some of TopBar right side area is occupied by aux buttons

Key assumptions

  1. Due to above data space constrains we keep 1st and 2nd level Navigation Tree names consisting max 2 words

  2. Names are stored internaly in low case format with 1st letter captalized. ie "Manage Models", "Storage", "Global Variables"

  3. We may try to display 1st and 2nd level names just on horizontal LCD TopBar converting stored name via uppecase(name) but let's start with low case 1st letter capitalized it may look okay.

  4. In QM with 2 words names we try to put them in two lines to provide separation from frame & readbility Examples of good separation

screen-2000-09-20-004443 screen-2000-09-20-005234

Examples of bad separation

screen-2000-09-20-005513 screen-2000-09-20-005518 screen-2000-09-20-004456

This would need you to write some smart functiond that will split wide 2 words names into 2 lines in QM. or maybe store names with special character between words that will be replaced with /br in QM and with space in case or TopBar. Just ideas if you find it to difficult we will try differen solution (like hilighting icon backgound that will take less space)

JimB40 avatar Aug 03 '25 09:08 JimB40

QM Naming review for last arifact (#b3c330e)

  1. Radio Setup > Radio Setup change Radio Setup > General Settings

  2. Model Setup > Model Setup change Model Setup > General Settings so it will appear in TopBar as Radio Setup General Settings not Radio Setup Radio Setup

  3. UI Settings change UI Setup 1st Level uses "Setup" while 2nd level "Settings"

  4. Model Setup > Heli Setup change Model Setup > Heli Settings same as in point 3

  5. UI Setup > User Interface change UI Setup > Top Bar that's content on destination screen when duplicated theme selection is ditched.

  6. Tools > Channel Monitor change Tools > Channels Monitor plurar form

Rest seems proper.

JimB40 avatar Aug 03 '25 09:08 JimB40

Feedback on discord (General channel) - https://discord.com/channels/839849772864503828/839849772864503832/1401503862891876473

philmoz avatar Aug 03 '25 10:08 philmoz

  1. Radio Setup > Radio Setup change Radio Setup > General Settings
  2. Model Setup > Model Setup change Model Setup > General Settings
  3. UI Settings change UI Setup
  4. Model Setup > Heli Setup change Model Setup > Heli Settings

Done.

  1. UI Setup > User Interface change UI Setup > Top Bar that's content on destination screen when duplicated theme selection is ditched.

Do you want to remove theme selection from this page?

  1. Tools > Channel Monitor change Tools > Channels Monitor

That's not normal English grammar - a 'box of apples' is an 'apple box', not an 'apples box'. It is also described as 'Channel Monitor' in the documentation (https://manual.edgetx.org/color-radios/channel-monitor).

philmoz avatar Aug 03 '25 10:08 philmoz

I have added code to split the menu titles to two lines by replacing spaces with newline characters ('\n'). It does not do this if the 2nd word is 1 or 2 characters long (Screen 1 - Screen 10 is not split).

This assumes that menu titles are one or two words. I have not checked all the language files so there may be some that break. It may also break on RTL languages.

philmoz avatar Aug 03 '25 10:08 philmoz

  1. UI Setup > User Interface change UI Setup > Top Bar that's content on destination screen when duplicated theme selection is ditched.

Do you want to remove theme selection from this page?

Yes. Theme can be set as active in "UI Setup > Themes". Redundant.

  1. Tools > Channel Monitor change Tools > Channels Monitor

That's not normal English grammar - a 'box of apples' is an 'apple box', not an 'apples box'. It is also described as 'Channel Monitor' in the documentation (https://manual.edgetx.org/color-radios/channel-monitor).

Okay, you're native.

JimB40 avatar Aug 03 '25 14:08 JimB40