Switched debug fade script to app but still working on broken layout

This commit is contained in:
Olivier Prat 2018-02-05 17:49:31 +01:00
parent c8bb26ae74
commit 2896c32bda
2 changed files with 293 additions and 228 deletions

View file

@ -1,3 +1,5 @@
"use strict";
// //
// debugFade.js // debugFade.js
// developer/utilities/render // developer/utilities/render
@ -9,13 +11,74 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
// //
// Set up the qml ui (function() {
var qml = Script.resolvePath('fade.qml'); var TABLET_BUTTON_NAME = "Fade";
var window = new OverlayWindow({ var QMLAPP_URL = Script.resolvePath("./fade.qml");
title: 'Fade', var ICON_URL = Script.resolvePath("../../../system/assets/images/fade-i.svg");
source: qml, var ACTIVE_ICON_URL = Script.resolvePath("../../../system/assets/images/fade-a.svg");
width: 910,
height: 610,
}); var onScreen = false;
window.setPosition(50, 50);
window.closed.connect(function() { Script.stop(); }); function onClicked() {
if (onScreen) {
tablet.gotoHomeScreen();
} else {
tablet.loadQMLSource(QMLAPP_URL);
}
}
var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
var button = tablet.addButton({
text: TABLET_BUTTON_NAME,
icon: ICON_URL,
activeIcon: ACTIVE_ICON_URL
});
var hasEventBridge = false;
function wireEventBridge(on) {
if (!tablet) {
print("Warning in wireEventBridge(): 'tablet' undefined!");
return;
}
if (on) {
if (!hasEventBridge) {
tablet.fromQml.connect(fromQml);
hasEventBridge = true;
}
} else {
if (hasEventBridge) {
tablet.fromQml.disconnect(fromQml);
hasEventBridge = false;
}
}
}
function onScreenChanged(type, url) {
if (url === QMLAPP_URL) {
onScreen = true;
} else {
onScreen = false;
}
button.editProperties({isActive: onScreen});
wireEventBridge(onScreen);
}
function fromQml(message) {
}
button.clicked.connect(onClicked);
tablet.screenChanged.connect(onScreenChanged);
Script.scriptEnding.connect(function () {
if (onScreen) {
tablet.gotoHomeScreen();
}
button.clicked.disconnect(onClicked);
tablet.screenChanged.disconnect(onScreenChanged);
tablet.removeButton(button);
});
}());

View file

