INDIAN INSTITUTE OF TECHNOLOGY, BOMBAY EKLAVYA SUMMER INTERNSHIP 2019 (FUNDAMENTAL RESEARCH GROUP) Porting of C/C++ Applications on the Web Under the guidance of: Prof. S. Sudarshan Team: Mentors: Ajit Kumar Mr. Nagesh Karmali Akash Soni Mr. Rajesh Kushalkar Sarthak Mishra Shikhar Suman Yasasvi V Peruvemba text Summer Internship 2019 Project Approval Certificate Department of Computer Science and Engineering Indian Institute of Technology Bombay Certificate The project entitled Porting of C or CPP Desktop Applications on the web sub- mitted by Mr. Ajit Kumar, Mr. Akash Soni, Mr. Sarthak Mishra, Mr. Shikhar Suman and Mr. Yasasvi V Peruvemba is approved for Summer Internship 2019 programme from 19th May 2019 to 9th July 2019, at Department of Computer Science and Engineering, IIT Bombay. Prof. S. SUDARSHAN Mr. NAGESH KARMALI Dept. of CSE, IITB Dept. of CSE, IITB Principle Investigator Sr. Project Manager Mr. RAJESH KUSHALKAR Dept. of CSE, IITB Sr. Project Manager Date: July 4, 2019 text Acknowledgement We have spent a lot of effort on this project. However, it would not have been pos- sible without the kind support of various individuals and organizations, we would like to extend our sincere thanks to all of them. We would like to express our sincere thanks and regards to Prof. D.B.Phatak and Prof. S. Sudarshan, Indian Institute of Technology, Bombay for providing us this unparalleled opportunity to work on this esteemed project. We would also like to extend our sincere thanks to Mr. Nagesh Karmali for supervising our project. Our sincere thanks to Mr.Rajesh Kushalkar, without whom the project would not be this refined and successful. Finally we usher our thanks to the open-source community and others who have willingly assisted us in the smallest possible manners in the development of the project. Declaration I declare that this written submission represents my ideas in my own words and where others' ideas or words have been included, I have adequately cited and ref- erenced the original sources. I also declare that I have adhered to all principles of academic honesty and integrity and have not misrepresented or fabricated or falsi- fied any idea/data/fact/source in my submission. I understand that any violation of the above will be cause for disciplinary action by the institute and can also evoke penal action from the sources which have thus not been properly cited or from whom proper permission has not been taken when needed AJIT KUMAR SHIKHAR SUMAN IIT ISM DHANBAD IIT ISM DHANBAD AKASH SONI YASASVI V PERUVEMBA NIT HAMIRPUR IIT INDORE SARTHAK MISHRA SIT TUMKUR Abstract Porting of applications to the web, refers to the transpiling of desktop applications, coded in C/C++ into it's JavaScript counterpart, which can then be hosted as a web-service. This is an FRG Project aimed towards a more secure and space effi- cient alternative for native applications. In the upcoming sections, the methodologies and techniques used are described, along with the specified results. Also, more insight about the key technologies used is given, justifying why they were necessary for the project. The basis behind the applied technology is also justified below. In this project, we have achieved success in porting four different applications viz. PNGCrush, Tetris, GNUPlot and SimAVR. text List of Figures 1.1 WebAssembly Flow . .4 2.1 Emscripten Compiler Flow . .5 2.2 Emscripten Toolchain[1] . .6 2.3 Console output for Example 2 . .8 2.4 Emscripten Development Flow . .9 3.1 PNGCrush via Terminal . 13 3.2 PNGCrush in Browser . 15 3.3 Download Option . 16 4.1 Tetris gameplay . 18 4.2 Source code . 19 4.3 HTML File . 20 4.4 Modification in constants.h . 21 4.5 Original display score() . 21 4.6 Modified display score() . 22 4.7 Tetris on web gameplay . 23 4.8 Tetris on web gameplay . 23 4.9 Tetris on web gameplay . 24 5.1 Plot of Example 1 . 29 5.2 Plot of Example 2 . 30 5.3 Plot of Example 3 . 31 5.4 Plot of Example 4 . 32 6.1 GTK Wave Trace . 34 6.2 Error 1 . 36 6.3 Error 2 . 36 6.4 LED program output . 37 6.5 LED program output . 37 ii text Contents 1 Introduction 2 1.1 Why Porting? . .2 1.2 The Need . .2 1.3 C/C++ . .3 1.3.1 C Programming Language . .3 1.3.2 C++ Programming Language . .3 1.4 asm.js . .3 1.5 WebAssembly . .4 2 Emscripten 5 2.1 Overview . .5 2.2 Examples . .7 2.2.1 Example 1 . .7 2.2.2 Example 2 . .7 2.3 Building Projects with Emscripten . .8 2.3.1 emconfigure . .8 2.3.2 emmake . .8 2.4 Insight on Generated JS Files . .9 2.5 Interacting with C/C++ functions from JavaScript through Em- scripten . 10 2.5.1 ccall . 10 2.5.2 cwrap . 11 2.6 FileSystem API . 11 3 PNGCrush 13 3.1 About . 13 3.2 Downloading Source Code . 14 3.3 Porting the application . 14 3.3.1 Generating js file . 14 3.3.2 Running js file browser . 14 3.3.3 Making the js file work . 15 3.3.4 Creating input png file . 15 3.3.5 Running PNGCrush . 16 iv CONTENTS Project: P1 4 Tetris 17 4.1 Overview . 17 4.2 Note about porting . 17 4.3 Porting of Tetris to Web . 17 4.3.1 Understanding the C/C++ source code . 17 4.3.2 Adding the Web . 18 4.3.3 Making appropriate changes to C/C++ source code . 18 4.3.4 Porting of the game on the web using Emscripten . 18 4.4 Understanding the C/C++ source code . 19 4.5 Adding the Web . 20 4.6 Making changes in C++ Files . 20 4.7 Porting of the game on the web using Emscripten. 22 4.8 Github Repository for the Port of Tetris . 24 5 GNUPlot 25 5.1 About . 25 5.2 Source Code for Generating JS Files . 26 5.3 Porting the Application . 26 5.3.1 Building the Application . 26 5.3.2 Generating the JS File . 27 5.3.3 Creating the Front-End . 27 5.4 Github Repository . 28 5.5 Examples . 28 5.6 Further Development . 32 6 SimAVR 33 6.1 Overview . 33 6.2 Need to Port SimAVR . 33 6.3 History . 33 6.4 Procedure to Port . 34 6.5 Errors Faced . 35 6.6 Examples . 36 6.7 UseCase . 37 6.8 Limitations . 38 6.9 Further Development . 38 6.10 Github Repository for the Port of SimAVR . 38 7 Appendix 39 7.1 Emsripten Installation . 39 Fundamental Research Group, IIT Bombay v text Chapter 1 Introduction This project aims at converting C/C++ desktop applications to the web. To aid us in porting applications to the web, i.e, in converting C/C++ logic into it's JavaScript counterpart, there are a few tools. In particular, we will be dealing with Emscripten, an LLVM compiler which forms the base of our project. The reason for why we used Emscripten other than it's more recent counterparts is justified in the following sections. The main aim of this project is to aid the Porting of Educational Applications. 1.1 Why Porting? In software engineering, porting is the process of adapting software for the purpose of achieving some form of execution in a computing environment that is different from the one that a given program (meant for such execution) was originally de- signed for (e.g. different CPU, operating system, or third party library). The term is also used when software/hardware is changed to make them usable in different environments. [2] For our project, we are concerned with porting application logic from C/C++ to JavaScript. 1.2 The Need A lot of Applications are built in C/C++ due to their superior high speed per- formance. In the modern world, everyone has access to the internet and it will definitely helpful if various Educational Applications were available on the Web. A straightforward way to do so would be to write the entire program logic in JavaScript from scratch. This being a very tedious task, also won't provide performance as that of Native Applications. Hence, the need of Porting arises, which led to the development of Emscripten, an LLVM-to-JavaScript compiler, to aid in Porting. 2 CHAPTER 1. INTRODUCTION Project: P1 1.3 C/C++ These are the languages in which the Desktop Applications that we port are written and developed in. They are also widely regarded among the most popular languages for every Computer Science enthusiast. For the purpose of our project, it is important to note that any of the applica- tion that we port could be written in either C or C++. 1.3.1 C Programming Language C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, while a static type system prevents unintended operations. By design, C provides constructs that map efficiently to typical machine instructions, and has found lasting use in applica- tions previously coded in assembly language. Such applications include operating systems, as well as various application software for computers ranging from super- computers to embedded systems. [3] 1.3.2 C++ Programming Language C++ is also a general-purpose, procedural computer programming language, which was developed as an extension of the C language by Bjarne Stroustrup. It is also referred to as \C with Classes". It provides a great deal of features that include.