PDA

View Full Version : SVG, VML and chart on Extjs natively



nouveauc
21 Oct 2008, 4:54 AM
Hi all.I'm beginner and speak french.So sorry for my code and the fault. I'm working presently on graphic on the good Extjs.I begin by writing a extension for svg.feature:can create rectangle, ellipse and circle and can paint with some color or gradian (radial or linear). It work on FF, Google chrome,Opera.For IE I'm writing the equivalent on VML.There are bugs and i'm :s .
GOALS:
create a graphics (Ext.drawing) in extjs for IE, FF,Opera, ... with a same code
create a chart (Ext.Chart) based on Ext.graphic with the possibility to update dynamicly when the linked Ext.data.Store changed;
create a game linbrary
and ... ouffffffffffffffffffffffffff
So I'm going back to work. I'll add stroke (pencil) ,ronded rectangle,path,text,text path for svg and all for VML
the code (t is first impression, it is not finish, so there are no comments and the code is not pretty):



Ext.namespace("Ext.Drawing");
Ext.Drawing.version='version 0.0.1';
Ext.Drawing.vmlGraphic=function(s){
this.surface=s;
var i=Ext.id();
this.svgid=i+'vml';
}
Ext.Drawing.vmlGraphic.prototype.createRect=function(config){

var r =document.createElement("v:rect");
r.style.top=config.y;
r.style.left=config.x;
r.style.width=config.width;
r.style.height=config.height;

if(!Ext.isEmpty(config.fill))
{
var d=this.createfill(config.fill);
r.fill=d;
}

return new Ext.Element(r);
}
Ext.Drawing.vmlGraphic.prototype.createEllipse=function(config){
var r=document.createElement("v:oval");
r.style.top=config.cy-config.ry/2;
r.style.left=config.cx-config.rx/2;
r.style.width=config.rx;
r.style.height=config.ry;
if(!Ext.isEmpty(config.fill))
{
r.fill=this.createfill(config.fill);
}
return new Ext.Element(r);
}
Ext.Drawing.vmlGraphic.prototype.createCircle=function(config){
var r=document.createElement("v:oval");
r.style.top=config.cy-config.r/2;
r.style.left=config.cx-config.r/2;
r.style.width=config.r;
r.style.height=config.r;
if(!Ext.isEmpty(config.fill))
{
r.fill=this.createfill(config.fill);
}
return new Ext.Element(r);
}
Ext.Drawing.vmlGraphic.prototype.createfill=function(config)
{
var f = document.createElement("v:fill");
f.on=true;

if(typeof config == "string"){
f.color=config;
f.type="solid";
}
else
{
if(!Ext.isEmpty(config.url))
return "url(#"+config.url+")";
else
{
if(config.type == "color" || !Ext.isEmpty(config.color)){
f.color=config.color;
f.type="solid";
}
else if(config.type == "linear"){
var stops="";
Ext.each(config.stops,function(it,ind,ar){
stops+=it.offset*100+"% "+it.color+","
});
f.colors=stops;
f.type="gradient";
}
else if(config.type == "radial"){
var stops="";
Ext.each(config.stops,function(it,ind,ar){
stops+=it.offset*100+"% "+it.color+","
});
f.colors=stops;
f.type="gradientradial";
}
}
}
return f;
}

Ext.Drawing.vmlGraphic.prototype.createRender=function(e)
{
if (!document.namespaces['vml']){
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
//var styleSheet = (document.styleSheets.length > 0) ? document.styleSheets[0] : document.createStyleSheet();
var styleSheet =document.createStyleSheet();
styleSheet.addRule('v\:* {behavior:url(#default#VML);}');
}
return e;

}




