feat(Trame): Python Web App builder

Trame allow any Python savy to build a web interface to their
Python based application and create a rich and interactive application.

Trame also has a deep integration with VTK and ParaView to support
Remote and Local rendering of 3D dataset.

Many usage examples are available under ./examples/ for reference.

Documentation will soon be available on the Web Site of the project.

examples/PlainPython/Markdown/Simple.py

@@ -0,0 +1,47 @@
+import os
+from trame import start, change, update_state
+from trame.layouts import SinglePage
+from trame.html.markdown import Markdown
+from trame.html.vuetify import VSelect, VSpacer
+
+# -----------------------------------------------------------------------------
+# Read markdown file
+# -----------------------------------------------------------------------------
+
+
+@change("file_name")
+def update_md(file_name="demo.md", **kwargs):
+    md_file_path = os.path.join(os.path.dirname(__file__), file_name)
+    with open(md_file_path) as md:
+        update_state("md", md.read())
+
+
+# -----------------------------------------------------------------------------
+# GUI
+# -----------------------------------------------------------------------------
+
+layout = SinglePage("MD Viewer")
+layout.title.content = "Markdown Viewer"
+layout.toolbar.children += [
+    VSpacer(),
+    VSelect(
+        v_model=("file_name", "demo.md"),
+        items=("options", ['demo.md', 'sample.md']),
+        hide_details=True,
+        dense=True,
+    )
+]
+layout.content.children += [
+    Markdown(
+        classes="pa-4 mx-2",
+        v_model="md",
+    ),
+]
+
+# -----------------------------------------------------------------------------
+# Main
+# -----------------------------------------------------------------------------
+
+if __name__ == "__main__":
+    # print(layout.html)
+    start(layout, on_ready=update_md)

examples/PlainPython/Markdown/demo.md

