Tmpe: [EPIC] UI overhaul discussion thread

[aubergine10]

Summary of plans for UI overhaul.

TMPE button

The 'crown' button that toggles the TM:PE toolbar:

• The 'crown' is weird UI for a traffic mod - maybe change it?
• Right clicking this button should ideally open TM:PE settings screen (mod options).

Toolbar

I'd like to see a major overhaul of the toolbar (aka 'main menu'). See: #51 and #21

I think we can provide more functionality with 8 buttons than the current 12 buttons.

Lights button - see: #8

• Purely for timed traffic lights
  
  
  
  • The 'toggle traffic lights' feature is moved to Junctions button - see later
  
  
  • The 'manual traffic lights' feature becomes obsolete if we improve timed traffic lights
  
  
• Tool button:
  
  
  
  • Visible if 'timed traffic lights' enabled on maintenance tab
  
  
  • Left click = activate/deactivate tool
  
  
  • Right click = toggle persistent 'timed lights' overlay
  
  

Junctions button - see: #6

• Merge priority signs, junction restrictions and toggle traffic lights in to one 'tool'
  
  
  
  • Note: Crossings feature moved to Pedestrians tool - see later
  
  
• Tool button:
  
  
  
  • Visible if 'priority signs' and/or 'junction restrictions' enabled on maintenance tab
  
  
  • Left click = activate/deactivate tool
  
  
  • Right click = cycle through persistent junction overlay options
  
  

