fix viewer backend for convenitnt test and do some frontend work

SuperScriptViewer/CustomConfig.py

@@ -1,10 +1,18 @@
 import locale
 
-# encoding list
+class DatabaseType:
-# https://docs.python.org/3/library/codecs.html#standard-encodings
+    SQLite = 0
-database_encoding = locale.getpreferredencoding()
+    MySQL = 1
-export_db = "export.db"
+
-decorated_db = "decorate.db"
+database_type = DatabaseType.SQLite
-env_db = "env.db"
+sqlite_path = "decorated.db"
-force_regenerate = False
+
+'''
+database_type = DatabaseType.MySQL
+mysql_url = "http://yyc.bkt.moe:10000"
+mysql_username = "test"
+mysql_password = "test"
+mysql_database = "test_database"
+'''
+
 debug_mode = False

SuperScriptViewer/Database.py

@@ -0,0 +1,11 @@
+import CustomConfig
+
+class EmptyDatabase:
+    def __init__(self):
+        pass
+
+def CreateDatabase():
+    return EmptyDatabase()
+
+def CloseDatabase(db):
+    pass

SuperScriptViewer/ServerCore.py

@@ -1,4 +1,5 @@
 import CustomConfig
+import Database
 
 from flask import Flask
 from flask import g
@@ -8,228 +9,93 @@ from flask import request
 from flask import abort
 from flask import redirect
 
-from functools import reduce
-import sqlite3
-import json
-import ServerStruct as ss
-
 app = Flask(__name__)
 
 # =============================================database
 def get_db():
     db = getattr(g, '_database', None)
     if db is None:
-        db = g._database = sqlite3.connect(CustomConfig.decorated_db)
+        db = g._database = Database.CreateDatabase()
     return db
 
-def get_env():
-    env = getattr(g, '_envDatabase', None)
-    if env is None:
-        env = g._envDatabase = sqlite3.connect(CustomConfig.env_db)
-        env.text_factory = lambda x: x.decode(CustomConfig.database_encoding, errors="ignore")
-    return env
-
 @app.teardown_appcontext
 def close_connection(exception):
     db = getattr(g, '_database', None)
     if db is not None:
-        db.close()
+        Database.CloseDatabase(db)
-
-# =============================================template func
-@app.template_global(name = 'pinDecoder')
-def block_pin_decoder(target):
-    return json.loads(target)
-
-@app.template_global(name = 'pinDecoder2')
-def block_pin_decoder2(target):
-    vab = json.loads(target)
-    return [vab['name'], vab['type']]
 
 # =============================================route
 
 # =========== default
 
 @app.route('/', methods=['GET'])
-def nospecHandle():
+def handle_nospec():
-    return redirect(url_for('indexHandle'))
+    return redirect(url_for('handle_index'))
 
-# =========== misc page
+# =========== basic pages
-
-@app.route('/help', methods=['GET'])
-def helpMainHandle():
-    return render_template("help.html")
-
-@app.route('/about', methods=['GET'])
-def aboutHandle():
-    return render_template("about.html", static_icon = url_for('static', filename='icon.png'))
-
-# =========== help page
-
-@app.route('/help/<path:scriptPath>', methods=['GET'])
-def helpHandle(scriptPath):
-    if scriptPath == 'converter':
-        return render_template("help/converter.html",
-                        tabcontrol_css = url_for('static', filename='tabcontrol.css'),
-                        tabcontrol_js = url_for('static', filename='tabcontrol.js'),
-                        converter_js = url_for('static', filename='converter.js'))
-    elif scriptPath == 'env':
-        return render_template("help/env.html",
-                        tabcontrol_css = url_for('static', filename='tabcontrol.css'),
-                        tabcontrol_js = url_for('static', filename='tabcontrol.js'),
-                        env_js = url_for('static', filename='env.js'),
-                        env_css = url_for('static', filename='env.css'),
-                        database_data = ss.envDatabaseList)
-    elif scriptPath == 'legend':
-        return render_template("help/legend.html")
-    else:
-        abort(404)
-
-@app.route('/help/env', methods=['POST'])
-def envQueryHandle():
-    basicReturn = {
-        "status": False,
-        "overflow": False,
-        "data": []
-    }
-
-    # check tag
-    queryTag = request.form['tag'];
-    if queryTag not in ss.legalEnvQueryKey:
-        return basicReturn
-
-    cur = get_env().cursor()
-    #try:
-    readyData = json.loads(request.form['data'])
-    fieldLength = len(readyData.keys())
-    if fieldLength == 0:
-        cur.execute("SELECT * FROM {}".format(queryTag))
-    else:
-        whereStatement = 'AND'.join(map(lambda x: "([" + x + "] = ?)", readyData.keys()))
-        cur.execute("SELECT * FROM {} WHERE ({})".format(queryTag, whereStatement), list(readyData.values()))
-        
-    # iterate
-    counter = 0
-    for i in cur.fetchall():
-        if counter == 100:
-            basicReturn['overflow'] = True
-            break
-        basicReturn['data'].append(i)
-        counter+=1
-
-    basicReturn['status'] = True
-    #except Exception as ex:
-    #    basicReturn['status'] = False
-    #    basicReturn['overflow'] = False
-    #    basicReturn['data'] = []
-
-    return basicReturn
-
-# =========== index
 
 @app.route('/index', methods=['GET'])
