Is this possible at all? I call Image.createSVG(...) and receive an Image object without any errors. I then call Button.setIcon(). But there's no icon on the button.
You need to check Image.isSVGSupported() which currently will always return false.
Back in the day J2ME supported SVG thru one of the JSR's. No platform since has supported SVG natively with the exception of the web so this doesn't work on any of the modern platforms and we didn't bother implementing this even for the JavaScript port.
In the future we'd like to have a more efficient/portable way of supporting SVG e.g.: https://github.com/codenameone/CodenameOne/issues/1890
Related
In manifest.json, we specify our background page and can put an html or a js file for it. Since it is only a script that executes what sense does it make to have an html file for it?
I mean where is UI going to get shown anyway?
Similarly the devtools_page property has to be an html file. What sense does that make?
It will not be shown anywhere (that's the essence of "background"), but some elements on it make sense.
You can have an <audio> tag, and if you play it, it will be heard.
You can have an <iframe> with some other page loaded invisibly.
..and so on
As for devtools_page, it would actually be visible in the interface (as an extra panel in the DevTools)
It is possible that devtools_page must be an HTML file just for legacy reasons: it was not updated when manifest version 2 rolled out with changes to how background pages are specified. Still, the same arguments as above apply.
background_page is a legacy feature from the initial support of extensions in Chrome. background.scripts was added in Chrome 18. I can't speak for Google's original intentions but I'd guess that in the original design using an page felt more natural and would be less likely to confuse developers. Once they realized how many background_pages were just being used to load JavaScript it made sense to explicitly support that.
I've setup two pages with the background-size:cover; with one using a .jpg and one using a .png. Both pages render fine in Chrome/Safari/Firefox on the desktop, but for some reason the .jpg version does not render on iPhone/iPad in Chrome/Safari.
PNG Version
JPG Version
I suspect it might have something to do with the compression of the .jpg which I set to the lowest (smallest file size) setting in Photoshop, but I could not find any actual info on this. Any advice is much appreciated!
EDIT:
I am already using the browser specific prefixes in my css (e.g. -webkit-,-moz,-o-).
background-size is a new CSS property and therefore isn't available everywhere yet
although in mobile devices -webkit-background-size:cover; should do the trick
For Safari versions <5.1 the css3 property background-size doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
Hence use -webkit-background-size:cover.
Reference-Safari versions using webkit
I am creating an ASP.NET web application. In one of my webpages (an ASCX control) I am placing a fusion chart inside a <div> tag. I want to provide an option for the client to download this fusion chart.
Is there any way that I can download
the fusion chart present in the Div
tag, as an image (Using javascript
because the div tag is a client side
control).
The request is that my client could save this fusion chart present in the <div> tag as an image when he visits the webpage.
The target browser is IE.
Please help me.
I can confirm that it is not possible to 'Export the chart as image' when using FusionCharts Free. However, as mentioned by Larsenal, you will be able to use FusionCharts v3.2.1 and it's updated JavaScript API to export pure JavaScript charts to JPEG, PNG, PDF, SVG formats.
Ref.- http://www.fusioncharts.com/docs/?ECPureJS.html
Furthermore, you may even export your Flash charts, if required, in a similar manner. DO check out the link below for a more detailed account of the same.
Ref.- http://www.fusioncharts.com/docs/?ECOverview.html
Hope this helps.
It is currently not possible to generate an image from a section of a webpage with JavaScript. Quoting myself from another question:
Firefox added something similar to
this to their canvas implementation.
You can find
CanvasRenderingContext2D.drawWindow()
documented in their wiki. It is
restricted to being used by plugins,
for security purposes, and isn't
supported by any other browsers.
There is
talk
of adding support to other browsers,
and perhaps removing some of the
security restrictions, but that is
probably a long way off. For now,
there isn't a good JavaScript solution
to your problem.
Sorry, there's no way to do it with Javascript.
I don't know about the Fusion controls, but some graphing libraries include a way to render to an image or PDF. Start looking there, not Javascript.
Update: FusionCharts claims to have the ability to export to JPG, PNG, PDF and CSV. Start with this page about exporting pure JS charts in their documentation.
I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements.
high browser compatibility
ability to draw shapes
ability to fill shapes with gradients
ability to have onclick and onmouseover events for the different shapes (bars in the chart).
Thanks guys. I was thinking of using svg but looking for suggestions.
How about Raphaël - it's SVG/VML.
It says:
Browser compatibility:
Raphaël currently supports Firefox
3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Ability to draw shapes
circle, rect, ellipse, image, text, path
Ability to fill shapes with gradients
yes
Ability to have onclick and onmouseover events
yes:
... every graphical object you
create is also a DOM object, so you
can attach JavaScript event handlers
or modify them later.
Everything in the reference
On top of that, there's a plugin called gRaphael which makes the creation of charts easier.
Simple data - Google Charts API or Google Visualization API may suit you.
Details for all features of image charts can be found on the Chart feature list
You may also take a look at the comparison of the Charts API and the Visualization API.
Another candidate of course is JQuery SVG - if you're already familiar with jquery you may prefer this one.
There's a comparison of JQuery SVG and Raphaël on SO:
jQuery SVG vs. Raphael
I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
Based on your criteria:
high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.
ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.
Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.
ability to have onclick and onmouseover events for the different shapes - see this link for some easy ways to create user interactions with charts.
Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:
http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart
i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js
I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.
I made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.
Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).