Ext.Drawing.svgGraphic=function(s){
this.surface=s;
var i=Ext.id();
this.svgid=i+'svg';
}
Ext.Drawing.svgGraphic.prototype.createRect=function(config){

var r =document.createElementNS("http://www.w3.org/2000/svg","rect");
r.setAttribute("x",config.x);
r.setAttribute("y",config.y);
r.setAttribute("width",config.width);
r.setAttribute("height",config.height);
if(!Ext.isEmpty(config.fill))
{
r.setAttribute("fill",this.createfill(config.fill));
}
return new Ext.Element(r);
}
Ext.Drawing.svgGraphic.prototype.createEllipse=function(config){
var r=document.createElementNS("http://www.w3.org/2000/svg","ellipse");
r.setAttribute("cx",config.cx);
r.setAttribute("cy",config.cy);
r.setAttribute("rx",config.rx);
r.setAttribute("ry",config.ry);
if(!Ext.isEmpty(config.fill))
{
r.setAttribute("fill",this.createfill(config.fill));
}
return new Ext.Element(r);
}
Ext.Drawing.svgGraphic.prototype.createCircle=function(config){
var r=document.createElementNS("http://www.w3.org/2000/svg","circle");
r.setAttribute("cx",config.cx);
r.setAttribute("cy",config.cy);
r.setAttribute("r",config.r);
if(!Ext.isEmpty(config.fill))
{
r.setAttribute("fill",this.createfill(config.fill));
}
return new Ext.Element(r);
}
Ext.Drawing.svgGraphic.prototype.createfill=function(config)
{
if(typeof config == "string")
return config;
else
{
if(!Ext.isEmpty(config.url))
return "url(#"+config.url+")";
else
{
if(config.type == "color" || !Ext.isEmpty(config.color))
return config.color;
else if(config.type == "linear"){
var grad=document.createElementNS("http://www.w3.org/2000/svg","linearGradient");

if(Ext.isEmpty())
grad.id=Ext.id();
else
grad.id=config.id;

if(!Ext.isEmpty(config.x1))
grad.setAttribute("x1",config.x1);
if(!Ext.isEmpty(config.x1))
grad.setAttribute("y1",config.y1);
if(!Ext.isEmpty(config.x1))
grad.setAttribute("x2",config.x2);
if(!Ext.isEmpty(config.x1))
grad.setAttribute("y2",config.y2);
Ext.each(config.stops,function(it,ind,ar){
var st=document.createElementNS("http://www.w3.org/2000/svg","stop");
st.setAttribute("offset",it.offset);
st.setAttribute("style","stop-color:"+it.color);
grad.appendChild(st);
});
this.surface.defs.appendChild(grad);
return "url(#"+grad.id+")";
}
else if(config.type == "radial"){
var grad=document.createElementNS("http://www.w3.org/2000/svg","radialGradient");

if(Ext.isEmpty())
grad.id=Ext.id();
else
grad.id=config.id;

grad.setAttribute("cx",config.cx);
grad.setAttribute("cy",config.cy);
grad.setAttribute("fx",config.fx);
grad.setAttribute("fy",config.fy);
grad.setAttribute("r",config.r);
Ext.each(config.stops,function(it,ind,ar){
var st=document.createElementNS("http://www.w3.org/2000/svg","stop");
st.setAttribute("offset",it.offset);
st.setAttribute("style","stop-color:"+it.color);
grad.appendChild(st);
});
this.surface.defs.appendChild(grad);
return "url(#"+grad.id+")";
}
}
}
}

Ext.Drawing.svgGraphic.prototype.createRender=function(e)
{
var el=document.createElementNS("http://www.w3.org/2000/svg","svg");
el.setAttribute("width",this.surface.width+"px");
el.setAttribute("height",this.surface.height+"px");
e.insertFirst(el);
var def=document.createElementNS("http://www.w3.org/2000/svg","defs");
el.appendChild(def);
this.surface.defs=def;
return el;
}




Ext.Drawing.Surface=Ext.extend(Ext.BoxComponent,{
initComponent : function(){
Ext.Drawing.Surface.superclass.initComponent.call(this);
if(Ext.isIE)
this.graphic=new Ext.Drawing.vmlGraphic(this);
else
this.graphic=new Ext.Drawing.svgGraphic(this);
},
onRender : function(ct, position){
Ext.Drawing.Surface.superclass.onRender.call(this, ct, position);
this.el=Ext.get(this.renderTo);
this.render=this.graphic.createRender(this.el);
if(!this.width){
var sz = this.el.getSize();
this.setSize(sz.width, this.height || sz.height);
}

},
// private
onDestroy : function(){

}
});
Ext.reg('surface', Ext.Drawing.Surface);
use: (bug in IE)


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XTech SVG Demo</title>
<link href="../sivom/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="../sivom/ext/adapter/ext/ext-base.js"></script>
<script language="javascript" src="../sivom/ext/ext-all.js"></script>
<script language="javascript" src="../drawing/Graphic.js"></script>
<script language="javascript">
Ext.onReady(function(){

var sur=new Ext.Drawing.Surface(
{
width:600,
height:600,
renderTo:'essdiv'
}
);

var m= sur.graphic.createRect({
x:20,
y:30,
width:200,
height:300,
fill:{
type:"linear",
stops:[{offset:"0",color:"#FFFF00"},{offset:"0.75",color:"#0000FF"},{offset:"1",color:"#F0F0FF"}]
}
});
var r=sur.graphic.createCircle({
cx:100,
cy:50,
r:100,
fill:"red"
});
sur.render.appendChild(m.dom);
sur.render.appendChild(r.dom);

});
</script>
</head>
<body id="body" style="border: 1px solid black; position: absolute; z-index: 0; left: 5%; top: 5%; width: 90%; height: 90%;">
<div id="essdiv"></div>
</body>
</html>
screenshot10075

nelius
30 Oct 2008, 1:38 AM
great idea, have you thought of using canvas instead of svg?

Which license will you place this stuff under?

Jowood
5 Nov 2008, 7:28 AM
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

// Add required css rules
var style = document.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");

nouveauc
5 Nov 2008, 10:25 AM
I fix the IE bug.
you can create rectangle,ellipse,circle and fill with color and gradient(radial and linear).I also add stroke(pen or border).
furtue works:
fix different orientation of gradient between ff(horizontal) and ie(vertical)
add group
add path
add pie
etc...:-?
I have so much work to do about;so i return ;(:|bye
here is the code
10357
here is the screenshot:
for ie 10358
and for firefox10359

mystix
5 Nov 2008, 10:41 AM
=P~ =P~ =P~

great stuff! i'm watching this thread in eager anticipation :)

Jowood
6 Nov 2008, 7:22 AM
=D>
nice work!

jay@moduscreate.com
6 Nov 2008, 1:26 PM
=P~ =P~ =P~

great stuff! i'm watching this thread in eager anticipation :)

ditto ;)

mjlecomte
7 Nov 2008, 1:41 AM
FYI, the developers appear to have some stuff in svn for Ext3 for charting.

jay@moduscreate.com
7 Nov 2008, 9:29 AM
... yes but that requires flash

nouveauc
14 Nov 2008, 9:56 AM
I try to start the charting with my dirty drawing code.The code also dirty and very very very incomplete.I also add some code on drawing;i add text.
Drawing:
rectangle ie(yes) ff(yes)
rond rectangle ie(yes) ff(yes)
line ie(yes) ff(yes)
ellipse ie(yes) ff(yes)
circle ie(yes) ff(yes)
polyline ie(no) ff(yes)
path ie(incomplete,i code because i need in chart) ff(no)
gradiant ie(yes) ff(yes)

Charting:
bar chart(work but incomplete)

NB:the chart update when the store change.In example play to change "price" value=D>
here ie screenshot
10495
here ff screenchot
10494
here the code10496
bye,see next

mabello
14 Nov 2008, 10:01 AM
I have not checked out your code yet, but the outcomes are very good in my opinion.
Keep up the good work!

