What possible web technology Google might have used for this Gideon Sundback doodle (see video)
http://www.youtube.com/watch?v=utijBRRmAJo&feature=relmfu
I am really curious. in a web browser, can we really do this much? I guess it is not flash, else i would not wonder. Any source code or similar samples available?
Guess it shows off how much we can extend in web technologies now.
A Canvas element <canvas> is used. All modern browsers supports HTML5 now - Firefox, chrome and Opera. Yes it is possible to do these with the browsers of today!
The zipper teeth are drawn onto the canvas from a png sprite file. The zipper slider also resides in that png image. The whole interactive animation is coded in the Javascript. The zipper peel effect is done using the arc() method of the context object, context being 2d in this case.
As soon as you click on the slider, it hides all the Dom elements - buttons and text input and all what you see is the canvas drawing. Since using the javascript code that is used, can't alone recreate the effect on the local html file. I think some external libraries are used. I am not sure how the google.listen() method works as its not defined. Check out the javascript here, in this thread, which is beautified javascript code, using the jsbeautifier.org
Related
I have what seems like a simple task. I wrote a Windows application using C++. Now I need to add to it a capability to print forms -- nothing fancy, just plain text, with lines, tables, and simple graphics. Besides printing, a user needs to be able to preview on the screen all forms being printed.
Previously I was able to get away with this task by using an embedded Internet Explorer control and design all forms in HTML (which I like -- the HTML part.) But the problem comes with IE... hmm... I wish I had a nickel every time I heard that phrase :) Anyway, IE can print an HTML page but it does not provide any easy way for users of my software to customize page size, page margins, etc.
I spent a good deal of the last week trying to make IE Print Templates work with what I need ... but eventually failed. That stuff is very poorly documented and what I was able to do seems to randomly crash on me. So at this point I gave up on IE...
So my question to you -- is there a way to incorporate printing into my C++ program for the purposes like I described above?
If I remember correctly, printers have their own HDC, and you can draw on it. That'll work if have something simple. If you want to render HTML page using pure WinAPI, you're in big trouble.
I'd advise to abandon winapi and try GUI framework instead.
Qt 4(and 5, most likely) has text editor that can display rich text, layout engine for rich text, component that can display web pages. Read documentation a bit, and you will most likely find a way to render web page onto printer instead of screen. So far it looks like exactly what you would need.
Using Qt will add dependencies (20+ MB of DLLs for your project), but, IMO< it is a better idea than trying to use IE COM interfaces.
If you don't want to use Qt, you could try something like WebKIT, but I had some bad experiences with it, plus Qt might be just easier to use.
Additional info on printing: Printing with Qt.
Try searching for GDI, if you want to use win32 builtins.
Or use another toolkit like wxWidgets. Or consider writing to PDF with some library. Or let LaTeX do the heavy lifting - writing text files is easy. The LaTeX-way works as long as you don't want to modify your output depending on the layout (one Use-Case that doesn't work with LaTeX is the "balance" at the top/bottom of each page.)
Consider having your program generate XML files and using XSLT to render them into HTML.
By attaching stylesheets you will make it much easier to customize the presentation.
It is possible to create screenshot of a Window content in Qt 5? E.g we have web browser and I want to create screen only of the page without chrome (menus window ...). Here is an example:
http://s7.postimg.org/5ekkmpdbd/question.png
Image above represent the feature which I want to implement in my Qt application.
Here is the example:
originalPixmap = QPixmap::grabWindow(QApplication::activeWindow()->winId());
there is a possibility to render only the content (web page) of the browser ang get the image?
The way to deal with the chrome issue depends on what is your goal. The "chrome" you are referring to is a part of the web browser application that you're trying to interact with.
If you're doing this as a quick in-house hack, then you're free to hard code some offsets needed to trim the original pixmap so that the chrome is removed.
If you want something that can grab website screenshots and doesn't care on which browser is being used, you should be using WebKit bundled with Qt. Then you have full control over where the stuff is rendered.
If you want to grab screenshots from a user-provided browser, then one approach is to add an extension into the browser, and implement a server that can receive images from the extension running in the browser. The extension can be written in javascript presumably for everything out there but IE. It will be browser-specific, though.
Another approach is to check if the browser doesn't provide some other APIs that could be used for the purpose, without a need of writing an extension. For all I know, similar extensions should already exist. There surely are open source website testing frameworks out there that let you render a site in multiple browsers; they should provide this "grab from a browser" functionality.
Nitpick: In Qt 5 you should be using QScreen::grabWindow(), not the deprecated QPixmap::grabWindow(). I also hope that you're aware that if there are any windows in front of your window and obscuring it, they'll be grabbed. The grabbing is done from the screen, not directly from the window.
I have recently implemented some data visualisation using d3.js, I'm now trying to get this to work for Internet Explorer browser versions 7 and above. The common suggestion to get this to work, is to combine d3.js with raphael.js, which is a cross browser graphics library.
There already seem to be some implementations of such libraries such as
r2d3.js :
d34raphael.js :
I'm trying to understand if these existing implementation already have d3's capability of data binding and the physics implementation of the force layout to implement something as simple as this d3 example : http://bl.ocks.org/1095795
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
I am trying to make a few interactive graph visualisations in my Django web application using Python. I found Graphviz and was able to output a static graph (as a .png image) on my application using Pydot (Python interface to Graphviz's dot language).
However, I am looking to make my graphs more interactive, like being able to highlight nodes when passing my mouse over it, making the nodes click-able, dragging the nodes to a different location and zooming on the graph.
Is there a way I could do this in Graphviz? Or in general is there way to make an interactive graph for my Django application without having to use Flash? I don't want to use flash since I'm not that familiar with it and also since I want to visualise a fairly large dataset.
Try The Javascript Infovis Toolkit. It is all implemented in a browser canvas, so no Flash is needed, only a decent browser with support for the <canvas> tag. Graph visualization examples are here, here and here, other demos are here.
There is Canviz (source). However, nodes are not yet clickable (they were in an older version that used image maps. The code base has changed and now the rendering is happenning client side using javascript, which is why clickable links is not yet re enabled.
This is the best I found, however they are plenty of others.
mxGraph (Not free)
You can use D3.js for graph visualization (see here for examples of graph visualizations in D3js, and look at How to Make an Interactive Network Visualization).
For back-end (if it is necessary to have something more than just a json file to represent the graph - i.e. if it is large), then you can use a Python module for graphs, NetworkX.
Side note, here is my simple interactive graph visualization example:
You can do something like this very simply just with DOT and HTML.
Generate client-side maps and overlay them over your PNG images. (Insert the map code into the HTML page.)
dot test.dot -Tpng -o test.png -Tcmapx -o test.map
SVG exports are directly clickable.
It seems like an approach that fits what you are trying to do might be to use svg in the browser an/or javascript. I think most of the modern browsers support SVG and would allow you to do some pretty cool interactive graphs. The server could provide a json feed of the datapoints needed to render the graph. I don't know off hand the tools that are available, but I've seen some pretty cool graph demos constructed without flash through client-side approaches.
As an alternative, you could pre-render a bunch of graph images that the user would likely view and then just fetch those as the user interacts with the graph. This might work if the graphs don't change that frequently and if the number of alterations that the user would make is small, but you'd have to re-render every time the graph changes.
I've did what you are trying to do not too long ago. The context was visualizing a gnarly SalesForce schema.
First thing, graphviz is only good for plotting, not really for drawing. You can generate SVG, but I could not get it to work with I.E. after a considerable of (what turned out to be fruitless) effort.
I DID find this Java Applet ZGRViewer to suffice, and while applets feel a bit dated for my taste, it worked very well cross browser.
I basically hand coded a process invoking service that generated the dot files and ran them thought (dotty, is think?) - the visulazation applet reads the native dot file format.
I also came accross something that I thought about for a V2 (which never happened) - it is part of the AJAX control toolkit - Seadragon.
If you want to see the code in ASP.NET, I can post it.
I am doing some web data classification task and was thinking if I could get the co-ordinates of html elements as they would appear on a web-browser without taking into consideration any css or javascript being referred in the web page.
My language of programming is c++ and the need results for a couple million of pages, so it has to be fast. I know there is a Microsoft COM component which renders the page in a web browser control and then can be queried for position of different html tags. But this is not suitable in my case as it first renders the whole page which takes up a lot of time.
So as I found out, there are open-source layout engines WebKit, Gecko that can probably be used for this. But that's a huge piece of code and I need someone to direct me to the right classes or right modules to look into or any previous/similar work someone has done previously. Also, please let me know what you guys think is a good choice if I want to customize the existing code for use with multiple threads to make it faster.
Thanks
Generally, you would find that different page rendering engines do render the html in their own way and the results will differ.
The thing is that if you stick to any concrete browser engine, what you are to do is somehow bringing this engine into your project and using engine's interface to retrieve these coordinates. Kind of a tough task though, simply because you'll have to read a lot of documentation and crawl through thousands of files.
I think that right approach would be posting this task in some place, that is specific for the page rendering engine you've chosen. (gecko/webkit/...)
If you prefer sticking to something MS-specific, guess it's gonna be easier, but can't help you with something like class names or code chunks that you want to see. Probably somebody else could guide you in this case.