-def indexHandle():
+def handle_index():
-    cur = get_db().cursor()
+    return app.send_static_file("html/index.html")
-    cur.execute("SELECT [graph], [graph_name], [belong_to] FROM graph WHERE [index] != -1 ORDER BY [belong_to], [index] ASC;")
-    data = {}
-    for i in cur.fetchall():
-        if i[2] not in data.keys():
-            data[i[2]] = [ss.ScriptItem(i[1], i[0])]
-        else:
-            data[i[2]].append(ss.ScriptItem(i[1], i[0]))
 
-    return render_template('index.html', scripts = data)
+@app.route('/script', methods=['GET'])
+def handle_script():
+    return redirect(url_for('handle_index'))
+
+@app.route('/array', methods=['GET'])
+def handle_array():
+    return redirect(url_for('handle_index'))
+    
+@app.route('/environment', methods=['GET'])
+def handle_environment():
+    return redirect(url_for('handle_index'))
+
+@app.route('/help', methods=['GET'])
+def handle_help():
+    return app.send_static_file("html/help.html")
+
+@app.route('/about', methods=['GET'])
+def handle_about():
+    return app.send_static_file("html/about.html")
+
+# =========== viewer
+# script and array should have at least 2 items splitted by slash(/)
+# the first one is document id and the second one is the real CK_ID of viewing object.
+# however, environment do not have this, environment only allow one item, the id of environment.
+
+@app.route('/script/<path:script_path>', methods=['GET'])
+def handle_script_viewer(script_path):
+    # check invalid url
+    if len(script_path.split('/')) < 2:
+        return redirect(url_for('handle_index'))
+    return app.send_static_file("html/viewer_script.html")
+
+@app.route('/array/<path:array_path>', methods=['GET'])
+def handle_array_viewer(array_path):
+    # check invalid url
+    if len(script_path.split('/')) < 2:
+        return redirect(url_for('handle_index'))
+    return app.send_static_file("html/viewer_array.html")
+
+@app.route('/environment/<path:environment_path>', methods=['GET'])
+def handle_environment_viewer(environment_path):
+    # check invalid url
+    if len(script_path.split('/')) > 1:
+        return redirect(url_for('handle_index'))
+    return app.send_static_file("html/viewer_environment.html")
 
 # =========== viewer
 
-@app.route('/viewer/<path:scriptPath>', methods=['GET'])
+@app.route('/api/index/getList', methods=['POST'])
-def viewerHandle(scriptPath):
+def handle_api_index_getList(scriptPath):
-
+    return {
-    # comput hamburger
+        "document": [],
-    pathSlice = scriptPath.split('/')
+        "script": [],
-    cur = get_db().cursor()
+        "array": [],
-    cur.execute("SELECT [graph], [graph_name] FROM graph WHERE [graph] IN ({});".format(','.join(pathSlice)))
+        "environment": []
-    hamburgerMap = {}
+    }
-    hamburger = []
-    for i in cur.fetchall():
-        hamburgerMap[str(i[0])] = i[1]
-    currentHamburger = hamburgerMap[pathSlice[-1]]
-    
-    for i in range(len(pathSlice) - 1):
-        hamburger.append(ss.HamburgerItem(hamburgerMap[pathSlice[i]], reduce(lambda x,y: x + '/' + y, pathSlice[0:i + 1], '')))
-
-    # gei w/h
-    cur.execute('SELECT [width], [height] FROM graph WHERE [graph] == ?', (pathSlice[-1], ))
-    cache = cur.fetchone()
-    width = cache[0]
-    height = cache[1]
-
-    # get blocks
-    cur.execute('SELECT * FROM block WHERE [belong_to_graph] == ?', (pathSlice[-1], ))
-    dbBlocks = cur.fetchall()
-
-    # get cells
-    cur.execute("SELECT * FROM cell WHERE [belong_to_graph] == ?", (pathSlice[-1], ))
-    dbCells = cur.fetchall()
-
-    # get links
-    cur.execute("SELECT * FROM link WHERE [belong_to_graph] == ?", (pathSlice[-1], ))
-    dbLinks = cur.fetchall()
-
-    # render
-    return render_template('viewer.html',
-                    currentPath = scriptPath,
-                    gWidth = width,
-                    gHeight = height,
-                    hamburgerHistory = hamburger,
-                    viewer_css = url_for('static', filename='viewer.css'),
-                    tabcontrol_css = url_for('static', filename='tabcontrol.css'),
-                    viewer_js = url_for('static', filename='viewer.js'),
-                    tabcontrol_js = url_for('static', filename='tabcontrol.js'),
-                    hamburgerCurrent = currentHamburger,
-                    blocks = dbBlocks,
-                    cells = dbCells,
-                    links = dbLinks)
-
-@app.route('/viewer/<path:scriptPath>', methods=['POST'])
-def actionHandle(scriptPath):
-    cache = request.form['operation']
-    if cache == "info":
-        return infoHandle(request.form['target'], request.form['tag'])
-    elif cache == "move":
-        return moveHandle(request.form['target'])
-    else:
-        abort(400)
-
-def infoHandle(target, tag):
-    cur = get_db().cursor()
-
-    data = {}
-    existedSet = set()
-    if tag == '0':
-        # call from cell
-        cur.execute("SELECT * FROM info WHERE [target] == ?", (target, ))
-    elif tag == '1':
-        # call from bb
-        cur.execute("SELECT * FROM info WHERE [attach_bb] == ?", (target, ))
-    else:
-        return {}
-    # get data
-    for i in cur.fetchall():
-        if i[0] in existedSet:
-            data[i[0]]['data'].append((i[4], i[5]))
-        else:
-            existedSet.add(i[0])
-            data[i[0]] = {
-                'name': i[3],
-                'is_setting': True if i[2] != 0 else False,
-                'data': [(i[4], i[5])]
-            }
-
-    return data
-
-def moveHandle(target):
-    return {}
 
