 Okay. Thank you guys. Sorry for the delay. Now we've got things running. So, Sunil has already introduced me, so I'll not bother with that. I'll just get with it now that we've already wasted time. So RedRefile is something that we have built on top of Refile as a rendering library. And before I get into, you know, details of RedRefile, let me just give you an overview of how RedRefile came to be. So, FusionCharts is traditionally a flash charting component. It is known as a flash charting component. It was known as a flash charting component. We're trying to change that image. We had built our credo based on charts that we had created which worked really well in the flash ecosystem. And, you know, for a long time things were going really well. So, we all know that Steve Jobs was, he was very vocal about how he felt about flash. And when iPad and iPhones came out and they did not support flash, we kind of had a lot of catching up to do in terms of, you know, supporting, getting our charts on iPads and iPhones. So, there were already other players in the market who were, who had JS charts. So, we partnered with high charts and we created a fallback JS module which we, which would render the charts in environments where flash was not available, like iPad and iPhones and stuff. But when we started doing that, we realized that a lot of people were complaining about how our flash charts looked a lot better than our JavaScript charts. So, we spent a lot of time and effort trying to make our JS charts look like our flash charts. And that is when we realized that what we were doing was probably not, you know, the right way to go about it. And we decided that we should stop doing that. So, then we decided that, you know, this was more of a temporary arrangement. We should do something that is more long-term. We decided, we decided to have our own graphics renderer. We wanted to build on top of something that was already available because we did not want to obviously reinvent the wheel. There were, there were a lot of good frameworks available, Bonsai JS, Paper JS, Dojo GFX, Rafale. JS was something we looked at. And among all of the frameworks that we had looked at, we liked Rafale. So, I'll, I'll tell you why we chose Rafale in a bit. But, you know, the story doesn't end here. So, we chose Rafale and then we were, like, super excited about having our own graphics renderer. We, we got the source code. We started developing, we started porting our fusion charts framework to the Rafale library. And that's when we started realizing that, again, you know, there is something that we have overlooked in terms of the, the, the capabilities of the library itself. So, then we figured that we could either fix the issues that were there in Rafale or maybe invest time in looking for something else that was out there which would suit our needs better. But we decided that we had already invested some time in Rafale and it really, it actually, fundamentally is a very good library for rendering graphics. So we decided we'll fix all the issues that were facing, that we were facing with Rafale. And yeah, that's how Red Rafale came to be. So, Red Rafale is basically a graphics library that we have built on top of Rafale. And it is, so Rafale is not for advanced graphics. Red Rafale is totally for advanced graphics. So, like, if graphics is your bread and butter, then, you know, you are our target customers, right? Right now that was the history. Let's get to the boring technical stuff. Why was Rafale the obvious choice? So, Rafale and fusion charts have one thing in common. The most is that they are very focused about providing cross browser support which is not ignoring VML-based browsers which are IEN, I6, I7, IEA, etc. So, as a developer myself, I have a lot of pain points about, you know, giving cross browser support. But having said all that, it is, we cannot ignore the fact that there are a lot of people who use VML-based browsers. And as a matter of principle, we decided not to ignore them. So, we have always wanted to cater to everybody. Like, it's an idealistic goal, I know, but, you know, that's how we are. It also has a really cool library of functions where you can perform mathematical operations like path transformations, bounding back box calculations, just using math. So, that was another cool thing. It extends, it lends itself to being extended very nicely. I will talk about that later. And last but definitely not the least, it was open source. So, you know, total control on the code. Right. So, how many of you have actually heard of Rafale.js here? Awesome. How many of you have actually used Rafale.js here? Oh, still pretty good. So, for those who don't know Rafale and don't know how it is used, I'll just give you a brief introduction. So, we put Rafale.js is a graphics library meant for SVG and VML-based browsers, uses JavaScript to manipulate, create and manipulate the graphics. So, the Rafale constructor, there is a Rafale constructor which creates a paper which is, in a sense, a blank canvas, I mean, to help you understand better. So, you can use the paper object that you get when you create a Rafale instance, and create more shapes in the canvas. So, there are a lot of ways of creating the paper object, the number of, the kind of arguments that the Rafale constructor takes, etc. There is the link is there to the reference. You can go check it out. Apart from the paper, so, once you've got the paper created, so, you've got a blank canvas and an object that you can use to create elements in that canvas. So, then you start creating elements in it, right? So, they have an element class which basically is a handle to all the individual shapes that you create. Apart from shapes, the element class also is used to create something called as sets, which are collections in Rafale. They're actually pseudo-collections. I'll come to that later. Here's a couple of examples of how you create a shape. So, if you want to create a rect, there are some predefined shapes. So, rectangle, circle, ellipse, path. If you want to create a rectangle, suppose you say paper.rect pass the parameters, if you want to create a circle. This is how you create a set, and this is how you add elements to a set. So, you say set element.push, you pass the element that you want to be, that you want the set to contain, and that's that, right? So, I was talking, as I was telling earlier, Rafale lends itself to being extended very well. So, attributes are, you know, attributes are used to kind of modify and manipulate, you know, the shapes, objects, or the graphics that you create using the paper. There are certain predefined, there is a set of predefined attributes that Rafale already has, like x, y, width, height, depending on what kind of shape you're using, what kind of operation you're doing. You have certain, a set of attributes, but with Rafale, you can actually create your own attributes and define behavior about how you want that attribute to affect the element that it is being applied on. So, there are some performance issues with the way Rafale actually implements these custom attributes which we have addressed in Red Rafale. I'll come to that when I'm talking about Red Rafale. So, this is an example of how you can create a custom attribute. Fill is a standard attribute. The return that you see. So, it creates a custom attribute called hue. The function actually governs how that, how the value of the attribute is going to affect the shape. And this is how the attribute, the custom attribute is being used. You say .attr which is the attribute function and pass hue and the value to it. Okay. Apart from custom attributes, extending Rafale also includes adding custom shapes to it and adding methods to the prototype of the element class. So, when you want to add a new shape to it, right, you say Rafale.fn.arrow, you create the function which actually creates the shape based on the parameters that you passed to it. And like, you can see in the example, this is an arrow shape. So, I'm creating a new type of shape called arrow which requires certain parameters. Once I've defined it, I can create, I can call paper.arrow pass the parameters and get an arrow shape, right? Similarly, Rafale.el will allow you to create methods or add methods to the element prototype. So, when you suppose you want to create a function called red, right, which automatically fills the shape with red color. So, you say Rafale.el.red and then inside the function, you just set the attribute or the fill attribute to be red. And you can just say paper.arrow.red and the shape will become red in color. So, this is about Rafale. So, this is, this should be good for you guys to now understand what we have done with red Rafale as such. So, with red Rafale, we've kind of borrowed all the good parts of Rafale. We've, in fact, not even renamed the constructor. We've kept the constructor also as Rafale. There are, the way you create shapes, the way you create elements is still the same. There are some differences in terms of, you know, now we have something called groups. Now Rafale has a very flat architecture. So, you create a paper which is the blank canvas and all the elements that you create are directly the children of the paper. So, you have one level at, you have one level of paper and you have all elements. The set that, the collection that Rafale has is a pseudo collection. So, as in, it exists only in the JavaScript sphere. There is no manifestation of the set in the DOM tree as such. So, there is only two level and set is purely in the JavaScript level. Groups, we have changed that in red Rafale. We have added groups. So, the architecture of the, the, the final paper that is created is now a multi-layered tree architecture. Apart from groups, we've also changed the way custom attributes are governed. We have changed how we create custom shapes and we are now working on providing canvas support also. So, as I was saying, groups and sets are collections. Our collections in Rafale and red Rafale. So, groups, sets exist in red Rafale also but we don't generally use them because we have groups and we can do everything that we can do with sets and we can do more with groups, right? So, because sets are pseudo, pseudo collections and they don't have a, they don't have an existence in the DOM structure as such. Whenever you perform an operation on a set, in order for that operation to trickle down to all the children, it actually has to iterate over all the children that it contains and perform that operation individually on every element, right? With groups, because they actually exist in the DOM tree, there are a number of operations that you can just perform on the group and can, you can just, you know, let the browser take care of the operation being trickle down to all the children elements. Transformations is one of the operations that, you know, groups has a big advantage over sets. I'll just show you some demos. Excuse me. I need the internet. Can I connect the internet? Guys, I'm really sorry about the delay. Just give me a few minutes. So you guys can see this, right? Awesome. So what I have on the left side is a collection of randomly generated rectangles that have an opacity to them. And on the right hand side, I have a collection of randomly generated rectangles that have an opacity to them. Here the collection is made using groups. There the collection is made using sets. And what I'm going to now do is what I essentially want to do is kind of apply a fade in animation on the entire collection, right? Let me just do that. So if you see what happened on the right side, because sets have to iterate over all the elements that the set, that the set contains and change the attribute of the element itself, the original opacity that was applied to it gets lost, right? In the group, in the group that doesn't happen because the opacity is being applied to the actual group element. I have another demo to show what, how transformations are more intuitive with groups rather than with sets. Okay. So now I have a bunch of rectangles are drawn inside a group and all these rectangles have been translated to their position. So they've already been transformed and moved to the position that they're currently occupying, both in the case of the group and the case of the set. Now, if I try to animate, now I want to rotate the entire collection as a whole, right? So as you can see the behavior of the set, the collection as a set is very unintuitive. I want to rotate the collection, but the individual shapes are rotating and the collection is moving in a completely different direction. So this is, this is some of the disadvantages of using sets that we have overcome by using groups. The reason Raphael did not support groups natively was probably because our VML has poor support for groups, but we have kind of supported groups wherever possible and fallen back to, you know, iterating over the individual elements and performing the operation on them. If it is not available, but we've made sure that the behavior stays the same. So this is sort of an ideological difference between Raphael and red Raphael as in, we are trying to cater to as many user groups as we can. And Raphael just wants Raphael has, it's, it's, it does a few basic things, right? And few, it does those things really well and it doesn't really want to do anything else. I mean, if they're not even thinking of providing canvas support even now, right? So when I was talking about custom attributes in Raphael, I told you that custom attributes in Raphael are defined per paper. So when you define an attribute, a new attribute that you want to use, that attribute will actually be defined, will be available for every element that you create in that paper. This is not always desirable and not an ideal case scenario because there are, there are, there might be some attributes that you're defining like, say, thickness for, for a pseudo 3D shape or a 3D shape that you're creating, which will not make sense for a normal shape which is, which is two dimensional, right? So we have created with red Raphael, we have now given the ability to create custom attributes on a per element level. So you create an element and you can define the custom attribute for that element only. And this actually allows you to override existing attributes also, which I will show you in a demo. So this is an example of how you create a custom attribute in red Raphael on a, on an, on an element, right? You create, so this, the border color is the name of the custom attribute that I'm giving to the wreck. When I say wrecked L dot ATTR border color and I pass the color, it actually applies that ATTR as a stroke and the entire wreck has a red border. Okay. So, yeah. I mean, I'm, I know Jase who does not allow followers and stalkers and stuff. There was this huge mail about the code of conduct at Jase. So I'm not sure if this is allowed, but followers and stalkers exist in red Raphael as a special class of elements that actually can follow another element in the sense that whatever the target elements attributes are, the follow, the follower element will emulate all those attributes. So a classic example in, from a real world scenario is you have a text and you have a border around the text. So in, in HTML or it, something like that some to do something like that is fairly easy. You have a span and you give a padding and you have text inside and then you give a border color, but in graphics, it is very difficult. So you create a text element, you create a rectangular element, rectangle element, and then you make the rectangle element follow it becomes using red Raphael. Having a text bound becomes much easier than, you know, having to do that using normal Raphael, because you can actually follow an element. So I'll give you an example of how you can do this. So I've created a text element and I have drawn another rectangle element around it. Now, if I, the, the, on the click of the, on the mouse click, I just move the text to the new position. But because the rectangle is actually following the text element, the rectangle also moves along with it. If I edit the text, the rectangle actually changes its own dimensions to match the new text that has been provided, right? This is taking time. Okay. I wanted to show you the code sample also so that I can show what, how followers are implemented, but I guess I'll have, I'll skip that for now. Right. So Raphael in itself allows you to extend the framework by providing custom attributes, by providing new shapes, and, and providing elements, functions on the elements themselves. Now we have unified all these different ways of extending an element in red Raphael by providing API called Raphael dot define. So using the Raphael dot define, you can create a new shape type. You can give custom attributes to it. You can give functions to it. That will, the custom methods that will be defined on the element that gets created. And in a sense, this is actually not just creating a new shape. This is actually kind of creating a new graphical component itself where you have along with the shapes behaviors associated with the, with the shape. So this is another demo for how I, we can create a cube using the file dot define. Let me just write. So the object that actually creates the cube is about 50 lines long, right? You, you, you specify what is the name of the shape that you're creating. You have to, you, you tell how the shape has to be drawn. And then you, then you have to provide custom attributes depending on your own idea of how the shape should behave. So you provide a fill and a cube function. And yeah, that's it. So in about 50 lines of code, you can create an all new, you can create a new shape itself, like a 3d cube. And that shape will behave like a normal element. So you can perform operations that you'd perform on a shape on the, on the custom shape. So like, scroll down. I want to be able to, right? So if I want, if I want to change the fill of the shape, okay, this is, this is taking too long. And so basically this, this, if you change, if you apply any attribute to the shape, it would behave exactly as if we were applying the attribute to a normal shape, you can rotate it, you can see there it changes, right? You can apply a transform to it. You can change the fail, et cetera, et cetera. So you have a custom shape using the file dot defined, you can create a custom shape, not just a custom shape, but a custom component and, you know, in fairly easily. So right now we are working on supporting canvas also as part of red Raphael. And like I said, this is something that we want, we are doing because we actually want to cater to everybody. So there are people who have, who want to use canvas for rendering graphics. There will be no change in the way the library is used. You would still be able to do exact all the things that you can do, except the only difference would be instead of SVG, we would be using canvas to do the, the rendering. So there are a lot of challenges in doing this that we are currently working on like mouse interactivity and drag and drop and stuff. So it's still work in progress, right? As I said, we are trying to develop red Raphael for those, for those users who want to use the graphics library extensively and like they are going to be the super users of the library. So we want to make sure that the performance of the library is really good. So a lot of effort is going into optimizing the performance of the library. We are, as I said earlier, we are working on canvas support also and we'll add more features. We've made it, we've made red Raphael open source very recently. So we'll come up with a guideline for contributors because we want people to use, not just use, but contribute to red Raphael as well. So yeah, this is about red Raphael. If you guys have any questions, please. Hey, nice to have you. You talked about the group element. Is your paper thing a wrapper around kind of the traditional SVG group elements that we already have? No, no, the paper is actually the, is an, is, is just an object that you get when you instantiate the Raphael class. So when you instantiate the Raphael class, it will create the SVG root node, the SVG or a VML root node and attach it to the paper and return the paper object to you. So using the paper, you draw elements, you draw shapes which get rendered inside the root SVG or VML node that you've created. Right. And the groups you talked about is just an abstraction of SVG group, right? Yeah. Yeah. The G element that you have in SVG. And how does this compare to a library like D3? So D3 is different in the sense that again, there is, I'm not, I don't think D3 supports VML. So as I said, we want to support all kinds of people, all kinds of users, people who are using VML, not using VML. And in fact, some of the features that we are providing also, I don't think D3 has them yet. There are a lot of things that D3 has that we don't have yet. So, so different library. All right. Hi. Hi. Yeah. So the, you mentioned something about performance in the beginning. Yeah. Right. And the cube, the blue cube took some time to become an orange cube. So was that performance of Raphael or internet connection? Internet connection. That was the internet connection. Okay. So how is performance like, how many nodes or how many elements shapes can we hold in the browser using Raphael at any point of time? So we have created, so we use Raphael in our infusion charts and there are, we have rendered close to a million points. So that is a million points and that, more than that, in fact, it takes some time, if to render about a million points, it takes about four or five seconds. Okay. But does it like choke the system? Have you tested it like to its extreme? At what point it breaks, kills the browser? No, I'm not sure about that. Okay. Till what extent can we push Raphael? It actually depends, differs from browser to browser. So somewhere around that we send it. Okay. A million point works though. Yeah. Thanks. Thank you. Hey, I have a question. Yeah. So can it also be used to make interactive stuff like markers on Google Maps rather than just the canvas? Yeah. So if basically red Raphael still works in the browser and requires SVG and or VML right now to be able to render graphics. So if your target environment allows SVG to be created, then we can definitely use red Raphael to create any kind of graphics there. And the graphics will be interactive. So all kinds of mouse interactivity and gesture works. Cool. All right. A big round of applause for Sushant, everybody. Thank you. Do check out the code. It's up on github.com slash fusion charts slash red Raphael. Awesome. Check it out. It's an interesting code. We are checking it out yesterday. Thank you, Sushant.