[web] Embedded vtk-js vis works.

web/README.md

+## Start servers
+
+    hugo server
+
+If you want to modify css or javascript run `gulp` in another terminal:
+
+    gulp
+
 ## Used components
 
 - [Hugo](https://gothugo.com)
 - [flexboxgrid](http://flexboxgrid.com/)
+
+
+## Dump
+
+### Serve converted meshes with S3
+
+- Set CORS: http://stackoverflow.com/a/19557452/80480
+- Upload to e.g. http://s3-eu-central-1.amazonaws.com/jenkins-dump
+- Eventually add `crossdomain.xml` to the root of the bucket:
+
+```xml
+<?xml version="1.0"?>
+<!DOCTYPE cross-domain-policy SYSTEM
+"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
+<cross-domain-policy>
+  <allow-access-from domain="*" secure="false" />
+</cross-domain-policy>
+```

web/gulpfile.js

@@ -38,10 +38,8 @@ gulp.task('webpack', () => {
 });
 
 gulp.task('watch', function() {
-  // gulp.watch(kubedir + 'src/_js/*.js', ['scripts']);
   gulp.watch(pkg.paths.src.scss + pkg.vars.scssName, ['scss']);
   gulp.watch('./package.json', ['scss']);
-  gulp.watch(pkg.paths.src.js, ['webpack']);
 });
 
 gulp.task('default', ['scss', 'webpack', 'watch'])

web/layouts/shortcodes/vis.html

+<iframe
+	src="./../../vis/index.html?fileURL=http://s3-eu-central-1.amazonaws.com/jenkins-dump/{{ .Get "url" }}"
+	width="100%"
+	{{ with .Get "height"}} height="{{.}}px"{{ else }} height="500px"{{ end }}
+>
+</iframe>

web/package.json

@@ -6,7 +6,7 @@
   "author": "Lars Bilke",
   "license": "BSD",
   "scripts": {
-    "hugo": "hugo -w --disableRSS",
+    "hugo": "hugo server --disableRSS",
     "build": "webpack",
     "build:release": "export NODE_ENV=production && webpack -p",
     "start": "webpack-dev-server --content-base ./public"
@@ -23,11 +23,11 @@
       "scss": "./src/scss/"
     },
     "dist": {
-      "base": "./themes/ogs/static/",
-      "css": "./themes/ogs/static/css/",
-      "js": "./themes/ogs/static/js/",
-      "fonts": "./themes/ogs/static/fonts/",
-      "img": "./themes/ogs/static/img/"
+      "base": "./static/",
+      "css": "./static/css/",
+      "js": "./static/js/",
+      "fonts": "./static/fonts/",
+      "img": "./static/img/"
     },
     "build": {
       "base": "./build/",

web/src/js/app.js

+import vtkURLExtract              from 'vtk.js/Sources/Common/Core/URLExtract';
+import vis from './vis';
 
-import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
-import vtkActor           from 'vtk.js/Sources/Rendering/Core/Actor';
-import vtkLookupTable     from 'vtk.js/Sources/Common/Core/LookupTable';
-import vtkMapper          from 'vtk.js/Sources/Rendering/Core/Mapper';
-import { ColorMode, ScalarMode }  from 'vtk.js/Sources/Rendering/Core/Mapper/Constants';
-import { AttributeTypes } from 'vtk.js/Sources/Common/DataModel/DataSetAttributes/Constants';
-import { FieldDataTypes } from 'vtk.js/Sources/Common/DataModel/DataSet/Constants';
-import vtkHttpDataSetReader       from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
-import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera'
-import controlPanel from './controller.html';
-// ----------------------------------------------------------------------------
-// Standard rendering code setup
-// ----------------------------------------------------------------------------
-const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
-const renderer = fullScreenRenderer.getRenderer();
-const renderWindow = fullScreenRenderer.getRenderWindow();
+const userParams = vtkURLExtract.extractURLParameters();
 
-// -------------
-// DataSetReader
-// -------------
-const reader = vtkHttpDataSetReader.newInstance({ enableArray: true, fetchGzip: true });
-// reader.setUrl(`./data/square_1e2_neumann_pcs_0_ts_1_t_1.000000.vtu`).then((reader, dataset) => {
-reader.setUrl(`./data/square_1e4_pcs_0_ts_1_t_1.000000.vtu`).then((reader, dataset) => {
-  console.log('Metadata loaded with the geometry', dataset);
-  reader.loadData().then((reader, dataset) =>{
-    var indexPointData = 0;
-    var indexCellData = 0;
-    reader.getArrays().forEach((array, i) => {
-      console.log('-', array.name, array.location, ':', array.enable);
-      if(array.location == 'pointData') {
-        console.log('  - Range: ',
-          array.ds[0].pointData.arrays[indexPointData].data.ranges[0].min,
-          '-',
-          array.ds[0].pointData.arrays[indexPointData].data.ranges[0].max
-        );
-        indexPointData++;
-      } else {
-          console.log('  - Range: ',
-            array.ds[0].cellData.arrays[indexCellData].data.ranges[0].min,
-            '-',
-            array.ds[0].cellData.arrays[indexCellData].data.ranges[0].max
-          );
-          indexCellData++;
-      }
-    });
-  });
-});
-
-const lookupTable = vtkLookupTable.newInstance({
-  hueRange: [0.0, 0.33],
-  mappingRange: [-1, 1],
-});
-
-const mapper = vtkMapper.newInstance({
-  interpolateScalarsBeforeMapping: true,
-  colorMode: ColorMode.MAP_SCALARS,
-  scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
-  useLookupTableScalarRange: true,
-  lookupTable,
-});
-mapper.setInputConnection(reader.getOutputPort());
-mapper.setColorByArrayName('pressure')
-
-const actor = vtkActor.newInstance();
-var property = actor.getProperty();
-property.setEdgeVisibility(true);
-
-actor.setMapper(mapper);
-renderer.addActor(actor);
-
-renderer.resetCamera();
-renderWindow.render();
-
-
-// -----------------------------------------------------------
-// UI control handling
-// -----------------------------------------------------------
-fullScreenRenderer.addController(controlPanel);
-const representationSelector = document.querySelector('.representations');
-const resolutionChange = document.querySelector('.resolution');
-representationSelector.addEventListener('change', (e) => {
-  const newRepValue = Number(e.target.value);
-  actor.getProperty().setRepresentation(newRepValue);
-  renderWindow.render();
-});
-resolutionChange.addEventListener('input', (e) => {
-  const value = Number(e.target.value);
-  actor.getProperty().setOpacity(value / 100.0)
-  renderWindow.render();
-});
-
-// -----------------------------------------------------------
-// globals for inspecting
-// -----------------------------------------------------------
-global.mapper = mapper;
-global.actor = actor;
-global.renderer = renderer;
-global.renderWindow = renderWindow;
-
-global.reader = reader;
-global.lut = lookupTable;
+if (userParams.url || userParams.fileURL) {
+  const exampleContainer = document.querySelector('.content');
+  const rootBody = document.querySelector('body');
+  const myContainer = exampleContainer || rootBody;
+  vis.load(myContainer, userParams);
+}

web/src/js/vis/index.js

+import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
+import vtkActor           from 'vtk.js/Sources/Rendering/Core/Actor';
+import vtkLookupTable     from 'vtk.js/Sources/Common/Core/LookupTable';
+import vtkMapper          from 'vtk.js/Sources/Rendering/Core/Mapper';
+import { ColorMode, ScalarMode }  from 'vtk.js/Sources/Rendering/Core/Mapper/Constants';
+import { AttributeTypes } from 'vtk.js/Sources/Common/DataModel/DataSetAttributes/Constants';
+import { FieldDataTypes } from 'vtk.js/Sources/Common/DataModel/DataSet/Constants';
+import vtkHttpDataSetReader       from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
+import controlPanel from './controller.html';
+
+export function load(container, options) {
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+  const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+  const renderer = fullScreenRenderer.getRenderer();
+  const renderWindow = fullScreenRenderer.getRenderWindow();
+
+// -------------
+// DataSetReader
+// -------------
+  const reader = vtkHttpDataSetReader.newInstance({enableArray: true, fetchGzip: true});
+  reader.setUrl(options.fileURL).then((reader, dataset) => {
+    console.log('Metadata loaded with the geometry', dataset);
+    reader.loadData().then((reader, dataset) => {
+      renderer.resetCamera();
+      renderWindow.render();
+      var indexPointData = 0;
+      var indexCellData = 0;
+      reader.getArrays().forEach((array, i) => {
+        console.log('-', array.name, array.location, ':', array.enable);
+        if (array.location == 'pointData') {
+          console.log('  - Range: ',
+            array.ds[0].pointData.arrays[indexPointData].data.ranges[0].min,
+            '-',
+            array.ds[0].pointData.arrays[indexPointData].data.ranges[0].max
+          );
+          indexPointData++;
+        } else {
+          console.log('  - Range: ',
+            array.ds[0].cellData.arrays[indexCellData].data.ranges[0].min,
+            '-',
+            array.ds[0].cellData.arrays[indexCellData].data.ranges[0].max
+          );
+          indexCellData++;
+        }
+      });
+    });
+  });
+
+  const lookupTable = vtkLookupTable.newInstance({
+    hueRange: [0.0, 0.33],
+    mappingRange: [-1, 1],
+  });
+
+  const mapper = vtkMapper.newInstance({
+    interpolateScalarsBeforeMapping: true,
+    colorMode: ColorMode.MAP_SCALARS,
+    scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
+    useLookupTableScalarRange: true,
+    lookupTable,
+  });
+  mapper.setInputConnection(reader.getOutputPort());
+  mapper.setColorByArrayName('pressure');
+
+  const actor = vtkActor.newInstance();
+  var property = actor.getProperty();
+  property.setEdgeVisibility(true);
+
+  actor.setMapper(mapper);
+  renderer.addActor(actor);
+
+  renderer.resetCamera();
+  renderWindow.render();
+
+
+// -----------------------------------------------------------
+// UI control handling
+// -----------------------------------------------------------
+  fullScreenRenderer.addController(controlPanel);
+  const representationSelector = document.querySelector('.representations');
+  const resolutionChange = document.querySelector('.resolution');
+  representationSelector.addEventListener('change', (e) => {
+    const newRepValue = Number(e.target.value);
+    actor.getProperty().setRepresentation(newRepValue);
+    renderWindow.render();
+  });
+  resolutionChange.addEventListener('input', (e) => {
+    const value = Number(e.target.value);
+    actor.getProperty().setOpacity(value / 100.0)
+    renderWindow.render();
+  });
+
+// -----------------------------------------------------------
+// globals for inspecting
+// -----------------------------------------------------------
+  global.mapper = mapper;
+  global.actor = actor;
+  global.renderer = renderer;
+  global.renderWindow = renderWindow;
+
+  global.reader = reader;
+  global.lut = lookupTable;
+}
+
+export default { load };

web/themes/ogs/layouts/partials/footer.html

 <!-- <script src="js/scripts.js"></script> -->
     </div> <!-- row -->
   </div> <!-- container -->
-<script src="/js/bundle.js"></script>
 </body>
 </html>

web/webpack.config.js

@@ -14,6 +14,7 @@ if(process.env.NODE_ENV === 'production') {
 }
 
 module.exports = {
+  watch: true,
   plugins: plugins,
   entry: pkg.paths.src.js + '/app.js',
   output: {