Examples with ViewerPanel org.cesiumjs.cs.widgets.ViewerPanel used on opensource projects

Example 1 with ViewerPanel

use of org.cesiumjs.cs.widgets.ViewerPanel in project gwt-cs by iSergio.

the class ImageryLayersSplit method buildPanel.

@Override
public void buildPanel() {
    ViewerOptions viewerOptions = new ViewerOptions();
    viewerOptions.imageryProvider = ArcGisMapServerImageryProvider.create("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
    viewerOptions.baseLayerPicker = false;
    final ViewerPanel csVPanel = new ViewerPanel(viewerOptions);
    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) {
        // 
        }

        @Override
        public void onStop(SliderEvent e) {
        // 
        }
    });
    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);
}

Example 2 with ViewerPanel

use of org.cesiumjs.cs.widgets.ViewerPanel in project gwt-cs by iSergio.

the class KML method buildPanel.

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();
    ListBox kmlLBox = new ListBox();
    kmlLBox.addItem("KML - Global Science Facilities", GWT.getModuleBaseURL() + "SampleData/kml/facilities/facilities.kml");
    kmlLBox.addItem("KMZ with embedded data - GDP per capita", GWT.getModuleBaseURL() + "SampleData/kml/gdpPerCapita2008.kmz");
    kmlLBox.addItem("gx KML extensions - Bike Ride", GWT.getModuleBaseURL() + "SampleData/kml/bikeRide.kml");
    kmlLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent changeEvent) {
            reset();
            ListBox source = (ListBox) changeEvent.getSource();
            final Viewer viewer = csVPanel.getViewer();
            org.cesiumjs.cs.scene.Camera camera = viewer.camera;
            CanvasElement canvas = viewer.canvas();
            camera.flyHome(0);
            // camera, canvas);
            KmlDataSourceOptions kmlDataSourceOptions = new KmlDataSourceOptions();
            kmlDataSourceOptions.canvas = canvas;
            kmlDataSourceOptions.camera = camera;
            if (!source.getSelectedValue().contains("bikeRide")) {
                csVPanel.getViewer().dataSources().add(KmlDataSource.load(source.getSelectedValue(), kmlDataSourceOptions));
            } else {
                csVPanel.getViewer().dataSources().add(KmlDataSource.load(source.getSelectedValue(), kmlDataSourceOptions)).then(new Fulfill<KmlDataSource>() {

                    @Override
                    public void onFulfilled(KmlDataSource dataSource) {
                        viewer.clock().shouldAnimate = false;
                        final Entity rider = dataSource.entities.getById("tour");
                        viewer.flyTo(rider).then(new Fulfill<Boolean>() {

                            @Override
                            public void onFulfilled(Boolean value) {
                                viewer.trackedEntity = rider;
                                viewer.selectedEntity = viewer.trackedEntity;
                                viewer.clock().multiplier = 30;
                                viewer.clock().shouldAnimate = true;
                            }
                        });
                    }
                });
            }
        }
    });
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(kmlLBox, 20, 20);
    contentPanel.add(new HTML("<p>A simple KML example.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}

Example 3 with ViewerPanel

use of org.cesiumjs.cs.widgets.ViewerPanel in project gwt-cs by iSergio.

the class LoadImages method buildPanel.

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    org.cesiumjs.cs.core.PinBuilder pinBuilder = new org.cesiumjs.cs.core.PinBuilder();
    pinBuilder.fromUrlPromise(GWT.getModuleBaseURL() + "images/Cesium_Logo_Color_Overlay.png", Color.WHITE().withAlpha(0.0f), 256).then(new Fulfill<CanvasElement>() {

        @Override
        public void onFulfilled(CanvasElement value) {
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(value.toDataUrl());
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard through fromUrl";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(35, 35));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    });
    Resource.fetchImage((ResourceImageOptions) ResourceImageOptions.create(GWT.getModuleBaseURL() + "images/Cesium_Logo_Color_Overlay.png")).then(new Fulfill<JsImage>() {

        @Override
        public void onFulfilled(JsImage value) {
            Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(value.width + "px");
            canvas.setHeight(value.height + "px");
            Context2d context = canvas.getContext2d();
            context.scale(0.1, 0.1);
            context.drawImage((ImageElement) (Object) value, 0, 0);
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl());
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard through canvas";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(45, 45));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    });
    // CORS not loaded
    Resource.fetchImage((ResourceImageOptions) ResourceImageOptions.create("https://www.linux.org.ru/tango/img/games-logo.png")).then(new Fulfill<JsImage>() {

        @Override
        public void onFulfilled(JsImage value) {
            Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(value.width + "px");
            canvas.setHeight(value.height + "px");
            Context2d context = canvas.getContext2d();
            context.scale(0.1, 0.1);
            context.drawImage((ImageElement) (Object) value, 0, 0);
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl());
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(55, 55));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    });
    // Cors not loaded!
    final JsImage imageAmz = new JsImage();
    imageAmz.crossOrigin = "*";
    imageAmz.onload = new JsImage.Listener() {

        @Override
        public void function() {
            Cesium.log(imageAmz);
            /*Canvas canvas = Canvas.createIfSupported();
                canvas.setWidth(imageAmz.width + "px");
                canvas.setHeight(imageAmz.height + "px");
                Context2d context = canvas.getContext2d();
                context.scale(0.1, 0.1);
                context.drawImage((ImageElement) (Object) imageAmz, 0, 0);*/
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(imageAmz);
            // billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl("image/png"));
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(65, 65));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    };
    imageAmz.src = "https://d1.awsstatic.com/products/cloudfront/cloudfront-100_PoP_600x400.4a1edd6022833c54c41370ad9f615ae818350a23.png";
    // Worked, have Access-Control-Allow-Origin: *
    final JsImage imageWiki = new JsImage();
    imageWiki.crossOrigin = "*";
    imageWiki.onload = new JsImage.Listener() {

        @Override
        public void function() {
            Cesium.log(imageWiki);
            Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(imageWiki.width + "px");
            canvas.setHeight(imageWiki.height + "px");
            Context2d context = canvas.getContext2d();
            context.drawImage((ImageElement) (Object) imageWiki, 0, 0);
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl("image/png"));
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(75, 75));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    };
    imageWiki.src = "https://ru.wikipedia.org/static/images/project-logos/ruwiki-2x.png";
    contentPanel.add(new HTML("<p>Cluster labels, billboards and points.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}

Example 4 with ViewerPanel

use of org.cesiumjs.cs.widgets.ViewerPanel in project gwt-cs by iSergio.

the class Models3D method buildPanel.

@Override
public void buildPanel() {
    ViewerOptions csViewerOptions = new ViewerOptions();
    csViewerOptions.infoBox = false;
    csViewerOptions.selectionIndicator = false;
    csViewerOptions.shadows = false;
    csVPanel = new ViewerPanel(csViewerOptions);
    ModelGraphicsOptions modelGraphicsOptions = new ModelGraphicsOptions();
    modelGraphicsOptions.uri = new ConstantProperty<>(GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.glb");
    modelGraphicsOptions.minimumPixelSize = new ConstantProperty<>(128);
    modelGraphicsOptions.maximumScale = new ConstantProperty<>(20000);
    ModelGraphics modelGraphics = new ModelGraphics(modelGraphicsOptions);
    Cartesian3 position = Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
    double heading = Math.toRadians(135);
    double pitch = 0;
    double roll = 0;
    Quaternion orientation = Transforms.headingPitchRollQuaternion(position, new org.cesiumjs.cs.core.HeadingPitchRoll(heading, pitch, roll));
    EntityOptions entityOptions = new EntityOptions();
    entityOptions.name = GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.glb";
    entityOptions.position = new ConstantPositionProperty(position);
    entityOptions.orientation = new ConstantProperty<>(orientation);
    entityOptions.model = modelGraphics;
    csVPanel.getViewer().trackedEntity = csVPanel.getViewer().entities().add(entityOptions);
    final ListBox modelsLBox = new ListBox();
    modelsLBox.addItem("Aircraft", "0");
    modelsLBox.addItem("Ground vehicle", "1");
    modelsLBox.addItem("Hot Air Balloon", "2");
    modelsLBox.addItem("Milk truck", "3");
    modelsLBox.addItem("Skinned character", "4");
    modelsLBox.addChangeHandler(new ChangeHandler() {

        @Override
        public void onChange(ChangeEvent changeEvent) {
            csVPanel.getViewer().entities().removeAll();
            switch(modelsLBox.getSelectedValue()) {
                case "0":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.glb", 5000.0);
                    break;
                case "1":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumGround/Cesium_Ground.glb", 0);
                    break;
                case "2":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumBalloon/CesiumBalloon.glb", 1000.0);
                    break;
                case "3":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb", 0);
                    break;
                case "4":
                    createModel(GWT.getModuleBaseURL() + "SampleData/models/CesiumMan/Cesium_Man.glb", 0);
                    break;
                default:
                    break;
            }
        }
    });
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(modelsLBox, 20, 20);
    contentPanel.add(new HTML("<p>Create 3D models using glTF.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}

Example 5 with ViewerPanel

use of org.cesiumjs.cs.widgets.ViewerPanel in project gwt-cs by iSergio.

the class ParticleSystem method buildPanel.

@Override
public void buildPanel() {
    ViewerPanel csVPanel = new ViewerPanel();
    // Set the random number seed for consistent results.
    Math.setRandomNumberSeed(3);
    // Make sure viewer is at the desired time.
    csVPanel.getViewer().clock().startTime = start.clone();
    csVPanel.getViewer().clock().stopTime = stop.clone();
    csVPanel.getViewer().clock().currentTime = start.clone();
    // Loop at the end
    csVPanel.getViewer().clock().clockRange = ClockRange.LOOP_STOP();
    csVPanel.getViewer().clock().multiplier = 1;
    // Set timeline to simulation bounds
    csVPanel.getViewer().timeline().zoomTo(start, stop);
    // Compute the entity position property.
    circularPosition = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
    staticPosition = Cartesian3.fromDegrees(-112.110693, 36.0994841, 1000);
    TimeIntervalOptions timeIntervalOptions = new TimeIntervalOptions();
    timeIntervalOptions.start = start;
    timeIntervalOptions.stop = stop;
    ModelGraphicsOptions modelGraphicsOptions = new ModelGraphicsOptions();
    modelGraphicsOptions.uri = new ConstantProperty<>(GWT.getModuleBaseURL() + "SampleData/models/CesiumAir/Cesium_Air.gltf");
    modelGraphicsOptions.minimumPixelSize = new ConstantProperty<>(64);
    EntityOptions entityOptions = new EntityOptions();
    entityOptions.availability = new TimeIntervalCollection(new TimeInterval[] { new TimeInterval(timeIntervalOptions) });
    entityOptions.model = new ModelGraphics(modelGraphicsOptions);
    entityOptions.position = new ConstantPositionProperty(staticPosition);
    entity = csVPanel.getViewer().entities().add(entityOptions);
    csVPanel.getViewer().trackedEntity = entity;
    ParticleSystemOptions particleSystemOptions = new ParticleSystemOptions();
    particleSystemOptions.image = GWT.getModuleBaseURL() + "SampleData/fire.png";
    particleSystemOptions.startColor = Color.RED().withAlpha(0.7f);
    particleSystemOptions.endColor = Color.YELLOW().withAlpha(0.3f);
    particleSystemOptions.startScale = viewModel.startScale;
    particleSystemOptions.endScale = viewModel.endScale;
    particleSystemOptions.minimumLife = viewModel.minimumLife;
    particleSystemOptions.maximumLife = viewModel.maximumLife;
    particleSystemOptions.minimumSpeed = viewModel.minimumSpeed;
    particleSystemOptions.maximumSpeed = viewModel.maximumSpeed;
    particleSystemOptions.minimumWidth = viewModel.particleSize;
    particleSystemOptions.minimumHeight = viewModel.particleSize;
    particleSystemOptions.maximumWidth = viewModel.particleSize;
    particleSystemOptions.maximumHeight = viewModel.particleSize;
    particleSystemOptions.rate = viewModel.rate;
    particleSystemOptions.bursts = new ParticleBurst[] { ParticleBurst.create(5.0, 300, 500), ParticleBurst.create(10.0, 50, 100), ParticleBurst.create(15.0, 200, 300) };
    particleSystemOptions.lifeTime = 16;
    particleSystemOptions.emitter = new CircleEmitter(0.5);
    particleSystemOptions.emitterModelMatrix = computeEmitterModelMatrix();
    particleSystemOptions.forces = new org.cesiumjs.cs.scene.particle.ParticleSystem.ApplyForce[] { new org.cesiumjs.cs.scene.particle.ParticleSystem.ApplyForce() {

        @Override
        public void function(Particle particle, double dt) {
            Cartesian3 position = particle.position;
            Cartesian3.normalize(position, gravityScratch);
            Cartesian3.multiplyByScalar(gravityScratch, viewModel.gravity * dt, gravityScratch);
            particle.velocity = Cartesian3.add(particle.velocity, gravityScratch, particle.velocity);
        }
    } };
    particleSystem = (org.cesiumjs.cs.scene.particle.ParticleSystem) csVPanel.getViewer().scene().primitives().add(new org.cesiumjs.cs.scene.particle.ParticleSystem(particleSystemOptions));
    csVPanel.getViewer().scene().preRender().addEventListener(new Event.Listener() {

        @Override
        public void function(Object... o) {
            Scene scene = (Scene) o[0];
            JulianDate time = (JulianDate) o[1];
            particleSystem.modelMatrix = computeModelMatrix(entity, time);
            // Account for any changes to the emitter model matrix.
            particleSystem.emitterModelMatrix = computeEmitterModelMatrix();
            // Spin the emitter if enabled.
            if (viewModel.spin) {
                viewModel.heading += 1.0;
                viewModel.pitch += 1.0;
                viewModel.roll += 1.0;
                rotationHTBox.setValue(viewModel.heading + "");
                rotationPTBox.setValue(viewModel.pitch + "");
                rotationRTBox.setValue(viewModel.roll + "");
            }
        }
    });
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    aPanel.add(createWidget(), 20, 20);
    contentPanel.add(new HTML("<p>Particle systems.</p>"));
    contentPanel.add(aPanel);
    initWidget(contentPanel);
}