Tips and tricks #10: Files, long calculation mode
The article describes how to use input and output files in Planetcalc calculators
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.
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.
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
Comentarios