using SVG for layouts

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

using SVG for layouts

Dirk Uys
I want to set up the following workflow:

- designs are done in Inkscape
- swfmill or samhaxe compiles the SVG files into an asset library
- for every layout I get a haxe class i can add to the stage
- the class should have the elements of the SVG file as properties so that adding event listeners are straight forward and elements are already placed at the correct positions.

Can swfmill or samhaxe achieve this with SVG files and haxe? I would like to avoid using flex, loading the SVG at runtime, using Adobe Flash IDE.

I tried this 2 years ago, but ended up having to manually do the layouts. I'm not doing that again, so if the above mentioned plan fails, I'm considering writing an export script for Photoshop or parsing the SVG and generating haxe source with the correct positions.

Please advise as I suspect I'm not the first person trying to do this?

Regards
Dirk

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

MarcWeber
Excerpts from Dirk Uys's message of Thu Oct 21 21:53:34 +0200 2010:
> Please advise as I suspect I'm not the first person trying to do this?
There is a library rendering SVG somewhere. That's all I know about.

I'm interested in this as well to some degree.

Howe does such a .svg look like exactly?
Do you have a simple small example?

Making Flex work seems to be quite a some effort because you have to
solve to problems:
  - make it work
  - keep file size small.

Marc Weber

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Dirk Uys
On Thu, Oct 21, 2010 at 11:08 PM, Marc Weber <[hidden email]> wrote:
Excerpts from Dirk Uys's message of Thu Oct 21 21:53:34 +0200 2010:
> Please advise as I suspect I'm not the first person trying to do this?
There is a library rendering SVG somewhere. That's all I know about.

I'm interested in this as well to some degree.

Howe does such a .svg look like exactly?
Do you have a simple small example?

Making Flex work seems to be quite a some effort because you have to
solve to problems:
 - make it work
 - keep file size small.

Marc Weber

In short:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg>
  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="Layout" transform="translate(0,-452.36218)">
    <image y="772.36218" x="237.14285" id="play" xlink:href="file://./resources/play.png" height="100" width="100" />
    <image y="772.36224" x="357.14282" id="pause" xlink:href="file://./resources/pause.png" height="100" width="100" />
    <image y="772.36218" x="475.71432" id="stop" xlink:href="file:///./resources/stop.png" height="100" width="100" />
  </g>
</svg>

which generates:

class play extends flash.display.Sprite {};
class pause extends flash.display.Sprite {};
class stop extends flash.display.Sprite {};
class Layout extends flash.dislpay.MovieClip{
        public var m_play : play;
        public var m_pause : pause;
        public var m_stop : stop;
        public function new(){
                super();
                m_play = new play();
                m_play.x = 237.14285;
                m_play.y = 772.36218;
                m_pause = new pause();
                m_pause.x = 357.14282;
                m_pause.y = 772.36224;
                m_stop = new stop();
                m_stop.x = 475.71432;
                m_stop.y = 772.36218;
        }
}

all thats left is the swfmill file to generate the resources to be linked with the above haxe file!!

Here is the very simple python script that will generate the source from the svg, not elegant, yet...

#! /usr/bin/python
from xml.dom import minidom

dom = minidom.parse('resources/layout.svg')
images = dom.getElementsByTagName('image')

for img in images:
    print 'class {0} extends flash.display.Sprite {1};'.format(img.getAttribute('id'), '{}')

print 'class Layout extends flash.dislpay.MovieClip{'
for img in images:
    print '\tpublic var m_{0} : {0};'.format(img.getAttribute('id'))

print '\tpublic function new(){'
print '\t\tsuper();'
for img in images:
    imageName = img.getAttribute('id')
    print '\t\tm_{0} = new {1}();'.format(imageName, imageName);
    print '\t\tm_{0}.x = {1};'.format(imageName, img.getAttribute('x'))
    print '\t\tm_{0}.y = {1};'.format(imageName, img.getAttribute('y'))
print '\t}'
print '}'

I'm not apposed to using swfmill/samhaxe if it can do everything - I dislike code generation quite a bit, so please send your solutions/suggestions.

Regards
Dirk

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

MarcWeber
Excerpts from Dirk Uys's message of Thu Oct 21 23:34:54 +0200 2010:
> In short:
>  [..]

You could generate all the elements at runtime as well ..
I mean parsing .xml at runtime is easy..

