blob: 30497e1dbd6b773bbae2c8f0f87640547db63faa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<!doctype html>
<html>
<head>
<title>vvalls</title>
[[ include ../partials/meta ]]
</head>
<body class="loading">
<div class="rapper page">
[[ include ../partials/header ]]
<div class="hero" style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/construction.jpg);">
<div class="holder">
</div>
</div>
<h1>How To Use VValls</h1>
<div class="projectList about howto">
<div class="item">
<div class="rap">
<span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/newproject.jpg)">
</span>
<span>
<h3>1. Define Your Space.</h3>
<words>Choose from one of our existing floor plan templates or create your own.</words>
</span>
</div>
</div>
<div class="item">
<div class="rap">
<span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/addmedia.gif)">
</span>
<span>
<h3>2. Add Your Media Files.</h3>
<words>Upload media files or choose media from our pre-loaded image/video stream. Position media on the walls.</words>
</span>
</div>
</div>
<div class="item">
<div class="rap">
<span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/wallpaper3.gif)">
</span>
<span>
<h3>3. Customize.</h3>
<words>Use color or wallpaper features to customize the look of your space.</words>
</span>
</div>
</div>
<div class="item">
<div class="rap">
<span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/colab.png)">
</span>
<span>
<h3>4. Collaborate.</h3>
<words>You can invite others to collaborate on your project.</words>
</span>
</div>
</div>
<div class="item">
<div class="rap">
<span style="background-image:url(http://okfocus.s3.amazonaws.com/images/vvalls/thumbsup.gif)">
</span>
<span>
<h3>5. Publish + Share.</h3>
<words>Share a link to your creation on social media or embed your 3D space directly into your own web page. When on the go, make sure to show off your project on your phone.</words>
</span>
</div>
</div>
<h1 style="text-align:center;">Keyboard Shortcuts</h1>
<div class="item">
<div class="rap">
<span style="background-image:url(http://okfocus.s3.amazonaws.com/random/keyboard.gif); background-position: 15%;"></span>
<span>
<words>
<h3>Getting around VValls is easier with the keyboard.</h3>
If you play video games, you should be familiar with using WASD to move -- left hand on the keyboard, right hand on the mouse.
We have added a few keys for pivoting and looking up and down.
</words>
</span>
<br clear="both">
<table border="0" class="keyboard first-keyboard">
<tr><td>W</td><td>Move forward</td></tr>
<tr><td>A</td><td>Strafe left</td></tr>
<tr><td>S</td><td>Move backward</td></tr>
<tr><td>D</td><td>Strafe right</td></tr>
<tr><td> </td></tr>
<tr><td>Q</td><td>Turn left</td></tr>
<tr><td>E</td><td>Turn right</td></tr>
<tr><td> </td></tr>
<tr><td>R</td><td>Look up</td></tr>
<tr><td>F</td><td>Look down</td></tr>
</table>
<table border="0" class="keyboard">
<tr><td>Cmd-Z</td><td>Undo</td></tr>
<tr><td>Shift-Cmd-Z</td><td>Redo</td></tr>
<tr><td>Cmd-\</td><td>Noclip mode</td></tr>
<tr><td>Esc</td><td>Cancel</td></tr>
<tr><td>Backspace</td><td>Delete currently selected media</td></tr>
<tr><td> </td></tr>
<tr><td>Mousewheel</td><td>Move forward/back</td></tr>
<tr><td>Shift-Mousewheel</td><td>Turn left/right</td></tr>
<tr><td> </td></tr>
<tr><td>Spacebar</td><td>Jump</td></tr>
</table>
<style>
.keyboard { float: left; width: 50%; }
.keyboard tr { margin: 0; padding: 0; }
.keyboard td { padding: 2px 10px; margin: 0; }
.keyboard.first-keyboard td:nth-child(1) { text-align: center; width: 50px; padding-left: 100px; }
.keyboard td:nth-child(1) { text-align: right; width: 150px; }
.keyboard td:nth-child(2) { font-weight: 300; }
</style>
</span>
</div>
</div>
</div>
[[ include ../partials/confirm-modal ]]
[[ include ../projects/layouts-modal ]]
[[ include ../partials/sign-in ]]
[[ include ../partials/footer ]]
</div>
</body>
[[ include ../partials/scripts ]]
</html>
|
