BlueTap — The Ultimate Virtual-Reality(VR) Keyboard

This is one of my IBM patents on a VR keyboard published recently that does not require the users to carry a keyboard device and allows to input your information even when you are in motion. Forget Google Glass, even the experience of Apple’s much rumored Apple-VR can multi-fold with this mother-of-all VR keyboard system and approach.

Back in 2014, while preparing my slides for one of my earlier seminar talks on accessibility Rediscovering Accessibility for Future Tech (you can read the linked post here https://www.linkedin.com/pulse/20140917025440-9377042-rediscovering-ccessibility-for-future-tech-everyone-is-affected), I hit upon the challenges and available solutions that were present for data input systems. The concept of mobility in devices has transcended beyond the scope of marginalizing telephony and computing, and has taken a shape in the form of wearable devices. However with advent of new technological invention in any field also gives rise to new challenges. In the smart wears one of such challenges is input of information to the associated system.

One such challenges was that — modern technologies are enabling people to interact with systems in distracted environments, while in-motion and while multi-tasking giving raising to its own set of problems which were not known in PC era. With the rise of smart-wearable devices, mobile computing and frequent use of access of information from cloud while on the move, one of such challenges is input of information to the associated system, as the systems are getting less in size and tending towards smaller displays. The recent trends in mobility domain, indicates the growth in the smart wearable devices. We are witnessing a time when every technology company is trying their best to own their part of innovation in Smart wears such as smart glass, smart watch etc. and this field aligns with IBM’s one of the currently prioritized strategies — i.e. mobility.

In most of the existing smart eye-wear device (e.g. Google Glass) , the input mechanism is typically via voice. While this is great for provide commands to the device, it is not still great for input longer texts. Again voice based input mechanisms are difficult to use in noisy and distracted environments. Also language localisation and accent issues adds to the list of issues in using voice effectively. Moreover when it comes to the productive work like drafting emails, writing a piece of programming code, voice-input method is not as effective as a standard keyboard based input mechanism (mostly found in PC, laptops, mobiles and missing in smart eye wears).

Usage of a physical keyboard or a secondary tooth enabled keyboard is possible but it requires the user to carry a keyboard wherever he goes. But even if the keyboard is carried, there is no guarantee the user will have a flat surface to place the keyboard or if he can comfortably use the keyboard while on the move. Imagine a person who is waiting on a busy bus stop and wants to reply his office email.

A set of new hardware are available in the market (e.g. Fin, Ring) which act as supplementary wearable to trigger pre-defined commands and provide limited input of information via finger movement and hand gestures over air. However none of them are effective enough to provide a keyboard solution that can be used for easier input of textual information into wearable device like a smart –eye wear or smart glass.

Also when it comes to input longer texts on a smart glass/eye-wear, there is absolutely no reliable method/system exists as of today which can work for users on the move and in distracted environments.

So with these problem statements in mind, I made a lit of dimensions of goodness —

  1. Effective even in typing-in long text into smart eye-wear system — can help user more productive. The user can input long emails or simply use smart-eye-wear to write a program or code even on the beach.
  2. No cognitive load on user to remember pre-defined commands/key names /gestures etc. (unlike the wearable rings based command trigger systems as detailed in prior art section)
  3. Can be used effectively while on the move & distracted or multitasking state (standing in que, at bus station, while having dinner, while driving, walking, in home while watching TV)
  4. No need for any extra or supplementary hardware required along with smart-eye-wear. No need for the user to carry separate input devices.
  5. A method that uses age old natural human habitual way of processing information through fingers
  6. Explore the new way to have a device free of any physical input accessories

With these pointers on the goodness, I iterated over a conceptual design of a Virtual Reality enabled keyboard for effective data input system (named it BlueTap) with many innovative approaches in a pattern of gestures that can be used in a augmented virtual space and was filed as a patent by IBM. BlueTap is basically an Input keyboard system with a set of gestures and methods that uses both fingers-tips & finger-joints, as a keyboard for smart eye-wears and a set of gestures to control the human-system interaction in the real life 3D virtual space using this keyboard system.

BlueTap is about an approach that uses natural human gestures in hand that are derived from the age old human cognitive approach of counting through fingers. This also focuses on the idea that there should not be any need for the user to carry separate input devices for typing long texts into the device. This helps the device to act as the independent device and not a supplementary device to some PC, tablet, mobile handsets. The user can input long texts any where any time – on the road, walking, in home while watching TV. This is an approach that allows to explore the new way to have a device free of any physical input accessories.

The idea uses a overlapping of a graphic/icons over a real camera stream on the screen is a known technique. Also recognize finger on a hand , finger tips and finger joints is a technically feasible technology using OpenCV , Kinetic type technology. Mapping of the alphabets and making visible these as graphic to finger tips and joints over glass screen on both hands in real time.Analyzing the finger movements to infer the “tap”, “double tap” and “swipe” gestures. This is also about a mechanism to sequence a string of inferred gestures to provide a typical typing kind of input experience.

The BlueTap proposes method and an effective and scalable interaction paradigm that  solves the issue of input of texts into a smart eye-wear in an effective manner even when the user is on move and is in distracted or noisy environments and there by making him more productive by allowing him  to use his fingers tips and joints as the keys to input the long texts effectively — which the user can do anywhere any time and does not need to carry a supplementary device (a key board or a phone/tablet with a virtual keyboard on it.). The invention can be used in digital smart eye-wear devices (e.g. Google Glass, “Jet” by Recon, Evena’s Eyes-On Glasses) in mostly consumer, enterprise and healthcare domain. This can be refined to integrate with in any future smart eye-wear product to provide quick and comfortable input mechanism to the device.

The interaction paradigm in BlueTap allows in run-time dynamic switching between different views (a view that can represent but not limited to any language and nature of selected keyboard layout ) and operation modes double hand as well as single handed keyboard operation, in case the user is busy in doing something (e.g. holding coffee cup, having dinner, driving, writing etc. ) or is having any disabilities of not having one hand.

BlueTap is more than just being a keyboard system, as it allows user to interact with eye-wear system in a new way – like interacting with an application menu of the system to open any app, or making a call to any phone number by enabling a dial pad or doing some calculations via an calculator interface displayed by BlueTap.

A set of unique gestures are also part of this system that allows to control different mode/view of Blue Tap, namely –

  1. Fist Gesture – Toggle among keyboard views such as aplabet and numeric or symbol keyboard views.
  2. Palm Flip & Back Gesture – To toggle between “keyboard” and “app menu” views
  3. Thumb Down & Up Gesture – Toggle between “enable” or “disable” state of BlueTap
  4. Thumb slide across Palm gesture – To slide between single handed and double handed keyboard modes.
  5. Double Tap on finger Gesture – Toggle caps lock state of keys.

BlueTap implements a novel way to super impose characters/symbols over finger-tips and finger-joints on the eye-wear view port and renders them in real time (through virtual reality technologies) to make them look natural tattoo kind of look n feel. Also the whole method of using finger joints as keys where virtually the key characters are visually rendered to create virtual visible keys, the tapping and double-tapping (to change caps lock) is novel in itself.

As far as implementation is concerned, BlueTap supports different technologies for finger detection — e.g. including but not limited to infrared sensors / thermal imaging based detection, body magenetism, camera visual image processing, additional wearable based solutions and/or any other technologies that can be utilized to detect finger tips and joints in 3D space.

BlueTap supports both or even any of the single hand to enter information. The user can easily swap between these single or double modes. Along with if the person requires left hand to type in he can move from double to single hand.

Along with this this is beneficial for the physically challenged person by providing an accessible way for data entry.

Different operational modes of the BlueTap are :

  1. Double Hand State (Default)
  2. Single Hand State

The double hand mode of the keyboard before the gesture made by the user to toggle into a single handed operational mode.

BlueTap also supports views like an Application menu or Home-screen, where the user can trigger different application for the eyewear. In such mode, the application icons appear instead of the alphabets. The user can easily pick and select the app to run.

The keyboard layout is flexible as well as dynamic to switch between various views, one such example is the user can open a numeric view or even a dialing interface.

Specific new sets of palm and hand related gestures are part of the BlueTap keyboard, that allows to quickly move between different views as well as typing mode.

BlueTap is comprised of the following key components which are involved in the generation of the virtual keyboard over human palm:

1.  Activation/Deactivation of BlueTap :

There can be a physical switch/button or via voice control or via launch of an app can trigger the activation or deactivation of BlueTap. This is simply switching ON/OFF of the BlueTap system.

2. Enable/Disable of BlueTap:

If the system is active, the user can disable the hand and finger monitoring by the BlueTap system. This is similar to enable/disable of virtual keyboard in typical mobile devices.

Different Modes of BlueTap:

1.      Keyboard Mode – This is the default mode of BlueTap System. This allows to render a keyboard over user’s palm.

2.      App Menu Mode – This mode renders the different app icons of the eye-wear device on the palm of the user so that the user can tap to trigger any app.

Note: Optional modes that might be introduced – for example :

3.      Call Dialer Mode – a call dialer pad layout will be rendered on the palm to allow the user to dial any number to make a call or similar activity.

4.      Calculator Mode – a calculator interface will be rendered so that using it calculation activities can be easily carried out by the user.

Different Keyboard views available are:

  1. Alphabets View
  2. Numeric/Special characters view
  3. Typing Email keyboard view
  4. Coding in HTML keyboard view
  5. Caht keyboard view with smileys
  6. Different keyboard views for different languages.

The BlueTap keyboard patent details:

Publication number: US 20170090747, Filed: Sep 24, 2015, Publication Date: Mar 30, 2017, Inventor: Samir K. Dash (Bangalore) , Application Number: 14/863,832, Assignee – International Business Machines Corporation (IBM)

Samir Dash is working as Associate Design Director at IBM based in Bengaluru, India. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.

 

Advertisements

BlueSalt — The New Patented Data Encryption Security System for Making Data Centers Fool-proof

This is the story about my patent titled “BlueSalt Security” owned by IBM, an invention in data security that is about an unique strongest ever encryption system for sensitive data like that of financial, government or federal as well as industrial enterprises, where it binds the data to environment in a way so that even in case of war, terrorist attacks or riots when the data-centers are captured physically by the enemy, the data can not be retrieved back.

 

This is the story about my patent titled “BlueSalt Security” owned by IBM, an invention in data security that is about an unique strongest ever encryption system for sensitive data like that of financial, government or federal as well as industrial enterprises, where it binds the data to environment in a way so that even in case of war, terrorist attacks or riots when the data-centers are captured physically by the enemy, the data can not be retrieved back. This is also designed for modern IoT (Internet of Things) as well as BYOD (Bring Your Own Device) kind of setups. Another important aspect is that BlueSalt encryption does not need to store the key used in the encryption process for decryption and getting the data back, unlike traditional cryptographic approaches where the key is stored in crypto-processors and similar methods, there by making it the most secured data encryption approaches.

In current age of microprocessors, the information security is critical. Specially in case of financial institutions/banks, research centers & labs, high profile data-centers, high confidential enterprise, military, government locations where high confidential information is stored, it becomes a necessary to ensure highest level of security to be implemented to avoid any cyber-attack, theft of information.

Many organisations have adopted multiple security approaches, starting from physically securing the data-centers to adding firewall and using high level of encryption to the systems in order to protect the data. Some examples are self-destruction of data on multiple failed attempts in the authentications process. Higher grade of encryption used in storage and databases are very common in IT services industry. Similarly in IT industry also isolating critical projects with higher degree of client sensitive data, are carried out in isolated physically secured location or (e.g. forming Odessy for projects ).

However all authentication process has some limitations — for example: in case the hacker gets hold of the physical system with passwords used at multi levels he can access the information. Also during the time the information system comes under terrorist attack, or during the time of war or riot etc. the physical systems can be captured and moved to another location and environment to decipher the information stored.

To improve security to the highest degree in cryptographic methods and approaches, IBM BlueSalt allows to bind the encryption process to system’s environment and state under which it is supposed to be running. IBM’s BlueSalt makes use of system’s built in as well as additional set of external sensors that are either part of the local environment or part of remote network or under Internet of Things (IoT) kind of framework, to generate salt for encryption process.

From history there are plenty of real-world examples are available on the physical capture of devices containing sensitive information. BlueSalt makes it impossible to retrieve the information in such cases. Specially in case of modern day scenario of data centers it is more complex. Many data centers contain easy-to-exploit physical vulnerabilities that don’t require hacking into the network. Also we no longer live in an on-premises world with a defendable perimeter. According to Gartner, over half of information workers report using three or more devices for work. The topic these point to such dimensions — Data centers are a bit unique when it comes to security ..including physical security , In Physical security: The overlooked domain , “With today’s complex threats, physical security has unfortunately taken a back seat”.

For such scenarios, BlueSalt tries to bring a solution by focusing on goodness such as — It would be really strengthen the security of the information if the system’s encryption of data does not only depend on passphrases or key files that are generated from some password, pin. The information should be bound to a particular environment or state so that any deviation from that state will fail in decryption of the data, this would mean that by carrying out storages or the whole system that contains sensitive data cannot be decrypted in a different environmental conditions. An attacker could not simply fake a “salt” value just by knowing passphrases/key/PIN associated with encryption method, as the salt will be based on environmental variables.

Under BlueSalt method, once an encryption is made considering the parameters of the controllable (surrounding temperature, luminosity, Bluetooth/infrared/wifi signatures, IP addresses/passphrase/bio-metric data etc. ) and non-controllable (GPS or geo-location co-ordinates of the system , direction/orientation of the system etc. ) parameters results in a higher level of encryption where any deviation in the environmental change (e.g. increase in room temperature due to fire, physical orientation, direction of the system changed even in the same location, or system being moved to a different location, or absence of any of the running Bluetooth, infrared or wifi signatures) will result in a failed decryption of information and additionally it might take precautionary measures (e.g. shutting down the system or inform nearby security centers etc. )

The salt value generated through BlueSalt can be used in any existing Cryptography technologies like SHA-1, Blowfish etc. where there is support for creating keys for encryption. IBM BlueSalt can even be simply used in a system to encrypt the hard-disk or databases salt value generated. And when ever the salt value does not match the decryption fails.

In cryptography, a salt is random data that is used as an additional input to a one-way function that hashes a password or passphrase.

In cryptography, a salt is random data that is used as an additional input to a one-way function that hashes a password or passphrase. BlueSalt Encryption is a method that uses one or combination of many parameters of the system’s surrounding environment and state in-order to create a salt to be used in the encryption key. Some examples of the parameters regarding environment is collected via the enabled sensor are:

1. System position in 3D space including direction — typically can be collected via the sensors like gyroscope, accelermeter , compass and /or any other system orientation, state detection mechanism that can point out the system in the 3D space.

2. System location — Latitude &longitude and or any parameter which can be obtained via any indoor location technology or standard GPS or geo-location and/or similar technologies.

3. Available connection points signatures — Surrounding Bluetooth, wifi, NFC, infrared or any other devices signatures available in the surrounding.

4. Temperature — surrounding environment temperature condition values.

5. Pressure and height from sea level — barometer data

6. Light luminosity & humidity etc. of the surrounding

7. Motion data — accelerometer readings

8. Proximity sensor data

9. Biometric data — any biometric information of authorised person(e.g. face recognition/eyelid recognition /fingerprint)

10. Ip address of the system — both internal / external etc.

11. Custom value — passphrase/ pins etc.

12. Any other environmental or system state (physical / virtual ) parameters.

The salt generated is a function of one or any combination of these parameters, which is used in the data encryption process. At the time of decryption of data again the salt is generated in the same process and is used to decrypt the data. As long as all the parameters are same, the decryption becomes successful, else it will fail.

Unless the originally set salt at the time of encryption is matched at the decryption process the system does not allow the decryption process to be carried out or the decryption process fails resulting out the meaningless decryption.

BlueSalt is also designed for modern IoT (Internet of Things) as well as BYOD (Bring Your Own Device) kind of setups. Another important aspect is that BlueSalt encryption does not need to store the key used in the encryption process for decrypting and getting the data back, unlike traditional cryptographic approaches where the key is stored in crypto processors and similar methods, there by making it the most secured data encryption approaches.

In the following diagram , there are two different systems in different environments. So the salt generated Salt A is not same as Salt B. Even if just one of the parameter is changed that will impact the salt generated and will result in failure in generation of proper decryption key.

BlueSalt based cryptographic eco-system in any network

The BlueSalt method binds the information to it’s original environment and state. If such encryption is enabled, then two systems even in the same location will have unique and non-replicable encryption keys even if the user provided pass phrases are same.

(FIG: Conceptual diagram showing data encryption through BlueSalt.)

In such cases typically, all respective systems can use their own environmental variables to create salt for encryption and decryption process which will be unique and will be impossible to replicate in another system or environment. This is shown in the following figure where SaltA and SaltB are unique.

(FIG: BlueSalt implemented network environment.)

Alternatively a common shared salt value is created using parameters from different systems in the network. The following diagram shows that scenario:

(FIG: BlueSalt implemented alternative network example)

BlueSalt based cryptographic eco-system in a network with IoTs

In IoT (Internet of Things) scenario, various distributed sensors (shown as sensor units in the diagram below) can be used to form the ‘salt’ for the cryptography. For example — apart from using a target system’s local environment and state, remotely placed sensors can be placed to strengthen the salt value. In such a situation a BlueSalt based cryptographic eco-system can be formed, where multiple systems and their respective environmental and state related parameters can be collected and combined to form a salt for cryptography. This kind of eco-system can help in managing one or multiple systems with sensitive/confidential/critical data by multiple stakeholders.

Note: in this kind of eco-system different sensor units and data-centres may operate in same or combination of locations in intranet(local network) and cloud(remote network).

(FIG: BlueSalt implemented IoT)

BlueSalt enabled theft prevention framework

BlueSalt method not only helps in creating the salt for the cryptography so that the system ( storage or database) is encrypted, but it can also be used to define a framework that can prevent data theft.

In such a framework, the failed attempts of accessing the data from the system initiates some predefined (by system admin) preventive actions such as showing warning, or self-destructing the system data, or auto sending out SOS messages to designated security officials etc.

How BlueSalt works?

To improve security to the highest degree in cryptographic methods and approaches, BlueSalt allows to bind the encryption process to system’s environment and state under which it is supposed to be running. BlueSalt makes use of system’s built in as well as additional set of external sensors that are either part of the local environment or part of remote network or under Internet of Things (IoT) kind of framework, to generate salt for encryption process.

In cryptography, a salt is random data that is used as an additional input to a one-way function that hashes a password or passphrase. Under BlueSalt method, once an encryption is made considering the parameters of the controllable (surrounding temperature, luminosity, Bluetooth/infrared/ wifi signatures, IP addresses/passphrase/bio-metric data etc. ) and non-controllable (GPS or geo-location co-ordinates of the system , direction/orientation of the system etc. ) parameters results in a higher level of encryption where any deviation in the environmental change (e.g. increase in room temperature due to fire, physical orientation, direction of the system changed even in the same location, or system being moved to a different location, or absence of any of the running Bluetooth, infrared or wifi signatures) will result in a failed decryption of information and additionally it might take precautionary measures (e.g. shutting down the system or inform nearby security centers etc. )

Typical BlueSalt encryption scenario:

Typical BlueSalt decryption scenario:

Ideally the goal of BlueSalt is to make it impossible to retrieve the data unless all the conditions are met. So the optimum usage of BlueSalt does not store anything in the system . However alternative data recovery option can be used if needed. This recovery option uses multiple encryption levels and storing encrypted version of key in system. The following diagram shows the encryption supporting an alternative environment for data retrieval:

And here is how the decryption is supported for alternative environment :

Hopefully, with BlueSalt, the new age data centers, BYODs and critical data storages can be made more safe and secure by adding additional layer on security.

This idea/invention is patented in US, India and internationally by IBM. The patent details of the invention:

BlueSalt Security — US9590957 A1,  Issued on :7 March 2017, Inventor: Samir Dash, Assigned to & Owned by: IBM

Samir Dash is working as Associate Design Director at IBM based in Bengaluru, India. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.

The Smallest Virtual Keyboard That Can Fit Into Any Wearable

The story of  smallest virtual keyboard that will make the gadgets like smart eye-wears, smart-watches independent in data input without the need for the user to carry a secondary data input mechanism.

With the advent of evolution of semiconductor technology, digital devices have becoming small in size. Keyboard layouts have improved over time to cater to the need of the new age devices with ever shrinking smaller display size. But none of the keyboard solutions/concepts is useful for smart devices like wrist wears, fitness wearable-devices, and watches. This is mostly due to lack of sufficient real estate in these slimmer and reals estate constrained devices.

(FIG : With the advent of evolution of semiconductor technology, digital devices have becoming small in size.)

The major challenges we face while designing UI interaction for screen real-estate constrained devices is that, when we use touch enabled UI, we do it via our finger tips and pads, which there by requires a minimum size of UI elements/buttons on screen that are expected to be tapped or touched to trigger some actions. While using touch enabled devices, standard recommended minimum touch area is defined to ensure the UI area is usable.

For example Apple recommends a minimum target size of 44 pixels wide 44 pixels tall on a 3.5 inch display at 164ppi. Similarly in the Windows Phone UI Design and Interaction Guide (PDF), Microsoft goes further and suggests: a recommended touch target size of 9mm/34px; a minimum touch target size of 7mm/26px; a minimum spacing between elements of 2mm/8px; and the visual size of a UI control to be 60-100% of the touch target size. Nokia’s developer resources suggest that touchable interface elements should not be smaller than the smallest average finger pad, that is, no smaller than 1 cm (0.4″) in diameter or a 1 cm × 1 cm square.

So on an average for usable UI control the minimum size is around 44point (pixel free unit) and is approx. 7mm x 7mm area. When a keyboard layout is designed, this minimum area of touchable surface on UI matters the most, there by restricting us from using a keyboard based input system on small or slim wearables like smart watches, wrist wears or any other device that has limited real estate.

During past few years many cell phone device makers came up with multiple approach to deal with small UI area while designing keyboards on smaller devices. One example is T9 keyboard.

(FIG: T9 keyboard is an example of using unique interactive method for a keyboard for small real estate.)

When iPhone attempted providing QWERTY type keyboard, it used multiple views of keyboard to accommodate all required keys . This was followed by Android and almost all touch enabled phones.

But The evolution of devices resulted into even smaller devices with minimal possible touch enabled displays / panels – many examples are the smart Watch, Wrist bands , medical equipments and many smaller and slimmer devices.

This has gave raised to a new problem. Now even the T9 or any other such keyboards do not have enough space in the screen area to fit into these devices. The typical physical dimension of the touch enabled displays of these devices come in different types – some are slim ones, some are oval or round shapes. For example main display size of Samsung Fit(slim) is 1.84 inch with 128 x 432px. Similarly the iWatch is around 2.5inch.

When I initially tried to explore the existing solutions available, I bumped upon Minuum which  needs at least a 1.63-inches (that is almost the same display area of Samsung Gear ) — it is due to the implementation provided where the sub panels appear to provide selection for character based on earlier selected character. So it was even not useful in slim-wears as well as any touch surface below the 1.63 inch surface.

So practically there was no significant keyboard was used in wearable devices with constraint real-estate. Rather most of them used on alternative methods of input mechanisms like voice and a secondary bigger device like a smartphone.

Most of the smart devices use voice as the major input systems due to lack of real-estate to accommodate a keyboard on them . However the voice based input systems have their own problems such as – (i) In noisy environments (e.g. out-doors, or in crowd) its really difficult to enter the texts via voice commands in an error free way (ii) due to variations in accent, tone of the speaker the voice input based system may not be totally effective and give raise to the scope of error. Surprisingly new age smart devices are more used as wearable and are used out doors which frequently are operated in noisy and distracted environments. Also the processing power in small devices makes it a thumb-rule to have the voice processed in cloud rather than in the device itself, for which the device needs to be connected to network.

(FIG: Due to lack of real estate, primary input system to many wearable-devices are mostly voice based.)

Using voice as an input system has it’s own problems:

1. Voice input systems are not 100% error free and accurate. As voice of different persons are different due to the use of pitch , tone and cultural influence, there are significant chances that such voice recognition systems may fail at certain times.

2. Having a full fledged voice recognition system is resource heavy and consumes lot of CPU and require heavy processing. So, practically , all of these wearble-devices now-a –days depend on cloud based voice recognition systems . This means, To use voice input, you need to be connected to internet, else you will not be able to input data to your system. In addition to this staying connected to cloud comes with additional issues, like high battery consumption and data charges. Specially power is an issues with smart watches and similar wearable-devices, so it becomes critical for the user . Many companies like Apple, Google are still fighting with challenges of reducing power consumption and improve battery life of wearable-devices.

3. Third issue with voice is it is prone to error in distracted and noisy environments. As wearable devices are expected to be used in motion and out doors, this becomes a critical issue for effective data input into the systems.

So all these remind us of good old keyboards, where the data entry is lot easier and error free.

(FIG: Some wearable-devices use alternative approach for text inputs – use of a mobile phone as the main input system.)

Some wearable-devices use alternative approach for text inputs – use of a mobile phone as the main input system. In such scenarios, the user uses the mobile phone as the primary device where he enters the text using phone keyboard . Many popular smart watches use this approach as this is more convenient for the user to input texts than voice mode. Samsung Gear, Microsoft Band, Apple iWatch and Moto 360 are examples where these devices are packaged as secondary devices to Samsung and windows phone.

The problem with this approach is the smart wear device is never plays the role of the standalone device. It always acts as an auxiliary devices. This strictly limits the device functionality and usage . Also the user is forced to carry additional hardware and a mobile phone to control and enter texts.

In such cases the smaller warbles most of the time act only as readable devices. For example, the user can read a “Shopping list” that was compiled on a phone. On the phone he can check and un-check the items from the list, how ever he won’t be able to alter the list by adding new items to it on the wearable device. He needs additional phone or hardware to make changes to the list. This kind of usage of the wearable are severely limiting the functionality of the wearable.

So in such cases a dimension of goodness that one would be aspiring for is to be looking forward to a future of human machine interaction, where wearable-devices, super small display-enabled or display-less smart devices will play an important role, it is highly important that we need to fix such major limitations of these devices, by providing a easy to use and implementable solution for text input method to the system.

Other dimensions of goodness should also take care of the following :

1. We need an effective keyboard that can work with super real estate constrained devices – especially like a smart watch or wrist wear etc. for effective data entry.

2. And the solution must be (i) Compatible with different display sizes with real estate constraint and (ii)  can work without the need to relay on voice or cloud (iii) can work in standalone way without the need of any additional hardware or secondary devices like a phone (iv) must be flexible enough to accommodate different language (v) must be scalable to meet different needs and work in various environments (vi) must work on touch enables displays or panels.

So here it is – the answer to this problem we face – the BlueSlide keyboard, a patent assigned by IBM about a keyboard that works effectively on real estate constrained devices. Also this is the keyboard that is the smallest one as it can be enabled with a surface of a square millimeter touch surface.

The core idea behind the “BlueSlide” keyboard is based on the principle that when one or more fingers are swiped across the touch enabled area, the system records the direction and the number of fingers involved in the swipe/slide action. Based on the a predefined key mapping with the finger count and the direction of swipe, the system concludes a text input character and records it.

Ergonomically swipe gesture is lot easier than point and click/tap — as point and focus requires attention and focus during operation . It also adds cognitive load on user. Persons wit shaky fingers , elders and people who are in distracted environments and in motion (where most of the wearable are expected to be used), will have difficulty in tapping — specially in small display areas. Swiping is less focused, easier to handle even in motion..as it requires less focus and accuracy than a point and focus element.

When initially I conceived the idea, I tried to implement to test the concept and see if it is really effective. To implement the prototype , I put a paper with a wearable printout where the display area is cut out. Placed this paper on a Samsung note 2 phone display , so that the interaction area on the display is now limited by the cut-out area — this is the actual area we will get in a similar wearable watch. Now I run an app implementing the concept and interacted using fingers to type in some character and changing keyboard view through touch interactions like double tap and double tap. Just to note: the video shows the basic prototype, that tries to showcase that the basic principles of the invention was intended to be put to practical use. As per the final concept & the patented invention the layout and UI elements might change based on the need of the case where it has to be implemented.

When I tested the results of accuracy and speed, it turned out well in similar set of touch surface real-estate. There was no accuracy issue, as all characters are mapped to different finger count and direction, which results in fairly good amount of error free operation.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522type%2522%253A%2522video%2522%252C%2522title%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522BlueSlide%2520POC%2520-%2520Smallest%2520Virtaul%2520Keyboard%2520%2528Patented%2529%2522%257D%257D%252C%2522description%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522This%2520is%2520a%2520proof%2520of%2520concept%2520of%2520an%2520implementation%2520of%2520BlieSlide%2520%2528IBM%2520Patented%2520invention%2529%2520virtual%2520keyboard.%2520BlueSlide%2520is%2520smallest%2520virtual%2520keyboard%2520that%2520can%2520be%2520us…%2522%257D%257D%252C%2522author%2522%253A%257B%2522name%2522%253A%2522Samir%2520Dash%2522%257D%252C%2522provider%2522%253A%257B%2522name%2522%253A%2522YouTube%2522%252C%2522display%2522%253A%2522YouTube%2522%252C%2522url%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252F%2522%257D%252C%2522request%2522%253A%257B%2522originalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DMy8X8A4_Ngg%2522%252C%2522finalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DMy8X8A4_Ngg%2522%257D%252C%2522images%2522%253A%255B%257B%2522url%2522%253A%2522https%253A%252F%252Fi.ytimg.com%252Fvi%252FMy8X8A4_Ngg%252Fhqdefault.jpg%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A360%257D%255D%252C%2522data%2522%253A%257B%2522com.linkedin.treasury.Video%2522%253A%257B%2522html%2522%253A%2522%253Ciframe%2520scrolling%253D%255C%2522no%255C%2522%2520allowfullscreen%2520src%253D%255C%2522%252F%252Fmedia.licdn.com%252Fembeds%252Fmedia.html%253Fsrc%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fembed%25252FMy8X8A4_Ngg%25253Ffeature%25253Doembed%2526amp%253Burl%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fwatch%25253Fv%25253DMy8X8A4_Ngg%252526feature%25253Dyoutu.be%2526amp%253Btype%253Dtext%25252Fhtml%2526amp%253Bschema%253Dyoutube%255C%2522%2520width%253D%255C%2522459%255C%2522%2520frameborder%253D%255C%25220%255C%2522%2520class%253D%255C%2522embedly-embed%255C%2522%2520height%253D%255C%2522344%255C%2522%253E%253C%252Fiframe%253E%2522%252C%2522width%2522%253A459%252C%2522height%2522%253A344%257D%257D%257D&signature=AZR0m7dTHJfUbCQOEZWRD8MzkYmn

(VIDEO: Showing the earlier version of a quick working prototype of the invention.)

The “BlueSlide”keyboard concept utilizes combination of multiple fingers slide across the touch enabled display or panel to trigger key-input to the system for based on predefined key mappings. The proposed concept uses different combinations of minimum one to any number of fingers to slide over the touch panel. The minimum touch enabled surface dimension can be the width of one finger tip area or less in physical dimension.

So how the thin touch panel counts the number of fingers sliding across within a duration?

(FIG: how the thin touch panel counts the number of fingers sliding across within a duration?)

Each finger is sliding across the touch panel and the system records that count. There will be intervals between each finger is sliding across the thin touch panel consecutively within a duration.

(FIG: Using any standard smart watch dial interface (e.g. Moto 360 or iWatch), similar embodiment might look like this.)

(FIG: The image shows an impression of how this embodiment might look like on a slim-wear unit.)

There are many areas this new keyboard layout solved challenges —

1. Solves problem of input of text on a real-estate constrained devices like wearable-devices (watches, wrist wears) or mobile devices with or without the touch enabled displays.

2. Simpler implementation that does not need to identify the finger and track them . Also does not need to track hand orientation. As less parameters are required to processed by the system to map the characters, it is lightweight and effective in it’s implementation and can be used in smaller less resource consuming devices .

3. Can work on a touch panel that is only single-touch sensitive –It uses sequence of consecutive touch inputs and their directions to simulate a multi-finger touch case to map to a wider number of characters.

4. Completely unique input text keyboard embodiment that uses directional swipe gestures of single/multi-fingers swipe gestures and does not require on conventional virtual keyboard approach to tap on characters to input text /characters.

5.The complete keyboard solution can work on smallest display area/touch area which can be as small as just one tap area.

6.The invention proposes the complete text input method based on swipe gestures (using any single or multiple fingers without requiring to identify each finger ) and interaction paradigm to cover all sets of characters of any language including special characters

7. The embodiment suggests the use of multiple views of the keyboard to accommodate any number of characters in keyboard along with the interaction approach on how to switching between these views.

Alternate implementation of BlueSlide: Using super minimal real estate on a non-display type thin touch panel.

(FIG: This is useful when in an hardware, we just want to provide a display-less touch-panel to reduce cost. )

This is useful when in an hardware, we just want to provide a display-less touch-panel to reduce cost. The non-touchable display might show a the key mapping, where as the user will use a touch panel strip (which does not have display and can deploy pressure sensitivity or any other technology to detect finger count and directions).

This implementation even though not optimal, can be practical to be used in super slim devices or in devices where use of a touch enabled display is not possible due to cost or some other constraint.

(FIG: Simulating multi-touch using single touch supported sensor.)

Each finger is sliding across the touch panel and the system records that count. There will be intervals between each finger is sliding across the thin touch panel consecutively within a duration. The count of consecutive slide of finger (and gap between each finger) is counted to determine the gesture. (e.g. 3 fingers sliding consecutively across, in the same direction is determined as 3-finger swipe in that direction.)

The BlueSlide can be used beyond the smart-watch and smart-wrist devices. It can be now also be used in case of a smart eye wear (e.g. Google Glass), where the touch panel will be in the rim of the eye wear and the display will be in the smart eye-wear’s projected image. This is a new improved addition as in such scenarios, typically the user does not directly sees the touch panel of the device. He rather focuses on the UI being displayed/projected to him.

The touch panel is situated outside the display area. While wearing the eye-wear the user can type in text without the need to concentrate on any keyboard.

(FIG: The rim of the eye wear holds the touch panel and user can use one or multiple fingers to type in as describe in the invention.)

The rim of the eye wear holds the touch panel and user can use one or multiple fingers to type in as describe in the invention.

(FIG: In virtual reality games devices like “Oculus” the BlueSlide can be used to implemented to provide text input mechanism easily.)

(FIG: In eye-wear there can be two touch panels which can use both hands to reduce the number of finger of each being used.)

Another non-optimal special type of implementation of BlueSlide is provided in the following, where to allow real estate for other UI elements like more input fields /information etc., the keyboard touch area is reduced even further to somewhat around 7mm x 7mm (i.e. the touch area of single finger tip) on a screen area constrained device. The following image shows this example, where only single finger swipe with increased number of keyboard views are used to input data into the system. Depending on the implementation this can be further reduced to one square millimeter of touch surface.

(FIG: Alternative implementation of the keyboard that usages only one finger.)

Similarly any number of fingers can be put to use to create alternative embodiment of BlueSlide keyboard to work across various devices of different dimensions and nature.

Read the complete Patent/invention (US 2017/0003872 A1 – Touch Encoded Keyboard) here: http://patents.justia.com/patent/20170003872

Read it in YourStory at: https://yourstory.com/read/5f95c7528f-the-smallest-virtual-keyboard-that-can-fit-into-any-wearable-

Disclaimer: Samir Dash is working as Associate Design Director at IBM based in Bengaluru, India. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.

How I Created a Software That In-turn Helped Me Creating My Graphic Book

It’s the story of Rangoli , my own custom developed cloud based image editor software that helped in churning-out the print ready images to help in creating a graphic book with specific effects to set the desired nostalgic tone.

If I today look back in time, I find many memories from Rourkela, a small township around India’s first public sector steel plant. Like any other Rourkelite, I have been a true enthusiast about my town. This passion led me to spend some time in last few years to collects smaller yet evocative details of events that shaped the place and the life within it. Then a time came when I gave it a serious thought to give them a shape of a book. Last year I published the book as titled Rourkela – The Illustrated Journey Into The Life Of The City 

As the book was supposed to be a graphic novel, there were multiple challenges I had. The first and foremost of them was getting the images/photograph of the town across different times in history. Being a small town it was really difficult task as not much of the facts and history of the place was recorded from different aspects of life. before the Rourkela Steel Plant was built in 1950’s, the place was least known tribal area with in the dense forest across the hills. Even though a high level details I had collected from secondary research, still the details were not enough to come up with a photographic book with truthful and accurate particulars. The problem with photographs is that they are too real – there is a little room available for imagination when you see a bright sharp hi definition photograph. The less details are in photo including color, there is more to imagine , and no doubt that’s why a painting with less realism is always effective in igniting emotion in viewer than the same subject in photograph.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522type%2522%253A%2522video%2522%252C%2522title%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522RANGOLI%253ACreative%2520Studio%2520-%2520Samir%2527s%2520Experiment%2520in%2520Image%2520Processing%2520over%2520Cloud%2522%257D%257D%252C%2522description%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522Rangoli%2520is%2520a%2520fully%2520automated%2520cloud%2520based%2520creative%2520studio%2520app%252C%2520that%2520helps%2520in%2520converting%2520images%2520into%2520complex%2520sketches%2520and%2520artistic%2520outputs%2520that%2520can%2520be%2520used%2520for…%2522%257D%257D%252C%2522author%2522%253A%257B%2522name%2522%253A%2522Samir%2520Dash%2522%257D%252C%2522provider%2522%253A%257B%2522name%2522%253A%2522YouTube%2522%252C%2522display%2522%253A%2522YouTube%2522%252C%2522url%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252F%2522%257D%252C%2522request%2522%253A%257B%2522originalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DGY27CzxwPp8%2522%252C%2522finalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DGY27CzxwPp8%2522%257D%252C%2522images%2522%253A%255B%257B%2522url%2522%253A%2522https%253A%252F%252Fi.ytimg.com%252Fvi%252FGY27CzxwPp8%252Fhqdefault.jpg%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A360%257D%255D%252C%2522data%2522%253A%257B%2522com.linkedin.treasury.Video%2522%253A%257B%2522html%2522%253A%2522%253Ciframe%2520scrolling%253D%255C%2522no%255C%2522%2520allowfullscreen%2520src%253D%255C%2522%252F%252Fmedia.licdn.com%252Fembeds%252Fmedia.html%253Fsrc%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fembed%25252FGY27CzxwPp8%25253Ffeature%25253Doembed%2526amp%253Burl%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fwatch%25253Fv%25253DGY27CzxwPp8%252526feature%25253Dyoutu.be%2526amp%253Btype%253Dtext%25252Fhtml%2526amp%253Bschema%253Dyoutube%255C%2522%2520width%253D%255C%2522480%255C%2522%2520frameborder%253D%255C%25220%255C%2522%2520class%253D%255C%2522embedly-embed%255C%2522%2520height%253D%255C%2522270%255C%2522%253E%253C%252Fiframe%253E%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A270%257D%257D%257D&signature=AQYbS5FyMfkBVs5b6NHV0b3Oc7aY

(FIG: The images in the published book – the line textured engraving effect gives the feeling of vintage nostalgia.)

As the book subject was history of the town with reference to different location within and specially about the town’s inception in 1950’s, and before, I thought it would be great to use illustration type graphics to match the old times, specially 50’s and 60’s of the town. In addition to that the challenge was that as it was a place, about which very less photographs along with recorded information was available, it was difficult to come up with a graphical history of the places through photographs. Secondly due to unavailability of details of life style and location description of the area, (as Rourkela was mostly unknown remote hilly area filled with jungle and aboriginal tribal before the steel plant came up in 50’s just after a few year of India’s Independence ), leaving something to imagination of the readers in images is ideal to evoke certain emotions.

When I started looking for a theme of the graphic book on history of a location, I explored many font types, graphic styles along with sketch patterns. I wanted the book to bring back nostalgia about the past that gone by, to remind the readers of the days gone by which no more exists. So natural tendency was to select vintage designs mostly popular in the periodicals, books and magazines printed using older print approach like wood-cut , linograph and engraves and the kind, when digital print didn’t exist which ever maintain the crispness of our printing methods today and had the printing imperfections. So I selected the wood-cut, old style text and textured background of the background images which help get the reader he feeling of vintage nostalgia.

The next step was to look for options to produce such an effect. After a search I noticed there are some plugins to Photoshop and other similar photo editors which provide the similar effects. But as I am more biased towards open source and used GIMP most of the time for my graphical needs, I wanted a good plugin that would provide the desired effect . There were some yet they didn’t match the exact way I wanted to represent the images. I wanted something to closely match the childhood local magazines that were printed and were more crude looking printouts. So the one of the best choice was to rather develop a program to quickly produce the exact effect I wanted to invoke same feeling. Initially I thought of learning to develop a plugin for GIMP, but that included additional work to learn the new language and the methods to build the plugin. Yet I did not want to depend on simple actions. Also I was not interested in depending on a commercial software and stick to it and was also not sure how long it would take me to learn and there by come-up with the solution that will in turn will help me complete my book project. I was stuck at a cross road, where the other option is to look around and find an approach that would be easier for me to come up with a software solution that will involve less work. I realized, I knew a decent level of PHP and some open source image processing libraries. In my earlier days of my career as a developer, I had played a lot with such libraries which used to run over shell scripts and via PHP through Execs. So Decided to try out this approch and decided will build my own Image Editor application that will allow to upload any image and convert that to the effect I desired. Thus my pet project Rangoli came into being to help me out to finish my graphic book project.

After spending two months over weekends, quickly I managed to build a working version with a feature to convert my images into the desired effect. As I used PHP, I was able to host it locally and use it across different laptops I use at home via the wifi , without the need to install anything on the system I was working with my book project. Later I added a few more variations of the effect and build a template that can be used to add more effects like plugins into ‘Rangoli’. One such addition was to remove either the white or black from the image and make it semi transparent (the same effect you get in Photoshop by turning the blending mode to ‘Multiply’).

(FIG: Rangoli Interface showing the list of effects available and the preview in center pane. Multiple effects can be queued and batch processed.)

Later added the feature to process multiple effects one after another based on the queue — more like a batch process but through the GUI and by following human friendly language than the geek’s favorite commands. These helped me build a system that is scalable and cross platform by the time I finished the book.

(FIG: Rangoli user-interface showing the rendered vector image with transparency, ready to be used in the book.)

Using this then I started creating visuals for my book. I merged multiple public domain images and some photographs I took some time back across the town, to create desired frame which then I processed in Rangoli to generate print ready vector that with old engraved vintage type image.

(FIG: From Left to right, different stages the source images were merged and then fed into Rangoli to get the old print type shown in right.)

The one more good thing happened – in my book I was able to provide dramatic scenes from past combining some modern day photographs and processing them through Rangoli.

(FIG: Blurring the realism – Left images are the original ones processed, where are the right one are the finally processed outputs from Rangoli.)

Finally I was able to complete the book that was referred as “Mini India’ Rourkela coming alive through flickers of images”. Though technology helped me in a greater way by empowering me to meet my goal which otherwise would have been impossible for me, I learned a new trick — sometimes, we need to spend time in building components that will help us in long run . In such cases even if the immediate or direct benefit may not be in sight, still they may act as the foundation stone to the bigger thing we desire to achieve.

You can get the book from here: http://amzn.in/9pobnWq 

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522type%2522%253A%2522video%2522%252C%2522title%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522Experiment%2520on%2520the%2520Book%2520Form%2520-%2520History-cum-Travel%2520in%2520Comic%2520Book%2520Format%2520%2528Book%2520on%2520Rourkela%2529%2522%257D%257D%252C%2522description%2522%253A%257B%2522localized%2522%253A%257B%2522en_US%2522%253A%2522Rourkela%2520-%2520The%2520Illustrated%2520Journey%2520Into%2520The%2520Life%2520Of%2520The%2520City%2520Around%2520India%2527s%2520First%2520Public%2520Sector%2520Steel%2520Plant%2520Author%253A%2520Samir%2520Dash%252C%2520Sangeeta%2520Dash%2520Format%253A%2520Paperba…%2522%257D%257D%252C%2522author%2522%253A%257B%2522name%2522%253A%2522Illustrated%2520Type%2522%257D%252C%2522provider%2522%253A%257B%2522name%2522%253A%2522YouTube%2522%252C%2522display%2522%253A%2522YouTube%2522%252C%2522url%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252F%2522%257D%252C%2522request%2522%253A%257B%2522originalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253Dzs34MxEXTmo%2522%252C%2522finalUrl%2522%253A%2522https%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253Dzs34MxEXTmo%2522%257D%252C%2522images%2522%253A%255B%257B%2522url%2522%253A%2522https%253A%252F%252Fi.ytimg.com%252Fvi%252Fzs34MxEXTmo%252Fhqdefault.jpg%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A360%257D%255D%252C%2522data%2522%253A%257B%2522com.linkedin.treasury.Video%2522%253A%257B%2522html%2522%253A%2522%253Ciframe%2520scrolling%253D%255C%2522no%255C%2522%2520allowfullscreen%2520src%253D%255C%2522%252F%252Fmedia.licdn.com%252Fembeds%252Fmedia.html%253Fsrc%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fembed%25252Fzs34MxEXTmo%25253Ffeature%25253Doembed%2526amp%253Burl%253Dhttps%25253A%25252F%25252Fwww.youtube.com%25252Fwatch%25253Fv%25253Dzs34MxEXTmo%252526feature%25253Dyoutu.be%2526amp%253Btype%253Dtext%25252Fhtml%2526amp%253Bschema%253Dyoutube%255C%2522%2520width%253D%255C%2522480%255C%2522%2520frameborder%253D%255C%25220%255C%2522%2520class%253D%255C%2522embedly-embed%255C%2522%2520height%253D%255C%2522270%255C%2522%253E%253C%252Fiframe%253E%2522%252C%2522width%2522%253A480%252C%2522height%2522%253A270%257D%257D%257D&signature=AQGLpYWXM5trMpF0f4NyvZxr60f_

Rourkela – The Illustrated Journey Into The Life Of The City Around India’s First Public Sector Steel Plant

A new type of history book about a city ..600+ illustrations, 270 pages , about India’s first public sector steel plant and a city around it… legends, facts, figures..about tribals, their life, about the British Raj and post modern Indian scenario..about how the steel industry came up in the remote area and how the city got into Narendra Modi’s smart city list..

A new type of history book about a city ..600+ illustrations, 270 pages , about India's first public sector steel plant and a city around it... legends, facts, figures..about tribals, their life, about the British Raj and post modern Indian scenario..about how the steel industry came up in the remote area and how the city got into Narendra Modi's smart city list..

 

Completely illustrated narrative about Rourkela, a city that become one of the iconic industrialization urban symbol in post independent India. A remote village of the ‘Roulia’ tribe, surrounded by dense forests and hills amidst India’s one of the mineral rich valleys, got selected by the makers of modern India to host India’s first public holding Steel and Iron company Hindustan Steel Limited. This story is the the journey of becoming one of the founding stones of modern industrialization of India. “History of a less travelled yet one of the cult cities of modern Indian town retold disguised as a compelling and gripping story through pictures” Explore the fine details about the place, it’s aboriginal, the migrant population, the culture and the impact of urbanization in social life. An unique experimental book of it’s own kind.

GET YOUR PAPERBACK https://amzn.com/1539083187

GET YOUR PAPERBACK https://amzn.com/1539083187

 

Specstra 2.0 : My Experiments in Cloud Based Design Process Automation

Specstra 2.0 : My Experiments in Cloud Based Design Process Automation

 

“Automation” is one of the trending phenomenon of the current technological world. Manufacturing industry has been pioneering it for decades. Other verticals are following it. In software development , testing and deployment field, automation is popularized by Dev OPS and Continuous Integration (CI) that helps speed up the software development life cycle (SDLC). But the SDLC is not only about the So what about the software design industry? What about the design phases of any SDLC? While design is getting more and more recognition across the entrepreneur world and many industry efforts like ‘IBM Design Thinking’ and similar frameworks and associated methodologies are trying to create a synergy between the ‘Agile’ approach of SDLC and the “Design Thinking”, it is an interesting crossroad in time, that can show ways of developing more usable and meticulously designed software and similar products. So when everyone is trying to bring automation to speed up process and speed up delivery, it is really interesting as well as challenging to come up solutions and tools that help in automation of designing phase of SDLC.

In context of Software industry I always see “Design”  as an intersection between creativity and the technology where both shape each with the help from user needs and blending of these results into successful products. This also is the reason automating designing process is a lot more challenging than building solutions for automation of purely technology driven process. I accepted this challenge 2 years back during my short stint at an R&D center at Bangalore, of a leading mobile  brand, I was part of a large design team, where almost 70% of the crowd was visual designer and the rest belong to user experience and research team members. And many of these visual team who worked on different projects, complained about certain phases of the design process that involved creation of style guide of the app that they were working on. Every app project used to be developed for different flagship phones models with different resolutions as well as screen densities. And being developed in native languages for Android view-ports, designer used to develop each style guide for each project separately for each model of phone. Each style-guide has to be detailed to pixel level which the designer has to calculate and define taking calculation of the view port pixel density(PD). Many designers have to maintain different versions of the mock-up and the create specs for each version, which was more like a “drafts man’s job” with lesser creative moments for expressions and innovation than the previous phase where the designer has to follow the wire-frame and come up with pixel perfect mock-ups of the app screens.

Almost all the designers tried to grab their hands on the creative part of the job, getting engaged with the stake holders and
The senior designers prefered to avoid working on the style-guide, though they would love to review one. The not so seniors worked on the the drafting of the guide and churned out the specs document, yet do the crying that it is less creative even though it is one of the most critical part of the design process.

So I thought of calculating how much effort we are giving to a creative phase of creating a visual mock-up vs. a drafting work , i.e. creation of a specs document /style-guide. Roughly on average one view of a single screen to  be mocked up in something around 4-8 hours. creation of a very detailed spec. might need 4-6 hours of job. But if it is designed for multiple view-ports of an operating system with significant pixel density change along with varied resolutions, then this drafting time gets multiplied. So by creating 4 generations of phone models running different generation of Android might need 16- 24 hours. So the designer actually takes roughly one week of work for a view in this case from wire-framing stage to finished design with specs ready for the developer. Averagely an app can have 10 views , so the whole app would need approximately a month of work to be designed and be ready for 4 different models. Even though this is a very haigh level bare-bone calculation, it indicates a few things —

 

So in this context for a designer —
1. for the designer 1/4th of his work remains creative and gives him the scope to explore, innovate and express through his designs.
2. remaining 3/4th of his time is a purely drafts-man job.
So a designers job is actually boring as the volume of his output is not creative or inspirational.

For the organization —
1. It is paying higher fee for lower type of work. To exlain it — a creative work like that of coming of new designs is typically high paid job, where as the drafting job based on a creative guy’s is a low profile job , and should be paid less.
But interestingly this is the same designer, so the payment rate is actually based on his skill of how he performs in the 1/4th of the job where the creative juice flows and he is actually innovates.

2. Even though the 3/4th of the job is lower profile job, which could have been automated,consumes more from the delivery time. if we look at the timeline of the delivery of the design deliverables, we see that 1/4th of the delivery time is actually spent in creative way. So actually if there is a scope to automate the low profile manual work, where the designer does not need to use his right brain, then the deliverables could have been delivered in just 1 week instead of a month! Also note that time is money for industry, so the organization is actually spend 300% more than it should and that too on a higher price point.

Again apart from this there are other factor that contributed to a above problem. Being in a world of rapidly changing requirements, many industry are following “Agile” or “Iterative” approach of work. Which means in the short notice things can change even to the look and feel and UI aspect which would mean a change to the style guide if view of standard control lines are affected.This has a cascading effect that flows through the style guide work. So any change in such requirement means the wastage of effort and addition of new efforts to keep the specs aligned. Imagine, if multiple design centered projects are running on mission critical deadlines due to faster time to market needs, and such kind of scenario is happening to most of the projects. Looking at these kind of need, many design firms, keep a larger design workforce, to absorb such shocks. But that means more volume of cash burn at a higher price points for the enterprise and smaller startups do not stand a chance in such scenarios.

Another aspect that I think is important to notice here is that due to time crunch, many designers prefer to avoid granularity in the style guides. Provide common documentation and provide very high level change documentations to developers. Also in some cases there are gaps left in the document that go unnoticed, which forces the developers to get in touch with the designers during development phases. Also due to lack of a complete and meaningful style guide or specs, the software testing also gets impacted due to many blur lines among what is in and what’s out. Certain things the testers take as assumptions while completing the testing phases.

Specstra is a pet prototype that I had started working on, 3 years back (around 2013) to explore a possible solution for design related automation process.
The problem of design automation is most of the process blocks are related to creative aspect of the work the designer does. So I started with the blocks that were more aligned to less creative activity so that these blocks can be removed from the creative process flow . One of such area was creation of style guide design from the selected design where the designer has to spend hours to manually define specs.

 

SAMPLE STYLE GUIDE GENERATED FROM THE PROTOTYPE
https://samirshomepage.files.wordpress.com/2016/08/sample-generated-style-guide-output1418308769-en.pdf

 

The user can upload  Adobe Photoshop (  PSD), Adobe Illustrator (.AI), or PDF formatted exported from any design tool (Corel draw, Paint etc.) and within minutes Specstra can generate style guide which other wise would have taken the user days to complete and that with prone to error.

Typical Pain-points of manual approach of style-guide or a specs document creation are:

  1.  Tedious process
  2.  Lots of manual work
    no creativity – draftsman-ship work is not fun for designer.
  3.  Time & effort consuming activity
  4.  Not scalable
    there is limit to how much a single designer can do
  5.  Comes with cost
    Creative guys are paid to do these non-creative tings – however charges   remain the same.
  6.  Threat to agile projects
    last moment changes in design can impact the software delivery

 

Specstra addressed all of these along with some additional benefits —

  1. Completely Cloud based
    N
    o software to install
  2. Not restricted to Adobe software solution
    Can support non adobe software
  3. Minimal user intervention is workflow
    Design automation is possible
  4. Quick to Delivery
    Reduces the designer time to delivery by 99% or more.
  5. Saves $$$$
    Saves money by 50% or more.
  6. Supports creativity
    Designer can save more time for creative stuffs and is saved from draftsman-ship.
  7. Multi-language support
    Helps a global team
  8. Supports Agile SDLC
    Quick iterations and design changes will not delay the time to development as style guide can be ready in a few minutes.
  9. One click User Experience
    One click GUI guide makes the workflow super easy.
  10. Automatically handles multiple device resolutions and screen densities.
  11. Scalable for any volume of works.
  12. No need to pay to reserve people for the work .

 

Overview of Features:

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A1035%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%2C%2522height%2522%3A582%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A1035%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252F2ss.png%2522%2C%2522height%2522%3A582%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AWgnF1Z0hnqw6gMeblbQut9nQtaf&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2F2ss.png&uid=40424Multi Design file support:
Outputs from Photoshop, Illustrator, Corel Draw, In-Design, Gem  to be supported.

Super easy to use dashboard:
Dashboard that is easy to use and aligns with the design workflow.

Customized report builder:
Editor to add and remove details, renaming etc.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A767%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%2C%2522height%2522%3A595%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A767%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex.png%2522%2C%2522height%2522%3A595%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AVCKNKYP6DKNKpOixF2b5LrW0g2i&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2Findex.png&uid=196 https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A864%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%2C%2522height%2522%3A625%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A864%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findexww.png%2522%2C%2522height%2522%3A625%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AWcbabFWaLYRtYMCgRov7Eucfo6h&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2Findexww.png&uid=32501 

Detailed Report:
Font, Shape, Color, Grid, Absolute, Relative positioning. In every iteration the report  is complete in all respect.

https://www.linkedin.com/pulse/api/edit/embed?embed=%257B%2522owner%2522%3A%2522%2522%2C%2522request%2522%3A%257B%2522finalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%2C%2522originalUrl%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%257D%2C%2522images%2522%3A%255B%257B%2522width%2522%3A816%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%2C%2522height%2522%3A461%257D%255D%2C%2522data%2522%3A%257B%2522com.linkedin.treasury.Image%2522%3A%257B%2522width%2522%3A816%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252F2016%252F08%252Findex2.png%2522%2C%2522height%2522%3A461%257D%257D%2C%2522provider%2522%3A%257B%2522name%2522%3A%2522Wordpress%2522%2C%2522favicon%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%252Ffavicon.ico%2522%2C%2522url%2522%3A%2522https%3A%252F%252Fsamirshomepage.files.wordpress.com%2522%2C%2522display%2522%3A%2522samirshomepage.files.wordpress.com%2522%257D%2C%2522created%2522%3A0%2C%2522description%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522lastModified%2522%3A0%2C%2522title%2522%3A%257B%2522localized%2522%3A%257B%2522en_US%2522%3A%2522%2522%257D%257D%2C%2522type%2522%3A%2522image%2522%257D&signature=AYVSZR7YVAVBsqk-LDK-jB1CNEJt&url=https%3A%2F%2Fsamirshomepage.files.wordpress.com%2F2016%2F08%2Findex2.png&uid=417205-10 minutes delivery  :
All reports will be generated in 5-10 minutes of upload.

 

 

Feature #1 – Complete details of the objects

 

  •  Supports text/font, shape, image objects
  •  Resolution dependent (Screen Pixel) units
  •  Resolution independent (Point) units (Auto conversion based on target pixel density of the device ) – example iOS Retina, Non-Retina, Android (LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI etc. ), PC Screen standard web resolution  etc.
  •  Font formatting information – size , family, style, color,

 

Feature #2 — Complete details of color, shapes, images & font

  • Supports text/font, shape, image objects
  • Font formatting information – size , family, style, color,
  •  Web safe / Non-web safe color analysis

 

SAMPLE STYLE GUIDE GENERATED FROM THE PROTOTYPE
https://samirshomepage.files.wordpress.com/2016/08/sample-generated-style-guide-output1418308769-en.pdf

 

LINK1:
https://www.behance.net/gallery/41228843/Specstra-2-Cloud-Based-Style-Guide-Automation

LINK2:
https://www.behance.net/gallery/26346085/Specstra-Extract-CSS-Assets-Info-from-PSD-Design-

My Article – Consumer dynamics benchmarking enterprise software market

In the present era, the partnership stories like Apple+IBM are enough to prove how consumer devices are impacting positively for enterprise business process re-engineering cases in core industries like retail, healthcare, Insurance, manufacturing, aerospace and entertainment sectors.

Consumer dynamics benchmarking enterprise solutions is much more relevant in the Indian context where Prime Minister Narendra Modi has emphasised in making the technological innovation benefit common man through the Digital India initiative that aims to transform India into digital empowered society and knowledge economy.

Read the complete story here

Consumer dynamics benchmarking enterprise software market

 

Rourkela: The Illustrated Journey Into The Life Of A City

rourkela

 

The “Rourkela:  The illustrated journey into the life of a city ” book project is an unique attempt to stitch to weave a canvas of experience about a place through illustrative medium — it’s more about travelling through time and space to witness the growth of a city and it’s culture.

India’s  first ever integrated steel plant under public sector ‘Rourkela Steel Plant’ facility was established in Rourkela 1954-55. Post independence the then leaders wanted to set up a steel plant to make India self-dependent in iron and steel.Pundit Jawaharlal Nehru, the first Prime Minister of India wanted to make India an industrialised state. Iron and Steel was the basic requirements of the people at the dawn of the independence. Finally the leaders of the nation selected Rourkela for a steel plant.

So what is the story behind this? How was the city selected? What was the history of that place before? The book tries to explore this fascinating story in with the vivid illustrations. It

aims to include those little little things that makes help understand the place better – including the flocklore of the place to actual historical linkage to some part of the place that typically go unnoticed due to the fact that the place is less written about in different books and magazines.

– See more at:

https://www.facebook.com/IllustratedTypeDotCom

http://illustratedtype.com/#sthash.lUakfo5U.dpuf

 

Rourkela

Specstra: My Experiments in UI Automation to Extract CSS, Assets from Design Files

This is a proof-of-concept /experimental exploratory project I was spending my weekends during 2013-15 to come up with a cloud based tool that allows designers & developers in quickly getting assets, CSS and element details like position, dimension, shapes, raster, text formatting info etc. from the design file/screen mockups easily without them required to have installed Adobe Software suits like Photoshop.

The major challenges I faced were in reading the Adobe proprietary file formats like PSD to extract separate information on design elements specially the fonts and getting formatting information without using any of the Adobe technology available. Invented many workarounds and implemented them in an assembly line kind of architecture (i.e. chain of responsibility design pattern) to ensure that multiple design file uploads (each one having file sizes from few hundred MBs to 1 GB ) are processed successfully without crashing or over burdening the cloud system. Also the implementation required the necessary image processing tasks to achieve certain goals like creation and export of assets in specific resolution and rendering the red-lines on the fly.

The technologies used were: PHP, MySQL, Python, Perl, Ruby, Shell Scripting, HTML5, CSS3, JavaScript, Canvas & Node.

FEATURES:

Extract design info from a PSD comp to use with HTML & Native App projects like mobile and desktop designs, with Specstra.

Cloud based – Single dashboard to manage all design files.

Export design elements / assets e.g Raster (PNG,JPG) , Vectors (SVG), CSS

Dynamic selection of design elements/assets from the file.

Detects nested vector shapes, text objects, images/raster from the design file.

Detects color palette from the design file.

Specstra