Tips and tricks #10: Files, long calculation mode

Tips and tricks series

• Tips and tricks #1: How to set output value
• Tips and tricks #2: How to make calculator translatable into different languages
• Tips and tricks #3: How to make calculator with custom errors
• Tips and tricks #4: How to make calculator with table output
• Tips and tricks #5: How to show/hide input and output controls in a calculator
• Tips and tricks #6: How to make calculator with virtual keyboard
• Tips and tricks #7: How to make calculator with SVG image map
• Tips and tricks #8: How to reuse existing calculator
• Tips and tricks #9: Big numbers
• Tips and tricks #10: Files, long calculation mode
• Tips and tricks #11: Dynamic table columns
• Tips and tricks #12: Long (infinite) calculations
• Tips and tricks #13: Bitmaps and Pixel manipulation
• Tips and tricks #14: How to use a masked input

This article may rely on knowledge you should get from previous articles, so you may want to check them first.

File output

Using file output you can save your calculator output as a binary file. For example the following calculator generates sound tones by user parameters and saves it to wave audio file. The file can be downloaded to the user's PC by clicking on the calculator output parameter link.

Sound tone generator

Period, Hz

Amplitude

FormSine Jigsaw Square Triangle

Output file format

Sampling frequency8 kHz 16 kHz

Bits per sample8 16

File length, ms

Calculate

Sound file

 

 Link  Save  Widget

The code excerpt from the calculator above generates the link for downloading output file:

file.SetValue( {filename:form + period 
  + 'Hz_' + bits +'bit' + (sampling/1000) 
  + 'kHz_' +  length + 'ms.wav'
  ,type:'audio/wave' 
  ,data:[header,data]} );

So to create a downloadable file link you should pass the following structure to the file output:
{ filename, type, data }

• filename - is a name under which a user browser will save the file after clicking by output file link.
• type - MIME type of the output file (optional)
• data - array of ArrayBuffer's, containing the file content.
  N.B. the file data is kept in a user computer memory, so don't generate huge files to avoid out-of-memory issues.

File input

The file input extends the Planetcalc calculator framework capabilities by the option of reading data from local files. You may set the limits on input file types and file size. By default any files of any size are allowed. You can use file input in asynchronous calculation mode only.

Audio file waveform

Wave file

• 
• Browse
• Drag files here

Fragment start, seconds

Fragment end, seconds

Settings

Maximal number of points

Calculate

Calculation precision

Digits after the decimal point: 3

File format

 

Waveform

The file is very large. Browser slowdown may occur during loading and creation.

Download 

 Link  Save  Widget

File object

The file input returns an array of files, selected by user. Every item of the array has the file property, which is the File object. You may use FileReader API to access the file data.
To process huge files you may implement buffered reading using Blob.slice method.
Also you can reuse library function Planetcalc.Lib8582.bufferedRead( buffer, done ) for this purpose:

var lib = Planetcalc.Lib8582;
return Promise.all( file.map(f=＞ {
    return new Promise( (success, error ) =＞ {
        lib.bufferedRead(cur, ( buf, finalBuffer ) =＞  {
                // process buf - ArrayBuffer
                if ( finalBuffer ) success();
        }); 
    });
}));

Asynchronous/long calculation mode

By switching on 'Long calculation' mode in the calculator properties one may perform a long calculation without UI freeze. In this mode browsers will execute the calculator code in the web worker (separate thread). The code executes asynchronously, the Calculate function must return a Promise resolving on a calculation completion. The asynchronous mode is similar to the long calculation mode, except the calculate function executes in the browser thread. Use the long calculation mode for infinitely long or CPU consuming calculation, use asynchronous mode for the calculations involving finite asynchronous operations, such as file input. You may set output values as usual during async/infinite calculation mode, but the calculator UI will display them only on calculation completion. To display current values of the outputs, use the special output, available in async/long mode, named 'progressControl'. progressControl.SetValue method sets progress bar textual information and forces UI to display the current values.

progressControl.SetValue( '34 of 124 items processed');  //sets progress bar text and forces UI to display current values