You can also use a GraphicShape class and set the element to any random SVG. This would work as long as you don’t need access to the SVG structure using normal Royale methods.
Harbs > On Nov 1, 2017, at 3:12 PM, Harbs <harbs.li...@gmail.com> wrote: > > We also have an SVG package. Look in Basic org/apache/royale/svg. > > It might make sense to pull the SVG classes out into its own project. > > The current implementation of SVG wraps each element in a separate svh > element, so you get lots of nested SVG elements. We considered adding raw > non-wrapped SVG elements, but that has not happened yet. > > There are drawing commands similar to the Flash Graphics APIs. The drawing > APIs work a bit different though. There is a PathBuilder class which > abstracts a lot of things, but some classes have similar APIs like drawRect, > drawRoundedRect, etc. > > Check out CompoundGraphic and PathBuilder. PathBuilder has APIs that mimic > Flash Graphic very closely and can be used with SVG and theoretically Canvas. > > HTH, > Harbs > >> On Nov 1, 2017, at 3:00 PM, Harbs <harbs.li...@gmail.com> wrote: >> >> <js:ImageButton click="flipHorizontally()" >> src="assets/images/icons/0896-flip-horizontal2.svg"/> >> <js:ImageButton click="flipVertically()" >> src="assets/images/icons/0897-flip-vertical2.svg"/> >> >> >>> On Nov 1, 2017, at 2:45 PM, Carlos Rovira <carlos.rov...@codeoscopic.com> >>> wrote: >>> >>> Hi Harbs, >>> >>> could you post some basic snippet for this to look at your approach? >>> >>> Thanks! >>> >>> 2017-11-01 13:42 GMT+01:00 Harbs <harbs.li...@gmail.com>: >>> >>>> You can use SVG files instead of PNG files. I’m doing that extensively in >>>> my app, but that will only work for components which have src or >>>> background-image. >>>> >>>>> On Nov 1, 2017, at 2:14 PM, Carlos Rovira <carlosrov...@apache.org> >>>> wrote: >>>>> >>>>> Hi, >>>>> >>>>> I started a new project as Piotr suggested. After setup I only put one >>>>> single button to start figuring how to do this. >>>>> >>>>> I'm starting for now with Basic, but as we discussed, don't know if this >>>>> should go directly to express or not...it seems like something we could >>>>> plug into Basic at any time as we can plug beads, and Express will come >>>>> with some theme bundled. That seem the most natural for me right now >>>>> >>>>> Setting up a CSS-only theme seems pretty straight forward for me, and I >>>>> could go with it for now. >>>>> >>>>> Regarding SVG, right now I don't see the way to add SVG in Royale. As >>>> Alex >>>>> suggested, I think we need to be able to add SVG in MXML. >>>>> I was looking at this topic and seems very powerful since it can be >>>>> integrated with CSS as well and in HTML >>>>> >>>>> For Example we have: https://css-tricks.com/using-svg/ >>>>> >>>>> Maybe I could start with only CSS and see how far I can go, making >>>>> wireframe and royale themes, as well trying with PNG images to >>>> complement, >>>>> but I suppose I'll get stuck soon, so maybe we should talk about SVG >>>>> support as well and how hard it would be to make it happen in Royale. As >>>>> well if you know other ways to integrate SVG right now please let me know >>>>> >>>>> Thanks >>>>> >>>>> >>>>> >>>>> >>>>> 2017-10-31 21:31 GMT+01:00 Piotr Zarzycki <piotrzarzyck...@gmail.com>: >>>>> >>>>>> I can say at this point that I really like idea with swappable view. In >>>>>> most cases view is an ActionScript class where we may have more >>>> possibility >>>>>> to do things. When I was looking last time into the checkbox it for sure >>>>>> need to more love, some part of the logic should be moved to the View. >>>>>> >>>>>> Piotr >>>>>> >>>>>> 2017-10-31 20:50 GMT+01:00 Alex Harui <aha...@adobe.com.invalid>: >>>>>> >>>>>>> Ugh, Something has gone bad in the Basic components. Things like >>>>>>> CheckBox and RadioButton should be creating simple <input >>>> type="check"/> >>>>>>> and <input type='radio' /> elements. >>>>>>> >>>>>>> The ability to style everything belongs in a different set of >>>> components. >>>>>>> Basic is supposed to generate the simplest tree of HTMLElements even if >>>>>>> they can't be fully styles. That's so someone can do the equivalent of >>>>>>> just using bare bones <input> elements. >>>>>>> >>>>>>> What is currently in Basic CheckBox and RadioButton might be right for >>>>>>> creating fully styleable components, or some other composition of >>>>>>> HTMLElements might be better. Carlos, I think that's up to you to >>>>>> decide. >>>>>>> >>>>>>> An alternative approach is to have the JS implementations of CheckBox >>>> and >>>>>>> RadioButton have views and the views could create the HTMLElements. >>>> That >>>>>>> seems a bit heavy for the simple case of someone who just wants to use >>>>>>> <input type="check" in an app, but that is a possibility. >>>>>>> >>>>>>> It sounds like you are looking for a way to manipulate SVG at runtime. >>>>>> It >>>>>>> is fine to have "static SVG" which is a block of SVG with that cannot >>>> be >>>>>>> modified and thus uses percentages and absolute values as best it can. >>>>>>> Then we probably want to have a way to create "dynamic" skins with run >>>>>>> code to generate or manipulate SVG. Those will be heavier, but that's >>>>>>> PAYG. Should we try to allow SVG tags in MXML files? Then you could >>>>>>> write code in an fx:Script block around your SVG tags and manipulate >>>> the >>>>>>> SVG? >>>>>>> >>>>>>> So IMO first, we should look into reverting Basic back to single simple >>>>>>> HTMLElements where possible, then decide whether we want to have >>>>>> swappable >>>>>>> views or a new skinnable component set, then build out that component >>>> set >>>>>>> and see what code it takes to get it to look the way we want it. And >>>>>> then >>>>>>> we'll know what code is needed and can plan out how to encapsulate and >>>>>>> re-use that code. >>>>>>> >>>>>>> My 2 cents, >>>>>>> -Alex >>>>>>> >>>>>>> On 10/31/17, 11:23 AM, "Piotr Zarzycki" <piotrzarzyck...@gmail.com> >>>>>> wrote: >>>>>>> >>>>>>>> Hi Carlos, >>>>>>>> >>>>>>>> I think you should start looking into the Basic module and later make >>>> an >>>>>>>> upgrades to Express once you have all components visually created. I >>>>>> would >>>>>>>> not think on that stage about how we implement them rather look how >>>> they >>>>>>>> look like currently. >>>>>>>> >>>>>>>> 1) Create small app or run example with that component from our >>>>>>>> repository. >>>>>>>> 2) Make it visually with theme >>>>>>>> 3) Show on the dev list - once we agree on all of them we can decide >>>> how >>>>>>>> to >>>>>>>> apply those styles. >>>>>>>> >>>>>>>> My 2 cents. :) Piotr >>>>>>>> >>>>>>>> >>>>>>>> 2017-10-31 19:12 GMT+01:00 Carlos Rovira <carlosrov...@apache.org>: >>>>>>>> >>>>>>>>> Hi, >>>>>>>>> >>>>>>>>> I'm trying to find a valid workflow to start working in two initial >>>>>>>>> faces >>>>>>>>> for Royale components. >>>>>>>>> >>>>>>>>> I'm talking about to generate some kind of UI sheet with all controls >>>>>>>>> and a >>>>>>>>> basic wireframe style and another one that would be what more people >>>>>>>>> will >>>>>>>>> be using as default in Royale. From here, will be more easy to other >>>>>>>>> guys >>>>>>>>> to change styles. We could event create a Royale Theme editor in a >>>>>> near >>>>>>>>> future. >>>>>>>>> >>>>>>>>> So, to start working on this I need a design tool, and in this case, >>>> I >>>>>>>>> think that one is Sketch App. >>>>>>>>> >>>>>>>>> So I can create a design in Sketch with all controls (Button, >>>>>> TextInput, >>>>>>>>> CheckBox, Panel,...) >>>>>>>>> >>>>>>>>> From here, I can generate CSS and SVG code >>>>>>>>> >>>>>>>>> For example the code of this simple button >>>>>>>>> (https://na01.safelinks.protection.outlook.com/?url= >>>>>>> https%3A%2F%2Fsnag.gy >>>>>>>>> %2FAm2fRX.jpg&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c >>>>>>> 8494%7Cfa7b1b >>>>>>>>> 5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906& >>>>>>> sdata=Z4b6dMq%2Br >>>>>>>>> UmSSxpGYNjgKl0nkRkIlV%2FbQIDLVUIvo6E%3D&reserved=0) >>>>>>>>> that >>>>>>>>> I did quickly is: >>>>>>>>> >>>>>>>>> CSS >>>>>>>>> >>>>>>>>> /* Background: */ >>>>>>>>> background: #D8D8D8; >>>>>>>>> border: 1px solid #979797; >>>>>>>>> border-radius: 3px; >>>>>>>>> >>>>>>>>> /* TextField: */ >>>>>>>>> font-family: HelveticaNeue; >>>>>>>>> font-size: 12px; >>>>>>>>> color: #646D7A; >>>>>>>>> >>>>>>>>> (CSS is almost all usable) >>>>>>>>> >>>>>>>>> And SVG >>>>>>>>> >>>>>>>>> <svg width="150px" height="40px" viewBox="0 0 150 40" version="1.1" >>>>>>>>> xmlns=" >>>>>>>>> >>>>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>> http%3A%2F%2Fwww.w3.or >>>>>>>>> g%2F2000%2Fsvg&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c >>>>>>> 8494%7Cfa7b1 >>>>>>>>> b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906& >>>>>>> sdata=cWLJ2jj9Ih >>>>>>>>> cGnjAB8GEtEIdc3ZZO2OSAsgzPNEVrUzE%3D&reserved=0" >>>>>>>>> xmlns:xlink="https://na01.safelinks.protection.outlook. >>>>>>> com/?url=http%3A%2 >>>>>>>>> F%2Fwww.w3.org%2F1999%2Fxlink&data=02%7C01%7C% >>>>>>> 7Cc23665e118fc4a7fed4c08d52 >>>>>>>>> 08c8494%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% >>>>>>> 7C636450710247213906&s >>>>>>>>> data=sgNtytSumzad%2BraDA6NoITbm6XqJJx6yHQudjzhpm6Y%3D&reserved=0"> >>>>>>>>> <!-- Generator: Sketch 47.1 (45422) - >>>>>>>>> >>>>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>> http%3A%2F%2Fwww.bohem >>>>>>>>> iancoding.com%2Fsketch&data=02%7C01%7C% >>>> 7Cc23665e118fc4a7fed4c08d5208c >>>>>>> 8494 >>>>>>>>> %7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% >>>>>>> 7C636450710247213906&sdata=dE >>>>>>>>> oGVBONBD6Z1XMTjYcpEc7gq5UqtS8BziB0I3f9qSs%3D&reserved=0 --> >>>>>>>>> <desc>Created with Sketch.</desc> >>>>>>>>> <defs> >>>>>>>>> <rect id="path-1" x="0" y="0" width="150" height="40" >>>>>>>>> rx="3"></rect> >>>>>>>>> </defs> >>>>>>>>> <g id="Page-1" stroke="none" stroke-width="1" fill="none" >>>>>>>>> fill-rule="evenodd"> >>>>>>>>> <g id="Royale" transform="translate(-58.000000, -49.000000)"> >>>>>>>>> <g id="Button" transform="translate(58.000000, >>>>>> 49.000000)"> >>>>>>>>> <g id="Background"> >>>>>>>>> <use fill="#D8D8D8" fill-rule="evenodd" >>>>>>>>> xlink:href="#path-1"></use> >>>>>>>>> <rect stroke="#979797" stroke-width="1" x="0.5" >>>>>>>>> y="0.5" >>>>>>>>> width="149" height="39" rx="3"></rect> >>>>>>>>> </g> >>>>>>>>> <text id="TextField" font-family="HelveticaNeue, >>>>>>>>> Helvetica >>>>>>>>> Neue" font-size="12" font-weight="normal" fill="#646D7A"> >>>>>>>>> <tspan x="57" y="25">Button</tspan> >>>>>>>>> </text> >>>>>>>>> </g> >>>>>>>>> </g> >>>>>>>>> </g> >>>>>>>>> </svg> >>>>>>>>> >>>>>>>>> (SVG could be a base, but it needs to be removed absolute values and >>>>>>>>> even >>>>>>>>> some static parts to be usable) >>>>>>>>> >>>>>>>>> I'd like to create a Button "playground" app with a button and some >>>>>>>>> controls that allow us to change how the button looks (colors, >>>>>> strokes, >>>>>>>>> round corners, font face, font weight,....) >>>>>>>>> >>>>>>>>> In the end this would be the starting point of a playground app for >>>>>> all >>>>>>>>> Royale controls >>>>>>>>> >>>>>>>>> Finaly this would be very useful if we can get the generated code for >>>>>>>>> that >>>>>>>>> particular styles and we could apply easily to any app, so change a >>>>>>>>> "theme" >>>>>>>>> will be quick and easy. Important: This will only work with our >>>> Royale >>>>>>>>> components (Express mainly, and maybe Basic?, but not MDL, CreateJS, >>>>>> or >>>>>>>>> others) >>>>>>>>> >>>>>>>>> I'm as well interested in how we could integrate that "view" in some >>>>>>>>> component in order to easy replace visuals for a concrete component. >>>>>> For >>>>>>>>> example, in the button above will be >>>>>>>>> >>>>>>>>> * we'll be making a skin part with SVG code, so we could pass values >>>>>> to >>>>>>>>> the >>>>>>>>> skin (for example colors, text button, width,...) >>>>>>>>> * if not using skins, how can we pass data from the component to the >>>>>> svg >>>>>>>>> part? (for example colors, text button, width,...) >>>>>>>>> >>>>>>>>> To progress with this effort, I think I could start doing only two >>>>>>>>> controls, and then as we have all considerations in place progress >>>>>>>>> through >>>>>>>>> the rest. >>>>>>>>> >>>>>>>>> Thoughts? >>>>>>>>> >>>>>>>>> -- >>>>>>>>> Carlos Rovira >>>>>>>>> >>>>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>> http%3A%2F%2Fabout.me% >>>>>>>>> 2Fcarlosrovira&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c >>>>>>> 8494%7Cfa7b1 >>>>>>>>> b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906& >>>>>>> sdata=auPeQ0ub4B >>>>>>>>> Iq%2FTscLQWJ0Xxb9XdM2eegav2v1LXcuYY%3D&reserved=0 >>>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> -- >>>>>>>> >>>>>>>> Piotr Zarzycki >>>>>>>> >>>>>>>> mobile: +48 880 859 557 >>>>>>>> skype: zarzycki10 >>>>>>>> >>>>>>>> LinkedIn: >>>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>> http%3A%2F%2Fwww.linked >>>>>>>> in.com%2Fpiotrzarzycki&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c >>>>>>> 8494% >>>>>>>> 7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% >>>> 7C636450710247213906&sdata= >>>>>>> xZ56 >>>>>>>> se7Z6gcWKcC7PuWDPW0E6F9wQjEZkuYZO4zvwnY%3D&reserved=0 >>>>>>>> <https://na01.safelinks.protection.outlook.com/?url= >>>>>>> https%3A%2F%2Fpl.linke >>>>>>>> din.com%2Fin%2Fpiotr-zarzycki-92a53552&data=02% >>>>>>> 7C01%7C%7Cc23665e118fc4a7fe >>>>>>>> d4c08d5208c8494%7Cfa7b1b5a7b34438794aed2c178de >>>>>>> cee1%7C0%7C0%7C6364507102472 >>>>>>>> 13906&sdata=1pwc5Fz1vKM2YCp6yUSe6x1Zdh9Au2 >>>> xqb28Duy2Tqac%3D&reserved=0> >>>>>>>> >>>>>>>> GitHub: >>>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>> https%3A%2F%2Fgithub.co >>>>>>>> m%2Fpiotrzarzycki21&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c >>>>>>> 8494%7Cf >>>>>>>> a7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&sdata= >>>>>>> Lr7JdnU >>>>>>>> fF%2F4xHJbXVZlZN%2Fw7t4Tz5R5KbZFwdVnZFww%3D&reserved=0 >>>>>>> >>>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> >>>>>> Piotr Zarzycki >>>>>> >>>>>> mobile: +48 880 859 557 >>>>>> skype: zarzycki10 >>>>>> >>>>>> LinkedIn: http://www.linkedin.com/piotrzarzycki >>>>>> <https://pl.linkedin.com/in/piotr-zarzycki-92a53552> >>>>>> >>>>>> GitHub: https://github.com/piotrzarzycki21 >>>>>> >>>>> >>>>> >>>>> >>>>> -- >>>>> Carlos Rovira >>>>> http://about.me/carlosrovira >>>> >>>> >>> >>> >>> -- >>> >>> <http://www.codeoscopic.com> >>> >>> Carlos Rovira >>> >>> Director General >>> >>> M: +34 607 22 60 05 >>> >>> http://www.codeoscopic.com >>> >>> >>> Conocenos Avant2 en 1 minuto! <https://avant2.es/#video> >>> >>> >>> Este mensaje se dirige exclusivamente a su destinatario y puede contener >>> información privilegiada o confidencial. Si ha recibido este mensaje por >>> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y >>> proceda a su destrucción. >>> >>> De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos >>> que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC >>> S.A. La finalidad de dicho tratamiento es facilitar la prestación del >>> servicio o información solicitados, teniendo usted derecho de acceso, >>> rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras >>> oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación >>> necesaria. >> >
