Tutorial: Simple way to develop software for your hobby projects



Hello People!

As a mechanical engineer myself, I always wondered what it takes to develop a software. What kind of coding-mantra do these software engineers know that we people can't understand? How much in-depth knowledge is required about the computers before we can begin to see beautiful software's come to life on our own laptop. How difficult it actually is?

Well, as it turns out to be, not difficult at all!

In this tutorial I will share how you can make simple yet elegant software for your hobby-projects without spending hours and hours of research online. The only prerequisite is a very basic understanding of computer coding. To put this in prospective,  if you just know what a "for loop" is, you'll be able to complete this tutorial. So lets get started..!

DISCLAIMER: The aim of this tutorial is to teach making basic-functional software for hobby-projects. This tutorial  in no way is a replacement for a professionally developed software, but it will give you a basic understanding on how softwares are developed.

DEVELOP BASIC SOFTWARE 

1.  What you need?

  • Processing : Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.
  • Arduino Board

2.   Identifying the general requirements of our project software.

  • In any project software, there are four basic features that are usually required. They are:-
  1. Graphical User Interface(GUI): Any functional software requires a graphical user interface to allow user to communicate to the machine and vice-versa. A GUI may include virtual buttons, multiple screens, dials and gauges, menu etc. 
  2. Input to the software: To interact with the GUI we need a means to send instructions to the software. The input devices may include a keyboard, a mouse or a micro-controller.
  3. Output from the software: Often it is required to log output of a computation or data from the software.The output may be an image, video, excel sheet or even a text file. for eg. you may want to store some data received from your micro-controller in a text/excel file.
  4. Background functions: These are the functions that are neither a part of input/output system of the software, nor they form part of the GUI but act as supporting functions in background. For eg. if one designs a calculator and wants to perform an addition operation on two numbers, the input is received from the keyboard, the output is displayed on the GUI but the function that actually adds two numbers behind the scenes, is the background function.
NOTE: Find the code and other resource files of this tutorial here.

STEP 1: Graphical User Interface(GUI)

  1. Designing Graphical User Interface(GUI): Creating GUI can be further divided into two parts.

  • Fixed background image: This is perhaps the most fun part of designing the software. You get to design the basic layout of the user interface of your software. To do this, I recommend to first make a drawing on a paper and decide the layout. After this, download some google images relevant to your layout and edit them on an image editing software. The simplest one of them is MS Paint. 
Here is our background image for this tutorial: As you can see, we have a dial gauge, progress bar, text space and virtual button "Data Logging" on the main display. These are the basic elements of a GUI as we discussed earlier. Expanding the code on similar lines, you can make any layout that you wish to.




  • Foreground function execution: A fancy heading but nothing much to talk about. What it basically means is to execute some functions on screen to create a visual effect. eg. to change progress bar, we draw a black rectangle on the image that hides the colored part of progress bar. In this way, we create a visual effect as the value of the progress bar changes. Similarly, for dial gauge, we draw a shape rotating about the center of the gauge which in turn creates the desired visual effect. Another technique for creating effects is to superimpose an image over background image. To demonstrate this, in our case whenever the button data logging is pressed another image of different color is superimposed on it.     



  •        Coding Graphical User Interface:Coding in the processing environment is no more difficult than writing an essay in English language (Thanks to the developers!). Read the comments in the described lines, follow your intuition and you'll follow through the code.

  • 1.1  Imports the serial library to receive data from the Serial port.
  • 1.2  Declaring all variables used in the program.
  • 1.3  Setup of the code describing screen size and loading images used in program. 

  •  1.4  Runs the loop at 60 frames per second executing functions and displaying visual effects created on the screen.

STEP 2: Input to the software

  • There are three methods employed in the code to take input to the software. One is the input from the keyboard, other from mouse and the third one being arduino.


  • 2.1  Function is triggered when mouse is clicked. Checks the position of the mouse at the time of click. If the position lies within the coordinates defined by the data logging button, the data logging function is executed.

  • 2.2  Function is triggered whenever a key is pressed. The data only gets stored once all the conditions in the "if" statements are satisfied.
  • 2.3  This function is triggered whenever data is available from serial port. The data received gets stored in an integer variable.

STEP 3: Output from the software


  • 3.1  Checks if the data logging is enabled. If enabled, asks to enter the file name to be saved and starts logging.
  • 3.2  Creates the text file and prints data received from arduino in a new line.

STEP 4: Background Functions



  • 4.1  Allows the user to enter file name with custom text formatting.
  • 4.2  Displays the text, progress bar and dial gauge.

STEP 5: Testing and demonstration

  • To demonstrate and test the software, we'll be writing an arduino code printing some numbers to the serial port  and then receiving the data in processing.
  • Arduino Code: Prints an integer number varying from 0 to 100.

  • Testing: Here is a short video testing and demonstrating all capabilities of our software.




Utilizing the tools discussed in this tutorial, you can create software for your projects with extended capabilities. Below is an example of a project build on similar lines.




Comments

Popular posts from this blog

Tutorial: Data Acquisition System

Project: Electronic Steering Wheel

Project: FSAE Variable length Intake Manifold(VLIM)