Skip to content

metaL plot

Jump to bottom
Dmitry Ponyatov edited this page Aug 19, 2019 · 6 revisions

визуализация в metaL

Визуализация реализована через WEB с использованием библиотеки GOjs.

Запускается через http://127.0.0.1:8888/plot/

Реализация довольно сложная, включает

  • специальный метод рекурсивного обхода дерева фреймов:
class Frame:
    def plot(self,depth=0,parent=None,link=None):
        nodes = ''
        par = ''
        if parent: par = ', parent:0x%x ' % id(parent)
        if link: par += ', link:"%s" ' % link
        def key(what):
            return '\n{ key: 0x%x, head:"%s:%s" %s },' % \
                (id(what),what.type,what._val(),par) 
        nodes += key(self)
        if not depth: Frame._ploted = []
        if self in Frame._ploted: return nodes
        else: Frame._ploted.append(self)
        for i in self.slot:
            nodes += self.slot[i].plot(depth+1,parent=self,link=i)
        count = 0
        for j in self.nest:
            count += 1
            nodes += j.plot(depth+1,parent=self,link=count)
        return nodes
  • набор шаблонов Jinja2 для Flask
    • all.html
{% block head %}
<head>
<title>{{ctx.head()}}</title>
<link rel="shortcut icon" href="/logo.png">
<link rel="stylesheet" href="/dark.css">
{% block lib %}
{% endblock %}
</head>
{% endblock %}


{% block dump %}
{% endblock %}

{% block script %}
<script></script>
{% endblock %}
  • plot.html
{% extends "all.html" %}

{% block lib %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.0.5/go.js"></script>
{% endblock %}

{% block dump %}
<style>
#plot { width:95%; height:85%; border: 1px solid white; }
</style>
<div id=plot></div>
{% endblock %}

{% block script %}
<script>

var $ = go.GraphObject.make;
var dia = $(go.Diagram, "plot", {
		"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
	});

dia.model = $(go.TreeModel);
dia.model.nodeDataArray = [
	{% autoescape false %}
		{{ctx.plot()}}
	{% endautoescape %}
];

dia.nodeTemplate =
	$(go.Node, "Auto",
		{ background: "transparent" },
		$(go.Shape,
			{ figure: "RoundedRectangle", fill: "darkblue" }),
		$(go.TextBlock,
			{stroke:"white", font:"{{web['font']['size'].val}} {{web['font'].val}}"},
			new go.Binding("text", "head"))
	);
	
dia.linkTemplate =
    $(go.Link,
    	$(go.Shape, { stroke:"white" }),
    	$(go.Shape, { toArrow: "StretchedDiamond", stroke:"white", fill:"darkgreen" }),
    	$(go.TextBlock,
    		{
    			stroke:"yellow", background:"black", 
    			font:"{{web['font']['size'].val}} {{web['font'].val}}",
    			segmentIndex: 0, segmentFraction: 0.8
    		},
    		new go.Binding("text", "link"))
   	);
	
dia.layout = new go.ForceDirectedLayout();	

</script>
{% endblock %}
  • подгружаемую внешнюю библиотеку GOjs
Clone this wiki locally