Announcement

bc · 12 Nov 2011, 09:11

Never mind. It was in the 2.5.x nightly build.

bc · 12 Nov 2011, 09:36

I had a similar post earlier in this thread. But I see this behavior with the provided sample code also. For example in the first drawpane in the sample, if the line is redrawn to extend past the right edge of the drawpane (and overflow is set to scroll), the line is not drawn beyond the edge. However if you slide the provided slide bar to zoom out then the line is visible.

This looks like a bug in the initial rendering of anything that is beyond the edge of the drawpane.

bc · 12 Nov 2011, 13:52

Is it possible to specify background color, font color etc for a DrawLabel? I tried different variations of this for specifying style but it didn't seem to have any effect. According to the javadoc this is supposed to take css type style specification.

Code:

DrawLabel d = new DrawLabel();
d.setFontStyle("color:#FFFFFF;font-family: 'Trebuchet MS', Helvetica, sans-serif;background-color:#000000;");

**Isomorphic** · 14 Nov 2011, 14:30

@bc what are you using? Be sure to use SGWT 3.0 or SC 8.2 nightlies. If you have the latest and you're seeing some kind of issue with lines clipping inappropriately, please show sample code and indicate what browser(s) have the problem, and all the other information needed for a bug report (GWT version, etc).

As far as DrawLabel.setFontStyle(), see the docs - it controls only normal vs bold vs italic. Because of how the underlying browser engines work, you can't just provide a string of normal CSS with several settings combined. You need to call the individual setFontWeight(), setFontFamily() etc APIs.

bc · 23 Nov 2011, 15:46

Hi, thanks for your response.

I am using Firefox 5.0 with SmartGwt 3.0 (nightly build). I copied over the drawing.jar file from SmartGwt2.5 to the lib directory in SmartGwt3.0.

The code below is basically the sample code posted earlier with changes to two lines - one to set the scroll attribute of the draw pane to SCROLL (line 98) and the other to extend the line (in the first draw pane) past the right edge of the draw pane (line 209). What I see when I run it is that the scroll bar does not allow me to go far enough right to be able to see the right edge of the line.

Code:

package com.sample.client;

