[CLOSED] Adding image to draw example not working

**HansWapenaar** · Apr 01, 2013, 8:28 PM

Hi,

Ik want to add an image to the draw 'Australia' example (image under the drawn sprites)
It should be possible to add a sprite to the drawcomponent (src='xxx.png' type=SpriteType.Image).
Unfortunately I can't get it working.

Any idea what is wrong?

Hans

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default4.aspx.vb" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .x-state-desc .x-form-display-field{
            font-size: 14px;
        }
        .x-state-name .x-form-display-field{
            text-align:center;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
            </LayoutConfig>
            <Items>
            <ext:Panel ID="pnlMap" runat="server" 
                Title="Kaart"
                Border="true"  Header="true" 
                Collapsed="false"
                Collapsible="false"
                MinWidth="900" 
                Width="900" 
                MinHeight="500"
                Height="500"
                MarginsSummary="0 0 0 0" 
                CMarginsSummary="0 0 0 0"  
                AutoScroll="false"  
                Padding="0" > 
                <Items>
                    <ext:DrawComponent ID="drawMap" runat="server" ViewBox="false"  >
                    </ext:DrawComponent>
                </Items>
            </ext:Panel> 
            </Items>
        </ext:Viewport>   
    </form>    
</body>
</html>

Partial Class Default4
    Inherits System.Web.UI.Page
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
        If (Not Page.IsPostBack) Then
            pnlMap.MinHeight = 500
            pnlMap.MinWidth = 950
            drawMap.MinHeight =500
            drawMap.MinWidth = 950
            If (Not ExtX.IsAjaxRequest) Then
                Dim sprite As Sprite = New Sprite
                sprite.SpriteID = "sprite0"
                sprite.Type = SpriteType.Image
                sprite.Src = "~/images/Afbeelding1.png"
                drawMap.Items.Add(sprite)
                sprite.Show(True)

                addSprites()
            End If
        End If
    End Sub

    Sub addSprites()
        Dim draw As DrawComponent = Me.drawMap
        Dim doc As System.Xml.XmlDocument = New System.Xml.XmlDocument()
        doc.Load(Server.MapPath("Australia.xml"))

        Dim info As List(Of GeoLocs) = New List(Of GeoLocs)

        Dim i As Integer = 0
        For Each state As System.Xml.XmlNode In doc.SelectNodes("states/state")
            Dim iSelected As Integer = CInt(state.SelectSingleNode("selected").InnerText)
            Dim sprite As Sprite = New Sprite
            sprite.SpriteID = "sprite" + CStr(i)
            sprite.Type = SpriteType.Path
            sprite.Path = state.SelectSingleNode("path").InnerText
            sprite.Stroke = "#FF0000"
            sprite.StrokeWidth = 1
            sprite.StrokeLinejoin = StrokeLinejoin.Round
            sprite.Cursor = "pointer"
            sprite.ZIndex = 210
            Dim dOpacity As Double = 0.59999999999999998
            sprite.FillOpacity = dOpacity
            sprite.Fill = "#00FF00"

            draw.Items.Add(sprite)
            sprite.Show(True)
            i += 1
        Next
    End Sub

    Public Class GeoLocs
        Property state As String
        Property selected As Integer
        Property desc As String
    End Class
End Class

**Baidaly** · Apr 01, 2013, 9:13 PM

Hello!

You should set Width and Height parameters:

sprite.Width = 100
sprite.Height = 100

**HansWapenaar** · Apr 02, 2013, 7:25 AM

Hi,

Thanks for your suggestion.

I tried to add your suggested settings of height and width to the sprite. That did not work until I removed the 'addSprites', so without the vectors on top of the image. But that is just what I want.

I tested something else:
After setting the height and with of the image-sprite, I changed 'draw.Items.Add(sprite)' by 'draw.Add(sprite)'.
Then it works. The vectors are placed on the image.

Isn't this a bit strange?
I read that with Sencha the drawcomponent also has a surface and that the image is placed as the surface and vectors are drawn as items on the surface. Has this something to do with this?
And what will happen if I am going to add small images (symbols) as items to the drawcomponent?

Hans

**HansWapenaar** · Apr 02, 2013, 8:58 AM

Hi,

Sorry, but this was my mistake: the image had the same id as one of the added vectors.
It works now with 'drawMap.Items.Add(sprite)'.
Meanwhile I also tried to add an image as an item and that also works.

This all when adding the sprites in the 'Page_Load' section.
But I would like to get it also working after clicking a button.
So I have put 'addSprites' in a direct click event of a button. But than the error comes at the line of 'sprite.Show(True)'.

In the script block is shown: 'App.drawMap.get("sprite0").show(true)' etc.. The drawMap only contains the sprites that are added in the pageload and not the newly added sprite.

Any idea?

Hans

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
        If (Not Page.IsPostBack) Then
            pnlMap.MinHeight = 500
            pnlMap.MinWidth = 950
            drawMap.MinHeight = 500
            drawMap.MinWidth = 950
            If (Not ExtX.IsAjaxRequest) Then
                Dim sprite As Sprite = New Sprite
                sprite.SpriteID = "spritebckgrnd"
                sprite.Type = SpriteType.Image
                sprite.Src = "~/images/Afbeelding1.png"
                sprite.Width = 950
                sprite.Height = 500
                drawMap.Items.Add(sprite)
                sprite.Show(True)
            End If
        End If
    End Sub

    Sub addSprites()
        Dim doc As System.Xml.XmlDocument = New System.Xml.XmlDocument()
        doc.Load(Server.MapPath("Australia.xml"))
        Dim info As List(Of GeoLocs) = New List(Of GeoLocs)
        Dim i As Integer = 0
        For Each state As System.Xml.XmlNode In doc.SelectNodes("states/state")
             Dim sprite As Sprite = New Sprite
            sprite.SpriteID = "sprite" + CStr(i)
            sprite.Type = SpriteType.Path
            sprite.Path = state.SelectSingleNode("path").InnerText
            sprite.Stroke = "#FF0000"
            sprite.StrokeWidth = 1
            sprite.StrokeLinejoin = StrokeLinejoin.Round
            sprite.Cursor = "pointer"
            sprite.ZIndex = 210
            Dim dOpacity As Double = 0.6
            sprite.FillOpacity = dOpacity
            sprite.Fill = "#00FF00"

            drawMap.Items.Add(sprite)
            sprite.Show(True)
            i += 1
        Next
    End Sub

        Sub btnAddSprites_onClick(sender As Object, e As DirectEventArgs)
            addSprites()
        End Sub

    Public Class GeoLocs
        Property state As String
        Property desc As String
    End Class

           <ext:Panel ID="pnlMap" runat="server" 
                Title="Kaart"
                Border="false"  Header="true" 
                Collapsed="false"
                Collapsible="false"
                MinWidth="900" 
                Width="900" 
                MinHeight="500"
                Height="500"
                MarginsSummary="0 0 0 0" 
                CMarginsSummary="0 0 0 0"  
                AutoScroll="false"  
                Padding="0" > 
                <Items>
                    <ext:Button ID="btnAddSprites" runat="server" Text="Sprites">
                        <DirectEvents>
                            <Click OnEvent="btnAddSprites_onClick">
                                <EventMask ShowMask="true"  Msg="Kaart laden"/>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:DrawComponent ID="drawMap" runat="server" ViewBox="false" >
                    </ext:DrawComponent>

               </Items>
            </ext:Panel>

**Daniil** · Apr 02, 2013, 9:49 AM

Hi,

Please add a Sprite to a DrawComponent before showing using its Add method.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void AddSprite(object sender, DirectEventArgs e)
    {        
        Sprite sp = new Sprite()
        {
            SpriteID = "Sprite1",
            Type = SpriteType.Circle,
            Radius = 100,
            Fill = "green"
        };

        this.DrawComponent1.Add(sp);
        sp.Show(true);
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Button runat="server" Text="Add sprite" OnDirectClick="AddSprite" />

        <ext:DrawComponent 
            ID="DrawComponent1" 
            runat="server" 
            Height="200" 
            Width="200" />
    </form>
</body>
</html>

**HansWapenaar** · Apr 02, 2013, 3:18 PM

Hi,

Thanks for your quick reaction.
I changed everywhere 'mapDraw.items.add(sprite)' by 'mapDraw.add(sprite)' and that made it work!

Hans

**Baidaly** · Apr 02, 2013, 10:18 PM

Originally Posted by HansWapenaar

Hi,

Thanks for your quick reaction.
I changed everywhere 'mapDraw.items.add(sprite)' by 'mapDraw.add(sprite)' and that made it work!

Hans

Can we close the thread?

**HansWapenaar** · Apr 03, 2013, 10:15 AM

Hi,

Only one extra question (or do I have to open a new thread for this?).

I want to replace a sprite when it exists and add when it does not exists.

By adding sprites directly to the drawcomponent looping through the items does not work (drawcomponent.items.count returns 0).

dim sprite as Sprite = drawcomponent.getSprite("xxx") never returns 'nothing', so with this it is not possible to test whether a sprite is already part of the drawcomponent.

I got it working with the following, but there should be a better to check and replace the contents of a sprite?

Dim cNewId as String ="testsprite"
Dim spriteold As Sprite = drawMap.GetSprite(cNewId)

Dim spritetoberemoved As Sprite = New Sprite
spritetoberemoved.SpriteID = cNewId
drawMap.Remove(spritetoberemoved, True)

If (spriteold.IsNull) Then
   ' THIS IS NEVER TESTING TRUE
    drawMap.Add(sprite)
    sprite.Show(True)
Else
   If (spriteold.Path.IsNull) Then
         ' AFTER REMOVE THIS THIS IS TESTING TRUE
         drawMap.Add(sprite)
         sprite.Show(True)
   End If
End If

Hans

**Daniil** · Apr 03, 2013, 10:54 AM

Just a quick question what about to creating sprites on client? You can send from a server some required data, then do all the job on client with JavaScript. It would be much more flexible.

**HansWapenaar** · Apr 03, 2013, 11:38 AM

Hi Daniil,

I don't think creating the sprites on the client is an option. The application gets spatial objects from a mySql database (filtering and selections on the server). The objects are rendered to thematic imagemaps with mapserver (png file). In the future I will look into geo.ext to replace this. But it will require quite some effort and time to replace the mapserver components by geo.ext components and like a lot of developers I do not have that time.

By using the drawcomponent I am able to add objects over the map. Positioning is no problem anymore. Options of the drawcomponent like drag/drop, styling, animations etc. are very promising and great features to add to my application.
Replacing/removing the sprites is required f.e. after zooming to another location on the map. Only the object in the zoomed area are loaded (efficiency and speed).

Thanks, Hans

Thread: [CLOSED] Adding image to draw example not working

Thread Tools

Search Thread

Display

[CLOSED] Adding image to draw example not working

Similar Threads

[CLOSED] Problem with Ext.draw.engine.SvgExporter

vbox layout is not working on image button

MVC RAZOR anyone has a working Ajax image html helper working

[CLOSED] Background image style for panel is not working in chrome

[CLOSED] Draw div

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Adding image to draw example not working

[CLOSED] Adding image to draw example not working

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us