Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-07 12:53:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

revamp tablet MicBar

Browse source
This commit is contained in:
Zach Pomerantz 2017-06-19 17:49:02 -07:00
parent 497ee3a522
commit c826858458
5 changed files with 224 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
interface/resources/qml/hifi/audio/MicBar.qml Normal file
View file

@ -0,0 +1,208 @@
//
// MicBar.qml
// qml/hifi/audio
//
// Created by Zach Pomerantz on 6/14/2017
// Copyright 2017 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 QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
Rectangle {
readonly property var level: Audio.inputLevel;
property bool standalone: false;
radius: 5;
color: standalone ? colors.fill : "#00000000";
border {
width: (standalone || Audio.muted || mouseArea.containsMouse) ? 2 : 0;
color: colors.border;
}
width: 240;
height: 50;
MouseArea {
id: mouseArea;
anchors {
left: icon.left;
right: bar.right;
top: icon.top;
bottom: icon.bottom;
}
hoverEnabled: true
preventStealing: true
propagateComposedEvents: false
scrollGestureEnabled: false
onClicked: { Audio.muted = !Audio.muted; }
}
Item {
id: colors;
readonly property string unmuted: "#FFF";
readonly property string muted: "#E2334D";
readonly property string gutter: "#575757";
readonly property string greenStart: "#39A38F";
readonly property string greenEnd: "#1FC6A6";
readonly property string red: colors.muted;
readonly property string fill: "#4D000000";
readonly property string border: "#4DFFFFFF";
readonly property string icon: (Audio.muted && !mouseArea.containsMouse) ? muted : unmuted;
}
Item {
id: icon;
anchors {
left: parent.left;
leftMargin: 5;
verticalCenter: parent.verticalCenter;
}
width: 40;
height: 40;
Item {
Image {
readonly property string unmutedIcon: "../../../icons/tablet-icons/mic-unmute-i.svg";
readonly property string mutedIcon: "../../../icons/tablet-icons/mic-mute-i.svg";
function exclusiveOr(a, b) { return (a || b) && !(a && b); }
id: image;
source: exclusiveOr(Audio.muted, mouseArea.containsMouse) ? mutedIcon : unmutedIcon;
width: 30;
height: 30;
anchors {
left: parent.left;
leftMargin: 5;
top: parent.top;
topMargin: 5;
}
}
ColorOverlay {
anchors { fill: image }
source: image;
color: colors.icon;
}
}
}
Item {
id: status;
readonly property string color: (Audio.muted && !mouseArea.containsMouse) ? colors.muted : colors.unmuted;
visible: Audio.muted || mouseArea.containsMouse;
anchors {
left: parent.left;
leftMargin: 50;
verticalCenter: parent.verticalCenter;
}
width: 170;
height: 8
Text {
anchors {
horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter;
}
color: parent.color;
text: Audio.muted ? (mouseArea.containsMouse ? "UNMUTE" : "MUTED") : "MUTE";
font.pointSize: 12;
}
Rectangle {
anchors {
left: parent.left;
verticalCenter: parent.verticalCenter;
}
width: 50;
height: 4;
color: parent.color;
}
Rectangle {
anchors {
right: parent.right;
verticalCenter: parent.verticalCenter;
}
width: 50;
height: 4;
color: parent.color;
}
}
Item {
id: bar;
visible: !status.visible;
anchors.fill: status;
width: status.width;
Rectangle { // base
radius: 4;
anchors { fill: parent }
color: colors.gutter;
}
Rectangle { // mask
id: mask;
width: parent.width * level;
radius: 5;
anchors {
bottom: parent.bottom;
bottomMargin: 0;
top: parent.top;
topMargin: 0;
left: parent.left;
leftMargin: 0;
}
}
LinearGradient {
anchors { fill: mask }
source: mask
start: Qt.point(0, 0);
end: Qt.point(170, 0);
gradient: Gradient {
GradientStop {
position: 0;
color: colors.greenStart;
}
GradientStop {
position: 0.8;
color: colors.greenEnd;
}
GradientStop {
position: 0.81;
color: colors.red;
}
GradientStop {
position: 1;
color: colors.red;
}
}
}
}
}

142
interface/resources/qml/hifi/tablet/Tablet.qml
View file

