How I Fixed A Small Bug In Machine Language Compiler 0100 1111 0100 1011
Tags: opensource, javascript, webdev
Published: 2022-01-29 19:56:22



> ## **_Open Source is a great thing._** 
> This great thing is that it doesn't matter if you know the project's code or not. You can still solve bugs.

------
### About the project.

[GitHub Link](https://github.com/ctyler/6502js)

A JavaScript 6502 assembler and simulator which runs in a web browser, forked [from](https://github.com/skilldrick/6502js): 

Enhancements include a speed control (slider), load/save buttons, an 80x25 character memory-mapped terminal screen, and basic ROM routines.

A hosted copy is available at http://6502.cdot.systems - Click the "Notes" button and scroll through the text box at the bottom of the display for basic documentation, including links to some sample code. Some sample code to run within the emulator is available at https://github.com/ctyler/6502js-code

![Compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw2hpsw535kssg6esdvd.png)

![Compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wby946ry82eky2a2c58y.png)

You can see how our simple assembler's GUI looks on the images above. The bug was with the "Upload Button." The compiler didn't set all his states to the initial position when someone tried to upload a new file and run it. At first, I didn't have any ideas how to solve the issue, but with JS, always start with ToolBars. 
![Compiler(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqnpnoyh388whs3xqc3q.png)
 
After I found what line was responding for uploading the file, I started searching through the whole repository folder for something similar  and found these lines: 
![Compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xnvf203a1yp88s32h9j.png)
![Compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0agh47iqtq3nq2m1dq3b.png)
Here, we can tell that we need function "Upload".  

```
function upload() {
	var file = document.getElementById("uploadFilename").files[0];
	var fileReader = new FileReader();
	fileReader.onload = function(fileLoadedEvent) 
	{
		var textFromFileLoaded = fileLoadedEvent.target.result;
		document.getElementById("code").value = textFromFileLoaded;
		simulator.stop();
	};
      	fileReader.readAsText(file, "UTF-8");
    }
```
After I found this function, I found out that the process that responds to resetting the UI is not called there. How can this function be called? I found the Initialize function:

```
 function initialize() {
    stripText();
    ui.initialize();
    display.initialize();
    screen.initialize();
    simulator.reset();

    $node.find('.assembleButton').click(function() {
      assembler.assembleCode();
    });
    $node.find('.runButton').click(simulator.runBinary);
    $node.find('.runButton').click(simulator.stopDebugger);
    $node.find('.resetButton').click(simulator.reset);
    $node.find('.hexdumpButton').click(assembler.hexdump);
    $node.find('.disassembleButton').click(assembler.disassemble);
    $node.find('.downloadButton').click(assembler.download);
    $node.find('.uploadButton').click(assembler.upload);
    $node.find('.debug').change(function() {
      var debug = $(this).is(':checked');
      if (debug) {
        ui.debugOn();
        simulator.enableDebugger();
      } else {
        ui.debugOff();
        simulator.stopDebugger();
      }
    });
```
After a few checks, I called this process into the Upload function, and finally, everything worked!

```
function upload() {
	var file = document.getElementById("uploadFilename").files[0];
	var fileReader = new FileReader();
	fileReader.onload = function(fileLoadedEvent) 
	{
		var textFromFileLoaded = fileLoadedEvent.target.result;
		document.getElementById("code").value = textFromFileLoaded;
		simulator.stop();
		_**ui.initialize(); **_
	};
      	fileReader.readAsText(file, "UTF-8");
    }
```
### Conclusion

⚠️ Open Source For Developers Blog Post: Link

### Links

🖇 git https://github.com/aserputov
🖇 twitter https://twitter.com/aserputov\

_p.s This post was made for my SPO class Lab 3 assignment_