+# =========== startup     
 def run():
     app.run()
     

SuperScriptViewer/ServerStruct.py

@@ -1,82 +0,0 @@
-class ScriptItem(object):
-    def __init__(self, name, id):
-        self.name = name
-        self.id = id
-
-class HamburgerItem(object):
-    def __init__(self, name, path):
-        self.name = name
-        self.path = path
-
-envDatabaseList = (
-    {"name": "Attribute",
-     "queryKey": "attr",
-     "data": (("index", "0", "(Integer) Attribute index"),
-              ("name", "Floor", "(String) Attribute name"),
-              ("category_index", "0", "(Integer) The category index of this attribute"),
-              ("category_name", "3DXML", "(String) The category name of this attribute"),
-              ("flags", "44", "(Integer) Attribute flags"),
-              ("param_index", "85", "(Integer) Corresponding parameter index"),
-              ("compatible_classid", "41", "(Integer) Compatible class id"),
-              ("default_id", "1;NULL", "(String) Default value"))},
-    {"name": "Message",
-     "queryKey": "msg",
-     "data": (("index", "0", "(Integer) Message index"),
-              ("name", "OnClick", "(String) Message name"))},
-    {"name": "Operation",
-     "queryKey": "op",
-     "data": (("funcptr", "615841344", "(Integer) Operation function memory location"),
-              ("in1_guid", "1910468930,-1003023558", "(String) Input parameter 1 guid"),
-              ("in2_guid", "-1411304621,-1568456412", "(String) Input parameter 2 guid"),
-              ("out_guid", "450177678,1584666912", "(String) Output parameter guid"),
-              ("op_guid", "869034825,898181163", "(String) Operation guid"),
-              ("op_name", "Addition", "(String) Operation name"),
-              ("op_code", "51", "(Integer) Operation code"))},
-    {"name": "Parameter",
-     "queryKey": "param",
-     "data": (("index", "0", "(Integer) Parameter index"),
-              ("guid", "481363808,1100959941", "(String) Parameter guid"),
-              ("derived_from", "0,0", "(String) The parameter guid deriving this parameter"),
-              ("type_name", "None", "(String) Parameter name"),
-              ("default_size", "4", "(Integer) Default size"),
-              ("func_CreateDefault", "604002966", "(Integer) CreateDefault function memory location"),
-              ("func_Delete", "604003366", "(Integer) Delete function memory location"),
-              ("func_SaveLoad", "603996047", "(Integer) SaveLoad function memory location"),
-              ("func_Check", "0", "(Integer) Check function memory location"),
-              ("func_Copy", "604002468", "(Integer) Copy function memory location"),
-              ("func_String", "0", "(Integer) String function memory location"),
-              ("func_UICreator", "619055248", "(Integer) UICreator function memory location"),
-              ("creator_dll_index", "-1", "(Integer) The id of the dll defining this parameter"),
-              ("creator_plugin_index", "-1", "(Integer) The id of the plugin defining this parameter"),
-              ("dw_param", "0", "(Integer) An application reserved DWORD for placing parameter type specific data"),
-              ("dw_flags", "133", "(Integer) Flags specifying special settings for this parameter type"),
-              ("cid", "0", "(Integer) Special case for parameter types that refer to CKObjects => corresponding class ID of the object"),
-              ("saver_manager", "1181355948,0", "(String) Int Manager guid"))},
-    {"name": "Plugin",
-     "queryKey": "plugin",
-     "data": (("dll_index", "18", "(Integer) Dll index"),
-              ("dll_name", "E:\\Virtools\\Plugins\\ImageReader.dll", "(String) Dll name"),
-              ("plugin_index", "2", "(Integer) Plugin index"),
-              ("category", "Bitmap Readers", "(String) Plugin category"),
-              ("active", "1", "(Integer) For manager and Render engines TRUE if a manager was created, for other plugins this value is not used"),
-              ("needed_by_file", "0", "(Integer) When saving a file TRUE if at least one object needs this plugin"),
-              ("guid", "1632248895,1132147523", "(String) Plugin guid"),
-              ("desc", "Windows Bitmap", "(String) Plugin description"),
-              ("author", "Virtools", "(String) Plugin author"),
-              ("summary", "Windows Bitmap", "(String) Plugin summary"),
-              ("version", "1", "(Integer) Plugin version"),
-              ("func_init", "103354496", "(Integer) Init function memory location"),
-              ("func_exit", "624432336", "(Integer) Exit function memory location"))},
-    {"name": "Variable",
-     "queryKey": "variable",
-     "data": (("name", "3D XML/ExportVersion", "(String) Variable name"),
-              ("description", "Version of exported 3DXML", "(String) Variable description"),
-              ("flags", "4", "(Integer) Variable flags"),
-              ("type", "1", "(Integer) Variable type"),
-              ("representation", "enum:0= 3DXML 3.0; 1= 3DXML 4.0", "(String) The representation (ie the input format) of a variable type"),
-              ("data", " 3DXML 3.0", "(String) Variable data"))}
-)
-
-legalEnvQueryKey = list(map(lambda x: x['queryKey'], envDatabaseList))
-
-