Overlays: As there are two applicable, right-click needs to cycle combinations (as applicable, depending on what's enabled on maintenance tab):

• None
• Priority Signs
• Junction Restrictions
• Both (Priority + Restrictions)

Pedestrian button - see: #40

• Dedicated tool for working with crossings
• Tool button:
  
  
  
  • Visible if (new) 'pedestrian crossings' enabled on maintenance tab
  
  
  • Left click = activate/deactivate tool
  
  
  • Right click = toggle (new) persistent 'transport routes' overly
  
  

Routing button - see: #41

• Merge lane arrows and lane connector features in to one tool
• Tool button:
  
  
  
  • Visible if 'lane connector' enabled on maintenance tab
  
  
  • Left click = activate/deactivate tool
  
  
  • Right click = toggle persistent 'lane connectors' overlay
  
  

Speeds tool - see: #84

Vehicles button - see: #42

• Enhances the tool with lane highlighting an eraser compatibility
• Tool button:
  
  
  
  • Visible if 'vehicle restrictions' enabled on maintenance tab
  
  
  • Left click = activate/deactivate tool
  
  
  • Right click = toggle persistent 'vehicle restrictions' overlay
  
  

Parking button - see: #47

I have some enhancement ideas which I'll post in separate issue

• Tool button:
  
  
  
  • Visible if 'parking restrictions' enabled on maintenance tab
  
  
  • Left click = activate/deactivate tool
  
  
  • Right click = toggle persistent 'parking restrictions' overlay
  
  

Eraser button

I'll create separate issue to describe this, but in summary:

Multi-purpose tool:

• Can delete customisations associated with active tool
  
  
  
  • For example, if lane arrows tool is already active, click eraser then click junction to erase the lane arrow/connection customisations for that lane
  
  
• When used on its own, shows additional buttons for despawning/clearing traffic, etc

[krzychu124]

I'll add new milestone with regards to User Interface changes.

Additionally I'm thinking about setting up few projects to group some of issues and easier progress tracking, but I'm not sure its worth time.

[aubergine10]

I imagine the UI updates will be spread across releases / milestones. It might be worth having a "UI" label or project though...

[aubergine10]

Simplification of tool / button names:

• Lights tool
• Junction tool
• Pedestrian tool
• Routing tool
• Speeds tool
• Vehicle tool
• Parking tool
• Eraser tool

Lights tool would then become obvious place to toggle traffic lights. Need to ponder how that would work.

Also, if user goes in to Eraser tool (whilst not in another tool), they could Ctrl+Click the other tool buttons to erase stuff associated with them (with confirm dialog to avoid disasters)?

• Eraser -> Vehicles = reset all vehicle restrictions to defaults
• Eraser -> Lights = reset all traffic lights to defaults
• Eraser -> Routing = reset all lane arrows/connectors to defaults
• etc...

[RenaKunisaki]

Any chance to have the button embed into the toolbar like some mods (Touch This, Find It) do?

Also, if it hasn't been done already, a way to apply junction restrictions to an entire roundabout at once?

[brunoais]

Also, if it hasn't been done already, a way to apply junction restrictions to an entire roundabout at once?

That is not UI but it is something I'd like also. I'll make an issue for it.

[aubergine10]

@RenaKunisaki We're working on something like that - see #51 - we hope to have a button that adapts to the design of where you drag it (eg. if you drag it over main toolbar strip, it will become a toolbar button).

As for the junction restrictions, we hope to have something like that at some point, but it relies on reliable roundabout detection. It would be better if the roundabout builder mod added the restrictions (I think it already has integration with TMPE but not had chance to test).

[brunoais]

As for the junction restrictions, we hope to have something like that at some point, but it relies on reliable roundabout detection. It would be better if the roundabout builder mod added the restrictions (I think it already has integration with TMPE but not had chance to test).

It has TMPE integration, although it sometimes fails like in this video.
In my case, more than roundabouts, I'd want the priority road to have different junction restrictions such as "vehicles enter a blocked junction" for the main road. As for the detection, the one used for priority roads of "Priority signs" appears to be fine, at least, for an initial version.

[Strdate]

Hi, I found this thread by accident. My Roundabout Builder mod sure has integration with TMPE, but uses a little cheat to apply the restrictions. After a segment is built, TMPE waits for some time before setting it up, thus I cannot apply the restrictions right away, as they would be removed right after. Thus I added a stopwatch to wait for some time and then apply them, but I am not too happy about it. It would be probably better to wait for a given number of simulation steps because it sometimes happens that the stopwatch goes off too quickly. Anyway, if you have any advice how to integrate it with TMPE better please tell me

[kvakvs]

@Strdate Let's make another issue and discuss there (i have created #472).

I have some ideas, like there we have an issue regarding an event sending/handling in TM:PE #426 (this is regarding AI but it can be reused for external commands just as well), so if that is ever implemented, you could put an event requesting road restrictions change.

[kvakvs]

@aubergine10 Regarding the main menu overhaul
Do you reckon is makes a good sense, having a state-machine in the main menu, where clicking a button would change the main menu to a new view with a ◀ button (go back) and new buttons relevant to the current operation mode? Because that is something we can totally do without (large) changes to all existing tools, and improve usability by also exposing new buttons with each tool's own available actions.

Something like (well in this example i imagined ahead what the lane arrows tool would do in the future):

• User clicks (Lane Arrows tool)
• Main menu panel changes to:
  
  
  
  • ◀ Back (Esc) 🔺 View Conflict Points 🖇 Switch to: Lane Connections tool
  
  
  • Help text: Please select a node
  
  

(You can probably see how this is very similar to OSD panel functionality)

[aubergine10]

@kvakvs I'm not sure. Something does need to change in the top-level UI, but I think the only way to determine best approach is to do some sprints of different ideas.

These are the approaches I can currently think of:

• Keep existing floating menu with no changes
  
  
  
  • Tool context buttons could go to edge of screen (eg. side like Move It, or bottom like curved/straight road buttons)
  
  
• Replace floating menu with a pop-up 'flower' menu - https://github.com/krzychu124/Cities-Skylines-Traffic-Manager-President-Edition/issues/408#issuecomment-508118319
  
  
  
  • Tool context buttons could go to edge of screen (like above)
  
  
• Make floating menu dynamic - https://github.com/krzychu124/Cities-Skylines-Traffic-Manager-President-Edition/issues/38#issuecomment-516898701 (as described in your comment)
  
  
  
  • IMO this could make switching between top-level tools a bit of a pain
  
  
• Replace floating tool bar with vanilla style build bar (eg. like Find It does)
  
  
  
  • Tool context buttons would go at the bottom (like where curved/straight road buttons go)
  
  
  • Takes up a lot of room compared to our floating menu bar
  
  

The winner will be whatever "feels" best, but I can't quantify "feel" hence I think we need some sprints to try different approaches.

[kvakvs]

1 (keep existing) is very similar to 3 (dynamic panel) but they can be combined, so that the top level menu is smaller and is always visible, for allowing you switch the tools. And the space below them would be the context-dependant controls, hints and help?
Iterating on all 4 would take 4x the time though

[aubergine10]

I think we could likely skip the last one (use vanilla-style build bar) as it takes up too much room.

I still love the idea of the 'flower' menu thing, but how to activate it considering we use right-click already in most tools? Would it only be for top-level tool selection, or/and context options?

For dynamic floating menu, we could possibly add an extra row of context buttons when a tool is active, but it might be confusing for users?