From e9cfb8097516f072b8abffb5fe928b967a881cf8 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sun, 21 Oct 2018 23:26:27 +0000
Subject: [PATCH] Add YXZ order component, change styling of action buttons
---
src/assets/hud/action_button.9.png | Bin 0 -> 2135 bytes
src/components/set-yxz-order.js | 5 +++++
src/hub.html | 27 +++++++++++++++------------
src/hub.js | 13 +++++++------
4 files changed, 27 insertions(+), 18 deletions(-)
create mode 100644 src/assets/hud/action_button.9.png
create mode 100644 src/components/set-yxz-order.js
diff --git a/src/assets/hud/action_button.9.png b/src/assets/hud/action_button.9.png
new file mode 100644
index 0000000000000000000000000000000000000000..69af3b472d380dbea1e3d1df7ecd87a176638084
GIT binary patch
literal 2135
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
N002ovPDHLkV1k;ptvUbz
literal 0
HcmV?d00001
diff --git a/src/components/set-yxz-order.js b/src/components/set-yxz-order.js
new file mode 100644
index 000000000..df03d6297
--- /dev/null
+++ b/src/components/set-yxz-order.js
@@ -0,0 +1,5 @@
+AFRAME.registerComponent("set-yxz-order", {
+ init: function() {
+ this.el.object3D.rotation.order = "YXZ";
+ }
+});
diff --git a/src/hub.html b/src/hub.html
index 6e50fc616..991212013 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -45,6 +45,7 @@
>
<a-assets>
+ <img id="action-button" crossorigin="anonymous" src="./assets/hud/action_button.9.png">
<img id="tooltip" crossorigin="anonymous" src="./assets/hud/tooltip.9.png">
<img id="mute-off" crossorigin="anonymous" src="./assets/hud/mute_off.png">
<img id="mute-off-hover" crossorigin="anonymous" src="./assets/hud/mute_off-hover.png">
@@ -156,15 +157,17 @@
hoverable
auto-scale-cannon-physics-body
sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
- position-at-box-shape-border="target:.delete-button"
+ position-at-box-shape-border="target:.action-buttons"
destroy-at-extreme-distances
+ set-yxz-order
activatable__increase-scale="buttonStartEvents: scroll_right; buttonEndEvents: horizontal_scroll_release; activatedState: scaleUp;"
activatable__decrease-scale="buttonStartEvents: scroll_left; buttonEndEvents: horizontal_scroll_release; activatedState: scaleDown;"
>
- <!-- HACK: rotation component above is required for its side effect of setting YXZ order -->
- <a-entity class="delete-button" visible-while-frozen>
- <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
- <a-entity text=" value:Remove; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
+ <a-entity class="action-buttons" visible-while-frozen>
+ <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0.125 0.01"> </a-entity>
+ <a-entity text=" value:Pin; width:1.75; align:center;" text-raycast-hack position="0 0.125 0.02"></a-entity>
+ <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 -0.125 0.01"> </a-entity>
+ <a-entity text=" value:Remove; width:1.75; align:center;" text-raycast-hack position="0 -0.125 0.02"></a-entity>
</a-entity>
</a-entity>
</template>
@@ -249,17 +252,17 @@
haptic:#player-right-controller;
textHoverColor: #fff;
textColor: #fff;
- backgroundHoverColor: #ea4b54;
+ backgroundHoverColor: #ff3464;
backgroundColor: #fff;"
slice9="
width: 0.45;
height: 0.2;
- left: 53;
- top: 53;
- right: 10;
- bottom: 10;
- opacity: 1.3;
- src: #tooltip"
+ left: 64;
+ top: 64;
+ right: 66;
+ bottom: 66;
+ opacity: 1.0;
+ src: #action-button"
></a-mixin>
<a-mixin id="controller-super-hands"
diff --git a/src/hub.js b/src/hub.js
index f335d5cd3..03b191d39 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -113,6 +113,7 @@ import "./components/networked-counter";
import "./components/event-repeater";
import "./components/controls-shape-offset";
import "./components/grabbable-toggle";
+import "./components/set-yxz-order";
import "./components/cardboard-controls";
@@ -244,12 +245,12 @@ async function handleHubChannelJoined(entryManager, hubChannel, data) {
console.log(`Scene URL: ${sceneUrl}`);
const environmentScene = document.querySelector("#environment-scene");
- const objectsScene = document.querySelector("#objects-scene");
- const objectsUrl =
- "https://farspark-dev.reticulum.io/0/raw/0/0/0/0/aHR0cHM6Ly91cGxvYWRzLWRldi5yZXRpY3VsdW0uaW8vZmlsZXMvZDI2ZTRiOWMtNmU4My00ZTFiLTk0NWEtOWViMTE3MTQ4ZjUwLmdsdGY_dG9rZW49ODk1NjI5NzQzNjQzYjljOGVhM2I2MTA2OTY4MzAxYTU";
- const objectsEl = document.createElement("a-entity");
- objectsEl.setAttribute("gltf-model-plus", { src: objectsUrl, useCache: false, inflate: true });
- objectsScene.appendChild(objectsEl);
+ //const objectsScene = document.querySelector("#objects-scene");
+ //const objectsUrl =
+ // "https://farspark-dev.reticulum.io/0/raw/0/0/0/0/aHR0cHM6Ly91cGxvYWRzLWRldi5yZXRpY3VsdW0uaW8vZmlsZXMvZDI2ZTRiOWMtNmU4My00ZTFiLTk0NWEtOWViMTE3MTQ4ZjUwLmdsdGY_dG9rZW49ODk1NjI5NzQzNjQzYjljOGVhM2I2MTA2OTY4MzAxYTU";
+ //const objectsEl = document.createElement("a-entity");
+ //objectsEl.setAttribute("gltf-model-plus", { src: objectsUrl, useCache: false, inflate: true });
+ //objectsScene.appendChild(objectsEl);
if (glbAsset || hasExtension) {
const gltfEl = document.createElement("a-entity");
--
GitLab