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).
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.
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.
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
Import New Scriptfiles
Like mentioned before, some methods are in seperate files like shown in image. So importScripts contains these necessary methods.
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.
Changes in Controller.js: Use Workers Simultaneously
Start up to 2 workers for generating the csv file and creating the HTML-Table.
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.
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.
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.