blob: 3e0c097bef3dbe29dd36756f4d0ccd47fb8e6414 (
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
|
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
body {
overflow: hidden;
}
#perspective,
#perspective .mx-scene {
position: absolute;
left:0%;
top:0px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#orthographic {
position: absolute;
left:50%;
top:0px
}
.hud {
position: absolute;
top: 0;
left: 0;
padding: 10px;
background: white;
}
.ortho-hud {
left: 50%;
border-left: 1px solid black;
}
#url { width: 300px }
.hud span { color: #888; cursor: pointer; }
.hud span.active { color: #000; }
.blueprintInfo {
bottom: 14px;
left: 10px;
width: 270px;
font-size: 13px;
font-weight: 300;
padding: 10px;
}
.blueprintInfo .setting {
margin-bottom: 20px;
}
.blueprintInfo .setting.number input[type=text] {
width: 100px;
font-size: 16px;
}
</style>
<div id="blueprintView">
<div id="perspective"></div>
<div id="orthographic"></div>
<div class="hud persp-hud">
<input type="text" id="url" placeholder="paste an image URL here!">
<span class="ion-ionic active" data-role="orbit-mode"></span>
<span class="ion-archive" data-role="keyboard-mode"></span>
</div>
<div class="hud ortho-hud">
<span class="ion-navigate" data-role="arrow-mode"></span>
<span class="ion-ios-pulse active" data-role="polyline-mode"></span>
<span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
<span class="ion-scissors" data-role="eraser-mode"></span>
</div>
</div>
<div class="mediaDrawer fixed animate active blueprintEditor">
<div class="box">
<div class="blueprintUpload">
<h2>Upload your Blueprint</h2>
<p>
Upload an image which you will trace to make a floor plan.
Images should be at least 1000x1000.
</p>
<input type="hidden" name="_csrf" value="[[- token ]]">
<input type="text" class="url" placeholder="Enter an image URL or...">
<div class="wallpaperUpload toolButton">
<form>
<span class="ion-ios-upload-outline upload-icon"></span>
<label>Upload a File</label>
<input type="file" accept="image/*" multiple>
</form>
</div>
<div class="blueprints">
<h5>Your uploaded blueprints</h5>
</div>
</div>
<div class="blueprintScaler">
<div class="blueprintInfo vvbox">
Please tell us the scale of your blueprint.
Click two corners of a wall, and then enter how long the wall is.
<br><br>
You can also <span class="uploadNewBlueprint">upload another blueprint</span>.
<br><br>
<div class="setting number">
<label for="blueprint-dimensions">length</label>
<input type="text" class="units" name="blueprint-dimensions" id="blueprint-dimensions">
<select id="blueprint-units" name="blueprint-units">
<option value="ft">feet</option>
<option value="m">meters</option>
</select>
</div>
<button id="saveBlueprint">Save</button>
</div>
<div id="blueprintMap">
</div>
</div>
</div>
</div>
|
