To Build Outdoor Scenes Topology with TWaver 3D

It is quite common in general application system to present the inside of a machine room by means of 2D which is characteristic of being efficient, direct-viewing and exact. With the increase of the amount of information and the development of the technology, clients hope that there can be a more realistic 3D scene to make it more readable. TWaver Flex 3D has realized the representation of 3D scenes with the Element objects in TWaver, by expanding 3D Style of them.

Among all the requirements, the commonest one is to create an array of devices with regular shapes in a machine room and to automatically construct a cabinet with the specified rows and columns.

This standard scene can be constructed through the following codes easily:

public static function getRoomBox(id:Object):ElementBox {
            var size:Number=1600;
            var box:ElementBox=new ElementBox();
            var xgap:Number=size / 8;
            var ygap:Number=size / 8;
            var startX:Number=-xgap * 2.5;
            var starty:Number=-ygap * 2.5;
            for (var i:int=0; i < 6; i++)
            {
                for (var j:int=0; j < 6; j++)
                {
                    box.add(createRack(i + ":" + j, startX + i * xgap, starty + j * xgap));
                }
            }

            var floor:IElement=new Element();

            floor.setStyle(Style3D.MAPPINGTYPE, Consts3D.MAPPINGTYPE_COLOR);
            floor.setStyle(Style3D.THREED_SHAPE_TYPE, Consts3D.THREED_SHAPE_TYPE_CUBE);
            floor.setStyle(Style3D.MATERIAL_ALPHA, 0.6);
            floor.setStyle(Style3D.MATERIAL_COLOR, 0x999999);
            floor.setStyle(Style3D.ZORDERING_OFFSET, 2500);

            floor.setStyle(Style3D.BOTH_SIDES_VISIBLE, true);
            floor.setStyle(Style3D.PROPERTY_SPACE_LOCATION, new Vector3D(0, 0, 0));
            floor.setStyle(Style3D.PROPERTY_SIZE, new Vector3D(size + 10, 0, size + 10));
            box.add(floor);

            return box;
}
private static function createRack(id:String, x:Number, z:Number):IElement{
            var element:IElement=new Element(id);
            element.setStyle(Style3D.MAPPINGTYPE, Consts3D.MAPPINGTYPE_MAP6);
            element.setStyle(Style3D.MAPPING_COMMON_PATH, "rack3DImage");
            element.setStyle(Style3D.PROPERTY_SIZE, new Vector3D(80, 150, 80));
            element.setStyle(Style3D.PROPERTY_SPACE_LOCATION, new Vector3D(x, 150 / 2 + 10, z));
            return element;
}

After the indoor scene, clients have a new requirement that it will be better if the outside of the room can be seen, such as the representation of the connection between the room and another one. To satisfy it, we have to transfer the scene to the outside to present the storey and the connection between it and another. The following codes can help us realize that:

  public static function buildSpacialTopo(box:ElementBox):void{
                var o:Vector3D = new Vector3D(0,0,0);
                var cbp:Vector3D = new Vector3D(0,50,0);
                var lup:Vector3D = new Vector3D(100,10,-60);
                var rup:Vector3D = new Vector3D(-100,10,-60);
                var fp:Vector3D = new Vector3D(0,10,100);
                var l1:Node = createLine([o,new Vector3D(rup.x,3,0),new Vector3D(rup.x,3,rup.z)],5,0x000000);
                box.add(l1);
                l1.name = "black line";
                var l2:Node = createLine([o,new Vector3D(0,3,lup.z),new Vector3D(lup.x,3,lup.z)],5,0x00FF00);
                l2.name = "green line";
                box.add(l2);
                var l3:Node = createLine([o,new Vector3D(fp.x,2,fp.z)],3,0xFF0000);
                l3.name = "red line";
                box.add(l3);
                var cb:Node = createCube(cbp,"BI",new Vector3D(50,100,30));
                cb.name = "building";
                box.add(cb);
                var ds1:Node = createCube(lup,"NO",new Vector3D(25,40,10));
                ds1.name = "NO.1";
                box.add(ds1);
                var ds2:Node = createCube(rup,"NT",new Vector3D(35,20,10));
                ds2.name = "No.2";
                box.add(ds2);
                var f:Node = createCube(fp,"SM",new Vector3D(20,35,10));
                f.setStyle(Style3D.PROPERTY_ROT_ANGLE,new Vector3D(0,180,0));
                f.name = "SM";
                box.add(f);
}
public static function createLine(ps,width,color):Node{
                var line:Node = new Node();
                line.setStyle(Style3D.THREED_SHAPE_TYPE,Consts3D.THREED_SHAPE_TYPE_LINE);
                line.setStyle(Style3D.LINE_SHAPE_POINTS,ps);
                line.setStyle(Style3D.MAPPINGTYPE,Consts3D.MAPPINGTYPE_COLOR);
                line.setStyle(Style3D.MATERIAL_COLOR,color);
                line.setStyle(Style3D.LINE_SHAPE_WIDTH,width);
                return line;
}
public static function createCube(pos,mappingsource,size):Node {
                var node:Node = new Node();
                node.setClient("TYPE","building");
                node.setStyle(Style3D.PROPERTY_SPACE_LOCATION,pos);
                node.setStyle(Style3D.PROPERTY_SIZE,size);
                if(mappingsource!=null){
                    node.setStyle(Style3D.MAPPINGTYPE,Consts3D.MAPPINGTYPE_MAP6);
                    node.setStyle(Style3D.MAPPING_COMMON_PATH,mappingsource);
                }else{
                    node.setStyle(Style3D.MAPPINGTYPE,Consts3D.MAPPINGTYPE_COLOR);
                    node.setStyle(Style3D.MATERIAL_COLOR,0x33FF88);
                }

                return node;
}

