467 lines
20 KiB
QML
467 lines
20 KiB
QML
// SPDX-License-Identifier: GPL-3.0-or-later
|
|
|
|
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
*
|
|
* Copyright (C) 2013 - 2024, nymea GmbH
|
|
* Copyright (C) 2024 - 2025, chargebyte austria GmbH
|
|
*
|
|
* This file is part of nymea-app.
|
|
*
|
|
* nymea-app is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* nymea-app is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
* General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with nymea-app. If not, see <https://www.gnu.org/licenses/>.
|
|
*
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Controls.Material
|
|
import QtQuick.Layouts
|
|
import Nymea
|
|
|
|
import "../components"
|
|
import "../customviews"
|
|
|
|
ThingPageBase {
|
|
id: root
|
|
showBrowserButton: false
|
|
|
|
|
|
readonly property State robotState: thing.stateByName("robotState")
|
|
readonly property State errorMessageState: thing.stateByName("errorMessage")
|
|
|
|
GridLayout {
|
|
anchors.fill: parent
|
|
columns: app.landscape ? 2 : 1
|
|
|
|
Item {
|
|
Layout.preferredWidth: app.landscape ?
|
|
Math.min(parent.width - controlsContainer.minimumWidth, parent.height)
|
|
: Math.min(Math.min(500, parent.width), parent.height)
|
|
Layout.preferredHeight: width
|
|
Layout.alignment: Qt.AlignHCenter
|
|
|
|
Rectangle {
|
|
id: robotArea
|
|
anchors.centerIn: parent
|
|
height: Math.min(parent.width, parent.height) - Style.hugeMargins * 2
|
|
width: height
|
|
radius: height / 2
|
|
color: Style.tileBackgroundColor
|
|
|
|
property int robotX: width / 2
|
|
property int robotY: height / 2
|
|
|
|
property bool initialized: false
|
|
Timer {
|
|
interval: 500
|
|
running: true
|
|
repeat: false
|
|
onTriggered: {
|
|
robotArea.initialized = true;
|
|
robot.evaluateState()
|
|
}
|
|
}
|
|
|
|
ColorIcon {
|
|
id: robot
|
|
size: Style.largeIconSize
|
|
name: "qrc:/icons/cleaning-robot.svg"
|
|
x: robotArea.robotX - (width / 2)
|
|
y: robotArea.robotY - (height / 2)
|
|
color: root.robotState.value == "cleaning"
|
|
? Style.accentColor
|
|
: root.robotState.value === "error"
|
|
? Style.red
|
|
: Style.iconColor
|
|
|
|
property int pixelsPerSecond: 30
|
|
|
|
|
|
function evaluateState() {
|
|
if (!robotArea.initialized) {
|
|
return
|
|
}
|
|
|
|
switch (root.robotState.value) {
|
|
case "cleaning":
|
|
if (travelAnimation.paused) {
|
|
travelAnimation.resume();
|
|
} else {
|
|
robot.travel()
|
|
}
|
|
return
|
|
case "paused":
|
|
travelAnimation.pause()
|
|
return
|
|
case "traveling":
|
|
if (travelAnimation.paused) {
|
|
travelAnimation.resume();
|
|
} else {
|
|
robot.travel()
|
|
}
|
|
return
|
|
case "docked":
|
|
if (Math.abs(robotArea.robotX - robotArea.radius) > 2 || Math.abs(robotArea.robotY - robotArea.radius) > 2 || robot.rotation != 0) {
|
|
robot.travel(true)
|
|
}
|
|
return
|
|
case "stopped":
|
|
travelAnimation.stop()
|
|
return
|
|
case "error":
|
|
travelAnimation.pause()
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
target: root.robotState
|
|
onValueChanged: robot.evaluateState()
|
|
}
|
|
|
|
function travel(toHome) {
|
|
print("robot traveling")
|
|
var areaWidth = robotArea.width;
|
|
var radius = areaWidth / 2
|
|
|
|
if (radius < 0) {
|
|
return
|
|
}
|
|
|
|
var centerX = radius
|
|
var fromX = robotArea.robotX ? robotArea.robotX : radius
|
|
var toX;
|
|
|
|
var centerY = radius
|
|
var fromY = robotArea.robotY ? robotArea.robotY : radius
|
|
var toY;
|
|
|
|
if (toHome) {
|
|
toX = radius
|
|
toY = radius
|
|
} else {
|
|
var distanceToCenter
|
|
do {
|
|
toX = Math.floor(Math.random() * areaWidth)
|
|
toY = Math.floor(Math.random() * areaWidth)
|
|
var toXCentered = toX - centerX
|
|
var toYCentered = toY - centerY
|
|
distanceToCenter = Math.abs(Math.sqrt(Math.pow(toXCentered, 2) + Math.pow(toYCentered, 2)))
|
|
// print("new pos:", toX, toY, "to center:", toXCentered, toYCentered, "radius:", radius, "distance to center", distanceToCenter)
|
|
} while (distanceToCenter > (radius - robot.width / 2))
|
|
}
|
|
|
|
travelXAnimation.from = fromX
|
|
travelXAnimation.to = toX
|
|
|
|
travelYAnimation.from = fromY
|
|
travelYAnimation.to = toY
|
|
|
|
var distanceToTarget = Math.abs(Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2)))
|
|
var travelDuration = 1000 * distanceToTarget / robot.pixelsPerSecond
|
|
|
|
travelXAnimation.duration = travelDuration
|
|
travelYAnimation.duration = travelDuration
|
|
|
|
rotationAnimation.from = robot.rotation
|
|
if (Math.abs(fromX - toX) <= 1 && Math.abs(fromY - toY) <= 1) {
|
|
rotationAnimation.to = 0;
|
|
} else {
|
|
rotationAnimation.to = robot.getAngleDegrees(fromX, fromY, toX, toY)
|
|
}
|
|
travelAnimation.start()
|
|
}
|
|
|
|
SequentialAnimation {
|
|
id: travelAnimation
|
|
|
|
onRunningChanged: {
|
|
if (!running) {
|
|
robot.evaluateState()
|
|
}
|
|
}
|
|
|
|
RotationAnimation {
|
|
id: rotationAnimation
|
|
target: robot
|
|
property: "rotation"
|
|
duration: 500
|
|
easing.type: Easing.InOutQuad
|
|
direction: RotationAnimation.Shortest
|
|
}
|
|
ParallelAnimation {
|
|
NumberAnimation {
|
|
id: travelYAnimation
|
|
target: robotArea
|
|
property: "robotY"
|
|
}
|
|
NumberAnimation {
|
|
id: travelXAnimation
|
|
target: robotArea
|
|
property: "robotX"
|
|
}
|
|
}
|
|
}
|
|
|
|
function getAngleDegrees(fromX,fromY,toX,toY) {
|
|
var deltaX = fromX-toX;
|
|
var deltaY = fromY-toY; // reverse
|
|
var radians = Math.atan2(deltaY, deltaX)
|
|
var degrees = (radians * 180) / Math.PI - 90; // rotate
|
|
while (degrees >= 360) degrees -= 360;
|
|
while (degrees < 0) degrees += 360;
|
|
return degrees;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
Label {
|
|
Layout.fillWidth: true
|
|
Layout.margins: Style.margins
|
|
wrapMode: Text.WordWrap
|
|
horizontalAlignment: Text.AlignHCenter
|
|
visible: root.errorMessageState != null && root.robotState.value === "error"
|
|
text: root.errorMessageState ? root.errorMessageState.value : ""
|
|
}
|
|
|
|
RowLayout {
|
|
id: controlsContainer
|
|
Layout.margins: app.margins * 2
|
|
property int minimumWidth: Style.iconSize * 2.7 * 3
|
|
property int minimumHeight: Style.iconSize * 4.5
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
ProgressButton {
|
|
longpressEnabled: false
|
|
mode: root.robotState.value === "cleaning" ? "normal" : "highlight"
|
|
size: Style.bigIconSize
|
|
imageSource: root.robotState.value === "cleaning" ? "qrc:/icons/media-playback-pause.svg" : "qrc:/icons/media-playback-start.svg"
|
|
onClicked: {
|
|
if (root.robotState.value === "cleaning" || root.robotState.value === "paused") {
|
|
engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("pauseCleaning").id)
|
|
} else {
|
|
engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("startCleaning").id)
|
|
}
|
|
}
|
|
}
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
ProgressButton {
|
|
longpressEnabled: false
|
|
imageSource: "qrc:/icons/media-playback-stop.svg"
|
|
size: Style.bigIconSize
|
|
mode: "destructive"
|
|
onClicked: {
|
|
engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("returnToBase").id)
|
|
}
|
|
}
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
ProgressButton {
|
|
longpressEnabled: false
|
|
imageSource: "qrc:/icons/groups.svg"
|
|
mode: "normal"
|
|
size: Style.bigIconSize
|
|
visible: root.thing.thingClass.browsable
|
|
onClicked: {
|
|
pageStack.push(mapPageComponent)
|
|
}
|
|
}
|
|
Item {
|
|
Layout.fillWidth: true
|
|
visible: root.thing.thingClass.browsable
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
Component {
|
|
id: mapPageComponent
|
|
Page {
|
|
id: mapsPage
|
|
property BrowserItems maps: engine.thingManager.browseThing(root.thing.id, "maps")
|
|
|
|
header: NymeaHeader {
|
|
text: root.thing.name
|
|
onBackPressed: {
|
|
pageStack.pop()
|
|
}
|
|
}
|
|
|
|
BusyIndicator {
|
|
anchors.centerIn: parent
|
|
visible: mapsPage.maps.busy
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
visible: !mapsPage.maps.busy
|
|
ComboBox {
|
|
id: mapComboBox
|
|
Layout.fillWidth: true
|
|
Layout.margins: Style.margins
|
|
model: mapsPage.maps.busy ? null : mapsPage.maps
|
|
textRole: "displayName"
|
|
}
|
|
|
|
StackLayout {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
currentIndex: mapComboBox.currentIndex
|
|
|
|
Repeater {
|
|
model: mapsPage.maps
|
|
|
|
delegate: Item {
|
|
id: mapView
|
|
anchors.fill: parent
|
|
property BrowserItem map: mapsPage.maps.get(index)
|
|
property BrowserItems boundaries: engine.thingManager.browseThing(root.thing.id, map.id)
|
|
Connections {
|
|
target: boundaries
|
|
onCountChanged: {
|
|
canvas.requestPaint();
|
|
}
|
|
}
|
|
|
|
Image {
|
|
id: mapImage
|
|
anchors.fill: parent
|
|
fillMode: Image.PreserveAspectFit
|
|
source: mapView.map.thumbnail
|
|
}
|
|
|
|
ShaderEffect {
|
|
id: colorizedImage
|
|
objectName: "shader"
|
|
|
|
anchors.centerIn: parent
|
|
height: mapImage.paintedHeight
|
|
width: mapImage.paintedWidth
|
|
|
|
// Whether or not a color has been set.
|
|
visible: mapImage.status == Image.Ready && outColor != inColor
|
|
|
|
property Image source: mapImage
|
|
property color outColor: Style.backgroundColor
|
|
// Colorize only pixels of this color, leave the rest untouched.
|
|
// This needs to match the basic color of the icon set
|
|
property color inColor: "#ebf3f3"
|
|
property real threshold: 0.1
|
|
|
|
fragmentShader: "
|
|
varying highp vec2 qt_TexCoord0;
|
|
uniform sampler2D source;
|
|
uniform highp vec4 outColor;
|
|
uniform highp vec4 inColor;
|
|
uniform lowp float threshold;
|
|
uniform lowp float qt_Opacity;
|
|
void main() {
|
|
lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
|
|
gl_FragColor = mix(vec4(outColor.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, inColor.rgb))) * qt_Opacity;
|
|
}"
|
|
}
|
|
|
|
Canvas {
|
|
id: canvas
|
|
anchors.centerIn: parent
|
|
height: mapImage.paintedHeight
|
|
width: mapImage.paintedWidth
|
|
|
|
property int penWidth: 2
|
|
|
|
onPaint: {
|
|
var ctx = getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
|
|
ctx.lineWidth = canvas.penWidth
|
|
|
|
for (var i = 0; i < mapView.boundaries.count; i++) {
|
|
var boundary = mapView.boundaries.get(i)
|
|
var boundaryData = JSON.parse(boundary.description)
|
|
// console.warn("Boundary:", boundary.id, boundary.description)
|
|
|
|
var color = Qt.lighter(boundaryData["color"], 1)
|
|
ctx.strokeStyle = color
|
|
ctx.fillStyle = Qt.rgba(color.r, color.g, color.b, 0.3)
|
|
var vertices = boundaryData["vertices"]
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(vertices[0][0] * canvas.width, vertices[0][1] * canvas.height);
|
|
for (var j = 1; j < vertices.length; j++) {
|
|
ctx.lineTo(vertices[j][0] * canvas.width, vertices[j][1] * canvas.height)
|
|
}
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
}
|
|
}
|
|
Repeater {
|
|
model: mapView.boundaries
|
|
delegate: ProgressButton {
|
|
mode: "highlight"
|
|
imageSource: "qrc:/icons/media-playback-start.svg"
|
|
size: Style.smallIconSize
|
|
property BrowserItem boundary: mapView.boundaries.get(index)
|
|
property var center: {
|
|
var boundaryData = JSON.parse(boundary.description)
|
|
if (!boundaryData) {
|
|
return Qt.point(0, 0)
|
|
}
|
|
var x = 0
|
|
var y = 0
|
|
for (var i = 0; i < boundaryData["vertices"].length; i++) {
|
|
var point = boundaryData["vertices"][i];
|
|
x += boundaryData["vertices"][i][0] * canvas.width
|
|
y += boundaryData["vertices"][i][1] * canvas.height
|
|
}
|
|
x /= boundaryData["vertices"].length
|
|
y /= boundaryData["vertices"].length
|
|
print("button center:", x, y)
|
|
return Qt.point(x, y)
|
|
}
|
|
|
|
x: center.x - width / 2
|
|
y: center.y - height / 2
|
|
|
|
onClicked: {
|
|
engine.thingManager.executeBrowserItem(root.thing.id, boundary.id)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
BusyIndicator {
|
|
anchors.centerIn: parent
|
|
visible: mapView.boundaries.busy || mapImage.status == Image.Loading
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|