From 5c35006c74c85413ab6a4ec912eba71253523b46 Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Tue, 17 Oct 2017 19:43:27 -0700
Subject: [PATCH] Begin prototyping watch hud with mute state indicator
---
public/assets/hud/watch.bin | Bin 0 -> 3084 bytes
public/assets/hud/watch.gltf | 127 +++++++++++++++++++++++++
public/index.html | 23 +++--
src/components/mute-state-indicator.js | 31 ++++++
src/index.js | 1 +
5 files changed, 170 insertions(+), 12 deletions(-)
create mode 100644 public/assets/hud/watch.bin
create mode 100644 public/assets/hud/watch.gltf
create mode 100644 src/components/mute-state-indicator.js
diff --git a/public/assets/hud/watch.bin b/public/assets/hud/watch.bin
new file mode 100644
index 0000000000000000000000000000000000000000..c90e4ecbe70f2623bfab3bcbf75dbee0e96a4144
GIT binary patch
literal 3084
zcmcJOTS${(7{_M^%Z^&JvYgFwd0aJfmbq`Arsg&?&D6BibY{Bpv@*M}Xk|!LVnR?i
z85pKu;E5n%-*ypnCv_(kbdi`)5EOJED|?@JE&c}O7vV1EkH`P}JpcFkzf<_kQOxz3
zH{W;Og82*m7A;)tw`A$ECCiuk2dwa48K4YYrCc4jCTQ)NbwR<Zkl^(yb?655#?Ua$
zrm%2LL}XNSWJGjKq&6m6yE#U?W%Jf8T3zfmU0kd_e!G50ygp&a&IEm;K}a+j#H3_#
zS5iu9+V0epbd%X)O3yIwNjGPNWbO@7WoBjX%gV{#pOclFvp+X4CqFMY|3F?r;lYAK
zg+;|BMTd(^%dF*PrAI1`9;vLTvK^~BZmX`Tt*)!7x1Xp#X>T~yc=}X>bg^dW!}(;P
z#rjP8cKE7L*nHFQ($Xzao!DC^4b@5G<?w(}u8-@#;l#64Ck@q+>(mn0w^<Jgc$Vs<
zr#f<yHIVB+#gFhh`5_I}Nl$g;3TvQ58gJdpRQKwU&#NV_zruRrS*nws>d5+lQLd+Z
z;aRGap6bYD@9ez(J?fgYy!0yP7i@>_{9(?H2N$O4Nkg7VgR}4~GG>Hl|CH(P8k$A<
zViq_T^TPY$t}r8|Qz6hEBA@mPx|Vj~l4Z=$>=z;I92++fCrsQD-b{9K&HY%zwB7z`
zC*LMJ`K|_-KGCV*tYQ5zM`ZMXdVD9S!S{yVP(N(3^WR8MtaIA?$2}*%v-5jV)&u#&
zoSRs_*dKojI1A6>?+fSRtaRT3iS}t4c1RJv1$@sI#)ig*A*wg}^+>Oqx_DhxXLEjS
z>f(A0<CK<m&gWPzn9=32ai=#U%nQ9?f1Hax@y+90^o&{KT+9VMV2-$3^nmw8&*%+3
z;9bx&zBlxSdqY2%BYMEyqG#L*&cgn<pEOmUQNccgZS`(BJUUb?lK%VDluHg51)t&i
zS5I_CIqYl=<NCAfQbjpTUOXQMKQ|M*TEpC=X=455F!RjyBOd=V@=WtR|EF({-)BR`
zyyqm_ryR~u^||Qu0Lx1be@Q$!z-G}5$858$SLwcY`nj=Qt8>d?y2sSiIgz~mFaO*p
z?<0d9F!x`WY<l&7W$?f}@vPZjy60b+Nq%XF*~jxvkU!f-blyI*%^&q0u5Om8=0Kq+
zhx0N`;&rBfYo0L5;gWqdaW|R%y}8mYhjTMc?%Pa1!TQT#=Gi#N^cy_>XXM&mrP#sr
gC)gX7!&Q&U-FKM&@m;k`4%a>^7u%TrA=As@AMZZVMgRZ+
literal 0
HcmV?d00001
diff --git a/public/assets/hud/watch.gltf b/public/assets/hud/watch.gltf
new file mode 100644
index 000000000..0f50a203d
--- /dev/null
+++ b/public/assets/hud/watch.gltf
@@ -0,0 +1,127 @@
+{
+ "accessors" : [
+ {
+ "bufferView" : 0,
+ "componentType" : 5121,
+ "count" : 204,
+ "max" : [
+ 119
+ ],
+ "min" : [
+ 0
+ ],
+ "type" : "SCALAR"
+ },
+ {
+ "bufferView" : 1,
+ "componentType" : 5126,
+ "count" : 120,
+ "max" : [
+ 0.10501318424940109,
+ 0.04724307730793953,
+ 0.10020249336957932
+ ],
+ "min" : [
+ -0.10501328855752945,
+ 0.01861731894314289,
+ -0.10663323104381561
+ ],
+ "type" : "VEC3"
+ },
+ {
+ "bufferView" : 2,
+ "componentType" : 5126,
+ "count" : 120,
+ "max" : [
+ 0.9848077297210693,
+ 1.0,
+ 1.0
+ ],
+ "min" : [
+ -0.9848077297210693,
+ -1.0,
+ -0.9396926164627075
+ ],
+ "type" : "VEC3"
+ }
+ ],
+ "asset" : {
+ "generator" : "Khronos Blender glTF 2.0 exporter",
+ "version" : "2.0"
+ },
+ "bufferViews" : [
+ {
+ "buffer" : 0,
+ "byteLength" : 204,
+ "byteOffset" : 0,
+ "target" : 34963
+ },
+ {
+ "buffer" : 0,
+ "byteLength" : 1440,
+ "byteOffset" : 204,
+ "target" : 34962
+ },
+ {
+ "buffer" : 0,
+ "byteLength" : 1440,
+ "byteOffset" : 1644,
+ "target" : 34962
+ }
+ ],
+ "buffers" : [
+ {
+ "byteLength" : 3084,
+ "uri" : "watch.bin"
+ }
+ ],
+ "materials" : [
+ {
+ "name" : "Material.001",
+ "pbrMetallicRoughness" : {
+ "baseColorFactor" : [
+ 0.6400000190734865,
+ 0.6400000190734865,
+ 0.6400000190734865,
+ 1.0
+ ],
+ "metallicFactor" : 0.0
+ }
+ }
+ ],
+ "meshes" : [
+ {
+ "name" : "Cylinder.001",
+ "primitives" : [
+ {
+ "attributes" : {
+ "NORMAL" : 2,
+ "POSITION" : 1
+ },
+ "indices" : 0,
+ "material" : 0
+ }
+ ]
+ }
+ ],
+ "nodes" : [
+ {
+ "mesh" : 0,
+ "name" : "Watch",
+ "scale" : [
+ 0.6932165622711182,
+ 0.6932165622711182,
+ 0.6932165622711182
+ ]
+ }
+ ],
+ "scene" : 0,
+ "scenes" : [
+ {
+ "name" : "Scene",
+ "nodes" : [
+ 0
+ ]
+ }
+ ]
+}
diff --git a/public/index.html b/public/index.html
index 73482ec38..b5e9c3a87 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,13 +15,14 @@
audio: true;
debug: true;
connectOnLoad: false"
- mute-mic="eventSrc: #right-hand; toggleEvents: action_mute">
+ mute-mic="eventSrc: a-scene; toggleEvents: action_mute">
<a-assets>
<img id="grid" src="assets/grid.png" crossorigin="anonymous">
<img id="sky" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg" crossorigin="anonymous" />
<a-asset-item id="dodec-avatar-head" src="assets/avatars/dodec/DodecAvatarGLTF/DodecAvatar_Head.gltf"></a-asset-item>
+ <a-asset-item id="watch-model" src="assets/hud/watch.gltf"></a-asset-item>
<a-asset-item id="rock-island" src="assets/environments/RockIslandTest/RockIsland.gltf"></a-asset-item>
@@ -69,27 +70,25 @@
<a-entity
id="left-hand"
-
- vive-controls="hand: left"
- oculus-touch-controls="hand: left"
- daydream-controls
- gearvr-controls
+ hand-controls="left"
axis-dpad="centerZone: 1"
teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; button: action_teleport_"
- networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
+ networked="template:#hand-template;showLocalTemplate:false;"
+ >
+ <a-entity id="watch" gltf-model="assets/hud/watch.gltf" position="0 0.0015 0.147" rotation="3.5 0 0">
+ <a-circle mute-state-indicator="" position="0 0.023 0" rotation="-90 0 0" scale="0.04 0.04 0.04" material="color:#d8eece;shader:flat"></a-circle>
+ </a-entity>
+ </a-entity>
<a-entity
id="right-hand"
- vive-controls="hand: right"
- oculus-touch-controls="hand: right"
- daydream-controls
- gearvr-controls
+ hand-controls="right"
axis-dpad
teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; hitEntity: #telepor-indicator; button: action_teleport_;"
- networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
+ networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
</a-entity>
<a-entity class="head" gltf-model="#rock-island" position="0 0 0">
diff --git a/src/components/mute-state-indicator.js b/src/components/mute-state-indicator.js
new file mode 100644
index 000000000..00f61159c
--- /dev/null
+++ b/src/components/mute-state-indicator.js
@@ -0,0 +1,31 @@
+AFRAME.registerComponent("mute-state-indicator", {
+ schema: {},
+
+ init() {
+ this.onStateToggled = this.onStateToggled.bind(this);
+ this.updateMuteState();
+ },
+
+ play() {
+ this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+ this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+ },
+
+ pause() {
+ this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+ this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+ },
+
+ onStateToggled(e) {
+ if (!e.detail.state === "muted") return;
+ this.updateMuteState();
+ },
+
+ updateMuteState() {
+ this.el.setAttribute(
+ "material",
+ "color",
+ this.el.sceneEl.is("muted") ? "#ffd8ce" : "#d8eece"
+ );
+ }
+});
diff --git a/src/index.js b/src/index.js
index 1c0ad57d8..dd5cc1a32 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import "./components/mute-mic";
import "./components/audio-feedback";
import "./components/nametag-transform";
import "./components/avatar-customization";
+import "./components/mute-state-indicator";
import { generateName } from "./utils";
--
GitLab