What I want to do is create web pages with interactive SVG content. I had this working as a Java desktop application using Batik to render my SVG and collect UI events like mouseclick. Now I want to use those SVG graphics files in my JSF (Primefaces) web application in the same way.
Trying to get started, I found this didn't work:
<h:graphicImage id="gloob" value="images/sprinkverks.svg"
alt="Graphic Goes Here"/>
I don't mind doing some reading to get up the learning curve. It was just a bit surprising that some google searches didn't turn up anything useful.
What I did find suggested that I would have to do this with the f:verbatim tag as if I were hand-coding the HTML. I would then have to add some script to capture the SVG events and feed them back into the AJAX code. If I have to do all that I will, but I was hoping there would be an easier and automated way.
So the questions are:
How to get the image to render in the first place?
How to get the DOM events from the SVG portion of the page back to the backing beans?
Much thanks for any pointers.
How to get the image to render in the first place?
The <h:graphicImage> just renders a HTML <img> element. This doesn't work for SVG objects in current browsers. You need <object type="image/svg+xml">. Since JSF 1.2, there's no need for the <f:verbatim> ugliness. On Facelets you can just inline EL in plain HTML like so:
<object type="image/svg+xml" data="#{bean.svgUrl}">
The standard JSF implementation however doesn't offer an UI component which renders an <object>, so you have got to do it the plain vanilla HTML way. I've checked at PrimeFaces, OpenFaces and RichFaces, but no one offer a component yet which is targeted on embedding SVG objects. PrimeFaces has a <p:media> and RichFaces an <a4j:mediaOutput> for movie objects, but that's it.
How to get the DOM events from the SVG portion of the page back to the backing beans?
Your best bet is to write some JavaScript which delegates to a hidden JSF ajax form. Write the necessary data to the hidden fields and trigger the <f:ajax> change or action. You can find a similar example in this answer.
You could try some kind of mix between ItsNat and JSF, for instance using an iframe to contain ItsNat generated markup containing SVG. ItsNat provides many options to integrate SVG in web applications, pure SVG or SVG inline in HTML, including SVG events and Batik (by the way SVG events in Batik applet are going to be fixed in ItsNat 1.1).
Idea: use a session attribute to share a bridge object between JSF and ItsNat
Related
I want to embed this a-frame project to my portfolio on Squarespace (most basic plan) like what a-frame shows in their embedded page but I'm not even sure if it's possible? I'm also super new to coding so let me know if I should provide more info. If people can also explain things in baby language that would be awesome thanks
embedding remote a-scene?
if you want to link your existing project to a different page then... I don't think it's possible. Look:
the documentation page uses a real a-scene there, with a-boxes and stuff.
It may be possible via iframes but I don't know if it works. There is something like this in the documentation:
For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device. - source
embedded
embedded is used to create a smaller window of a-scene inside a standard HTML page. As far as I know, it just sets or changes some CSS values. Unfortunately, there is nothing like a magical src attribute that would allow you to fetch a different scene from another page
If you can upload a static HTML file onto Squarespace then by all means you can embed it there. But remember that
Only one <a-scene> can exist on a page - same source
You would need to copy your entire project a-scene and paste it into your Squarespace page. Add A-Frame script in header or link a js file and all standard stuff.
link
this may not be what you are looking for but you could potentially create an embeded a-frame scene that would have a link inisde that would "teleport" you (change location) to your project. link - A-Frame
I am creating a application where the UI is been formed using WxPython. I am using a Panel with a HTML window.
In this HTML page which is displayed, I would like to extract information, for example the text of a textBox, which radio button is selected, a click of a button etc, and at the same time show some information to the user, like when a process was been completed and its result or similar information.
I am not finding a good way of doing that, as long I could understand, I will need to use Javascript or something to interact with the page in some way. But I could not find how to send and receive information to the page, and if the wx.html.HtmlWindow supports Javascript.
What would be the best way of doing that?
You could communicate through a socket. Create a local socket server on the python side, and then use javascript to connect to that socket. There are plenty examples of this around the web. See the docs for python Socket Server: https://docs.python.org/2/library/socketserver.html
It doesn't look like the wx.html module supports javascript or css:
This module contains a widget class and supporting classes for a generic HTML renderer. It supports only a subset of the HTML standards, and no Javascript or CSS, but it is relatively lightweight and has no platform dependencies. It is suitable for displaying simple HTML documents, such as the application’s documentation or built-in help pages.
It does look like you can handle the EVT_HTML_LINK_CLICKED event to tell when a user clicks a link, but I'm not sure how you would get the input from html form elements like textboxes, radio buttons, etc.
Your best bet may be to create a web app using a microframework like Flask and serve the app locally.
Ok, so I'm asking this to document my solution and will answer it myself but any improvements on my method are welcome.
The problem:
I need to render a report to both an html page embedded in an iframe (so it needs its own url) and to pdf.
The report includes an out of the ordinary graph which is not supported by any graph api I've seen.
My site uses the Joomla! CMS (V. 2.5.*) which means my backend is php and mysql.
I need the report to render without interference from the default template set on Joomla.
I'm running on a linux host, (basic LAMP).
Joomla uses the base tag in their html which screws up svg's url().
My solution involves the following: wkhtml2pdf, js, url parameters, and writing a joomla component.
I wrote a basic Joomla component with two site views, one that generated the report in html and one that displayed the report view in an iframe. So the report has a url to access it at, and I have a way to embed it. The component also had the js and css for generating the report extracted out to separate files for including in the media folder (but that was just for code cleanliness not functionality).
The report view had to do the following modifications to the page header to get the report to render right (save for the graph) otherwise the resources were loaded at the wrong times:
$document = &JFactory::getDocument();
$document->setBase('');//base tag screws up svg urls so get rid of it
$document->addscript('http://www.google.com/jsapi');
$document->addscript(JURI::root(true).'/media/com_metahealthzone/javascript/chart.js');
$document->addStyleSheet(JURI::root(true).'/media/com_metahealthzone/css/chart.css');
The url used in the iframe had to have ?template=system appended, tmpl=component didn't work as the css from the template was still applied.
To get the Google visualization to look right I added javascript to the end of the OnLoadCallback to grab the svg and add a linearGradient as a child of the defs tag with id="svg_grad" (why Google doesn't support gradients, I don't know) then grab all the elements in the graph that needed the gradient and set their fill to 'url(#svg_grad)'. Remember to use setAttributeNS because of the svg namespace, and make the gradient stop tags be children of the gradient not of defs.
I still have to do the tweaks for VML (stupid IE).
There were some issues with wkhtml2pdf that I had to overcome too. When you add an element to the DOM using js it doesn't behave like other browsers. You must keep the returned handle because you can't get the new element using document.getElement* type functions. Also you have to instruct wkhtml2pdf to wait for the js to run using --no-stop-slow-scripts or the graph won't show up (it's slow). I also had to impersonate the user's session by setting the cookie for wkhtml2pdf using the --cookie <name> <value> argument.
How do you validate (for example using http://validator.w3.org/) a multipage jquery mobile site? For example if I navigate away from index.html the page is only a div without a header or body.
"It depends".
Validation only makes sense in the context of HTML documents, and if you are modifying a document with JavaScript you only have the initial state to validate.
You could use a tool such as Selenium to drive the site and take snapshots of the DOM (serialising it to HTML) when it is in different states, then validate those snapshots. (The markup validation series has an API you can call programatically so you could combine those).
If you are generating fragments of HTML on the server (instead of sending pure, structured data to the client) then you can embed those fragments in HTML skeleton documents and validate those. You should have such documents existing for most views anyway (since you don't want to repeat Gawker's mistake by having a fragile site completely dependant on Ajax).
See also Progressive Enhancement and Unobtrusive JavaScript
We have a feature in our application which allows users to select a set of assets (images, videos etc.) and generate an embed code for those, which can be embedded in another web page. As of now we use iframes to implement in the embed code where page pointed by src attribute of iframe spits out HTML to embed.
For some security reasons we want to get rid of iframes and replace that with something else like an object tag, script tag etc.
My question is about object tag. Primary use of object tag seems to be to embed a video, a pdf etc. I know it can be used to embed an entire webpage just like what we want. But my question is - is that recommended? The webpage we want to embed will have a set of assets with options to sort, download, share, preview those assets.
So will it be a good practice to use object tag for embedding such a complex web page? Or is it meant for minimal usage like embedding a video clip, a slideshow etc.?
Depending on the type of technology you are using, you can do something similar.
With your request you are getting into the portlet/web part discussion, where you want to embed portlets (mini apps). There is no object tag you can use (to my knowledge its only image, applet and iframe I think) from the client side, but you might be able to pre-load the parts before you send the user the final page (say, like wordpress widgets in php).
Otherwise you need to go the Javascript route, and do some kind of lazy loading of your 'widget/applications' as needed.