Examples with ScreenSpaceEventHandler org.cesiumjs.cs.core.ScreenSpaceEventHandler used on opensource projects

Example 1 with ScreenSpaceEventHandler

use of org.cesiumjs.cs.core.ScreenSpaceEventHandler in project gwt-cs by iSergio.

the class CameraTutorial method buildPanel.

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();
    csVPanel.addHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent clickEvent) {
            csVPanel.getViewer().canvas().focus();
        }
    }, ClickEvent.getType());
    csVPanel.getViewer().canvas().setAttribute("tabindex", "0");
    csVPanel.getViewer().scene().screenSpaceCameraController().enableRotate = false;
    csVPanel.getViewer().scene().screenSpaceCameraController().enableTranslate = false;
    csVPanel.getViewer().scene().screenSpaceCameraController().enableZoom = false;
    csVPanel.getViewer().scene().screenSpaceCameraController().enableTilt = false;
    csVPanel.getViewer().scene().screenSpaceCameraController().enableLook = false;
    handler = new ScreenSpaceEventHandler(csVPanel.getViewer().canvas());
    handler.setInputAction(new ScreenSpaceEventHandler.Listener<org.cesiumjs.cs.core.events.MouseDownEvent>() {

        @Override
        public void function(org.cesiumjs.cs.core.events.MouseDownEvent event) {
            flags.looking = true;
            mousePosition = startMousePosition = new Cartesian3(event.position.x, event.position.y, 0);
        }
    }, ScreenSpaceEventType.LEFT_DOWN());
    handler.setInputAction(new ScreenSpaceEventHandler.Listener<org.cesiumjs.cs.core.events.MouseMoveEvent>() {

        @Override
        public void function(org.cesiumjs.cs.core.events.MouseMoveEvent event) {
            mousePosition = new Cartesian3(event.endPosition.x, event.endPosition.y, 0);
        }
    }, ScreenSpaceEventType.MOUSE_MOVE());
    handler.setInputAction(new ScreenSpaceEventHandler.Listener<org.cesiumjs.cs.core.events.MouseUpEvent>() {

        @Override
        public void function(org.cesiumjs.cs.core.events.MouseUpEvent event) {
            flags.looking = false;
        }
    }, ScreenSpaceEventType.LEFT_UP());
    RootPanel.get().addDomHandler(new KeyDownHandler() {

        @Override
        public void onKeyDown(KeyDownEvent keyDownEvent) {
            setFlag(keyDownEvent.getNativeKeyCode(), true);
        }
    }, KeyDownEvent.getType());
    RootPanel.get().addDomHandler(new KeyUpHandler() {

        @Override
        public void onKeyUp(KeyUpEvent keyUpEvent) {
            setFlag(keyUpEvent.getNativeKeyCode(), false);
        }
    }, KeyUpEvent.getType());
    csVPanel.getViewer().clock().onTick.addEventListener(new Event.Listener() {

        @Override
        public void function(Object... o) {
            org.cesiumjs.cs.scene.Camera camera = csVPanel.getViewer().camera;
            // First element in array is Clock. Check this.
            if (o[0] instanceof Clock) {
                if (flags.looking) {
                    int width = csVPanel.getViewer().canvas().getClientWidth();
                    int height = csVPanel.getViewer().canvas().getClientHeight();
                    // Coordinate (0.0, 0.0) will be where the mouse was clicked.
                    double x = (mousePosition.x - startMousePosition.x) / width;
                    double y = -(mousePosition.y - startMousePosition.y) / height;
                    double lookFactor = 0.05;
                    camera.lookRight(x * lookFactor);
                    camera.lookUp(y * lookFactor);
                }
                // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
                double cameraHeight = csVPanel.getViewer().scene().globe.ellipsoid.cartesianToCartographic(camera.position).height;
                double moveRate = cameraHeight / 100.0;
                if (flags.moveForward) {
                    camera.moveForward(moveRate);
                }
                if (flags.moveBackward) {
                    camera.moveBackward(moveRate);
                }
                if (flags.moveUp) {
                    camera.moveUp(moveRate);
                }
                if (flags.moveDown) {
                    camera.moveDown(moveRate);
                }
                if (flags.moveLeft) {
                    camera.moveLeft(moveRate);
                }
                if (flags.moveRight) {
                    camera.moveRight(moveRate);
                }
            }
        }
    });
    HTML html = new HTML();
    html.setHTML("<div id=\"toolbar\">\n" + "<div>Click on the Cesium display to start.</div>\n" + "<div>w/s - move forward/backward</div>\n" + "<div>a/d - move left/right</div>\n" + "<div>q/e - move up/down</div>\n" + "<div>left mouse button down plus mouse move changes the look direction</div>\n" + "</div>");
    html.getElement().getStyle().setColor("white");
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(html, 20, 20);
    contentPanel.add(new HTML("<p>Use the camera to control the view, and create custom event handlers for input.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}

Example 2 with ScreenSpaceEventHandler

use of org.cesiumjs.cs.core.ScreenSpaceEventHandler in project gwt-cs by iSergio.

the class Tiles3DFeaturePicking method buildPanel.

@Override
public void buildPanel() {
    final ViewerPanel csVPanel = new ViewerPanel();
    nameOverlay = RootPanel.get().getElement().getOwnerDocument().createDivElement();
    csVPanel.getViewer().container().appendChild(nameOverlay);
    nameOverlay.setClassName("backdrop");
    nameOverlay.getStyle().setDisplay(Style.Display.NONE);
    nameOverlay.getStyle().setPosition(Style.Position.ABSOLUTE);
    nameOverlay.getStyle().setBottom(0, Style.Unit.PX);
    nameOverlay.getStyle().setLeft(0, Style.Unit.PX);
    // nameOverlay.style['pointer-events'] = 'none';
    nameOverlay.getStyle().setPadding(4, Style.Unit.PX);
    nameOverlay.getStyle().setBackgroundColor("black");
    Cartesian3 initialPosition = Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
    org.cesiumjs.cs.core.HeadingPitchRoll initialOrientation = org.cesiumjs.cs.core.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
    ViewOptions viewOptions = new ViewOptions();
    viewOptions.destinationPos = initialPosition;
    viewOptions.orientation = initialOrientation;
    viewOptions.endTransform = Matrix4.IDENTITY();
    csVPanel.getViewer().scene().camera().setView(viewOptions);
    // Load the NYC buildings tileset
    Cesium3DTileset tileset = (Cesium3DTileset) csVPanel.getViewer().scene().primitives().add(Cesium3DTileset.create("https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s"));
    csVPanel.getViewer().screenSpaceEventHandler().setInputAction(new ScreenSpaceEventHandler.Listener() {

        @Override
        public void function(Object event) {
            MouseMoveEvent movement = (MouseMoveEvent) event;
            // If a feature was previously highlighted, undo the highlight
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = (Cesium3DTileFeature) JsObject.undefined();
            }
            // Pick a new feature
            Cesium3DTileFeature pickedFeature = (Cesium3DTileFeature) csVPanel.getViewer().scene().pick(movement.endPosition);
            if (!Cesium.defined(pickedFeature)) {
                nameOverlay.getStyle().setDisplay(Style.Display.NONE);
                return;
            }
            // A feature was picked, so show it's overlay content
            nameOverlay.getStyle().setDisplay(Style.Display.BLOCK);
            nameOverlay.getStyle().setBottom(csVPanel.getViewer().canvas().getClientHeight() - movement.endPosition.y + 26, Style.Unit.PX);
            nameOverlay.getStyle().setLeft(movement.endPosition.x + 26, Style.Unit.PX);
            String name = pickedFeature.getProperty("name").toString();
            if (!Cesium.defined(name)) {
                name = pickedFeature.getProperty("id").toString();
            }
            nameOverlay.setInnerHTML("<font color=\"white\">" + name + "</font>");
            // Highlight the feature if it's not already selected.
            if (!pickedFeature.equals(selected.feature)) {
                highlighted.feature = pickedFeature;
                Color.clone(pickedFeature.color, highlighted.originalColor);
                pickedFeature.color = Color.YELLOW();
            }
        }
    }, ScreenSpaceEventType.MOUSE_MOVE());
    final Function clickHandler = csVPanel.getViewer().screenSpaceEventHandler().getInputAction(ScreenSpaceEventType.LEFT_CLICK());
    csVPanel.getViewer().screenSpaceEventHandler().setInputAction(new ScreenSpaceEventHandler.Listener() {

        @Override
        public void function(Object event) {
            MouseClickEvent movement = (MouseClickEvent) event;
            // If a feature was previously selected, undo the highlight
            if (Cesium.defined(selected.feature)) {
                selected.feature.color = selected.originalColor;
                selected.feature = (Cesium3DTileFeature) JsObject.undefined();
            }
            // Pick a new feature
            Cesium3DTileFeature pickedFeature = (Cesium3DTileFeature) csVPanel.getViewer().scene().pick(movement.position);
            if (!Cesium.defined(pickedFeature)) {
                GWT.log("undefined");
                clickHandler.exec();
                return;
            }
            // Select the feature if it's not already selected
            if (selected.feature == pickedFeature) {
                return;
            }
            selected.feature = pickedFeature;
            // Save the selected feature's original color
            if (pickedFeature == highlighted.feature) {
                Color.clone(highlighted.originalColor, selected.originalColor);
                highlighted.feature = (Cesium3DTileFeature) JsObject.undefined();
            } else {
                Color.clone(pickedFeature.color, selected.originalColor);
            }
            // Highlight newly selected feature
            pickedFeature.color = Color.LIME();
            // Set feature infobox description
            String featureName = pickedFeature.getProperty("name").toString();
            selectedEntity.name = featureName;
            selectedEntity.description = new ConstantProperty<>("Loading <div class=\"cesium-infoBox-loading\"></div>");
            csVPanel.getViewer().selectedEntity = selectedEntity;
            selectedEntity.description = new ConstantProperty<>("<table class=\"cesium-infoBox-defaultTable\"><tbody>" + "<tr><th>BIN</th><td>" + pickedFeature.getProperty("BIN").toString() + "</td></tr>" + "<tr><th>DOITT ID</th><td>" + pickedFeature.getProperty("DOITT_ID").toString() + "</td></tr>" + "<tr><th>SOURCE ID</th><td>" + pickedFeature.getProperty("SOURCE_ID").toString() + "</td></tr>" + "</tbody></table>");
        }
    }, ScreenSpaceEventType.LEFT_CLICK());
    contentPanel.add(new HTML("<p>Pick features in a 3D Tiles tileset.</p>"));
    contentPanel.add(csVPanel);
    initWidget(contentPanel);
}