We use the 3D model of Line to simulate the linking between these architectures. Let’s have a look:

When we are smooth in applications, clients again have a new idea: Now there have been the indoor and outdoor scenes, but in the outdoor one the architectures are alone and too simple, so the geographical relationship between the architectures is invisible. Can there be more functions like this? O-K. We have to serve clients, to meet the changeable requirements as long as we are coders.

Why not load the simulated the altitude data?

public static function buildTerrain(box:ElementBox):void{
                var node:Node = new Node();
                node.setStyle(Style3D.THREED_SHAPE_TYPE,Consts3D.THREED_SHAPE_TYPE_TERRAIN);
                node.setStyle(Style3D.MAPPINGTYPE,Consts3D.MAPPINGTYPE_COMMON);
                node.setStyle(Style3D.MAPPING_COMMON_PATH,"TT");
                node.setStyle(Style3D.MAPPING_HEIGHTMAP,"HM");
                node.setStyle(Style3D.EXTRUSION_SAMPLES,70);
                node.setStyle(Style3D.EXTRUSION_XSCALE,1);
                node.setStyle(Style3D.EXTRUSION_YSCALE,1);
                node.setStyle(Style3D.EXTRUSION_RECENTER,true);
                node.setStyle(Style3D.PROPERTY_ROT_ANGLE,new Vector3D(90,0,0));
                node.setStyle(Style3D.EXTRUSION_HSCALE,0.1);
                node.setStyle(Style3D.PROPERTY_SPACE_LOCATION,new Vector3D(-100,-100,0));
                node.setClient("TYPE","terrain");
                box.add(node);
}

Now we are able to simulate their geographical relations.

Life is colorful with a series of unexpectedness. A new requirement comes again: How do I operate? How do I interact with it? How do I lead my users to enter the computer room, operate the cabinet, and check the devices and the panes in the room?

Yeah, we have to combine these elements together. Then we add the interactional system. When a user clicks a storey, there will pop out the indoor scene of the machine room in which he can select the cabinet; when double-clicking that cabinet, there appears the 3D model of the devices in it; when double-clicking a device I can again see its panes.

network.selectionFunction = function(element:Element){

        if("terrain" == element.getClient("TYPE")){
            return false;
        }
        return true;
}
network.addEventListener(MouseEvent.MOUSE_MOVE,onClick);
                               .............
private function onSelectionChanged(evt:SelectionChangeEvent):void{
                hideShapedWindow();
                level = 0;
                b1 = null;
                b2 = null;
                var data:Element = box.selectionModel.lastData as Element;
                if(box.selectionModel.selection.contains(data)){
                    showRoomInfo(data,this.mousePos);
                }
}
private function onClick(evt:MouseEvent):void{
                var pos:Point = new Point(evt.stageX,evt.stageY);
                this.mousePos = network.globalToContent(pos);
            }
private function showRoomInfo(element:Element,pos:Point):void{
                if("building" == element.getClient("TYPE")){
                    var box:ElementBox =DataUtils.getRoomBox("fd");
                    room = createRoom();
                    showShapedWindow(room,pos);
                }
}

 

Partial AutoLayout and Layout in Nested Groups in TWaver

