Blog: Posts from April, 2021

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Posts from April, 2021
Monday, April 19, 2021PrintSubscribe
BLOB Image Preprocessing and Glyphicons

Release 8.9.18.0 brings about the client-side Image Preprocessing and gets rid of the glyphicons. Your apps will work faster than ever.

The new framework may require a few minor changes to your app if you do have the bootstrap-based content pages. Switch to the Material Icons or keep the Glyphicons when you rebuild your app with the new release.

The new major features makes possible the preprocessing of submitted images directly on the client device. Developer can now force a particular size for the BLOB, the file format, and the image scaling method without writing a single line of code.

 
This release introduces the following features and bug fixes:

  • (Universal Input) Keyboard navigation between the fields presented in multiple columns of the category with the floating has been greatly improved to take into account uneven field distribution, visibility, and read-only state of inputs.
  • (Touch UI) Rapid clicking on the drop down icon of lookups will not cause the content selection
  • (Touch UI) Dragging the file into the Blob upload area will set the focus on the blob field.
  • (Blob) Image Preprocessing is now supported on the BLOB data fields.
  • (Touch UI) Zoom animation of forms is not relying on the transitionend event for processing, since this event may not fire at all times. The framework is using the timer instead to reset the "ready" state of the app.
  • (Touch UI) The most up-to-date backup True Type font for Material Icons is included. The release date is August 31, 2020. Modern browsers use the "woff2" fonts presented in regular, outlined, rounded, and sharp styles when specified in ui.theme.icons option in ~/touch-settings.json. The default icon style is "regular" (filled).
  • (Touch UI) The latest release of the Material Icons is included.
  • (Display Flow) Simplified the styling of icons in the H1-H6 tags.
  • (Bootstrap) All page templates available in the app generator are now using <i class="material-icon">name</i> icons instead of the legacy glyphicons.
  • (Client Library) Removed legacy glyphicons from the framework. If your app uses the bootstrap pages with the glyphicons, then make sure to follow the migration instructions.
  • (App Gen) The version of the app generator is written to the DataAqurium.Project.xml file to ensure automatic loading of new scripts when the app is rebuild with the new release of the generator.
  • (App Builder) Display flow designer is added to the projects.
  • (Framework) Method $app.jsExt() returns the "js" extension with the application version suffix
  • (Display Flow) Calling $app.display('designer') will activate the display flow designer in the current page.
  • (Display Flow) Method $app.clientRect() will return the bounding client rectangle of a jQuery object or DOM element.
  • (Display Flow) If the virtual page is enhanced with the data-content-framework="display-flow" and data-editable="true" attribute, then the Display Flow live designer is loaded. Content Hub uses this technique to load the designer in live pages.

Labels: Release Notes
Saturday, April 17, 2021PrintSubscribe
Image Preprocessing

The primary focus of every mobile device maker is to deliver a camera that beats the competition. Year after year the consumers are getting better photos with an unbelievable level of detail. Large high resolution images have huge implications for the business app developers since the files need to be transmitted, stored, and processed at an increasing cost and often without a significant benefit. 

Touch UI introduces a simple and powerful set of image preprocessing capabilities that help enforce the image size, format, and compression quality for any BLOB field. The processing is performed entirely on the client and works both in online and offline modes.

Image Size

Apply the tag image-size-WxH to a blob field in a view to ensure that the submitted images will have a fixed size. For example, entering image-size-640x480 in the tag property of a BLOB field in the data controller views createForm1 and editForm1 will ensure 640x480 images. Also only the image files will be accepted and any other types of files will be rejected. 

Mobile browsers and web views provide an option to take a photo with the camera. Photos taken with the device camera will also undergo the pre-processing if the image-size-WxH tag is specified.

The original 4032 x 3024 image in the screenshot below was taken with the Pixel 4XL and occupies 3.43MB of storage. The preprocessing has reduced the image to 640 x 480 pixels and will require 768 KB on the hard drive.

Fit vs Cover

