finish sidepanel toggle. finish document

DEV_HLEP.md

@@ -0,0 +1,39 @@
+# Dev help
+
+This document introduces some guidelines used in the development of this program
+
+## Possible link
+
+One of the most important things in this program is to generate links, and the most difficult one is pLink. The following graph shows all the pLink situations that will be analyzed in this program.
+
+```
+ +--------------+              +-----------------+
+ | pLocal       +-------------->                 |
+ +--------------+              |                 |
+                               |  pIn (bb/oper)  |
+ +--------------+              |                 |
+ | pIn (bb)     +-------------->       /         |
+ +--------------+              |                 |
+                               |   pTarget (bb)  |
+ +----------------+            |                 |
+ | pOut (bb/oper) +------------>                 |
+ +----------------+            +-----------------+
+
+
+
+
++------------------+           +--------------+
+|                  +-----------> pOut (bb)    |
+|                  |           +--------------+
+| pOut (bb/oper)   |
+|                  |           +--------------+
+|                  +-----------> pLocal       |
++------------------+           +--------------+
+
+```
+
+If one terminal of the link is not in the current graph, then this terminal will create as a Shortcut. But if there is a node with the same CK_ID as the other terminal of the link in the pIO of the graph at this time, then an eLink should be created.
+
+## decorated.db format
+
+Todo...

README.md

@@ -2,6 +2,12 @@
 
 [中文文档](./README_ZH.md)
 
+---
+
+![preview_image](./preview.png)
+
+---
+
 The project consist of two parts:
 
   1. SuperScriptMaterializer - Custom Virtools Interface Plugin that allows you to export all scripts/schematics into a SQLite database file
