initial commit

Author: sarbabi

README.md

@@ -0,0 +1,50 @@
+# WebSSM
+![webssm](thumbnail.jpg)
+a web-based tool for visualizing, manipulating and sampling statistical shape models in [scalismo](https://github.com/unibas-gravis/scalismo)
+
+## Motivation
+[scalismo](https://scalismo.org/) is a library for statistical shape modelling and model-based image analysis in Scala.
+WebSSM aims to bringing these statistical shape models to the convenience of web. So anyone accessing the web can view and interact with your shape model, also create samples and download them for their use.
+
+## Demo
+you can see a Demo of how WebSSM looks in [here](https://www.youtube.com/watch?v=7YUsT4kE_Zg).
+
+## Screenshots
+
+## Tech/Framework used
+- Python
+	- Flask
+- Scala
+	- Scalismo
+- Javascript
+	- Node.js
+	- VTK.js
+	
+## How to use
+you can fork the project (click fork in top right of this page), then you can start working on the project from your GitHub account. Then clone the code to your local machine.
+
+### step1. start by making your shape model ready for web
+#### quick
+Having sbt installed, place your statistical shape model file (.h5 extension) in `data` folder of `data-preparation` directory, then open a terminal and run `sbt run`. it will extract all required parameters from your shape model and writes them in 4 .csv files in the results folder.
+#### advanced
+Follow the [tutorial](https://scalismo.org/docs/ide) in Scalismo website, you'll be able to open the `data-preparatio` folder as a project in IntellijIdea IDE, make any change you like in the code and build it. It's especially useful for some cases that your shape model is too big for the lightweight web view, then you can change the code a bit to sample from the shape model.
+
+### step2. continue with the backend
+Within `backend` directory, place .csv file generated in step 1, into the folder `data`. In the `backend` folder open a terminal and do following tasks:
+run the following commands in cmd or powershell, while in `backend` folder:
+`python -m venv venv` //creates a virtual environment in which requirements will be installed
+`./venv/Scripts/activate.bat` //(if you're using powershell, change .bat to .ps1)
+`pip install -r requirements.txt` //installs requirement in the virtual environment
+
+`$env:FLASK_APP = "app.py"`
+`flask run`
+
+### step3. finish with frontend
+Now if you just open the `index.html` file from the `frontend` directory, into your browser, you should see the your shape model as you expect.
+#### advanced
+having Node.js installed, open a terminal in the `frontend` folder and run `npm install`. it will generate a folder called node_modules and installs everything you need to build the project.
+In case you wanted to make changes in the frontend (like changing menus, adding functionalities, ...) you can make your changes basically in `src/webssm.js` file and then build the project with command `npx webpack --progress`
+
+
+### deployment on server
+enjoying viewing your shape model in your browser? if you want to deploy your web-based tool to your real server, you have a few more steps to do. Then if you send me a message in email or in [Scalismo google discussion group](https://groups.google.com/g/scalismo), I'll provide you with an easy step-by-step guide.

backend/.gitignore

@@ -0,0 +1,4 @@
+.idea
+data/*.csv
+venv
+__pycache__

backend/README.md

@@ -0,0 +1,11 @@
+create a python virtual environment (python 3.7 is the version I've used):
+open a windows cmd or powershell:
+cd [this folder]
+python -m venv venv
+./venv/Scripts/activate.bat //(if you're using powershell, change .bat to .ps1)
+pip install -r requirements.txt
+
+$env:FLASK_APP = "app.py"
+flask run
+
+now it's listening on port 5000, and can serve the frontend

backend/app.py

@@ -0,0 +1,82 @@
+from flask import Flask, jsonify, request
+import vtk
+from reconstructSurface import ReconstructSurface
+from vtk.util.misc import vtkGetDataRoot
+from datetime import datetime
+import json
+from flask_cors import CORS
+
+
+#if you're deploying to a server, you might want to change the host_ip something like '0.0.0.0'
+host_ip = '127.0.0.1'
+
+VTK_DATA_ROOT = vtkGetDataRoot()
+
+app = Flask(__name__)
+cors = CORS(app, resources={r"/*": {"origins":"*"}})
+
+#this is the piece of code that serves the frontend everytime a shape mode changes
+@app.route('/surfacereconstructor', methods=['GET', 'POST'])
+def surfacereconstructor():
+    if request.method == 'POST':
+        points_array = request.get_json()["array"]
+        cntr_nr = request.get_json()["cntr_nr"]
+        recsurf = ReconstructSurface()
+        recsurf.pts = points_array
+        recsurf.cntr_nr = cntr_nr
+        cf = recsurf.reconstruct()
+        surface = cf.GetOutput()
+        pts,cls,nms = extr_surf_vals(surface)
+        response = {"points":pts, "cells":cls, "normals":nms}
+        return response
+
+#this part serves the frontend for the first time it's loading
+@app.route('/readdata', methods=['GET'])
+def readdata():
+    if request.method == 'GET':
+        csv_dict = {}
+        with open('data/stddev.csv', 'r') as f:
+            csv_dict['stddev'] = f.read()
+        with open('data/basisMatrix.csv', 'r') as f:
+            csv_dict['basisMatrix'] = f.read()
+        with open('data/meanVector.csv', 'r') as f:
+            csv_dict['meanVector'] = f.read()
+        with open('data/meanShape.csv', 'r') as f:
+            csv_dict['meanShape'] = f.read()
+        return jsonify(csv_dict)
+
+#this function extracts the vtk surface data to be sent to frontend
+def extr_surf_vals(polyData):
+    numCells = polyData.GetNumberOfPolys()
+    numPoints = polyData.GetNumberOfPoints()
+
+    points = [0.0 for i in range(numPoints*3)]
+    normals = [0.0 for i in range(numPoints*3)]
+    cells = [0 for i in range(numCells*3)]
+    coords = [0.0, 0.0, 0.0]
+
+    cellArray = polyData.GetPolys()
+    cellArray.InitTraversal()
+    for i in range(numCells):
+        idList = vtk.vtkIdList()
+        cellArray.GetNextCell(idList)
+        for j in range(idList.GetNumberOfIds()):
+            id = idList.GetId(j)
+            cells[i*3+j] = id
+
+            polyData.GetPoint(id, coords)
+            points[id * 3 + 0] = coords[0]
+            points[id * 3 + 1] = coords[1]
+            points[id * 3 + 2] = coords[2]
+
+    normalArray = polyData.GetPointData().GetNormals()
+    for i in range(normalArray.GetNumberOfTuples()):
+        normalArray.GetTuple(i, coords)
+
+        normals[i * 3 + 0] = coords[0]
+        normals[i * 3 + 1] = coords[1]
+        normals[i * 3 + 2] = coords[2]
+    return (points, cells, normals)
+
+if __name__ == "__main__":
+    app.run(host=host_ip)

backend/data/README.md

@@ -0,0 +1 @@
+put the .csv files you generated in data_preparation step in here. the server will take and provide them to frontend upon first request.

backend/reconstructSurface.py

@@ -0,0 +1,72 @@
+import vtk
+import numpy as np
+from vtk.util.misc import vtkGetDataRoot
+from datetime import datetime
+VTK_DATA_ROOT = vtkGetDataRoot()
+
+class ReconstructSurface:
+    def __init__(self):
+        self.pts = ""
+        self.cntr_nr = 0
+        self.pointSource = vtk.vtkProgrammableSource()
+        self.pointSource.SetExecuteMethod(self.readPoints)
+
+    def readPoints(self):
+        output = self.pointSource.GetPolyDataOutput()
+        points = vtk.vtkPoints()
+        output.SetPoints(points)
+        for i in np.arange(0, len(self.pts) - 1, 3):
+            x, y, z = float(self.pts[i]), float(self.pts[i + 1]), float(self.pts[i + 2])
+            points.InsertNextPoint(x,y,z)
+
+    def reconstruct(self):
+        # Read some points. Use a programmable filter to read them.
+        # Construct the surface and create isosurface.
+        surf = vtk.vtkSurfaceReconstructionFilter()
+        surf.SetSampleSpacing(1)
+        surf.SetInputConnection(self.pointSource.GetOutputPort())
+
+        cf = vtk.vtkContourFilter()
+        cf.SetInputConnection(surf.GetOutputPort())
+        cf.SetValue(0, 0.0)
+
+        # Sometimes the contouring algorithm can create a volume whose gradient
+        # vector and ordering of polygon (using the right hand rule) are
+        # inconsistent. vtkReverseSense cures this problem.
+        reverse = vtk.vtkReverseSense()
+        reverse.SetInputConnection(cf.GetOutputPort())
+        reverse.ReverseCellsOn()
+        reverse.ReverseNormalsOn()
+
+        map = vtk.vtkPolyDataMapper()
+        map.SetInputConnection(reverse.GetOutputPort())
+        map.ScalarVisibilityOff()
+
+        surfaceActor = vtk.vtkActor()
+        surfaceActor.SetMapper(map)
+        surfaceActor.GetProperty().SetDiffuseColor(1.0000, 0.3882, 0.2784)
+        surfaceActor.GetProperty().SetSpecularColor(1, 1, 1)
+        surfaceActor.GetProperty().SetSpecular(.4)
+        surfaceActor.GetProperty().SetSpecularPower(50)
+
+        # Create the RenderWindow, Renderer and both Actors
+        ren = vtk.vtkRenderer()
+        renWin = vtk.vtkRenderWindow()
+        renWin.AddRenderer(ren)
+        iren = vtk.vtkRenderWindowInteractor()
+        iren.SetRenderWindow(renWin)
+
+        # Add the actors to the renderer, set the background and size
+        ren.AddActor(surfaceActor)
+        ren.SetBackground(1, 1, 1)
+        renWin.SetSize(400, 400)
+        ren.GetActiveCamera().SetFocalPoint(0, 0, 0)
+        ren.GetActiveCamera().SetPosition(1, 0, 0)
+        ren.GetActiveCamera().SetViewUp(0, 0, 1)
+        ren.ResetCamera()
+        ren.GetActiveCamera().Azimuth(20)
+        ren.GetActiveCamera().Elevation(30)
+        ren.GetActiveCamera().Dolly(1.2)
+        ren.ResetCameraClippingRange()
+
+        return cf

backend/requirements.txt

@@ -0,0 +1,7 @@
+.idea
+data/*.csv
+data/*.h5
+results/*.csv
+project/target
+project/project
+target

data_preparation/.gitignore

@@ -0,0 +1,13 @@
+version=2.3.2
+project.git = true
+
+align.openParenCallSite = true
+align.openParenDefnSite = true
+maxColumn = 120
+continuationIndent.defnSite = 2
+assumeStandardLibraryStripMargin = true
+danglingParentheses = true
+rewrite.rules = [SortImports, SortModifiers]
+docstrings = JavaDoc
+
+onTestFailure = "To fix this, run ./scalafmt from the project root directory"

data_preparation/.scalafmt.conf

@@ -0,0 +1 @@
+place your shape model (.h5) in data folder, then run the src code, it extracts the shape model parameters and places them in data folder as .csv files.