SuperScriptViewer/static/css/global.css

@@ -0,0 +1,16 @@
+body {
+    background: silver;
+    font-size: 1rem;
+}
+
+div.simple-menu {
+    display: flex; 
+    flex-flow: row;
+}
+div.simple-menu > p {
+    margin: 5px;
+}
+
+h1 {
+    margin: 0;
+}

SuperScriptViewer/static/html/about.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>About - SuperScriptMaterializer</title>
+    <link rel="shortcut icon" type="image/jpg" href="/static/imgs/icon.jpg" />
+
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
+    <script type="text/javascript" src="/static/js/global.js"/></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xp.css@0.3.0/dist/98.css">
+    <link rel="stylesheet" href="/static/css/global.css">
+</head>
+
+<body>
+<h1><img src="/static/imgs/icon.jpg" width="64" height="64" style="margin: 0 10px 0 10px;"/>Super Script Materializer</h1>
+<p>There are no secret script behind Virtools. Super Script Materializer will destroy all locks and show you the real code.<br />
+But Super Script Materializer only show you code. It couldn't analyse the result and touch author's heart and intention. This is your work.<br />
+So, let we crack all scripts and destroy close-source illusion.</p>
+
+<p><a href="https://github.com/yyc12345/SuperScriptMaterializer">SuperScriptMaterializer</a>. All codes are under GPLv3.<br />
+Web frontend is powered by <a href="https://gulpjs.com/">gulp</a>, <a href="https://jquery.com/">jQuery</a>, <a href="https://www.jsviews.com/">JsRender/JsViews</a> and <a href="https://botoxparty.github.io/XP.css/">98.css</a>.<br />
+Web backend is powered by <a href="https://github.com/pallets/flask">Flask</a>.<br />
+Ancestor projects: <a href="https://github.com/BearKidsTeam/VirtoolsScriptDeobfuscation">BearKidsTeam/VirtoolsScriptDeobfuscation</a> and <a href="https://github.com/BearKidsTeam/Script-Materializer">BearKidsTeam/Script-Materializer</a>.<br />
+Thank <a href="https://github.com/chirs241097">chirs241097</a> and <a href="https://github.com/instr3">2jjy</a>.<br />
+Icon is created by <a href="https://github.com/ShadowPower">ShadowPower</a> via diffusion.</p>
+
+<p>Super Script Materializer version: 2.0</p>
+
+<div class="simple-menu">
+    <p><a href="/index">Hierarchy</a></p>
+    <p>|</p>
+    <p><a href="/help">Help</a></p>
+    <p>|</p>
+    <p><a href="/about">About</a></p>
+</div>
+</body>
+
+</html>

