Speech recognition and speech to text (STT) are convenience at it's best for the user of small devices.
I did research on speech recognition for my book project, in case the barcode-reader could not recognize the ISBN barcode on a book it was possible to dictate the numbers of the ISBN - one by one.
Today the circumstances are a little bit better.
Sunday, December 11, 2016
Friday, December 9, 2016
photos - select, display, store thumbnail
December 11, 2016 - optimized code with closure and additional file information
There are some steps necessary to present and store pictures in the diary with browser or app:
The best way to select pictures from the file system I found in http://stackoverflow.com/questions/27254735/filereader-onload-with-result-and-parameter and the fiddle http://jsfiddle.net/sahilbatla/hjk3u2ee/ - the code uses closures. You get a clean loop on the files and processing the files is easy. But jshint still marks the function in the closure, because it's in a loop, although it's save.
FileReader is not available on Safari under Windows 10.
Photos are an important part for a diary. In
http://codepedia.info/editor-example/preview-image-before-upload-jquery-example/ there is an introduction with sample code for using HTML5 for file upload.
The images are displayed as thumbnail.
The corresponding html-source shows that the image is referenced with
<img src="data:image/jpeg;base64,<base64-String>>
And this is a very good opportunitiy to upload the picture to the server or the local database.
https://github.com/nodeca/pica seems to be a good approach but the solution is large regarding the code that has to be downloaded to the client. Under node.js that would not be a problem.
Based on canvas creating a thumbnail is easy and efficient:
http://stackoverflow.com/questions/15990946/resize-image-before-upload-convert-canvas-to-a-file-object gives some background
http://jsfiddle.net/cL3hapL4/2/ shows how to do it, you can easily add some try catch block structure - just in case there is an old browser
http://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring shows canvas.toDataURL("image/jpeg"); which will save the reduced photo.
The base64 String still has some size, so compression can be the next step.
http://pieroxy.net/blog/pages/lz-string/demo.html is a very good solution for compression, but then you have a blob - which can cause a lot of problems when store to a client database, see https://github.com/nolanlawson/state-of-binary-data-in-the-browser
My solution:
http://stackoverflow.com/questions/28538913/crop-an-image-displayed-in-a-canvas shows a simple solution to crop with canvas. For the resizing with canvas the canvas has to be set to the target width and height, before the resize is done, then everythin works fine - code to come
http://stackoverflow.com/questions/27254735/filereader-onload-with-result-and-parameter shows how the inner function in the loop over the the imagefiles can be formulated as closures, then jshint will no longer put a mark on it.
There are some steps necessary to present and store pictures in the diary with browser or app:
- select pictures from file system - FileReader HTML5 is necessary to select pictures
- create thumbnail, crop the thumbnail image and create base64 string for this compressed or reduced picture - crop is necessary because thumbnail is an optical effect and not a compression of the data of the picture - canvas HTML5 is necessary for this function
- show the thumbnail to the user - plain HTML with base64 string as image src
- store the thumbnail in the database - plain base64 string
- retrieve the thumbnail from the database and show it again - base64 string is image src again
The best way to select pictures from the file system I found in http://stackoverflow.com/questions/27254735/filereader-onload-with-result-and-parameter and the fiddle http://jsfiddle.net/sahilbatla/hjk3u2ee/ - the code uses closures. You get a clean loop on the files and processing the files is easy. But jshint still marks the function in the closure, because it's in a loop, although it's save.
FileReader is not available on Safari under Windows 10.
Photos are an important part for a diary. In
http://codepedia.info/editor-example/preview-image-before-upload-jquery-example/ there is an introduction with sample code for using HTML5 for file upload.
The images are displayed as thumbnail.
The corresponding html-source shows that the image is referenced with
<img src="data:image/jpeg;base64,<base64-String>>
And this is a very good opportunitiy to upload the picture to the server or the local database.
https://github.com/nodeca/pica seems to be a good approach but the solution is large regarding the code that has to be downloaded to the client. Under node.js that would not be a problem.
Based on canvas creating a thumbnail is easy and efficient:
http://stackoverflow.com/questions/15990946/resize-image-before-upload-convert-canvas-to-a-file-object gives some background
http://jsfiddle.net/cL3hapL4/2/ shows how to do it, you can easily add some try catch block structure - just in case there is an old browser
http://stackoverflow.com/questions/15685698/getting-binary-base64-data-from-html5-canvas-readasbinarystring shows canvas.toDataURL("image/jpeg"); which will save the reduced photo.
The base64 String still has some size, so compression can be the next step.
http://pieroxy.net/blog/pages/lz-string/demo.html is a very good solution for compression, but then you have a blob - which can cause a lot of problems when store to a client database, see https://github.com/nolanlawson/state-of-binary-data-in-the-browser
My solution:
- HTML5 FileReader is used to select pictures from the local storage
- html img is used to show the picture, src comes from the FileReader as base64-String
- canvas is used to create and save the thumbnail
- getContext("2d");
- drawImage
- toDataURL("image/jpeg", 0.50); - uses the quality downsizing
The resulting base64-String from toDataURL is impressingly small.
http://stackoverflow.com/questions/27254735/filereader-onload-with-result-and-parameter shows how the inner function in the loop over the the imagefiles can be formulated as closures, then jshint will no longer put a mark on it.
Thursday, December 1, 2016
create and export pdf
Creating and exporting pdf as file or print output is a necessary functionality.
A first test with pdfmake from the browser with download of the generated pdf-file was very promising.
Some background is given in http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/
PDF.js is a pdf viewer for usage in the browser and in an app.
The printing of the pdf documents seems to be a little bit more complicated. There are various approaches working with cordova:
- pdfkit is a good library for generating pdf output and it will be testet first
- pdfmake is a wrapper around pdfkit which make it simpler to define pdf reports and it also provides the opportunity to use it in the client
Both solutions will be testet. The documentation so far lacks the printing of footers and of page-numbers, but I'm sure, there will be solutions.
The first usecase is creating a pdf file for the diary data of one day. To support that, a print icon will be supplied for the diary entry.
A first test with pdfmake from the browser with download of the generated pdf-file was very promising.
Some background is given in http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/
PDF.js is a pdf viewer for usage in the browser and in an app.
The printing of the pdf documents seems to be a little bit more complicated. There are various approaches working with cordova:
- the approach sarahgoldman/cordova-print-pdf-plugin prints pdf after conversion to base64 and communicates with AirPrint for iOS and Android Printing APIs
- the approach katzer/cordova-plugin-printer can print html-content from iOS, Android and Windows Universal apps
- create basic docDefinition als JSON
- add more data to the docDefinition with JavaScript-Statements
- create the pdf-File
You have to get accustomed to using the styles, but once you get it, it's very easy.
A challenge is using richt text from CKEditor, there are some html-tags in the text, so a conversion is necessary.
- <br> to /n
- <b> and </b> to a new paragraph with style strong
- list-header and list-elements have to be converted accordingly
On github there is an approach using the DOM for the conversion - seems to be promising. In https://github.com/bpampuch/pdfmake/issues/205 there is a discussion to this challenge and http://jsfiddle.net/mychn9bo/75/ shows a good approach.
As the diary app has various data like text, richt text and tables in the MongoDB and IndexedDB documents, it seems to be good to use a modular approach that generates the paragraphs for the pdf from the data-elements.
Subscribe to:
Comments (Atom)