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


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

Posts: 3,209
Registered: 4-Aug-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:51   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
I think I'm partial to the first one, "globo" - visually stronger
http://jgromit.com/newGmaps/
Seen in the forum globo, seen in the album Mercator. Globo looks a bit like a bug compared to the other, even though it is stronger.
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:55   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
RobM wrote:
Globo looks a bit like a bug....

Maybe that will encourage the site visitor to click on it. Hard. And quickly.
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 15:57   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Here is an existing SVG version from Wikimedia Commons
File URL:

https://upload.wikimedia.org/wikipedia/commons/c/c4/Globe_icon.svg
Attribution:

By sarang (Own work) Public domain, via Wikimedia Commons
HTML
Attribution not legally required

I'll convert it into a template tomorrow. Do you have any preferred or existing variable names for the color(s) ?
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 16:03   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Glad you found one without any use restrictions. Ever since the great Nature skin / Getty Images Debacle, I've been gun-shy about where I pick up things like icons.

jimberry wrote:
Do you have any preferred or existing variable names for the color(s) ?

No, nothing in particular. Maybe just globeGrid and globeBackground. Outside of the sphere it should be transparent, of course, so that the globe doesn't always have a visible square around it. A background texture, for example, should show around the globe, but not within it - I think that would be visually chaotic.
davidekholm

Posts: 3,389
Registered: 18-Oct-2002
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 16:15   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
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. ;-)

Although they are a a software gigant, we've actually got them to perform a number of bug fixes on request so I'm not joking. I was eventually able to get SVGs working in fxml and css files here, but took some 20 3:rd party jar files to make it working as it involved Apache Batik. Batik is obviously a monster of dependencies. Crazy, but typical for server side projects where people really don't consider deployment footprint. I bet one can cut down those 3-4MB of 3:rd party jar files to a few KB by swapping Batik to SvgSalamander. I may even play with that myself, but for the short term being, stick to PNGs or set the SVGs via Java/BeanShell calls. I can show how i you like to take that route.
davidekholm

Posts: 3,389
Registered: 18-Oct-2002
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 16:22   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Forgive my ignorance on the subject, but how can one change the colors of these SVG's "on the fly?"

In jAlbum, we swap some dark and bright colors of SVG files when using the Darcula look and feel. We do this by doing a dynamic seach & replace in the SVG documents and then feeding the documents to the SvgSalamander API

By the way, I'm only referring to the use of SVG icons for the user interface. If you like color swapping in SVGs that are to be presented in album pages, that's another story.
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 20-Nov-2016 16:26   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
Yeah, I'm looking only at album use. My skins don't use any icons in the UI, with the exception of four "font source" icons that I grabbed from their respective sites (see the Fonts tab of any of my skins), and some control bar and navigation icons (see the Text tabs - the ones in Matrix are GIF's, never to be updated, and Gromit is using simple PNG's).

Edited by: jGromit on 20-Nov-2016 10:26, to add more about icon use.
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 00:07   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Attachment Globe_icon.svt (340 bytes)
The attached Globe-icon.svt will hopefully do the job you require.
When you use the resulting .svg file in your HTML, you can alter the size by setting the width in CSS.
I have used
stroke="${globeStroke}" fill="${globeFill}" stroke-width="20"
but of course you can change the variable names to suit yourself.
I haven't tested this to generate the SVG file and maybe the syntax for the variables is not quite right - I am not sure whether the { } are required for this usage (a long time since I used this).
You might want to play around with the stroke-width and perhaps other parameters to optimise it for the scale that you will be using.

http://jimberry.org/svg_tester/ shows how the basic SVG looks at different widths.
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 00:28   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
davidekholm wrote:
Although they are a a software gigant, we've actually got them to perform a number of bug fixes on request so I'm not joking.
Feature requests might (understandably) be a different story - maybe I should have asked Oracle for this as a bug fix ;-)
I was eventually able to get SVGs working in fxml and css files here, but took some 20 3:rd party jar files to make it working as it involved Apache Batik. Batik is obviously a monster of dependencies. Crazy, but typical for server side projects where people really don't consider deployment footprint. I bet one can cut down those 3-4MB of 3:rd party jar files to a few KB by swapping Batik to SvgSalamander.

TomCee and I decided that Salamander couldn't do all the things I was looking for.

I may even play with that myself, but for the short term being, stick to PNGs or set the SVGs via Java/BeanShell calls. I can show how i you like to take that route.
What I would like to be able to do is to display the SVG background tiles in <image-view> in my ui.fxml, and also as repeating background images in a pane that demonstrates what the users selections of h1 and h2 font size, color and weight will look like against the selected background-color and background-image. If that is what you mean, I will certainly be interested in seeing how to take that route.
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 00:59   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Many thanks, jimberry. I'll start toying around with this as soon as I sober up. Which means, tomorrow at the earliest.

Edit: Even after a couple of single malts, I had success on my first attempt. Pumping the template file through engine.processTemplateFile, and feeding it some user variables, I instantly achieved a red globe with bright green lat/long lines on it, a combination that sort of vibrates, I hasten to add.

As always, of course, I can give users the tools, but I can't give them the taste to use them properly. ;)
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 01:36   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I thought I might have been able to get a solution with inline SVGs and CSS, avoiding the need for "on the fly" generation, but haven't yet been successful. :)
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 01:47   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Yeah, I've seen references to that - I'll take a run at it later to see if I can make that work.

It would eliminate one step in the process, but the processing time is close to zero, and the generated files are tiny, so....
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 03:10   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I can get it to work with inline SVG and CSS, but then I can't resize the image.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Basic</title>
<style>
.globe {
	fill: #0000ff;
	stroke: #ff0000;
}
</style>
</head>
<body>
<p>Page content.</p>
<svg xmlns="http://www.w3.org/2000/svg" class="globe" width="420" height="420">
<path stroke-width="20"
d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
</svg>
</body>
</html>
If I change the width and height attributes, that just cuts off the image. I've also tried wrapping the <svg> in a fixed-size <div> - no joy there, either.

None of the online examples I've found, claiming to allow you to style an SVG without using it inline, actually work. The only way it works with an <img> tag is to have the styling within the SVG file, which sort of defeats the purpose.
jGromit

Posts: 7,653
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 03:13   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I can also style the SVG with an external CSS file if I load it on the page with an <object> tag, but then again, I can't resize it.

The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Basic</title>
</head>
<body>
<p>Page content.</p>
<object type="image/svg+xml" data="globe_icon.svg"></object>
</body>
</html>
The SVG file itself:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="globe.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" class="globe" width="420" height="420">
<path stroke-width="20"
d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
</svg>
Finally, globe.css:
.globe {
	fill: #0000ff;
	stroke: #ff0000;
}
RobM

Posts: 3,209
Registered: 4-Aug-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 11:40   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
https://css-tricks.com/using-svg/
It seems you need to include a viewbox in the svg and then use a css width or height. Not tried it yet, getting the viewbox to encompass the icon might be difficult, most seem to suggest starting at 0 0 width height.

The link above does show it can be done though.
Legend
Forum admins
Helpful Answer
Correct Answer

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