feat: update autoware state panel

[KhalilSelyan]

Description

This PR updates the Autoware state panel RViz plugin with new custom components to enhance its appearance and functionality, aligning it with the newly set up RViz dark mode.

Related links

• RViz Dark Mode Gist
• Enhancing Autoware Visualization with QT5CT for Unified and Improved Aesthetics autoware#4534
• DRAFT PR for autoware_launch adding the qt5ct env fix: update launch.xml to add qt5ct env autoware_launch#988
• Figma Link for design as reference: Figma Link

Screenshot Demo

Tests performed

• Manual testing of the new components in RViz to ensure compatibility and proper display in dark mode.

Effects on system behavior

• Improved visual consistency with the RViz dark mode.
• Enhanced user experience with updated and more intuitive custom components.

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.
• The PR has been properly tested.
• The PR has been reviewed by the code owners.

Post-review checklist for the PR author

The PR author must check the checkboxes below before merging.

• There are no open discussions or they are tracked via tickets.
• The PR is ready for merge.

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

[xmfcx]

Could you put all the colors we used to a header file and include it in required files?

We have material colors and they all have names. This will make styling easier for the future.

The material theme builder supports exporting themes:

I've exported our theme: M3.json

Ideally we would read from this json and fill in the variables as it loads. But having them preset is good too.

I've used the following prompt: https://chatgpt.com/share/13727ef6-e4ca-4ca2-bc2a-0a6438bff542

You can directly use the final material_colors.hpp struct MaterialColors and inline MaterialColors default_colors; parts from the chat link. (Remove the json related parts, that's for future reference)

[KhalilSelyan]

@xmfcx All bugs, and suggestions have been dealt with. debugging the switch toggle was the hardest but the fix was a simple if statement at the end. if there any discrepancies please let me know, if you would like to change colors as needed the material_colors.hpp is where all components now get their colors. so it should much simpler to edit now 👍🏼

[xmfcx]

Thanks, it looks great, the disabled colors of these buttons need to be fixed too. (Both disabled button and text colors)

[xmfcx]

autoware_state_panel.hpp

Click to expand

  // Diagnostic

  // QLabel * diagnostic_label_ptr_{nullptr};
  // QVBoxLayout * diagnostic_layout_{nullptr};
  // std::unordered_map<std::string, QLabel *> statusLabels;

  // rclcpp::Subscription<DiagnosticArray>::SharedPtr sub_diag_;
  // void onDiagnostics(const DiagnosticArray::ConstSharedPtr msg);
  // void addStatusLabel(const std::string & name, int level);
  // void updateStatusLabel(const std::string & name, int level);

autoware_state_panel.hpp

Click to expand

/* void AutowareStatePanel::onDiagnostics(const DiagnosticArray::ConstSharedPtr msg)
{
  for (const auto & status : msg->status) {
    std::string statusName = status.name;  // Assuming name is a std::string
    int level = status.level;              // Assuming level is an int

    // Check if this status name already has an associated QLabel
    auto it = statusLabels.find(statusName);
    if (it != statusLabels.end()) {
      // Status exists, update its display (QLabel) with the new level
      updateStatusLabel(statusName, level);
    } else {
      // New status, add a QLabel for it to the map and the layout
      addStatusLabel(statusName, level);
    }
  }
} */

/* void AutowareStatePanel::addStatusLabel(const std::string & name, int level)
{
  QString baseStyle =
    "QLabel {"
    "  border-radius: 4px;"
    "  padding: 4px;"
    "  margin: 2px;"
    "  font-weight: bold;"
    "  color: #003546;";

  QString okStyle = baseStyle + "background-color: #84c2e6;}";
  QString warnStyle = baseStyle + "background-color: #FFCC00;}";
  QString errorStyle = baseStyle + "background-color: #f08b8b;}";
  QString staleStyle = baseStyle + "background-color: #6c757d;}";

  QString labelText = QString::fromStdString(name);
  // + ": " +
  //                     (level == diagnostic_msgs::msg::DiagnosticStatus::OK      ? "OK"
  //                      : level == diagnostic_msgs::msg::DiagnosticStatus::WARN  ? "WARN"
  //                      : level == diagnostic_msgs::msg::DiagnosticStatus::ERROR ? "ERROR"
  //                                                                               : "STALE");

  auto * label = new QLabel(labelText);
  label->setMinimumHeight(30);  // for example, set a minimum height
  label->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Fixed);

  // Adjust style based on level
  QString styleSheet;
  switch (level) {
    case diagnostic_msgs::msg::DiagnosticStatus::OK:
      styleSheet = okStyle;
      break;
    case diagnostic_msgs::msg::DiagnosticStatus::WARN:
      styleSheet = warnStyle;
      break;
    case diagnostic_msgs::msg::DiagnosticStatus::ERROR:
      styleSheet = errorStyle;
      break;
    default:
      styleSheet = staleStyle;
      break;
  }

  label->setStyleSheet(styleSheet);
  diagnostic_layout_->addWidget(label);
  statusLabels[name] = label;
} */

/* void AutowareStatePanel::updateStatusLabel(const std::string & name, int level)
{
  QString baseStyle =
    "QLabel {"
    "  border-radius: 4px;"
    "  padding: 4px;"
    "  margin: 2px;"
    "  font-weight: bold;"
    "  color: #003546;";

  QString okStyle = baseStyle + "background-color: #84c2e6;}";
  QString warnStyle = baseStyle + "background-color: #FFCC00;}";
  QString errorStyle = baseStyle + "background-color: #f08b8b;}";
  QString staleStyle = baseStyle + "background-color: #6c757d;}";

  // Find the QLabel* associated with this status name
  auto it = statusLabels.find(name);
  if (it != statusLabels.end()) {
    QLabel * label = it->second;

    // Update label's text
    QString labelText = QString::fromStdString(name);
    // +": " + (level == diagnostic_msgs::msg::DiagnosticStatus::OK      ? "OK"
    //          : level == diagnostic_msgs::msg::DiagnosticStatus::WARN  ? "WARN"
    //          : level == diagnostic_msgs::msg::DiagnosticStatus::ERROR ? "ERROR"
    //                                                                   : "STALE");
    label->setText(labelText);

    // Update style based on level, similar to addStatusLabel
    QString styleSheet;
    switch (level) {
      case diagnostic_msgs::msg::DiagnosticStatus::OK:
        styleSheet = okStyle;
        break;
      case diagnostic_msgs::msg::DiagnosticStatus::WARN:
        styleSheet = warnStyle;
        break;
      case diagnostic_msgs::msg::DiagnosticStatus::ERROR:
        styleSheet = errorStyle;
        break;
      default:
        styleSheet = staleStyle;
        break;
    }
    label->setStyleSheet(styleSheet);
    label->adjustSize();  // Adjust the size of the label to fit the content if needed
    label->update();      // Ensure the label is updated immediately
  }
} */

Removed commented out future code

[xmfcx]

We added scrollbars if it gets forced into a small area.

It looks and functions very well now.

[xmfcx]

Looking good, thank you!