diff --git a/selfdrive/assets/fonts/inter.ttf b/selfdrive/assets/fonts/inter.ttf new file mode 100644 index 0000000000..32a79990a5 Binary files /dev/null and b/selfdrive/assets/fonts/inter.ttf differ diff --git a/selfdrive/ui/qt/offroad/settings.cc b/selfdrive/ui/qt/offroad/settings.cc index f37d0e9309..f9886b7e20 100644 --- a/selfdrive/ui/qt/offroad/settings.cc +++ b/selfdrive/ui/qt/offroad/settings.cc @@ -20,50 +20,37 @@ ParamsToggle::ParamsToggle(QString param, QString title, QString description, QString icon_path, QWidget *parent): QFrame(parent) , param(param) { - QHBoxLayout *hlayout = new QHBoxLayout; + QHBoxLayout *layout = new QHBoxLayout; + layout->setSpacing(50); // Parameter image - hlayout->addSpacing(25); if (icon_path.length()) { QPixmap pix(icon_path); QLabel *icon = new QLabel(); - icon->setPixmap(pix.scaledToWidth(100, Qt::SmoothTransformation)); + icon->setPixmap(pix.scaledToWidth(80, Qt::SmoothTransformation)); icon->setSizePolicy(QSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed)); - hlayout->addWidget(icon); + layout->addWidget(icon); } else { - hlayout->addSpacing(100); + layout->addSpacing(80); } - hlayout->addSpacing(25); // Name of the parameter QLabel *label = new QLabel(title); - label->setWordWrap(true); + label->setStyleSheet(R"(font-size: 50px;)"); + layout->addWidget(label); // toggle switch - Toggle* toggle_switch = new Toggle(this); - toggle_switch->setFixedSize(150, 100); + Toggle *toggle = new Toggle(this); + toggle->setFixedSize(150, 100); + layout->addWidget(toggle); + QObject::connect(toggle, SIGNAL(stateChanged(int)), this, SLOT(checkboxClicked(int))); - // TODO: show descriptions on tap - hlayout->addWidget(label); - hlayout->addSpacing(50); - hlayout->addWidget(toggle_switch); - hlayout->addSpacing(20); - - setLayout(hlayout); + // set initial state from param if (Params().read_db_bool(param.toStdString().c_str())) { - toggle_switch->togglePosition(); + toggle->togglePosition(); } - setStyleSheet(R"( - QLabel { - font-size: 50px; - } - * { - background-color: #114265; - } - )"); - - QObject::connect(toggle_switch, SIGNAL(stateChanged(int)), this, SLOT(checkboxClicked(int))); + setLayout(layout); } void ParamsToggle::checkboxClicked(int state) { @@ -72,8 +59,8 @@ void ParamsToggle::checkboxClicked(int state) { } QWidget * toggles_panel() { - QVBoxLayout *toggles_list = new QVBoxLayout(); + toggles_list->setMargin(50); toggles_list->setSpacing(25); toggles_list->addWidget(new ParamsToggle("OpenpilotEnabledToggle", @@ -120,6 +107,7 @@ QWidget * toggles_panel() { QWidget * device_panel() { QVBoxLayout *device_layout = new QVBoxLayout; + device_layout->setMargin(100); device_layout->setSpacing(50); Params params = Params(); @@ -164,7 +152,10 @@ QWidget * device_panel() { widget->setLayout(device_layout); widget->setStyleSheet(R"( QPushButton { - padding: 60px; + padding: 0; + height: 120px; + border-radius: 15px; + background-color: #393939; } )"); return widget; @@ -172,6 +163,7 @@ QWidget * device_panel() { QWidget * developer_panel() { QVBoxLayout *main_layout = new QVBoxLayout; + main_layout->setMargin(100); // TODO: enable SSH toggle and github keys @@ -217,67 +209,84 @@ void SettingsWindow::setActivePanel() { panel_layout->setCurrentWidget(panels[btn->text()]); } -SettingsWindow::SettingsWindow(QWidget *parent) : QWidget(parent) { - // two main layouts +SettingsWindow::SettingsWindow(QWidget *parent) : QFrame(parent) { + // setup two main layouts QVBoxLayout *sidebar_layout = new QVBoxLayout(); + sidebar_layout->setMargin(0); panel_layout = new QStackedLayout(); // close button - QPushButton *close_button = new QPushButton("X"); - close_button->setStyleSheet(R"( - QPushButton { - padding: 50px; - font-weight: bold; - font-size: 110px; - } + QPushButton *close_btn = new QPushButton("X"); + close_btn->setStyleSheet(R"( + font-size: 65px; + font-weight: bold; + border 1px grey solid; + border-radius: 75px; + background-color: #393939; )"); - sidebar_layout->addWidget(close_button); - QObject::connect(close_button, SIGNAL(released()), this, SIGNAL(closeSettings())); + close_btn->setFixedSize(150, 150); + sidebar_layout->addSpacing(45); + sidebar_layout->addWidget(close_btn, 0, Qt::AlignHCenter); + QObject::connect(close_btn, SIGNAL(released()), this, SIGNAL(closeSettings())); // setup panels panels = { - {"developer", developer_panel()}, - {"device", device_panel()}, - {"network", network_panel(this)}, - {"toggles", toggles_panel()}, + {"Developer", developer_panel()}, + {"Device", device_panel()}, + {"Network", network_panel(this)}, + {"Toggles", toggles_panel()}, }; + sidebar_layout->addSpacing(45); nav_btns = new QButtonGroup(); for (auto &panel : panels) { QPushButton *btn = new QPushButton(panel.first); btn->setCheckable(true); btn->setStyleSheet(R"( QPushButton { - padding-top: 35px; - padding-bottom: 35px; + color: grey; border: none; background: none; - font-size: 55px; + font-size: 65px; + font-weight: bold; + padding-top: 35px; + padding-bottom: 35px; } QPushButton:checked { - font-size: 50px; - font-weight: bold; + color: white; } )"); nav_btns->addButton(btn); - sidebar_layout->addWidget(btn, 0, Qt::AlignRight); + sidebar_layout->addWidget(btn, 0, Qt::AlignRight | Qt::AlignTop); panel_layout->addWidget(panel.second); QObject::connect(btn, SIGNAL(released()), this, SLOT(setActivePanel())); } qobject_cast(nav_btns->buttons()[0])->setChecked(true); + sidebar_layout->addStretch(); + // main settings layout, sidebar + main panel QHBoxLayout *settings_layout = new QHBoxLayout(); - settings_layout->setMargin(0); - settings_layout->addSpacing(45); + settings_layout->setContentsMargins(150, 50, 150, 50); sidebar_widget = new QWidget; sidebar_widget->setLayout(sidebar_layout); settings_layout->addWidget(sidebar_widget); - settings_layout->addSpacing(45); - settings_layout->addLayout(panel_layout); - settings_layout->addSpacing(45); + settings_layout->addSpacing(25); + + QFrame *panel_frame = new QFrame; + panel_frame->setLayout(panel_layout); + panel_frame->setStyleSheet(R"( + QFrame { + border-radius: 30px; + background-color: #292929; + } + * { + background-color: none; + } + )"); + settings_layout->addWidget(panel_frame, 1, Qt::AlignRight); setLayout(settings_layout); setStyleSheet(R"( @@ -285,6 +294,9 @@ SettingsWindow::SettingsWindow(QWidget *parent) : QWidget(parent) { color: white; font-size: 50px; } + SettingsWindow { + background-color: black; + } )"); } diff --git a/selfdrive/ui/qt/offroad/settings.hpp b/selfdrive/ui/qt/offroad/settings.hpp index 2dc375c528..6a39be404d 100644 --- a/selfdrive/ui/qt/offroad/settings.hpp +++ b/selfdrive/ui/qt/offroad/settings.hpp @@ -28,7 +28,7 @@ public slots: // *** settings window *** -class SettingsWindow : public QWidget { +class SettingsWindow : public QFrame { Q_OBJECT public: diff --git a/selfdrive/ui/qt/qt_window.cc b/selfdrive/ui/qt/qt_window.cc index 7f6b383bdd..858448793e 100644 --- a/selfdrive/ui/qt/qt_window.cc +++ b/selfdrive/ui/qt/qt_window.cc @@ -1,4 +1,6 @@ #include + +#include #include #ifdef QCOM2 @@ -14,6 +16,9 @@ void setMainWindow(QWidget *w) { w->setFixedSize(vwp_w*scale, vwp_h*scale); w->show(); + QFontDatabase::addApplicationFont("../assets/fonts/inter.ttf"); + QApplication::setFont(QFont("Inter")); + #ifdef QCOM2 QPlatformNativeInterface *native = QGuiApplication::platformNativeInterface(); wl_surface *s = reinterpret_cast(native->nativeResourceForWindow("surface", w->windowHandle())); diff --git a/selfdrive/ui/qt/widgets/toggle.cc b/selfdrive/ui/qt/widgets/toggle.cc index 4d6fda9325..f332a4772e 100644 --- a/selfdrive/ui/qt/widgets/toggle.cc +++ b/selfdrive/ui/qt/widgets/toggle.cc @@ -21,9 +21,10 @@ void Toggle::paintEvent(QPaintEvent *e) { // Draw toggle background left p.setBrush(QColor(0x33ab4c)); p.drawRoundedRect(QRect(0, _y_rect, _x_circle + _radius, _height_rect), _height_rect/2, _height_rect/2); + // Draw toggle background right - p.setBrush(QColor(0x0a1a26)); - p.drawRoundedRect(QRect(_x_circle - _radius, _y_rect, width() -(_x_circle - _radius), _height_rect), _height_rect/2, _height_rect/2); + p.setBrush(QColor(0x393939)); + p.drawRoundedRect(QRect(_x_circle - _radius, _y_rect, width() - (_x_circle - _radius), _height_rect), _height_rect/2, _height_rect/2); // Draw toggle circle p.setBrush(QColor(0xfafafa)); diff --git a/selfdrive/ui/qt/window.cc b/selfdrive/ui/qt/window.cc index 8893ca3671..71b4e21942 100644 --- a/selfdrive/ui/qt/window.cc +++ b/selfdrive/ui/qt/window.cc @@ -24,8 +24,7 @@ MainWindow::MainWindow(QWidget *parent) : QWidget(parent) { setStyleSheet(R"( * { - color: white; - background-color: #072339; + font-family: Inter; } )"); }