SuperScriptViewer/static/html/help.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Help - SuperScriptMaterializer</title>
+    <link rel="shortcut icon" type="image/jpg" href="/static/imgs/icon.jpg" />
+    
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
+    <script type="text/javascript" src="/static/js/global.js"/></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xp.css@0.3.0/dist/98.css">
+    <link rel="stylesheet" href="/static/css/global.css">
+</head>
+
+<body>
+<h1>Help Center</h1>
+<div class="simple-menu">
+    <p><a href="/index">Hierarchy</a></p>
+    <p>|</p>
+    <p><a href="/help">Help</a></p>
+    <p>|</p>
+    <p><a href="/about">About</a></p>
+</div>
+<p>This page is help center, providing useful link for some detailed help page. Choose what you want to use and enter corresponding tabs.</p>
+
+<section class="tabs">
+    <menu role="tablist" aria-label="help-tab">
+        <button role="tab" aria-selected="true" aria-controls="tab-legend">Legend</button>
+        <button role="tab" aria-controls="tab-misc1">Misc Help</button>
+        <button role="tab" aria-controls="tab-misc2">Misc Help2</button>
+    </menu>
+    <!-- the tab content -->
+    <article role="tabpanel" id="tab-legend">
+
+        <h2>Layout</h2>
+        <p>In viewer page, it can be divided into 3 panels:</p>
+        <table border="1">
+        <tr style="height: 50px;">
+            <td style="width: 200px;">Navigation panel</td>
+            <td style="width: 100px;" rowspan="2">Information & tools panel</td>
+        </tr>
+        <tr style="height: 50px;">
+            <td>Graph panel</td>
+        </tr>
+        </table>
+        <ul>
+            <li><b>Navigation panel</b>: Display current script's hierarchy. And you can click all layers which located in this panel to jump into it.</li>
+            <li><b>Information & tools panel</b>: Provide property data, display configuration and some useful tools.</li>
+            <li><b>Graph panel</b>: Core panel. Display current browsing behavior graph's data. Some legend will be desscribe in the follwing sector.</li>
+        </ul>
+        
+        <h2>Graph legend</h2>
+        <h3>Block</h3>
+        <div style="background: #7f7f7f; padding: 20px;">
+        <div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
+            <div style="height: 5px; width: 15px;background: #8f8f8f;border: 1px solid #cfcfcf;"></div>
+            <div style="margin-left: 10px;">pLocal (including arrtibute) (ParameterLocal abbr.)</div>
+            </div>
+        <div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
+            <div style="height: 5px; width: 15px;background: purple;border: 1px solid #cfcfcf;"></div>
+            <div style="margin-left: 10px;">Shortcut (Only shortcut output)</div>
+        </div>    
+        <div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
+            <div style="height: 6px; width: 6px;background: yellow;border: 1px solid #cfcfcf;"></div>
+            <div style="margin-left: 10px;">bIn / bOut (BehaviorIn / BehaviorOut abbr.)</div>
+        </div>    
+        <div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
+            <div style="height: 6px; width: 6px;background: blue;border: 1px solid #cfcfcf;"></div>
+            <div style="margin-left: 10px;">pIn / pOut (ParameterIn / ParameterOut abbr.)</div>
+        </div>   
+        <div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
+            <div style="height: 6px; width: 6px;background: green;border: 1px solid #cfcfcf;"></div>
+            <div style="margin-left: 10px;">pTarget (ParameterTarget abbr.)</div>
+        </div>   
+        </div>
+        
+        
+        <h3>Building block</h3>
+        
+        <p>Building block (abbr. BB)</p>
+        <p>All building block can be devided into 2 types: prototype building block and behavior graph</p>
+        
+        <div style="background: #7f7f7f; padding: 20px; width: 500px;">
+            <div style="height: 72.0px; width: 104.0px;background: #8f8f8f;border: 1px solid #cfcfcf;position: relative; top: 0; left: 0;">
+                                
+                <div class="block-target" style="height: 6px; width: 6px; top: 0; left: 0;position: absolute;background: green;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 20px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 46px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; bottom: 0; left: 20px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 10px; left: 0;position: absolute;background: yellow;"></div>
+                <div style="height: 6px; width: 6px; top: 10px; right: 0;position: absolute;background: yellow;"></div>
+                <div style="height: 6px; width: 6px; top: 36px; right: 0;position: absolute;background: yellow;"></div>
+                
+                <p style="top: 10px; left: 20px;position: absolute;margin: 0;padding: 0;font-size: 12px;color: black;">Get Cell</p>
+                <p style="top: 24px; left: 20px;position: absolute; margin: 0;padding: 0;font-size: 9px;color: white;">Get Cell</p>
+            </div>
+        </div>
+        <p>This is a typical prototype building block. Some port are attached into this building block.<br />
+        pIn and pTarget are at the top, pOut are at the bottom, bIn are on the left, and bOut are on the right.<br />
+        In the middle of building block, the name of this building block is written in black font, and the name of this building block's prototype is written in white font.</p>
+        
+        <div style="background: #7f7f7f; padding: 20px; width: 500px;">
+            <div class="block-body" style="height: 72.0px; width: 196.0px;background: #8f8f8f;border: 1px solid #cfcfcf;position: relative; top: 0; left: 0;">
+                
+                <div style="height: 6px; width: 6px; top: 0; left: 20px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 46px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 72px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 98px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 124px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 0; left: 150px;position: absolute;background: blue;"></div>
+                <div style="height: 6px; width: 6px; top: 10px; left: 0;position: absolute;background: yellow;"></div>
+                <div style="height: 6px; width: 6px; top: 10px; right: 0;position: absolute;background: yellow;"></div>
+                <div style="height: 6px; width: 6px; top: 36px; right: 0;position: absolute;background: yellow;"></div>
+                
+                <p style="top: 10px; left: 20px;position: absolute;margin: 0;padding: 0;font-size: 12px;color: black;"><a href="/help/legend">vt2obj</a></p>
+                <p style="top: 24px; left: 20px;position: absolute; margin: 0;padding: 0;font-size: 9px;color: white;"></p>
+            </div>
+        </div>
+        <p>This is a typical behavior graph. It is very similar to prototype building block.<br />
+        It don't have the name of prototype. Instead, you can click on the name to see what is inside this graph(jump into this graph).</p>
+        
+        <h3>Link</h3>
+        
+        <svg version="1.1" width="500px" height="350px" style="position: relative; top: 0; left: 0;background: #7f7f7f; padding: 20px;">
+            <line x1="0" y1="20" x2="100" y2="20" stroke="black" stroke-width="1px"></line>
+            <text x="50" y="20" fill="black" style="font-size: 12px; color: black;">0</text>
+            <text x="120" y="20" fill="black">bLink (BehaviorLink)</text>
+            <line x1="0" y1="70" x2="100" y2="70" stroke="blue" stroke-width="1px" stroke-dasharray="5, 1"></line>
+            <text x="120" y="70" fill="black">pLink (ParameterLink)</text>
+            <line x1="0" y1="120" x2="100" y2="120" stroke="cyan" stroke-width="1px" stroke-dasharray="5, 1"></line>
+            <text x="120" y="120" fill="black">eLink (ExportParameterLink)</text>
+        
+            <line x1="0" y1="170" x2="100" y2="170" stroke="yellow" stroke-width="1px"></line>
+            <text x="50" y="170" fill="yellow" style="font-size: 12px;">0</text>
+            <text x="120" y="170" fill="black">Highlight bLink</text>
+            <line x1="0" y1="220" x2="100" y2="220" stroke="orange" stroke-width="1px" stroke-dasharray="5, 1"></line>
+            <text x="120" y="220" fill="black">Highlight pLink</text>
+            <line x1="0" y1="270" x2="100" y2="270" stroke="orangered" stroke-width="1px" stroke-dasharray="5, 1"></line>
+            <text x="120" y="270" fill="black">Highlight eLink</text>
+        </svg>
+        
+        <h3>Operation</h3>
+        <ul>
+            <li>You can highlight the associated links by clicking Block or BB, and click again to cancel the highlight.</li>
+            <li>You can double-click Block or prototoye BB to get the properties associated with it.</li>
+            <li>You can hover over the Block to view its name and type through tooltip.</li>
+        </ul>
+        
+        <h2>Properties</h2>
+        <p>Properties can be visited in Information & tools panel. It can display the information of the object currently being double-clicked.</p>
+        
+        <div style="margin: 5px;border: 1px solid gray;border-radius: 2px;padding: 5px; width: 400px;">
+            <p><code style="border: 1px solid black; border-radius: 2px;padding: 5px;margin: 5px;background: gray;color: white;">S</code><b>Rectangle/Box Mode</b><i>(176)</i></p>
+            <p>dump.data</p>
+            <pre style="border: 1px solid black;border-radius: 2px;padding: 5px;background: #3f3f3f;color: white;white-space: pre-wrap;word-wrap: break-word;">0x01, 0x00, 0x00, 0x00</pre>
+            <p>dump.length</p>
+            <pre style="border: 1px solid black;border-radius: 2px;padding: 5px;background: #3f3f3f;color: white;white-space: pre-wrap;word-wrap: break-word;">4</pre>
+        </div>
+        <p>This is a typical property unit. You may see more than 1 property unit in property list. A property unit may contain more than 1 key-value pair to describe it.<br />
+        In the first line, the name of the current property unit (actually a pLocal) will be displayed. The number in brackets is CK_ID. If an S is displayed in front of it (as shown in the figure above), then it is also a setting.</p>
+        
+    </article>
+    <article role="tabpanel" hidden id="tab-misc1">
+        <p>No Content</p>
+    </article>
+    <article role="tabpanel" hidden id="tab-misc2">
+        <p>No Content</p>
+    </article>
+</section>
+
+</body>
+
+</html>

