[Plugin] : HTMLString (display HTML inside C2)

Post your completed addons to share with the community

Post » Mon Nov 28, 2011 6:46 pm

Edit : 27 april
New build of the plugin.
You can get back the HTML String as a base64 representation !
So now, you can have whatever HTML string you want inside the plugin, and get it back to inject it as an image a Sprite, for example !



The demo : http://dl.dropbox.com/u/1412774/HTMLStringDemo2/index.html
The .capx : http://dl.dropbox.com/u/1412774/HTMLStringDemo2/HTMLStringDemo2.capx
The plugin : http://dl.dropbox.com/u/1412774/HTMLStringDemo2/pode_html_string.1.3.zip

Remember, because of the way it's handle behind the stage, don't forget to set a size for your HTML string.
You can use something like that :
"<p style='font-size:20px;'>your_HTML_string</p>"

Edit : 08 february
I uppdated the plugin. There should be no more screen updating problem.
Demo : http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/index.html
Plugin : http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/pode_html_string.0.2.zip
Capx : http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/HTMLStringC2Plugin.03.capx


-------

Since impossible isn't french (and to proove Ashley it can be done, since he is english - eternal rivalry across the Channel :p), here's a plugin made to display HTML formatted string inside C2.
I tested it inside Firefox. Should also work in Safari and Chrome (it's some kind of a hack, but it respects the SVG specification...)
http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/HTMLStringC2Plugin.zip
Here's an example http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/index.html and a quick screenshot : (yes, the little blue things are images. Base64 images... Don't remember were they come from).
As you can see, you can use CSS styling (don't forget that since we are using a SVG container via a <foreignObject> proxy, you need to use XHTML strict - ![CDATA[ and the like, as can be seen in the capx http://dl.dropbox.com/u/1412774/HTMLStringC2Plugin/HTMLStringC2Plugin.capx)
The plugin is still a bit dirty and in alpha state, I prefer to release early & often.
Comments & Critics are welcome, bugfixes are better ! :)Pode2012-04-27 16:22:48
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Mon Nov 28, 2011 7:05 pm

so this would open posibiltiy of some sort of font loading like on this site?
http://www.fontsquirrel.com/vtrix2011-11-28 19:05:53
ImageImage
B
61
S
19
G
6
Posts: 809
Reputation: 9,028

Post » Mon Nov 28, 2011 7:14 pm

I'm currently working on it. It's difficult, because the way you declare font families inside SVG and HTML isn't the same. And I need to make the HTML part inside the SVG access that font...
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Mon Nov 28, 2011 7:30 pm

Nice! How does it work? Does it have an SVG context over the canvas or something?
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,478

Post » Mon Nov 28, 2011 7:33 pm

well i didnt looked into much of font related things but the canvas can access the font attributes, so it could be changed to a downloaded font,.. i think

http://www.html5canvastutorials.com/tutorials/html5-canvas-text-font-size/
ImageImage
B
61
S
19
G
6
Posts: 809
Reputation: 9,028

Post » Mon Nov 28, 2011 7:50 pm

@Ashley: I use the <foreignObject> tag of SVG. It allows me to embed straight HTML inside the SVG DOM. Since it's in the spec, everybody browser should render it cleanly (sort of...)
I then set up an Image(), with the src defined as a SVG dataURI (so nothing "hackish"...)
Here's the basis :
[quote]
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
     "<foreignObject width='100%' height='100%'>" +
     "<div xmlns='http://www.w3.org/1999/xhtml'>" +
     this.HTMLString +
     "</div>" +
     "</foreignObject>"
[...]
var img = new Image();
img.src = data;
[...]
ctx.drawImage(img);
[...]
[/quote]
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Mon Nov 28, 2011 7:58 pm

Ah, the data URL is probably going to slow down things a lot... have you tried just 'floating' a div with some HTML content in it over the canvas? This is how the button and text box objects work - it seems to work pretty well.
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,478

Post » Tue Nov 29, 2011 5:25 am

How it works in Opera 11.52

in Safary 5.0.5 when you press the button nothing happens
B
4
S
1
G
1
Posts: 36
Reputation: 949

Post » Tue Nov 29, 2011 9:06 am

@JohnJ : strange thing about Opera, usually they are the first to implement something, and to implement it right... I'll try to see what tey are doing to see if a workaround can be found. About Safari, I need to check also (but Safari has his lot of little inconsistencies, like Firefox...)
I wonder, if, in the end, Ahsley solution isn't the simpler one.
I made that because I remember that somebody here wanted to do a whole website with HTML embedded inside C2.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Tue Nov 29, 2011 4:36 pm

@Pode: thank you for your work! I hope you can finished it cross-browsers plugin :)
B
4
S
1
G
1
Posts: 36
Reputation: 949

Next

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 4 guests