Interface and Application Design

Objective:

Here we will be comparing multiple tools to create Interfaces and Applications:

Processing

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

Features:

  • Free to download and open source
  • Interactive programs with 2D, 3D, PDF, or SVG output
  • OpenGL integration for accelerated 2D and 3D
  • For GNU/Linux, Mac OS X, Windows, Android, and ARM
  • Over 100 libraries extend the core software

Installation

Installation is pretty straight forward. The current stable release, Processing 3.5.3 (I used windows x64) can be downloaded as a .zip file and just requires unzipping and you are set to use it.

Basic Usage

Processing is alot like arduino. If you are familiar with the basic syntax in arduino, almost all of it work on processing. The new things which you will need to get used to is the basics of the GUI programming.

Creating a Simple Window that closes when a keypress is detected

Objective:

To explain the basics of processing, I'll do the following;

  • I'll create a simple window of size 400x400
  • I'll set the background color to black
  • I'll close and exit the program when a keypress is detected

The Code:

SimpleWindow.pde
Creating a Simple Window in processing

Explanation

    Basic Functions:

  • setup()

    • Like the setup() function in arduino, runs only once.

  • draw()

    • Updates the GUI, runs continuously like the kinda arduino loop() function.

  • keyPressed()

    • Event initiated when a keystroke is detected.


    Other Functions:

  • size(Width, Height)

    Defines the dimension of the display window width and height in units of pixels. In a program that has the setup() function, the size() function must be the first line of code inside setup(), and the setup() function must appear in the code tab with the same name as your sketch folder.

  • background(rgb)

    The background() function sets the color used for the background of the Processing window. The default background is light gray. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the backgound need only be set once.

  • exit()

    Quits/stops/exits the program. Programs without a draw() function stop automatically after the last line has run, but programs with draw() run continuously until the program is manually stopped or exit() is run.

Exporting Processing apps as a standalone executable

Processing allows you to export your processing application as standalone executables. I find this the most useful feature of processing. Although, the host machine needs to have Java installed on it to run the application.

Multi Platform Export Options in Processing
Large file size because Java is Embedded into the Executable

MIT App Inventor

MIT App Inventor is an intuitive, visual programming environment that allows everyone – even children – to build fully functional apps for smartphones and tablets. Those new to MIT App Inventor can have a simple first app up and running in less than 30 minutes.

Features:

  • Free and open source
  • Can be prototped realtime with MIT App Inventor Mobile App
  • Simple UI
  • Browser Oriented

Making New Project

You can diretly use this on broswer. Go to 'Create Apps' section and get started.

Objective

We made simple Draw App for the Mobile/Tablet. Which gets connected through Bluetooth. To display board when needed.

Making An App

First of all decided canvas/screen size.Then added UI elements Images, Draw board. Buttons etc.

Then added simple bluetooth client block. To communicate.

Then downloaded MIT app inventor app on Mobile device and connected through barcode. Download MIT App Inventor Mobile App

Conclusion

To conclude MIT App Invenntor is good for Beginner to learn and explore. It is easy and fast and simple.

On the other hand MIT has limited functionality.

Processing is much more versatile and advanced. This is better when you want to integrate things.