Working on #726. Added temporary url input and load button.

packages/viewer-sandbox/index.html

@@ -12,6 +12,18 @@
       <div class="container">
         <div class="row">
           <div class="twelve columns h-96">
+            <input
+            id="objectUrlInput"
+            class="input"
+            type="text"
+            name="objectId"
+            placeholder="Object Url"
+            style="width: 49%"
+            value="https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f"
+            />
+            <button id="loadButton" class="button" onclick="loadData()" style="width: 29%">
+              Load Object URL
+            </button>
             <div id="renderer" />
           </div>
         </div>

packages/viewer-sandbox/src/Sandbox.ts

@@ -0,0 +1,23 @@
+import { Viewer } from '@speckle/viewer';
+import { Pane } from 'tweakpane'
+
+export default class Sandbox {
+    private viewer: Viewer;
+    private pane: Pane;
+
+    public constructor(viewer: Viewer) {
+        this.viewer = viewer;
+        this.pane = new Pane({ title: 'Sandbox', expanded: true});
+    }
+
+
+    public makeGenericUI() {
+        const clearButton = this.pane.addButton({
+            title: 'Clear All',
+          });
+          
+        clearButton.on('click', () => {
+            this.viewer.unloadAll();
+        });
+    }
+}

packages/viewer-sandbox/src/main.ts

@@ -1,8 +1,11 @@
 import { Pane } from 'tweakpane'
 import { Viewer } from '@speckle/viewer'
 import './style.css'
+import Sandbox from './Sandbox';
 
 const container = document.querySelector<HTMLDivElement>('#renderer')
+const urlInput = document.querySelector<HTMLInputElement>("#objectUrlInput");
+
 if (!container) {
   throw new Error("Couldn't find #app container!")
 }
@@ -15,20 +18,17 @@ const viewer = new Viewer({
 
 window.addEventListener('load', () => {
   viewer.onWindowResize()
-})
+});
 
-// Tweakpane setup
-const PARAMS = {
-  factor: 123,
-  title: 'hello',
-  color: '#ff0055'
+// TEMPORARY
+(window as any).loadData = ()=> {
+  viewer.loadObject(
+    urlInput?.value as string
+    // 'https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f'
+  )
 }
 
-const pane = new Pane()
 
-pane.addInput(PARAMS, 'factor')
-pane.addInput(PARAMS, 'title')
-pane.addInput(PARAMS, 'color')
 
 // Load demo object
 viewer.loadObject(
@@ -40,3 +40,8 @@ viewer.on<{ progress: number; id: string; url: string }>('load-progress', (a) =>
     viewer.onWindowResize()
   }
 })
+
+const sandbox = new Sandbox(viewer);
+sandbox.makeGenericUI();
+
+

packages/viewer-sandbox/src/style.css

@@ -12,3 +12,30 @@
   height: 100%;
   width: 100%;
 }
+
+.button {
+  border: 0;
+  line-height: 1.5;
+  padding: 0 20px;
+  font-size: 1rem;
+  text-align: center;
+  color: #fff;
+  text-shadow: 1px 1px 1px #000;
+  border-radius: 2px;
+  background-color: rgb(129, 129, 129);
+  background-image: linear-gradient(to top left,
+                                    rgba(0, 0, 0, .2),
+                                    rgba(0, 0, 0, .2) 30%,
+                                    rgba(0, 0, 0, 0));
+  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
+              inset -2px -2px 3px rgba(0, 0, 0, .6);
+}
+
+.input {
+  margin-bottom: 5px;
+  left: 0px;
+  border-radius: 0.1rem;
+  border: 4px solid rgb(129, 129, 129);
+}
+
+

packages/viewer-sandbox/src/type-augmentations/viewer.d.ts

@@ -12,6 +12,7 @@ declare module '@speckle/viewer' {
     })
 
     async loadObject(url: string, token?: string, enableCaching? = true): Promise<void>
+    async unloadAll()
     onWindowResize(): void
     on<A1 = unknown, A2 = unknown, A3 = unknown>(
       event: string,