Updated tiny table model and layout

This commit is contained in:
David Rowe 2018-08-29 22:10:24 +12:00
parent 49f5d5f2b7
commit b338c9f6fa
4 changed files with 30 additions and 34 deletions

View file

@ -8,6 +8,14 @@ Distributed under the Apache License, Version 2.0.
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
*/ */
@font-face {
font-family: HiFi-Glyphs;
src: url(../../../../resources/fonts/hifi-glyphs.ttf),
url(../../../../fonts/hifi-glyphs.ttf),
url(../../../../interface/resources/fonts/hifi-glyphs.ttf),
url(../fonts/hifi-glyphs.ttf);
}
* { * {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -26,12 +34,12 @@ body {
section { section {
background-color: #404040; background-color: #404040;
position: relative; position: relative;
padding: 15px; padding: 13px;
} }
section .button { section .button {
width: 100%; width: 100%;
height: 88px; height: 90px;
background-color: #252525; background-color: #252525;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
@ -61,43 +69,33 @@ section .button {
} }
img { img {
width: 60px; width: 44px;
} }
#mute { #mute {
padding-top: 12px; padding-top: 19px;
} }
#bubble { #bubble {
padding-top: 14px; padding-top: 19px;
} }
footer { #expand {
position: absolute; position: absolute;
bottom: 0; right: 13px;
width: 100%; bottom: 13px;
height: 30px; width: 40px;
text-align: center; height: 40px;
color: #e3e3e3; border-radius: 20px;
font-weight: bold;
font-size: 26px;
} }
footer div { #expand span {
display: inline-block; display: inline-block;
height: 14px; transform: rotate(45deg);
width: 30px;
position: relative; position: relative;
top: 14px; left: 0;
} top: 5px;
font-family: hifi-glyphs;
footer div p { font-size: 24px;
position: relative; color: #ffffff;
top: -15px;
}
footer .button:hover {
border: 1px solid #e3e3e3;
border-radius: 3px;
margin: -8px;
} }

View file

@ -23,10 +23,8 @@ See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.
<div id="bubble" class="button off"> <div id="bubble" class="button off">
<img id="bubble-img" /> <img id="bubble-img" />
</div> </div>
<div id="expand" class="button off"><span>`</span></div>
</section> </section>
<footer>
<div id="expand" class="button"><p>...</p></div>
</footer>
<script src="js/miniTablet.js"></script> <script src="js/miniTablet.js"></script>
</body> </body>
</html> </html>

View file

@ -19,7 +19,7 @@
var // Base overlay var // Base overlay
proxyOverlay = null, proxyOverlay = null,
PROXY_MODEL = Script.resolvePath("./assets/models/tinyTablet.fbx"), PROXY_MODEL = Script.resolvePath("./assets/models/tinyTablet.fbx"),
PROXY_DIMENSIONS = { x: 0.0637, y: 0.0965, z: 0.0046 }, // Proportional to tablet proper. PROXY_DIMENSIONS = { x: 0.0637, y: 0.0965, z: 0.0045 }, // Proportional to tablet proper.
PROXY_POSITION_LEFT_HAND = { PROXY_POSITION_LEFT_HAND = {
x: 0, x: 0,
y: 0.1, // Distance from joint. y: 0.1, // Distance from joint.
@ -42,12 +42,12 @@
// UI overlay. // UI overlay.
proxyUIOverlay = null, proxyUIOverlay = null,
PROXY_UI_HTML = Script.resolvePath("./html/miniTablet.html"), PROXY_UI_HTML = Script.resolvePath("./html/miniTablet.html"),
PROXY_UI_DIMENSIONS = { x: 0.0577, y: 0.0905 }, PROXY_UI_DIMENSIONS = { x: 0.059, y: 0.0865 },
PROXY_UI_WIDTH_PIXELS = 150, PROXY_UI_WIDTH_PIXELS = 150,
METERS_TO_INCHES = 39.3701, METERS_TO_INCHES = 39.3701,
PROXY_UI_DPI = PROXY_UI_WIDTH_PIXELS / (PROXY_UI_DIMENSIONS.x * METERS_TO_INCHES), PROXY_UI_DPI = PROXY_UI_WIDTH_PIXELS / (PROXY_UI_DIMENSIONS.x * METERS_TO_INCHES),
PROXY_UI_OFFSET = 0.001, // Above model surface. PROXY_UI_OFFSET = 0.001, // Above model surface.
PROXY_UI_LOCAL_POSITION = { x: 0, y: 0, z: -(PROXY_DIMENSIONS.z / 2 + PROXY_UI_OFFSET) }, PROXY_UI_LOCAL_POSITION = { x: 0.0002, y: 0.0024, z: -(PROXY_DIMENSIONS.z / 2 + PROXY_UI_OFFSET) },
PROXY_UI_LOCAL_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }), PROXY_UI_LOCAL_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
proxyUIOverlayEnabled = false, proxyUIOverlayEnabled = false,
PROXY_UI_OVERLAY_ENABLED_DELAY = 500, PROXY_UI_OVERLAY_ENABLED_DELAY = 500,