Interaction with Keyboard

Nana00's picture


With Quartz Composer, could a mobile keyboard be displayed that allows users to enter anything they would like and that gets displayed on the screen? For example, I would like to create a mobile prototype that resembles a messaging app. The prototype would have an iPhone keyboard that the user can type anything they would like and after they press send, the message would be displayed on the screen like a real messaging app. Could this interactive prototype be created in Quartz Composer? Any insight is greatly appreciated!

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Achim Breidenbach's picture
Re: Interaction with Keyboard

I am pretty sure you can pull this off in QuartzComposer. Here are some thought that may help:

  • I would use two images for your keyboard: One representing the keyboard and a second with color coded areas for hit testing. Once the user clicks on the graphical keyboard you test the same pixel in the second image and check its color to see what key was hit. yellow means A, green means S, blue means D and so on. Check out the "Image Pixel" patch
  • You will need the "Mouse" patch to track the position of clicks by the user
  • to implement the logic (if mouse clicked then hit test, decode color to button, if key pressed then append the letter to the string else if "send" pressed then output the string) I would prefer to use JavaScript (or our Lua-Patch: ) because this is very complicated to do in native QC spagetti coding.
  • For the graphical output of the chat you may have a look at the "Twitter" layer in BoinxTV. We did a similar design as in iChat.

Nana00's picture
Re: Interaction with Keyboard

Thank you Achim for the suggestions! Much appreciated!! :)

Swiftlikeninja's picture
Re: Interaction with Keyboard

I dev'd a simple keyboard input composition a while back with a buddy and uploaded here Its a bit system intensive but should help provide a foundation. (If you read through the comments I posted an updated version that is a bit more streamlined.)