@Om Here is another app that is an easy candiate for FlexJS that is a .caustic file player. Not to heavy on animated graphics.
http://www.singlecellsoftware.com/node/8897 Mike On Tue, May 19, 2015 at 4:33 PM, OmPrakash Muppirala <bigosma...@gmail.com> wrote: > On May 19, 2015 1:23 PM, "Michael Schmalle" <teotigraphix...@gmail.com> > wrote: > > > > Ok seeing the fact you were setting the background with an svg element. > > > > When you want to start working on this and have a git connection again, > let > > me know, we can hash it out. :) > > > > Sounds like a plan! > > Om > > > Mike > > > > On Tue, May 19, 2015 at 4:09 PM, OmPrakash Muppirala < > bigosma...@gmail.com > > > > wrote: > > > > > On Tue, May 19, 2015 at 12: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? > > > > > > > > > > No, SVG cannot be used to skin a native HTML button. The skin class has > to > > > be just another display object under the component, just like the Spark > > > Button in the current SDK. > > > > > > > > > > > > > > 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? > > > > > > > > > > Yes, that is correct. Although, I have not exactly implemented this > > > approach. We should know more when I actually start coding a simple > skin. > > > > > > > > > > > > > > Question: Is SVG meant to be interactive like a Button element or is > it > > > > meant for graphics. > > > > > > > > > My current thinking is that for each state of the interactive button, a > set > > > of SVG elements would be drawn. Again, much like today's Spark Button > + > > > skin paradigm. The good thing about SVG is that event handlers can be > > > attached to individual elements, so the interaction can be passed to > the > > > component which can respond by changing the state on itself and on its > > > skin. > > > > > > > > > > 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? > > > > > > > > > > Yes, all the SVG elements would be children of the skin, which in turn > > > would be a child of the main component. > > > > > > > > > > > > > > Do you have any prototypes of this going? > > > > > > > > > > I have one, but based on the older FXG -> SVG XSLT approach [1], [2] > > > > > > Left side is Flash, right side is HTML5/SVG. In this approach, I set > the > > > SVG by setting CSS pseudo-classes . This is still an option going > forward, > > > but one that I don't like that much. I prefer MXML states vs. CSS > > > pseudo-classes because of the greater flexibility we'll get. > > > > > > Thanks, > > > Om > > > > > > [1] > > > > http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html > > > > > > > > > > > > > > > > > > > > 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#/ > > > > > > > > > > > > > > > > > > >