import java.util.LinkedHashMap;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.types.LineCap;
import com.smartgwt.client.types.LinePattern;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Slider;
import com.smartgwt.client.widgets.drawing.ColorStop;
import com.smartgwt.client.widgets.drawing.DrawCurve;
import com.smartgwt.client.widgets.drawing.DrawItem;
import com.smartgwt.client.widgets.drawing.DrawLabel;
import com.smartgwt.client.widgets.drawing.DrawLine;
import com.smartgwt.client.widgets.drawing.DrawLinePath;
import com.smartgwt.client.widgets.drawing.DrawOval;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.drawing.DrawPath;
import com.smartgwt.client.widgets.drawing.DrawRect;
import com.smartgwt.client.widgets.drawing.DrawSector;
import com.smartgwt.client.widgets.drawing.DrawTriangle;
import com.smartgwt.client.widgets.drawing.LinearGradient;
import com.smartgwt.client.widgets.drawing.Point;
import com.smartgwt.client.widgets.drawing.RadialGradient;
import com.smartgwt.client.widgets.drawing.SimpleGradient;
import com.smartgwt.client.widgets.drawing.events.ClickEvent;
import com.smartgwt.client.widgets.drawing.events.ClickHandler;
import com.smartgwt.client.widgets.drawing.events.MouseDownEvent;
import com.smartgwt.client.widgets.drawing.events.MouseDownHandler;
import com.smartgwt.client.widgets.drawing.events.MouseUpEvent;
import com.smartgwt.client.widgets.drawing.events.MouseUpHandler;
import com.smartgwt.client.widgets.events.ValueChangedEvent;
import com.smartgwt.client.widgets.events.ValueChangedHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.events.ItemChangedEvent;
import com.smartgwt.client.widgets.form.events.ItemChangedHandler;
import com.smartgwt.client.widgets.form.fields.ColorPickerItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.SliderItem;
import com.smartgwt.client.widgets.form.fields.SpinnerItem;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class FromScratch implements EntryPoint {
    
    private DrawPane drawPane;

    private DynamicForm lineStyleDynamicForm;

    private DrawPane drawPane2;

    private DrawPane drawPane3;

    private DynamicForm simpleGradientDynamicForm;

    private DynamicForm linearGradientDynamicForm;

    private DrawPane drawPane4;

    private DynamicForm linearGradientSlidersDynamicForm;

    private DrawPane drawPane5;

    private DynamicForm radialGradientDynamicForm;

    private DynamicForm radielGradientSliderDynamicForm;


    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        
        shapeGalleryZoomRotate();
        
        lineStyles();
        
        simpleGradient();
        
        linearGradient();

        radialGradient();
        
        /**/
    }

    private void shapeGalleryZoomRotate() {
        drawPane = new DrawPane();
        drawPane.setHeight(450);
        drawPane.setWidth(700);
        drawPane.setLeft(25);
        drawPane.setShowEdges(true);
        drawPane.setEdgeSize(4);
        drawPane.setBackgroundColor("papayawhip");
        drawPane.setOverflow(Overflow.SCROLL);	//  <---- changed to SCROLL
        drawPane.setCursor(Cursor.AUTO);
        drawPane.setID("DrawPane1");
        drawPane.draw();

        DrawLabel triangleLabel = new DrawLabel();
        triangleLabel.setDrawPane(drawPane);
        triangleLabel.setLeft(50);
        triangleLabel.setTop(175);
        triangleLabel.setContents("Triangle");
        triangleLabel.draw();
     
        DrawTriangle drawTriangle = new DrawTriangle();
        drawTriangle.setDrawPane(drawPane);
        drawTriangle.setPoints(new Point(100,50),new Point(150,150),new Point(50,150));
        drawTriangle.setID("DrawTriangel1");
        drawTriangle.draw();

        DrawLabel curveLabel = new DrawLabel();
        curveLabel.setDrawPane(drawPane);
        curveLabel.setLeft(200);
        curveLabel.setTop(175);
        curveLabel.setContents("Curve");
        curveLabel.draw();
        
        DrawCurve drawCurve = new DrawCurve();
        drawCurve.setDrawPane(drawPane);
        drawCurve.setStartPoint(new Point(200,50));
        drawCurve.setEndPoint(new Point(300,150));
        drawCurve.setControlPoint1(new Point(250,0));
        drawCurve.setControlPoint2(new Point(250,200));
        drawCurve.draw();

        DrawLabel linePathLabel = new DrawLabel();
        linePathLabel.setDrawPane(drawPane);
        linePathLabel.setLeft(350);
        linePathLabel.setTop(175);
        linePathLabel.setContents("Line Path");
        linePathLabel.draw();
        
        DrawLinePath drawLinePath = new DrawLinePath();
        drawLinePath.setDrawPane(drawPane);
        drawLinePath.setID("drawLinePath1");
        drawLinePath.setStartPoint(new Point(350,50));
        drawLinePath.setEndPoint(new Point(450,150));
        drawLinePath.draw();

        DrawLabel pathLabel = new DrawLabel();
        pathLabel.setDrawPane(drawPane);
        pathLabel.setLeft(500);
        pathLabel.setTop(175);
        pathLabel.setContents("Path");
        pathLabel.draw();
        
        DrawPath drawPath = new DrawPath();
        drawPath.setDrawPane(drawPane);
        drawPath.setID("DrawPath1");
        drawPath.setPoints(
                new Point(500,50),
                new Point(525,50),
                new Point(550,75),
                new Point(575,75),
                new Point(600,75),
                new Point(600,125),
                new Point(575,125),
                new Point(550,125),
                new Point(525,150),
                new Point(500,150)
        );
        drawPath.draw();

        DrawLabel ovalLabel = new DrawLabel();
        ovalLabel.setDrawPane(drawPane);
        ovalLabel.setLeft(50);
        ovalLabel.setTop(415);
        ovalLabel.setContents("Oval");
        ovalLabel.draw();
        
        DrawOval drawOval = new DrawOval();
        drawOval.setDrawPane(drawPane);
        drawOval.setLeft(50);
        drawOval.setTop(300);
        drawOval.setWidth(100);
        drawOval.setHeight(100);
        drawOval.draw();

        DrawLabel rectLabel = new DrawLabel();
        rectLabel.setDrawPane(drawPane);
        rectLabel.setLeft(200);
        rectLabel.setTop(415);
        rectLabel.setContents("Rect");
        rectLabel.draw();
        
        DrawRect drawRect = new DrawRect();
        drawRect.setDrawPane(drawPane);
        drawRect.setLeft(200);
        drawRect.setTop(300);
        drawRect.setWidth(150);
        drawRect.setHeight(100);
        drawRect.draw();

        DrawLabel lineLabel = new DrawLabel();
        lineLabel.setDrawPane(drawPane);
        lineLabel.setLeft(400);
        lineLabel.setTop(415);
        lineLabel.setContents("Line");
        lineLabel.draw();
        
        DrawLine drawLine = new DrawLine();
        drawLine.setDrawPane(drawPane);
        drawLine.setStartPoint(new Point(400,300));
        drawLine.setEndPoint(new Point(2000,100));	// <----- changed end point to be beyond the right edge of the draw pane
        drawLine.draw();

        DrawLabel sectorLabel = new DrawLabel();
        sectorLabel.setDrawPane(drawPane);
        sectorLabel.setLeft(550);
        sectorLabel.setTop(415);
        sectorLabel.setContents("Sector");
        sectorLabel.draw();
        
        DrawSector drawSector = new DrawSector();
        drawSector.setDrawPane(drawPane);
        drawSector.setCenterPoint(new Point(550,300));
        drawSector.setStartAngle(0);
        drawSector.setEndAngle(90);
        drawSector.setRadius(100);
        drawSector.draw();

        DrawItem[] drawItems = drawPane.getDrawItems();
        for (int i = 0; i < drawItems.length; i++) {
            DrawItem drawItem = drawItems[i];
            drawItem.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.logWarn("Click on " + event.getSource());
                    
                }
            });
            drawItem.addMouseDownHandler(new MouseDownHandler() {
                @Override
                public void onMouseDown(MouseDownEvent event) {
                   SC.logWarn("Mouse is Down on " + event.getSource());
                    
                }
            });
            drawItem.addMouseUpHandler(new MouseUpHandler() {
                @Override
                public void onMouseUp(MouseUpEvent event) {
                    SC.logWarn("Mouse Up on " + event.getSource());    
                }
            });

        }
        
        ValueChangedHandler shapeRotationSliderValueChangeHandler = new ValueChangedHandler() {
            @Override
            public void onValueChanged(ValueChangedEvent event) {
                DrawItem[] drawItems = drawPane.getDrawItems();
                for (int i = 0; i < drawItems.length; i++) {
                    DrawItem drawItem = drawItems[i];
                    if(drawItem instanceof DrawLabel){
                        continue;
                    }
                    drawItem.rotateTo(event.getValue());
                }
                drawPane.redraw();
            }
        };
        
        Slider shapesRotationSlider = new Slider();
        shapesRotationSlider.setMinValue(0);
        shapesRotationSlider.setMaxValue(360);
        shapesRotationSlider.setNumValues(360);
        shapesRotationSlider.setWidth(400);
        shapesRotationSlider.setLeft(25);
        shapesRotationSlider.setTop(450);
        shapesRotationSlider.setValue(0);
        shapesRotationSlider.setTitle("Rotate Shapes");
        shapesRotationSlider.setVertical(false);
        shapesRotationSlider.addValueChangedHandler(shapeRotationSliderValueChangeHandler);
        shapesRotationSlider.draw();

        /*
         * Behavior does not exist on DrawPane through GWT right now.
         */
        ValueChangedHandler paneRotationSliderValueChangeHandler = new ValueChangedHandler() {
            @Override
            public void onValueChanged(ValueChangedEvent event) {
                drawPane.setRotation(event.getValue());
                drawPane.redraw();
            }
        };
        
        Slider paneRotationSlider = new Slider();
        paneRotationSlider.setMinValue(0);
        paneRotationSlider.setMaxValue(360);
        paneRotationSlider.setNumValues(360);
        paneRotationSlider.setWidth(400);
        paneRotationSlider.setLeft(25);
        paneRotationSlider.setTop(500);
        paneRotationSlider.setValue(0);
        paneRotationSlider.setTitle("Rotate Pane");
        paneRotationSlider.setVertical(false);
        paneRotationSlider.addValueChangedHandler(paneRotationSliderValueChangeHandler);