The really nice thing about .svg is that you can add additional
attributes to tags.

Marc Weber

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

singmajesty
There are some runtime SVG classes available here:

http://code.google.com/p/gm2d/source/browse/#svn/trunk/gm2d/svg



On Thu, 21 Oct 2010 16:35:57 -0700, Marc Weber <[hidden email]> wrote:

> Excerpts from Dirk Uys's message of Thu Oct 21 23:34:54 +0200 2010:
>> In short:
>>  [..]
>
> You could generate all the elements at runtime as well ..
> I mean parsing .xml at runtime is easy..
>
> The really nice thing about .svg is that you can add additional
> attributes to tags.
>
> Marc Weber
>


--
Using Opera's revolutionary email client: http://www.opera.com/mail/

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Robin Palotai
In reply to this post by Dirk Uys
Hi Dirk,

I'm using (a slightly patched) Inkscape to do the layout, export it to
an xml-based descriptor and export all the assets to png. Then I have a
handy Haxe class which loads the xml and lets me easily manipulate the
content. Currently it supports
- multiple layers (top-level layers in inkscape)
- grouping and subgrouping objects (sublayers in inkscape)
- automatically creating, positioning and setting the style of flash
textfields from inkscape text elements

So it is pretty handy for building a UI. Now I'm a bit crowded with
work, but I wanted to bring the inkscape patches up to the latest branch
and release it after that. Will be able to do so sometime in the near
future, possibly, then I can share the package.

BR,
Robin

2010.10.21. 21:53 keltezéssel, Dirk Uys írta:

> I want to set up the following workflow:
>
> - designs are done in Inkscape
> - swfmill or samhaxe compiles the SVG files into an asset library
> - for every layout I get a haxe class i can add to the stage
> - the class should have the elements of the SVG file as properties so
> that adding event listeners are straight forward and elements are
> already placed at the correct positions.
>
> Can swfmill or samhaxe achieve this with SVG files and haxe? I would
> like to avoid using flex, loading the SVG at runtime, using Adobe
> Flash IDE.
>
> I tried this 2 years ago, but ended up having to manually do the
> layouts. I'm not doing that again, so if the above mentioned plan
> fails, I'm considering writing an export script for Photoshop or
> parsing the SVG and generating haxe source with the correct positions.
>
> Please advise as I suspect I'm not the first person trying to do this?
>
> Regards
> Dirk


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

gershon
Hi list,

swfmill can import svg for a while now... though svn (0.3.0) is probably best, still some missing svg features but for layouts it should suffice...
each inkscape group gets xslt'ed to a MovieClip... not sure how this works with new haxe and multiple -swf-lib though...


On Fri, Oct 22, 2010 at 10:18 AM, Robin Palotai <[hidden email]> wrote:
Hi Dirk,

I'm using (a slightly patched) Inkscape to do the layout, export it to an xml-based descriptor and export all the assets to png. Then I have a handy Haxe class which loads the xml and lets me easily manipulate the content. Currently it supports
- multiple layers (top-level layers in inkscape)
- grouping and subgrouping objects (sublayers in inkscape)
- automatically creating, positioning and setting the style of flash textfields from inkscape text elements

So it is pretty handy for building a UI. Now I'm a bit crowded with work, but I wanted to bring the inkscape patches up to the latest branch and release it after that. Will be able to do so sometime in the near future, possibly, then I can share the package.

BR,
Robin

2010.10.21. 21:53 keltezéssel, Dirk Uys írta:

I want to set up the following workflow:

- designs are done in Inkscape
- swfmill or samhaxe compiles the SVG files into an asset library
- for every layout I get a haxe class i can add to the stage
- the class should have the elements of the SVG file as properties so that adding event listeners are straight forward and elements are already placed at the correct positions.

Can swfmill or samhaxe achieve this with SVG files and haxe? I would like to avoid using flex, loading the SVG at runtime, using Adobe Flash IDE.

I tried this 2 years ago, but ended up having to manually do the layouts. I'm not doing that again, so if the above mentioned plan fails, I'm considering writing an export script for Photoshop or parsing the SVG and generating haxe source with the correct positions.

Please advise as I suspect I'm not the first person trying to do this?

Regards
Dirk


--
haXe - an open source web programming language
http://haxe.org


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Robin Palotai
2010.10.22. 14:33 keltezéssel, gershon írta:
Hi list,

