← Back to branch summary

~nchohan/+junk/mytools

« back to all changes in this revision

Viewing changes to sample_apps/ModelUploader/index.html

  • Committer: root
  • Date: 2010-11-03 07:43:57 UTC
  • Revision ID: root@appscale-image0-20101103074357-xea7ja3sor3x93oc
init

Show diffs side-by-side

added added

removed removed

Lines of Context:
sample_apps/ModelUploader/index.html
 
1
<html> 
 
2
<head> 
 
3
    <title>3DViewer++: VIew your models in 3D</title> 
 
4
    <link rel="stylesheet" href="css/lavalamp_test.css" type="text/css" media="screen"> 
 
5
    <script type="text/javascript" src="js/jquery-1.2.3.min.js"></script> 
 
6
    <script type="text/javascript" src="js/jquery.easing.min.js"></script> 
 
7
    <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> 
 
8
    <script type="text/javascript"> 
 
9
 
 
10
        function getParam( name )
 
11
        {
 
12
                name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 
13
                var regexS = "[\\?&]"+name+"=([^&#]*)";
 
14
                var regex = new RegExp( regexS );
 
15
                var results = regex.exec( window.location.href );
 
16
                if( results == null )
 
17
                        return "";
 
18
                else
 
19
                        return results[1];
 
20
        }
 
21
 
 
22
        function hideAll()
 
23
        {
 
24
                $('#dbg').hide();
 
25
                $('#main').hide();
 
26
                $('#step1').hide();
 
27
                $('#step2').hide();
 
28
                $('#step3').hide();
 
29
                {% for album in models %}
 
30
                $('#{{album.name}}_table').hide();
 
31
                {% endfor %}
 
32
 
 
33
                
 
34
        }
 
35
 
 
36
 
 
37
 
 
38
        $(function() {
 
39
            $("#1").lavaLamp({
 
40
                fx: "backout",
 
41
                speed: 700,
 
42
                click: function(event, menuItem) {
 
43
                    return false;
 
44
                }
 
45
            });
 
46
        });
 
47
                
 
48
 
 
49
 
 
50
        $(document).ready(function() {
 
51
                
 
52
                
 
53
                var tabName = '#' + getParam('tab');
 
54
                hideAll();
 
55
                if (tabName == '#')
 
56
                        $('#main').show();
 
57
                else
 
58
                        $(tabName).show();
 
59
                
 
60
 
 
61
 
 
62
                $('#home').click(function(){
 
63
                        hideAll();
 
64
                        $('#main').show();
 
65
                });
 
66
 
 
67
                $('#link1').click(function(){
 
68
                        hideAll();
 
69
                        $('#step1').show();
 
70
 
 
71
                });
 
72
 
 
73
                 $('#link2').click(function(){
 
74
                        hideAll();
 
75
                        $('#step2').show();
 
76
     
 
77
                });
 
78
 
 
79
                $('#link3').click(function(){
 
80
                        hideAll();
 
81
                        $('#step3').show();
 
82
                });
 
83
 
 
84
                
 
85
                $('#view').click(function(){
 
86
                        hideAll();
 
87
                        $('#step3').show();
 
88
                        var id = '#' + $('#albums')[0].value + '_table';
 
89
                        $(id).show();
 
90
                });
 
91
                
 
92
 
 
93
                var dbg = getParam('dbg');
 
94
                if (dbg != '') {
 
95
                        if (dbg.search("success") != -1)
 
96
                                var msg = "<div class = 'success'>" + dbg + "</div>";
 
97
                        else    
 
98
                                var msg = "<div class = 'error'>" + dbg + "</div>";
 
99
                        msg = msg.replace(/%20/g, " ");
 
100
                        $('#dbg')[0].innerHTML = msg;
 
101
                        $('#dbg').show();
 
102
                }
 
103
 
 
104
        });
 
105
 
 
106
 
 
107
    </script> 
 
108
 
 
109
 
 
110
</head> 
 
111
<body>
 
112
<div class="toolbar">
 
113
<img src = "img/logo.png" style="float:left; padding:15px; margin:10px">
 
114
<ul class="lavaLampNoImage" id="1"> 
 
115
    <li class="current" id="home"><a href="#">Home</a></li> 
 
