Enhancing Autoware Visualization with QT5CT for Unified and Improved Aesthetics

[KhalilSelyan]

Checklist

• I've read the contribution guidelines.
• I've searched other issues and no duplicate issues were found.
• I've agreed with the maintainers that I can plan this task.

Description

The task aims to integrate QT5CT (Qt5 Configuration Tool) with Rviz2, a core visualization tool used in Autoware for the development and deployment of autonomous driving systems. This integration will enable customizable styling options, allowing for a more unified and visually appealing interface across Autoware applications, but also personalized customization for users.

Purpose

The primary goal is to improve the user experience within the Autoware ecosystem by providing enhanced visual customization capabilities for Rviz2. This effort is directed towards achieving a standardized interface that aligns with Autoware's vision for a cohesive user environment. Enhanced aesthetics and customizability will not only benefit current users but also help attract new contributors and adopters by demonstrating a commitment to quality and user-centric design.

Possible approaches

1. Documentation: Develop comprehensive documentation detailing the process for setting up QT5CT with Rviz2. This includes:
   • Steps to install QT5CT.
   • Instructions for creating and applying custom QSS files.
   • Integration of environment variables within ROS launch files for seamless application of styles.

Detailed Setup Guide: How to Customize Rviz2 with QT5CT and a Dark Mode Theme

2. Community-Driven Stylesheet Development: Encourage the Autoware community to contribute custom stylesheets, facilitating a diverse range of visual themes tailored to various user preferences.

Definition of done

Following should be merged:

• feat: add an env variable to enable the new rviz2 theme autoware_launch#1017

• style: update state panel plugin autoware.universe#8846

• style(rviz-config): use colors consistent with new theme autoware_launch#1169

• style: update rviz plugin icons to match the theme autoware.universe#8868

• style: update rviz plugin icons to match the theme autoware_tools#117

• feat: qt5ct dark mode integration using ansible #4838

• feat(source-installation): add manual instructions for the rviz theme autoware-documentation#612

• QT5CT Compatibility: Rviz2 can be customized using QSS files through QT5CT without affecting its core functionalities.

• Documentation Completion: A detailed guide, hosted as a GitHub Gist, is available and linked within the Autoware documentation, providing step-by-step instructions on the QT5CT setup and theme application process.

• User Feedback: Positive feedback is received from users on the ease of customization and the aesthetic improvements to the Rviz2 interface.

---

[KhalilSelyan]

This is what the current/old look of rviz using autoware is:

This would be the new look if everything works correctly through the guide in the GIST

[doganulus]

It would be great if you design the tool with containers in mind.

An example compose.yml could look like this once the tool is containerized:

# compose.yml
services:
  autoware:
    ...
  simulator:
    ...
  rviz:
    image: ghcr.io/autowarefoundation/autoware-rviz:latest
    command: ros2 launch /path/to/launch_file.xml
    environment:
      - MY_AUTOWARE_RVIZ_SETTING=true
      - ANOTHER_AUTOWARE_RVIZ_SETTING=false
    volumes:
      - ./my_beautiful_stylesheet.css:/etc/autoware/rviz/stylesheet.css
      - ./my_rviz_options.yml:/etc/autoware/rviz/rviz.yml # Alternative way to set rviz options

[KhalilSelyan]

[KhalilSelyan]

[KhalilSelyan]

@yukkysaito

Link to youtube video quick demo