TWaver has provided some layout algorithms to help us quickly set the positions for elements. They are enough for us to use in many cases, but in some complicated ones we need to make some operations ourselves. Please look at the following example:
Screenshot:

Under this circumstance, it is not so agreeable to use TNetwork#doLayout directly, for doLayout will use the same layout algorithm to all elements in the network. But the several sub-groups under the group in the screenshot have their own layout. My solution is that we can first arrange the layout wholly to the group at the outermost layer and then recurse and go through the sub-groups, namely, arrange the layout to them separately.

Code Implementation:
There are two ways available to use the partial layout in TWaver:

• Add the Element to be in the layout into a new TNetwork, and arrange the layout with the new TNetwork.
• TWaver only arranges the layout to the selected element as default, so the element to be in the layout can be put in to the SelectionModel.

In this demo, at first, use the first way above to arrange the layout to the outermost group:

//layoutNetwork is a temporary network which is used to arrange a layout.
//The layout has been saved in ClientProperty when generating the group.
layoutDatabox.addElementWithDescendant(group1);
layoutNetwork.doLayout((Integer)group1.getClientProperty("layout"),false);

Then recurse and go through the sub-groups to arrange the layout to them.

recursionChild(group1);
............................................

 private void recursionChild(Group group){
        for(int i=0;i<group.getChildren().size();i++){
            Element element= (Element) group.getChildren().get(i);
            if(element instanceof Group){
                Group childGroup=((Group)element);
                recursionChild(childGroup);//If there are sub-groups, the recursion will be continued.
//to combine the two ways together and add the sub-group to be in a layout into the SelectonModel of layoutNetwork
                layoutDatabox.getSelectionModel().clearSelection();
                layoutDatabox.getSelectionModel().appendSelection(childGroup.getChildren());
                layoutNetwork.doLayout((Integer) ((Group) element).getClientProperty("layout"), false);
                layoutDatabox.getSelectionModel().clearSelection();
            }
        }
    }

All codes:

public class LayoutTest extends JPanel {
    TDataBox layoutDatabox=new TDataBox();
    TNetwork layoutNetwork=new TNetwork(layoutDatabox);
    public LayoutTest(){

        TNetwork network=new TNetwork();

        ResizableNode gatewayNode=new ResizableNode();

        gatewayNode.putCustomDraw(true);
        gatewayNode.putCustomDrawShapeFactory(TWaverConst.SHAPE_ROUND_RECTANGLE_HALF);
        gatewayNode.putCustomDrawGradient(false);
        gatewayNode.putCustomDrawFillColor(new Color(254, 254, 206));
        gatewayNode.setSize(70, 30);
        gatewayNode.setName("Gateway");
        gatewayNode.putLabelPosition(TWaverConst.POSITION_CENTER);

        Group group1=createGroup(4,TWaverConst.LAYOUT_TREE);
        Group group1_1=createGroup(12,TWaverConst.LAYOUT_CIRCULAR);
        Group group1_2=createGroup(5,TWaverConst.LAYOUT_EAST);

        Link group1_2Link=new Link((Node)group1.getChildren().get(0),(Node)group1_2.getChildren().get(0));
        setLinkStyle(group1_2Link);
        group1.addChild(group1_2);
        group1.addChild(group1_2Link);

        Link group1_1Link=new Link((Node)group1.getChildren().get(0),(Node)group1_1.getChildren().get(0));
        setLinkStyle(group1_1Link);
        group1.addChild(group1_1);
        group1.addChild(group1_1Link);

//layoutNetwork is a temporary network which is used to arrange the layout.
//The layout has been saved in ClientProperty when generating the group.
        layoutDatabox.addElementWithDescendant(group1);
        layoutNetwork.doLayout((Integer)group1.getClientProperty("layout"),false);
        recursionChild(group1);

        TDataBox box=new TDataBox();
        box.addElementWithDescendant(group1);
        box.addElement(gatewayNode);

        group1.putGroupOpaque(true);
        group1.putGroupFillColor(new Color(154,206,254));
        network.setDataBox(box);
        this.setLayout(new GridLayout(1,3));
        this.add(network);

        Layer layer=new Layer();
        box.getLayerModel().addLayer(layer);
        box.getLayerModel().moveToTop(layer);

        Link link1=new Link(group1,gatewayNode);
        setLinkStyle(link1);
        link1.setLinkType(TWaverConst.LINK_TYPE_ORTHOGONAL);
        link1.setLayerID(layer.getID());
        box.addElement(link1);
    }

