This question is answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 42 - Pages: 3 [ 1 2 3 | Next ] - Last Post: 23-Nov-2016 22:35 Last Post By: jGromit
jimberry

Posts: 548
Registered: 30-Aug-2004
Using SVG images in BeanShell, HTML, or FXML skin
Posted: 19-Nov-2016 11:22
 
  Click to reply to this thread Reply
In another thread, davidekholm wrote:
We use SvgSalamander in jAlbum to load SVG icons. Its 306KB. For SVG icons on JavaFX, we use a tiny (15KB) API upon JavFX's SVGPath object called Caraibe.

I would like to use some of my own SVG images in a ui.fxml skin.
I have tried using the same syntax as for other image types such as PNG and JPG, but without success.

e.g in fxml
Image url="@res/texture.svg"

or in CSS -
	-fx-background-image: url(res/texture.svg);

in contexts where a JPG or PNG image would show up OK. (i.e. if I change the filetype suffixes and the equivalent jpg or png files exist, then they are displayed)

Have I missed something obvious? Do I need to specify another import at the top of the ui.fxml file?
davidekholm

Posts: 3,702
Registered: 18-Oct-2002
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 19-Nov-2016 23:40   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
In another thread, davidekholm wrote:
We use SvgSalamander in jAlbum to load SVG icons. Its 306KB. For SVG icons on JavaFX, we use a tiny (15KB) API upon JavFX's SVGPath object called Caraibe.

I would like to use some of my own SVG images in a ui.fxml skin.
I have tried using the same syntax as for other image types such as PNG and JPG, but without success.

e.g in fxml

Image url="@res/texture.svg"

or in CSS -
	-fx-background-image: url(res/texture.svg);

in contexts where a JPG or PNG image would show up OK. (i.e. if I change the filetype suffixes and the equivalent jpg or png files exist, then they are displayed)

You haven't missed anything obvious. Native support for SVG should really be passed as a feature request to Oracle (please do). It is possible to add SVG support to css and fxml files, but it requires a 3:rd party solution currently, for instance https://github.com/codecentric/javafxsvg. That library, although short, in turn requires the far larger Batik library and unfortunately relies on converting the SVG image to an internal bitmap image which is then rendered to the screen. I would have preferred if one rendered the SVG image primitives straight to the screen as it would then always render at the screen's best resolution (be it retina or not). Now when rendering to a bitmap image first, I don't know how well it works if one moves the user interface between a retina display and and ordinary display.

In short stay with PNGs for now :-( or build the user interface using Java/BeanShell, then you can use the PNG loading API we use for jAlbum's JavaFX UI parts.
jimberry

Posts: 548
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 05:32   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
I was already converting the SVGs to PNGs for display in the fxml UI, but seeing this in the 13.6 release notes -

Developers: You can now use Icons.get() to read SVG icons for your skins

I thought that jAlbum skins must be now able to display SVG images in the UI

Native support for SVG should really be passed as a feature request to Oracle
Yes, I have done that, but I am not sure whether to congratulate you on your optimism or on your sense of humour. ;-)
jGromit

Posts: 7,779
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 06:49   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
Yes, I have done that, but I am not sure whether to congratulate you on your optimism or on your sense of humour. ;-)

I think you'd be surprised at some of the correspondence that's passed between David and Oracle (on which I've been cc'ed). They're actually quite responsive to user requests and bug reports (especially the latter, granted). The wheels don't grind quickly, but things aren't ignored.
jimberry

Posts: 548
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 09:09   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
I think you'd be surprised ...

I am surprised that Oracle's wheels haven't ground more quickly on this one ;-)

SVG was first thought of 1n 1998, and SVG 1.0 became a W3C Recommendation in 2001. Gecko and Webkit browsers have supported SVG to some extent since 2005 and IE9 since 2011.
In my naivety, I would have thought Java could have had native support since then, but apparently that is not the case and I imagine support is not likely to be coming real soon.

Some years ago I used Batik (with a lot of help from the NetBeans guru TomCee) when developing a skin which was able to generate SVG buttons from template files (similar to index.htt and slide.htt) using colours selected by the user in the skin UI or in the style sheets. It was also able to use selectable SVG images as repeating background textures in the resulting album's HTML files.
Generating the SVG was not a problem, since it is only an XML text file, but I wanted the skin to be able to show what the results would look like.
Including the Batik libraries meant that the resulting skin was over 4MB, so I didn't think it was worth releasing to the repository (although today there are a couple of 3MB skins).

Hmmm ... in light of your (and David's) optimism I'll keep my fingers crossed :-)

Edited by: jimberry on 20-Nov-2016 16:20
jGromit

Posts: 7,779
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 11:24   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
Some years ago I used Batik (with a lot of help from the NetBeans guru TomCee) when developing a skin which was able to generate SVG buttons from template files (similar to index.htt and slide.htt) using colours selected by the user in the skin UI or in the style sheets.

