caiyu/CZ_OpenSpice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

insert bokeh into the mxgraph window

Browse Source
This commit is contained in:
ColsonZhang 2021-02-08 21:12:27 +08:00
parent db06950a00
commit 14640b9bb3
5 changed files with 92 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -59,6 +59,10 @@ app.py ----服务器的主程序
## 更新日志 ## 更新日志
* 2021年2月8号，前端更新
* 新增在弹出窗口里嵌入bokehjs代码的功能
* ![avatar](./doc/schematic5.png)
* 2021年2月8号，前端更新，后端更新 * 2021年2月8号，前端更新，后端更新
* 优化了mos器件的描述方法 * 优化了mos器件的描述方法
@ -90,7 +94,7 @@ app.py ----服务器的主程序
* 增加了按下delete键删除元素的功能 * 增加了按下delete键删除元素的功能
* 发现了一些bug，例如当进行FlipH和FlipV时端口无法跟着进行翻转 * 发现了一些bug，例如当进行FlipH和FlipV时端口无法跟着进行翻转
* 当前的功能界面如下图所示 * 当前的功能界面如下图所示
* ![avatar](./doc/schematic.png) * ![avatar](./doc/schematic1.png)
* 2021年1月28日，前端更新 * 2021年1月28日，前端更新
* 增加了一些功能控件，完成基本雏形 * 增加了一些功能控件，完成基本雏形

0
doc/schematic.png → doc/schematic1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 126 KiB

BIN
doc/schematic5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

43
static/spice/bokeh_01.js Normal file
View File

@ -0,0 +1,43 @@
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [], y: [] }
});
// make a plot with some tools
var plot = Bokeh.Plotting.figure({
title:'Example of Random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
height: 300,
width: 300
});
// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot,'#bokeh_01');
function addPoint() {
// add data --- all fields must be the same length.
source.data.x.push(Math.random())
source.data.y.push(Math.random())
// notify the DataSource of "in-place" changes
source.change.emit()
}
function Callback_Button() {
addPoint();
}
var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", Callback_Button);
addPoint();
addPoint();

60
template/schematic/schematic.html
View File

@ -1,12 +1,11 @@
<!-- <!--
Copyright (c) 2006-2013, JGraph Ltd Copyright (c) 2021, Zhang Shen
Toolbar example for mxGraph. This example demonstrates using CZ Open Spice Schematic .
existing cells as templates for creating new cells.
--> -->
<html> <html>
<head> <head>
<title>Toolbar example for mxGraph</title> <title>CZ Open Spice Schematic </title>
<!-- Sets the basepath for the library if not in same directory --> <!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript"> <script type="text/javascript">
@ -15,6 +14,12 @@
<!-- Loads and initializes the library --> <!-- Loads and initializes the library -->
<script type="text/javascript" src="static/schematic/src/js/mxClient.js"></script> <script type="text/javascript" src="static/schematic/src/js/mxClient.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- Example code --> <!-- Example code -->
@ -1076,23 +1081,16 @@ function showOutline(graph)
} }
} }
})); }));
// Shows XML for debugging the actual model
document.body.appendChild(mxUtils.button('Show XML', function()
{
var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true);
}));
document.body.appendChild(mxUtils.button('Show Spice', function() document.body.appendChild(mxUtils.button('Show info', function()
{ {
var node = ParseSpice(graph.getModel()); var node = ParseSpice(graph.getModel());
var circuit = NormalizeXML(node); var circuit = NormalizeXML(node);
let spice = ExtractSpice(circuit); let spice = ExtractSpice(circuit);
mxUtils.popup(spice, true); mxUtils.popup(spice, true);
})); }));
document.body.appendChild(mxUtils.button('Show Spice 2', function()
document.body.appendChild(mxUtils.button('Show Spice', function()
{ {
var node = ParseSpice(graph.getModel()); var node = ParseSpice(graph.getModel());
@ -1103,7 +1101,6 @@ function showOutline(graph)
document.body.appendChild(mxUtils.button('Send Spice', function() document.body.appendChild(mxUtils.button('Send Spice', function()
{ {
var node = ParseSpice(graph.getModel()); var node = ParseSpice(graph.getModel());
var circuit = NormalizeXML(node); var circuit = NormalizeXML(node);
let spice = ExtractSpice_2(circuit); let spice = ExtractSpice_2(circuit);
@ -1120,7 +1117,38 @@ function showOutline(graph)
} }
}); });
})); }));
document.body.appendChild(mxUtils.button('wnd test', function()
{
var frame = document.createElement('div');
frame.setAttribute('id','bokeh_01');
var x = document.createElement('script');
x.setAttribute('src','static/spice/bokeh_01.js');
frame.appendChild(x);
var w = document.body.clientWidth;
var h = (document.body.clientHeight || document.documentElement.clientHeight);
var wnd = new mxWindow('Title', frame, (w-200)/2, (h-200)/3, 400, 400, true, true);
wnd.setVisible(true);
wnd.setScrollable(true);
wnd.setResizable(true);
wnd.setVisible(true);
wnd.setClosable(true);
}));
// Shows XML for debugging the actual model
// document.body.appendChild(mxUtils.button('Show XML', function()
// {
// var encoder = new mxCodec();
// var node = encoder.encode(graph.getModel());
// mxUtils.popup(mxUtils.getPrettyXml(node), true);
// }));
// // Extract SPICE model // // Extract SPICE model
// document.body.appendChild(mxUtils.button('Show Info', function() // document.body.appendChild(mxUtils.button('Show Info', function()