swfmill can import svg for a while now... though svn (0.3.0) is probably best, still some missing svg features but for layouts it should suffice...
each inkscape group gets xslt'ed to a MovieClip... not sure how this works with new haxe and multiple -swf-lib though...


On Fri, Oct 22, 2010 at 10:18 AM, Robin Palotai <[hidden email]> wrote:
Hi Dirk,

I'm using (a slightly patched) Inkscape to do the layout, export it to an xml-based descriptor and export all the assets to png. Then I have a handy Haxe class which loads the xml and lets me easily manipulate the content. Currently it supports
- multiple layers (top-level layers in inkscape)
- grouping and subgrouping objects (sublayers in inkscape)
- automatically creating, positioning and setting the style of flash textfields from inkscape text elements

So it is pretty handy for building a UI. Now I'm a bit crowded with work, but I wanted to bring the inkscape patches up to the latest branch and release it after that. Will be able to do so sometime in the near future, possibly, then I can share the package.

BR,
Robin

2010.10.21. 21:53 keltezéssel, Dirk Uys írta:

I want to set up the following workflow:

- designs are done in Inkscape
- swfmill or samhaxe compiles the SVG files into an asset library
- for every layout I get a haxe class i can add to the stage
- the class should have the elements of the SVG file as properties so that adding event listeners are straight forward and elements are already placed at the correct positions.

Can swfmill or samhaxe achieve this with SVG files and haxe? I would like to avoid using flex, loading the SVG at runtime, using Adobe Flash IDE.

I tried this 2 years ago, but ended up having to manually do the layouts. I'm not doing that again, so if the above mentioned plan fails, I'm considering writing an export script for Photoshop or parsing the SVG and generating haxe source with the correct positions.

Please advise as I suspect I'm not the first person trying to do this?

Regards
Dirk


--
haXe - an open source web programming language
http://haxe.org



--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Robin Palotai
In reply to this post by gershon
(Sorry for the empty answer before)

Exporting to swf MovieClip's is not a bad approach, but using a layout and separate png files allows for other Haxe platforms without swf support to work too. Of course with hxformat one could extract data from the MCs, but it would be a bit painful to do.

Robin

2010.10.22. 14:33 keltezéssel, gershon írta:
Hi list,

swfmill can import svg for a while now... though svn (0.3.0) is probably best, still some missing svg features but for layouts it should suffice...
each inkscape group gets xslt'ed to a MovieClip... not sure how this works with new haxe and multiple -swf-lib though...


On Fri, Oct 22, 2010 at 10:18 AM, Robin Palotai <[hidden email]> wrote:
Hi Dirk,

I'm using (a slightly patched) Inkscape to do the layout, export it to an xml-based descriptor and export all the assets to png. Then I have a handy Haxe class which loads the xml and lets me easily manipulate the content. Currently it supports
- multiple layers (top-level layers in inkscape)
- grouping and subgrouping objects (sublayers in inkscape)
- automatically creating, positioning and setting the style of flash textfields from inkscape text elements

So it is pretty handy for building a UI. Now I'm a bit crowded with work, but I wanted to bring the inkscape patches up to the latest branch and release it after that. Will be able to do so sometime in the near future, possibly, then I can share the package.

BR,
Robin

2010.10.21. 21:53 keltezéssel, Dirk Uys írta:

I want to set up the following workflow:

- designs are done in Inkscape
- swfmill or samhaxe compiles the SVG files into an asset library
- for every layout I get a haxe class i can add to the stage
- the class should have the elements of the SVG file as properties so that adding event listeners are straight forward and elements are already placed at the correct positions.

Can swfmill or samhaxe achieve this with SVG files and haxe? I would like to avoid using flex, loading the SVG at runtime, using Adobe Flash IDE.

I tried this 2 years ago, but ended up having to manually do the layouts. I'm not doing that again, so if the above mentioned plan fails, I'm considering writing an export script for Photoshop or parsing the SVG and generating haxe source with the correct positions.

Please advise as I suspect I'm not the first person trying to do this?

Regards
Dirk


--
haXe - an open source web programming language
http://haxe.org



--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Dirk Uys
In reply to this post by gershon
On Fri, Oct 22, 2010 at 2:33 PM, gershon <[hidden email]> wrote:
Hi list,

