C#_串口调试助手-网络拓扑显示
先來個(gè)效果圖，鼠標(biāo)放在上面也會(huì)顯示一些數(shù)據(jù)。
點(diǎn)擊刷新的時(shí)候其實(shí)是動(dòng)態(tài)的，會(huì)旋轉(zhuǎn)一下，然后慢慢停停下來，使用js文件和html文件配合實(shí)現(xiàn)效果。
需要的是jequery-1.10.2.min和echarts。
node.html是實(shí)際顯示的界面，會(huì)調(diào)用上面兩個(gè)文件，并且里面也有接口和C#的控件對(duì)接。
此三個(gè)文件需要同級(jí)目錄，且和啟動(dòng)程序也要統(tǒng)計(jì)目錄。
以下是前兩個(gè)文件的連接以及node.html文件的內(nèi)容。
?百度網(wǎng)盤鏈接：
https://pan.baidu.com/s/18hONdXIs3N3ajZJZ0Xkydw提取碼：
ga7o以下是node.html文件的內(nèi)容
<!DOCTYPE html> <html><head><meta charset="utf-8"></meta><title>ECharts</title> <script src="echarts.js"></script><script src="jquery-1.10.2.min.js"></script><script type="text/javascript">function draw(ccomap){var text = ccomap;var data = eval(text);var graph = data2Graph(data);drawGraph(graph);}function data2Graph(data) {var graph = {}var vertices = {}var links = [];for (var i = 0; i < data.length; i++) {var s = String(data[i][0]);var t = String(data[i][1]);var v = data[i][2];vertices[s] = s;vertices[t] = t;links.push({'source' : s, 'target' : t, 'value' : v});}var nodes = [];$.each(vertices, function(k, v) {nodes.push({'name' : v, 'value' : v});});graph['links'] = links;graph['data'] = nodes;return graph;}function drawGraph(graph) {var myChart = echarts.init(document.getElementById("echarts-main"));var option = {tooltip: {},series : [{type: 'graph',layout: 'force',symbolSize: 30,edgeSymbol: ['none', 'arrow'],data: graph.data,links: graph.links,roam: true,label: {normal: {show: true,formatter: function (e) {return e['data']['value'];}}},edgeLabel: {normal: {show: true,position: 'middle'}},force: {repulsion: 1000,edgeLength: 200}}]};myChart.setOption(option);}//$(document).ready(function(){// draw();// $("#gen-btn").on("click", function(){// draw();// });//});</script></head><body><p>拓?fù)鋱D:</p><div id="echarts-main" style="height:700px;width:100%;border:1px dashed;"></div></body> </html>?
然后開始在上位機(jī)上實(shí)現(xiàn)對(duì)接。
打開C#在Form添加一個(gè)Button按鍵和WebBrowser控件，
WebBrowser控件的大小決定顯示的web界面的大小。
?將WebBrowser控件的以下屬性設(shè)置為True。
然后點(diǎn)擊事件，雙擊事件生成函數(shù)。?
按鍵也需要一個(gè)事件，雙擊按鍵建立一個(gè)按鍵事件，
在按鍵事件函數(shù)里面復(fù)制進(jìn)入如下函數(shù)中的內(nèi)容，
其中的node.html就是上面準(zhǔn)備好的文件。
private void Button_RefreshMap_Click(object sender, EventArgs e) {try{string Map_js_Path = Application.StartupPath + "\\node.html"; //獲得當(dāng)前工作路徑WebBrowser_DeviceMap.Url = new Uri(Map_js_Path);}catch (Exception ex){MessageBox.Show(ex.ToString(), "ERROR");return;} }?在上方WebBrowser生成的事件函數(shù)里面復(fù)制進(jìn)去如下函數(shù)中的內(nèi)容，然后就可以直接運(yùn)行看一下效果圖了。
private void WebBrowser_DeviceMap_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) {//*string map_string = "[[0,1,10], [1,0,1], [1,2,5], [2,0,5], [3,0,5], [4,1,4]]";string map_string = "";byte map_num = 10;byte[] map_byte = new byte[map_num];for (int i = 0; i < map_num; i++){map_string += "[";map_string += i.ToString();map_string += ",";map_string += "0";map_string += ",";map_string += i.ToString();map_string += ",";if(i == map_num-1){map_string += "]";}else{map_string += "], ";}}map_string = "[" + map_string + "]";WebBrowser_DeviceMap.Document.InvokeScript("draw", new Object[] { map_string }); }然后介紹每個(gè)數(shù)字的含義。
最后傳給html文件的是如下所示的類似的字符串?dāng)?shù)據(jù)。
中間的每個(gè)中括號(hào)的數(shù)據(jù)才是需要顯示的，比如第一個(gè)則是0指向1的關(guān)系還會(huì)有一個(gè)箭頭，然后10是指向的那根線上顯示的東西，如下圖中框起來的三部分。
?
只要知道三個(gè)數(shù)字的含義，則可以隨意設(shè)置參數(shù)和指向關(guān)系了。
關(guān)于頁面上顯示的漢字，需要修改node.html文件就可以了。
需要注意的是，在加載拓?fù)涞倪^程中可能會(huì)消耗一定的電腦性能，自己把控。
個(gè)人見解，感謝閱讀。
總結(jié)
以上是生活随笔為你收集整理的C#_串口调试助手-网络拓扑显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机一级b考试理论知识,全国计算机等级
- 下一篇： 基于javaweb+jsp的设备维修管理