Desarrollo de una interfaz web para un simulador de procesadores superescalares

Abstract

[ES] En este Trabajo Fin de Grado se diseña y desarrolla una interfaz web de una sóla página (SPA), destinada a ser la parte visual de un simulador de procesadores superescalares para uso docente. Mediante la interfaz, el usuario puede modificar los parámetros de ejecución de dicho simulador, además de cargar y ejecutar sus propios ficheros de código ensamblador, para, una vez ejecutado el código, visualizar los diferentes datos proporcionados por la salida del simulador. Estos datos son procesados e incluidos en diferentes tablas que representan el estado del procesador en cada ciclo. El diseño de la interfaz es extensible para facilitar que, en un futuro, se añadan más tablas con mínimas modificaciones en el código. La implementación de la interfaz se ha realizado utilizando exclusivamente tecnologías front-end, concretamente JavaScript, HTML y CSS. También se han utilizado algunas funcionalidades del framework Material Design, Materialize CSS y el editor de código embebido CodeMirror. Para la implantación de interfaz y simulador se ha utilizado la tecnología Emscripten, que permite compilar el código en C del simulador y traducirlo a JavaScript. Mediante esta tecnología, tanto interfaz como simulador pueden ejecutarse sin necesidad de soporte dinámico en el back-end, lo que facilita la implantación en plataformas como PoliformaT.

[EN] In this Final Degree Project a single page web interface (SPA) is designed and developed, aimed to be the visual part of a superscalar processors simulator for teaching purposes. With the application, the user can modify the simulator execution parameters, in addition to loading and executing assembly code files. Once the code has been executed the user can visualize the different data provided by the simulator output. Output data is processed and included in different tables that represent the state of the processor in each execution cycle. The interface design is extensible to facilitate adding more data tables with minimal source code modifications. The interface implementation has been done using specific front-end technologies, specifically JavaScript, HTML and CSS. Some functionalities of the Material Design framework, Materialize CSS, and the CodeMirror embedded code editor have also been leveraged. Emscripten technology has been used too, which allows the original simulator's C code to be compiled and translated into JavaScript. Using this technology, both the interface and the simulator can be run without the need of dynamic support in the back-end, which makes it easier the deployment of the application on platforms such as PoliformaT.