I was researching what graphics to use for a project, and Raphael.js came to be a top contender. However, when reading the sample code and documentation, it shows that Raphael creates a canvas (via the paper variable on the homepage), and then you add stuff to it. Two months later, a passerby comes by and ask some question about our project, and I explained that we didn't use Raphael (instead we chose static SVG and D3) because Raphael used canvas's, and our project would have been greatly disadvantaged by using canvas's. So you Raphael expert's out there, is the canvas in Raphael an actual html canvas or not? and where can you link to it, so that you/and or I can send a pull request to explain that better upfront.
No Raphael's paper is SVG.
It is kinda strange, because the paper object property is called canvas but it only contains the SVGAnimatedString
Fiddle: http://jsfiddle.net/V2DGy/
Raphael uses SVG and VML to create graphics. The variable canvas is simply named as canvas and is not a canvas element. In fact, it is the root SVG element associated with that specific paper.
Raphael is very much similar to d3 but is more on thd lines of a graphics library and the added advantage of compatibility with Internet Explorer 6 through 8 (using VML instead of SVG.)
Though the variable name is misleading, yet Raphael mentions upfront in their home page that it is SVG library.
Quoting their website.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
No. Is svg. Totally different. Canvas contains "a picture", svg contains vectorial elements.
Related
I'm trying to graph some things in C++ and Koolplot seems like a very simple and suitable library to do so with. I'm stuck, however, on finding some documentation about it that allows me to fullscreen the application (or resize it like you can do so on lots of applications, chrome, word, discord...). As well as this, I can't find or see how i can allow the user to drag the graph around with the mouse as well as zooming into a point of a scatterplot or function. If anyone has any ideas about these things i'd appreciate it, thanks.
The short reply is: cannot do.
Koolplot uses for drawings of the charts a modernized version of the venerable BGI driver. It was invented once upon a time, when personal computers were still running on some DOS version. Those times the graphics were full screen, hence of fixed size. This particularity was kept in the modernized WinBGIm library.
Zooming or panning properly a chart present on the screen require access from the drawing/painting routines of Koolplot to the data to be shown. This is not the case. If you look once again in the source code, you will note that in the implementation efforts were made to keep separated data to be plot from the actual drawing on the screen.
In conclusion, to do what you want, you will have to modify WinBGIm such that it manages correctly a drawing surface of variable dimensions and modify koolplot such that data to be shown is owned by (or aggregated with) Plotstream class.
I'm working on a stream overlay that extracts information out of a game (flight simulator) and displays it on the screen. Right now I'm using Qt in conjunction with a *.html to render the overlay. It is all working really well, however I wanted to add some customization options for the users of my overlay software and I figured the best way would be to render the Overlay in QML.
The main part of the overlay is a row that contains around 8 "elements" that display the relevant data.
One thing that should be customized is the order of the elements in the row. But I really have no idea how to implement this feature. I've seen a few posts and tutorials on how to customize the order in a View using the DelegateModel. However right now it's not a view but QML Components inserted in a RowLayout due to the fact that they are all different components (e.g. some of the images are actually animated for which I'm using a component that uses Canvas2D to draw the images). I guess I could figure out a way to store those elements in a model using the Loader Component to display the content in QML. But even then I'm not entirely sure how to store and restore the order of the elements. As far as I can tell the DelegateModel only changes the View and not the underlying model.
Any suggestion or best practice to accomplish my goal would be highly appreciated.
Programming the GDK a few weeks now, the CardScrollView is a pretty nice interface for displaying cards. However one issue with the UI is showing the user how far along they are in the card stack. In the Mirror API, this is nicely handled by the Slider view at the bottom of the screen as described on the Glass Design page:
https://developers.google.com/glass/design/style/metrics-grids
Unfortunately, I have not been able to get this Slider object to display on the CardScrollView and instead have resorted to a klugey 1 of n text.
Is there any way to get this Slider view to display in the GDK?
This is not yet supported by our API but is currently tracked with Issue #256.
For future reference, this feature has been already implemented as described in the original issue.
You can use the method setHorizontalScrollBarEnabled to show the bar, e.g.
mCardScrollView.setHorizontalScrollBarEnabled(true);
I have a software which displays small image thumbnails at the bottom of the screen:
But these sample 5 are just a small portion of all the available ones. I am looking for ideas of libraries or just available open source code that would let me animate them as they switch to the previous/next ones in the list when the arrow button is pressed or the user flicks them left/right like on an ipod.
I am NOT using Qt (as another answer suggests using it).
Hey my be you need this one, has got nice animations and its native
http://www.codeproject.com/Articles/21006/Not-just-a-image-list-control-Neat-3D-iTunes-style
I have an visaul object up and running
GetwindowoffsetEx moved the canvas around
But I cannot change the size of the canvas to my needs
Like should I not beable to change the canvas size for a A4-A3 printer or to a picture size
can this be done using the windows API
I do not seem to get the instructions to do this.
I take it that if I want a Zoom, I strech draw from another cavuas
am I asking the obvious in all this.
Lex Dean
I'm struggling to understand exactly what I need but you seem to want to map between two coordinate spaces in GDI.
Whilst you can use the fully general SetWorldTransform(), I suspect you are better off with the following functions:
SetWindowOrgEx(), SetWindowExtEx()
SetViewportOrgEx(), SetViewportExtEx()
The MSDN documentation also includes a full list of functions related to coordinate space transformations.