Commit 53855fe2 authored by iSergio's avatar iSergio
Browse files

Fix example

parent 5c05c851

cesiumjs4gwt-showcase/src/main/java/org/cleanlogic/cesiumjs4gwt/showcase/examples/ImageryLayersSplit.java

+62 −54
Original line number Diff line number Diff line
@@ -17,22 +17,24 @@ 
package org.cleanlogic.cesiumjs4gwt.showcase.examples;



import com.google.gwt.core.client.GWT;

import com.google.gwt.user.client.ui.AbsolutePanel;

import com.google.gwt.dom.client.Element;

import com.google.gwt.dom.client.Style;

import com.google.gwt.event.logical.shared.AttachEvent;

import com.google.gwt.user.client.ui.HTML;

import org.cesiumjs.cs.collections.ImageryLayerCollection;

import org.cesiumjs.cs.core.Credit;

import org.cesiumjs.cs.core.ScreenSpaceEventHandler;

import org.cesiumjs.cs.core.enums.ScreenSpaceEventType;

import org.cesiumjs.cs.core.events.MouseMoveEvent;

import org.cesiumjs.cs.scene.ImageryLayer;

import org.cesiumjs.cs.scene.enums.ImagerySplitDirection;

import org.cesiumjs.cs.scene.enums.SplitDirection;

import org.cesiumjs.cs.scene.providers.ArcGisMapServerImageryProvider;

import org.cesiumjs.cs.scene.providers.TileMapServiceImageryProvider;

import org.cesiumjs.cs.scene.providers.options.TileMapServiceImageryProviderOptions;

import org.cesiumjs.cs.scene.providers.IonImageryProvider;

import org.cesiumjs.cs.scene.providers.options.IonImageryProviderOptions;

import org.cesiumjs.cs.widgets.Viewer;

import org.cesiumjs.cs.widgets.ViewerPanel;

import org.cesiumjs.cs.widgets.options.ViewerOptions;

import org.cleanlogic.cesiumjs4gwt.showcase.basic.AbstractExample;

import org.cleanlogic.cesiumjs4gwt.showcase.components.store.ShowcaseExampleStore;

import org.cleanlogic.cesiumjs4gwt.showcase.examples.slider.Slider;

import org.cleanlogic.cesiumjs4gwt.showcase.examples.slider.SliderEvent;

import org.cleanlogic.cesiumjs4gwt.showcase.examples.slider.SliderListener;



import javax.inject.Inject;
@@ -40,7 +42,10 @@ import javax.inject.Inject; 
 * @author Serge Silaev aka iSergio

 */

public class ImageryLayersSplit extends AbstractExample {



    private ViewerPanel csVPanel;

    private Viewer viewer;

    private Element slider;

    private boolean moveActive = false;

    @Inject

