SCADA Developer Network

We have been working real hard recently as we have been adding features due to growing users’ demands. One new feature is number formatting has now internationalized and can be localized to any country’s commonly used numeric format. And we realized most of the time the commonly used numeric format is following the currency format in that particular country.

The table showing some of the countries that having different currency formats, it is quite surprising to see all kind of possibilities and combinations. So the number formatter need to be extremely versatile almost like a spreadsheet custom formatting. So, is that mean the new number formatter parser will be bloated? No, totally opposite, despite we are adding in more feature, we also working hard in stripping down the code in order to avoid it from growing proportionally to more and more features. Moreover, we even speed up the code execution from every possible aspects.

We have been and still using many external open source libraries like JQuery, and we think it’s time for us to contribute back to the community whenever possible. So we are now publishing this JavaScript Number Formatter to Google Code Project.

Nobody cares to compress raster image like jpg before sending over the email, as it’s widely known that those raster images are well compressed and can’t be compressed any further by any file compress utility even using the powerful 7zip. It’s true that file compress utilities can’t do any good to raster images but simply adding unnecessary steps for email recipient to un-compress before viewing, or worse, making the file size even bigger.

However, there are utilities that specially designed to compress raster images. First is pngout.exe for png format and second is pagespeed_optimize_image.exe for jpg format. Its download rate is surprisingly low after uploaded since Apr 21, 2010, only 770 downloads as of time of writing at Jun 14, 2011. Yes, not many people know that jpg file can be further compressed, at least slightly. The good news is they both are free, but the bad news is they both are command line utilities that require lots of key strokes to make it work. And the filename for pagespeed_optimize_image.exe itself seems need to be optimized? Anyway this article will show the way to integrate Windows Context Menu so compressing these images is a just a matter of right click away.

Context Menu for Image Compression

Associating a command for right click’s ‘Context Menu’ with certain file type can be done via Windows File Explorer, click on “Tools” and browse for “Folder Options …” then you will get the “Folder Options” popup. Click on File Types tab. Then associate the targeted file type with desired action. The steps are illustrated in this Command line association except that we are going to associate the action with image compression utility. For now we shall download pngout.exe and pagespeed_optimize_image.exe and store both of them into “My Picture” folder before we proceed further.

Page Speed Image Optimizer

Google Page Speed documentation implies that the optimization uses loss-less compression technique(s), although we could not point out the quality difference between before and after compression, but we need to alert user that it will definitely remove image meta data like IPTC or EXIF info. So be careful before performing any batch operation if you want to keep the camera information intack.

Continue from “Folder Options” pop up, clicking on “File types” tab, browse for *.JPG file type and click on “Advanced” button shall lead to another “Edit File Type” small pop up. We can see that by default there are two actions associated to it, namely “Open” and “PrintTo”. We are going to add one “New” action calls “Optimize”.

Click on “New” will invoke another small pop up which allows user to enter the Action name for display at Context Menu. And also the command line that shall execute upon action. Enter “Optimize” into Action field and copy and paste the following command line into the “Application…” field:


"C:\Documents and Settings\Administrator\My Documents\My Pictures\pagespeed_optimize_image.exe" "%1" "%1"


PNGOUT

Since PNG format is a loss-less format, so optimizing the file format also must conform to this principle. And PNGOUT can do this work very well, although it takes a little longer to compress since it needs to try out all possible strategies in compressing the targeted png file.

We just need to repeat the whole steps like above after browsing for PNG file type, and enter the following command line into the “Application…” field:


"C:\Documents and Settings\Administrator\My Documents\My Pictures\pngout.exe" "%1"


Conclusion

The result is a pretty friendly working environment, you may now right click on either JPG or PNG files to optimize the images, or even highlight a few of them before clicking optimize to perform batch operation… What?!! you can’t find the File Types tab? and you are Vista or Seven user? hmm… Microsoft wasn’t too kind to you, but you are lucky today as you can download this free utility that requires no installation that can do the file type association job like above.

And what if you need to keep the original copy? you can create another extra action call “Optimize As”, where the command line for Page Speed is:


"C:\Documents and Settings\Administrator\My Documents\My Pictures\pagespeed_optimize_image.exe" "%1" "%1.min.jpg"


and the command line for PNGOUT is:


"C:\Documents and Settings\Administrator\My Documents\My Pictures\pngout.exe" "%1" "%1.min.png"


The output filename is a little cumbersome but it does the work. Last tips: you can do a triple click on the command line to highlight them for copying. Let us know by posting a reply if you have more requirments or tips.

