Update app.py

app.py

@@ -606,7 +606,23 @@ with gr.Blocks(css=css) as demo:
             with gr.Accordion(label="Blur levels", open=False):
                 blur_in = gr.Textbox(label="Kernel size", show_label=False, value="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1")
             with gr.Accordion(label="Locations", open=False):
-                offset = gr.HTML(value="""<input type='text' id='kbrd' onkeydown='
+                offset = gr.HTML(value="""<input type='text' id='kbrd' onpointerdown='this.style.color = \"white\";' onpointerup='this.style.color = \"auto\";' onpointermove='
+                try {
+                if (this.style.color!=\"auto\" && BABYLON) {
+                  if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
+                    var evt = document.createEvent(\"Event\");
+                    evt.initEvent(\"click\", true, false);
+                    document.getElementById(\"reset_cam\").dispatchEvent(evt);
+                  }
+                  event.preventDefault();
+                  if (BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotationQuaternion) {
+                    BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotationQuaternion = null;
+                  }
+                  BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z = event.clientX-this.getBoundingClientRect().x-64;
+                  BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y = event.clientY-this.getBoundingClientRect().y-64;
+                }
+                } catch(e) {alert(e)}
+                ' onkeydown='
                 if (BABYLON) {
                   if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                     var evt = document.createEvent(\"Event\");
@@ -712,7 +728,7 @@ with gr.Blocks(css=css) as demo:
                       this.value = \"\"; 
                   }
                 }
-                ' style='color:auto;background-color:transparent;border:1px solid lightgray;'/><pre id='keymap'>
+                ' style='height:128px;width:128px;user-select:none;color:auto;background-color:transparent;border:1px solid gray;'/><pre id='keymap'>
 `  1  2  3  4  5  6  7  8  9  0  -  =  
        W  E     T  Y     I  O     {  }
      A-`S´-D  F-`G´-H  J-`K´-L  ;  '