//        paneRotationSlider.disable();
        paneRotationSlider.draw();
        /**/

        ValueChangedHandler zoomSliderValueChangeHandler = new ValueChangedHandler() {
            @Override
            public void onValueChanged(ValueChangedEvent event) {
                Slider sliderItem = (Slider) event.getSource();
                drawPane.zoom(sliderItem.getValue());
            }
        };
        
        Slider zoomSlider = new Slider();
        zoomSlider.setMinValue(.10f);
        zoomSlider.setMaxValue(3.0f);
        zoomSlider.setNumValues(300);
        zoomSlider.setWidth(400);
        zoomSlider.setLeft(25);
        zoomSlider.setTop(550);
        zoomSlider.setValue(1.0f);
        zoomSlider.setRoundValues(false);
        zoomSlider.setRoundPrecision(2);
        zoomSlider.setTitle("Zoom Shapes");
        zoomSlider.setVertical(false);
        zoomSlider.addValueChangedHandler(zoomSliderValueChangeHandler);
        zoomSlider.draw();
    }

    private void lineStyles() {

        drawPane2 = new DrawPane();
        drawPane2.setHeight(200);
        drawPane2.setWidth(400);
        drawPane2.setTop(650);
        drawPane2.setLeft(25);
        drawPane2.setShowEdges(true);
        drawPane2.setEdgeSize(4);
        drawPane2.setBackgroundColor("papayawhip");
        drawPane2.setOverflow(Overflow.HIDDEN);
        drawPane2.setCursor(Cursor.AUTO);
        drawPane2.setID("DrawPane2");
        drawPane2.draw();
        
        SpinnerItem lineWidthSpinner = new SpinnerItem();
        lineWidthSpinner.setName("lineWidth");
        lineWidthSpinner.setTitle("Line Width");
        lineWidthSpinner.setDefaultValue(5);
        lineWidthSpinner.setMin(1);
        lineWidthSpinner.setMax(10);
        lineWidthSpinner.setStep(1);
        lineWidthSpinner.setWidth(150);
        
        LinkedHashMap<String, String> lineStyleValues = new LinkedHashMap<String, String>();
        lineStyleValues.put(LinePattern.SOLID.getValue(),"Solid");
        lineStyleValues.put(LinePattern.DOT.getValue(),"Dot");
        lineStyleValues.put(LinePattern.DASH.getValue(),"Dash");
        lineStyleValues.put(LinePattern.SHORTDOT.getValue(),"Short dot");
        lineStyleValues.put(LinePattern.SHORTDASH.getValue(),"Short dash");
        lineStyleValues.put(LinePattern.LONGDASH.getValue(),"Long dash");
        
        SelectItem lineStyleSelect = new SelectItem();
        lineStyleSelect.setName("lineStyle");
        lineStyleSelect.setTitle("Line Style");
        lineStyleSelect.setWidth(150);
        lineStyleSelect.setDefaultValue("solid");
        lineStyleSelect.setValueMap(lineStyleValues);
        
        LinkedHashMap<String, String> arrowheadStyleValues = new LinkedHashMap<String, String>();
        arrowheadStyleValues.put(LineCap.ROUND.getValue(),"Round");
        arrowheadStyleValues.put(LineCap.SQUARE.getValue(),"Square");
        arrowheadStyleValues.put(LineCap.BUTT.getValue(),"Butt");
        
        SelectItem arrowStyleSelect = new SelectItem();
        arrowStyleSelect.setName("arrowheadStyle");
        arrowStyleSelect.setTitle("Line Cap Style");
        arrowStyleSelect.setWidth(150);
        arrowStyleSelect.setDefaultValue("round");
        arrowStyleSelect.setValueMap(arrowheadStyleValues);

        ItemChangedHandler lineStyleItemChangedHandler = new ItemChangedHandler() {
            @Override
            public void onItemChanged(ItemChangedEvent event) {
                drawLines(drawPane2);
            }
        };
        
        lineStyleDynamicForm = new DynamicForm();
        lineStyleDynamicForm.setID("dynamicForm");
        lineStyleDynamicForm.setWidth(300);
        lineStyleDynamicForm.setHeight(100);
        lineStyleDynamicForm.setLeft(25);
        lineStyleDynamicForm.setTop(850);
        lineStyleDynamicForm.setFields(lineWidthSpinner,lineStyleSelect,arrowStyleSelect);
        lineStyleDynamicForm.addItemChangedHandler(lineStyleItemChangedHandler);
        lineStyleDynamicForm.draw();
        
        drawLines(drawPane2);
    }

    /**
     * This method is called to re-render the lines within the second draw pane to
     *  demonstrate the different line types and shapes.
     */
    private void drawLines(DrawPane drawPane) {


        drawPane.erase();

        int    lineWidth      = (Integer) lineStyleDynamicForm.getValue("lineWidth");
        String lineStyle      = (String) lineStyleDynamicForm.getValue("lineStyle");
        String arrowheadStyle = (String) lineStyleDynamicForm.getValue("arrowheadStyle");
        
        LineCap lineCap = null;
        
        if(LineCap.BUTT.getValue().equals(arrowheadStyle)){
            lineCap = LineCap.BUTT;
        } else if(LineCap.ROUND.getValue().equals(arrowheadStyle)){
            lineCap = LineCap.ROUND;
        } else if(LineCap.SQUARE.getValue().equals(arrowheadStyle)){
            lineCap = LineCap.SQUARE;
        }
        
        LinePattern linePattern = null;
        
        if(LinePattern.DASH.getValue().equals(lineStyle)){
            linePattern = LinePattern.DASH;
        } else if(LinePattern.DOT.getValue().equals(lineStyle)){
            linePattern = LinePattern.DOT;
        } else if(LinePattern.LONGDASH.getValue().equals(lineStyle)){
            linePattern = LinePattern.LONGDASH;
        } else if(LinePattern.SHORTDASH.getValue().equals(lineStyle)){
            linePattern = LinePattern.SHORTDASH;
        } else if(LinePattern.SHORTDOT.getValue().equals(lineStyle)){
            linePattern = LinePattern.SHORTDOT;
        } else if(LinePattern.SOLID.getValue().equals(lineStyle)){
            linePattern = LinePattern.SOLID;
        } 
        
        
        DrawLine drawLine = new DrawLine();
        drawLine.setDrawPane(drawPane);
        drawLine.setStartPoint(new Point(20,30));
        drawLine.setEndPoint(new Point(180,160));
        drawLine.setLineWidth(lineWidth);
        drawLine.setLineCap(lineCap);
        drawLine.setLinePattern(linePattern);
        drawLine.draw();
        
        DrawLinePath drawLinePath = new DrawLinePath();
        drawLinePath.setDrawPane(drawPane);
        drawLinePath.setStartTop(40);
        drawLinePath.setStartLeft(170);
        drawLinePath.setEndLeft(340);
        drawLinePath.setEndTop(160);
        drawLinePath.setLineWidth(lineWidth);
        drawLinePath.setLineCap(lineCap);
        drawLinePath.setLinePattern(linePattern);
        drawLinePath.draw();
    }
    
    private void simpleGradient(){

        /* ------------------------------------------- */
        
        drawPane3 = new DrawPane();
        drawPane3.setID("drawPane3");
        drawPane3.setTop(950);
        drawPane3.setHeight(400);
        drawPane3.setLeft(25);
        drawPane3.setWidth(400);
        drawPane3.setShowEdges(true);
        drawPane3.setEdgeSize(4);
        drawPane3.setBackgroundColor("papayawhip");
        drawPane3.setOverflow(Overflow.HIDDEN);
        drawPane3.setCursor(Cursor.AUTO);

        ItemChangedHandler simpleGradientItemChangedHandler = new ItemChangedHandler() {
            @Override
            public void onItemChanged(ItemChangedEvent event) {
                simpleGradientShapesDraw(drawPane3);
            }

        };
        ColorPickerItem startColorColorPicker = new ColorPickerItem("startColor","Start Color");
        ColorPickerItem endColorColorPicker   = new ColorPickerItem("endColor","End Color");
        SpinnerItem     directionSpinnerItem  = new SpinnerItem("direction","Direction");

        startColorColorPicker.setDefaultValue("#0000ff");
        endColorColorPicker.setDefaultValue("#00ff00");
        directionSpinnerItem.setDefaultValue(45);
        directionSpinnerItem.setMin(0);
        directionSpinnerItem.setMax(360);
        directionSpinnerItem.setStep(1);

        simpleGradientDynamicForm = new DynamicForm();
        simpleGradientDynamicForm.setID("simpleGradientDynamicForm");
        simpleGradientDynamicForm.setWidth(250);
        simpleGradientDynamicForm.setLeft(475);
        simpleGradientDynamicForm.setTop(950);
        simpleGradientDynamicForm.addItemChangedHandler(simpleGradientItemChangedHandler);
        simpleGradientDynamicForm.setFields(startColorColorPicker,endColorColorPicker,directionSpinnerItem);
        simpleGradientDynamicForm.draw();
        
        simpleGradientShapesDraw(drawPane3);
        drawPane3.draw();
    }
    
    /**
     * This method is called to re-render the pane that contains the shapes with
     *  a defined gradient in them.
     */
    private void simpleGradientShapesDraw(DrawPane drawPane) {

        drawPane.erase();
        
        SimpleGradient simpleGradient = new SimpleGradient();
        simpleGradient.setDirection( (Integer) simpleGradientDynamicForm.getValue("direction") );
        simpleGradient.setEndColor( (String) simpleGradientDynamicForm.getValue("endColor") );
        simpleGradient.setStartColor( (String) simpleGradientDynamicForm.getValue("startColor") );
        
        DrawTriangle drawTriangle = new DrawTriangle();
        drawTriangle.setDrawPane(drawPane);
        drawTriangle.setFillGradient(simpleGradient);
        drawTriangle.setPoints(new Point(100,50), new Point(150,150), new Point(50,150));
        drawTriangle.draw();
        
        DrawCurve drawCurve = new DrawCurve();
        drawCurve.setDrawPane(drawPane);
        drawCurve.setFillGradient(simpleGradient);
        drawCurve.setStartPoint(new Point(200,50));
        drawCurve.setEndPoint(new Point(340,150));
        drawCurve.setControlPoint1(new Point(270,0));
        drawCurve.setControlPoint2(new Point(270,200));
        drawCurve.draw();
        
        DrawOval drawOval = new DrawOval();
        drawOval.setDrawPane(drawPane);
        drawOval.setFillGradient(simpleGradient);
        drawOval.setLeft(50);
        drawOval.setTop(200);
        drawOval.setWidth(100);
        drawOval.setHeight(150);
        drawOval.draw();
        
        DrawRect drawRect = new DrawRect();
        drawRect.setDrawPane(drawPane);
        drawRect.setFillGradient(simpleGradient);
        drawRect.setLeft(200);
        drawRect.setTop(225);
        drawRect.setWidth(150);
        drawRect.setHeight(100);
        drawRect.draw();
               
    }

    private void linearGradient() {

        drawPane4 = new DrawPane();
        drawPane4.setTop(1400);
        drawPane4.setHeight(400);
        drawPane4.setLeft(25);
        drawPane4.setWidth(400);
        drawPane4.setShowEdges(true);
        drawPane4.setEdgeSize(4);
        drawPane4.setBackgroundColor("papayawhip");
        drawPane4.setOverflow(Overflow.HIDDEN);
        drawPane4.setCursor(Cursor.AUTO);
        drawPane4.draw();

        ItemChangedHandler linnearGradientItemChangedHandler = new ItemChangedHandler() {
            @Override
            public void onItemChanged(ItemChangedEvent event) {
                linearGradientShapesDraw(drawPane4);
            }

        };
        
        ColorPickerItem startColorColorPicker = new ColorPickerItem("startColor","Start Color");
        ColorPickerItem firstStopColorPicker  = new ColorPickerItem("firstStop","First Stop Color");
        ColorPickerItem secondStopColorPicker = new ColorPickerItem("secondStop","Second Stop Color");
        ColorPickerItem endColorColorPicker   = new ColorPickerItem("endColor","End Color");

        startColorColorPicker.setDefaultValue("#ff0000");
        firstStopColorPicker.setDefaultValue("#ffff00");
        secondStopColorPicker.setDefaultValue("#00ff00");
        endColorColorPicker.setDefaultValue("#0000ff");

        linearGradientDynamicForm = new DynamicForm();
        linearGradientDynamicForm.setWidth(250);
        linearGradientDynamicForm.setHeight(100);
        linearGradientDynamicForm.setLeft(475);
        linearGradientDynamicForm.setTop(1400);
        linearGradientDynamicForm.setFields(startColorColorPicker,firstStopColorPicker,secondStopColorPicker,endColorColorPicker);
        linearGradientDynamicForm.draw();
        linearGradientDynamicForm.addItemChangedHandler(linnearGradientItemChangedHandler);

        SliderItem x1Slider = new SliderItem("x1");
        SliderItem y1Slider = new SliderItem("y1");
        SliderItem x2Slider = new SliderItem("x2");
        SliderItem y2Slider = new SliderItem("y2");
        
        x1Slider.setMinValue(0);
        x1Slider.setMaxValue(100);
        x1Slider.setDefaultValue(20);
        x1Slider.setHeight(20);
        
        y1Slider.setMinValue(0);
        y1Slider.setMaxValue(100);
        y1Slider.setDefaultValue(20);
        y1Slider.setHeight(20);
        
        x2Slider.setMinValue(0);
        x2Slider.setMaxValue(100);
        x2Slider.setDefaultValue(80);
        x2Slider.setHeight(20);
        
        y2Slider.setMinValue(0);
        y2Slider.setMaxValue(100);
        y2Slider.setDefaultValue(80);
        y2Slider.setHeight(20);

        linearGradientSlidersDynamicForm = new DynamicForm();
        linearGradientSlidersDynamicForm.setTitleWidth(20);
        linearGradientSlidersDynamicForm.setWidth(290);
        linearGradientSlidersDynamicForm.setLeft(475);
        linearGradientSlidersDynamicForm.setTop(1500);
        linearGradientSlidersDynamicForm.setFields(x1Slider,y1Slider,x2Slider,y2Slider);
        linearGradientSlidersDynamicForm.draw();
        linearGradientSlidersDynamicForm.addItemChangedHandler(linnearGradientItemChangedHandler);
        
        linearGradientShapesDraw(drawPane4);
    }

    private void linearGradientShapesDraw(DrawPane drawPane) {
        drawPane.erase();

        ColorStop colorStop1 = new ColorStop();
        colorStop1.setColor(linearGradientDynamicForm.getValueAsString("startColor"));
        colorStop1.setOffset(0.0f);

        ColorStop colorStop2 = new ColorStop();
        colorStop2.setColor(linearGradientDynamicForm.getValueAsString("firstStop"));
        colorStop2.setOffset(0.33f);

        ColorStop colorStop3 = new ColorStop();
        colorStop3.setColor(linearGradientDynamicForm.getValueAsString("secondStop"));
        colorStop3.setOffset(0.66f);

        ColorStop colorStop4 = new ColorStop();
        colorStop4.setColor(linearGradientDynamicForm.getValueAsString("endColor"));
        colorStop4.setOffset(1.0f);
        
        int x1 = (Integer) linearGradientSlidersDynamicForm.getValue("x1");
        int y1 = (Integer) linearGradientSlidersDynamicForm.getValue("y1");
        int x2 = (Integer) linearGradientSlidersDynamicForm.getValue("x2");
        int y2 = (Integer) linearGradientSlidersDynamicForm.getValue("y2");
        
        LinearGradient linearGradient = new LinearGradient();
        linearGradient.setX1(x1+"%");
        linearGradient.setY1(y1+"%");
        linearGradient.setX2(x2+"%");
        linearGradient.setY2(y2+"%");
        linearGradient.setColorStops(colorStop1,colorStop2,colorStop3,colorStop4);
        
        drawPane.createLinearGradient("lg", linearGradient); 
       
        DrawTriangle drawTriangle = new DrawTriangle();
        drawTriangle.setDrawPane(drawPane);
        drawTriangle.setFillGradient(linearGradient);
        drawTriangle.setPoints(new Point(100,50),new Point(150,150),new Point(50,150));
        drawTriangle.draw();
        
        DrawCurve drawCurve = new DrawCurve();
        drawCurve.setDrawPane(drawPane);
        drawCurve.setFillGradient(linearGradient);
        drawCurve.setStartPoint(new Point(200,50));
        drawCurve.setEndPoint(new Point(340,150));
        drawCurve.setControlPoint1(new Point(270,0));
        drawCurve.setControlPoint2(new Point(270,200));
        drawCurve.draw();
        
        DrawOval drawOval = new DrawOval();
        drawOval.setDrawPane(drawPane);
        drawOval.setFillGradient(linearGradient);
        drawOval.setLeft(50);
        drawOval.setTop(200);
        drawOval.setWidth(100);
        drawOval.setHeight(150);
        drawOval.draw();
        
        DrawRect drawRect = new DrawRect();
        drawRect.setDrawPane(drawPane);
        drawRect.setFillGradient(linearGradient);
        drawRect.setLeft(200);
        drawRect.setTop(225);
        drawRect.setWidth(150);
        drawRect.setHeight(100);
        drawRect.draw();
    }
    
    private void radialGradient() {

        drawPane5 = new DrawPane();
        drawPane5.setTop(1850);
        drawPane5.setHeight(400);
        drawPane5.setLeft(25);
        drawPane5.setWidth(400);
        drawPane5.setShowEdges(true);
        drawPane5.setEdgeSize(4);
        drawPane5.setBackgroundColor("papayawhip");
        drawPane5.setOverflow(Overflow.HIDDEN);
        drawPane5.setCursor(Cursor.AUTO);
        drawPane5.draw();

        ColorPickerItem startColorColorPicker = new ColorPickerItem("startColor","Start Color");
        ColorPickerItem firstStopColorPicker  = new ColorPickerItem("firstStop","First Stop Color");
        ColorPickerItem secondStopColorPicker = new ColorPickerItem("secondStop","Second Stop Color");
        ColorPickerItem endColorColorPicker   = new ColorPickerItem("endColor","End Color");

        startColorColorPicker.setDefaultValue("#ff0000");
        firstStopColorPicker.setDefaultValue("#ffff00");
        secondStopColorPicker.setDefaultValue("#00ff00");
        endColorColorPicker.setDefaultValue("#0000ff");

        ItemChangedHandler radialGradientItemChangedHandler = new ItemChangedHandler() {
            @Override
            public void onItemChanged(ItemChangedEvent event) {
                radialGradientShapesDraw(drawPane5);
            }


        };
        
        radialGradientDynamicForm = new DynamicForm();
        radialGradientDynamicForm.setTop(1850);
        radialGradientDynamicForm.setWidth(270);
        radialGradientDynamicForm.setLeft(475);
        radialGradientDynamicForm.setFields(startColorColorPicker,firstStopColorPicker,secondStopColorPicker,endColorColorPicker);
        radialGradientDynamicForm.addItemChangedHandler(radialGradientItemChangedHandler);
        radialGradientDynamicForm.draw();
        

        SliderItem rSlider = new SliderItem("r");
        rSlider.setDefaultValue(100);
        rSlider.setMinValue(0);
        rSlider.setMaxValue(100);
        rSlider.setHeight(20);
        
        radielGradientSliderDynamicForm = new DynamicForm();
        radielGradientSliderDynamicForm.setTop(1950);
        radielGradientSliderDynamicForm.setWidth(270);
        radielGradientSliderDynamicForm.setLeft(475);
        radielGradientSliderDynamicForm.setFields(rSlider);
        radielGradientSliderDynamicForm.addItemChangedHandler(radialGradientItemChangedHandler);
        radielGradientSliderDynamicForm.draw();

        radialGradientShapesDraw(drawPane5);
        
    }

    private void radialGradientShapesDraw(DrawPane drawPane) {
        drawPane.erase();

        ColorStop colorStop1 = new ColorStop();
        colorStop1.setColor(radialGradientDynamicForm.getValueAsString("startColor"));
        colorStop1.setOffset(0.0f);

        ColorStop colorStop2 = new ColorStop();
        colorStop2.setColor(radialGradientDynamicForm.getValueAsString("firstStop"));
        colorStop2.setOffset(0.33f);

        ColorStop colorStop3 = new ColorStop();
        colorStop3.setColor(radialGradientDynamicForm.getValueAsString("secondStop"));
        colorStop3.setOffset(0.66f);

        ColorStop colorStop4 = new ColorStop();
        colorStop4.setColor(radialGradientDynamicForm.getValueAsString("endColor"));
        colorStop4.setOffset(1.0f);
        
        int r = (Integer) radielGradientSliderDynamicForm.getValue("r");
        
        RadialGradient radialGradient = new RadialGradient();
        radialGradient.setCx("0%");
        radialGradient.setCy("0%");
        radialGradient.setR(r+"%");
        radialGradient.setFx("0%");
        radialGradient.setFy("0%");
        radialGradient.setColorStops(colorStop1,colorStop2,colorStop3,colorStop4);
               
        DrawTriangle drawTriangle = new DrawTriangle();
        drawTriangle.setDrawPane(drawPane);
        drawTriangle.setFillGradient(radialGradient);
        drawTriangle.setPoints(new Point(100,50),new Point(150,150),new Point(50,150));
        drawTriangle.draw();
        
        DrawCurve drawCurve = new DrawCurve();
        drawCurve.setDrawPane(drawPane);
        drawCurve.setFillGradient(radialGradient);
        drawCurve.setStartPoint(new Point(200,50));
        drawCurve.setEndPoint(new Point(340,150));
        drawCurve.setControlPoint1(new Point(270,0));
        drawCurve.setControlPoint2(new Point(270,200));
        drawCurve.draw();
        
        DrawOval drawOval = new DrawOval();
        drawOval.setDrawPane(drawPane);
        drawOval.setFillGradient(radialGradient);
        drawOval.setLeft(50);
        drawOval.setTop(200);
        drawOval.setWidth(100);
        drawOval.setHeight(150);
        drawOval.draw();
        
        DrawRect drawRect = new DrawRect();
        drawRect.setDrawPane(drawPane);
        drawRect.setFillGradient(radialGradient);
        drawRect.setLeft(200);
        drawRect.setTop(225);
        drawRect.setWidth(150);
        drawRect.setHeight(100);
        drawRect.draw();
        
    }
}