@ -8,169 +8,176 @@
// Distributed under the Apache License, Version 2.0. // Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
// //
import QtQuick 2.5 import QtQuick 2.7
import QtQuick.Controls 1.4 import QtQuick.Controls 1.4
import "configSlider" import QtQuick.Layouts 1.3
import "qrc:///qml/styles-uit"
import "qrc:///qml/controls-uit" as HifiControls
import "configSlider"
import "../lib/plotperf" import "../lib/plotperf"
Column { Rectangle {
HifiConstants { id: hifi;}
id: root id: root
anchors.margins: hifi.dimensions.contentMargin.x
color: hifi.colors.baseGray;
property var config: Render.getConfig("RenderMainView.Fade"); property var config: Render.getConfig("RenderMainView.Fade");
property var configEdit: Render.getConfig("RenderMainView.FadeEdit"); property var configEdit: Render.getConfig("RenderMainView.FadeEdit");
spacing: 8
Row { Column {
spacing: 8 spacing: 5
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: hifi.dimensions.contentMargin.x
HifiControls.Label {
text: "Fade"
}
CheckBox { Row {
text: "Edit Fade" anchors.left: parent.left
checked: root.configEdit["editFade"] anchors.right: parent.right
onCheckedChanged: { spacing: 20
root.configEdit["editFade"] = checked;
Render.getConfig("RenderMainView.DrawFadedOpaqueBounds").enabled = checked; HifiControls.CheckBox {
boxSize: 20
text: "Edit"
checked: root.configEdit["editFade"]
onCheckedChanged: {
root.configEdit["editFade"] = checked;
Render.getConfig("RenderMainView.DrawFadedOpaqueBounds").enabled = checked;
}
}
HifiControls.ComboBox {
id: categoryBox
width: 260
model: ["Elements enter/leave domain", "Bubble isect. - Owner POV", "Bubble isect. - Trespasser POV", "Another user leaves/arrives", "Changing an avatar"]
Timer {
id: postpone
interval: 100; running: false; repeat: false
onTriggered: { paramWidgetLoader.sourceComponent = paramWidgets }
}
onCurrentIndexChanged: {
root.config["editedCategory"] = currentIndex;
// This is a hack to be sure the widgets below properly reflect the change of category: delete the Component
// by setting the loader source to Null and then recreate it 100ms later
paramWidgetLoader.sourceComponent = undefined;
postpone.interval = 100
postpone.start()
}
}
HifiControls.CheckBox {
boxSize: 20
text: "Manual"
checked: root.config["manualFade"]
onCheckedChanged: {
root.config["manualFade"] = checked;
}
} }
} }
ComboBox {
id: categoryBox
width: 400
model: ["Elements enter/leave domain", "Bubble isect. - Owner POV", "Bubble isect. - Trespasser POV", "Another user leaves/arrives", "Changing an avatar"]
Timer {
id: postpone
interval: 100; running: false; repeat: false
onTriggered: { paramWidgetLoader.sourceComponent = paramWidgets }
}
onCurrentIndexChanged: {
root.config["editedCategory"] = currentIndex;
// This is a hack to be sure the widgets below properly reflect the change of category: delete the Component
// by setting the loader source to Null and then recreate it 100ms later
paramWidgetLoader.sourceComponent = undefined;
postpone.interval = 100
postpone.start()
}
}
}
Row {
spacing: 8
CheckBox {
text: "Manual"
checked: root.config["manualFade"]
onCheckedChanged: {
root.config["manualFade"] = checked;
}
}
ConfigSlider { ConfigSlider {
height: 35
label: "Threshold" label: "Threshold"
integral: false integral: false
config: root.config config: root.config
property: "manualThreshold" property: "manualThreshold"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400 anchors.left: parent.left
anchors.right: parent.right
} }
}
Action {
Action { id: saveAction
id: saveAction text: "Save"
text: "Save" onTriggered: {
onTriggered: { root.config.save()
root.config.save()
}
}
Action {
id: loadAction
text: "Load"
onTriggered: {
root.config.load()
// This is a hack to be sure the widgets below properly reflect the change of category: delete the Component
// by setting the loader source to Null and then recreate it 500ms later
paramWidgetLoader.sourceComponent = undefined;
postpone.interval = 500
postpone.start()
}
}
Component {
id: paramWidgets
Column {
spacing: 8
CheckBox {
text: "Invert"
checked: root.config["isInverted"]
onCheckedChanged: { root.config["isInverted"] = checked }
} }
Row { }
spacing: 8 Action {
id: loadAction
text: "Load"
onTriggered: {
root.config.load()
// This is a hack to be sure the widgets below properly reflect the change of category: delete the Component
// by setting the loader source to Null and then recreate it 500ms later
paramWidgetLoader.sourceComponent = undefined;
postpone.interval = 500
postpone.start()
}
}
Component {
id: paramWidgets
Column {
anchors.left: parent.left
anchors.right: parent.right
spacing: 10
HifiControls.CheckBox {
text: "Invert"
checked: root.config["isInverted"]
onCheckedChanged: { root.config["isInverted"] = checked }
}
GroupBox { GroupBox {
title: "Base Gradient" title: "Base Gradient"
width: 450 anchors.left: parent.left
anchors.right: parent.right
Column { Column {
spacing: 8 spacing: 8
anchors.left: parent.left
anchors.right: parent.right
ConfigSlider { Repeater {
label: "Size X" model: [
integral: false "Size X:baseSizeX",
config: root.config "Size Y:baseSizeY",
property: "baseSizeX" "Size Z:baseSizeZ",
max: 1.0 "Level:baseLevel" ]
min: 0.0
width: 400 ConfigSlider {
} height: 35
ConfigSlider { label: modelData.split(":")[0]
label: "Size Y" integral: false
integral: false config: root.config
config: root.config property: modelData.split(":")[1]
property: "baseSizeY" max: 1.0
max: 1.0 min: 0.0
min: 0.0 }
width: 400
}
ConfigSlider {
label: "Size Z"
integral: false
config: root.config
property: "baseSizeZ"
max: 1.0
min: 0.0
width: 400
}
ConfigSlider {
label: "Level"
integral: false
config: root.config
property: "baseLevel"
max: 1.0
min: 0.0
width: 400
} }
} }
} }
GroupBox { GroupBox {
title: "Noise Gradient" title: "Noise Gradient"
width: 450
Column { Column {
spacing: 8 spacing: 8
anchors.left: parent.left
anchors.right: parent.right
ConfigSlider { ConfigSlider {
height: 35
label: "Size X" label: "Size X"
integral: false integral: false
config: root.config config: root.config
property: "noiseSizeX" property: "noiseSizeX"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
height: 35
label: "Size Y" label: "Size Y"
integral: false integral: false
config: root.config config: root.config
property: "noiseSizeY" property: "noiseSizeY"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Size Z" label: "Size Z"
@ -179,7 +186,6 @@ Column {
property: "noiseSizeZ" property: "noiseSizeZ"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Level" label: "Level"
@ -188,19 +194,15 @@ Column {
property: "noiseLevel" property: "noiseLevel"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
} }
} }
}
Row {
spacing: 8
GroupBox { GroupBox {
title: "Edge" title: "Edge"
width: 450
Column { Column {
spacing: 8 anchors.left: parent.left
anchors.right: parent.right
ConfigSlider { ConfigSlider {
label: "Width" label: "Width"
@ -209,12 +211,13 @@ Column {
property: "edgeWidth" property: "edgeWidth"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
GroupBox { GroupBox {
title: "Inner color" title: "Inner color"
Column { Column {
spacing: 8 anchors.left: parent.left
anchors.right: parent.right
ConfigSlider { ConfigSlider {
label: "Color R" label: "Color R"
integral: false integral: false
@ -222,7 +225,6 @@ Column {
property: "edgeInnerColorR" property: "edgeInnerColorR"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Color G" label: "Color G"
@ -231,7 +233,6 @@ Column {
property: "edgeInnerColorG" property: "edgeInnerColorG"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Color B" label: "Color B"
@ -240,7 +241,6 @@ Column {
property: "edgeInnerColorB" property: "edgeInnerColorB"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Color intensity" label: "Color intensity"
@ -249,14 +249,15 @@ Column {
property: "edgeInnerIntensity" property: "edgeInnerIntensity"
max: 5.0 max: 5.0
min: 0.0 min: 0.0
width: 400
} }
} }
} }
GroupBox { GroupBox {
title: "Outer color" title: "Outer color"
Column { Column {
spacing: 8 anchors.left: parent.left
anchors.right: parent.right
ConfigSlider { ConfigSlider {
label: "Color R" label: "Color R"
integral: false integral: false
@ -264,7 +265,6 @@ Column {
property: "edgeOuterColorR" property: "edgeOuterColorR"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Color G" label: "Color G"
@ -273,7 +273,6 @@ Column {
property: "edgeOuterColorG" property: "edgeOuterColorG"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Color B" label: "Color B"
@ -282,7 +281,6 @@ Column {
property: "edgeOuterColorB" property: "edgeOuterColorB"
max: 1.0 max: 1.0
min: 0.0 min: 0.0
width: 400
} }
ConfigSlider { ConfigSlider {
label: "Color intensity" label: "Color intensity"
@ -291,107 +289,111 @@ Column {
property: "edgeOuterIntensity" property: "edgeOuterIntensity"
max: 5.0 max: 5.0
min: 0.0 min: 0.0
width: 400
} }
} }
} }
} }
} }
Column { GroupBox {
GroupBox { title: "Timing"
title: "Timing"
width: 450
Column {
spacing: 8
ConfigSlider { Column {
label: "Duration" anchors.left: parent.left
integral: false anchors.right: parent.right
config: root.config
property: "duration" ConfigSlider {
max: 10.0 label: "Duration"
min: 0.1 integral: false
width: 400 config: root.config
property: "duration"
max: 10.0
min: 0.1
}
HifiControls.ComboBox {
width: 200
model: ["Linear", "Ease In", "Ease Out", "Ease In / Out"]
currentIndex: root.config["timing"]
onCurrentIndexChanged: {
root.config["timing"] = currentIndex;
} }
ComboBox { }
width: 400 GroupBox {
model: ["Linear", "Ease In", "Ease Out", "Ease In / Out"] title: "Noise Animation"
currentIndex: root.config["timing"] Column {
onCurrentIndexChanged: { anchors.left: parent.left
root.config["timing"] = currentIndex; anchors.right: parent.right
ConfigSlider {
label: "Speed X"
integral: false
config: root.config
property: "noiseSpeedX"
max: 1.0
min: -1.0
}
ConfigSlider {
label: "Speed Y"
integral: false
config: root.config
property: "noiseSpeedY"
max: 1.0
min: -1.0
}
ConfigSlider {
label: "Speed Z"
integral: false
config: root.config
property: "noiseSpeedZ"
max: 1.0
min: -1.0
} }
} }
GroupBox { }
title: "Noise Animation"
Column { PlotPerf {
spacing: 8 title: "Threshold"
ConfigSlider { height: parent.evalEvenHeight()
label: "Speed X" object: config
integral: false valueUnit: "%"
config: root.config valueScale: 0.01
property: "noiseSpeedX" valueNumDigits: "1"
max: 1.0 plots: [
min: -1.0 {
width: 400 prop: "threshold",
} label: "Threshold",
ConfigSlider { color: "#FFBB77"
label: "Speed Y"
integral: false
config: root.config
property: "noiseSpeedY"
max: 1.0
min: -1.0
width: 400
}
ConfigSlider {
label: "Speed Z"
integral: false
config: root.config
property: "noiseSpeedZ"
max: 1.0
min: -1.0
width: 400
}
} }
} ]
PlotPerf {
title: "Threshold"
height: parent.evalEvenHeight()
object: config
valueUnit: "%"
valueScale: 0.01
valueNumDigits: "1"
plots: [
{
prop: "threshold",
label: "Threshold",
color: "#FFBB77"
}
]
}
} }
} }
Row {
spacing: 8
Button {
action: saveAction
}
Button {
action: loadAction
}
}
} }
} }
} }
}
Loader {
id: paramWidgetLoader
sourceComponent: paramWidgets
Loader {
id: paramWidgetLoader
sourceComponent: paramWidgets
}
Row {
anchors.left: parent.left
anchors.right: parent.right
Button {
action: saveAction
}
Button {
action: loadAction
}
}
} }
} }