On Tue, May 19, 2015 at 12:45 PM, Michael Schmalle < teotigraphix...@gmail.com> wrote:
> Om, > > Check this out; > > > https://jsfoo.talkfunnel.com/2013/788-using-randorijs-and-kontikijs-to-create-2d-webgl-based-games-from-existing-starling-as3-code > > Load this in Chrome; > > http://renaun.com/html5/randoristarlingtest/hero.html > > That whole thing and the Starling framework was cross compiled with the > Randori compiler I wrote. :) > > It uses the same as code! Renaun had to make tweaks but this shows what we > could do if we wanted to. > > Very cool! Yes, I remember seeing this and thinking that we could do something similar in FlexJS :-) Thanks, Om > Mike > > On Tue, May 19, 2015 at 3:36 PM, Michael Schmalle < > teotigraphix...@gmail.com > > wrote: > > > Ok thanks Om, lots to think about. Some more questions. > > > > I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML > > button? Or is it that you have to "Wrap" an html button with an SVG tag > to > > pretty much draw under it? > > > > I love the idea of a Spark like skinning system and would totally help on > > this, I am just trying to see how it would be implemented and how it > > coincides with the HTML side, the AS side is obvious, the HTML side the > SVG > > is a child of the this.element? > > > > Question: Is SVG meant to be interactive like a Button element or is it > > meant for graphics. I am just trying to see the point at which the > > component in html is either SVG or an HTML element. Since you say the SVG > > is just created on the DOM, then aren't you saying that the SVG element > is > > just a child of the main component? > > > > Do you have any prototypes of this going? > > > > Mike > > > > > > > > > > > > On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala < > bigosma...@gmail.com > > > wrote: > > > >> On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle < > >> teotigraphix...@gmail.com> wrote: > >> > >> > Ironically Om, this was my next post! SVG and what are we doing to use > >> it. > >> > > >> > Maybe through all my bable of the last thread some might see where I > am > >> > coming from, I am really trying to figure out, what are we building > on. > >> > > >> > Now SVG I understand, Canvas I understand. > >> > > >> > Om, what are the pluses and minuses of each paradigm? I was just > reading > >> > about this today, canvas doesn't have event handlers, svg does. > >> > > >> > >> Canvas is a fire and forget mode of rendering. Think of Canvas as an > >> equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot > >> get access to individual elements without doing a lot of complicated > >> hittests or other kind of hacks. Moreover, it is a raster object. So, > if > >> you draw on a Canvas and resize it up, it gets pixelated. > >> > >> SVG, on the other hand is a retained mode of rendering. All elements > >> drawn > >> in SVG become part of the DOM. This means that you can do event > handling, > >> animation, etc. much more easily. Also, SVG is vector drawing. So > >> drawing > >> in any size and scaling keeps the rendering quality intact. > >> > >> Canvas is generally used for drawing a ton of elements in runtime > without > >> needing them to be individually interactive. SVG is less performant > >> because of the added dom related overhead on each element, and is > (should) > >> generally used for building interactive UI components (charts, maps, > etc.) > >> > >> > >> > > >> > FXG -> SVG, is there currently a parser/renderer for this? How were > you > >> > planning on doing this. > >> > > >> > >> So, my first approach was to write an FXG to SVG transformer[1] > stylesheet > >> that I imagined would be invoked by the compiler. It turns out that > doing > >> it the 'FlexJS' way was much easier. Basically, I created the > primitives > >> - > >> Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I > created > >> their JS equivalents [3] where I draw SVG elements via JavaScript. That > >> is > >> pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS > >> etc. > >> is handled automatically by FlexJS (magic for me ;-) ) > >> > >> The idea from here on is that anything you draw on the screen via AS3 > will > >> look exactly the same in Flash vs. HTML/JS. Here is an example of flash > >> [4] vs html [5] Put them side by side and see if you can tell the > >> difference :-) > >> > >> The next progression was to build FlexJS charts out of these. Here is a > >> set of chart components that Peter Ent built on top of this core > graphics > >> classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page > for > >> these charts [8] > >> > >> > >> > >> > > >> > Is this something we could write that would pretty much cross compile > to > >> > js? > >> > > >> > >> Yes, I believe we are at a point where things are getting more and more > >> cross-compiled as opposed to be hand-written. Of course, the beauty is > >> that you can draw in MXML/FXG and you can see a drawing in the JS side. > >> Pretty cool. > >> > >> > >> > > >> > Tell me your ideas, I am very interested in this part. > >> > > >> > > >> My next few TODOs are to build a spark like skinning system in FlexJS. > >> Basically create FXG skins on the AS3 side and mirror them with SVG > based > >> skins on the JS side. Peter has built a small example that will let me > >> play around with event driven, states based skins. I hope to get on > this > >> as soon as I get my Git access back. > >> > >> Of course, the core graphics packages needs more love with things like > >> RadialGradients, and more fancy graphics primitives. > >> > >> After that I would like to tackle animation. I haven't given a lot of > >> thought into this, so not sure how easy/hard this is going to be. > >> > >> Thanks, > >> Om > >> > >> > >> > > >> > > >> > Mike > >> > > >> > > >> [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg > >> [2] > >> > >> > https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics > >> [3] > >> > >> > https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics > >> [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/ > >> [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/ > >> [6] http://people.apache.org/~pent/chartswf/ > >> [7] http://people.apache.org/~pent/chartjs/ > >> [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts > >> > >> > >> > > >> > > See this is my problem, Randori was a straight cross compile with > >> shims > >> > and > >> > > worked awesome. So all my questions to you are like me "unlearning" > >> what > >> > I > >> > > spent 6+ months working on in that project. > >> > > > >> > > The compiler's emitter just puked out js and we locked in SWCs in > the > >> > apps > >> > > that used js API surfaces. > >> > > > >> > > Although, the one thing as you know was Mike disagreed with FlexJS's > >> view > >> > > in ActionScript because he said HTML/CSS designers should just do > what > >> > they > >> > > do and design in HTML/CSS. > >> > > > >> > > >> > I disagree fundamentally with this idea. For one, HTML/CSS is a > >> terrible > >> > terrible paradigm. No designer is happy with the way things work > >> today. I > >> > would rather provide a better way of doing the visuals via MXML+FXG > >> (like > >> > we do in Flex's spark skins) and cross compile them over to JS + SVG + > >> > Canvas as needed. > >> > > >> > Even the HTML/JS world is waking up to this idea. This presentation > [1] > >> > does a great job of explaining why SVG is better than CSS for > interfaces > >> > building. FlexJS is in a great position to provide this out of the > box > >> to > >> > developers. > >> > > >> > Thanks, > >> > Om > >> > > >> > [1] > >> http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/ > >> > > >> > > > > >