SuperScriptViewer/static/html/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Hierarchy - SuperScriptMaterializer</title>
+    <link rel="shortcut icon" type="image/jpg" href="/static/imgs/icon.jpg" />
+
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>
+    <script type="text/javascript" src="/static/js/global.js"/></script>
+    <script type="text/javascript" src="/static/js/index.js"/></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xp.css@0.3.0/dist/98.css">
+    <link rel="stylesheet" href="/static/css/global.css">
+    <link rel="stylesheet" href="/static/css/index.css">
+</head>
+
+<body>
+<h1>Hierarchy</h1>
+<p>Choose a script to read it.</p>
+
+
+<p>Generated by SuperScriptMaterializer</p>
+<div class="simple-menu">
+    <p><a href="/index">Hierarchy</a></p>
+    <p>|</p>
+    <p><a href="/help">Help</a></p>
+    <p>|</p>
+    <p><a href="/about">About</a></p>
+</div>
+</body>
+
+</html>

SuperScriptViewer/static/imgs/document.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#000000" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
+</svg>

SuperScriptViewer/static/imgs/environment.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#000000" d="M18 2H12V9L9.5 7.5L7 9V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V4C20 2.89 19.1 2 18 2M17.68 18.41C17.57 18.5 16.47 19.25 16.05 19.5C15.63 19.79 14 20.72 14.26 18.92C14.89 15.28 16.11 13.12 14.65 14.06C14.27 14.29 14.05 14.43 13.91 14.5C13.78 14.61 13.79 14.6 13.68 14.41S13.53 14.23 13.67 14.13C13.67 14.13 15.9 12.34 16.72 12.28C17.5 12.21 17.31 13.17 17.24 13.61C16.78 15.46 15.94 18.15 16.07 18.54C16.18 18.93 17 18.31 17.44 18C17.44 18 17.5 17.93 17.61 18.05C17.72 18.22 17.83 18.3 17.68 18.41M16.97 11.06C16.4 11.06 15.94 10.6 15.94 10.03C15.94 9.46 16.4 9 16.97 9C17.54 9 18 9.46 18 10.03C18 10.6 17.54 11.06 16.97 11.06Z" />
+</svg>

SuperScriptViewer/static/imgs/folder.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#000000" d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" />
+</svg>

SuperScriptViewer/static/imgs/script.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#000000" d="M17.8,20C17.4,21.2 16.3,22 15,22H5C3.3,22 2,20.7 2,19V18H5L14.2,18C14.6,19.2 15.7,20 17,20H17.8M19,2H8C6.3,2 5,3.3 5,5V16H16V17C16,17.6 16.4,18 17,18H18V5C18,4.4 18.4,4 19,4C19.6,4 20,4.4 20,5V6H22V5C22,3.3 20.7,2 19,2Z" />
+</svg>

SuperScriptViewer/static/imgs/table.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <path fill="#000000" d="M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z" />
+</svg>

SuperScriptViewer/static/js/global.js