When you encounter any problem during development, there are few things that you could do to elaborate your problem before contacting technical support. One is producing screenshots, second is to reproduce the problem in a new project and send the test case over.

There are advantages by attempting to reproduce the problem in a new project or test case:

• You may find that the new project is working but not your existing project so either you or others can check out the differences.
• You might end up find out the solution by yourself while trying to reproduce the problem.
• You can remember the steps better, and figure out what exactly causing the problem and describe only the necessary steps to technical support.
• The newly created project is normally smaller hence easier to send as email attachment.
• You don’t have to send out the existing project which might contain P&C information and hence protect your privacy.

Project or test case needs to be compressed and send as email attachment, but it’s not quite possible if the project zip archive contain any *.exe or *.js files as it may be blocked by many types of mail server. Fortunately this can be easily circumvent by using 7zip format instead, 7zip compression format is highly recommended not only it can bypass gmail server checking (as of time of writing) but also produces very much smaller compressed archive, it could be as much as 3x smaller in certain targeted source file type when comparing ordinary *.zip to *.7z file format.

In any case that the compressed file archive could not pass through the mail server, the best practice is to add a disabled extension to the exiting file. For instance, project.zip shall be renamed to project.zip.dsb, or simply add a trailing underscore at the end project.zip_ or project.7z_ for 7zip format.

One of the good thing about 7zip is it doesn’t need to know the compression file format based on the file extension in order to extract. So the mail recipient (support team) doesn’t even need to put back the correct extension before extracting the email attachment. Oh yes, 7zip program is one of the must have utility that also works with many other common compression formats like zip, rar, gzip, tar and etc.

Screen shot showing unknown file type (with additional underscore) can be extracted by 7zip.

Also try to describe the steps to produce the problem. Some works can be achieved with many approaches, some problems only occur in specific steps. As such clearly describe the steps in producing the problem is important.

Last but not least, please specify the expected outcome, avoid to use ambiguous terms like “the outcome is unpredictable”, “the result is screwy”, spell out what was predicted, describe what’s the expected behavior.

SVG graphic files that produced by Inkscape can be further optimized by removing some editing data and spaces which will be ignored by or have less impact to the targeted medium, most of the time, browsers. Now you may do that easily by choosing “Optimized SVG” file type upon “Save As” (Ctrl+Shift+S).

Another pop up will be prompted for user to choose what to be optimized or even compromised. The options should be chosen and tested according to what have been used, but one option that you should *not* choose is the “Enable viewboxing” which will disturb image sizing/positioning for browsers. Our brief tests also show that the precision should not go less than 3. The last option for Indent should always set to ‘None’ since nobody will care to hand code SVG file as Inkscape has done a lovely job for us.

The original SVG file which is optimized should be saved as another file and not to replace the original file. Optimization should only be done before deployment, because optimized file should not be edited as saving it directly (Ctrl+S) will put back all configuration data which was considered redundant to the targeted agent, in most contexts referring to browsers. Also, if you haven’t known, you should only remove old and unused effect/filter by clicking “Vacuum Defs” before deployment.

Do post a reply if you have more tips in optimizing SVG files.

It seems that all modern browsers are ignoring the non-proportioned scaling for raster image in SVG file. If you use Inkscape to resize an embeded/linked raster image in an SVG file, you will find that all browsers will render the raster image in the same aspect/dimention ratio as compare to the original image. Apparently only Inkscape and ASV could interpret non-proportioned raster image scaling.

Comparison was done between Inkscape and browsers in order to elaborate the problem, the IntegraXor logo was used as the raster image, and the blue frame which is the SVG element serves as the border line. The top left image is the original logo, the top right image has been resized in width which wasn’t interpret correctly in browsers, and the medium left image has been resized in height which is also wasn’t inperpreted correctly in browsers. Only the medium right image is rendered correctly in browsers when the image is resized with original aspect ratio.

Last but not least, the bottom image is also rendered correctly in browsers, whereby a trick has been apply by grouping the raster image and the SVG element before the dimension ratio is distorted. In another word, to circumvent this problem is to group the raster image with other SVG element and then scale it together. Otherwise the best thing to do is to avoid scaling or at least scale it in proportion by holding down Ctrl key, in ensuring WYSIWYG in browsers’ display.

The browser shown in the screenshot is Firefox 4.0. However all other browsers also affected, including IE 9.0.8112.16421 RTM(KB982861), Google Chrome 10.0.648.151, Safari 5.0.3 (7533.19.4) and Opera 11.10 Build 2092. Image showing aspect ratio will be always preserved by browsers.