Merge pull request #60 from StatikTUM/feature/iframe

Output in iFrame
StatikTUM · Sep 5, 2020 · cbc9740 · cbc9740
2 parents 9e1ee4e + c9f1699
commit cbc9740
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/nfem/model.py b/nfem/model.py
@@ -1047,7 +1047,7 @@ def show(self, height=600, timestep=0):
             for element in model.elements:
                 element.draw(canvas)
 
-        return canvas.html()
+        canvas.show(height=height)
 
 
 class KeyCollection:

diff --git a/nfem/visualization/canvas_3d.py b/nfem/visualization/canvas_3d.py
@@ -1,7 +1,7 @@
 import json
 import numpy as np
-import os
-from IPython.display import HTML
+import html
+from IPython.display import display, HTML
 from nfem.visualization.canvas_3d_html import TEMPLATE
 
 
@@ -103,5 +103,7 @@ def support(self, direction, location, color='red', layer=0):
             "layer": layer,
         })
 
-    def html(self):
-        return HTML(TEMPLATE.replace("{{data}}", json.dumps(self.data)))
+    def show(self, height):
+        content = TEMPLATE.replace("{{data}}", json.dumps(self.data))
+        element = HTML(f'<iframe seamless frameborder="0" allowfullscreen width="100%" height="{height+100}" srcdoc="{html.escape(content)}"</iframe>')
+        display(element)
diff --git a/nfem/visualization/canvas_3d_html.py b/nfem/visualization/canvas_3d_html.py
@@ -1,4 +1,20 @@
 TEMPLATE = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Canvas</title>
+</head>
+<body>
+
+<style>
+* {
+    margin: 0;
+    padding: 0;
+}
+</style>
+
 <div id="container"></div>
 <div id="slider">
     <input type="range" min="0" max="10" value="0" step="1" class="slider" id="timestep">
@@ -19,7 +35,7 @@
     let container = document.getElementById('container');
     let timestepSlider = document.getElementById('timestep');
 
-    let width = container.clientWidth * 0.8;
+    let width = window.innerWidth;
     let height = data.height;
 
     let nbScenes = data.frames.length;
@@ -585,5 +601,22 @@
     d3.select("#stop").on("click", function () {
         clearInterval(animationTimer);
     });
+
+
+    window.addEventListener( 'resize', onWindowResize, false );
+
+    function onWindowResize(){
+        camera.aspect = window.innerWidth / height;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(window.innerWidth, height);
+
+        render();
+    }
+
+    onWindowResize();
 </script>
+
+</body>
+</html>
 """