bc · 23 Nov 2011, 15:56

More drawing related questions...

The ClickHandler for drawing objects DrawRect for example does not seem to have isLeftButtonDown(), isRightButtonDown() event methods. Is there a way to tell which button was clicked?

Thanks.

**Isomorphic** · 23 Nov 2011, 17:26

There are global methods for this on EventHandler.

bc · 24 Nov 2011, 02:54

Thanks for your answer.

Can I trouble you to take a look at post #20. Do you see the same behavior when scrolling?

**pghosh** · 20 Dec 2011, 11:16

bc: Have you tried using knobs to resize and move DrawItems on the DrawPane. I haven't had any success yet.

Isomorphic: Is there an example demonstrating the capabilities of knobs?

Thanks,
Peter

**Isomorphic** · 20 Dec 2011, 16:17

There isn't a sample for this, yet. If you can show some code that we could run, we can help troubleshoot what's going wrong.

**pghosh** · 24 Dec 2011, 11:51

Here is the example that I have so far:

Code:

public class Main implements EntryPoint {

	@Override
	public void onModuleLoad() {
		new DrawPane(){{
			setWidth(800);
			setHeight(600);
			setBackgroundColor("lightgrey");
			addDrawItem(new DrawRect(){{
				setRect(10, 10, 30, 30);
				setKnobs(KnobType.MOVE);
			}}, true);
		}}.draw();
	}
}

