[Pharo-dev] SVG described countries in Roassal

Tudor Girba tudor at tudorgirba.com
Sat Nov 16 18:11:18 EST 2013


I guess the answer to Camillo is that the link between SVG and the picture
of Alex is that the map data is available as SVG :). Alex imported the map
from SVG and drew it with Roassal.

Doru


On Sun, Nov 17, 2013 at 12:02 AM, Alexandre Bergel
<alexandre.bergel at me.com>wrote:

> SVG path gives us a list of segment coordinates. We process each
> coordinate using the camera, which gives translation and zoom.
>
> The interaction maybe not that obvious from the example.  Having the mouse
> over a name highlights the country.
>
> Cheers,
> Alexandre
>
>
> > Le 16-11-2013 à 19:28, Camillo Bruni <camillobruni at gmail.com> a écrit :
> >
> > Nice!
> >
> > Though I am a bit confused, what has displaying vector graphics with SVG
> to do?
> > I don't fully get the interaction from your example :)
> >
> >> On 2013-11-16, at 22:39, Tudor Girba <tudor at tudorgirba.com> wrote:
> >>
> >> This is really great!
> >>
> >> Doru
> >>
> >>
> >> On Sat, Nov 16, 2013 at 9:47 PM, Alexandre Bergel <
> alexandre.bergel at me.com> wrote:
> >> Another example on which you can zoom in and out.
> >>
> >>
> >> <Screen Shot 2013-11-16 at 5.47.07 PM.png>
> >>
> >> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
> >> | view element nameComponent label stack |
> >> view := ROView new.
> >> view @ RODraggable.
> >>
> >> ROSVGPath southAmerica do: [ :k |
> >>
> >>    element := (ROSVGPath path: (ROSVGPath perform: k)) elementOn: k.
> >>    view add: element.
> >> ].
> >>
> >> nameComponent := ROElement new.
> >> ROSVGPath southAmerica do: [ :k |
> >>
> >>    label := ROLabel elementOn: k asString.
> >>    label @ ROLightlyHighlightable.
> >>    label on: ROMouseEnter do: [ :event | ROBlink highlight: (view
> elementFromModel: event model asSymbol) ].
> >>    label on: ROMouseLeave do: [ :event | ROBlink unhighlight: (view
> elementFromModel: event model asSymbol) ].
> >>    nameComponent add: label.
> >> ].
> >> ROGridLayout new
> >>    gapSize: -3;
> >>    lineItemsCount: 15;
> >>    on: nameComponent elements.
> >>
> >>
> >> stack := ROViewStack new.
> >> stack zoomInButton; zoomOutButton.
> >> stack addView: view.
> >>
> >> stack add: nameComponent.
> >> nameComponent translateTo: 0 @ 20.
> >>
> >> stack openInWindowSized: 1000 @ 700
> >> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
> >>
> >>> On Nov 16, 2013, at 5:44 PM, Alexandre Bergel <alexandre.bergel at me.com>
> wrote:
> >>>
> >>> Hi!
> >>>
> >>> I had fun understanding how countries may be described using SVG.
> >>> Here is a first shoot:
> >>>
> >>> <Screen Shot 2013-11-16 at 5.36.21 PM.png>
> >>>
> >>>
> >>> Moving the mouse above a country name highlight the country. You can
> now rehearse your geography.
> >>>
> >>> The complete source code of this example is:
> >>>
> >>> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
> >>> | view element nameComponent label |
> >>> view := ROView new.
> >>>
> >>> ROSVGPath countries do: [ :k |
> >>>    element := (ROSVGPath path: (ROSVGPath perform: k)) elementOn: k.
> >>>    view add: element.
> >>> ].
> >>>
> >>> nameComponent := ROElement new.
> >>> ROSVGPath countries do: [ :k |
> >>>    label := ROLabel elementOn: k asString.
> >>>    label @ ROLightlyHighlightable.
> >>>    label on: ROMouseEnter do: [ :event | ROBlink highlight: (view
> elementFromModel: event model asSymbol) ].
> >>>    label on: ROMouseLeave do: [ :event | ROBlink unhighlight: (view
> elementFromModel: event model asSymbol) ].
> >>>    nameComponent add: label.
> >>> ].
> >>> ROGridLayout new
> >>>    gapSize: -3;
> >>>    lineItemsCount: 15;
> >>>    on: nameComponent elements.
> >>>
> >>> view add: nameComponent.
> >>> nameComponent translateTo: 0 @ 400.
> >>>
> >>> view openInWindowSized: 1000 @ 700
> >>> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
> >>>
> >>> Cheers,
> >>> Alexandre
> >>> --
> >>> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
> >>> Alexandre Bergel  http://www.bergel.eu
> >>> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
> >>
> >> --
> >> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
> >> Alexandre Bergel  http://www.bergel.eu
> >> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
> >>
> >>
> >>
> >>
> >>
> >>
> >> --
> >> www.tudorgirba.com
> >>
> >> "Every thing has its own flow"
> >
>
>


-- 
www.tudorgirba.com

"Every thing has its own flow"
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.pharo.org/pipermail/pharo-dev_lists.pharo.org/attachments/20131117/43919338/attachment-0002.html>


More information about the Pharo-dev mailing list