Pixel and Font Screenshots
UI Analysis tool, evaluates controls like pixel spacing between controls(DIVs), alignment,
font size, color, text orientation, etc.
Business Problem
Currently there is no automated mechanism available to calculate the pixel spacing between controls to reduce the manual effort involved in image/web comparison.
Solution
PIFO Shots (Pi(xel)and (Fo)nt (Screen)Shots) helps in evaluation of pixel spacing between various elements present on a web page.
- Calculates pixel spacing between two controls
- Highlights font details
- Provides the screenshot of full page
Why is the solution unique
- One click solution for cumbersome pixel space calculations, time-consuming full-page screenshots capturing and grid overlay
- Considerable reduction in manual efforts and time with précised and accurate results
- Light weight tool, easy to integrate within the Chrome browser.
Features/BP diagram of the solution
Tool Design
- Browser Extension is a zipped bundle of files – HTML, CSS, JavaScript and Images.
- PIFO extension provides UI to a web page to perform actions. It contains the following
- A manifest File
- HTML file and corresponding CSS
- JS files
- Other image files
Architecture
- Background Page –JavaScript based, controls the behavior of the extension
- UI Page – HTML pages displaying PIFO UI with complete access to the DOMs, can invoke functions on each other.
- Content Script – JavaScript that executes in the context of the page has been loaded into the browser, making it as part of the loaded page. It exchanges messages with its parent extension to display red lines or font on the page.
Proof Points
- As per the client requirement on Redline Testing, the tool saves around ~3-4 hours per redline testing tasks on an average with around ~40 task on redline testing per annum. The tester is able test 12 grid and 24 grid layouts measurements.
-
It is used in
- Windows Consumer
- Windows for business
- Surface Consumer
- Surface Commercial