summaryrefslogtreecommitdiff
path: root/views/controls/builder/blueprint.ejs
blob: e5f3257d7a03add4ca78eca22dd3b87c5a924406 (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
<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; }

#blueprintForm {
  width: 240px;
}
</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 class="mediaDrawer fixed animate blueprintUpload active">
    <span class="close">X</span>
    <div class="box">
    
      <h2>Upload A Room Image</h2>
    
      <div id="blueprintForm">
        <div class="wallpaperUpload toolButton">
          <form>
            <span class="ion-ios-upload-outline upload-icon"></span>
            <label>Upload</label>
            <input type="file" accept="image/*" multiple>
          </form>
        </div>
        <input type="text" class="url" placeholder="Enter an image URL or...">
      </div>
    
      Please tell us the scale of your map.
      Click both corners of a wall, and then enter how long the wall is.
    
      <div id="blueprintMap">
      </div>
    
      <div id="blueprintDimensions">
        <input type="text" name="blueprint-dimensions">
        <select id="blueprint-units" name="blueprint-units">
          <option value="ft">foot</option>
          <option value="m">meter</option>
        </select>
    
        <button id="saveBlueprint">Save</button>
      </div>

    </div>
  </div>
</div>