nouveauc
14 Nov 2008, 10:12 AM
thanks,i work on line and pie chart actually.
i want also add interraction and animation. For example click on element (bar,pie or point) fire the event(it's possible for drawing shape.)

galdaka
14 Nov 2008, 2:25 PM
thanks,i work on line and pie chart actually.
i want also add interraction and animation. For example click on element (bar,pie or point) fire the event(it's possible for drawing shape.)

Live examples:

http://www.jadacosta.es/extjs/examples/drawing&charting/chartingsample.html

http://www.jadacosta.es/extjs/examples/drawing&charting/drawingsample.html

nouveauc
17 Nov 2008, 10:09 AM
and another chart(line chart):D
here the code:
10550
here the screenshot
10549

galdaka
18 Nov 2008, 3:10 AM
and another chart(line chart):D
here the code:
10550
here the screenshot
10549

And here is the live example: http://www.jadacosta.es/extjs/examples/drawing&charting/linechart.html

;)

Thanks in advance,

nteller
19 Nov 2008, 2:15 AM
Hi nouveauc,

This is great ! Tr

nouveauc
19 Nov 2008, 5:36 AM
[quote=nteller;252536]Hi nouveauc,

This is great ! Tr

nteller
19 Nov 2008, 6:42 AM
What about this: http://raphaeljs.com/
and this: http://www.lutanho.net/svgvml3d/index.html
and this: http://svglbc.datenverdrahten.de/?code=circle&znr=on (Code-Examples)

Here are resources: http://www.wdvl.com/Authoring/Languages/XML/SVG/
http://www.svgx.org/library/

Till then ...

Brendan Carroll
21 Nov 2008, 6:30 AM
What I would love to see is an extension that can match dojox.gfx. I work in the mapping world and this type client-side drawing is essential, including drawing polygons, line, points etc... In fact, one of the major players in the field has recently released a Javascript API which could work well with Ext. Sadly, they've bundled Dojo into thier Api and of course it blows. They are getting lots of traction, however, and I'd love to see Ext steel some of the thunder and show what a robust library is capable of.


http://forums.esri.com/Thread.asp?c=158&f=2396&t=266058

http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm

-BC

wwwtd
11 Dec 2008, 7:27 PM
and another chart(line chart):D
here the code:
10550
here the screenshot
10549
why it don't have x direction and only have y direction ? can anyone fixed it? thx~

shubhabratam
15 Dec 2008, 1:54 AM
good work... any latest updated code? Any feature on drawing arrows?

wwwtd
15 Dec 2008, 4:15 AM
can anyone fix the problem with x derection display??????

nouveauc
19 Dec 2008, 7:20 AM
good work... any latest updated code? Any feature on drawing arrows?
Sorry if I was absent. I'm working on some project on my entreprise.
Actually ,for ext.drawing ,I' want to develop Ext.Drawing.domHelper,Ext.Drawing.domQuery,Ext.Drawing.Element,Ext.Drawing.component and all API that do the programation same like Extjs. I'm not a big developper (for the moment) so it's taking a long times.Please wait.....thansk you for your comprehension:)

wwwtd
21 Jan 2009, 1:17 AM
Sorry if I was absent. I'm working on some project on my entreprise.
Actually ,for ext.drawing ,I' want to develop Ext.Drawing.domHelper,Ext.Drawing.domQuery,Ext.Drawing.Element,Ext.Drawing.component and all API that do the programation same like Extjs. I'm not a big developper (for the moment) so it's taking a long times.Please wait.....thansk you for your comprehension:)
hi~。can you fix your program?why not it can't display the number under line???
and can you help me ?

wittsparks
10 Feb 2009, 12:47 PM
Thanks for the great submission!

I'm using your code to dynamically generate small images in my application. Instead of picking a div by id from the HTML as you did in your original example, I need to create them on the fly. This is what I'm doing:


var mydiv = document.createElement('div');
document.body.appendChild(mydiv);
var element = new Ext.Element(mydiv);
element.setWidth(config.parentWidth);
element.setHeight(config.parentHeight);
var surface = new Ext.Drawing.Surface({El:element})
var r = surface.render;
var svg = r.getRoot();
var circle = r.createShape({
type: "circle"
,fill: {color:"#"+config.fillColor}
,stroke: {
color: "#"+config.strokeColor
,width: config.strokeWidth
}
});

This is not working quite right in IE, and I suspect that it has to do with the document.createElement problems that IE seems to have. I haven't been successful trying to draw entirely with Ext objects (i.e. var element = new Ext.Element('div'))

Has anyone used this library dynamically, and if so could you share your approach?

Thanks!

chalu
10 Feb 2009, 3:05 PM
Great work man, take a look at this though (http://www.ejschart.com/)

wittsparks
11 Feb 2009, 2:44 PM
I tried using Ext.DomHelper to generate the divs, but it still didn't work right in IE. I ended out ditching the drawing library and going a different route using pngs with transparent cutout shapes to allow a background color to show through. I can elaborate if anyone is curious.

For the record, the drawing library worked great, except for my wierd special case, and I'm sure it could be fixed with a better understanding of Ext/Javascript./:)

haizi
22 Jul 2009, 1:43 AM
nice :D

Gabriel Nolasco
27 Aug 2009, 9:02 AM
Thanks, you saved my day!




document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

// Add required css rules
var style = document.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");

nouveauc
13 Oct 2009, 9:23 AM
Hello there are a new version of Ext.Drawing. This is a important version because the librairy use a object programation.there are also add a ext component.I' ll post it when i fix the problems with ie ( may be only for ie8). I will start a new version of Ext.Charting based of the philosophy of protovis but use Ext.data.store ,work for all web broswes (ie with ie because use Ext.Drawing). Sorry but you may wait a few times :((.

PSB
10 Sep 2010, 2:44 AM
bug in 485 and 506 line:

var xd=w-getWidth(); -> var xd=w-s.getWidth();
var yd=h-.getWidth(); -> var yd=h-s.getWidth();