    public ImageryLayersSplit(ShowcaseExampleStore store) {

        super("Imagery Layers Split", "Use the split property to only show layers on one side of a slider.",
@@ -51,63 +56,66 @@ public class ImageryLayersSplit extends AbstractExample { 
    public void buildPanel() {

        ViewerOptions viewerOptions = new ViewerOptions();

        viewerOptions.imageryProvider = ArcGisMapServerImageryProvider

                .create("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

                .create("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

        viewerOptions.baseLayerPicker = false;

        final ViewerPanel csVPanel = new ViewerPanel(viewerOptions);

        viewerOptions.infoBox = false;

        csVPanel = new ViewerPanel(viewerOptions);

        viewer = csVPanel.getViewer();



        ImageryLayerCollection layers = csVPanel.getViewer().imageryLayers();

        TileMapServiceImageryProviderOptions tileMapServiceImageryProviderOptions = new TileMapServiceImageryProviderOptions();

        tileMapServiceImageryProviderOptions.url = "https://cesiumjs.org/blackmarble";

        tileMapServiceImageryProviderOptions.credit = Credit.create("Black Marble imagery courtesy NASA Earth Observatory");

        tileMapServiceImageryProviderOptions.flipXY = true;

        ImageryLayer blackMarble = layers

                .addImageryProvider(new TileMapServiceImageryProvider(tileMapServiceImageryProviderOptions));

        blackMarble.splitDirection = ImagerySplitDirection.LEFT();

        ImageryLayer earthAtNight = layers.addImageryProvider(new IonImageryProvider(IonImageryProviderOptions.create(3812)));

        earthAtNight.splitDirection = SplitDirection.LEFT(); // Only show to the left of the slider.



        slider = csVPanel.getElement().getOwnerDocument().createDivElement();

        slider.setId("slider");

        slider.getStyle().setPosition(Style.Position.ABSOLUTE);

        slider.getStyle().setBackgroundColor("#d3d3d3");

        slider.getStyle().setZIndex(9999);

        slider.getStyle().setCursor(Style.Cursor.COL_RESIZE);

        csVPanel.getViewer().container().appendChild(slider);



        contentPanel.add(csVPanel);

        contentPanel.add(new HTML("<p>Use the split property to only show layers on one side of a slider.</p>"));



        csVPanel.getViewer().scene().imagerySplitPosition = 0.5;

        initWidget(contentPanel);



        Slider slider = new Slider("Slider", 0, 100, 50);

        slider.setStep(1);

        slider.setWidth("100%");

        slider.addListener(new SliderListener() {

            @Override

            public void onStart(SliderEvent e) {

                //

            }

        ScreenSpaceEventHandler handler = new ScreenSpaceEventHandler(slider);

        handler.setInputAction(event -> moveActive = true, ScreenSpaceEventType.LEFT_DOWN());

        handler.setInputAction(event -> moveActive = true, ScreenSpaceEventType.PINCH_START());

        handler.setInputAction(this::move, ScreenSpaceEventType.MOUSE_MOVE());

        handler.setInputAction(this::move, ScreenSpaceEventType.PINCH_MOVE());

        handler.setInputAction(event -> moveActive = false, ScreenSpaceEventType.LEFT_UP());

        handler.setInputAction(event -> moveActive = false, ScreenSpaceEventType.PINCH_END());



            @Override

            public boolean onSlide(SliderEvent e) {

                Slider source = e.getSource();

                double value = source.getValue() / 100.;

                csVPanel.getViewer().scene().imagerySplitPosition = value;

                return true;

        this.addAttachHandler(this::resizeSlider);

    }



    @Override

            public void onChange(SliderEvent e) {

                //

    public String[] getSourceCodeURLs() {

        String[] sourceCodeURLs = new String[1];

        sourceCodeURLs[0] = GWT.getModuleBaseURL() + "examples/" + "ImageryLayersSplit.txt";

        return sourceCodeURLs;

    }



            @Override

            public void onStop(SliderEvent e) {

                //

    private void resizeSlider(AttachEvent event) {

        slider.getStyle().setTop(csVPanel.getElement().getAbsoluteTop(), Style.Unit.PX);

        slider.getStyle().setLeft(50, Style.Unit.PCT);

        slider.getStyle().setWidth(5, Style.Unit.PX);

        slider.getStyle().setHeight(csVPanel.getElement().getClientHeight(), Style.Unit.PX);

        viewer.scene().splitPosition = (double) (slider.getOffsetLeft() - slider.getParentElement().getAbsoluteLeft())

                / slider.getParentElement().getOffsetWidth();

    }

        });



        AbsolutePanel aPanel = new AbsolutePanel();

        aPanel.add(csVPanel);

        aPanel.add(slider, 0, 5);



        contentPanel.add(aPanel);

        contentPanel.add(new HTML("<p>Use the split property to only show layers on one side of a slider.</p>"));



        initWidget(contentPanel);

    private void move(Object event) {

        if (!moveActive) {

            return;

        }

        MouseMoveEvent movement = (MouseMoveEvent) event;



    @Override

    public String[] getSourceCodeURLs() {

        String[] sourceCodeURLs = new String[1];

        sourceCodeURLs[0] = GWT.getModuleBaseURL() + "examples/" + "ImageryLayersSplit.txt";

        return sourceCodeURLs;

        double relativeOffset = movement.endPosition.x;

        double splitPosition = (slider.getOffsetLeft() + relativeOffset

                - slider.getParentElement().getAbsoluteLeft()) / slider.getParentElement().getOffsetWidth();

        slider.getStyle().setLeft(100.0 * splitPosition, Style.Unit.PCT);

        viewer.scene().splitPosition = splitPosition;

    }

}

cesiumjs4gwt-showcase/src/main/resources/org/cleanlogic/cesiumjs4gwt/public/examples/ImageryLayersSplit.txt

+64 −53
Original line number Diff line number Diff line 
package org.cleanlogic.cesiumjs4gwt.showcase.examples;



import com.google.gwt.core.client.GWT;

import com.google.gwt.user.client.ui.AbsolutePanel;

import com.google.gwt.dom.client.Element;

import com.google.gwt.dom.client.Style;

import com.google.gwt.event.logical.shared.AttachEvent;

import com.google.gwt.user.client.ui.HTML;

import org.cesiumjs.cs.Cesium;

import org.cesiumjs.cs.collections.ImageryLayerCollection;

import org.cesiumjs.cs.core.Credit;

import org.cesiumjs.cs.core.ScreenSpaceEventHandler;

import org.cesiumjs.cs.core.enums.ScreenSpaceEventType;

import org.cesiumjs.cs.core.events.MouseMoveEvent;

import org.cesiumjs.cs.scene.ImageryLayer;

import org.cesiumjs.cs.scene.enums.ImagerySplitDirection;

import org.cesiumjs.cs.scene.enums.SplitDirection;

import org.cesiumjs.cs.scene.providers.ArcGisMapServerImageryProvider;

import org.cesiumjs.cs.scene.providers.options.TileMapServiceImageryProviderOptions;

import org.cesiumjs.cs.scene.providers.IonImageryProvider;

import org.cesiumjs.cs.scene.providers.options.IonImageryProviderOptions;

import org.cesiumjs.cs.widgets.Viewer;

import org.cesiumjs.cs.widgets.ViewerPanel;

import org.cesiumjs.cs.widgets.options.ViewerOptions;

import org.cleanlogic.cesiumjs4gwt.showcase.basic.AbstractExample;

import org.cleanlogic.cesiumjs4gwt.showcase.components.store.ShowcaseExampleStore;

import org.cleanlogic.cesiumjs4gwt.showcase.examples.slider.Slider;

import org.cleanlogic.cesiumjs4gwt.showcase.examples.slider.SliderEvent;

import org.cleanlogic.cesiumjs4gwt.showcase.examples.slider.SliderListener;



import javax.inject.Inject;



/**

 * @author Serge Silaev aka iSergio <s.serge.b@gmail.com>

 * @author Serge Silaev aka iSergio

 */

public class ImageryLayersSplit extends AbstractExample {



    private ViewerPanel csVPanel;

    private Viewer viewer;

    private Element slider;

    private boolean moveActive = false;

    @Inject

    public ImageryLayersSplit(ShowcaseExampleStore store) {

        super("Imagery Layers Split", "Use the split property to only show layers on one side of a slider.", new String[]{"Showcase", "Cesium", "3d", "Viewer", "Slider", "Split"}, store);

        super("Imagery Layers Split", "Use the split property to only show layers on one side of a slider.",

                new String[]{"Showcase", "Cesium", "3d", "Viewer", "Slider", "Split"}, store);

    }



    @Override

    public void buildPanel() {

        ViewerOptions viewerOptions = new ViewerOptions();

        viewerOptions.imageryProvider = ArcGisMapServerImageryProvider.create("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

        viewerOptions.imageryProvider = ArcGisMapServerImageryProvider

                .create("https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

        viewerOptions.baseLayerPicker = false;

        final ViewerPanel csVPanel = new ViewerPanel(viewerOptions);

        viewerOptions.infoBox = false;

        csVPanel = new ViewerPanel(viewerOptions);

        viewer = csVPanel.getViewer();



        ImageryLayerCollection layers = csVPanel.getViewer().imageryLayers();

        TileMapServiceImageryProviderOptions tileMapServiceImageryProviderOptions = new TileMapServiceImageryProviderOptions();

        tileMapServiceImageryProviderOptions.url = "https://cesiumjs.org/blackmarble";

        tileMapServiceImageryProviderOptions.credit = Credit.create("Black Marble imagery courtesy NASA Earth Observatory");

        tileMapServiceImageryProviderOptions.flipXY = true;

        ImageryLayer blackMarble = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider(tileMapServiceImageryProviderOptions));

        blackMarble.splitDirection = ImagerySplitDirection.LEFT();



        csVPanel.getViewer().scene().imagerySplitPosition = 0.5;



        Slider slider = new Slider("Slider", 0, 100, 50);

        slider.setStep(1);

        slider.setWidth("100%");

        slider.addListener(new SliderListener() {

            @Override

            public void onStart(SliderEvent e) {

                //

            }



            @Override

            public boolean onSlide(SliderEvent e) {

                Slider source = e.getSource();

                double value = source.getValue() / 100.;

                csVPanel.getViewer().scene().imagerySplitPosition = value;

                return true;

            }



            @Override

            public void onChange(SliderEvent e) {

                //

            }

        ImageryLayer earthAtNight = layers.addImageryProvider(new IonImageryProvider(IonImageryProviderOptions.create(3812)));

        earthAtNight.splitDirection = SplitDirection.LEFT(); // Only show to the left of the slider.



            @Override

            public void onStop(SliderEvent e) {

                //

            }

        });



        AbsolutePanel aPanel = new AbsolutePanel();

        aPanel.add(csVPanel);

        aPanel.add(slider, 0, 5);

        slider = csVPanel.getElement().getOwnerDocument().createDivElement();

        slider.setId("slider");

        slider.getStyle().setPosition(Style.Position.ABSOLUTE);

        slider.getStyle().setBackgroundColor("#d3d3d3");

        slider.getStyle().setZIndex(9999);

        slider.getStyle().setCursor(Style.Cursor.COL_RESIZE);

        csVPanel.getViewer().container().appendChild(slider);



        contentPanel.add(aPanel);

        contentPanel.add(csVPanel);

        contentPanel.add(new HTML("<p>Use the split property to only show layers on one side of a slider.</p>"));



        initWidget(contentPanel);



        ScreenSpaceEventHandler handler = new ScreenSpaceEventHandler(slider);

        handler.setInputAction(event -> moveActive = true, ScreenSpaceEventType.LEFT_DOWN());

        handler.setInputAction(event -> moveActive = true, ScreenSpaceEventType.PINCH_START());

        handler.setInputAction(this::move, ScreenSpaceEventType.MOUSE_MOVE());

        handler.setInputAction(this::move, ScreenSpaceEventType.PINCH_MOVE());

        handler.setInputAction(event -> moveActive = false, ScreenSpaceEventType.LEFT_UP());

        handler.setInputAction(event -> moveActive = false, ScreenSpaceEventType.PINCH_END());



        this.addAttachHandler(this::resizeSlider);

    }



    @Override
@@ -91,4 +80,26 @@ public class ImageryLayersSplit extends AbstractExample { 
        sourceCodeURLs[0] = GWT.getModuleBaseURL() + "examples/" + "ImageryLayersSplit.txt";

        return sourceCodeURLs;

    }



    private void resizeSlider(AttachEvent event) {

        slider.getStyle().setTop(csVPanel.getElement().getAbsoluteTop(), Style.Unit.PX);

        slider.getStyle().setLeft(50, Style.Unit.PCT);

        slider.getStyle().setWidth(5, Style.Unit.PX);

        slider.getStyle().setHeight(csVPanel.getElement().getClientHeight(), Style.Unit.PX);

        viewer.scene().splitPosition = (double) (slider.getOffsetLeft() - slider.getParentElement().getAbsoluteLeft())

                / slider.getParentElement().getOffsetWidth();

    }



    private void move(Object event) {

        if (!moveActive) {

            return;

        }

        MouseMoveEvent movement = (MouseMoveEvent) event;



        double relativeOffset = movement.endPosition.x;

        double splitPosition = (slider.getOffsetLeft() + relativeOffset

                - slider.getParentElement().getAbsoluteLeft()) / slider.getParentElement().getOffsetWidth();

        slider.getStyle().setLeft(100.0 * splitPosition, Style.Unit.PCT);

        viewer.scene().splitPosition = splitPosition;

    }

}