@@ -0,0 +1,178 @@
+# markdown-it-vue
+
+## Image size and Viewer
+
+![gvf](http://www.aqcoder.com/gvf-project.png =x50)
+![ravenq](http://www.aqcoder.com/ravenq-qr.png =50x50)
+
+## GitHub Table of Contents
+
+[toc]
+
+Note: Only `h2` and `h3` are shown in toc.
+
+## alter
+
+Markup is similar to fenced code blocks. Valid container types are `success`, `info`, `warning` and `error`.
+
+::: success
+You have got it.
+:::
+
+::: info
+You have new mail.
+:::
+
+::: warning
+You have new mail.
+:::
+
+::: error
+Staying up all night is bad for health.
+:::
+
+## mermaid charts
+
+### mermaid Flowchart
+
+[Flowchart Syntax](http://knsv.github.io/mermaid/#flowcharts-basic-syntax)
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+```
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->John: Hello John, how are you?
+    loop Healthcheck
+        John->John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail...
+    John-->Alice: Great!
+    John->Bob: How about you?
+    Bob-->John: Jolly good!
+```
+
+## Definition list
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+[Definition List Syntax](http://pandoc.org/README.html#definition-lists)
+
+
+## AsciiMath
+
+Inline AsciiMath: `@(1/2[1-(1/2)^n])/(1-(1/2))=s_n@`
+
+```AsciiMath
+oint_Cx^3 dx+4y^2 dy
+
+2=(((3-x)xx2)/(3-x))
+
+sum_(m=1)^oosum_(n=1)^oo(m^2 n)/(3^m(m3^n+n3^m)
+```
+
+```ASCIIMath
+phi_n(kappa) = 1/(4pi^2 kappa^2)
+ int_0^oo (sin(kappa R))/(kappa R)
+ del/(del R)
+[R^2 (del D_n (R))/(del R)] del R
+```
+
+[AsciiMath Documentation](http://asciimath.org/)
+
+## Subscript: H~2~O
+
+You can also use inline math: `$H_2O$`
+
+
+## Superscript: 29^th^
+
+You can also use inline math: `$29^{th}$`
+
+
+## Emoji: :panda_face: :sparkles: :camel: :boom: :pig:
+
+[Emoji Cheat Sheet](http://www.emoji-cheat-sheet.com/)
+
+## Fontawesome: :fa-car: :fa-flag: :fa-bicycle: :fa-leaf: :fa-heart:
+
+[All the Font Awesome icons](http://fontawesome.io/icons/)
+
+## code
+
+### c
+```c
+#include <stdio.h>
+int main(int argc char* argv[]) {
+  printf("Hello, World!");
+  return 0;
+}
+```
+
+### json
+
+```json
+{
+  "name": "markdown-it-vue"
+}
+```
+
+### javascript
+```json
+import MarkdownItVue from 'markdown-it-vue'
+export default {
+  components: {
+    MarkdownItVue
+  }
+}
+```
+
+### bash
+```bash
+npm install markdown-it-vue
+```
+
+## table
+
+| First Header  | Second Header |
+| ------------- | ------------- |
+| Content Cell  | Content Cell  |
+| Content Cell  | Content Cell  |
+
+## flowchart.js
+
+```flowchart.js
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|request
+para=>parallel: parallel tasks
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->para
+c2(true)->io->e
+c2(false)->e
+
+para(path1, bottom)->sub1(left)->op1
+para(path2, right)->op2->e
+
+st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
+```

examples/PlainPython/Markdown/sample.md

@@ -0,0 +1,157 @@
+An h1 header
+============
+
+Paragraphs are separated by a blank line.
+
+2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+look like:
+
+  * this one
+  * that one
+  * the other one
+
+Note that --- not considering the asterisk --- the actual text
+content starts at 4-columns in.
+
+> Block quotes are
+> written like so.
+>
+> They can span multiple paragraphs,
+> if you like.
+
+Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
+in chapters 12--14"). Three dots ... will be converted to an ellipsis.
+Unicode is supported. ☺
+
+
+
+An h2 header
+------------
+
+Here's a numbered list:
+
+ 1. first item
+ 2. second item
+ 3. third item
+
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
+
+~~~
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
+
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
+
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print i
+~~~
+
+
+
+### An h3 header ###
+
+Now a nested list:
+
+ 1. First, get these ingredients:
+
+      * carrots
+      * celery
+      * lentils
+
+ 2. Boil some water.
+
+ 3. Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+Notice again how text always lines up on 4-space indents (including
+that last line which continues item 3 above).
+
+Here's a link to [a website](http://foo.bar), to a [local
+doc](local-doc.html), and to a [section heading in the current
+doc](#an-h2-header). Here's a footnote [^1].
+
+[^1]: Footnote text goes here.
+
+Tables can look like this:
+
+size  material      color
+----  ------------  ------------
+9     leather       brown
+10    hemp canvas   natural
+11    glass         transparent
+
+Table: Shoes, their sizes, and what they're made of
+
+(The above is the caption for the table.) Pandoc also supports
+multi-line tables:
+
+--------  -----------------------
+keyword   text
+--------  -----------------------
+red       Sunsets, apples, and
+          other red or reddish
+          things.
+
+green     Leaves, grass, frogs
+          and other things it's
+          not easy being.
+--------  -----------------------
+
+A horizontal rule follows.
+
+***
+
+Here's a definition list:
+
+apples
+  : Good for making applesauce.
+oranges
+  : Citrus!
+tomatoes
+  : There's no "e" in tomatoe.
+
+Again, text is indented 4 spaces. (Put a blank line between each
+term/definition pair to spread things out more.)
+
+Here's a "line block":
+
+| Line one
+|   Line too
+| Line tree
+
+and images can be specified like so:
+
+![example image](example-image.jpg "An exemplary image")
+
+Inline math equations go in like so: $\omega = d\phi / dt$. Display
+math should get its own line and be put in in double-dollarsigns:
+
+$$I = \int \rho R^{2} dV$$
+
+And note that you can backslash-escape any punctuation characters
+which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.