Fix dash for siebel tvs

[Timothy-Gonzalez]

First, some background.

Siebel's main giant screen has the following specs: 1920x1080 (dpr 1) - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) KorbytPlayer/3.21.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36 - Win32
The tvs dotted around have the following specs: 1920x1080 (dpr 1) - BrightSign/9.0.211 (XD235) Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/5.15.2 Chrome/87.0.4280.144 Safari/537.36 - Linux aarch64

Importantly, our dashboard renders fine on the giant screen but has issues on the tvs. This is because the tvs use (a very old, probably because they don't want to pay for a new license) QtWebEngine 5.15.2, which does not render certain things properly.

To address this, I manually installed QtWebEngine and nearly lost my mind.

Open for details

Installed from https://account.qt.io/s/archived-versions (Qt > 5.15.2 > Linux), needed to create temp account to trial.

Created a simple project:

rp.pro:

QT       += core gui webenginewidgets webengine

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    mainwindow.cpp

HEADERS += \
    mainwindow.h

FORMS += \
    mainwindow.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

mainwindow.h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QLabel>
#include <QWebEngineView>
#include <QCoreApplication>
#include <QUrl>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QWebEngineView *webView;
    QLabel *label;
};
#endif // MAINWINDOW_H

mainwindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    webView = new QWebEngineView(this);
    setCentralWidget(webView);
    webView->resize(1920, 1080);
    webView->setUrl(QUrl("http://localhost:3006"));

}

MainWindow::~MainWindow()
{
    delete ui;
}

main.cpp:

#include "mainwindow.h"

#include <QApplication>
#include <QtWebEngine>
#include <QWebEngineSettings>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_UseSoftwareOpenGL);
    qputenv("QTWEBENGINE_DISABLE_SANDBOX", "1");
    qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "9222");
    QApplication a(argc, argv);
    MainWindow w;
    w.resize(800, 600);
    w.show();
    return a.exec();
}

Importantly, needed to disable the sandbox to get anything to render. Enabling remote debugging allowed me to use the oldest chrome console I've ever seen (you have to double click to open elements, crazy)

Finally, I was able to reproduce what was going on which would have taken forever otherwise.

This pr addresses the issues I found by:

• Setting margin and padding to 0 by deafult - QtWebEngine applies a giant default padding to text elements
• Aligning our home page - while most modern browsers ignore padding that goes over bounds, QtWebEngine does not. box-sizing: border-box fixes that
• Finally: flex gap is a newer feature. Qt does not support flex gap, so I converted all uses into margins. At least grid gap is supported...

Also, I added an explicit timezone but I have a suspicion that the tv's actual time is just off, so we'll see.

Before:

Notice the scrollbars, which explains why everything seemed "zoomed in"

Now:

[Timothy-Gonzalez]

Link since the bot failed: https://fix-dash-for-siebel-tvs.rp-web-dash.pages.dev/

[anandani4136]

Your tenacity in making this a reality is truly impressive. LGTM!