 Good afternoon everybody, I am Yashasvi and these are my project mates. This is Ajit, that's Shikhar, that's Sarthak and that's Akash. And our project is about porting CRCPP applications on the web. Giving a quick overview, we were tasked with converting desktop applications which were written in CC++. We had to convert the logic which was written in those and to their analogous JavaScript, so that we can host them on the web. One might wonder what the need of porting is and it's quite trivial. A lot of applications are designed in CC++ because of their superior speed and performance that they provide. A lot of programs are made in CC++ because of their superior speed and we want the speed in the web browser and due to these reasons, a lot of standards like ASMJS and web assembly were created, which we'll explain going on through the presentation. Mostly everyone has access to the web and if applications are directly available there, without the hassle of an installation, it's better. And a straightforward way to convert applications would be to directly look at the CC++ file, understand them and write the code again in JavaScript, but that would be slow. And hence, we need to port and we make use of a very handy tool called M-scripten. And I'll call upon Ajit to give a brief explanation about M-scripten. Good afternoon everyone. So we use M-scripten to port the CRC++ code. As written there, M-scripten is a tool chain for compiling to ASMJS or web assembly built using LLVM. Whole M-scripten has different parts, but the part that ports the CRC++ files is the M-scripten software development kit that is also known as EM SDK. So EM SDK consists of three parts. One is the Clang LLVM, other one is the M-scripten compiler EMCC and the Binarian. So this diagram can explain the M-scripten SDK. We have the C or C++ source code and the LLVM and Clang part generates the LLVM bit code and the bit code is given as an input to the EMCC compiler that generates the ASM.js file. Now ASM.js is a subset of the JavaScript. Modern browsers can recognize the ASM.js and there are tools in the browsers that optimize the code. So it runs nearly at the native speed. There is a dotted line there because the Binarian part is optional. ASM is developed by Mozilla currently and there are two problems with ASM. One is that ASM does not support the document object model now and for the porting most of the time we need the logic for the download, upload, input and there are no logic to input in JavaScript. So DOM is useful. So with ASM you can't do that. Plus ASM is not currently fully supported in Chrome. Sometimes ASM streaming fails. So we have worked with ASM.js. So this is a simple demonstration of a file. For example, this file will print... If you run this file and build an executable file with the GCC or G++ compiler this is the simple first porting example using M-scripten. To do the porting of the generation of the JavaScript file with EMCC we'll just write analogous to the GCC like emcchelloporting.c-ohelloporting.js We can also generate an inbuilt HTML file but the inbuilt HTML file is just like a template. It has a text area to display the what is output that will come in the executable file. So it is not useful for us because we have to interact with the DOM. So the overall development flow of the M-scripten can be explained with this file. We have the source code. We generate the BC file and then we have generated the JS file. So most of the time we have to think about how to interact with the functions that are generated in the JS file. So we have to write the front end to interact with the JS file. So we have the index.shtml and the JavaScript generated through the source code. So we serve all the files on the local server and then we can interact, test or debug it in the browser. So first example that we did was the PNG CRUS. So what is PNG CRUS? So PNG CRUS is a free and open source command line utility for optimizing PNG files. So what it does? The main C files, if we create a executable file, it takes input PNG and generates an output PNG which is a compressed of that input PNG. We can explain the port with the following flow diagram. We have the source file. We use version 1.8.11. We generated the beat code and then the JS file. So the main thinking goes in the making of the index.shtml because inputting file is not easier in the JavaScript. So we made a front end like this. We allow the user to browse the file and then generate it, upload it on the wave. All the printing that will be done in the console are printed in this text area and it says about how much reduction is done. So user can now download the compressed PNG through this download button. So this has been deployed on the GitHub and it's running there. Now Sikhar will tell about the port of GNUplot. Porting of GNUplot. Basically GNUplot is a command line program that generates two-dimensional and three-dimensional plots of functions, data and datafits. It is also used as a plotting engine in various third-party applications like Octave. This is the basic development flow of porting of GNUplot. Porting process can be divided into five major tasks. First, getting the source file. Second, generating the JavaScript file. Third, making appropriate changes in the JavaScript file. Fourth, designing the user interface and then testing it and finally deploying it on GitHub. We will be discussing each part in detail in the later slides. First is getting the source file. The source files are available on the official source files repository and one can easily get the source files of GNUplot from there. The second and one of the most important part of the porting is generating the JS file. This is basically consists of two major tasks. One is generating the LLVM bitcode and then generating the JavaScript file from this LLVM bitcode. For the first part, for generating the LLVM bitcode, we basically use two commands, EM Configure and EM Make. EM Configure does the job of replacing GCC and G++ with EMCC and E++ while generating the makefile of the application. What EM Make does is that it generates the LLVM bitcode. So basically these were the two commands we ran on the terminal to generate the file. However, when we ran the second command EMMakeMake from the base directory, we failed an error due to the fact that EMMake did not possess the permission to access the doc directory. But since the doc directory basically contains documentation of GNUplot and if someone is using this ported version of GNUplot, we expect them to have at least a bit of knowledge about GNUplot. So we just move into the source directory and run the same command again. So with this, we got the bitcode. We then took this file to another location which had another directory which had another file called pre.js and then gave it an extension of .o. We gave the extension of .o because MScripten only recognizes .o as a bitcode. After that, this command was written in a terminal and this converted the bitcode into the JavaScript file. After that, basically pre.js is a file which contains JavaScript code which we want to insert before the code generated by MScripten. Here, pre.js contains main two functions. One is a print function and one is a print error function. Basically, whenever the module, the MScripten finds any stdr statement in it, then what it does is it calls module.print with the output it finds. So basically, whenever print function is called with the output, it stores it in the out str variable and it is stored in the svg format which is used to store graphic files. Later on in the HTML, we print it in the HTML. The second is the print error. Print error is used to print the error, if any, on the console. From now, the next part will be explained by just me. So on the previous slide, you would have noticed that this is the pre.js file that we wrote and this is a file that is written by us and it acts as a precursor to the file which is ported by MScripten itself. And you would notice a variable out string and this out string is basically the string in which we store the svg image that is produced when we run commands from the front-end. Now moving on, making the UI was not a problem. The main problem is that we didn't know how to basically run the input that the user provides. After a lot of tinkering around with and getting a lot of errors, we figured out that this particular GNU plot as an application when ported took files as an input where the file contained all of the program code that the user needed to run. When we knew this, we just created a text area in which the user could plug in their code and simply at the click of a button, we converted it to a file using the MScripten file system which is already provided, which is very handy and we basically just use a few functions which is defined inside it which is fs.createDataFile and fs.unlink to delete the files it's already made. And as soon as we get that, we had to add a little bit more features which were basically GNU plot has a feature to allow other data and other files to be used in other plots and this was done using the file reader API of JavaScript and the download version was done using the blob API. And these are the few examples that we used and now I'll call Bon Sarthak to explain the port of CIM AVR. Normally we are all surrounded with microcontrollers all around so we all have microcontrollers programming and C which uses C programming embedded and also we have AVR programming which are for ahead of embedded C so firstly we need to look upon what's actually CIM AVR is so we have softwares like VIN AVR at Middle Studio for AVR programming keel, microvision, IDE and flash magic tool for C that we use for 8051 and 8031 types of microcontrollers this is how it works it plots the waveform it is actually a simulation using JTKWave software that's actually how CIM AVR works so now we have ported it it is open source software so the code base has been downloaded from its repository and we have particularly chosen a particular module that is atmel8Mega120MCU because its code base is very large almost having 250 plus header files and 70 plus C files so 12080 we have ported and its code base we have modified also because it was not working as desired and we have made web responsive UI our own and then deployed these are all the changes that we have made according to our this is the demo of our port the input is ledprogram.hexfile hexfile it takes and these leds are glowing just on the need because that hexfile contains the respective code for it and we have the simulation speed and this terminal as a second approach to debug because its task is to debug the code if we are having any logical error inside so these are two screenshots we have simulation speed to control that and it actually displays this how many cycles are being used in the program and one cycle takes how much microsecond because while writing the code the programmer knows which instruction needs how many machine cycles so its easy to debug using this command prompt or console so how to use and debug its here we can use to convert ELF file because generally programmers have ELF files and this port uses hexfile so how to convert ELF using hex we have this command and the pinouts we have shown the link of official pdf and to increase the simulation speed we have the slider and to stop we have a board major issues these are what the major issues we faced and approaches to teamwork and github repository mail and these are the use cases who will use that so firstly novice programmers as a learner anyone can use that to learn where he has committed the mistake to debug using this port experienced programmers obviously companies to test large programs or softwares they can dump their hexfile directly onto this port and it will simulate using that leds and console to print and educational institutes obviously limitations we have because its not perfect firstly it is particular port or particular mcu that we are porting not actually whole same avr but this particular module has been successfully ported rendering of lcd screen was not possible because we are getting the command like what to print but we are not having that particular lcd character on the web so we need to develop to 16 by 2 lcd actual virtual lcd there so its limitations and it obviously it includes in our further development we will work upon it and also as discussed with our mentors we have to include one editor so that the programmer can write avr code directly onto our web page and we can compile into it hexfile and it can be simulated text editor and we have to make some modules out of it so that like on a particular workspace we can drag and drop thank you so we can show the demo on the Chrome for which software you are showing same avr till then I will ask question you continue so I want to know did you also made some changes in the software we have modified the original code base because it was not as desired it works fine for the leds but when we try to print like how many machine cycles or time delay its being taken so for that we need to write our own code so that it can work fine and you write your code in which language C program and then you updated the git repository of that software no we have our own git repository so I want to understand this process so there is a C program available software built in C available more to the C programming software work based on some command correct some command has to be passed and some has GUI like this one that we are going to show also has a GUI correct for the first one I understood PNG something was there it is simply a image as a parameter that's all correct nothing else it was compressing it it does not have any GUI so it's easy to port but when you are talking about C programming which has GUI then how you made this frontend frontend we have made in HTML and CSS and using the javascript that we are producing or generating through mscripten by compiling through all those C files or C++ file or header file that we are having so we are communicating we are making worker.js to communicate between that HTML that we have written and back in that vr.js that the mscripten is producing okay so there is a logic yes written in C then your frontend built in js both are unconnected correct then how you connect them logic is being converted to js by mscripten only we are writing HTML for it yes so the question that you asked before as in how the logic is being converted what happens is mscripten makes a global variable called module now this module stores all of the functions in a different format like it converts all of the functions that are written in the ccplus programs and it stores it as functions of this greater module object which it creates so we need to figure out which function to call according to what input we get okay so in the beginning you mentioned that if we write all the logic in javascript it will not be very good means the performance will be very good so now what is happening it is converting that logic into some other language no not necessarily so what happens is mscripten makes two files one is the basic javascript which has a definition of the functions okay and then another called the mem file the mem file stores the actual logic of the function and then because it's a bit called file it's binary file it's easier to convert it into bit and dot o file is called so the function is called but after that the dot o file is called yeah the function is read and then it's the output is given back so I was thinking what is the size of this js file that is created that was one of the limitation that we showed in the genuplot one slide was missed there and the size generator is around for the software like genuplot it is around 5.5 mb and for the cma we are also it's big file so we can work on that there are optimization levels in the mscripten so if you optimize more then there are loss of functions that are present then we have the problem so till now the file is large so if not javascript then how will you implement something like pngcrush on the web then we have to write the logic no if you don't have to use javascript can you communicate with the c program written on the server and you can just communicate with an epi so for that we can use the wasm web assembly what is really happening is that the applications are so tightly coupled and then now you cannot separate it out that becomes a problem so these are older applications genuplot and so there are applications which have which are loosely coupled and if there are api based applications and which are desktop based there is a possibility that you can convert separately these two things the front end as a js and the back end you keep the back end at the back yes sir for same way we are also when we made that console terminal so we had to write the logic in c file only because writing directly that logic in js is not like it's not possible so we had to write the logic in c only and then we have to compile so that it can come to js okay and one more thing one of the main points that you said in one of your first slides was that speed factor right that if you write it in javascript then it will be slower so you could have done a short comparison saying how fast the c program runs and how fast a similar one in pure javascript runs and then how fast is your converted one with this for that continuously mscripten is being upgraded so the only the developer of it claims that the js that is being generated by mscripten has almost similar speed till it has achieved just like the native c code and are there some organizations that are using these kind of tools okay so there are various projects that are using it no I got it regarding the simulation of the microprocessor that is good but apart from that the other three are not so you know promising but yeah that's the writing logic complete logic in js is not like it's very tedious so companies are offering to write in c and then to port it mscripten currently doesn't support java due to some garbage collection it claims mscripten so it doesn't support that okay thank you sir