UI: connect to wifi prompt (#28273)
	
		
	
				
					
				
			* OffroadHome: move experimental mode button to right column * OffroadHome: replace DriveStats with PrimeAd when no prime * SetupWidget: remove PrimeAd * SetupWidget: tweaks to fit smaller space * UI: add WiFiPromptWidget * WiFiPrompt: update using network type * add WiFiPromptWidget to offroad home * reduce spacing to fit vertical space * WiFiPromptWidget: open Wi-Fi settings * no longer necessary * cleanup * shrink PrimeUser widget and increase Setup Wi-Fi font size * correctly resize widget when stack index changes * layout tweaks * debug * spacing * slightly improved style * helps -> help * .pull/214/head
							parent
							
								
									04556652dc
								
							
						
					
					
						commit
						4f815db141
					
				
				 13 changed files with 323 additions and 62 deletions
			
			
		| 
		 After Width: | Height: | Size: 1.6 KiB  | 
@ -0,0 +1,103 @@ | 
				
			|||||||
 | 
					#include "selfdrive/ui/qt/widgets/wifi.h" | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#include <QHBoxLayout> | 
				
			||||||
 | 
					#include <QLabel> | 
				
			||||||
 | 
					#include <QPixmap> | 
				
			||||||
 | 
					#include <QPushButton> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					WiFiPromptWidget::WiFiPromptWidget(QWidget *parent) : QFrame(parent) { | 
				
			||||||
 | 
					  stack = new QStackedLayout(this); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // Setup Wi-Fi
 | 
				
			||||||
 | 
					  QFrame *setup = new QFrame; | 
				
			||||||
 | 
					  QVBoxLayout *setup_layout = new QVBoxLayout(setup); | 
				
			||||||
 | 
					  setup_layout->setContentsMargins(56, 40, 56, 40); | 
				
			||||||
 | 
					  setup_layout->setSpacing(20); | 
				
			||||||
 | 
					  { | 
				
			||||||
 | 
					    QHBoxLayout *title_layout = new QHBoxLayout; | 
				
			||||||
 | 
					    title_layout->setSpacing(32); | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					      QLabel *icon = new QLabel; | 
				
			||||||
 | 
					      QPixmap *pixmap = new QPixmap("../assets/offroad/icon_wifi_strength_full.svg"); | 
				
			||||||
 | 
					      icon->setPixmap(pixmap->scaledToWidth(80, Qt::SmoothTransformation)); | 
				
			||||||
 | 
					      title_layout->addWidget(icon); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      QLabel *title = new QLabel(tr("Setup Wi-Fi")); | 
				
			||||||
 | 
					      title->setStyleSheet("font-size: 64px; font-weight: 600;"); | 
				
			||||||
 | 
					      title_layout->addWidget(title); | 
				
			||||||
 | 
					      title_layout->addStretch(); | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    setup_layout->addLayout(title_layout); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    QLabel *desc = new QLabel(tr("Connect to Wi-Fi to upload driving data and help improve openpilot")); | 
				
			||||||
 | 
					    desc->setStyleSheet("font-size: 40px; font-weight: 400;"); | 
				
			||||||
 | 
					    desc->setWordWrap(true); | 
				
			||||||
 | 
					    setup_layout->addWidget(desc); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    QPushButton *settings_btn = new QPushButton(tr("Open Settings")); | 
				
			||||||
 | 
					    connect(settings_btn, &QPushButton::clicked, [=]() { emit openSettings(1); }); | 
				
			||||||
 | 
					    settings_btn->setStyleSheet(R"( | 
				
			||||||
 | 
					      QPushButton { | 
				
			||||||
 | 
					        font-size: 48px; | 
				
			||||||
 | 
					        font-weight: 500; | 
				
			||||||
 | 
					        border-radius: 10px; | 
				
			||||||
 | 
					        background-color: #465BEA; | 
				
			||||||
 | 
					        padding: 32px; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      QPushButton:pressed { | 
				
			||||||
 | 
					        background-color: #3049F4; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    )"); | 
				
			||||||
 | 
					    setup_layout->addWidget(settings_btn); | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  stack->addWidget(setup); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // Uploading data
 | 
				
			||||||
 | 
					  QWidget *uploading = new QWidget; | 
				
			||||||
 | 
					  QVBoxLayout *uploading_layout = new QVBoxLayout(uploading); | 
				
			||||||
 | 
					  uploading_layout->setContentsMargins(64, 56, 64, 56); | 
				
			||||||
 | 
					  uploading_layout->setSpacing(36); | 
				
			||||||
 | 
					  { | 
				
			||||||
 | 
					    QHBoxLayout *title_layout = new QHBoxLayout; | 
				
			||||||
 | 
					    { | 
				
			||||||
 | 
					      QLabel *title = new QLabel(tr("Uploading training data")); | 
				
			||||||
 | 
					      title->setStyleSheet("font-size: 64px; font-weight: 600;"); | 
				
			||||||
 | 
					      title->setWordWrap(true); | 
				
			||||||
 | 
					      title->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum); | 
				
			||||||
 | 
					      title_layout->addWidget(title); | 
				
			||||||
 | 
					      title_layout->addStretch(); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      QLabel *icon = new QLabel; | 
				
			||||||
 | 
					      QPixmap *pixmap = new QPixmap("../assets/offroad/icon_wifi_uploading.svg"); | 
				
			||||||
 | 
					      icon->setPixmap(pixmap->scaledToWidth(120, Qt::SmoothTransformation)); | 
				
			||||||
 | 
					      title_layout->addWidget(icon); | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    uploading_layout->addLayout(title_layout); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    QLabel *desc = new QLabel(tr("Your data is used to train driving models and help improve openpilot")); | 
				
			||||||
 | 
					    desc->setStyleSheet("font-size: 48px; font-weight: 400;"); | 
				
			||||||
 | 
					    desc->setWordWrap(true); | 
				
			||||||
 | 
					    uploading_layout->addWidget(desc); | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  stack->addWidget(uploading); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  setStyleSheet(R"( | 
				
			||||||
 | 
					    WiFiPromptWidget { | 
				
			||||||
 | 
					      background-color: #333333; | 
				
			||||||
 | 
					      border-radius: 10px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  )"); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  QObject::connect(uiState(), &UIState::uiUpdate, this, &WiFiPromptWidget::updateState); | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					void WiFiPromptWidget::updateState(const UIState &s) { | 
				
			||||||
 | 
					  if (!isVisible()) return; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  auto &sm = *(s.sm); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  auto network_type = sm["deviceState"].getDeviceState().getNetworkType(); | 
				
			||||||
 | 
					  auto uploading = network_type == cereal::DeviceState::NetworkType::WIFI || | 
				
			||||||
 | 
					      network_type == cereal::DeviceState::NetworkType::ETHERNET; | 
				
			||||||
 | 
					  stack->setCurrentIndex(uploading ? 1 : 0); | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,23 @@ | 
				
			|||||||
 | 
					#pragma once | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#include <QFrame> | 
				
			||||||
 | 
					#include <QStackedLayout> | 
				
			||||||
 | 
					#include <QWidget> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#include "selfdrive/ui/ui.h" | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					class WiFiPromptWidget : public QFrame { | 
				
			||||||
 | 
					  Q_OBJECT | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					public: | 
				
			||||||
 | 
					  explicit WiFiPromptWidget(QWidget* parent = 0); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					signals: | 
				
			||||||
 | 
					  void openSettings(int index = 0, const QString ¶m = ""); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					public slots: | 
				
			||||||
 | 
					  void updateState(const UIState &s); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					protected: | 
				
			||||||
 | 
					  QStackedLayout *stack; | 
				
			||||||
 | 
					}; | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue