I want to draw a tree on the screen where edges and nodes both have labels, user can zoom on the tree and users can change the locations of objects. In java there is a good tool named "JHotDraw". Is there anything like that for .net or / asp.net?
You will need to use javascript to render on a browser.
Take a look at the library TheJit.
ASP.NET is a server-side technology. You could use System.Drawing namespace (GDI+) to create static graphics from the server side, but... have you considered using SVG or Canvas?
The first - SVG - is a client-side markup to render real-time vectorial graphics in a regular HTML page.
Canvas is a client-side, 2D pixel-based rendering also for regular HTML pages.
Depending on your needs, you may choose SVG or Canvas.
Mozilla Developer Network (MDN) has good resources for learning more about both:
SVG on MDN.
Canvas on MDN.
Related
I have icons built as svg or png just as easily.
Also for those people that are using svg, what's the method you are using to display these?
Official iOS Dev documentation says "the PNG format is the one most recommended for use in your apps". You can read it for a lot more information here.
although the supported file types table doesn't list .SVG. Apple values user experience. SVG scaling consumes a few more CPU cycles which they don't like. PNG rendering is more efficient than SVG,and there are cases like zoom-in / out scenarios where SVGs would be better though.
if you want to use SVG icons across platforms in Xamarin Forms,you could use the Xamarin.FFImageLoading.Svg.Forms library which allow us to achieve this easily.
the more you could refer to SVG icons with FFImageLoading
Famo.us claims that it "talks directly to the GPU" to compute themselfs the css transforms. I assume they are talking about the 4x4 transform matrix.
When they say the "talk to the GPU" it means they are doing their maths in WebGL?
When they show 3D elements are they using WebGL in a canvas element?
Is their technology real THAT special or their claims are the result of an excellent marketing campaign?
Disclaimer: I do not work for Famo.us, I just share their vision in way software should be built.
The answer to all three questions is no. When they say talks to the GPU, they are not referring to the matrix calculations, they are referring to the matrix3d property of CSS that is GPU accelerated by the browser. By throwing out the box model of normal HTML and CSS, we can create a new model that follows the likes of traditional graphics development, which is based on a Cartesian coordinate system and all elements are absolutely positioned with 3d transforms.
There is no WebGL and no write to canvas. Every one of the (surface) elements on screen is just a div that is transformed. Every bit of text will still be highlightable and every button will still be clickable. It's all live. The rendering starts at the Context, which in most cases is the top level of the render tree. Nodes for other subviews are added as children. On each render cycle the context's render function is called, which in return looks down the tree and calls the render function of each subview recursively. Since the render engine is tightly integrated with requestAnimationFrame, all calculations can be determined then rendered at the time of screen refresh.
The technology can be considered special, because it throws away so many traditional paradigms in favor of a more modern approach to building web applications. That being said, it's really only Javascript. HTML was not built for web applications. HTML and CSS were built for static content pages and work as a crutch in trying to achieve applications similar to the ones we love and adore on mobile. Famo.us makes it possible to build applications with only JS, or a compile-to-JS language like CoffeeScript. You define Surfaces which correspond to divs on screen, and you apply properties for HTML attributes and CSS. You still have the option to apply CSS classes or inject HTML into surfaces.
In the end the choice is up to you. If you do not see the value, or are comfortable with the way you build web applications, then stick with it. Over the next few months you will see many more demos popping up as real users like myself create them. I can tell you already, it's amazingly promising.
Cheers
I want to add a slightly updated answer:
(I, too, don't work for Famo.us, but I did spend three weeks there working on projects)
While #johntraver has summed up pretty nicely what Famo.us does at the moment, it is important to understand that famo.us WILL support canvas and webGL.
Going deeper into the philosophy of famo.us, it throws away all the tools that HTML and CSS provide for layout and animation. ALL surfaces in famo.us are absolutely positioned at top:0, left:0 and EVERYTHING else is done purely with transforms, that are calculated by famous.
Animations are also done in javascript and don't use CSS transitions or Animations.
The more you think about it, Famo.us has almost no dependency on HTML or CSS, and that is exactly the plan. Famo.us treats HTML as just one of many possible renderers.
They are now working on adding WebGL rendering to famo.us. Essentially, what this will enable is a common API for layout and animation that will be able to render to WebGL AND HTML for the best of both worlds.
So, calculations will still be done in Javascript entirely, but the output may either be surfaces with transforms OR WebGL.
Hope that helps.
Trying to achieve something like this
http://attasi.com/labs/ipad/ which uses CSS transforms.
but using the Canvas object for greater compatibility.
Does anyone know if this is possible?
Take a look at three.js, it can render 3D using mainly WebGL, but it supports a subset of stuff with <canvas>, SVG and even the plain DOM - check this demo that uses the DOM renderer.
Here are demos using canvas. Some guy made this which shows it can do textured, animated game-like 3D with canvas.
Also, you may want to check out a particle engine and a tweening engine to go with that, plus stats like FPS.
I'm building an application, which is cross-platform (Linux, Win, OS X), and especially does graphics stuff via Cairo(mm), supported by a little bit of GTK+ scaffolding (i.e. DrawingArea). I now need some UI elements, which require a certain custom look. Ideally they should also be displayed as transparent overlay (i.e. different opacities for different parts of the UI).
As GTK+ is hard to customize (e.g. I want an edit-field with the suggestion-list above it), and me basically exactly knowing how I'd achieve this with HTML/CSS, the question popped up: Why not just let libwebkit handle the UI stuff?
I don't have much experience with WebKit, so what I need to know is:
Does my above reasoning make sense to anybody else?
CSS has opacity, can I interface WebKit in such way that it renders onto an RGBA-offscreen surface, with alpha-values inherited from the layout-processing of the CSS styles?
Even if 2. would not work, has anybody used libwebkit on an offscreen surface, which AFAIK requires redirection of keyboard and mouse interactions, probably via GTK+s provisions?
Is it possible to render web content over a clear background using WebKit?
is probably as good as it gets.
A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.
The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:
There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.
The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.
Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.
But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.
If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.
You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.
If you can go for canvas then you ca ntake a look at
Processing js library
or for SVG
Raphaël—JavaScript Library
There are only two ways i can think of atm:
Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
Not sure if it's possible to print absolute positioned elements cleanly.
Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.
My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.
Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).