PCB 網頁WebODB++與Genesis同屏實現方法

PCB 網頁WebODB++與Genesis同屏實現方法，保持Web端與Genesis指令保持同步達到同屏的效果;並非像素級畫面同屏。

實現前，先要解決讓Javascript可以在瀏覽器可以發送指令給到Genesis, 同時Genesis可以接受來自瀏覽器傳遞過來的指令，在這里可以借助WebSocket即可達到此目的。

 一.實現工作流程

  1.  瀏覽器(控制端)JS與WebSocketServer建立連接，瀏覽器需要將COM指令發送給1號Genesis

  2.  數據先發送給WebSocketServer，WebSocketServer收到信息，再將信息轉發給1號SocketClient

  3. 1號SocketClient收到信息后，將信息外掛的方式發送給1號Genesis

    

為了簡化，簡少轉發，在這里只建只一個WebSocketServer服務，他同時起到轉發COM指令發送到Genesis功能

 

 二. 創建一個WebSocket服務

        static List<IWebSocketConnection> allSockets = new List<IWebSocketConnection>();
        static WebSocketServer server = new WebSocketServer("ws://127.0.0.1:8888");
        static void Main(string[] args)
        {
            FleckLog.Level = LogLevel.Debug;
            server.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    Console.WriteLine("Open!");
                    allSockets.Add(socket);
                };
                socket.OnClose = () =>
                {
                    Console.WriteLine("Close!");
                    allSockets.Remove(socket);
                };
                socket.OnMessage = message =>
                {
                    gCommand(message);
                };

            });

            var input = Console.ReadLine();
            while (input != "exit")
            {
                foreach (var socket in allSockets)
                {
                    socket.Send(input);
                }
                input = Console.ReadLine();
            }
        }
        static void gCommand(string messages)
        {
            //執行外掛接口，由WebSocketClient從WebSocketServer接收到COM指令后轉發給Genesis
            //g.COM("messages");
            allSockets.ForEach(s => s.Send(messages));
        }

 三.瀏覽器建立WebSocket連接

    var wsImpl = window.WebSocket || window.MozWebSocket;
    window.ws = new wsImpl('ws://127.0.0.1:8888/');
    ws.onmessage = function (evt) {
        console.log(evt.data);
    };

 四. 網頁發送COM指令操作

 五.網頁WebODB++與Genesis同屏操作

　　 實現同屏原理和上面一樣，讓JS和WebSocketServer建立連接，再由WebSocketClient發送指令給到Genesis。

         將Genesis鼠標可以交互的事件(如放大，縮小，平移，點擊，雙擊)等事件綁定到網頁版的WebODB++事件上;網頁WebODB++在操作的同時，也觸發Genesis事件達到一樣的操作。為了讓JavaScript擁有C#封裝的所有方法，可以在 WebSocketClient客戶端反射所有命令供JavaScript使用，我們在用JavaScript寫腳本時，可以復用到C#的封裝方法

       WebODB++技術棧：解析Gerber,ODB++與計算幾何用WebAssembly與JS，渲染用WebGL

      此功能只是為了WebSocket與Genesis通信做一個小小的嘗試，實現同屏功能在實際應用中無有效價值，玩一玩而已。但Web網頁端與Genesis通信可以擴展更好玩的應用。

實現效果：

    1.網頁WebODB++與Genesis同屏操作_嗶哩嗶哩_bilibili    

    2 移動端與Genesis同屏操作_嗶哩嗶哩_bilibili