    /**
     * arrange the layout:to recurse the nested group
     * @param group
     */
    private void recursionChild(Group group){
        for(int i=0;i<group.getChildren().size();i++){
            Element element= (Element) group.getChildren().get(i);
            if(element instanceof Group){
                Group childGroup=((Group)element);
                recursionChild(childGroup);//If there are sub-groups, the recursion will be continued.
//to combine the two ways together and add the sub-group to be in a layout into the SelectonModel of layoutNetwork
                layoutDatabox.getSelectionModel().clearSelection();
                layoutDatabox.getSelectionModel().appendSelection(childGroup.getChildren());
                layoutNetwork.doLayout((Integer) ((Group) element).getClientProperty("layout"), false);
                layoutDatabox.getSelectionModel().clearSelection();
            }
        }
    }
    /**
     * to generate the test group and node
     * @param childCount
     * @param layout
     * @return
     */
    private Group createGroup(int childCount,int layout){
        Group group=new Group();
        group.setExpand(true);
        group.putClientProperty("layout",layout);

        ResizableNode router=new ResizableNode();
        router.putCustomDraw(true);
        router.putCustomDrawShapeFactory(TWaverConst.SHAPE_RECTANGLE);
        router.putCustomDrawGradient(false);
        router.putCustomDrawFillColor(new Color(254, 254, 206));
        router.setSize(60, 20);
        router.setName("Router");
        router.putLabelPosition(TWaverConst.POSITION_CENTER);
        group.addChild(router);

        for(int i=0;i<childCount;i++){
            Node childNode=new Node();
            Link link=new Link(router,childNode);
            childNode.putCustomDraw(true);
            childNode.putCustomDrawShapeFactory(TWaverConst.SHAPE_RECTANGLE);
            childNode.putCustomDrawGradient(false);
            childNode.putCustomDrawFillColor(new Color(254,202,2));
            childNode.setName("C"+i);
            childNode.putLabelPosition(TWaverConst.POSITION_CENTER);

            setLinkStyle(link);
            group.addChild(childNode);
            group.addChild(link);
        }
        return group;
    }

    /**
     * to set the style of the link
     * @param link
     */
    public void setLinkStyle(Link link){
        link.putLinkColor(Color.black);
        link.putLinkOutlineWidth(0);
        link.putLinkWidth(1);
        link.putLinkAntialias(true);
        link.putLinkToArrow(true);
        link.putLinkToArrowOutline(false);
    }
    public static void main(String[] args){
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame=new JFrame("layout");
                frame.setSize(1000,700);
                frame.setContentPane(new LayoutTest());
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }
}

TWaver With JavaFX

We have paid little attention on JavaFX since JavaFX Script was not provided in Oracle. However, now we have found that in fact Oracle has attached much importance on it, for we have discovered by chance that JavaFX has developed to version 2.2 and been binding to JDK7.、
Recently I have seen someone putting up questions in our forum and asked whether there is JavaFX version in TWaver, so I have had a browse on Oracle’s website and found that it is applicable to embed JavaFX into Swing. It is quite simple and convenient to do that so I have written a Demo right away.

Effects

An Analysis on the code
There is a typical Network in the middle of the window: there is a JavaFX container in the top and bottom respectively. The top one includes a Slider, sliding which can change the RenderColor of the selected Node in TWaver. Some texts are involved in the bottom container. The name and the location of a node will be shown on the Text component when selecting and dragging the node. 

In this Demo, Swing is still the application architecture. JavaFX has provided a component named JFXpanel which can be embedded into a Swing container and JavaFX components can be put into the JFXPanel. However, attention need to be paid to the difference in the thread of Swing and JavaFX(the official text says:” JavaFX data should be accessed only on the JavaFX User thread.” and “Swing data should be changed only on the EDT.” ). Therefore, if you want to change the data of JavaFX in Swing, the encapsulation of Platform#runLater is suggested.

The code for the Text component of JavaFX that is changed when dragging a node in this example:

network.getDataBox().addElementPropertyChangeListener(new PropertyChangeListener() {
            @Override
            public void propertyChange(PropertyChangeEvent evt) {
                if("location".equals(evt.getPropertyName())){
                    Element element= (Element) evt.getSource();
                    final String name=element.getName();
                    final double x=element.getX();
                    final double y=element.getY();
                    Platform.runLater(new Runnable() {
                        @Override
                        public void run() {
                            nameText.setText(name);
                            locationText.setText("X:"+x+"   Y:"+y);
                        }
                    });
                }
            }
        });