116
    <li><a href="#" id="link1">Step 1</a></li> 
 
117
    <li><a href="#" id="link2">Step 2</a></li> 
 
118
    <li><a href="#" id="link3">step 3</a></li> 
 
119
</ul> 
 
120
</div>
 
121
 
 
122
<div class = "content">
 
123
 
 
124
<div id = "dbg">
 
125
</div>
 
126
 
 
127
<div id="main">
 
128
<h1>View 3D Models in 1, 2, 3!</h1>
 
129
 
 
130
<h3>Step 1: Organize</h3>
 
131
Create a library to upload all your models to. Have one? Select your libary
 
132
from a list of existing ones.
 
133
 
 
134
<h3>Step 2: Upload</h3>
 
135
Select your model and upload it to your album!
 
136
 
 
137
<h3>Step 3: Visualize</h3>
 
138
View your model in 3D with HMDs or your webcam! Simply print out your
 
139
ARTags (emailed to you and available on this site) and bring it to your desination!
 
140
</div>
 
141
 
 
142
<div id="step1">
 
143
<h3> Create an album! </h3>
 
144
What is an album? An album is a collection of 3D models that you can create.
 
145
Think of it as a photo album, except the pictures can be viewed in 3D! Have an album already?
 
146
Proceed to Step 2 to upload to your album! <br><br>
 
147
<form action="/createAlbum" enctype="multipart/form-data" method="POST"> 
 
148
Please enter your album name:<br> 
 
149
<input name="name" type="text" size="30"> 
 
150
<br><br>
 
151
Please enter a brief description:<br>
 
152
<textarea name = "description" COLS=40 ROWS=6></textarea>
 
153
<br><br>
 
154
<input type="submit" value="Submit"> 
 
155
</form> 
 
156
</div>
 
157
 
 
158
<div id="step2">
 
159
 
 
160
<form action="/upload" enctype="multipart/form-data" method="POST"> 
 
161
Please enter your email:<br> 
 
162
<input name="author" type="text" size="30"> 
 
163
<br><br>
 
164
Please enter the name of your model:<br>
 
165
<input name = "name" type="text" size = "30">
 
166
<br><br>
 
167
Select your album:<br>
 
168
<select name = "albums">
 
169
{% for album in albums %}
 
170
<option value="{{album.name}}">{{album.name}}</option>
 
171
{% endfor %}
 
172
</select>
 
173
<br><br>
 
174
Please select your model:<br> 
 
175
<input name="model" type="file"> 
 
176
<br><br>
 
177
If applicable, please upload your zipped texture:<br>
 
178
<form ac
 
179
<input name="texture" type="file">
 
180
<br><br>
 
181
<input type="submit" value="Submit"> 
 
182
</form> 
 
183
 
 
184
</div>
 
185
<div id="step3">
 
186
<h3>Manage and Visualize your models!</h3>
 
187
Now that you have created your model, manage them!
 
188
<br><br>
 
189
 
 
190
Select an album:
 
191
<form action="/broadcast" enctype="multipart/form-data" method="POST">
 
192
<select name = "albums" id = "albums">
 
193
{% for album in albums %}
 
194
<option id = "{{album.name}}" value="{{album.name}}">{{album.name}}</option>
 
195
{% endfor %}
 
196
</select>
 
197
<input type="button" id = "view" value="View">
 
198
{% if albums %}
 
199
<input type="submit" name="broadcast" value="Broadcast">
 
200
{% endif %}
 
201
</form>
 
202
{% for album in models%}
 
203
<div id = "{{album.name}}_table">
 
204
<table border = "1">
 
205
<tr><td>Check?</td><td>Name</td><td>Author</td><td>Fiducial Marker</td></tr>
 
206
{% for model in album.content %}
 
207
<tr>
 
208
<td></td>
 
209
<td>{{model.name}}</td>
 
210
<td>{{model.author}}</td>
 
211
<td>{{model.fiducial}}</td>
 
212
</tr>
 
213
{% endfor %}
 
214
</table>
 
215
</div>
 
216
{% endfor %}
 
217
</div> 
 
218
</div>
 
219
</body></html> 
 
 
b'\\ No newline at end of file'