KrzysztofChojnowski at 12:37, 9 April 2021

2021-04-09T12:37:47Z

@@ Line 6: / Line 6: @@
 [[File:swipedemo_page1.jpg|400px]] [[File:swipedemo_page2.jpg|400px]]
 </span>
 == GUI implementation ==

KrzysztofChojnowski at 11:47, 9 April 2021

2021-04-09T11:47:45Z

← Older revision		Revision as of 11:47, 9 April 2021
Line 2:		Line 2:

	This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the VisionSOM-STM32MP1 module with VisionCB-STM32MP1-STD and the SL-TFT7-TP-800-480-P RGB display. All project files man be downloaded here: [[Media:SwipeDemo.zip\|SwipeDemo.zip]].		This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the VisionSOM-STM32MP1 module with VisionCB-STM32MP1-STD and the SL-TFT7-TP-800-480-P RGB display. All project files man be downloaded here: [[Media:SwipeDemo.zip\|SwipeDemo.zip]].

			<span>
			[[File:swipedemo_page1.jpg\|400px]] [[File:swipedemo_page2.jpg\|400px]]
			</span>

	== GUI implementation ==		== GUI implementation ==

KrzysztofChojnowski: Created page with "{{PageHeader|VisionSOM-STM32MP1 simple swipe demo}} toc This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the V..."

2021-04-09T11:34:59Z

Created page with "{{PageHeader|VisionSOM-STM32MP1 simple swipe demo}} __toc__ This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the V..."

New page

{{PageHeader|VisionSOM-STM32MP1 simple swipe demo}} __toc__

This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the VisionSOM-STM32MP1 module with VisionCB-STM32MP1-STD and the SL-TFT7-TP-800-480-P RGB display. All project files man be downloaded here: [[Media:SwipeDemo.zip|SwipeDemo.zip]].

== GUI implementation ==

The GUI is implemented in the three files described below. The main GUI file: main.qml, defines the application window with two pages. It also contains the implementation of necessary functions that are separated from the ui.qml files.

<pre>
import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
visible: true
visibility: "FullScreen"
title: qsTr("Tabs")

SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex

Page1Form {
button.onCheckedChanged: ledHandler.setEnabled(button.checked)
slider.onValueChanged: ledHandler.setBrightness(slider.value)
}

Page2Form {
id: chartPage
Connections {
target: pointGenerator
onDoAddSample: {
chartPage.addPoint(value)
}
}

function addPoint(value) {
dataSeries.append(numberOfPoints, value)

if (dataSeries.count > maxNumberOfPoints) {
dataSeries.remove(0)
}

dataSeries.xAxis.min += 1
dataSeries.xAxis.max += 1
numberOfPoints += 1
}
}
}

footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex

TabButton {
text: qsTr("Page 1")
}
TabButton {
text: qsTr("Page 2")
}
}
}
</pre>

The Page1Form.ui.qml file contains the first application page description. It defines a checkable button and a slited. Both for LEDs controlling.

<pre>
import QtQuick 2.9
import QtQuick.Controls 2.2

Page {
property alias button: button
property alias slider: slider

header: Label {
text: qsTr("Page 1")
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}

Button {
id: button
y: 110
width: 120
height: 60
text: qsTr("LED")
anchors.left: parent.left
anchors.leftMargin: 100
anchors.verticalCenter: parent.verticalCenter
checkable: true
}

Slider {
id: slider
x: 260
y: 110
width: 300
anchors.right: parent.right
anchors.rightMargin: 100
anchors.verticalCenterOffset: 0
anchors.verticalCenter: parent.verticalCenter
from: 0
to: 100
stepSize: 10
value: 0
}
}
</pre>

The Page2Form.ui.qml file contains the second application page description. It defines a ChartView with a line chart and two axes. The line chart has maximum of 100 points. The function responsible for dynamic points adding is implemented in the main.qml file.

<pre>
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtCharts 2.0