@@ -13,11 +19,17 @@ The inspiration came from:
   - [BearKidsTeam/Script-Materializer](https://github.com/BearKidsTeam/Script-Materializer) - Allows exporting specific scripts into a JSON file
   - [BearKidsTeam/VirtoolsScriptDeobfuscation](https://github.com/BearKidsTeam/VirtoolsScriptDeobfuscation) - A custom interface plugin that loads `.CMO` files with hidden scripts and makes them visible and editable.
 
-**NOTE:** This project does not give ability to edit hidden scripts within the file. It simply exports and views.
+**NOTE:**
+
+* This project does not give ability to edit hidden scripts within the file. It simply exports and views.
+* The latest commit may not be stable to use, please visit the Release page to get a stable version.
+* The development cycle of this program is very long. If you use a version before the first official version, you need to rebuild all the data because the previous version is not compatible with the official version.
 
 ## Requirements
-  - Virtools Dev 3.5, 4.0, or 5.0 with SDK (May work for others)
+
+  - Virtools Dev 5.0 with SDK (May work for others, Virtools 4 has been tested and can be compiled and run without any modification)
   - Python 3.0 with Flask module
+  - Common browsers (except Safari)
   - Visual Studio 2015 with at least v140 toolset
 
 ## Build
@@ -38,31 +50,40 @@ The inspiration came from:
      - Linker -> Debugging -> Generate Program Database File
   8. Clean and Build as Release
 
-
-
 ## Usage
 
 ### Exporting Scripts from Virtools
 
   1. Make Sure Virtools Dev is closed.
-  2. Copy compiled SuperScriptMaterializer.dll into Virtools's InterfacePlugins folder.
+  2. Copy compiled SuperScriptMaterializer.dll into Virtools's InterfacePlugins folder. Copy `sqlite3.dll` you downloaded into Virtool's base folder (where `devr.exe` exist). If you use the packaged file on the Release page, just decompress it directly in the root directory of Virtools and allow folder merging and file overwriting.
-  3. Copy `sqlite3.dll` you downloaded into Virtool's base folder (where `devr.exe` exist)
+  3. Open Virtools and load a `.CMO` of your choice.
-  4. Open Virtools and load a `.CMO` of your choice.
+  4. Go to the menu bar and click `Super Script Materializer` and `Export all script`. Name it `export.db` and save it into `SuperScriptViewer` folder
-  5. Go to the menu bar and click `Super Script Materializer` and `Export all script`. Name it `export.db` and save it into `SuperScriptViewer` folder
+  5. Go to the menu bar and click `Super Script Materializer` and `Export environment`. Name it `env.db` and save it into `SuperScriptViewer` folder
-  6. Go to the menu bar and click `Super Script Materializer` and `Export environment`. Name it `env.db` and save it into `SuperScriptViewer` folder
 
 ### Viewing Exported Databases
+
   1. Run the viewer by `python3 SuperScriptViewer.py`
-  2. It will generate a unique dectorated database (`decorated.db`) used for viewing based on `export.db` and `env.db`
+  2. It will generate a unique decorated database (`decorated.db`) used for viewing based on `export.db` and `env.db`
   3. Once generated, a webpage will be hosted (default 127.0.0.1:5000) to view all graphs.
 
 There is advanced command line switches if needed for the SuperScriptViewer
   - `-i filename.db` specify an input file to be used as `export.db`
   - `-e filename.db` specify an input file to be used as `env.db`
   - `-o filename.db` specify an output file to generate `decorated.db`. If it already exists, it will used that instead of generating a new one.
+  - `-c encoding_name` specify database encoding. The list of supported encodings can be viewed [here](https://docs.python.org/3/library/codecs.html#standard-encodings)
   - `-f` forces the output database to be regenerated (useful if you are unsure if decorated.db matches what export.db and env.db used)
 
+A document instructing you how to use the SuperScriptViewer is built into the SuperScriptViewer and can be viewed from the Help page.
+
 ## Troubleshooting
 
-  - If `SuperScriptViewer.py` displays `TEXT` type decoding error, you will need to modify `CustomConfig.py` and edit the `database_encoding` to whatever encoding system your OS uses since Virtools uses multi-byte encoding and depends on your system's locale.
+  - If `SuperScriptViewer.py` displays `TEXT` type decoding error, you will need to use switch `-c` to whatever encoding system your OS uses since Virtools uses multi-byte encoding and depends on your system's locale. It should be noted that the specified encoding is not the current code page of your computer, but the code page of the author who made this Virtools document.
-  - If Virtools closes upon exporting any databases, please create an issues page noting what Virtools version you have and a link to your file you used to export.
+  - If Virtools or SuperScriptViewer show an error window or message, please create an issues page noting what Virtools version you have, a link to your file you used to export and the error message.
+
+## Development plan
+
+In subsequent versions, the following features will be gradually added:
+
+* Current page search and global search
+* Shortcut tracking
+* Move Block and BB in Viewer

README_ZH.md

@@ -2,6 +2,12 @@
 
 [English document](./README.md)
 
+---
+
+![preview_image](./preview.png)
+
+---
+
 超级Virtools脚本物化器（机翻（确信））
 
 将Virtools文档中的所有脚本导出成一个SQLite数据库文件，然后经过Python进行排布处理，最后提供一个本地Web前端查看脚本。这同样适用于`Script Hidden`的Virtools脚本，也适用于其中含有不可展开的`Behavior Graph`的脚本。
@@ -12,32 +18,35 @@
 
 本项目分为2个部分，`SuperScriptMaterializer`是一个C++工程，将生成一个Virtools界面插件用于导出初步数据，`SuperScriptViewer`是一个Python工程，将解析导出的数据，然后使用Flask提供一个本地Web界面进行脚本查看。
 
-此项目仍在开发。
+当前最新的commit并不一定可以稳定使用，请访问Release界面获取可以稳定使用的版本。且本程序的开发周期很长，如果您使用了第一个正式版之前的版本，那么您需要重新构建所有数据，因为之前的版本与正式版本不兼容。
 
 ## 使用方法
 
 ### 基本方法
 
-将Virtools插件投入`InterfacePlugins`目录下，将`sqlite3.dll`和`Dev.exe`放在同一目录。然后启动Virtools，打开需要解析的文档，点击菜单栏的`Super Script Materializer`-`Export all script`，选择要保存到的文件，然后等待Virtools提示你已经导出完成。
+将Virtools插件投入`InterfacePlugins`目录下，将`sqlite3.dll`和`Dev.exe`放在同一目录。如果你使用了Release页面的打包文件，则直接在Virtools根目录解压然后允许合并和覆盖即可。然后启动Virtools，打开需要解析的文档，点击菜单栏的`Super Script Materializer`-`Export all script`，保存为`export.db`，然后等待Virtools提示你已经导出完成。然后同样的操作执行`Super Script Materializer`-`Export environment`，并将其保存为`env.db`。
 
-将导出文件重命名为`export.db`并和`SuperScriptViewer.py`放在一起。然后在此目录中运行`python ./SuperScriptViewer.py`，等待Python交互界面提示可以打开本地的网页即可。
+将`export.db`和`env.db`与`SuperScriptViewer.py`放在一起。然后在此目录中运行`python ./SuperScriptViewer.py`，等待Python交互界面提示可以打开本地的网页即可。
 
 `SuperScriptViewer.py`具有一些命令行开关：
 
 - `-i`：指定输入的`export.db`
 - `-o`：指定输出的`decorated.db`，如果已经存在将不考虑输入，直接使用输出数据库呈现
 - `-e`：指定输入的`env.db`，环境数据库
+- `-c`：指定数据库编码，可用的编码表可以在[这里](https://docs.python.org/3/library/codecs.html#standard-encodings)查看
 - `-f`：无参数，用于强制重新生成输出数据库，无论输出数据库是否存在
 
 以上选项在基本使用中应该不会用到，因此按上述规则直接放置好文件直接运行即可。
 
+一份指导你如何使用Viewer的文档已内置在Viewer中，可以从Help页面进行查看
+
 ### 使用注意
 
-- 您需要先安装Virtools, Python和任意一种浏览器才能使用本工程。Python需要先安装`Flask`库。
+- 您需要先安装Virtools 5, Python和任意一种浏览器才能使用本工程。Python需要先安装`Flask`库。浏览器建议使用Chrome或Firefox，本程序不支持Safari浏览器。
-- 导出插件目前只支持Virtools 5，后期会支持Virtools 3.5
+- 导出插件目前只支持Virtools 5，但Virtools 4已经过测试可以无修改编译运行。
-- 导出插件选择完文件后卡住，或者Python交互界面弹出错误堆栈，这可能是设计失误，请附带您引起bug的文件提交bug
+- 导出插件选择完文件后弹出错误，或者Python交互界面弹出错误，请附带您引起bug的文件以及错误窗口的内容提交bug
-- 如果Python交互界面提示数据库`TEXT`类型解码失败，那么可能您需要手动在`CustomConfig.py`中的`database_encoding`中指定数据库文本解码方式。因为Virtools使用多字节编码，依赖于当前操作系统的代码页，`SuperScriptMaterializer`做了特殊获取以保证大多数计算机可以直接运行，但仍然不能排除一些特殊情况。
+- 如果Python交互界面提示数据库`TEXT`类型解码失败，或者解析的字符出现乱码，那么可能您需要手动使用`-c`开关指定数据库文本解码方式。因为Virtools使用多字节编码，依赖于当前操作系统的代码页，`SuperScriptMaterializer`做了特殊获取以保证大多数计算机可以直接运行，但仍然不能排除一些特殊情况。需要注意的是，指定的编码不是你计算机当前的代码页，而是制作这个Virtools文档的作者的计算机的代码页。
-- 如果您使用本工程的Release页面中提供的已编译好的Virtools界面插件（现在因为仍然在开发所以没有），您需要放入的`sqlite3.dll`版本应为`sqlite-dll-win32-x86-3310100`
+- 如果您使用本工程的Release页面中提供的已编译好的Virtools界面插件，您需要放入的`sqlite3.dll`版本应为`sqlite-dll-win32-x86-3310100`
 
 ## 编译
 
@@ -45,8 +54,10 @@
 
 需要手动配置Virtools插件的编译参数，例如包含路径等，需要指向您自己的Virtools SDK。对于SQLite SDK，您可以从[sqlite.org](http://www.sqlite.org/)下载，然后使用Visual C++的工具集执行`LIB /DEF:sqlite3.def /machine:IX86`以获取可以用于编译的文件。
 
-## 下一版本计划
+## 开发计划
 
-第一个版本的开发即将告一段落，下一版本的开放将会加入一直搁置的移动功能。
+在之后的版本中，以下功能将逐步加入：
 
-至于之后的企划，可能只包含修复各种Bug的内容，因为已做完应该做完的事情了。
+* 当前页面搜索和全局搜索
+* Shortcut追踪
+* 在Viewer中移动Block和BB

SuperScriptViewer/SuperScriptViewer.pyproj

@@ -12,7 +12,8 @@
     <Name>SuperScriptViewer</Name>
     <RootNamespace>SuperScriptViewer</RootNamespace>
     <LaunchProvider>Standard Python launcher</LaunchProvider>
-    <CommandLineArguments>-f</CommandLineArguments>
+    <CommandLineArguments>
+    </CommandLineArguments>
     <EnableNativeCodeDebugging>False</EnableNativeCodeDebugging>
   </PropertyGroup>
   <PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">

SuperScriptViewer/static/viewer.js

@@ -17,6 +17,17 @@ $(document).ready(function () {
         $(".link-elink").hide();
         $(".link-plink").hide();
     }
+
+    // read sidepanel display property
+    var sidepanelDisplay = localstorageAssist_Get("ssm-settings-sidepanelDisplay", "true") == "true";
+    if (sidepanelDisplay){
+        $("#sidepanelContainer").show();
+        $("#sidepanelToggle").text(">>>");
+    } else {
+        $("#sidepanelContainer").hide();
+        $("#sidepanelToggle").text("<<<");
+    }
+        
 });
 function settingChange(target) {
     newValue = $("#sidepanel-display-" + target).prop("checked");
@@ -33,6 +44,16 @@ function settingChange(target) {
         }
     }
 }
+function sidepanelDisplayChange() {
+    $("#sidepanelContainer").toggle();
+    if ($("#sidepanelContainer").is(":hidden")) {
+        $("#sidepanelToggle").text("<<<");
+        localstorageAssist_Set("ssm-settings-sidepanelDisplay", false)
+    } else {
+        $("#sidepanelToggle").text(">>>");
+        localstorageAssist_Set("ssm-settings-sidepanelDisplay", true)
+    }
+}
 function localstorageAssist_Get(index, defaultValue) {
     var cache = localStorage.getItem(index);
     if (cache == null) {

SuperScriptViewer/templates/viewer.html

@@ -11,8 +11,9 @@
     <script src="{{tabcontrol_js}}"></script>
 </head>
 
-<body style="display: flex; flex-flow: row; height: 100%; width: 100%; margin: 0; padding: 0;" onkeydown="keyboardNavigation(true);" onkeyup="keyboardNavigation(false);">
+<body style="display: flex; flex-flow: row; height: 100%; width: 100%; margin: 0; padding: 0;">
-    <div style="display: flex; flex-flow: column; height: 100%; width: 80%; margin: 0; padding: 0;">
+    <div style="display: flex; flex-flow: column; height: 100%; width: 100%; margin: 0; padding: 0;">
+        <div style="display: flex; flex-flow: row; width: 100%;">
             <div id="hamburgerMenu" style="display: flex; background: #cfcfcf; flex-flow: row; width: 100%; height: 50px; overflow: scroll;">
 
                 <p class="hamburger"><a href="/index"><b>Script Hierarchy</b></a></p>
@@ -26,6 +27,9 @@
                 <p class="hamburger"><b>{{ hamburgerCurrent|e  }}</b></p>
 
             </div>
+            <button id="sidepanelToggle" style="width: 50px;" title="Toggle sidepanel display" onclick="sidepanelDisplayChange();"></button>
+        </div>
+
 
         <div id="graphContainer" style="background: #7f7f7f; width: 100%; height: 100%; overflow: scroll; position: relative;">
             <div>
@@ -81,7 +85,7 @@
         </div>
     </div>
 
-    <div id="sidepanelContainer" style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 20%; margin: 0; padding: 0; border-left: 1px solid black;">
+    <div id="sidepanelContainer" style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 25%; margin: 0; padding: 0; border-left: 1px solid black;">
         <div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
             <div id="tabnavigation_1_1" class="tabnavigation_1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 1);"><b style="margin: 0;">Properties</b></div>
             <div id="tabnavigation_1_2" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 2);"><b style="margin: 0;">Display</b></div>
@@ -107,8 +111,8 @@
 
         <div id="tabpanel_1_3" class="tabpanel_1" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; overflow-x: hidden; display: none;">
             <p style="margin: 5px;">Object finder:<br />
-                <input type="text" id="sidepanel-tools-objfinder"></input><br />
+                <input type="text" id="sidepanel-tools-objfinder" disabled="true"></input><br />
-                <button style="height: 30px; margin: 10px 0 10px 0;">Find</button>
+                <button style="height: 30px; margin: 10px 0 10px 0;" disabled="true">Find</button>
             </p>
             <p style="margin: 5px;">Misc:<br />
                 <button style="height: 30px; margin: 10px 0 10px 0;" onclick="window.open(&quot;/help&quot;);">Help</button><br />