You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by Greg Brown <gk...@mac.com> on 2010/09/30 19:23:59 UTC
Pivot/SVG Salamander
Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
The sample application loads the image declaratively in BXML:
<ImageView styles="{verticalAlignment:'top'}">
<image>
<bxml:include src="logo.svg"/>
</image>
</ImageView>
The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
static {
BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
}
That's it!
There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
Greg
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
I have to agree that the concept is quite compelling. :-)
On Sep 30, 2010, at 3:18 PM, Superstring Media wrote:
> Thanks to SVGSalamander Pivot now has a Production Suite facility (similar to, but without Illustrator plugins needed, like the olde JavaFX had). Now we have an open ended way to use any artwork produced by leading graphic apps like Inkscape or Illustrator.
>
> I can see for miles :-)
>
> Thom
>
>
> On 2010-09-30, at 1:58 PM, Greg Brown wrote:
>
>> Here's an updated version of the demo. It fixes a bug in SVGImageSerializer and adds an example of using an SVG image on a Pivot PushButton. Be sure to update the JARs as well as the source since it relies on some additions to the ButtonDataRenderer class.
>>
>> <pivot_svgsalamander.zip>
>>
>> On Sep 30, 2010, at 2:45 PM, Greg Brown wrote:
>>
>>> You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).
>>>
>>> On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:
>>>
>>>> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>>>>
>>>> Beauty,
>>>>
>>>> Thom
>>>>
>>>>
>>>> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>>>>
>>>>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>>>>
>>>>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>>>>
>>>>>
>>>>
>>>
>>
>
Re: Pivot/SVG Salamander
Posted by Superstring Media <su...@gmail.com>.
Thanks to SVGSalamander Pivot now has a Production Suite facility (similar to, but without Illustrator plugins needed, like the olde JavaFX had). Now we have an open ended way to use any artwork produced by leading graphic apps like Inkscape or Illustrator.
I can see for miles :-)
Thom
On 2010-09-30, at 1:58 PM, Greg Brown wrote:
> Here's an updated version of the demo. It fixes a bug in SVGImageSerializer and adds an example of using an SVG image on a Pivot PushButton. Be sure to update the JARs as well as the source since it relies on some additions to the ButtonDataRenderer class.
>
> <pivot_svgsalamander.zip>
>
> On Sep 30, 2010, at 2:45 PM, Greg Brown wrote:
>
>> You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).
>>
>> On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:
>>
>>> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>>>
>>> Beauty,
>>>
>>> Thom
>>>
>>>
>>> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>>>
>>>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>>>
>>>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>>>
>>>>
>>>
>>
>
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
Here's an updated version of the demo. It fixes a bug in SVGImageSerializer and adds an example of using an SVG image on a Pivot PushButton. Be sure to update the JARs as well as the source since it relies on some additions to the ButtonDataRenderer class.
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).
On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:
> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>
> Beauty,
>
> Thom
>
>
> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>
>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>
>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>
>>
>
Re: Pivot/SVG Salamander
Posted by Superstring Media <su...@gmail.com>.
Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
Beauty,
Thom
On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>
> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>
>
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
Re: Pivot/SVG Salamander
Posted by Superstring Media <su...@gmail.com>.
Fantastic! Works like a charm here on OS X using NetBeans 6.9.1.
So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
This rocks!
Thom
On 2010-09-30, at 12:35 PM, Greg Brown wrote:
> Sorry, I forgot to include an easy way to launch the demo if you aren't using Eclipse with the Pivot plugin. Add this to the SVGImageDemo class to launch it as a standard Java app:
>
> public static void main(String[] args) {
> DesktopApplicationContext.main(SVGImageDemo.class, args);
> }
>
> On Sep 30, 2010, at 1:28 PM, Greg Brown wrote:
>
>> Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
>>
>> On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
>>
>>> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>>>
>>> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>>>
>>> The sample application loads the image declaratively in BXML:
>>>
>>> <ImageView styles="{verticalAlignment:'top'}">
>>> <image>
>>> <bxml:include src="logo.svg"/>
>>> </image>
>>> </ImageView>
>>>
>>> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>>>
>>> static {
>>> BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
>>> BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
>>> }
>>>
>>> That's it!
>>>
>>> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>>>
>>> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>>>
>>> Greg
>>>
>>> <pivot_svgsalamander.zip>
>>>
>>> <pivot_svgsalamander.png>
>>
>
Re: Pivot/SVG Salamander
Posted by JLEIngenieros <jl...@gmail.com>.
Hi.
At first, I know that the post is quite old, and apologize for my english.
At second, pardon my boldness to enter into a post without invitation, but
i've a question:
In the posted code, I think that 'image logo.src' is directly inserted on
ImageView, so it's only an normal 'image', not a SVGImage.
<ImageView styles="{verticalAlignment:'top'}">
<image>
<bxml:include src="logo.svg"/>
</image>
</ImageView>
It's possible (and correct) to rewrite the'bxml' and 'SVGImageDemo.java'
files with anything as this?:
1. In bxml file, delete the <bxml:include src="logo.svg"/> and add a
bxml:id, as this:
<ImageView bxml:id="myPicture" styles="{verticalAlignment:'top'}">
<image>
<bxml:include src="logo.svg"/>
</image>
</ImageView>
2. Rewrite as this (for example):
//An ImageView to serialize with bxml
ImageView myImage;
//Uri for working with svg path, string or anything else
URI uri = null;
//Reading the svg path...
StringReader reader = new StringReader(---any svg string, file or
similar---);
//Setting the URI
uri = SVGCache.getSVGUniverse().loadSVG(reader, "titleOf...");
//Getting the SVGdiagram
SVGDiagram myDiagram = SVGCache.getSVGUniverse().getDiagram(uri);
//Getting SVGImage from SVGdiagram
SVGImage myGetImage =new SVGImage(myDiagram);
//Serializing from bxml
myImage= (ImageView) bxmlSerializer.getNamespace().get("myPicture");
//Setting the image for to work
myImage.setImage(myGetImage);
I think that, after doing this, we can work programatically with myImage as
SVG graphic.
Thank you for comments.
Javier
--
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Pivot-SVG-Salamander-tp1609653p4022814.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
> I would consider adding SVGImage to SVGSalamander. Since it would depend
> on the pivot binaries, I'd want to put it into a separate jar.
You could do that, though it shouldn't be a problem to include everything in the same JAR. The Pivot dependency wouldn't be an issue unless someone tried to use SVGImage or SVGImageSerializer, which they presumably would only be doing if they were actually building a Pivot app (and hence already had the Pivot JARs on the classpath).
> SVGImage looks quite similar to SVGIcon, which is Salamander's custom
> extension of Icon for decorating Swing buttons. Does Pivot handle AWT
> Icons? If so, this might be an even easier way to render SVGSalamander
> content in Pivot without having to extend either library.
We could potentially write a Pivot Image wrapper for the Swing Icon class. However, there are a couple of issues with that approach:
1) Pivot doesn't currently have any dependency on Swing, and we would prefer to keep it that way if possible.
2) The serialization support provided by SVGImageSerializer just as important as SVGImage itself. The serializer is what allows us to embed an SVG image in a BXML file. We could theoretically write an SVGIconSerializer class, but then we're right back where we started - needing to add at least one additional class to your project.
Thanks for your help,
Greg
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
> I would consider adding SVGImage to SVGSalamander. Since it would depend
> on the pivot binaries, I'd want to put it into a separate jar.
You could do that, though it shouldn't be a problem to include everything in the same JAR. The Pivot dependency wouldn't be an issue unless someone tried to use SVGImage or SVGImageSerializer, which they presumably would only be doing if they were actually building a Pivot app (and hence already had the Pivot JARs on the classpath).
> SVGImage looks quite similar to SVGIcon, which is Salamander's custom
> extension of Icon for decorating Swing buttons. Does Pivot handle AWT
> Icons? If so, this might be an even easier way to render SVGSalamander
> content in Pivot without having to extend either library.
We could potentially write a Pivot Image wrapper for the Swing Icon class. However, there are a couple of issues with that approach:
1) Pivot doesn't currently have any dependency on Swing, and we would prefer to keep it that way if possible.
2) The serialization support provided by SVGImageSerializer just as important as SVGImage itself. The serializer is what allows us to embed an SVG image in a BXML file. We could theoretically write an SVGIconSerializer class, but then we're right back where we started - needing to add at least one additional class to your project.
Thanks for your help,
Greg
Re: Pivot/SVG Salamander
Posted by ki...@golden.net.
Hi all,
Wow, this thread sure exploded. I just got back from class, so I won't
have any time to work on this tonight.
I would consider adding SVGImage to SVGSalamander. Since it would depend
on the pivot binaries, I'd want to put it into a separate jar.
SVGImage looks quite similar to SVGIcon, which is Salamander's custom
extension of Icon for decorating Swing buttons. Does Pivot handle AWT
Icons? If so, this might be an even easier way to render SVGSalamander
content in Pivot without having to extend either library.
Mark
> Sorry, I forgot to include an easy way to launch the demo if you aren't
> using Eclipse with the Pivot plugin. Add this to the SVGImageDemo class to
> launch it as a standard Java app:
>
> public static void main(String[] args) {
> DesktopApplicationContext.main(SVGImageDemo.class, args);
> }
>
> On Sep 30, 2010, at 1:28 PM, Greg Brown wrote:
>
----------------------------
Powered by Execulink Webmail
http://www.execulink.com/
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
Sorry, I forgot to include an easy way to launch the demo if you aren't using Eclipse with the Pivot plugin. Add this to the SVGImageDemo class to launch it as a standard Java app:
public static void main(String[] args) {
DesktopApplicationContext.main(SVGImageDemo.class, args);
}
On Sep 30, 2010, at 1:28 PM, Greg Brown wrote:
> Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
>
> On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
>
>> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>>
>> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>>
>> The sample application loads the image declaratively in BXML:
>>
>> <ImageView styles="{verticalAlignment:'top'}">
>> <image>
>> <bxml:include src="logo.svg"/>
>> </image>
>> </ImageView>
>>
>> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>>
>> static {
>> BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
>> BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
>> }
>>
>> That's it!
>>
>> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>>
>> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>>
>> Greg
>>
>> <pivot_svgsalamander.zip>
>>
>> <pivot_svgsalamander.png>
>
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
Sorry, I forgot to include an easy way to launch the demo if you aren't using Eclipse with the Pivot plugin. Add this to the SVGImageDemo class to launch it as a standard Java app:
public static void main(String[] args) {
DesktopApplicationContext.main(SVGImageDemo.class, args);
}
On Sep 30, 2010, at 1:28 PM, Greg Brown wrote:
> Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
>
> On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
>
>> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>>
>> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>>
>> The sample application loads the image declaratively in BXML:
>>
>> <ImageView styles="{verticalAlignment:'top'}">
>> <image>
>> <bxml:include src="logo.svg"/>
>> </image>
>> </ImageView>
>>
>> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>>
>> static {
>> BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
>> BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
>> }
>>
>> That's it!
>>
>> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>>
>> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>>
>> Greg
>>
>> <pivot_svgsalamander.zip>
>>
>> <pivot_svgsalamander.png>
>
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>
> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>
> The sample application loads the image declaratively in BXML:
>
> <ImageView styles="{verticalAlignment:'top'}">
> <image>
> <bxml:include src="logo.svg"/>
> </image>
> </ImageView>
>
> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>
> static {
> BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
> BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
> }
>
> That's it!
>
> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>
> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>
> Greg
>
> <pivot_svgsalamander.zip>
>
> <pivot_svgsalamander.png>
Re: Pivot/SVG Salamander
Posted by Greg Brown <gk...@mac.com>.
Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>
> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>
> The sample application loads the image declaratively in BXML:
>
> <ImageView styles="{verticalAlignment:'top'}">
> <image>
> <bxml:include src="logo.svg"/>
> </image>
> </ImageView>
>
> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>
> static {
> BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
> BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
> }
>
> That's it!
>
> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>
> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>
> Greg
>
> <pivot_svgsalamander.zip>
>
> <pivot_svgsalamander.png>