If the large image does not perfectly scale down to the specified size, then the image will be reduced to fit in the specified boundaries with the horizontal or vertical bars (gaps) around it. Developers can change the default image background color from white to yellow by tagging the blob field as image-background-yellow.


Use image-background-transparent tag to have the transparent bars instead. The standard color names 
and the hexadecimal values are allowed when specifying the background.

Tag image-large-cover will prompt the framework to scale the large image down to cover the entire area without gaps.


If the smaller image is provided, then it will be centered on a solid background.


Clipping Large Images

A large image can be reduced to the requested size without the “filler” bars. Tag the blob field as image-large-clip to ensure that no file is larger than the specification. Large images will be reduced and clipped. The smaller images are accepted as-is by default. 

Image Quality and Format

Preprocessing will draw the original image on the DOM canvas. The default binary serialization format of the canvas is PNG with the 92% compression. The latter cannot be changed. Apply the tags image-format-jpeg and image-quality-50 to the BLOB data field and ensure the standard JPEG image format with the 50% compression. 

Rejecting Image Upload

Image size specification can also serve as a client-side image filter. Tag image-small-reject will reject any image that is smaller than the specified size. Tag image-large-reject will reject the larger images instead.

If you want to enforce a specific image size 320 x 320, then apply these tags to the BLOB field in the data controller views:

image-size-320x320 image-small-reject image-large-reject.

The following combination of tags will ensure that all images are uniformly confirming to a particular size requirement and do not have the gaps:

image-size-640x480 image-large-cover image-small-reject
Friday, April 16, 2021PrintSubscribe
Say Goodbye to Glyphicons

 Touch UI has a long history. The framework was introduced in December of 2013. It was built on top of jQuery Mobile and represented our attempt to provide a “mobile” presentation style for apps created with Code On Time.

Here is the sample screenshot from that time:


The graphics of jQuery Mobile were based on a small subset of Glyphicons that was contributed by the namesake company in the SVG format. The extended set of 250 icons found their way into Bootstrap 3.0. We have integrated Bootstrap to provide the means of creating the content pages in Touch UI and promptly upgraded the framework to use the corresponding web font.


Glyphicons continued to be a part of Touch UI framework up until now.


Touch UI of today gets its looks from the Material Icons library and can be extended with an additional icon set when needed. The new framework works equally well on the devices driven by mouse and touch. It supports modern web browsers on any screen size. It can operate in native mode and as a part of a Progressive Web App.


Starting with the release 8.9.18.0 the glyphicons are not the standard component of Touch UI. New projects will not have these icons included. The legacy apps will retain the font in the ~/app/fonts folder but will require one of the following after being re-generated with the new release:

  • Replacing the references to the glyphicons with their  counterparts found in the Material Icons library.
  • Copying of the single CSS file from the code generation library into your own project.

The replacement of icons is simple. Here is how we did that for a few icons found in the current iteration of https://my.codeontime.com.


Either keep the span element of the icon definition or have it replaced with i tag. Replace the CSS classes in the icon definition with a single class material-icon. Enter the icon name between the opening and closing tag.


If you prefer to continue using the glyphicons, then copy and paste the glyphicons.css  file from the code generation library in [Code OnTime]/Library/Legacy/glyphicons folder into ~/app/css folder of your application. Run the app generator and click the “Locate” link below the list of projects to go straight to the library folder.

If you want to start using the glyphicons in the new projects then copy the other two files in the same folder and paste into the ~/app/fonts folder of your application.

Glyphicons are not widely used in the apps created with Code On Time. You may find the references to the icons in the dedicated login page of the app or in the content pages based on the bootstrap. The new code generation library is now referencing the material icons instead. This reduces significantly the size of the framework CSS files and provides a faster first paint in the browsers and web views.

The content pages of the near future will be based on Display Flow technology. The new presentation technology is shared with the Kiosk UI and will have its own Live Visual Designer. You will see it in action in the new community forum and in the support help desk. Materials Icons are integrated in the Display Flow and provide an excellent replacement for the Glyphicons.