JOB 2018-02-24, The purpose of this code is merely to get familiar with wapp, a web application framework written in tcl.
The program emulates a local web server and requires an up-to-date web browser installation. The STL viewer is implemented with jquery.js and three.js. Once wapp takes precedence, the browser pops up and one can drag and drop a STL file onto the window...
Q: What I could not manage was to tell the web server to deliver a binary file at runtime? Maybe someone else can give me some advice, how to achieve this (please see comments in code).
Here is the source code to establish the STL-Viewer in the browser window. I am only publishing the tcl part here. The complete sources can be downloaded from here:
http://www.johann-oberdorfer.eu/blog/2018/02/24/18-02-24_stl_viewer/
# -------------------------------------------------------------------------
# (c) 2018, Johann Oberdorfer - Engineering Support | CAD | Software
# johann.oberdorfer [at] gmail.com
# www.johann-oberdorfer.eu
# -------------------------------------------------------------------------
# This source file is distributed under the BSD license.
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
# See the BSD License for more details.
# -------------------------------------------------------------------------
# Credits:
# Thanks to D. Richard Hipp - the the creator of wapp,
# a web application framework distributed as a single file and
# with an extremely small footprint.
#
# Revision history:
# 18-02-24: JOB, Initial release
# -------------------------------------------------------------------------
set dir [file dirname [info script]]
source [file join $dir "./wapp.tcl"]
package require wapp
proc wapp-page-fullenv {} {
wapp-set-cookie env-cookie full
wapp "<h1>Wapp Full Environment</h1>\n"
wapp-unsafe "<form method='POST' action='[wapp-param SELF_URL]'>\n"
wapp "<input type='checkbox' name='var1'"
if {[wapp-param-exists showhdr]} {
wapp " checked"
}
# Deliberately unsafe calls to wapp-subst and wapp-trim, added here
# to test wapp-safety-check
#
wapp-subst "> Var1\n"
wapp-trim "<input type='submit' name='s1' value='Go'>\n"
wapp "<input type='hidden' name='hidden-parameter-1' "
wapp "value='the long value / of ?$ hidden-1..<hi>'>\n"
wapp "</form>"
wapp "<pre>\n"
foreach var [lsort [wapp-param-list]] {
if {$var==".reply"} continue
wapp-subst {%html($var) = %html([list [wapp-param $var]])\n\n}
}
wapp "</pre>"
wapp-subst {<p><a href='%html([wapp-param BASE_URL])/'>Home</a></p>\n}
}
proc readfile {fname} {
set fp [open $fname "r"]
set content [read $fp]
close $fp
return $content
}
proc readbinaryfile {fname} {
set fp [open $fname "r"]
fconfigure $fp -translation binary
set content [read $fp]
close $fp
return [binary encode base64 $content]
}
proc wapp-page-stlviewer.css {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "css/stlviewer.css"]]
wapp-mimetype text/javascript
return [wapp-trim { %unsafe($content) }]
}
proc wapp-page-dg.css {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "css/dg.css"]]
wapp-mimetype text/javascript
return [wapp-trim { %unsafe($content) }]
}
proc wapp-page-three.js {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "vendor/three.js"]]
wapp-mimetype text/javascript
return [wapp-trim { %unsafe($content) }]
}
proc wapp-page-jquery.js {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "vendor/jquery.js"]]
wapp-mimetype text/javascript
return [wapp-subst { %unsafe($content) }]
}
proc wapp-page-dat.gui.min.js {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "vendor/dat.gui.min.js"]]
wapp-mimetype text/javascript
return [wapp-trim { %unsafe($content) }]
}
proc wapp-page-stats.min.js {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "vendor/stats.min.js"]]
wapp-mimetype text/javascript
return [wapp-trim { %unsafe($content) }]
}
proc wapp-page-main.js {} {
set content [readfile [file join [wapp-param DOCUMENT_ROOT] "main.js"]]
wapp-mimetype text/javascript
return [wapp-trim { %unsafe($content) }]
}
# does not work so far !? ...
proc wapp-page-gyroid_V2_bin.stl_xxxx {} {
set content [readbinaryfile [file join [wapp-param DOCUMENT_ROOT] "gyroid_V2_bin.stl"]]
# wapp-content-security-policy {default-src 'inline' 'unsafe-inline'}
# wapp-mimetype text/javascript
return [wapp-unsafe [binary decode base64 {$content}]]
}
proc wapp-page-gyroid_V2_bin.stl {} {
set content [readbinaryfile [file join [wapp-param DOCUMENT_ROOT] "gyroid_V2_bin.stl"]]
return [wapp-trim [binary decode base64 { %unsafe($content) }]]
}
# The default page paints a form to be submitted.
# The default content-security-policy of Wapp restricts the use
# of in-line javascript, so the script content must be returned by
# a separate resource.
#
proc wapp-default {} {
global wapp
set B [wapp-param BASE_URL]
wapp-cache-control max-age=15
# wapp "<!DOCTYPE html>\n"
wapp "<html>\n"
wapp " <head>\n"
wapp " <title>STL Viewer</title>\n"
wapp-trim {
<link href='%url($B)/stlviewer.css' rel="stylesheet">
<script src='%url($B)/three.js'></script>
<script src='%url($B)/jquery.js'></script>
<script src='%url($B)/dat.gui.min.js'></script>
<script src='%url($B)/stats.min.js'></script>
<script src='%url($B)/main.js'></script>
<link href='%url($B)/dg.css' rel="stylesheet">
}
wapp "\n<script>\n"
wapp-content-security-policy {'unsafe-inline'}
wapp-trim {
$(document).ready(function() {
var stats = new Stats();
stats.setMode( 0 );
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '2px';
stats.domElement.style.left = '2px';
var id = "stlviewer";
var config = {stats: stats, dragDrop: true, autoRotate: true, startupAnimation: true, zoom: true};
var viewer = new ModelViewer(document.getElementById(id),config);
window.viewer = viewer;
var gui = new dat.GUI();
var Configuration = function() {
this.color = "#98AFC7";
this.BodyBgColor = "#000000";
this.wireframe = false;
this.plane = true;
this.boundingBox = true;
this.sphere = false;
this.axis = false;
this.autorotate = true;
this.material = true;
this.zoom = config.zoom;
this.model = '';
this.modelSamples = { "" : "" }
};
var cfg = new Configuration();
// viewer.load('%url($B)/gyroid_V2_bin.stl');
viewer.load('');
gui.addColor(cfg, 'color').onChange(function(colorValue) {
viewer.setModelColorByHexcode(colorValue);
});
gui.add(cfg, 'wireframe').onChange(function(val){
viewer.toggleModelWireframe();
});
gui.add(cfg, 'plane').onChange(function(val){
viewer.togglePlane();
});
gui.add(cfg, 'boundingBox').onChange(function(val){
viewer.toggleBoundingBox();
});
gui.add(cfg, 'sphere').onChange(function(val){
viewer.toggleSphere();
});
gui.add(cfg, 'axis').onChange(function(val){
viewer.toggleAxis();
});
gui.add(cfg, 'zoom').onChange(function(val) {
viewer.zoom = val
});
gui.add(cfg, 'material').onChange(function(val){
viewer.toggleMaterial();
});
gui.add(cfg, 'model', cfg.modelSamples).onChange(function(val){
viewer.load(val,function(){
viewer.setModelColorByHexcode(cfg.color);
});
});
var obj = { "Reload Viewer":function(){
viewer.reload();
}};
viewer.togglePlane();
viewer.toggleBoundingBox();
gui.close();
});
}
wapp "\n</script>\n"
wapp "</head>\n"
wapp "<body>\n"
wapp {
<div class="viewer">
<div class="viewer__wrapper">
<pre style='color: white;'> Drag&Drop STL file onto here: </pre>
<div class="viewer__container" id="stlviewer">
</div>
</div>
</div>
}
# wapp "\n<ol>\n"
# wapp-subst {<li><p><a href='%url($B)/fullenv'>Full Environment</a>\n}
# wapp "\n</ol>\n"
wapp "</body>\n"
wapp "</html>\n"
}
puts "
*** Welcome to the STL-ViewerV0.1 web application ***
(c) 2018, Johann Oberdorfer,
Engineering Support | CAD | Software
www.johann-oberdorfer.eu
The purpose of this program is merely to get familiar with wapp,
a web application framework written in tcl.
The program emulates a local web server and requires
an up-to-date web browser installation.
The STL viewer is implemented with jquery.js and three.js.
Credits:
wapp, web application framework - Copyright D. Richard Hipp
jquery.js - Copyright JS Foundation and other contributors,
https://js.foundation/
three.js - Copyright 2010-2018 three.js authors,
https://github.com/mrdoob/three.js/
https://threejs.org/
main.js - Javascript demo code for parsing and
rendering STL (ascii and binary) files
@tonylukasavage, (https://twitter.com/tonylukasavage)
Have fun.
"
wapp-start $argv
