Modify widget page to resemble dashboard page

This commit is contained in:
Alex Spataru 2021-09-13 02:22:11 -05:00
parent 050f64e749
commit 8a35bc5861
14 changed files with 750 additions and 35 deletions

View File

@ -35,13 +35,12 @@ Window {
// Properties
//
spacing: -1
gradient: true
implicitWidth: 260
visible: opacity > 0
opacity: enabled ? 1 : 0
icon.source: "qrc:/icons/tab.svg"
implicitHeight: implicitWidth + 96
backgroundColor: Cpp_ThemeManager.widgetBackground
borderColor: root.headerVisible ? Cpp_ThemeManager.datasetWindowBorder : "transparent"
//
// Custom properties

View File

@ -35,13 +35,12 @@ Window {
// Window properties
//
spacing: -1
gradient: true
implicitWidth: 260
visible: opacity > 0
opacity: enabled ? 1 : 0
icon.source: "qrc:/icons/chart.svg"
implicitHeight: implicitWidth + 96
backgroundColor: Cpp_ThemeManager.widgetBackground
borderColor: root.headerVisible ? Cpp_ThemeManager.datasetWindowBorder : "transparent"
//
// Select level color depending on widget index

View File

@ -35,13 +35,12 @@ Window {
// Window properties
//
spacing: -1
gradient: true
implicitWidth: 260
visible: opacity > 0
opacity: enabled ? 1 : 0
implicitHeight: implicitWidth + 96
icon.source: "qrc:/icons/compass.svg"
backgroundColor: Cpp_ThemeManager.widgetBackground
borderColor: root.headerVisible ? Cpp_ThemeManager.datasetWindowBorder : "transparent"
//
// Custom properties

View File

@ -46,13 +46,12 @@ Window {
// Window properties
//
spacing: -1
gradient: true
implicitWidth: 260
visible: opacity > 0
opacity: enabled ? 1 : 0
icon.source: "qrc:/icons/chart.svg"
implicitHeight: implicitWidth + 96
backgroundColor: Cpp_ThemeManager.widgetBackground
borderColor: root.headerVisible ? Cpp_ThemeManager.datasetWindowBorder : "transparent"
//
// Connections with widget manager

View File

@ -36,13 +36,12 @@ Window {
// Window properties
//
spacing: -1
gradient: true
implicitWidth: 260
visible: opacity > 0
opacity: enabled ? 1 : 0
implicitHeight: implicitWidth + 96
icon.source: "qrc:/icons/refresh.svg"
backgroundColor: Cpp_ThemeManager.widgetBackground
borderColor: root.headerVisible ? Cpp_ThemeManager.datasetWindowBorder : "transparent"
//
// Custom properties

View File

@ -36,13 +36,12 @@ Window {
// Window properties
//
spacing: -1
gradient: true
implicitWidth: 260
visible: opacity > 0
opacity: enabled ? 1 : 0
implicitHeight: implicitWidth + 96
backgroundColor: Cpp_ThemeManager.widgetBackground
icon.source: "qrc:/icons/location-on.svg"
borderColor: root.headerVisible ? Cpp_ThemeManager.datasetWindowBorder : "transparent"
//
// Settings

View File

@ -401,6 +401,7 @@ Control {
anchors.margins: app.spacing * 2
anchors.leftMargin: app.spacing * 2 + 10
ColumnLayout {
width: _sv.width - 2 * app.spacing
@ -421,14 +422,19 @@ Control {
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: groupDelegate.visible ? 196 : 0
Layout.minimumHeight: visible ? 196 : 0
visible: opacity > 0
enabled: opacity > 0
opacity: viewOptions.groups[index] ? 1 : 0
Behavior on opacity {NumberAnimation{}}
Widgets.GroupDelegate {
id: groupDelegate
groupId: index
anchors.fill: parent
anchors.margins: app.spacing
enabled: viewOptions.groups[groupId]
group: Cpp_UI_Provider.getGroup(index)
onHeaderDoubleClicked: groupWindow.show()
@ -475,7 +481,13 @@ Control {
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: graphDelegate.visible ? 196 : 0
Layout.minimumHeight: visible ? 196 : 0
visible: opacity > 0
enabled: opacity > 0
opacity: viewOptions.graphs[index] ? 1 : 0
Behavior on opacity {NumberAnimation{}}
Widgets.GraphDelegate {
id: graphDelegate

View File

@ -23,11 +23,671 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
import QtQuick.Window 2.12 as QtWindow
import "../Widgets" as Widgets
Control {
id: root
property string title
background: Rectangle {
color: Cpp_ThemeManager.windowBackground
}
//
// Custom properties
//
property var visibleWidgets: []
readonly property int minimumWidgetSize: 320
//
// Group/dataset updating
//
Connections {
target: Cpp_UI_WidgetProvider
//*! Optimize this function
function onWidgetCountChanged() {
// Generate accelerometer widgets
accGenerator.model = 0
accGenerator.model = Cpp_UI_WidgetProvider.accelerometerGroupCount()
// Generate gyro widgets
gyroGenerator.model = 0
gyroGenerator.model = Cpp_UI_WidgetProvider.gyroGroupCount()
// Generate bar widgets
barGenerator.model = 0
barGenerator.model = Cpp_UI_WidgetProvider.barDatasetCount()
// Generate gauge widgets
gaugeGenerator.model = 0
gaugeGenerator.model = Cpp_UI_WidgetProvider.gaugeDatasetCount()
// Generate compass widgets
compassGenerator.model = 0
compassGenerator.model = Cpp_UI_WidgetProvider.compassDatasetCount()
// Generate map widgets
mapGenerator.model = 0
mapGenerator.model = Cpp_UI_WidgetProvider.mapGroupCount()
// Update project title
root.title = Cpp_UI_Provider.title
// Regenerate visibility switcher
if (visibleWidgets.length !== Cpp_UI_WidgetProvider.totalWidgetCount) {
var list = []
for (var i = 0; i < Cpp_UI_WidgetProvider.totalWidgetCount; ++i)
list.push(true)
visibleWidgets = list
}
}
}
//
// Main layout
//
ColumnLayout {
x: 2 * app.spacing
anchors.fill: parent
spacing: app.spacing * 2
anchors.margins: app.spacing * 1.5
//
// Widget selector
//
RowLayout {
spacing: app.spacing
Layout.fillWidth: true
Layout.fillHeight: true
//
// View options
//
Widgets.Window {
id: viewOptions
gradient: true
title: qsTr("View")
Layout.fillHeight: true
Layout.minimumWidth: 240
headerDoubleClickEnabled: false
icon.source: "qrc:/icons/visibility.svg"
backgroundColor: Cpp_ThemeManager.embeddedWindowBackground
ScrollView {
clip: true
contentWidth: -1
anchors.fill: parent
anchors.margins: app.spacing
anchors.topMargin: viewOptions.borderWidth
anchors.bottomMargin: viewOptions.borderWidth
ColumnLayout {
x: app.spacing
width: parent.width - 10 - 2 * app.spacing
Item {
height: app.spacing
}
//
// Widgets title
//
RowLayout {
spacing: app.spacing
visible: Cpp_UI_WidgetProvider.totalWidgetCount > 0
Image {
width: sourceSize.width
height: sourceSize.height
sourceSize: Qt.size(18, 18)
source: "qrc:/icons/scatter-plot.svg"
ColorOverlay {
source: parent
color: palette.text
anchors.fill: parent
}
}
Label {
font.bold: true
text: qsTr("Widgets") + ":"
}
Item {
Layout.fillWidth: true
}
}
//
// Semi-spacer
//
Item {
height: app.spacing / 2
}
//
// Widget switches
//
Repeater {
model: Cpp_UI_WidgetProvider.totalWidgetCount
delegate: Switch {
checked: true
Layout.fillWidth: true
text: Cpp_UI_WidgetProvider.widgetNames()[index]
palette.highlight: Cpp_ThemeManager.alternativeHighlight
onCheckedChanged: Cpp_UI_WidgetProvider.updateWidgetVisibility(index, checked)
}
}
}
}
}
//
// Widget grid
//
Widgets.Window {
id: dataWin
gradient: true
title: qsTr("Widgets")
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: 240
headerDoubleClickEnabled: false
icon.source: "qrc:/icons/scatter-plot.svg"
backgroundColor: Cpp_ThemeManager.embeddedWindowBackground
Rectangle {
z: 1
color: dataWin.borderColor
height: dataWin.borderWidth
anchors {
leftMargin: 5
rightMargin: 5
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
ScrollView {
z: 0
id: _sv
clip: false
contentWidth: -1
anchors.fill: parent
anchors.rightMargin: 10
anchors.margins: app.spacing * 2
anchors.leftMargin: app.spacing * 2 + 10
//
// WARNING: the widget generators must be in the same
// order as the list returned by
// Cpp_UI_WidgetProvider.widgetNames()!
//
ColumnLayout {
width: _sv.width - 2 * app.spacing
Item {
Layout.minimumHeight: 10
}
GridLayout {
Layout.fillWidth: true
Layout.fillHeight: true
rowSpacing: app.spacing * 1.5
columnSpacing: app.spacing * 1.5
columns: Math.floor(_sv.width / (root.minimumWidgetSize + 2 * app.spacing))
Repeater {
id: mapGenerator
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: root.minimumWidgetSize
Layout.minimumHeight: root.minimumWidgetSize
id: mapWidget
visible: opacity > 0
enabled: opacity > 0
Behavior on opacity {NumberAnimation{}}
Connections {
target: Cpp_UI_WidgetProvider
function onWidgetVisiblityChanged() {
mapWidget.opacity = Cpp_UI_WidgetProvider.widgetVisible(index) ? 1 : 0
}
}
Widgets.MapDelegate {
groupIndex: index
anchors.fill: parent
onHeaderDoubleClicked: windowMap.show()
}
QtWindow.Window {
id: windowMap
width: 640
height: 480
minimumWidth: root.minimumWidgetSize * 1.2
minimumHeight: root.minimumWidgetSize * 1.2
title: map.title
Rectangle {
anchors.fill: parent
color: map.backgroundColor
}
Widgets.MapDelegate {
id: map
showIcon: true
gradient: false
headerHeight: 48
groupIndex: index
anchors.margins: 0
anchors.fill: parent
borderColor: backgroundColor
headerDoubleClickEnabled: false
titleColor: Cpp_ThemeManager.text
}
}
}
}
Repeater {
id: gyroGenerator
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: root.minimumWidgetSize
Layout.minimumHeight: root.minimumWidgetSize
id: gyroWidget
visible: opacity > 0
enabled: opacity > 0
Behavior on opacity {NumberAnimation{}}
Connections {
target: Cpp_UI_WidgetProvider
function onWidgetVisiblityChanged() {
gyroWidget.opacity = Cpp_UI_WidgetProvider.widgetVisible(
mapGenerator.count +
index) ? 1 : 0
}
}
Widgets.GyroDelegate {
groupIndex: index
anchors.fill: parent
onHeaderDoubleClicked: windowGyro.show()
}
QtWindow.Window {
id: windowGyro
width: 640
height: 480
minimumWidth: root.minimumWidgetSize * 1.2
minimumHeight: root.minimumWidgetSize * 1.2
title: gyro.title
Rectangle {
anchors.fill: parent
color: gyro.backgroundColor
}
Widgets.GyroDelegate {
id: gyro
showIcon: true
gradient: false
headerHeight: 48
groupIndex: index
anchors.margins: 0
anchors.fill: parent
borderColor: backgroundColor
headerDoubleClickEnabled: false
titleColor: Cpp_ThemeManager.text
}
}
}
}
Repeater {
id: accGenerator
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: root.minimumWidgetSize
Layout.minimumHeight: root.minimumWidgetSize
id: accWidget
visible: opacity > 0
enabled: opacity > 0
Behavior on opacity {NumberAnimation{}}
Connections {
target: Cpp_UI_WidgetProvider
function onWidgetVisiblityChanged() {
accWidget.opacity = Cpp_UI_WidgetProvider.widgetVisible(
mapGenerator.count +
gyroGenerator.count +
index) ? 1 : 0
}
}
Widgets.AccelerometerDelegate {
groupIndex: index
anchors.fill: parent
onHeaderDoubleClicked: windowAcc.show()
}
QtWindow.Window {
id: windowAcc
width: 640
height: 480
minimumWidth: root.minimumWidgetSize * 1.2
minimumHeight: root.minimumWidgetSize * 1.2
title: acc.title
Rectangle {
anchors.fill: parent
color: acc.backgroundColor
}
Widgets.AccelerometerDelegate {
id: acc
showIcon: true
gradient: false
headerHeight: 48
groupIndex: index
anchors.margins: 0
anchors.fill: parent
borderColor: backgroundColor
headerDoubleClickEnabled: false
titleColor: Cpp_ThemeManager.text
}
}
}
}
Repeater {
id: barGenerator
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: root.minimumWidgetSize
Layout.minimumHeight: root.minimumWidgetSize
id: barWidget
visible: opacity > 0
enabled: opacity > 0
Behavior on opacity {NumberAnimation{}}
Connections {
target: Cpp_UI_WidgetProvider
function onWidgetVisiblityChanged() {
barWidget.opacity = Cpp_UI_WidgetProvider.widgetVisible(
mapGenerator.count +
gyroGenerator.count +
accGenerator.count +
index) ? 1 : 0
}
}
Widgets.BarDelegate {
datasetIndex: index
anchors.fill: parent
onHeaderDoubleClicked: windowBar.show()
}
QtWindow.Window {
id: windowBar
width: 640
height: 480
minimumWidth: root.minimumWidgetSize * 1.2
minimumHeight: root.minimumWidgetSize * 1.2
title: bar.title
Rectangle {
anchors.fill: parent
color: bar.backgroundColor
}
Widgets.BarDelegate {
id: bar
showIcon: true
gradient: false
headerHeight: 48
datasetIndex: index
anchors.margins: 0
anchors.fill: parent
borderColor: backgroundColor
headerDoubleClickEnabled: false
titleColor: Cpp_ThemeManager.text
}
}
}
}
Repeater {
id: gaugeGenerator
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: root.minimumWidgetSize
Layout.minimumHeight: root.minimumWidgetSize
id: gaugeWidget
visible: opacity > 0
enabled: opacity > 0
Behavior on opacity {NumberAnimation{}}
Connections {
target: Cpp_UI_WidgetProvider
function onWidgetVisiblityChanged() {
gaugeWidget.opacity = Cpp_UI_WidgetProvider.widgetVisible(
mapGenerator.count +
gyroGenerator.count +
accGenerator.count +
barGenerator.count +
index) ? 1 : 0
}
}
Widgets.GaugeDelegate {
datasetIndex: index
anchors.fill: parent
onHeaderDoubleClicked: windowGauge.show()
}
QtWindow.Window {
id: windowGauge
width: 640
height: 480
minimumWidth: root.minimumWidgetSize * 1.2
minimumHeight: root.minimumWidgetSize * 1.2
title: gauge.title
Rectangle {
anchors.fill: parent
color: gauge.backgroundColor
}
Widgets.GaugeDelegate {
id: gauge
showIcon: true
gradient: false
headerHeight: 48
datasetIndex: index
anchors.margins: 0
anchors.fill: parent
borderColor: backgroundColor
headerDoubleClickEnabled: false
titleColor: Cpp_ThemeManager.text
}
}
}
}
Repeater {
id: compassGenerator
delegate: Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: root.minimumWidgetSize
Layout.minimumHeight: root.minimumWidgetSize
id: compassWidget
visible: opacity > 0
enabled: opacity > 0
Behavior on opacity {NumberAnimation{}}
Connections {
target: Cpp_UI_WidgetProvider
function onWidgetVisiblityChanged() {
compassWidget.opacity = Cpp_UI_WidgetProvider.widgetVisible(
mapGenerator.count +
gyroGenerator.count +
accGenerator.count +
barGenerator.count +
gaugeGenerator.count +
index) ? 1 : 0
}
}
Widgets.CompassDelegate {
datasetIndex: index
anchors.fill: parent
onHeaderDoubleClicked: windowCompass.show()
}
QtWindow.Window {
id: windowCompass
width: 640
height: 480
minimumWidth: root.minimumWidgetSize * 1.2
minimumHeight: root.minimumWidgetSize * 1.2
title: compass.title
Rectangle {
anchors.fill: parent
color: compass.backgroundColor
}
Widgets.CompassDelegate {
id: compass
showIcon: true
gradient: false
headerHeight: 48
datasetIndex: index
anchors.margins: 0
anchors.fill: parent
borderColor: backgroundColor
headerDoubleClickEnabled: false
titleColor: Cpp_ThemeManager.text
}
}
}
}
}
Item {
Layout.minimumHeight: 10
}
}
}
}
}
//
// Title
//
Rectangle {
radius: 5
height: 32
Layout.fillWidth: true
gradient: Gradient {
GradientStop {
position: 0
color: Cpp_ThemeManager.windowGradient1
}
GradientStop {
position: 1
color: Cpp_ThemeManager.windowGradient2
}
}
RowLayout {
spacing: app.spacing
anchors {
left: parent.left
leftMargin: app.spacing
verticalCenter: parent.verticalCenter
}
Image {
width: sourceSize.width
height: sourceSize.height
sourceSize: Qt.size(24, 24)
source: "qrc:/icons/arrow-right.svg"
Layout.alignment: Qt.AlignVCenter
ColorOverlay {
source: parent
anchors.fill: parent
color: palette.brightText
}
}
Label {
font.bold: true
text: root.title
font.pixelSize: 16
color: palette.brightText
font.family: app.monoFont
}
}
Label {
font.family: app.monoFont
color: palette.brightText
visible: !Cpp_CSV_Player.isOpen
text: Cpp_IO_Manager.receivedDataLength //*! Optimize this function
anchors {
right: parent.right
rightMargin: app.spacing
verticalCenter: parent.verticalCenter
}
}
}
}
}
/**
Control {
id: root
background: Rectangle {
@ -366,4 +1026,4 @@ Control {
}
}
}
}
}*/

View File

@ -43,7 +43,6 @@
"ledEnabled":"#d72d60",
"ledDisabled":"#2d6073",
"csvHighlight":"#2e895c",
"widgetBackground":"#09090c",
"widgetForegroundPrimary":"#8ecd9d",
"widgetForegroundSecondary":"#517497",
"widgetIndicator1":"#e6e0b2",

View File

@ -43,7 +43,6 @@
"ledEnabled":"#0072C3",
"ledDisabled":"#686868",
"csvHighlight":"#2e895c",
"widgetBackground":"#f1f1f1",
"widgetForegroundPrimary":"#24476a",
"widgetForegroundSecondary":"#666666",
"widgetIndicator1":"#444444",

View File

@ -172,7 +172,6 @@ void ThemeManager::loadTheme(const int id)
m_ledEnabled = QColor(colors.value("ledEnabled").toString());
m_ledDisabled = QColor(colors.value("ledDisabled").toString());
m_csvHighlight = QColor(colors.value("csvHighlight").toString());
m_widgetBackground = QColor(colors.value("widgetBackground").toString());
m_widgetForegroundPrimary = QColor(colors.value("widgetForegroundPrimary").toString());
m_widgetForegroundSecondary = QColor(colors.value("widgetForegroundSecondary").toString());
m_widgetIndicator1 = QColor(colors.value("widgetIndicator1").toString());
@ -467,11 +466,6 @@ QColor ThemeManager::csvHighlight() const
return m_csvHighlight;
}
QColor ThemeManager::widgetBackground() const
{
return m_widgetBackground;
}
QColor ThemeManager::widgetForegroundPrimary() const
{
return m_widgetForegroundPrimary;

View File

@ -159,9 +159,6 @@ class ThemeManager : public QObject
Q_PROPERTY(QColor csvHighlight
READ csvHighlight
NOTIFY themeChanged)
Q_PROPERTY(QColor widgetBackground
READ widgetBackground
NOTIFY themeChanged)
Q_PROPERTY(QColor widgetForegroundPrimary
READ widgetForegroundPrimary
NOTIFY themeChanged)
@ -274,7 +271,6 @@ public:
QColor ledEnabled() const;
QColor ledDisabled() const;
QColor csvHighlight() const;
QColor widgetBackground() const;
QColor widgetForegroundPrimary() const;
QColor widgetForegroundSecondary() const;
QColor widgetIndicator1() const;
@ -354,7 +350,6 @@ private:
QColor m_ledEnabled;
QColor m_ledDisabled;
QColor m_csvHighlight;
QColor m_widgetBackground;
QColor m_widgetForegroundPrimary;
QColor m_widgetForegroundSecondary;
QColor m_widgetIndicator1;

View File

@ -130,6 +130,45 @@ int WidgetProvider::totalWidgetCount() const
// clang-format on
}
/**
* Returns a list with all the available widgets
*/
QStringList WidgetProvider::widgetNames() const
{
QStringList names;
foreach (auto widget, m_mapGroups)
names.append(widget->title());
foreach (auto widget, m_gyroGroups)
names.append(widget->title());
foreach (auto widget, m_accelerometerGroups)
names.append(widget->title());
foreach (auto widget, m_barDatasets)
names.append(widget->title());
foreach (auto widget, m_gaugeDatasets)
names.append(widget->title());
foreach (auto widget, m_compassDatasets)
names.append(widget->title());
return names;
}
/**
* Returns the visibility status for the widget at the given @a index
*/
bool WidgetProvider::widgetVisible(const int index) const
{
if (index < totalWidgetCount())
return m_widgetVisibility.at(index);
return false;
}
/**
* Returns the number of JSON groups that implement a bar widget
*/
@ -497,6 +536,17 @@ double WidgetProvider::mapLongitude(const int index)
return DBL_MAX;
}
/**
* Updates the visibility status for the given @a index
*/
void WidgetProvider::updateWidgetVisibility(const int index, const bool visible)
{
if (index < totalWidgetCount())
m_widgetVisibility.replace(index, visible);
emit widgetVisiblityChanged();
}
/**
* Deletes all stored widget information
*/
@ -542,8 +592,13 @@ void WidgetProvider::updateModels()
// Tell UI to regenerate widget models if widget count has changed from last frame
if (totalWidgetCount() != m_widgetCount)
{
m_widgetVisibility.clear();
m_widgetCount = totalWidgetCount();
for (int i = 0; i < m_widgetCount; ++i)
m_widgetVisibility.append(true);
emit widgetCountChanged();
emit widgetVisiblityChanged();
}
// Update UI

View File

@ -42,6 +42,7 @@ class WidgetProvider : public QObject
signals:
void dataChanged();
void widgetCountChanged();
void widgetVisiblityChanged();
public:
static WidgetProvider *getInstance();
@ -54,6 +55,8 @@ public:
QList<JSON::Group *> accelerometerGroup() const;
int totalWidgetCount() const;
Q_INVOKABLE QStringList widgetNames() const;
Q_INVOKABLE bool widgetVisible(const int index) const;
Q_INVOKABLE int mapGroupCount() const;
Q_INVOKABLE int gyroGroupCount() const;
@ -90,6 +93,9 @@ public:
Q_INVOKABLE double mapLatitude(const int index);
Q_INVOKABLE double mapLongitude(const int index);
public slots:
void updateWidgetVisibility(const int index, const bool visible);
private slots:
void resetData();
void updateModels();
@ -101,6 +107,7 @@ private:
private:
int m_widgetCount;
QList<bool> m_widgetVisibility;
QList<JSON::Group *> m_mapGroups;
QList<JSON::Group *> m_gyroGroups;
QList<JSON::Dataset *> m_barDatasets;