Likewise, if you want to change the Swing data in JavaFX, the encapsulation of SwingUtilities#invokeLater is suggested.
The following is the code for the Render Color of the selected node which is changed when dragging the Slider in this example:

slider.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(ObservableValue<? extends Number> ov,
                                Number old_val,final Number new_val) {
                SwingUtilities.invokeLater(new Runnable() {
                    @Override
                    public void run() {
                        Iterator it=network.getSelectionModel().selection();
                        while (it.hasNext()){
                            Element element= (Element) it.next();
                            element.putRenderColor(new java.awt.Color(new_val.intValue()));
                        }
                    }
                });
            }
        });

 All codes:

public class Test1 {
    static TNetwork network;
    static Text nameText;
    static Text locationText;
    static  Slider slider;
    private static void initAndShowGUI() {
        initNetwork();
        JFrame frame = new JFrame("TWaver With JavaFX");
        frame.getContentPane().setLayout(new BorderLayout());

        frame.setSize(500, 300);
        frame.setVisible(true);
        frame.getContentPane().add(network);

        final JFXPanel controlFXPanel = new JFXPanel();
        frame.add(controlFXPanel,BorderLayout.NORTH);

        final JFXPanel statusFXPanel = new JFXPanel();
        frame.add(statusFXPanel,BorderLayout.SOUTH);

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        network.getDataBox().addElementPropertyChangeListener(new PropertyChangeListener() {
            @Override
            public void propertyChange(PropertyChangeEvent evt) {
                if("location".equals(evt.getPropertyName())){
                    Element element= (Element) evt.getSource();
                    final String name=element.getName();
                    final double x=element.getX();
                    final double y=element.getY();
                    Platform.runLater(new Runnable() {
                        @Override
                        public void run() {
                            nameText.setText(name);
                            locationText.setText("X:"+x+"   Y:"+y);
                        }
                    });
                }
            }
        });
        Platform.runLater(new Runnable() {
            @Override
            public void run() {
                initFX(statusFXPanel,controlFXPanel);
            }
        });
    }
    private static void initNetwork(){
        network=new TNetwork();
        twaver.Node node1=new Node();
        node1.setName("node1");
        twaver.Node node2=new Node();
        node2.setLocation(200,100);
        node2.setName("node2");
        Link link=new Link(node1,node2);
        network.getDataBox().addElement(node1);
        network.getDataBox().addElement(node2);
        network.getDataBox().addElement(link);

    }
    private static void initFX(JFXPanel statusFXPanel,JFXPanel controlFXPanel) {
        Scene scene = createStatusScene();
        statusFXPanel.setScene(scene);
        statusFXPanel.validate();

        Scene controlScene=createControlScene();
        controlFXPanel.setScene(controlScene);
        controlFXPanel.validate();

    }
    private static Scene createControlScene(){
        Group  root  =  new  Group();
        Scene  scene  =  new  Scene(root, Color.ALICEBLUE);
        HBox hbox=new HBox();
        slider =new Slider(0,16777215,0);
        slider.setPrefHeight(30);
        slider.setPrefWidth(300);
        slider.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(ObservableValue<? extends Number> ov,
                                Number old_val, final Number new_val) {
                SwingUtilities.invokeLater(new Runnable() {
                    @Override
                    public void run() {
                        Iterator it = network.getSelectionModel().selection();
                        while (it.hasNext()) {
                            Element element = (Element) it.next();
                            element.putRenderColor(new java.awt.Color(new_val.intValue()));
                        }
                    }
                });
            }
        });
        Label label=new Label("颜色：");
        label.setPrefHeight(30);
        hbox.getChildren().add(label);
        hbox.getChildren().add(slider);
        root.getChildren().add(hbox);
        return scene;
    }
    private static Scene createStatusScene() {
        Group  root  =  new  Group();
        Scene  scene  =  new  Scene(root, Color.ALICEBLUE);
        VBox vbox=new VBox();
        vbox.setPrefWidth(300);
        vbox.setPrefHeight(20);
        HBox hbox=new HBox();
        nameText=new Text();
        hbox.getChildren().add(new Label("  Name:"));
        hbox.getChildren().add(nameText);
        hbox.getChildren().add(new Text("   "));
        locationText=new Text();
        hbox.getChildren().add(new Label("Location:"));
        hbox.getChildren().add(locationText);
        vbox.getChildren().add(hbox);
        root.getChildren().add(vbox);
        return (scene);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                initAndShowGUI();
            }
        });
    }
}