content/hifi-content/zfox/gestureApp/Gestures.qml
2022-02-14 02:04:11 +01:00

791 lines
28 KiB
QML

//
// Gestures.qml
// qml/hifi
//
// Gestures App
//
// Created by Zach Fox on 2018-07-24
// Copyright 2018 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
import Hifi 1.0 as Hifi
import QtQuick 2.7
import QtQuick.Controls 2.2
import "qrc:////qml//styles-uit" as HifiStylesUit
import "qrc:////qml//controls-uit" as HifiControlsUit
import "qrc:////qml//controls" as HifiControls
import "qrc:////qml//hifi" as Hifi
Rectangle {
HifiStylesUit.HifiConstants { id: hifi; }
id: root;
// Style
color: "#404040";
property bool uiReady: false;
property bool isRecordingSelectedGestures: false;
property int listeningForGestureIndex: -1;
Rectangle {
z: 999;
id: loading;
anchors.fill: parent;
visible: !root.uiReady;
color: Qt.rgba(0.0, 0.0, 0.0, 0.85);
// This object is always used in a popup.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
propagateComposedEvents: false;
}
AnimatedImage {
id: processingImage;
source: "processing.gif"
width: 74;
height: width;
anchors.verticalCenter: parent.verticalCenter;
anchors.horizontalCenter: parent.horizontalCenter;
}
}
Rectangle {
z: 998;
id: importPopup;
anchors.fill: parent;
visible: false;
color: Qt.rgba(0.0, 0.0, 0.0, 0.85);
// This object is always used in a popup.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
anchors.fill: parent;
hoverEnabled: true;
propagateComposedEvents: false;
}
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: hifi.colors.baseGrayHighlight;
HifiStylesUit.RalewaySemiBold {
id: importPopupTitleText;
text: "Import Gesture Data";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
height: 40;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
TextArea {
id: dataTextArea;
font.family: "Fira Sans Regular";
placeholderText: "Paste Gesture Data Here";
font.pixelSize: 12;
// Anchors
anchors.top: importPopupTitleText.bottom;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: importButton.top;
anchors.bottomMargin: 8;
// Style
background: Rectangle {
anchors.fill: parent;
color: dataTextArea.activeFocus ? hifi.colors.black : hifi.colors.baseGrayShadow
border.width: dataTextArea.activeFocus ? 1 : 0;
border.color: dataTextArea.activeFocus ? hifi.colors.primaryHighlight : hifi.colors.textFieldLightBackground;
}
color: hifi.colors.white;
textFormat: TextEdit.PlainText;
wrapMode: TextEdit.Wrap;
activeFocusOnPress: true;
activeFocusOnTab: true;
}
HifiControlsUit.Button {
text: "CANCEL";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.black;
anchors.right: importButton.left;
anchors.rightMargin: 8;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 8;
width: 100;
height: 50;
onClicked: {
importPopup.visible = false;
}
}
HifiControlsUit.Button {
id: importButton;
text: "IMPORT";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.blue;
anchors.right: parent.right;
anchors.rightMargin: 8;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 8;
width: 100;
height: 50;
onClicked: {
sendToScript({method: 'importGestureData', data: dataTextArea.text});
dataTextArea.text = "";
importPopup.visible = false;
}
}
}
}
//
// TITLE BAR START
//
Rectangle {
id: titleBarContainer;
// Size
width: root.width;
height: 60;
// Anchors
anchors.left: parent.left;
anchors.top: parent.top;
color: "#121212";
// Title bar text
HifiStylesUit.RalewaySemiBold {
id: titleBarText;
text: "Gestures";
// Anchors
anchors.left: parent.left;
anchors.leftMargin: 16;
width: paintedWidth;
height: parent.height;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
Rectangle {
id: gestureDetectionStatus;
property bool detected: false;
color: root.listeningForGestureIndex === -1 ? hifi.colors.black :
(gestureDetectionStatus.detected ? hifi.colors.greenHighlight : hifi.colors.redAccent);
anchors.right: parent.right;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
width: 280;
HifiStylesUit.RalewaySemiBold {
text: root.listeningForGestureIndex === -1 ? "Not Listening..." :
(gestureDetectionStatus.detected ? "DETECTED!" : "Listening...");
// Anchors
anchors.fill: parent;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
Timer {
id: gestureDetectionStatusTimer;
interval: 1000;
running: false;
repeat: false;
onTriggered: {
gestureDetectionStatus.detected = false;
}
}
}
}
//
// TITLE BAR END
//
Item {
id: masterSwitchContainer;
anchors.top: titleBarContainer.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: childrenRect.height;
HifiStylesUit.RalewaySemiBold {
id: masterSwitchLabel;
text: "Enable Gesture Recording Mapping";
// Anchors
anchors.left: parent.left;
anchors.top: parent.top;
width: paintedWidth;
height: paintedHeight;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
Switch {
id: masterSwitch;
enabled: !root.isRecordingSelectedGestures;
focusPolicy: Qt.ClickFocus;
anchors.left: parent.left;
anchors.top: masterSwitchLabel.bottom;
anchors.topMargin: 8;
width: 70;
height: 30;
hoverEnabled: true;
onHoveredChanged: {
if (hovered) {
switchHandle.color = hifi.colors.blueHighlight;
} else {
switchHandle.color = hifi.colors.lightGray;
}
}
onClicked: {
sendToScript({method: 'enableRecordingSwitchChanged', status: checked});
}
background: Rectangle {
color: parent.checked ? "#1FC6A6" : hifi.colors.white;
implicitWidth: parent.width;
implicitHeight: parent.height;
radius: height/2;
}
indicator: Rectangle {
id: switchHandle;
implicitWidth: parent.height - 4;
implicitHeight: implicitWidth;
radius: implicitWidth/2;
border.color: "#E3E3E3";
color: "#404040";
x: Math.max(4, Math.min(parent.width - width - 4, parent.visualPosition * parent.width - (width / 2) - 4))
y: parent.height / 2 - height / 2;
Behavior on x {
enabled: !parent.parent.down
SmoothedAnimation { velocity: 200 }
}
}
}
HifiStylesUit.RalewayRegular {
text: "Click right stick to start and stop recording";
// Anchors
anchors.left: parent.left;
anchors.top: masterSwitch.bottom;
anchors.topMargin: 8;
width: paintedWidth;
height: paintedHeight;
size: 16;
// Style
color: hifi.colors.lightGrayText;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
}
Item {
id: jointSelectionContainer;
anchors.top: masterSwitchContainer.bottom;
anchors.topMargin: 24;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: childrenRect.height;
property var selections: [leftHandCheckBox.checked, rightHandCheckBox.checked, headCheckBox.checked];
HifiStylesUit.RalewaySemiBold {
id: jointSelectionLabel;
text: "Record These:";
// Anchors
anchors.left: parent.left;
anchors.top: parent.top;
anchors.right: parent.right;
height: paintedHeight;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
// Left hand
HifiControlsUit.CheckBox {
id: leftHandCheckBox;
enabled: !root.isRecordingSelectedGestures;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.top: jointSelectionLabel.bottom;
anchors.topMargin: 4;
text: "Left Hand";
labelFontSize: 20;
labelFontWeight: Font.Normal;
boxSize: 24;
onClicked: {
sendToScript({method: 'updateJointSelections', selections: parent.selections});
}
}
// Right hand
HifiControlsUit.CheckBox {
id: rightHandCheckBox;
enabled: !root.isRecordingSelectedGestures;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: leftHandCheckBox.right;
anchors.leftMargin: 16;
anchors.top: jointSelectionLabel.bottom;
anchors.topMargin: 4;
text: "Right Hand";
labelFontSize: 20;
labelFontWeight: Font.Normal;
boxSize: 24;
onClicked: {
sendToScript({method: 'updateJointSelections', selections: parent.selections});
}
}
// Head hand
HifiControlsUit.CheckBox {
id: headCheckBox;
enabled: !root.isRecordingSelectedGestures;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: rightHandCheckBox.right;
anchors.leftMargin: 16;
anchors.top: jointSelectionLabel.bottom;
anchors.topMargin: 4;
text: "Head";
labelFontSize: 20;
labelFontWeight: Font.Normal;
boxSize: 24;
onClicked: {
sendToScript({method: 'updateJointSelections', selections: parent.selections});
}
}
}
Rectangle {
id: savedGesturesContainer;
anchors.top: jointSelectionContainer.bottom;
anchors.topMargin: 8;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: maxIgnoreDistanceContainer.top;
anchors.bottomMargin: 8;
color: "#0c0c0c";
Item {
id: savedGesturesListTitleBar;
anchors.top: parent.top;
anchors.topMargin: 8;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
height: 40;
HifiStylesUit.RalewaySemiBold {
id: savedGesturesListTitleText;
text: "Recorded Gestures";
// Anchors
anchors.left: parent.left;
anchors.verticalCenter: parent.verticalCenter;
width: paintedWidth;
height: paintedHeight;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.Button {
id: importButtonMain;
text: "IMPORT";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.blue;
anchors.left: savedGesturesListTitleText.right;
anchors.leftMargin: 10;
anchors.verticalCenter: parent.verticalCenter;
width: 75;
height: 30;
onClicked: {
importPopup.visible = true;
}
}
HifiControlsUit.Button {
id: clearButton;
text: "CLEAR";
enabled: savedGesturesModel.count !== 0;
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.red;
anchors.verticalCenter: parent.verticalCenter;
anchors.left: importButtonMain.right;
anchors.leftMargin: 10;
width: 60;
height: 30;
onClicked: {
root.listeningForGestureIndex = -1;
sendToScript({method: 'clearRecordedGestures'});
savedGesturesModel.clear();
}
}
}
Rectangle {
visible: savedGesturesModel.count === 0;
anchors.top: savedGesturesListTitleBar.bottom;
anchors.topMargin: 8;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: parent.bottom;
color: hifi.colors.black;
HifiStylesUit.RalewaySemiBold {
text: "No Gestures Recorded (Yet!)";
anchors.fill: parent;
// Anchors
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
}
Item {
id: sensitivity;
visible: savedGesturesList.visible;
anchors.top: savedGesturesListTitleBar.bottom;
anchors.topMargin: 8;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
height: 35;
HifiStylesUit.RalewaySemiBold {
id: sensitivityLabel;
text: "Detection Sensitivity (" + sensitivitySlider.value.toFixed(1) + "x): ";
size: 16;
color: hifi.colors.white;
anchors.left: parent.left;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
width: 205;
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.Slider {
id: sensitivitySlider;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.right: resetSensitivity.left;
anchors.rightMargin: 8;
anchors.left: sensitivityLabel.right;
anchors.leftMargin: 8;
colorScheme: hifi.colorSchemes.dark;
from: 0.1;
to: 5.0;
value: 1.0;
stepSize: 0.1;
onValueChanged: {
sendToScript({method: 'updateSensitivity', sensitivity: value});
}
onPressedChanged: {
if (!pressed) {
sendToScript({method: 'updateSensitivity', sensitivity: value});
}
}
}
HifiControlsUit.GlyphButton {
id: resetSensitivity;
anchors.verticalCenter: parent.verticalCenter;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: parent.height - 8;
width: height;
glyph: hifi.glyphs.reload;
onClicked: {
sensitivitySlider.value = 1.0;
}
}
}
ListModel {
id: savedGesturesModel;
}
ListView {
id: savedGesturesList;
visible: savedGesturesModel.count !== 0;
clip: true;
model: savedGesturesModel;
snapMode: ListView.SnapToItem;
anchors.top: sensitivity.bottom;
anchors.topMargin: 12;
anchors.left: parent.left;
anchors.right: parent.right;
anchors.bottom: parent.bottom;
delegate: Item {
width: parent.width;
height: 40;
HifiStylesUit.FiraSansRegular {
id: recordedTime;
text: model.recordedTime;
// Text size
size: 20;
// Anchors
anchors.left: parent.left;
anchors.leftMargin: 12;
height: parent.height;
width: 80;
elide: Text.ElideRight;
// Style
color: hifi.colors.white;
// Alignment
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.CheckBox {
id: lBox;
enabled: false;
checked: model.recordedLeftHand;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: recordedTime.right;
anchors.leftMargin: 12;
width: 55;
height: parent.height;
text: "L";
labelFontSize: 18;
labelFontWeight: Font.Normal;
boxSize: 16;
}
HifiControlsUit.CheckBox {
id: rBox;
enabled: false;
checked: model.recordedRightHand;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: lBox.right;
anchors.leftMargin: 4;
width: 55;
height: parent.height;
text: "R";
labelFontSize: 18;
labelFontWeight: Font.Normal;
boxSize: 16;
}
HifiControlsUit.CheckBox {
id: hmdBox;
enabled: false;
checked: model.recordedHead;
color: hifi.colors.white;
colorScheme: hifi.colorSchemes.dark;
anchors.left: rBox.right;
anchors.leftMargin: 4;
width: 80;
height: parent.height;
text: "HMD";
labelFontSize: 18;
labelFontWeight: Font.Normal;
boxSize: 16;
}
HifiControlsUit.Button {
id: makeActiveButton;
enabled: !root.isRecordingSelectedGestures;
text: root.listeningForGestureIndex === model.index ? "LISTENING" : "LISTEN";
colorScheme: hifi.colorSchemes.dark;
color: root.listeningForGestureIndex === model.index ? hifi.buttons.blue : hifi.buttons.black;
anchors.right: exportButton.left;
anchors.rightMargin: 12;
anchors.verticalCenter: parent.verticalCenter;
height: parent.height - 10;
onClicked: {
if (root.listeningForGestureIndex === model.index) {
root.listeningForGestureIndex = -1;
} else {
root.listeningForGestureIndex = model.index;
}
sendToScript({method: 'modifyListeningForGestureIndex', listeningForGestureIndex: root.listeningForGestureIndex});
}
}
HifiControlsUit.GlyphButton {
id: exportButton;
color: hifi.buttons.blue;
enabled: !root.isRecordingSelectedGestures;
glyph: hifi.glyphs.install;
width: parent.height - 10;
size: height;
anchors.right: parent.right;
anchors.rightMargin: 8;
anchors.verticalCenter: parent.verticalCenter;
onClicked: {
sendToScript({method: 'copyDataToClipboard', index: model.index});
}
}
}
}
}
Item {
id: maxIgnoreDistanceContainer;
anchors.bottom: manualRecordButton.top;
anchors.bottomMargin: 8;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 40;
HifiStylesUit.RalewaySemiBold {
id: maxIgnoreDistanceLabel;
text: "Max Ignore Distance (m):";
// Anchors
anchors.left: parent.left;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
width: paintedWidth;
size: 22;
// Style
color: hifi.colors.white;
// Alignment
horizontalAlignment: Text.AlignLeft;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.TextField {
id: maxIgnoreDistance;
colorScheme: hifi.colorSchemes.dark;
inputMethodHints: Qt.ImhDigitsOnly;
// Anchors
anchors.verticalCenter: parent.verticalCenter;
anchors.left: maxIgnoreDistanceLabel.right;
anchors.leftMargin: 8;
width: 50;
height: parent.height - 6;
activeFocusOnPress: true;
activeFocusOnTab: true;
validator: IntValidator { bottom: 1; }
onTextChanged: {
sendToScript({method: 'updateMaxIgnoreDistance', distance: parseInt(text)});
}
}
}
HifiControlsUit.Button {
id: manualRecordButton;
enabled: leftHandCheckBox.checked || rightHandCheckBox.checked || headCheckBox.checked;
text: root.isRecordingSelectedGestures ? "STOP" : "START" + " RECORDING";
colorScheme: hifi.colorSchemes.dark;
color: hifi.buttons.red;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
onClicked: {
sendToScript({method: 'toggleManualDataCapture'});
}
}
//
// FUNCTION DEFINITIONS START
//
//
// Function Name: fromScript()
//
// Relevant Variables:
// None
//
// Arguments:
// message: The message sent from the Gestures JavaScript.
// Messages are in format "{method, params}", like json-rpc.
//
// Description:
// Called when a message is received from spectatorCamera.js.
//
function fromScript(message) {
switch (message.method) {
case 'initializeUI':
masterSwitch.checked = message.masterSwitchOn;
leftHandCheckBox.checked = message.jointDataToRecord[0];
rightHandCheckBox.checked = message.jointDataToRecord[1];
headCheckBox.checked = message.jointDataToRecord[2];
root.listeningForGestureIndex = message.currentlyDetectingGesture;
sensitivitySlider.value = message.gestureDetectionSensitivityMultiplier;
savedGesturesModel.clear();
maxIgnoreDistance.text = message.maxIgnoreDistance;
root.uiReady = true;
break;
case 'updateIsRecordingSelectedGestures':
root.isRecordingSelectedGestures = message.isRecordingSelectedGestures;
break;
case 'appendRecordedGesture':
var gestureData = {
index: message.index,
recordedTime: message.recordedTime,
recordedLeftHand: message.recordedJoints[0],
recordedRightHand: message.recordedJoints[1],
recordedHead: message.recordedJoints[2],
};
savedGesturesModel.append(gestureData);
break;
case 'gestureDetected':
gestureDetectionStatus.detected = true;
gestureDetectionStatusTimer.restart();
break;
default:
console.log('Unrecognized message from gestures.js:', JSON.stringify(message));
}
}
signal sendToScript(var message);
//
// FUNCTION DEFINITIONS END
//
}