更新用於高速操作的JavaFX2 gui的最佳方式是什麼？

Question

我有一個應用程序正在通過串口與硬件設備通信。該設備每30ms發送一個json對象。這個json對象是設備「狀態」它的運動控制器。

基本上的消息是這樣的：

{"sr":{"line":2524,"posx":1.000,"posy":21.000,"posz":20.000,"posa":11.459,"feed":0.000,"vel":0.000,"unit":1,"coor":1,"dist":0,"frmo":0,"momo":0,"stat":2}} 

我得到這些1X每30毫秒。我必須解析它們。然後將它們「繪製」到JavaFX gui上。

這裏是我很解析：

Platform.runLater(new Runnable() { 

      public void run() { 
       //We are now back in the EventThread and can update the GUI 
       try { 
        JsonRootNode json = JDOM.parse(l); 

        xAxisVal.setText(json.getNode("sr").getNode("posx").getText()); 
        yAxisVal.setText(json.getNode("sr").getNode("posy").getText()); 
        zAxisVal.setText(json.getNode("sr").getNode("posz").getText()); 
        aAxisVal.setText(json.getNode("sr").getNode("posa").getText()); 
        drawLine(); 

       } catch (argo.saj.InvalidSyntaxException ex) { 
        //Json line invalid. 
       } 
      } 
     }); 

這裏是我使用的抽獎代碼：

public void drawLine() { 
    xl.setX(Float.parseFloat(xAxisVal.getText()) + 400); 
    y1.setY(Float.parseFloat(yAxisVal.getText()) + 400); 
    LineTo tmpL = new LineTo((Float.parseFloat(xAxisVal.getText()) * 2) + 400, (Float.parseFloat(yAxisVal.getText()) * 2) + 400); 
    path.getElements().add(tmpL); 

} 

所以基本上我創建一個Runnable對象每30毫秒然後分析和繪圖。這是做這件事的最好方法嗎？你可以看到它的視頻在行動：

http://www.youtube.com/watch?v=dhBB3QcmHOg&feature=youtu.be

但好像它的「幹」和漂亮的耗資源。我希望有人就如何優化此代碼給我提供建議？也許指出我缺少的東西？

作爲供參考我們正在製作的運動控制器板稱爲TinyG。其開源硬件。
更多信息是在這裏： http://www.synthetos.com/wiki/index.php?title=Projects:TinyG

固件在這裏： https://github.com/synthetos/TinyG

謝謝！

Answer 1

您似乎對事件隊列執行了太多計算，這些事件隊列會在解析數據時阻止圖形渲染。你應該在單獨的線程計算，並呼籲Platform.runLater()只對相關的UI代碼：

try { 

     JsonRootNode json = JDOM.parse(l); 
     final String xVal = json.getNode("sr").getNode("posx").getText(); 
     final String yVal = json.getNode("sr").getNode("posy").getText(); 
     final String zVal = json.getNode("sr").getNode("posz").getText(); 
     final String aVal = json.getNode("sr").getNode("posa").getText(); 

     // here you are calling UI getter, and parse it each time 
     // it would be more optimal to store `x` value in separate variable 
     // between updates 
     final float x = Float.parseFloat(xAxisVal.getText()); 
     final float y = Float.parseFloat(yAxisVal.getText()); 

     Platform.runLater(new Runnable() { 

      public void run() { 
       //We are now back in the EventThread and can update the GUI 
       try { 

        xAxisVal.setText(xVal); 
        yAxisVal.setText(yVal); 
        zAxisVal.setText(zVal); 
        aAxisVal.setText(aVal); 
        xl.setX(x + 400); 
        y1.setY(y + 400); 
        LineTo tmpL = new LineTo(x * 2 + 400, y * 2 + 400); 
        path.getElements().add(tmpL); 

       } 
      } 
     } 

    } catch (argo.saj.InvalidSyntaxException ex) { 
     //Json line invalid. 
    } 

Answer 2

如果你還沒有，請嘗試developer preview release。 JavaFX 2.1預覽分支對smooth animation and rendering performance進行了一些修改，並優化了path logic。

另一種方法是在WebView中寫入HTML5畫布，或在JavaFX 2.2中有一個可用的時候使用JavaFX canvas node。