fix viewer backend for convenitnt test and do some frontend work
16
SuperScriptViewer/static/css/global.css
Normal file
@ -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;
|
||||
}
|
39
SuperScriptViewer/static/html/about.html
Normal file
@ -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>
|
173
SuperScriptViewer/static/html/help.html
Normal file
@ -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>
|
32
SuperScriptViewer/static/html/index.html
Normal file
@ -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>
|
Before Width: | Height: | Size: 1.7 KiB |
3
SuperScriptViewer/static/imgs/document.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 184 B |
3
SuperScriptViewer/static/imgs/environment.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 752 B |
3
SuperScriptViewer/static/imgs/folder.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 192 B |
BIN
SuperScriptViewer/static/imgs/icon.jpg
Normal file
After Width: | Height: | Size: 13 KiB |
3
SuperScriptViewer/static/imgs/script.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 318 B |
3
SuperScriptViewer/static/imgs/table.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 238 B |
12
SuperScriptViewer/static/js/global.js
Normal file
@ -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');
|
||||
});
|
||||
});
|
||||
|
23
SuperScriptViewer/static/templates/about.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>About Super Script Materializer</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1><img src="{{ static_icon }}" 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>
|
||||
<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>
|
||||
<br />
|
||||
<p>Current Super Script Materializer version: 1.0</p>
|
||||
</body>
|
||||
|
||||
</html>
|
31
SuperScriptViewer/static/templates/help.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Super Script Viewer Help</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Super Script Viewer Help</h1>
|
||||
<p>This page is help center, providing useful link for some detailed help page. Choose what you want to use and enter corresponding page.</p>
|
||||
<br />
|
||||
<br />
|
||||
<h2>Converter</h2>
|
||||
<ul>
|
||||
<li><a href="/help/converter">Converter</a>: The page containing converter which can convert the data with various style for some convenient operations.</li>
|
||||
</ul>
|
||||
<h2>Environment database query</h2>
|
||||
<ul>
|
||||
<li><a href="/help/env">Environment data query</a>: The page which can query environment data.</li>
|
||||
</ul>
|
||||
<h2>Viewer legend</h2>
|
||||
<ul>
|
||||
<li><a href="/help/legend">Viewer legend</a>: The page which introduce how to use viewer page.</li>
|
||||
</ul>
|
||||
<br />
|
||||
<br />
|
||||
<!-- todo: finish this-->
|
||||
</body>
|
||||
|
||||
</html>
|
133
SuperScriptViewer/static/templates/help/converter.html
Normal file
@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Help - Converter</title>
|
||||
<link rel="stylesheet" href="{{tabcontrol_css}}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
|
||||
<script src="{{tabcontrol_js}}"></script>
|
||||
<script src="{{converter_js}}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Converter</h1>
|
||||
<p>This page provide some useful converter for your decoding work.</p>
|
||||
<br />
|
||||
|
||||
<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%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 1);"><b>Reverse C style byte array</b></div>
|
||||
<div id="tabnavigation_1_2" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 2);"><b>C style byte array to HEX</b></div>
|
||||
<div id="tabnavigation_1_3" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 3);"><b>C style byte array to DEC</b></div>
|
||||
<div id="tabnavigation_1_4" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 4);"><b>Lowcase upcase converter</b></div>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_1" class="tabpanel_1">
|
||||
<p>This converter will reverse your inputed C style byte array. Actually, it take responsibility for the convert between big-endian and little-endian.<br />
|
||||
Typical and legal input just like this: <code>0x00, 0xBb, 0xff, 0xFF</code><br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv1Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Input</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv1_I2O();">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">Output</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv1Output" style="width: 100%; height: 100%; resize: none;" readonly="true"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_2" class="tabpanel_1" style="display: none;">
|
||||
<p>This converter will converte provided C style byte array into HEX number. It is double interactive.<br />
|
||||
Acceptable byte array should follow little-endian format.<br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv2Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Byte array</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv2_I2O();">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;" onclick="doConv2_O2I();">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">HEX number</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv2Output" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_3" class="tabpanel_1" style="display: none;">
|
||||
<p>This converter will converte provided C style byte array into DEC number. It is double interactive.<br />
|
||||
Acceptable byte array should follow little-endian format.<br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv3Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Byte array</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv3_I2O();">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;" onclick="doConv3_O2I();">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">DEC number</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv3Output" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_4" class="tabpanel_1" style="display: none;">
|
||||
<p>This converter will provide the convert between lowcase and upcase string. It is double interactive.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv4Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Lowcase</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv4_I2O();">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;" onclick="doConv4_O2I();">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">Upcase</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea id="conv4Output" style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
65
SuperScriptViewer/static/templates/help/env.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Help - Environment data query</title>
|
||||
<link rel="stylesheet" href="{{tabcontrol_css}}">
|
||||
<link rel="stylesheet" href="{{env_css}}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
|
||||
<script src="{{tabcontrol_js}}"></script>
|
||||
<script src="{{env_js}}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Environment data query</h1>
|
||||
<p>This page can query environment data.</p>
|
||||
<br />
|
||||
|
||||
|
||||
<div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
|
||||
{% for item in database_data %}
|
||||
<div id="tabnavigation_1_{{ loop.index }}" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, {{ loop.index }});"><b>{{ item.name }}</b></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% for item in database_data %}
|
||||
<div id="tabpanel_1_{{ loop.index }}" class="tabpanel_1" style="display: none;">
|
||||
<p>Query field:</p>
|
||||
<table id="queryTable_{{ loop.index }}" border="1" cellspacing="0" cellpadding="5" style="margin: 10px;">
|
||||
<tr>
|
||||
<td><b>Use this</b></td>
|
||||
<td><b>Field name</b></td>
|
||||
<td style="width: 150px;"><b>Value</b></td>
|
||||
<td><b>Example</b></td>
|
||||
<td><b>Description</b></td>
|
||||
</tr>
|
||||
|
||||
{% for innerItem in item.data %}
|
||||
<tr>
|
||||
<td><input type="checkbox" value="1"></input></td>
|
||||
<td queryName="{{ innerItem[0]|e }}">{{ innerItem[0]|e }}</td>
|
||||
<td><input type="text"></input></td>
|
||||
<td>{{ innerItem[1]|e }}</td>
|
||||
<td>{{ innerItem[2]|e }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
<button style="padding: 5px;" onclick="doQuery({{ loop.index }}, "{{ item.queryKey }}");">Query</button>
|
||||
<p>Query result:</p>
|
||||
<p id="resultTableOverflow_{{ loop.index }}" style="color: red; display: none;">The count of query result is more than 100 items(Only the first 100 items will be shown). Please give more limitation.</p>
|
||||
|
||||
<table id="resultTable_{{ loop.index }}" class="envOutput" cellspacing="0" cellpadding="5" style="margin: 10px;">
|
||||
<tr>
|
||||
{% for innerItem in item.data %}
|
||||
<td>{{ innerItem[0]|e }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
18
SuperScriptViewer/static/templates/help/legend.html
Normal file
@ -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>
|
8
SuperScriptViewer/static/templates/index_entry.tmpl
Normal file
@ -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 %}
|
126
SuperScriptViewer/static/templates/viewer.html
Normal file
@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="height: 100%; margin: 0; padding: 0;">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Script Viewer</title>
|
||||
<link rel="stylesheet" href="{{viewer_css}}">
|
||||
<link rel="stylesheet" href="{{tabcontrol_css}}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
|
||||
<script src="{{viewer_js}}"></script>
|
||||
<script src="{{tabcontrol_js}}"></script>
|
||||
</head>
|
||||
|
||||
<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: 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>
|
||||
|
||||
{% for i in hamburgerHistory %}
|
||||
<p class="hamburger">>></p>
|
||||
<p class="hamburger"><a href="{{ "/viewer%s"|format(i.path) }}">{{ i.name|e }}</a></p>
|
||||
{% endfor %}
|
||||
|
||||
<p class="hamburger">>></p>
|
||||
<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>
|
||||
{# blocks content #}
|
||||
{% for i in blocks %}
|
||||
<div class="block-body" style="height: {{ i[12] }}px; width: {{ i[11] }}px; top: {{ i[10] }}px; left: {{ i[9] }}px;" ondblclick="queryInfo(1,{{ i[1] }});" onclick="highlightLink({{ i[1] }});">
|
||||
{% if i[4] != '{}' %}
|
||||
<div class="block-target" title="{{ "Name: %s\nType: %s"|format(*pinDecoder2(i[4])) }}" style="height: 6px; width: 6px; top: 0; left: 0;" onclick="highlightLink({{ pinDecoder(i[4]).id }});"></div>
|
||||
{% endif %}
|
||||
{% for pin in pinDecoder(i[5]) %}
|
||||
<div class="block-p" title="{{ "Name: %s\nType: %s"|format(pin.name, pin.type) }}" style="height: 6px; width: 6px; top: 0; left: {{ 20 + loop.index0 * ( 6 + 20) }}px;" onclick="highlightLink({{ pin.id }});"></div>
|
||||
{% endfor %}
|
||||
{% for pout in pinDecoder(i[6]) %}
|
||||
<div class="block-p" title="{{ "Name: %s\nType: %s"|format(pout.name, pout.type) }}" style="height: 6px; width: 6px; bottom: 0; left: {{ 20 + loop.index0 * ( 6 + 20) }}px;" onclick="highlightLink({{ pout.id }});"></div>
|
||||
{% endfor %}
|
||||
{% for bin in pinDecoder(i[7]) %}
|
||||
<div class="block-b" title="{{ "Name: %s\nType: %s"|format(bin.name, bin.type) }}" style="height: 6px; width: 6px; top: {{ 10 + loop.index0 * ( 6 + 20) }}px; left: 0;" onclick="highlightLink({{ bin.id }});"></div>
|
||||
{% endfor %}
|
||||
{% for bout in pinDecoder(i[8]) %}
|
||||
<div class="block-b" title="{{ "Name: %s\nType: %s"|format(bout.name, bout.type) }}" style="height: 6px; width: 6px; top: {{ 10 + loop.index0 * ( 6 + 20) }}px; right: 0;" onclick="highlightLink({{ bout.id }});"></div>
|
||||
{% endfor %}
|
||||
|
||||
{% if i[13] != -1 %}
|
||||
<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 %}
|
||||
<p class="block-asstext" style="top: 24px; left: 20px;">{{ i[3]|e }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# cells content #}
|
||||
{% for i in cells %}
|
||||
<div class="{% if i[6] == 0 %}cell-plocal{% elif i[6] == 1 %}cell-shortcut{% elif i[6] == 2 %}cell-pio{% elif i[6] == 3 %}cell-bio{% else %}cell-ptarget{% endif %}"
|
||||
style="height: {% if i[6] == 2 or i[6] == 3 %}6{% else %}5{% endif %}px; width: {% if i[6] == 2 or i[6] == 3 %}6{% else %}15{% endif %}px; top: {{ i[5] }}px; left: {{ i[4] }}px;"
|
||||
title="{{ "Name: %s\nType: %s"|format(i[2], i[3]) }}" ondblclick="queryInfo(0,{{ i[1] }});" onclick="highlightLink({{ i[1] }});"></div>
|
||||
{% endfor %}
|
||||
|
||||
<svg version="1.1" width="{{ gWidth }}px" height="{{ gHeight }}px" style="position: absolute; top: 0; left: 0;pointer-events: none;">
|
||||
{# links content #}
|
||||
{% for i in links %}
|
||||
{% if i[1] == -2 %}
|
||||
<line class="link-elink target{{ i[2] }} target{{ i[3] }} target{{ i[4] }} target{{ i[5] }}" x1="{{ i[10] }}" y1="{{ i[11] }}" x2="{{ i[12] }}" y2="{{ i[13] }}" stroke="cyan" stroke-width="1px" stroke-dasharray="5, 1"></line>
|
||||
{% elif i[1] == -1 %}
|
||||
<line class="link-plink target{{ i[2] }} target{{ i[3] }} target{{ i[4] }} target{{ i[5] }}" x1="{{ i[10] }}" y1="{{ i[11] }}" x2="{{ i[12] }}" y2="{{ i[13] }}" stroke="blue" stroke-width="1px" stroke-dasharray="5, 1"></line>
|
||||
{% else %}
|
||||
<line class="link-blink target{{ i[2] }} target{{ i[3] }} target{{ i[4] }} target{{ i[5] }}" x1="{{ i[10] }}" y1="{{ i[11] }}" x2="{{ i[12] }}" y2="{{ i[13] }}" stroke="black" stroke-width="1px"></line>
|
||||
<text class="link-blinkDelay target{{ i[2] }} target{{ i[3] }} link-delay target{{ i[4] }} target{{ i[5] }}" x="{{ (i[10] + i[12]) / 2 }}" y="{{ (i[11] + i[13]) / 2 }}" fill="black">{{ i[1] }}</text>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div id="tabnavigation_1_3" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 3);"><b style="margin: 0;">Tools</b></div>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_1" class="tabpanel_1" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column; overflow-x: hidden;">
|
||||
<p style="margin: 5px;" id="sidepanel-properties-target">Selected target: <b></b></p>
|
||||
<div id="sidepanel-properties-container" style="width: 100%; height: 100%; overflow: scroll;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_2" class="tabpanel_1" id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; overflow-x: hidden; display: none;">
|
||||
<p style="margin: 5px;">Render:<br />
|
||||
<input type="checkbox" id="sidepanel-display-plink" value="1" onclick="settingChange("plink");">Show pLink and eLink</input>
|
||||
</p>
|
||||
<p style="margin: 5px;">Action:<br />
|
||||
<input type="checkbox" id="sidepanel-display-properties" value="1" onclick="settingChange("properties");">Interactive property inspector</input><br />
|
||||
<input type="checkbox" id="sidepanel-display-highlight" value="1" onclick="settingChange("highlight");">Highlight focused object</input><br />
|
||||
<input type="checkbox" id="sidepanel-display-move" value="1" onclick="settingChange("move");" disabled="true">Move objects</input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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" disabled="true"></input><br />
|
||||
<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("/help");">Help</button><br />
|
||||
<button style="height: 30px; margin: 10px 0 10px 0;" onclick="window.open("/about");">About</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|