HTML-Table Visualization

The next step is to extend the app from the last instructables with a HTML-Table that shows the whole calculation directly on page with pointing horizontal, vertical bars and the info of the binary operation (e.g. 9x13=117).

Step 1: CSS + Additional HTML Lines

The most important lines of the css (autoCalcGUI.html) part is the table that gets once framed when the first row and column is appearing. tr: hover is when you mark horizontally the pointing row with the cursor. The odd thing is that the pointing vertical bar with col tag does not work with CSS, so I solved with a workaround in JS. (is shown later) Probably there is a better solution in the web.

In the html file there are also few lines added, a checkbox to enable, disable html table output and avoid clearing input text when pushing enter.

Step 2: Diagramm With Additional Entities

We create an additional worker that is responsible for the HTML Table output. Some changes in the code are also necessary.

Step 3: Seperate Scriptfiles

The 2 workers have similar functions that we have to avoid code duplication. The swap and mode selection methods are saved now in seperate scriptfiles, so that these 2 workers can use them simultaneously. Rename workerCalc to workerCSV.js

Step 4: Import New Scriptfiles

Like mentioned before, some methods are in seperate files like shown in image. So importScripts contains these necessary methods.

Step 5: Changes in Controller.js: Selected Workers

If the HTML-Table checkbox is checked both workers will be enabled, otherwise only one that generates the csv spreadsheet.

Step 6: Changes in Controller.js: Use Workers Simultaneously

Start up to 2 workers for generating the csv file and creating the HTML-Table.

Step 7: Changes in Controller.js: Vertical Pointing Bar

This method is for the vertical marking bar of columns, it's a workaround, because I didn't get it work only with CSS.

Step 8: New Workerfile

This worker creates a string containing the whole html code + calculations for table, rows and columns. It's similar to the another worker, it contains the necessary tags with appended values and results. If you point on a result you will get the calculation as info it's embedded in the td title="" tag.

Step 9: The Finished App

I realized that the app blocks when using huge values, because of the DOM Access for the table output. Probably there is a better solution for that. But I think it's inevitable, somehow you have to access to DOM if you create a HTML-Table.

App is provided as zip.