enhance web viewer?
This commit is contained in:
parent
6eee3e8f6d
commit
132aab9da0
|
|
@ -4,7 +4,7 @@ import os
|
|||
import sys
|
||||
|
||||
# debug use
|
||||
os.remove('decorate.db')
|
||||
# os.remove('decorate.db')
|
||||
|
||||
print('Super Script View')
|
||||
if not os.path.isfile("decorate.db"):
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
/*navigation style*/
|
||||
p.hamburger {
|
||||
margin: 0 5px 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*graph style*/
|
||||
div.block-target {
|
||||
position: absolute;
|
||||
background: green;
|
||||
|
|
@ -82,3 +84,27 @@ text.link-delay {
|
|||
font-size: 12px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/*side panel style*/
|
||||
div.tabitem-activated {
|
||||
background: #0000ff;
|
||||
}
|
||||
b.tabitem-activated {
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.tabitem-deactivated {
|
||||
background: #ffffff00;
|
||||
}
|
||||
b.tabitem-deactivated {
|
||||
color: black;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
background: #3f3f3f;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
previousHighlight = ""
|
||||
previousHighlight = "";
|
||||
|
||||
function highlightLink(target) {
|
||||
realTarget = ".target" + target
|
||||
|
|
@ -56,18 +56,44 @@ function queryInfo(obj) {
|
|||
},
|
||||
function(data, status) {
|
||||
//set id
|
||||
$("#propertyWindow-id").text(obj);
|
||||
$("#sidepanel-properties-id").text(obj);
|
||||
|
||||
//set data
|
||||
$("#propertyWindow-container").empty()
|
||||
$("#sidepanel-properties-container").empty()
|
||||
for (var key in data) {
|
||||
$("#propertyWindow-container").append("<p><b>" + key + ":</b><br />" + data[key] +"</p>")
|
||||
$("#sidepanel-properties-container").append("<p><b>" + key + ":</b><br /><pre>" + data[key] +"</pre></p>")
|
||||
}
|
||||
|
||||
$("#propertyWindow-main").show();
|
||||
});
|
||||
}
|
||||
|
||||
function closePropertyWindow() {
|
||||
$("#propertyWindow-main").hide();
|
||||
function sidePanelSwitcher(target) {
|
||||
// 0->property; 1->display; 2->tools
|
||||
//disable all
|
||||
$("#sidepanel-properties").hide();
|
||||
$("#sidepanel-display").hide();
|
||||
$("#sidepanel-tools").hide();
|
||||
$(".tabitem").each(function() {
|
||||
$(this).removeClass("tabitem-activated").addClass("tabitem-deactivated");
|
||||
});
|
||||
|
||||
switch (target) {
|
||||
case 0:
|
||||
$("#sidepanel-properties").show();
|
||||
$(".tabitem1").each(function() {
|
||||
$(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
$("#sidepanel-display").show();
|
||||
$(".tabitem2").each(function() {
|
||||
$(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
$("#sidepanel-tools").show();
|
||||
$(".tabitem3").each(function() {
|
||||
$(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
<script src="{{static_js}}"></script>
|
||||
</head>
|
||||
|
||||
<body style="display: flex; flex-flow: column; height: 100%; width: 100%; margin: 0; padding: 0;">
|
||||
<div style="display: flex; background: #cfcfcf; flex-flow: row; width: 100%; height: 50px;">
|
||||
<div style="display: flex; flex-flow: row; width: 100%; height: 100%; overflow: scroll;">
|
||||
<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; background: #cfcfcf; flex-flow: row; width: 100%; height: 50px; overflow: scroll;">
|
||||
|
||||
<p class="hamburger"><a href="/"><b>Script Hierarchy</b></a></p>
|
||||
|
||||
|
|
@ -24,10 +24,7 @@
|
|||
<p class="hamburger"><b>{{ hamburgerCurrent|e }}</b></p>
|
||||
|
||||
</div>
|
||||
<div style="width: 100px;">
|
||||
<button style="width: 100px; height: 50px;">Help</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background: #7f7f7f; width: 100%; height: 100%; overflow: scroll; position: relative;">
|
||||
<div>
|
||||
{# blocks content #}
|
||||
|
|
@ -62,7 +59,7 @@
|
|||
{% 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({{ i[1] }});"></div>
|
||||
title="{{ "Name: %s\nType: %s"|format(i[2], i[3]) }}" ondblclick="queryInfo({{ 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;">
|
||||
|
|
@ -80,14 +77,44 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="propertyWindow-main" style="position: absolute; background: #0000007f; width: 100%; height: 100%; top: 0; left: 0; display: none;">
|
||||
<div style="position: absolute; background: white; width: 50%; height: 50%; top: 25%; left: 25%; display: flex; flex-flow: column;">
|
||||
<p style="margin: 5px;">Properties of <b id="propertyWindow-id"></b></p>
|
||||
<div id="propertyWindow-container" style="width: 100%; height: 100%; overflow: scroll;">
|
||||
</div>
|
||||
<button style="width: 100px; height: 25px; margin: 5px;" onclick="closePropertyWindow();">Close</button>
|
||||
|
||||
<div style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 20%; 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 class="tabitem tabitem1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(0);"><b style="margin: 0;" class="tabitem tabitem1 tabitem-activated">Properties</b></div>
|
||||
<div class="tabitem tabitem2 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(1);"><b style="margin: 0;" class="tabitem tabitem2 tabitem-deactivated">Display</b></div>
|
||||
<div class="tabitem tabitem3 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(2);"><b style="margin: 0;" class="tabitem tabitem3 tabitem-deactivated">Tools</b></div>
|
||||
</div>
|
||||
|
||||
<div id="sidepanel-properties" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column;">
|
||||
<p style="margin: 5px;">Properties of <b id="sidepanel-properties-id">---</b></p>
|
||||
<div id="sidepanel-properties-container" style="width: 100%; height: 100%; overflow: scroll;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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-highlight" value="1">Highlight focused object</input><br />
|
||||
<input type="checkbox" id="sidepanel-display-move" value="1">Move objects</input>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="sidepanel-tools" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
|
||||
<p style="margin: 5px;">Object finder:<br />
|
||||
<input type="text" id="sidepanel-tools-objfinder"></input><br />
|
||||
<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;">About</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user