@ -1,20 +1,16 @@
import QtQuick 2.5
import QtGraphicalEffects 1.0
import "../../styles-uit"
import "../audio" as Audio
Item {
id: tablet
objectName: "tablet"
property double micLevel: 0.8
property int rowIndex: 0
property int columnIndex: 0
property int count: (flowMain.children.length - 1)
// called by C++ code to keep audio bar updated
function setMicLevel(newMicLevel) {
tablet.micLevel = newMicLevel;
}
// used to look up a button by its uuid
function findButtonIndex(uuid) {
if (!uuid) {
@ -83,6 +79,16 @@ Item {
Rectangle {
id: bgTopBar
height: 90
anchors {
top: parent.top
topMargin: 0
left: parent.left
leftMargin: 0
right: parent.right
rightMargin: 0
}
gradient: Gradient {
GradientStop {
position: 0
@ -94,108 +100,13 @@ Item {
color: "#1e1e1e"
}
}
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.top: parent.top
Item {
id: audioIcon
anchors.verticalCenter: parent.verticalCenter
width: 40
height: 40
anchors.left: parent.left
anchors.leftMargin: 5
Image {
id: micIcon
source: "../../../icons/tablet-icons/mic.svg"
}
Item {
visible: (Audio.muted && !toggleMuteMouseArea.containsMouse)
|| (!Audio.muted && toggleMuteMouseArea.containsMouse)
Image {
id: muteIcon
source: "../../../icons/tablet-icons/mic-mute.svg"
}
ColorOverlay {
anchors.fill: muteIcon
source: muteIcon
color: toggleMuteMouseArea.containsMouse ? "#a0a0a0" : "#ff0000"
}
}
}
Item {
id: audioBar
width: 170
height: 10
anchors.left: parent.left
anchors.leftMargin: 50
anchors.verticalCenter: parent.verticalCenter
Rectangle {
id: audioBarBase
color: "#333333"
radius: 5
anchors.fill: parent
}
Rectangle {
id: audioBarMask
width: parent.width * tablet.micLevel
color: "#333333"
radius: 5
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
}
LinearGradient {
anchors.fill: audioBarMask
source: audioBarMask
start: Qt.point(0, 0)
end: Qt.point(170, 0)
gradient: Gradient {
GradientStop {
position: 0
color: "#2c8e72"
}
GradientStop {
position: 0.8
color: "#1fc6a6"
}
GradientStop {
position: 0.81
color: "#ea4c5f"
}
GradientStop {
position: 1
color: "#ea4c5f"
}
}
}
}
MouseArea {
id: toggleMuteMouseArea
Audio.MicBar {
anchors {
left: audioIcon.left
right: audioBar.right
top: audioIcon.top
bottom: audioIcon.bottom
left: parent.left
leftMargin: 30
verticalCenter: parent.verticalCenter
}
hoverEnabled: true
preventStealing: true
propagateComposedEvents: false
scrollGestureEnabled: false
onClicked: { Audio.muted = !Audio.muted }
}
RalewaySemiBold {
@ -254,27 +165,6 @@ Item {
}
}
states: [
State {
name: "muted state"
PropertyChanges {
target: muteText
text: "UNMUTE"
}
PropertyChanges {
target: muteIcon
visible: !Audio.muted
}
PropertyChanges {
target: tablet
micLevel: 0
}
}
]
function setCurrentItemState(state) {
var index = rowIndex + columnIndex;

9
libraries/script-engine/src/TabletScriptingInterface.cpp
View file

@ -614,15 +614,6 @@ void TabletProxy::removeButton(QObject* tabletButtonProxy) {
}
}
void TabletProxy::updateAudioBar(const double micLevel) {
auto tablet = getQmlTablet();
if (!tablet) {
//qCCritical(scriptengine) << "Could not find tablet in TabletRoot.qml";
} else {
QMetaObject::invokeMethod(tablet, "setMicLevel", Qt::AutoConnection, Q_ARG(QVariant, QVariant(micLevel)));
}
}
void TabletProxy::emitScriptEvent(QVariant msg) {
if (!_toolbarMode && _qmlOffscreenSurface) {
QMetaObject::invokeMethod(_qmlOffscreenSurface, "emitScriptEvent", Qt::AutoConnection, Q_ARG(QVariant, msg));

7
libraries/script-engine/src/TabletScriptingInterface.h
View file

@ -152,13 +152,6 @@ public:
*/
Q_INVOKABLE void removeButton(QObject* tabletButtonProxy);
/**jsdoc
* Updates the audio bar in tablet to reflect latest mic level
* @function TabletProxy#updateAudioBar
* @param micLevel {double} mic level value between 0 and 1
*/
Q_INVOKABLE void updateAudioBar(const double micLevel);
/**jsdoc
* Used to send an event to the html/js embedded in the tablet
* @function TabletProxy#emitScriptEvent

11
scripts/system/tablet-ui/tabletUI.js
View file

@ -183,11 +183,6 @@
return;
}
//TODO: move to tablet qml?
if (tabletShown) {
gTablet.updateAudioBar(getMicLevel());
}
if (now - validCheckTime > MSECS_PER_SEC) {
validCheckTime = now;
updateTabletWidthFromSettings();
@ -268,12 +263,6 @@
Script.setInterval(updateShowTablet, 100);
// Calculate microphone level with the same scaling equation (log scale, exponentially averaged) in AvatarInputs and pal.js
function getMicLevel() {
//reuse already existing C++ code
return AvatarInputs.loudnessToAudioLevel(MyAvatar.audioLoudness)
}
Script.scriptEnding.connect(function () {
// if we reload scripts in tablet mode make sure we close the currently open window, by calling gotoHomeScreen