@@ -0,0 +1,12 @@
+// tab switcher
+$(document).ready(function() {
+    // References
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+    $('[role="tab"]').click(function() {
+        $('[aria-selected="true"]').attr('aria-selected', false);
+        $(this).attr('aria-selected', true);
+        $('[role="tabpanel"]').attr('hidden', true);
+        $(`#${$(this).attr('aria-controls')}`).removeAttr('hidden');
+    });
+});
+

SuperScriptViewer/static/templates/help/legend.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Help - Viewer legend</title>、
+</head>
+
+<body>
+<h1>Viewer legend</h1>
+<p>This page introduce how to use viewer page.</p>
+<br />
+
+
+
+</body>
+
+</html>

SuperScriptViewer/static/templates/index_entry.tmpl

@@ -0,0 +1,8 @@
+{% for key, value in scripts.items() %}
+<h2>{{ key|e }}</h2>
+<ol>
+    {% for i in value %}
+    <li><a href="{{ "/viewer/%s"|format(i.id) }}">{{ i.name }}</a></li>
+    {% endfor %}
+</ol>
+{% endfor %}

SuperScriptViewer/templates/help/legend.html

@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>Help - Viewer legend</title>、
-</head>
-
-<body>
-<h1>Viewer legend</h1>
-<p>This page introduce how to use viewer page.</p>
-<br />
-
-
-
-<h2>Layout</h2>
-<p>In viewer page, it can be divided into 3 panels:</p>
-<table border="1">
-<tr style="height: 50px;">
-    <td style="width: 200px;">Navigation panel</td>
-    <td style="width: 100px;" rowspan="2">Information & tools panel</td>
-</tr>
-<tr style="height: 50px;">
-    <td>Graph panel</td>
-</tr>
-</table>
-<ul>
-    <li><b>Navigation panel</b>: Display current script's hierarchy. And you can click all layers which located in this panel to jump into it.</li>
-    <li><b>Information & tools panel</b>: Provide property data, display configuration and some useful tools.</li>
-    <li><b>Graph panel</b>: Core panel. Display current browsing behavior graph's data. Some legend will be desscribe in the follwing sector.</li>
-</ul>
-
-
-
-<h2>Graph legend</h2>
-<h3>Block</h3>
-<div style="background: #7f7f7f; padding: 20px;">
-<div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
-    <div style="height: 5px; width: 15px;background: #8f8f8f;border: 1px solid #cfcfcf;"></div>
-    <div style="margin-left: 10px;">pLocal (including arrtibute) (ParameterLocal abbr.)</div>
-    </div>
-<div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
-    <div style="height: 5px; width: 15px;background: purple;border: 1px solid #cfcfcf;"></div>
-    <div style="margin-left: 10px;">Shortcut (Only shortcut output)</div>
-</div>    
-<div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
-    <div style="height: 6px; width: 6px;background: yellow;border: 1px solid #cfcfcf;"></div>
-    <div style="margin-left: 10px;">bIn / bOut (BehaviorIn / BehaviorOut abbr.)</div>
-</div>    
-<div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
-    <div style="height: 6px; width: 6px;background: blue;border: 1px solid #cfcfcf;"></div>
-    <div style="margin-left: 10px;">pIn / pOut (ParameterIn / ParameterOut abbr.)</div>
-</div>   
-<div style="display: flex; flex-flow: row; align-items: center; margin-top: 10px; margin-bottom: 10px;">
-    <div style="height: 6px; width: 6px;background: green;border: 1px solid #cfcfcf;"></div>
-    <div style="margin-left: 10px;">pTarget (ParameterTarget abbr.)</div>
-</div>   
-</div>
-
-
-<h3>Building block</h3>
-
-<p>Building block (abbr. BB)</p>
-<p>All building block can be devided into 2 types: prototype building block and behavior graph</p>
-
-<div style="background: #7f7f7f; padding: 20px; width: 500px;">
-    <div style="height: 72.0px; width: 104.0px;background: #8f8f8f;border: 1px solid #cfcfcf;position: relative; top: 0; left: 0;">
-                        
-        <div class="block-target" style="height: 6px; width: 6px; top: 0; left: 0;position: absolute;background: green;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 20px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 46px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; bottom: 0; left: 20px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 10px; left: 0;position: absolute;background: yellow;"></div>
-        <div style="height: 6px; width: 6px; top: 10px; right: 0;position: absolute;background: yellow;"></div>
-        <div style="height: 6px; width: 6px; top: 36px; right: 0;position: absolute;background: yellow;"></div>
-        
-        <p style="top: 10px; left: 20px;position: absolute;margin: 0;padding: 0;font-size: 12px;color: black;">Get Cell</p>
-        <p style="top: 24px; left: 20px;position: absolute; margin: 0;padding: 0;font-size: 9px;color: white;">Get Cell</p>
-    </div>
-</div>
-<p>This is a typical prototype building block. Some port are attached into this building block.<br />
-pIn and pTarget are at the top, pOut are at the bottom, bIn are on the left, and bOut are on the right.<br />
-In the middle of building block, the name of this building block is written in black font, and the name of this building block's prototype is written in white font.</p>
-
-<div style="background: #7f7f7f; padding: 20px; width: 500px;">
-    <div class="block-body" style="height: 72.0px; width: 196.0px;background: #8f8f8f;border: 1px solid #cfcfcf;position: relative; top: 0; left: 0;">
-        
-        <div style="height: 6px; width: 6px; top: 0; left: 20px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 46px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 72px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 98px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 124px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 0; left: 150px;position: absolute;background: blue;"></div>
-        <div style="height: 6px; width: 6px; top: 10px; left: 0;position: absolute;background: yellow;"></div>
-        <div style="height: 6px; width: 6px; top: 10px; right: 0;position: absolute;background: yellow;"></div>
-        <div style="height: 6px; width: 6px; top: 36px; right: 0;position: absolute;background: yellow;"></div>
-        
-        <p style="top: 10px; left: 20px;position: absolute;margin: 0;padding: 0;font-size: 12px;color: black;"><a href="/help/legend">vt2obj</a></p>
-        <p style="top: 24px; left: 20px;position: absolute; margin: 0;padding: 0;font-size: 9px;color: white;"></p>
-    </div>
-</div>
-<p>This is a typical behavior graph. It is very similar to prototype building block.<br />
-It don't have the name of prototype. Instead, you can click on the name to see what is inside this graph(jump into this graph).</p>
-
-<h3>Link</h3>
-
-<svg version="1.1" width="500px" height="350px" style="position: relative; top: 0; left: 0;background: #7f7f7f; padding: 20px;">
-    <line x1="0" y1="20" x2="100" y2="20" stroke="black" stroke-width="1px"></line>
-    <text x="50" y="20" fill="black" style="font-size: 12px; color: black;">0</text>
-    <text x="120" y="20" fill="black">bLink (BehaviorLink)</text>
-    <line x1="0" y1="70" x2="100" y2="70" stroke="blue" stroke-width="1px" stroke-dasharray="5, 1"></line>
-    <text x="120" y="70" fill="black">pLink (ParameterLink)</text>
-    <line x1="0" y1="120" x2="100" y2="120" stroke="cyan" stroke-width="1px" stroke-dasharray="5, 1"></line>
-    <text x="120" y="120" fill="black">eLink (ExportParameterLink)</text>
-
-    <line x1="0" y1="170" x2="100" y2="170" stroke="yellow" stroke-width="1px"></line>
-    <text x="50" y="170" fill="yellow" style="font-size: 12px;">0</text>
-    <text x="120" y="170" fill="black">Highlight bLink</text>
-    <line x1="0" y1="220" x2="100" y2="220" stroke="orange" stroke-width="1px" stroke-dasharray="5, 1"></line>
-    <text x="120" y="220" fill="black">Highlight pLink</text>
-    <line x1="0" y1="270" x2="100" y2="270" stroke="orangered" stroke-width="1px" stroke-dasharray="5, 1"></line>
-    <text x="120" y="270" fill="black">Highlight eLink</text>
-</svg>
-
-<h3>Operation</h3>
-<ul>
-    <li>You can highlight the associated links by clicking Block or BB, and click again to cancel the highlight.</li>
-    <li>You can double-click Block or prototoye BB to get the properties associated with it.</li>
-    <li>You can hover over the Block to view its name and type through tooltip.</li>
-</ul>
-
-<h2>Properties</h2>
-<p>Properties can be visited in Information & tools panel. It can display the information of the object currently being double-clicked.</p>
-
-<div style="margin: 5px;border: 1px solid gray;border-radius: 2px;padding: 5px; width: 400px;">
-    <p><code style="border: 1px solid black; border-radius: 2px;padding: 5px;margin: 5px;background: gray;color: white;">S</code><b>Rectangle/Box Mode</b><i>(176)</i></p>
-    <p>dump.data</p>
-    <pre style="border: 1px solid black;border-radius: 2px;padding: 5px;background: #3f3f3f;color: white;white-space: pre-wrap;word-wrap: break-word;">0x01, 0x00, 0x00, 0x00</pre>
-    <p>dump.length</p>
-    <pre style="border: 1px solid black;border-radius: 2px;padding: 5px;background: #3f3f3f;color: white;white-space: pre-wrap;word-wrap: break-word;">4</pre>
-</div>
-<p>This is a typical property unit. You may see more than 1 property unit in property list. A property unit may contain more than 1 key-value pair to describe it.<br />
-In the first line, the name of the current property unit (actually a pLocal) will be displayed. The number in brackets is CK_ID. If an S is displayed in front of it (as shown in the figure above), then it is also a setting.</p>
-
-</body>
-
-</html>

SuperScriptViewer/templates/index.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>Script Hierarchy</title>
-</head>
-
-<body>
-<h1>Script Hierarchy</h1>
-<p>Choose a script to read it.</p>
-<br />
-<br />
-{% for key, value in scripts.items() %}
-<h2>{{ key|e }}</h2>
-<ol>
-    {% for i in value %}
-    <li><a href="{{ "/viewer/%s"|format(i.id) }}">{{ i.name }}</a></li>
-    {% endfor %}
-</ol>
-{% endfor %}
-<br />
-<br />
-<p>Generated by SuperScriptMaterializer</p>
-<div style="display: flex; flex-flow: row; height: 50px;">
-    <p style="margin: 5px;"><a href="/help">Help</a></p>
-    <p style="margin: 5px;">|</p>
-    <p style="margin: 5px;"><a href="/about">About</a></p>
-</div>
-</body>
-
-</html>