What else is required to allow me to move the rectangle around on the drawpane.

Thanks,
Peter

**Isomorphic** · 28 Dec 2011, 10:48

Looks like there's actually a framework issue here.
We've fixed this in the branch - so your code should work as written in the next nightly (Dec 29 or greater, in both the 3.0p and 3.1d branches).

Let us know if that doesn't take care of it.

bc · 9 Jan 2012, 06:14

I cannot find drawing.jar in SmartGWT v3.0. I only see it in v2.5. Is it called something else in 3.0 bundled with another module?
Thanks.

**mike_mac** · 9 Jan 2012, 11:27

Originally posted by Noktasal

Ah Ok, i forgot to include <inherits name="com.smartgwt.Drawing"/>, thanks

Ok ... I think I'm going crazy ... I'm using SmartGwt 3.0, gwt 2.4 I have included the above line as below.

<inherits name="com.smartgwt.Drawing"/>
<inherits name="com.smartgwt.SmartGwtNoTheme"/>

I have cleared my browser cache (I'm using gwt debugger, so this shouldn't matter right ?)

I can see the ISC_Drawing.js in my compiled webapps sc/modules so its compiling using the correct smartGwt but when I run it I'm getting the

Code:

(TypeError): $wnd.isc[scClassName] is undefined

I understand that it means that it can't find the underlying javascript but other then inheriting the module and adding the correct 3.0 jar to the debugger classpath (its called smartgwt-3.0.jar so how can I go wrong) I don't know what else I can do. Other 3.0 api's we are using work so I'm assuming its the inherit is the problem. Do we need to add anything else.

