Introduction: HTML-Table Visualization

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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.


About This Instructable




Bio: Nowadays attempting creating small apps to dive into the world of programming and Software Development
More by sphere360:Binary Clock in ECMA/JSHTML-Table VisualizationECMA6 OOP with classes, extend a new feature
Add instructable to: