diff --git a/.gitlab/templates/index.html.template b/.gitlab/templates/index.html.template
index 782784b44aa60d5f208f505cc0ac1c5148efbc08..78d4eb421791a041365f3f6365961f6cc3bff456 100644
--- a/.gitlab/templates/index.html.template
+++ b/.gitlab/templates/index.html.template
@@ -34,23 +34,41 @@
<textarea readonly id="output" rows="8" style="width: 25vw; margin-left: 2px; resize: none; border: none; outline: none; padding: 0"></textarea>
</div>
<script type='text/javascript'>
+ var canvas = document.getElementById('canvas');
+ var output = document.getElementById('output');
+
+ window.addEventListener(
+ "message",
+ (event) => {
+ if (event.data == "ToggleOutput") {
+ if (output.style.display == 'none') {
+ output.style.display = 'flex';
+ canvas.style.height = '75vh';
+ window.dispatchEvent(new Event('resize'));
+ }
+ else {
+ output.style.display = 'none';
+ canvas.style.height = '100vh';
+ window.dispatchEvent(new Event('resize'));
+ }
+ }
+ },
+ false,
+ );
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('keydown', function(event) {
if (event.key == "Q" || event.key == "q" || event.key == "E" || event.key == "e")
event.preventDefault();
}, true);
- var canvas = document.getElementById('canvas');
-
if (window.self !== window.top)
{
document.getElementById('display-div').style.flexDirection = 'column';
- var output = document.getElementById('output');
output.style.height = '25vh';
output.style.width = '100vw';
output.style.margin = '0';
+ output.style.display = 'none';
canvas.style.width = '100vw';
- canvas.style.height = '75vh';
}
var Module = {
@@ -91,6 +109,7 @@
canvas.setAttribute('tabindex', '0');
// grab focus when the render window region receives mouse clicks.
canvas.addEventListener('click', () => canvas.focus());
+ window.setTimeout(() => window.dispatchEvent(new Event('resize')));
}
};
diff --git a/.gitlab/templates/index_arguments.html.template b/.gitlab/templates/index_arguments.html.template
index c8cd0d0136ef980f6267eeca0a922ba590800905..b858f540cb691c1c44b936549ac6fb3485a6251c 100644
--- a/.gitlab/templates/index_arguments.html.template
+++ b/.gitlab/templates/index_arguments.html.template
@@ -28,27 +28,47 @@
<p><a href="https://docs.vtk.org/en/latest/advanced/build_wasm_emscripten.html" target="_blank">• Instructions to build and install VTK-WASM on your system.</a></p>
</div>
<div id="display-div" style="display: none; flex-direction: row; width: 100vw; height: 100vh">
- <canvas id="canvas" style="width: 75vw; height: 100vh;"></canvas>
+ <div id="canvas_container">
+ <canvas id="canvas" style="width: 75vw; height: 100vh;"></canvas>
+ </div>
<textarea readonly id="output" rows="8" style="width: 25vw; margin-left: 2px; resize: none; border: none; outline: none; padding: 0"></textarea>
</div>
<script type='text/javascript'>
+ var canvas = document.getElementById('canvas');
+ var output = document.getElementById('output');
+
+ window.addEventListener(
+ "message",
+ (event) => {
+ if (event.data == "ToggleOutput") {
+ if (output.style.display == 'none') {
+ output.style.display = 'flex';
+ canvas.style.height = '75vh';
+ window.dispatchEvent(new Event('resize'));
+ }
+ else {
+ output.style.display = 'none';
+ canvas.style.height = '100vh';
+ window.dispatchEvent(new Event('resize'));
+ }
+ }
+ },
+ false,
+ );
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('keydown', function(event) {
if (event.key == "Q" || event.key == "q" || event.key == "E" || event.key == "e")
event.preventDefault();
}, true);
- var canvas = document.getElementById('canvas');
-
if (window.self !== window.top)
{
document.getElementById('display-div').style.flexDirection = 'column';
- var output = document.getElementById('output');
output.style.height = '25vh';
output.style.width = '100vw';
output.style.margin = '0';
+ output.style.display = 'none';
canvas.style.width = '100vw';
- canvas.style.height = '75vh';
}
var Module = {
@@ -90,6 +110,7 @@
canvas.setAttribute('tabindex', '0');
// grab focus when the render window region receives mouse clicks.
canvas.addEventListener('click', () => canvas.focus());
+ window.setTimeout(() => window.dispatchEvent(new Event('resize')));
},
'locateFile': function (path, prefix) {
if (path.endsWith(".data")) return "https://vtk.org/files/examples/data/" + path;
diff --git a/src/Admin/ScrapeRepo.py b/src/Admin/ScrapeRepo.py
index 6da97b9f30d006e6cc697cc186ab1bd7c1ddd0e7..c8e647f4f5ce3ff2b6867d61d68fd99fe5683c8d 100755
--- a/src/Admin/ScrapeRepo.py
+++ b/src/Admin/ScrapeRepo.py
@@ -714,7 +714,7 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
'Test' + source_path.stem + '.png?raw=true'])
if lang == 'Cxx' and not check_excluded(excluded_examples, source_path.stem):
# href to open image in new tab
- md_file.write('''<button id="screenshot-button" class="wasm-tab" disabled>Screenshot</button><button id="wasm-button" class="wasm-tab">Interactive example</button><hr style="margin-top: 10px; margin-bottom: 10px;"><div id="screenshot-div"><a href="''' + image_url + ' target="_blank">' + '\n')
+ md_file.write('''<button id="screenshot-button" class="wasm-tab" disabled>Screenshot</button><button id="wasm-button" class="wasm-tab">Interactive example</button><div id="screenshot-div"><a href="''' + image_url + ' target="_blank">' + '\n')
md_file.write(
'<img style="border:2px solid beige;float:center" src="' +
image_url + '" width="256" />')
@@ -722,14 +722,20 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
# wasmified example
md_file.write('''<div id="wasm-div" style="display: none;">
- <button id="reload-wasm-button" class="wasm-button" style="display: inline;">Reload example</button>
- <button id="open-wasm-button" class="wasm-button" style="display: inline;">Open in new tab</button>''')
+ <div style="display: flex; margin-bottom: 10px">
+ <button id="reload-wasm-button" class="wasm-button">Reload example</button>
+ <button id="open-wasm-button" class="wasm-button">Open in new tab</button>
+ <input id="checkbox" type="checkbox">
+ <label for="checkbox" style="align-self: center;">Show logs</label>
+ <a style="margin-left: auto;" href="https://examples.vtk.org/site/WASM/1_WASM"><button class="wasm-button">Documentation</button></a>
+ </div>''')
md_file.write('<iframe id="frame" src="about:blank" style="width: 80vw; height: 80vh; border: medium;"></iframe></div>\n')
md_file.write('''<script>
var btn_screenshot = document.getElementById("screenshot-button");
var btn_wasm = document.getElementById("wasm-button");
var btn_reload = document.getElementById("reload-wasm-button");
var btn_open = document.getElementById("open-wasm-button");
+ var checkbox = document.getElementById("checkbox");
var frame = document.getElementById("frame");
var wasm = document.getElementById("wasm-div");
var img = document.getElementById("screenshot-div");
@@ -739,6 +745,7 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
frame.src = "about:blank";
btn_screenshot.disabled = true;
btn_wasm.disabled = false;
+ checkbox.checked = false;
}
btn_wasm.onclick = function () {
img.style.display = "none";
@@ -750,6 +757,7 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
}
btn_reload.onclick = function() {
frame.src = frame.src;
+ checkbox.checked = false;
}
btn_open.onclick = function(){
window.open(\'https://vtk.org/files/examples/'''
@@ -759,7 +767,11 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
frame.src = "about:blank";
btn_screenshot.disabled = true;
btn_wasm.disabled = false;
+ checkbox.checked = false;
}
+ checkbox.addEventListener('change', (event) => {
+ frame.contentWindow.postMessage("ToggleOutput", "https://vtk.org")
+ })
</script>\n''')
md_file.write('<hr>\n')
md_file.write('\n')
diff --git a/src/Admin/WASM/index.html.template b/src/Admin/WASM/index.html.template
index 782784b44aa60d5f208f505cc0ac1c5148efbc08..2d4e7d8ebddddf5424c4591d79122fb64cbc5249 100644
--- a/src/Admin/WASM/index.html.template
+++ b/src/Admin/WASM/index.html.template
@@ -91,6 +91,7 @@
canvas.setAttribute('tabindex', '0');
// grab focus when the render window region receives mouse clicks.
canvas.addEventListener('click', () => canvas.focus());
+ window.setTimeout(() => window.dispatchEvent(new Event('resize')));
}
};
diff --git a/src/Admin/WASM/index_arguments.html.template b/src/Admin/WASM/index_arguments.html.template
index 202e0a607d2c2cb2b1743d2fda5d3d25fc00a764..50e27f53d851d5c1beabaf7d9b48b043d87f5d61 100644
--- a/src/Admin/WASM/index_arguments.html.template
+++ b/src/Admin/WASM/index_arguments.html.template
@@ -28,7 +28,9 @@
<p><a href="https://docs.vtk.org/en/latest/advanced/build_wasm_emscripten.html" target="_blank">• Instructions to build and install VTK-WASM on your system.</a></p>
</div>
<div id="display-div" style="display: none; flex-direction: row; width: 100vw; height: 100vh">
- <canvas id="canvas" style="width: 75vw; height: 100vh;"></canvas>
+ <div id="canvas_container">
+ <canvas id="canvas" style="width: 75vw; height: 100vh;"></canvas>
+ </div>
<textarea readonly id="output" rows="8" style="width: 25vw; margin-left: 2px; resize: none; border: none; outline: none; padding: 0"></textarea>
</div>
<script type='text/javascript'>
@@ -90,6 +92,7 @@
canvas.setAttribute('tabindex', '0');
// grab focus when the render window region receives mouse clicks.
canvas.addEventListener('click', () => canvas.focus());
+ window.setTimeout(() => window.dispatchEvent(new Event('resize')));
}
};
diff --git a/src/stylesheets/extra.css b/src/stylesheets/extra.css
index cd33e3b28a4232165306d2982679d77b80e5b2e1..4ec0fdde5261cef938cbdf4c91624e20dc16eaf9 100644
--- a/src/stylesheets/extra.css
+++ b/src/stylesheets/extra.css
@@ -11,12 +11,10 @@ height:30px!important;
.wasm-tab {
color: #767676;
- padding: 3px;
- margin: 10px;
+ padding: 3px 5px;
+ margin: 0px 10px;
cursor: pointer;
border-bottom: .125rem solid #4051b5;
- padding-left: 5px;
- padding-right: 5px;
}
.wasm-tab:disabled {
@@ -32,7 +30,7 @@ height:30px!important;
.wasm-button {
background: #4051b5;
- margin: 0px 10px 10px;
+ margin: 0px 10px;
color: white;
padding: 8px;
cursor: pointer;