I had this thought just a couple of weeks ago. In Matrix, I replaced the download icon with a simple CSS arrow, so it can now be color-matched to the style (and also resized easily, and with easy hover color choices). But I had to leave the "Google maps link" globe icon alone, because there's just no way to produce something usable in CSS to convey that. It occurred to me that SVG would be the way to go, but didn't really know enough even to begin tinkering with it.
jimberry

Posts: 548
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 13:27   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit

Posts: 7,779
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 13:46   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Attachment wire-globe-hi.png (70.6 KB)
Forgive my ignorance on the subject, but how can one change the colors of these SVG's "on the fly?"

(Edit: PNG's and JPG's aren't a help - I'm already using a PNG. But I can't alter the color of it to match any style, and don't want to have to maintain a huge stable of pre-configured color variations.)

Another edit: In keeping with the skin style, what I'd really be looking for in this case would be some sort of "wire" globe (like attached), but one whose colors I could change easily. I might have to settle on a couple of transparent PNG's - one with black lines, one with white lines - and then set the background color. Not really satisfying, however, since the download icon, which appears on the other side of the caption, can now be absolutely any color.
jimberry

Posts: 548
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 14:29   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Store the file as a template with .svt file suffix (like the existing index.htt and slide.htt files (like the attached) using jAlbum variables from the skin UI to be replaced when processed with the same function that converts index.htt to index.html. (It is a while since I worked on this and I forget the function, but I'll look it up and report back).

After seeing your edit -
I will try to set up a wire-globe.svt that does something like you say.

Edited by: jimberry on 20-Nov-2016 21:30

Edited by: jimberry on 20-Nov-2016 21:46 -wire globe svg and svt attached

Simple skin processes a couple of extra template files in the first lines of index.htt
<%
	if (indexNum == void || indexNum == 1) {
		engine.processTemplateFile(new File(skinDirectory, "top.htt"), new File(outputDirectory, "top.htm"));
		engine.processTemplateFile(new File(skinDirectory, "bottom.htt"), new File(outputDirectory, "bottom.htm"));
	}
%>


Edited by: jimberry on 20-Nov-2016 21:56

Edited by: jimberry on 20-Nov-2016 22:18 OOPS! I had named the template file suffix as .svg instead of .svt
RobM

Posts: 3,212
Registered: 4-Aug-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 14:38   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jimberry

Posts: 548
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:13   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
Yes, the svg code can be placed directly into the HTML code as shown in the second article.
However, if you need the same icon in several places, you might code it as an include file, perhaps included within a container which you can reference to modify each copy differently with CSS.
Then you wouldn't need to process the svt file into an svg file.
jGromit

Posts: 7,779
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:34   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Attachment mercator2.png (7.7 KB)
Attachment globo.png (123.4 KB)
An excellent beginning! Haven't gotten this far yet, but I'm assuming I just need to pump the svt through engine.processTemplate() and stash the output in res.

Now for the "however...." I need a graphic that will still be recognizable as a globe down to about 32px square. The upper limit probably wouldn't be more than maybe 64px - this has to share space with the image caption. So, something with fewer but thicker lines. The shading on your blue sphere is nice, but probably competely wasted at the small size I need.

Maybe something like one of the attached. I'm open to opinions about which works better. Here's an album that's using both of them, one on each image (and also with the new CSS-generated download icon). Of course, these are just the PNG versions, with no color matching, and as implemented, the "inside" background of the globe would usually match the background, there would an option for borders, etc, etc. I'd probably also want to provide two versions, one for the "hover" state.

I think I'm partial to the first one, "globo" - visually stronger.

http://jgromit.com/newGmaps/
jimberry

Posts: 548
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:44   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I am off to bed now, but tomorrow I will try to make a wire globe that fits your requirements and can include a "hover state" (animated?)

I also like "globo" - it has an equator, where those with the extra "lines of latitude" didn't.
jGromit

Posts: 7,779
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:48   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
BTW, off-topic, but there is a design aesthetic behind all of this. One of my earliest and most enthusiastic Matrix users was a former boss and collaborator on countless software projects, no longer with us, sadly. But his photography hobby put him squarely in the semi-pro class.

He always said that the image is what matters. Anything that detracts from that is to be avoided, if possible. So, he always went for a solid black "dimming" background, no border (or maybe just a thin line, if the images had dark backgrounds), navigation controls off the image, never any watermarking, and so on.

Having a non-matching colored globe icon, as in the current skin version (see, e.g., http://jgromit.com/matrix/maps/), goes against that idea. You want something visually recognizable, but something that doesn't draw the visitor's eye away from what matters - the image.
jGromit

Posts: 7,779
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:50   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
I am off to bed now, but tomorrow I will try to make a wire globe that fits your requirements and can include a "hover state" (animated?)

Excellent. Don't worry about the hover state graphic. All I would do is crank out a second SVG with a slightly different color, as with the download icon.

Sleep well. I'm not doing so these days, living in a country that's veering towards fascism. These clowns are going to set us back decades.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums