ARTapeMeasure.js/index.html at main · cs-util-com/ARTapeMeasure.js · GitHub

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!doctype html>
<html lang="en" class="h-full">
  <head>
    <meta charset="utf-8" />
    <title>Pocket Tape Measurements AR</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1"
    />
    <!-- Tailwind via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="m-0 h-full overflow-hidden select-none bg-black text-white">
    <!-- Unsupported-device overlay -->
    <div
      id="unsupported"
      class="fixed inset-0 z-30 flex flex-col items-center justify-center gap-4 bg-black text-center p-6"
      hidden
    >
      <h1 class="text-xl font-semibold">AR not supported</h1>
      <p class="max-w-sm text-sm leading-relaxed">
        Your browser or device doesn’t support WebXR immersive-AR sessions. Try
        the latest Chrome or Safari on a recent phone.
      </p>
    </div>

    <!-- Hero overlay with Start button (injected later) -->
    <div
      id="hero"
      class="fixed inset-0 z-20 flex flex-col items-center justify-center gap-6 bg-black text-center p-6"
      style="display: flex !important"
    ></div>

    <!-- Top-center banner for live / final distance -->
    <div
      id="banner"
      class="fixed top-2 left-1/2 z-10 -translate-x-1/2 rounded-md bg-white/20 px-3 py-1 text-sm font-semibold backdrop-blur-lg"
      hidden
    ></div>

    <!-- Triangulation mode hint banner -->
    <div
      id="triHint"
      class="fixed top-14 left-1/2 z-10 -translate-x-1/2 rounded-md bg-sky-500/80 px-3 py-1 text-xs font-semibold text-white backdrop-blur transition-opacity duration-200"
      hidden
    >
      Triangulation on — each point needs two taps.
    </div>

    <!-- Loss-of-tracking banner -->
    <div
      id="trackingWarn"
      class="fixed top-10 left-1/2 z-10 -translate-x-1/2 rounded-md bg-yellow-500/90 px-3 py-1 text-xs font-medium text-black"
      hidden
    >
      Move phone to regain tracking …
    </div>

    <!-- Triangulation overlays -->
    <div
      id="triCrosshair"
      class="pointer-events-none fixed top-1/2 left-1/2 z-10 hidden h-11 w-11 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center rounded-full border-2 border-white/80 shadow-[0_0_0_2px_rgba(0,0,0,0.45)_inset]"
    >
      <div class="h-1.5 w-1.5 rounded-full bg-white"></div>
    </div>
    <div
      id="triBaselineRing"
      class="pointer-events-none fixed top-1/2 left-1/2 z-10 hidden h-[90px] w-[90px] -translate-x-1/2 -translate-y-1/2 rounded-full"
      style="
        background: conic-gradient(
          rgb(56 189 248) 0deg,
          transparent 0deg 360deg
        );
        mask: radial-gradient(circle at center, transparent 32px, black 33px);
        -webkit-mask: radial-gradient(
          circle at center,
          transparent 32px,
          black 33px
        );
      "
    ></div>
    <div
      id="triBaselineLabel"
      class="pointer-events-none fixed top-[calc(50%+70px)] left-1/2 z-10 hidden -translate-x-1/2 rounded-full bg-white/20 px-3 py-1 text-xs font-medium text-white backdrop-blur"
      hidden
    >
      Baseline: 0.00 m
    </div>
    <div
      id="triQualityChip"
      class="pointer-events-none fixed top-[calc(50%+12px)] left-1/2 z-10 hidden -translate-x-1/2 rounded-full px-3 py-1 text-xs font-semibold text-white backdrop-blur"
      hidden
    ></div>
    <div
      id="triTapBadge"
      class="pointer-events-none fixed top-[calc(50%-46px)] left-[calc(50%+28px)] hidden rounded-full border border-white/30 bg-slate-900/90 px-1.5 py-0.5 text-[11px] font-semibold tracking-[0.02em] text-white backdrop-blur-sm"
      hidden
    >
      1/2
    </div>

    <!-- Menu button and panel -->
    <button
      id="menuButton"
      class="fixed top-3 left-3 z-20 flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 text-white backdrop-blur transition active:scale-95 hover:bg-white/30"
      aria-label="Open menu"
    >
      <svg
        aria-hidden="true"
        class="h-6 w-6"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M4 7h16M4 12h16M4 17h16"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
        />
      </svg>
    </button>
    <div
      id="triMenu"
      class="fixed top-16 left-3 z-20 hidden min-w-[15rem] rounded-2xl bg-neutral-900/95 p-4 text-sm text-white backdrop-blur shadow-[0_15px_32px_rgba(0,0,0,0.45)]"
    >
      <div class="mb-3 text-base font-semibold">Modes</div>
      <label class="flex items-center justify-between gap-3">
        <span class="font-medium">Triangulation (beta)</span>
        <label class="relative inline-flex cursor-pointer items-center">
          <input
            id="triToggle"
            type="checkbox"
            class="peer sr-only"
            title="Place each endpoint with two taps from different positions to estimate 3D by parallax."
          />
          <div
            class="h-5 w-10 rounded-full bg-gray-500 transition peer-checked:bg-sky-500"
          ></div>
          <div
            class="absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"
          ></div>
        </label>
      </label>
      <p class="mt-3 text-xs text-gray-300">
        Place each endpoint with <strong>two taps</strong> from different
        positions to estimate 3D by parallax.
      </p>
    </div>

    <!-- Floating Action Button (opens session list) -->
    <button
      id="fab"
      class="fixed bottom-4 left-4 z-10 flex h-14 w-14 items-center justify-center rounded-full bg-sky-500 text-white shadow-lg transition active:scale-95 hover:bg-sky-600"
      aria-label="Open list"
      hidden
    >
      <svg
        aria-hidden="true"
        class="h-6 w-6"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 7h12M6 12h12M6 17h7"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
        />
        <circle cx="4" cy="7" r="1" fill="currentColor" />
        <circle cx="4" cy="12" r="1" fill="currentColor" />
        <circle cx="4" cy="17" r="1" fill="currentColor" />
      </svg>
    </button>

    <!-- Triangulation quick actions -->
    <div
      id="triQuickActions"
      class="pointer-events-none fixed inset-0 z-10"
      hidden
    >
      <div
        class="pointer-events-auto fixed bottom-4 left-4 flex flex-col gap-2"
      >
        <button
          id="triUndo"
          class="rounded-lg bg-white/20 px-3 py-2 text-xs font-semibold text-white backdrop-blur transition active:scale-95 hover:bg-white/30"
          hidden
        >
          Undo tap #1
        </button>
      </div>
      <div
        class="pointer-events-auto fixed bottom-4 right-4 flex flex-col gap-2"
      >
        <button
          id="triAccept"
          class="rounded-lg bg-sky-500/90 px-3 py-2 text-xs font-semibold text-white shadow transition active:scale-95 hover:bg-sky-500"
          hidden
        >
          Accept
        </button>
        <button
          id="triRedo"
          class="rounded-lg bg-white/20 px-3 py-2 text-xs font-semibold text-white backdrop-blur transition active:scale-95 hover:bg-white/30"
          hidden
        >
          Redo #2
        </button>
      </div>
      <button
        id="triCancel"
        class="pointer-events-auto fixed top-3 right-3 flex h-10 w-10 items-center justify-center rounded-full bg-white/20 text-lg font-semibold text-white backdrop-blur transition active:scale-95 hover:bg-white/30"
        hidden
        aria-label="Cancel triangulation"
      >
        ✕
      </button>
    </div>

    <!-- Triangulation suggestion prompt -->
    <div
      id="triSuggest"
      class="fixed bottom-24 left-1/2 z-10 hidden w-[min(90%,22rem)] -translate-x-1/2 rounded-2xl bg-slate-900/85 px-4 py-3 text-xs text-white shadow-lg backdrop-blur"
      hidden
    >
      <div class="flex flex-col items-center gap-2 text-center">
        <span class="font-medium leading-snug">
          Having trouble finding a surface? Try Triangulation mode.
        </span>
        <button
          id="triSuggestButton"
          class="w-full rounded-md bg-sky-500 px-3 py-2 text-sm font-semibold text-white transition hover:bg-sky-600 active:scale-95"
        >
          Switch to triangulation
        </button>
      </div>
    </div>

    <!-- Session list modal -->
    <div
      id="listModal"
      class="fixed inset-0 z-20 flex flex-col bg-black/70 backdrop-blur-sm"
      hidden
    >
      <div class="mt-auto w-full rounded-t-2xl bg-neutral-900 p-4 pb-8">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-base font-semibold">Measurements</h2>
          <!-- Unit toggle -->
          <label class="flex items-center text-xs">
            <span>ft</span>
            <div
              class="relative inline-block w-10 mx-2 align-middle select-none"
            >
              <input id="unitToggle" type="checkbox" class="sr-only peer" />
              <div class="w-10 h-5 bg-gray-300 rounded-full"></div>
              <div
                class="absolute top-0.5 left-0.5 bg-white w-4 h-4 rounded-full peer-checked:translate-x-5 transform transition-transform"
              ></div>
            </div>
            <span>m</span>
          </label>
        </div>
        <ul id="listItems" class="max-h-52 overflow-y-auto pr-1"></ul>
        <button
          id="closeList"
          class="mt-4 w-full rounded-md bg-gray-700 py-2 text-sm hover:bg-gray-600"
        >
          Close
        </button>
      </div>
    </div>

    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.165.0/build/three.module.js",
          "three/examples/jsm/": "https://unpkg.com/three@0.165.0/examples/jsm/"
        }
      }
    </script>
    <script type="module" src="./src/app.js"></script>
    <!-- Support bubble script inclusion -->
    <script src="https://unpkg.com/@csutil/support-bubble"></script>
  </body>
</html>