swfmill can import svg for a while now... though svn (0.3.0) is probably best, still some missing svg features but for layouts it should suffice...
each inkscape group gets xslt'ed to a MovieClip... not sure how this works with new haxe and multiple -swf-lib though...


This is what I was originally aiming for, but after struggling for some time, I went the code generation route simply to get something working.

I could get swfmill to import the SVG, but I couldn't figure out how to access the sub elements of that movie clip. From what I understand, swfmill doesn't generate any code, thus you need a matching class definition in your code. But how do I get access to the different sub elements?

Btw, my python script scratches a very particular itch, but I'd be glad to share it once it is useful.

Regards
Dirk

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Andreas Mokros
Hi.

On Mon, 25 Oct 2010 08:55:12 +0200
Dirk Uys <[hidden email]> wrote:
> I could get swfmill to import the SVG, but I couldn't figure out how
> to access the sub elements of that movie clip. From what I
> understand, swfmill doesn't generate any code, thus you need a
> matching class definition in your code. But how do I get access to
> the different sub elements?

I remember I once managed to import an SVG from Inkscape in swfmill and
then use its elements from haxe. You can set an id in Inkscape under
Object Properties (or directly in the SVG). This id can be used then
with flash.Lib.attach when you add the swf with swf-lib. Correct
placement was a bit tricky, had to use getBounds and subtract the x and
the y...
It was a svn version of swfmill and there were some errors in the
created swf that I had to fix with another tool. Haven't tried the
recent swfmill version though...

--
Mockey

--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: using SVG for layouts

Gamehaxe
In reply to this post by gershon
Hi,
Just as a side note on this topic, I found it quite useful to
have a convention where inkscape SVG layers start with the "."
character to give them special meanings, such as "bounds rect"
or "hotspot location".  You rendering code can then ignore these.

Hugh

> Hi list,
>
> swfmill can import svg for a while now... though svn (0.3.0) is probably
> best, still some missing svg features but for layouts it should  
> suffice...
> each inkscape group gets xslt'ed to a MovieClip... not sure how this  
> works
> with new haxe and multiple -swf-lib though...
>
>
> On Fri, Oct 22, 2010 at 10:18 AM, Robin Palotai  
> <[hidden email]>wrote:
>
>> Hi Dirk,
>>
>> I'm using (a slightly patched) Inkscape to do the layout, export it to  
>> an
>> xml-based descriptor and export all the assets to png. Then I have a  
>> handy
>> Haxe class which loads the xml and lets me easily manipulate the  
>> content.
>> Currently it supports
>> - multiple layers (top-level layers in inkscape)
>> - grouping and subgrouping objects (sublayers in inkscape)
>> - automatically creating, positioning and setting the style of flash
>> textfields from inkscape text elements
>>
>> So it is pretty handy for building a UI. Now I'm a bit crowded with  
>> work,
>> but I wanted to bring the inkscape patches up to the latest branch and
>> release it after that. Will be able to do so sometime in the near  
>> future,
>> possibly, then I can share the package.
>>
>> BR,
>> Robin
>>
>> 2010.10.21. 21:53 keltezéssel, Dirk Uys írta:
>>
>>  I want to set up the following workflow:
>>>
>>> - designs are done in Inkscape
>>> - swfmill or samhaxe compiles the SVG files into an asset library
>>> - for every layout I get a haxe class i can add to the stage
>>> - the class should have the elements of the SVG file as properties so  
>>> that
>>> adding event listeners are straight forward and elements are already  
>>> placed
>>> at the correct positions.
>>>
>>> Can swfmill or samhaxe achieve this with SVG files and haxe? I would  
>>> like
>>> to avoid using flex, loading the SVG at runtime, using Adobe Flash IDE.
>>>
>>> I tried this 2 years ago, but ended up having to manually do the  
>>> layouts.
>>> I'm not doing that again, so if the above mentioned plan fails, I'm
>>> considering writing an export script for Photoshop or parsing the SVG  
>>> and
>>> generating haxe source with the correct positions.
>>>
>>> Please advise as I suspect I'm not the first person trying to do this?
>>>
>>> Regards
>>> Dirk
>>>
>>
>>
>> --
>> haXe - an open source web programming language
>> http://haxe.org

--
haXe - an open source web programming language
http://haxe.org