Update app.py

app.py

@@ -451,6 +451,11 @@ with gr.Blocks(css=css) as demo:
                 blur_in = gr.Textbox(value="", label="Kernel size", show_label=False)
             with gr.Accordion(label="Locations", open=False):
                 offset = gr.HTML(value="""<input type='text' id='kbrd' onkeydown='
+                  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;
@@ -458,163 +463,98 @@ with gr.Blocks(css=css) as demo:
                   switch(event.key) {
                     case \"w\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y += 1;
+                      this.value = \"w | x\";
                       break;
                     case \"x\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y -= 1;
+                      this.value = \"w | x\";
                       break;
                     case \"a\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z -= 1;
+                      this.value = \"a | d\";
                       break;
                     case \"d\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z += 1;
+                      this.value = \"a | d\";
                       break;
                     case \"e\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x -= 1;
+                      this.value = \"z | e\";
                       break;
                     case \"z\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x += 1;
+                      this.value = \"z | e\";
                       break;
                     case \"s\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x = 0;
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y = 0;
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z = 0;
+                      this.value = \"\";
                       break;
                     case \"t\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.z += Math.PI/256;
+                      this.value = \"t 🔃 b\";
                       break;
                     case \"b\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.z -= Math.PI/256;
+                      this.value = \"t 🔃 b\";
                       break;
                     case \"f\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y -= Math.PI/256;
+                      this.value = \"f 🔁 h\";
                       break;
                     case \"h\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y += Math.PI/256;
+                      this.value = \"f 🔁 h\";
                       break;
                     case \"y\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.x -= Math.PI/256;
+                      this.value = \"v 🔄 y\";
                       break;
                     case \"v\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.x += Math.PI/256;
+                      this.value = \"v 🔄 y\";
                       break;
                     case \"g\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.x = 0;
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y = 0;
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.z = 0;
+                      this.value = \"\";
                       break;
                     case \"i\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.y *= 256/255;
+                      this.value = \"i | ,\";
                       break;
                     case \",\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.y /= 256/255;
+                      this.value = \"i | ,\";
                       break;
                     case \"j\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.z /= 256/255;
+                      this.value = \"j | l\";
                       break;
                     case \"l\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.z *= 256/255;
+                      this.value = \"j | l\";
                       break;
                     case \"o\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.x /= 256/255;
+                      this.value = \"m | o\";
                       break;
                     case \"m\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.x *= 256/255;
+                      this.value = \"m | o\";
                       break;
                     case \"k\":
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.x = 1;
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.y = 1;
                       BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].scaling.z = 1;
+                      this.value = \"\";
                       break;
                     default:
-                      // code block
-                  }
-                '/><pre>
-,---,---,---,---,---,---,---,---,---,---,---,---,---,-------,
-|1/2| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | + | ' | <-    |
-|---'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-----|
-| ->| | Q | W | E | R | T | Y | U | I | O | P | ] | ^ |     |
-|-----',--',--',--',--',--',--',--',--',--',--',--',--'|    |
-| Caps | A | S | D | F | G | H | J | K | L | \ | [ | * |    |
-|----,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'-,-'---'----|
-|    | < | Z | X | C | V | B | N | M | , | . | - |          |
-|----'-,-',--'--,'---'---'---'---'---'---'-,-'---',--,------|
-| ctrl |  | alt |                          |altgr |  | ctrl |
-'------'  '-----'--------------------------'------'  '------'
-                </pre><svg id='offset' height='256' width='288' viewBox='0 0 288 256' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='touch-action:none;background-color:transparent;' onpointerdown='
-                if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                  var evt = document.createEvent(\"Event\");
-                  evt.initEvent(\"click\", true, false);
-                  document.getElementById(\"reset_cam\").dispatchEvent(evt);
-                } 
-                if (this.style.backgroundColor != \"#808080\") {
-                  this.style.backgroundColor = \"#808080\";
-                  this.onpointermove = function(event) {
-                    if (this.title != \"\") {
-                      x = parseInt(event.clientX - this.getBoundingClientRect().x);
-                      y = parseInt(event.clientY - this.getBoundingClientRect().y);
-                      if (x < 0) { x = 0; } else if (x > 287) { x = 287; }
-                      if (y < 0) { y = 0; } else if (y > 255) { y = 255; }
-
-                      if (document.getElementById(\"cr\").getAttribute(\"stroke\") == \"none\") {
-                        if (x > 255 && xold > 255) {
-                          BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.y = 256-y-128;
-                          document.getElementById(\"cr\").setAttribute(\"r\", (256-y)/2);
-                        } else {
-                          BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.z = x-128;
-                          BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].position.x = y-128;
-                          document.getElementById(\"cr\").setAttribute(\"cx\", x);
-                          document.getElementById(\"cr\").setAttribute(\"cy\", y);
-                        }
-                      } else if (document.getElementById(\"cr\").getAttribute(\"stroke\") == \"black\") {
-                        BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotationQuaternion = null;
-                        if (x > 255 && xold > 255) {
-                          BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.y = (y-128)/128*Math.PI;
-                          document.getElementById(\"rg\").setAttribute(\"r\", (256-y)/256*100+\"%\");
-                        } else {
-                          BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.x = (x-128)/128*Math.PI;
-                          BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].rotation.z = (y-128)/128*Math.PI;
-                          document.getElementById(\"rg\").setAttribute(\"cx\", x/256*100+\"%\");
-                          document.getElementById(\"rg\").setAttribute(\"cy\", y/256*100+\"%\");
-                        }
-                      }
-                      xold = x;
-                      yold = y;
-                    }
+                      this.value = \"\"; 
                   }
-                  this.onpointerup = function(event) {
-                    this.title = \"\";
-                  }
-                  this.onpointerleave = function(event) {
-                    this.title = \"\";
-                  }
-                  this.onpointerdown = function(event) {
-                    xold = parseInt(event.clientX - event.target.getBoundingClientRect().x);
-                    yold = parseInt(event.clientY - event.target.getBoundingClientRect().y);
-                    this.title = xold+\",\"+yold;
-                  }
-                  this.onclick = function(event) {
-                  }
-                }
-              '>
-                <defs>
-                  <radialGradient id='rg' cx='50%' cy='50%' r='50%'>
-                    <stop offset='0%' stop-color='white'/>
-                    <stop offset='100%' stop-color='black'/>
-                  </radialGradient>
-                </defs>
-                <circle cx='127' cy='127' r='64' id='cr' stroke='none' fill='url(#rg)'/>
-                <line x1='256' y1='0' x2='256' y2='256' stroke='black' />
-              </svg><br/><label for='mode'>Mode </label><select id='mode' onchange='
-              try {
-              if (this.selectedIndex == 0) {
-                document.getElementById(\"cr\").setAttribute(\"stroke\", \"none\");
-              } else if (this.selectedIndex == 1) {
-                document.getElementById(\"cr\").setAttribute(\"stroke\", \"black\");
-              } else if (this.selectedIndex == 2) {
-                document.getElementById(\"cr\").setAttribute(\"stroke\", \"white\");
-              }
-              } catch(e) {alert(e);}
-              ' onload=''><option>Move</option><option>Rotate</option><option>Scale</option></select>""")
+                '/>""")
                 selected = gr.Number(elem_id="fnum", value=0, minimum=0, maximum=256, interactive=False)
                 output_frame.select(fn=select_frame, inputs=None, outputs=[output_depth, selected], show_progress='hidden')
                 output_depth.select(fn=select_frame, inputs=None, outputs=[output_frame, selected], show_progress='hidden')