326 lines
8.2 KiB
QML
326 lines
8.2 KiB
QML
//
|
|
// HRTF.qml
|
|
//
|
|
// HRTF App
|
|
//
|
|
// Created by Zach Fox on 2018-03-16
|
|
// 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.6
|
|
import QtQuick.Controls 2.2
|
|
import "qrc:////qml//styles-uit" as HifiStylesUit
|
|
import "qrc:////qml//controls-uit" as HifiControlsUit
|
|
|
|
Rectangle {
|
|
property bool isPlaying;
|
|
|
|
HifiStylesUit.HifiConstants { id: hifi; }
|
|
|
|
id: root;
|
|
// Style
|
|
color: hifi.colors.darkGray;
|
|
|
|
//
|
|
// TITLE BAR START
|
|
//
|
|
Item {
|
|
id: titleBarContainer;
|
|
// Size
|
|
width: root.width;
|
|
height: 50;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
|
|
// Title bar text
|
|
HifiStylesUit.RalewaySemiBold {
|
|
id: titleBarText;
|
|
text: "HRTF";
|
|
// Text size
|
|
size: hifi.fontSizes.overlayTitle;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
anchors.leftMargin: 16;
|
|
// Style
|
|
color: hifi.colors.lightGrayText;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
|
|
// Separator
|
|
HifiControlsUit.Separator {
|
|
anchors.left: parent.left;
|
|
anchors.right: parent.right;
|
|
anchors.bottom: parent.bottom;
|
|
}
|
|
}
|
|
//
|
|
// TITLE BAR END
|
|
//
|
|
|
|
Item {
|
|
id: soundButtonsContainer;
|
|
anchors.top: titleBarContainer.bottom;
|
|
anchors.topMargin: 20;
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 16;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: 16;
|
|
height: 70;
|
|
|
|
HifiControlsUit.Button {
|
|
id: songButton;
|
|
color: hifi.buttons.blue;
|
|
colorScheme: hifi.colorSchemes.dark;
|
|
anchors.left: parent.left;
|
|
anchors.verticalCenter: parent.verticalCenter;
|
|
width: 50;
|
|
height: 50;
|
|
text: "SONG";
|
|
onClicked: {
|
|
root.isPlaying = true;
|
|
sendToScript({ method: "soundSelected", soundID: 1 });
|
|
}
|
|
}
|
|
|
|
HifiControlsUit.Button {
|
|
id: stopButton;
|
|
color: hifi.buttons.red;
|
|
colorScheme: hifi.colorSchemes.dark;
|
|
anchors.right: parent.right;
|
|
anchors.verticalCenter: parent.verticalCenter;
|
|
width: 150;
|
|
height: 50;
|
|
text: "STOP SOUNDS";
|
|
onClicked: {
|
|
root.isPlaying = false;
|
|
sendToScript({ method: "stopSounds" });
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: positionsContainer;
|
|
anchors.top: soundButtonsContainer.bottom;
|
|
anchors.topMargin: 16;
|
|
width: parent.width;
|
|
height: width;
|
|
color: "#eeeeee";
|
|
|
|
Rectangle {
|
|
id: avatarPositionCircle;
|
|
z: 2;
|
|
width: 60;
|
|
height: width;
|
|
radius: width;
|
|
color: "red";
|
|
anchors.centerIn: positionsContainer;
|
|
|
|
Rectangle {
|
|
width: 20;
|
|
height: width;
|
|
radius: width;
|
|
color: "black";
|
|
anchors.top: parent.top;
|
|
anchors.horizontalCenter: parent.horizontalCenter;
|
|
|
|
transform: Rotation {
|
|
id: myAvatarOrientationRotation;
|
|
origin.x: 10;
|
|
origin.y: 30;
|
|
}
|
|
|
|
Timer {
|
|
interval: 50;
|
|
repeat: true;
|
|
running: parent.visible;
|
|
onTriggered: {
|
|
myAvatarOrientationRotation.angle = -1 * MyAvatar.bodyYaw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: audioPositionCircle;
|
|
z: 3;
|
|
width: 30;
|
|
height: width;
|
|
radius: width;
|
|
color: "yellow";
|
|
x: positionsContainer.width/2 - audioPositionCircle.width/2;
|
|
y: positionsContainer.height/2 - audioPositionCircle.height/2 - 50;
|
|
|
|
onXChanged: {
|
|
computeAudioPosition();
|
|
}
|
|
|
|
onYChanged: {
|
|
computeAudioPosition();
|
|
}
|
|
|
|
HifiStylesUit.HiFiGlyphs {
|
|
text: root.isPlaying ? hifi.glyphs.vol_3 : hifi.glyphs.vol_0;
|
|
size: 25;
|
|
anchors.left: audioPositionCircle.left;
|
|
anchors.leftMargin: 3;
|
|
anchors.verticalCenter: audioPositionCircle.verticalCenter;
|
|
color: root.isPlaying ? "black" : "gray";
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: oneMeterCircle;
|
|
z: 2;
|
|
width: positionsContainer.width * 2 / 3;
|
|
height: width;
|
|
radius: width;
|
|
color: Qt.rgba(0, 0, 0, 0);
|
|
border.width: 3;
|
|
border.color: Qt.rgba(0, 0, 0, 0.7);
|
|
anchors.centerIn: parent;
|
|
|
|
HifiStylesUit.RalewaySemiBold {
|
|
text: "1m";
|
|
// Text size
|
|
size: 16;
|
|
// Anchors
|
|
anchors.bottom: parent.top;
|
|
anchors.bottomMargin: 2;
|
|
anchors.left: parent.left;
|
|
anchors.right: parent.right;
|
|
// Style
|
|
color: hifi.colors.darkGray;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHCenter;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent;
|
|
drag.target: audioPositionCircle;
|
|
drag.axis: Drag.XAndYAxis;
|
|
drag.minimumX: 0;
|
|
drag.maximumX: positionsContainer.width - audioPositionCircle.width;
|
|
drag.minimumY: 0;
|
|
drag.maximumY: positionsContainer.height - audioPositionCircle.height;
|
|
|
|
onDoubleClicked: {
|
|
audioPositionCircle.x = positionsContainer.width/2 - audioPositionCircle.width/2;
|
|
audioPositionCircle.y = positionsContainer.height/2 - audioPositionCircle.height/2 - 50;
|
|
soundPositionY.value = 0;
|
|
}
|
|
}
|
|
|
|
Slider {
|
|
id: soundPositionY;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: 10;
|
|
width: 20;
|
|
height: parent.height;
|
|
from: -1.25;
|
|
to: 1.25;
|
|
value: 0;
|
|
orientation: Qt.Vertical;
|
|
|
|
onValueChanged: {
|
|
computeAudioPosition();
|
|
}
|
|
|
|
background: Rectangle {
|
|
x: soundPositionY.leftPadding;
|
|
y: soundPositionY.topPadding + soundPositionY.availableHeight / 2 - height / 2;
|
|
width: soundPositionY.availableWidth;
|
|
height: soundPositionY.availableHeight;
|
|
radius: 2
|
|
color: "#bdbebf"
|
|
}
|
|
|
|
handle: Rectangle {
|
|
x: soundPositionY.leftPadding + soundPositionY.availableWidth / 2 - width / 2;
|
|
y: soundPositionY.topPadding + soundPositionY.visualPosition * (soundPositionY.availableHeight - height);
|
|
implicitWidth: 24;
|
|
implicitHeight: 24;
|
|
radius: 12;
|
|
color: soundPositionY.pressed ? "#f0f0f0" : "#f6f6f6";
|
|
border.color: "#bdbebf";
|
|
|
|
HifiStylesUit.RalewaySemiBold {
|
|
text: "Y";
|
|
// Text size
|
|
size: 14;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
// Style
|
|
color: hifi.colors.darkGray;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHCenter;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
HifiStylesUit.RalewaySemiBold {
|
|
text: "Red circle is you. Black dot is your orientation.\nDrag yellow circle for audio X/Z; slider on right for Y.";
|
|
anchors.top: positionsContainer.bottom;
|
|
anchors.bottom: parent.bottom;
|
|
width: parent.width;
|
|
// Text size
|
|
size: 18;
|
|
// Style
|
|
color: hifi.colors.white;
|
|
horizontalAlignment: Text.AlignHCenter;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
wrapMode: Text.Wrap;
|
|
}
|
|
|
|
//
|
|
// FUNCTION DEFINITIONS START
|
|
//
|
|
|
|
function computeAudioPosition() {
|
|
var xPos = 1.5/(positionsContainer.width/2 - audioPositionCircle.width/2) * (audioPositionCircle.x - positionsContainer.width/2 + audioPositionCircle.width/2);
|
|
var yPos = soundPositionY.value;
|
|
var zPos = 1.5/(positionsContainer.height/2 - audioPositionCircle.height/2) * (audioPositionCircle.y - positionsContainer.height/2 + audioPositionCircle.height/2);
|
|
//console.log("Audio position changed. x: " + xPos + " y: " + yPos + " z: " + zPos);
|
|
sendToScript({ method: "positionSelected", x: xPos, y: yPos, z: zPos });
|
|
}
|
|
|
|
//
|
|
// Function Name: fromScript()
|
|
//
|
|
// Relevant Variables:
|
|
// None
|
|
//
|
|
// Arguments:
|
|
// message: The message sent from the app JavaScript.
|
|
// Messages are in format "{method, params}", like json-rpc.
|
|
//
|
|
// Description:
|
|
// Called when a message is received from app .js.
|
|
//
|
|
function fromScript(message) {
|
|
switch (message.method) {
|
|
case 'updateState':
|
|
root.isPlaying = message.isPlaying;
|
|
break;
|
|
default:
|
|
console.log('Unrecognized message from HRTF.js:', JSON.stringify(message));
|
|
break;
|
|
}
|
|
}
|
|
|
|
signal sendToScript(var message);
|
|
|
|
//
|
|
// FUNCTION DEFINITIONS END
|
|
//
|
|
}
|