I even tried adding the script to my html load page ...
<script src='sc/modules/ISC_Drawing.js'></script>

Assuming I'm doing something stupid that isn't listed above, anybody have any ideas ?

The code is simple ... it bombs out at the create of the DrawPane from the call to addMember().

Code:

    public DeviceWindow()
    {
        super();
        VLayout vLayout = new VLayout();
        //vLayout.addChild(new TransitionMilanImg());
        vLayout.addMember(getDrawPane());
        addChild(vLayout);
        setWidth(558);
        setHeight(152);
        setTitle("Transistion Milan");
        setCanDragReposition(true);
    }
    
    private DrawPane getDrawPane()
    {
        DrawPane drawPane = new DrawPane();  
        drawPane.setHeight(200);  
        drawPane.setWidth(400);  
        drawPane.setTop(650);  
        drawPane.setLeft(25);  
        drawPane.setShowEdges(true);  
        drawPane.setEdgeSize(4);  
        drawPane.setBackgroundColor("papayawhip");  
        drawPane.setOverflow(Overflow.HIDDEN);  
        drawPane.setCursor(Cursor.AUTO);  
        //drawPane.draw();
        return drawPane;
    }

bc · 11 Jan 2012, 08:19

In the Drawing sample in the showcase I am not able to get the zoom and pan example to work properly - it does not seem to zoom and pan. I tried this with Firefox versions 5 and 7. Is anyone else seeing this?

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment