redesign url and add settings storage

SuperScriptViewer/ServerCore.py

@@ -4,6 +4,7 @@ from flask import render_template
 from flask import url_for
 from flask import request
 from flask import abort
+from flask import redirect
 
 from functools import reduce
 import sqlite3
@@ -12,6 +13,7 @@ import ServerStruct as ss
 
 app = Flask(__name__)
 
+# =============================================database
 def get_db():
     db = getattr(g, '_database', None)
     if db is None:
@@ -24,6 +26,7 @@ def close_connection(exception):
     if db is not None:
         db.close()
 
+# =============================================template func
 @app.template_global(name = 'pinDecoder')
 def block_pin_decoder(target):
     return json.loads(target)
@@ -33,7 +36,20 @@ def block_pin_decoder2(target):
     vab = json.loads(target)
     return [vab['name'], vab['type']]
 
+# =============================================route
 @app.route('/', methods=['GET'])
+def nospecHandle():
+    return redirect(url_for('indexHandle'))
+
+@app.route('/help', methods=['GET'])
+def helpHandle():
+    return render_template("help.html")
+
+@app.route('/about', methods=['GET'])
+def aboutHandle():
+    return render_template("about.html")
+
+@app.route('/index', methods=['GET'])
 def indexHandle():
     cur = get_db().cursor()
     cur.execute("SELECT [graph], [graph_name], [belong_to] FROM graph WHERE [index] != -1 ORDER BY [belong_to], [index] ASC;")
@@ -46,11 +62,8 @@ def indexHandle():
 
     return render_template('index.html', scripts = data)
 
-@app.route('/<path:scriptPath>', methods=['GET'])
+@app.route('/viewer/<path:scriptPath>', methods=['GET'])
-def scriptHandle(scriptPath):
+def viewerHandle(scriptPath):
-    # fuck favition.ico
-    if '.' in scriptPath:
-        abort(404)
 
     # comput hamburger
     pathSlice = scriptPath.split('/')
@@ -96,8 +109,8 @@ def scriptHandle(scriptPath):
                     cells = dbCells,
                     links = dbLinks)
 
-@app.route('/<path:scriptPath>', methods=['POST'])
+@app.route('/viewer/<path:scriptPath>', methods=['POST'])
-def infoMoveHandle(scriptPath):
+def actionHandle(scriptPath):
     cache = request.form['operation']
     if cache == "info":
         return infoHandle(request.form['target'])

SuperScriptViewer/static/site.js

@@ -1,11 +1,59 @@
-previousHighlight = "";
+//=======================================settings
+currentSettings = {
+    "plink": true,
+    "properties": true,
+    "highlight": true,
+    "keyboard": true,
+    "move": true
+};
+$(document).ready(function () {
+    //read settings and apply it
+    for (var key in currentSettings) {
+        currentSettings[key] = localstorageAssist_Get("ssm-settings-" + key, "true") == "true";
+        if (currentSettings[key]) $("#sidepanel-display-" + key).prop("checked", true);
+        else $("#sidepanel-display-" + key).removeProp("checked");
+    }
+    //additional settings
+    if (!currentSettings["plink"]) {
+        $(".link-elink").hide();
+        $(".link-plink").hide();
+    }
+});
+function settingChange(target) {
+    newValue = $("#sidepanel-display-" + target).prop("checked");
+    currentSettings[target] = newValue;
+    localstorageAssist_Set("ssm-settings-" + target, newValue);
 
+    if (target == "plink") {
+        if (currentSettings["plink"]) {
+            $(".link-elink").show();
+            $(".link-plink").show();
+        } else {
+            $(".link-elink").hide();
+            $(".link-plink").hide();
+        }
+    }
+}
+function localstorageAssist_Get(index, defaultValue) {
+    var cache = localStorage.getItem(index);
+    if (cache == null) {
+        localstorageAssist_Set(index, defaultValue);
+        return defaultValue;
+    } else return cache;
+}
+function localstorageAssist_Set(index, value) {
+    localStorage.setItem(index, value);
+}
+
+
+//=======================================internal event
+previousHighlight = "";
 function highlightLink(target) {
     realTarget = ".target" + target
 
     if (previousHighlight != "") {
         //need restore
-        $(previousHighlight).each(function() {
+        $(previousHighlight).each(function () {
             if ($(this).hasClass("link-blink")) {
                 $(this).attr("stroke", "black")
             }
@@ -26,7 +74,7 @@ function highlightLink(target) {
         previousHighlight = "";
     } else {
         //apply new highlight
-        $(realTarget).each(function() {
+        $(realTarget).each(function () {
             if ($(this).hasClass("link-blink")) {
                 $(this).attr("stroke", "yellow")
             }
@@ -54,14 +102,14 @@ function queryInfo(obj) {
             operation: "info",
             target: obj
         },
-        function(data, status) {
+        function (data, status) {
             //set id
             $("#sidepanel-properties-id").text(obj);
 
             //set data
             $("#sidepanel-properties-container").empty()
             for (var key in data) {
-                $("#sidepanel-properties-container").append("<p><b>" + key + ":</b><br /><pre>" + data[key] +"</pre></p>")
+                $("#sidepanel-properties-container").append("<p><b>" + key + ":</b><br /><pre>" + data[key] + "</pre></p>")
             }
         });
 }
@@ -72,26 +120,26 @@ function sidePanelSwitcher(target) {
     $("#sidepanel-properties").hide();
     $("#sidepanel-display").hide();
     $("#sidepanel-tools").hide();
-    $(".tabitem").each(function() {
+    $(".tabitem").each(function () {
         $(this).removeClass("tabitem-activated").addClass("tabitem-deactivated");
     });
 
     switch (target) {
         case 0:
             $("#sidepanel-properties").show();
-            $(".tabitem1").each(function() {
+            $(".tabitem1").each(function () {
                 $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
             });
             break;
         case 1:
             $("#sidepanel-display").show();
-            $(".tabitem2").each(function() {
+            $(".tabitem2").each(function () {
                 $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
             });
             break;
         case 2:
             $("#sidepanel-tools").show();
-            $(".tabitem3").each(function() {
+            $(".tabitem3").each(function () {
                 $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
             });
             break;

SuperScriptViewer/templates/about.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>About Super Script Materializer</title>
+</head>
+
+<body>
+<h1>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 />
+This also is the meaning of this app's icon.</p>
+<br />
+<p><a href="https://github.com/yyc12345/SuperScriptMaterializer">SuperScriptMaterializer</a>. All codes are under GPLv3.<br />
+Web interface 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>.</p>
+</body>
+
+</html>

SuperScriptViewer/templates/index.html

@@ -15,16 +15,18 @@
 <h2>{{ key|e }}</h2>
 <ol>
     {% for i in value %}
-    <li><a href="{{ "./%s"|format(i.id) }}">{{ i.name }}</a></li>
+    <li><a href="{{ "/viewer/%s"|format(i.id) }}">{{ i.name }}</a></li>
     {% endfor %}
 </ol>
 {% endfor %}
 <br />
 <br />
-<p>Generated by <a href="https://github.com/yyc12345/SuperScriptMaterializer">SuperScriptMaterializer</a>. All codes are under GPLv3.<br />
+<p>Generated by SuperScriptMaterializer</p>
-Powered by <a href="https://github.com/pallets/flask">Flask</a>.<br />
+<div style="display: flex; flex-flow: row; height: 50px;">
-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 />
+    <p style="margin: 5px;"><a href="/help">Help</a></p>
-Thank <a href="https://github.com/chirs241097">chirs241097</a> and <a href="https://github.com/instr3">2jjy</a>.</p>
+    <p style="margin: 5px;">|</p>
+    <p style="margin: 5px;"><a href="/about">About</a></p>
+</div>
 </body>
 
 </html>

SuperScriptViewer/templates/viewer.html

@@ -13,11 +13,11 @@
     <div style="display: flex; flex-flow: column; height: 100%; width: 80%; margin: 0; padding: 0;">
         <div style="display: flex; background: #cfcfcf; flex-flow: row; width: 100%; height: 50px; overflow: scroll;">
 
-            <p class="hamburger"><a href="/"><b>Script Hierarchy</b></a></p>
+            <p class="hamburger"><a href="/index"><b>Script Hierarchy</b></a></p>
 
             {% for i in hamburgerHistory %}
             <p class="hamburger">&gt;&gt;</p>
-            <p class="hamburger"><a href="{{ i.path }}">{{ i.name|e }}</a></p>
+            <p class="hamburger"><a href="{{ "/viewer%s"|format(i.path) }}">{{ i.name|e }}</a></p>
             {% endfor %}
 
             <p class="hamburger">&gt;&gt;</p>
@@ -47,7 +47,7 @@
                     {% endfor %}
 
                     {% if i[13] != -1 %}
-                    <p class="block-expandable-text" style="top: 10px; left: 20px;"><a href="{{ "/%s/%s"|format(currentPath, i[13]) }}">{{ i[2]|e }}</a></p>
+                    <p class="block-expandable-text" style="top: 10px; left: 20px;"><a href="{{ "/viewer/%s/%s"|format(currentPath, i[13]) }}">{{ i[2]|e }}</a></p>
                     {% else %}
                     <p class="block-text" style="top: 10px; left: 20px;">{{ i[2]|e }}</p>
                     {% endif %}
@@ -94,12 +94,13 @@
 
         <div id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
             <p style="margin: 5px;">Render:<br />
-                <input type="checkbox" id="sidepanel-display-plink" value="1">Show pLink and eLink</input>
+                <input type="checkbox" id="sidepanel-display-plink" value="1" onclick="settingChange(&quot;plink&quot;);">Show pLink and eLink</input>
             </p>
             <p style="margin: 5px;">Action:<br />
-                <input type="checkbox" id="sidepanel-display-property" value="1">Interactive property inspector</input><br />
+                <input type="checkbox" id="sidepanel-display-properties" value="1" onclick="settingChange(&quot;properties&quot;);">Interactive property inspector</input><br />
-                <input type="checkbox" id="sidepanel-display-highlight" value="1">Highlight focused object</input><br />
+                <input type="checkbox" id="sidepanel-display-highlight" value="1" onclick="settingChange(&quot;highlight&quot;);">Highlight focused object</input><br />
-                <input type="checkbox" id="sidepanel-display-move" value="1">Move objects</input>
+                <input type="checkbox" id="sidepanel-display-keyboard" value="1" onclick="settingChange(&quot;keyboard&quot;);">Use keyboard to move viewer</input><br />
+                <input type="checkbox" id="sidepanel-display-move" value="1" onclick="settingChange(&quot;move&quot;);">Move objects</input>
             </p>
         </div>
 
@@ -109,8 +110,8 @@
                 <button style="height: 30px; margin: 10px 0 10px 0;">Find</button>
             </p>
             <p style="margin: 5px;">Misc:<br />
-                <button style="height: 30px; margin: 10px 0 10px 0;">Help</button><br />
+                <button style="height: 30px; margin: 10px 0 10px 0;" onclick="window.open(&quot;/help&quot;);">Help</button><br />
-                <button style="height: 30px; margin: 10px 0 10px 0;">About</button>
+                <button style="height: 30px; margin: 10px 0 10px 0;" onclick="window.open(&quot;/about&quot;);">About</button>
             </p>
         </div>
     </div>