ChartView {
antialiasing: true
animationOptions: ChartView.NoAnimation

property int numberOfPoints: 0
property int maxNumberOfPoints: 100
property alias dataSeries: dataSeries

LineSeries {
id: dataSeries
name: "Values"
useOpenGL: true

property alias xAxis: xAxis

axisX: ValueAxis {
id: xAxis
min: -1 * maxNumberOfPoints
max: 0
visible: false
}
axisY: ValueAxis {
min: 0
max: 100
}
}
}
</pre>

== Application logic ==

The project contains the LedHandler class responsible for handling the events generated by the button and slider. It simply uses /sys/class/leds filed for brightness control.

<pre>
#ifndef LEDHANDLER_H
#define LEDHANDLER_H

#include <QObject>
#include <QFile>

class LedHandler : public QObject
{
Q_OBJECT
public:
explicit LedHandler(QObject *parent = nullptr);

signals:

public slots:
void setEnabled(bool enabled);
void setBrightness(unsigned int brightness);

private:
QFile* gpioLedFile;
QFile* pwmLedFile;
};

#endif // LEDHANDLER_H
</pre>

<pre>
#include "ledhandler.h"
#include <QDebug>

LedHandler::LedHandler(QObject *parent) : QObject(parent)
{
this->gpioLedFile = new QFile("/sys/class/leds/led3/brightness");
this->gpioLedFile->open(QIODevice::WriteOnly);
this->pwmLedFile = new QFile("/sys/class/leds/led2/brightness");
this->pwmLedFile->open(QIODevice::WriteOnly);
}

void LedHandler::setEnabled(bool enabled)
{
qDebug() << "Enabled" << enabled;

if (enabled)
this->gpioLedFile->write("1");
else
this->gpioLedFile->write("0");

this->gpioLedFile->flush();
}

void LedHandler::setBrightness(unsigned int brightness)
{
qDebug() << "Brightness" << brightness;
this->pwmLedFile->write(QString::number(brightness).toLatin1());
this->pwmLedFile->flush();
}
</pre>

The second class added in this project is the PointGenerator class. It simply uses a QTimer for sending a signal to the chart every one second.

<pre>
#ifndef POINTGENERATOR_H
#define POINTGENERATOR_H

#include <QObject>
#include <QTimer>

class PointGenerator : public QObject
{
Q_OBJECT
public:
explicit PointGenerator(QObject *parent = nullptr);

signals:
void doAddSample(int value);

public slots:
void timeout();

private:
QTimer* timer;
};

#endif // POINTGENERATOR_H
</pre>

<pre>
#include "pointgenerator.h"
#include <QDateTime>

PointGenerator::PointGenerator(QObject *parent) : QObject(parent)
{
this->timer = new QTimer();
this->timer->setSingleShot(false);
this->timer->start(1000);
connect(this->timer, SIGNAL(timeout()), this, SLOT(timeout()));

qsrand(QDateTime::currentMSecsSinceEpoch() / 1000);
}

void PointGenerator::timeout()
{
emit this->doAddSample(qrand() % 100);
}
</pre>

Finally the main.cpp file contains the main application function that creates the application and connects the necessary objects with the GUI.

<pre>
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "ledhandler.h"
#include "pointgenerator.h"

int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

QApplication app(argc, argv);

LedHandler ledHandler;
ledHandler.setBrightness(0);
ledHandler.setEnabled(false);

PointGenerator pointGenerator;

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("ledHandler", &ledHandler);
engine.rootContext()->setContextProperty("pointGenerator", &pointGenerator);

engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;

return app.exec();
}
</pre>

VisionSOM-STM32MP1 simple swipe demo - Revision history

KrzysztofChojnowski at 12:37, 9 April 2021

KrzysztofChojnowski at 11:47, 9 April 2021

KrzysztofChojnowski: Created page with "{{PageHeader|VisionSOM-STM32MP1 simple swipe demo}} __toc__ This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the V..."

KrzysztofChojnowski: Created page with "{{PageHeader|VisionSOM-STM32MP1 simple swipe demo}} toc This project is a simple demo presenting the Qt application with swipe view and line chart. It was tested on the V..."