feat: update trafficlight roi styling

[KhalilSelyan]

Description

This PR introduces several enhancements to the traffic light ROI visualization in RViz to improve its accuracy and usability. Key changes include fixing the ROI colors to better match real-world traffic lights, replacing textual overlays with intuitive graphical shapes that represent the traffic light status, and adjusting the positioning and sizing of the probability of detection display. These updates aim to provide a cleaner, more informative visualization that aids users in better decision-making and data analysis.

Effects on System Behavior

These changes are visual and configurational; they do not affect the underlying system behavior of RViz or the traffic light detection functionalities. The visual enhancements are designed to improve user interaction without impacting system performance.

Pre-review Checklist for the PR Author

The PR author must check the checkboxes below when creating the PR.

• I've confirmed the contribution guidelines.
• The PR follows the pull request guidelines.

In-review Checklist for the PR Reviewers

The PR reviewers must check the checkboxes below before approval.

• The PR follows the pull request guidelines.

Post-review Checklist for the PR Author

The PR author must check the checkboxes below before merging.

• All discussions have been resolved or are tracked via tickets.

After all checkboxes are checked, anyone who has write access can merge the PR.

[yukkysaito]

@KhalilSelyan Can you share a screenshot of what the visualization will look like, it might be nice to have it in the README.

[KhalilSelyan]

@yukkysaito

these are all the shapes would be drawn on top of the rectangle, and the probability would be on the side and out of 100 instead of 0.xxxxx

[xmfcx]

The bounding box color should match with the light color.

And the text can be black arrows or shapes from: https://www.alt-codes.net/arrow_alt_codes.php

I see that it is complicated to render non-ASCII using OpenCV.

Then let's use simple icons from Material Icons:

• Circle: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:circle:FILL@1;wght@700;GRAD@200;opsz@48&icon.size=72&icon.color=%235f6368&icon.query=circle
• Left/Right: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:west:FILL@1;wght@700;GRAD@200;opsz@48&icon.size=72&icon.color=%235f6368&icon.query=west
• Up/Down: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:north:FILL@1;wght@700;GRAD@200;opsz@48&icon.size=72&icon.color=%235f6368&icon.query=north
• Down-Left/Down-Right: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:south_west:FILL@1;wght@700;GRAD@200;opsz@48&icon.size=72&icon.color=%235f6368&icon.query=west
• Cross: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:close:FILL@1;wght@700;GRAD@200;opsz@48&icon.size=72&icon.color=%235f6368&icon.query=x

Example with text: → 82%

[KhalilSelyan]

@xmfcx I made the update as requested, using the icons instead of cv draw

[KhalilSelyan]

using the icons instead of cv:draw and more contained icon + probability

[KhalilSelyan]

@xmfcx Other shapes for reference

[xmfcx]

The text is not readable, could you make it larger?

Also the text box should be connected to the bounding box rectangle.

[KhalilSelyan]

@xmfcx is it better with thicker or less thick text (i think thicker)

[xmfcx]

is it better with thicker or less thick text (i think thicker)

Yes, thicker is better 👍

The filled label box should be adjacent but not under the detection box.

Unknown box should follow the same style, ? part should be in the filled box.

The filled box should be as wide as needed, currently it has a fixed width.

Once applying these changes, could you also show it with the other symbols too?

[KhalilSelyan]

@xmfcx i did all the necessary changes, you might notice the % text has extra padding on the right, i reduced it in the "x" sign, you can let me know if you think its better with the extra padding or without and we keep whichever version of them

[xmfcx]

let me know if you think its better with the extra padding or without

It's better without the padding.

Could you increase the font and symbol sizes a bit? Some are not legible.

Also FONT_HERSHEY_PLAIN might be better as a small font but I'm not sure.

[KhalilSelyan]

@xmfcx pushed the font scale from 0.7 to 0.75
font hershey simplex

font hershey plain with same scale looks terrible sadly much less readable

Also just upped the size of the symbol as well it would look like this

[tzhong518]

LGTM

[github-actions]

Thank you for contributing to the Autoware project!

🚧 If your pull request is in progress, switch it to draft mode.

Please ensure:

• You've checked our contribution guidelines.
• Your PR follows our pull request guidelines.
• All required CI checks pass before marking the PR ready for review.

[kminoda]

@xmfcx Hi, would you check this PR? Your review request is being a blocker.