Hi there,

I got the idea to inject into a TPage control some generated innerHTML , actually SVG embedded into html, to crate and display dynamically locally created svg images (for charts etc) with measurement data fetched from a server.

For this to test I had to patch/extend the webctrls.wbs in the following way:
...
        procedure SetDocumentText(const Value: String);
...
        property DocumentText: String read GetDocumentText write SetDocumentText;
...
procedure TPage.SetDocumentText(const Value: String);
begin
  THTMLElement(FFrame.contentDocument.documentElement).innerHTML:=Value;
end;

And the usage is simple:

procedure TForm1.Button1Click(Sender: TObject);
begin
Page1.DocumentText :=
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">'+
  '<polygon points="100,10 40,180 190,60 10,60 160,180"'+
  'style="fill:lime;strokerple;stroke-width:5;fill-rule:evenodd;">'+
'</svg>';
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  Page1.DocumentText := '<h1>Test</h1>';
end;


This works in all browsers (Opera, Firefox, Chrome, ...), ( except in IE 9.0 and therefore the EWB-IDE)  

So my question is, is it possible to add the new TPage.DocumentText writeable functionality in a similar way as described above into the Framework? Even if IE is not capable, but I wouldn't care too much.

Thanx a lot.

This board software is funny
'style="fill:lime;strokerple;stroke-width:5;fill-rule:evenodd;">'+
=
'style="fill:lime; s t r o k e : p u r p l e ; s t r o k e - w i d t h:5;fill-rule:evenodd;">'+

<< So my question is, is it possible to add the new TPage.DocumentText
writeable functionality in a similar way as described above into the
Framework? Even if IE is not capable, but I wouldn't care too much. >>

Sure, I'll add it in the next release.

Thanks,

Tim Young
Elevate Software
www.elevatesoft.com

Claudia,

<< This board software is funny >>

It intreprets as the "smiley with tongue out".

Tim Young
Elevate Software
www.elevatesoft.com

Claudia Borsel wrote:
> I got the idea to inject into a TPage control some generated
> innerHTML , actually SVG embedded into html, to crate and display
> dynamically locally created svg images

I don't have any EWB project at the moment, but very interested in your
interactive SVG work. If you have anything online, for public
consumption, I'd really appreciate a link.

Thx!

"Dominique Willems" wrote:
... very interested in your interactive SVG work.



No, it's not planned to be interactive (SVG Event handlers ...).
It's only meant to be generated on the fly by pascal code.
And it's only a future idea, not something to show ATM.

Claudia Borsel wrote:
> And it's only a future idea, not something to show ATM.

Well, it's an excellent idea.

There are some problems with different browsers.

Assigning the following SVG data to a TPage, only Opera shows the gradient correctly.
Chrome shows a black rectangle,
FireFox shows a white rectangle,
InternetExplorer shows an Error.

But when I open the exact same image (as attached) as file in the browser, all Browsers show correctly the blue rectangle gradient.

Any ideas how to solve the problem ? Is this issue iFrame-related?
Maybe a TImage control, which accepts SVG data assignment would be the solution ?


procedure TForm1.Button2Click(Sender: TObject);
begin
Page1.DocumentText :=
'<?xml version="1.0"?>'+#13+#10+
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "'+#13+#10+" name="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+#13+#10+">http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+#13+#10+
#13+#10+
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="150">'+#13+#10+
   '<defs>'+#13+#10+
      '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">'+#13+#10+
        '<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />'+#13+#10+
        '<stop offset="100%" style="stop-color:rgb(160,160,255);stop-opacity:1" />'+#13+#10+
      '</linearGradient>'+#13+#10+
  '</defs>'+#13+#10+
  '<rect x="10%" y="10%" width="80%" height="80%" rx="10" ry="10" fill="url(#grad1)" />'+#13+#10+
'</svg>'+#13+#10 ;
end;

El 21/02/2013 11:19 a.m., Claudia Borsel escribió:
> There are some problems with different browsers.
>
> Assigning the following SVG data to a TPage, only Opera shows the gradient correctly.
> Chrome shows a black rectangle,
> FireFox shows a white rectangle,
> InternetExplorer shows an Error.
>
> But when I open the exact same image (as attached) as file in the browser, all Browsers show correctly the blue rectangle gradient.
>
> Any ideas how to solve the problem ? Is this issue iFrame-related?
> Maybe a TImage control, which accepts SVG data assignment would be the solution ?
>
>
> procedure TForm1.Button2Click(Sender: TObject);
> begin
> Page1.DocumentText :=
> '<?xml version="1.0"?>'+#13+#10+
> '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "'+#13+#10+" name="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+#13+#10+">http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+#13+#10+
> #13+#10+
> '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="150">'+#13+#10+
>      '<defs>'+#13+#10+
>         '<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">'+#13+#10+
>           '<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />'+#13+#10+
>           '<stop offset="100%" style="stop-color:rgb(160,160,255);stop-opacity:1" />'+#13+#10+
>         '</linearGradient>'+#13+#10+
>     '</defs>'+#13+#10+
>     '<rect x="10%" y="10%" width="80%" height="80%" rx="10" ry="10" fill="url(#grad1)" />'+#13+#10+
> '</svg>'+#13+#10 ;
> end;
>

Hi

When I opened the attachment file with notepad++ I see 3 null values at
the end of the file

after I removed those values it works ok

Hope it helps you

best regards

Of course the standalone svg-file works.
The TPage (iFrame) does work only  in Opera correctly with the blue gradient.
therefore my question, if Tim could extend the TImage control towards SVG data injection support (not pointing to an URL).