Knob Class for Processing 2.0

I just finished a knob class (library) for processing. The idea is simple... The need of using a knob on my sketches using a simple class and interact with my microcontrollers. The goal is to have a class that can be used in a very simple way.

The video shows how to use a knob class and a designer tool for getting the final geometry of a knob.

The knob class is useful to create sophisticated GUIs using Processing, a graphical java based programming environment.



Using in conjunction with the button class (previous article) we can create GUIs to interact with, showing values from variables, that we can read from microcontrollers like arduino. We'll show in the next article how to do it.

Also we can use a knob for change values to modify other widgets or for dim a led or change the brightness of a LCD connected to a arduino... uses are circumscribed to the imagination and needs.

Meanwhile, it is worth to understand the basics of the library (class).

The following example uses the knob class to change the background color of the window created in processing, using 3 knobs each one handling a component of a RGB tuple.


(1) ADknob rcolor, gcolor, bcolor;
int r,g,b;
(2) void activateMouseWheel()
{
 addMouseWheelListener(new java.awt.event.MouseWheelListener() 
 { 
   public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) 
   { 
     mouseWheel(evt.getWheelRotation());
   }
 });
}
(3) void setup()
{
   size(500,200);
   smooth();
   rcolor = new ADknob("R",100,100,45,255,0.0,1.0,4.0,20.0,34.0,19.0,34.0,15,7,53.0,20,19,10,-6,14,5,9,14,7,23,false,11,0);
   rcolor.setKnobPosition(234);
   rcolor.setColors(#D30606,0,-1,0,0,0,0,-11574371,-327681);
   gcolor = new ADknob("G",250,100,45,255,0.0,1.0,4.0,20.0,34.0,19.0,34.0,15,7,53.0,20,19,10,-6,14,5,9,14,7,23,false,11,0);
   gcolor.setKnobPosition(202);
   gcolor.setColors(#0FA705,0,-1,0,0,0,0,-11574371,-327681);
   bcolor = new ADknob("B",400,100,45,255,0.0,1.0,4.0,20.0,34.0,19.0,34.0,15,7,53.0,20,19,10,-6,14,5,9,14,7,23,false,11,0);
   bcolor.setKnobPosition(111);
   bcolor.setColors(#050EA7,0,-1,0,0,0,0,-11574371,-327681);
   activateMouseWheel();
}
(4) void draw()
{
  background(color(r,g,b));
  r=(int )rcolor.update();
  g=(int )gcolor.update();
  b=(int )bcolor.update();
}
(5) void mouseDragged()
{
  rcolor.change();
  gcolor.change();
  bcolor.change();
}
(6) void mouseWheel(int delta)
{  
  rcolor.changeKnobPositionWithWheel(delta);
  gcolor.changeKnobPositionWithWheel(delta);
  bcolor.changeKnobPositionWithWheel(delta);
}

(1) Object Creation
  1.1 We start creating one object for red, green and blue component of the RGB tuple
  1.2 And three integer variables for storing the knob values.

(2) The function activateMouseWheel
  2.1 Enable us to activate a listener for the mouse's wheel.

(3) Inside the setup function
  3.1 We define the windows with size() function
  3.2 We instantiate each knob with the parameters obtained from the knob tool
  3.3 We also set the value of the knob. This is necessary for setting an initial (r,g,b) background
  3.4 Finally we call for the activation of the mouse wheel

(4) Inside the draw() function
  4.1 We change the background using the variables r,g,b
  4.2 These values are obtained from the knob.update() function, which is in charge of return
        the value and draw the knob itself

(5) The mouseDragged() function
  5.1 Enable us to call the change() method of each knob while the mouse is dragged over the knob
  5.2 This function is also responsible of redrawing the knob on the screen

(6) the function mouseWheel()
  6.1 It is called by the listener of the mouse using the increment or decrement of the wheel mouse
  6.2 Inside we call the changeKnobPositionWithWheel() method for updating the knob

The structure of the code is very simple as I will describe next:

(1) Create the knob Object
(2) Instantiate the knob with the parameters obtained from the tool inside the setup() function
(3) Get the knob value and use it inside draw() function
(4) Create a mouseDragged() function to call the change of the knob if we drag the mouse over
(5) Create a mouseWheel() function to call changeKnobPositionWithWheel() when we use the wheel

Interaction:

The knob can be used dragging the mouse over it or using the mouse wheel or the keyboard.

(1) Mouse Wheel
  1.1 The wheel is used to increment or decrement in one step at a time
  1.2 Shift+wheel increments or decrements the knob at totalSteps/10 ratio
  1.3 Ctrl+wheel increments or decrements the knob at totalSteps/4 ratio

(2) Keyboard

  2.1 LEFT || DOWN decrements the knob at totalSteps/10 ratio

  2.2 RIGHT || UP increments  the knob at totalSteps/10 ratio

Look at the video to see more details about the class and the tool and download the source to essays different examples.

Download: knob class
Download: button class
Download: color example
Download: Designer tool


Read More......

VIDEO: Button Class for Processing helps Arduino's Interaction

This is a very short video which demonstrates how the button class helps to interact with a microcontroller like teensy (arduino clone).





DISCLAIMER **
THIS SOFTWARE IS PROVIDED TO YOU "AS IS," AND WE MAKE NO EXPRESS OR IMPLIED WARRANTIES WHATSOEVER WITH RESPECT TO ITS FUNCTIONALITY, OPERABILITY, OR USE, INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR INFRINGEMENT. WE EXPRESSLY DISCLAIM ANY LIABILITY WHATSOEVER FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL, INCIDENTAL OR SPECIAL DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST REVENUES, LOST PROFITS, LOSSES RESULTING FROM BUSINESS INTERRUPTION OR LOSS OF DATA, REGARDLESS OF THE FORM OF ACTION OR LEGAL THEORY UNDER WHICH THE LIABILITY MAY BE ASSERTED, EVEN IF ADVISED OF THE POSSIBILITY OR LIKELIHOOD OF SUCH DAMAGES.


Download source: ledSwicthesWithButtons.pde
Download source: buttonClass.pde

Read More......

Simple Button Class for Processing

Abstract

Continuing with our goal of communicating with arduino like micros, this time I brought you with a simple button class to use with processing. I've made a simple example of how to use it and also I have created a more elaborated example, using the buttons to turn on/off leds of my teensy.

Simple Button Class for Processing

The idea is to use it, as is, with no knowlegde about how to code a button... that' s why this class is like a library.

DISCLAIMER **
THIS SOFTWARE IS PROVIDED TO YOU "AS IS," AND WE MAKE NO EXPRESS OR IMPLIED WARRANTIES WHATSOEVER WITH RESPECT TO ITS FUNCTIONALITY, OPERABILITY, OR USE, INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR INFRINGEMENT. WE EXPRESSLY DISCLAIM ANY LIABILITY WHATSOEVER FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL, INCIDENTAL OR SPECIAL DAMAGES, INCLUDING, WITHOUT LIMITATION, LOST REVENUES, LOST PROFITS, LOSSES RESULTING FROM BUSINESS INTERRUPTION OR LOSS OF DATA, REGARDLESS OF THE FORM OF ACTION OR LEGAL THEORY UNDER WHICH THE LIABILITY MAY BE ASSERTED, EVEN IF ADVISED OF THE POSSIBILITY OR LIKELIHOOD OF SUCH DAMAGES.

A simple example in the following lines:


ADbutton button1;

 boolean pressed=false;

 void setup()

 {

     size(290,120);

     smooth();

     button1 = new ADbutton(80, 40, 150, 30, 7, "Press Me");

 }

 void buttonRun()

 {

     if (pressed)

       button1.label("Press Me");

     else

       button1.label("unPress Me");  

     pressed=!pressed; 

 }

 void draw()

 {

     background(#04583F);

     if (button1.update())

        buttonRun();

 }

A very simple approach to use button to run functions each time a button is pressed. This example instantiate button1,inside setup(), based on ADbutton class indicating (x,y) position on the screen, (width,height) of the button, radius of the rounded corners of the button and the label.

Then, on function draw() we run button1.update() that has to goals: the first one is to draw the button itself and the second one is to return a boolean indicating if the button was pressed.

If the button was pressed is evaluated at the if statement. If the returned value is true it runs buttonRun() function.

In the buttonRun() function we evaluate the boolean pressed variable to change the label of the button, so it behaves like a push button.

The better way I found to use the class is to create a tab on processing, copy and paste the code and then create your program in the main tab using the class.

The video shows the quick deploy of the class...



Download: buttonClass.pde
Download: arrayOfButtons.pde

Read More......

Internet of things: Sending data to Twitter using Python - part I

Abstract

Continuing with the goal of sending data using different means to connect a microcontroller to the outside world, this time we are going to describe how to interact with twitter as a way to show messages triggered by conditions defined and showing values of any kind of sources.

This article is divided in 2 parts. The first one is intended to show you how to send data from our computer to twitter. The second one is going to be dedicated to explains the procedure that have to be followed to send data produced by different sources to Twitter.

See the video:

Sending data to Twitter - part I

What we want to do is obtain data from a source (i.e. a sensor), then analyze it to trigger messages depending on specific conditions. With this goal in mind the first step is to know how the messaging system of twitter actually works.

In order to send messages  to twitter from command line it is not enough to use curl or whatever command line tool to send messages over internet. Instead, Twitter clients will need to use more secure authentication based on OAuth. OAuth is an authentication protocol that allows users to approve application to act on their behalf without sharing their password.

So this first part is going to help people to know what is the lifecycle to get ready for sending messages.

(1) Download Tweepy

To interact easily with Twitter from Python, is imperative to get in hand an API that can be used to get an abstraction, this way is easier to program what we need. It is worth to say that Tweepy is a very well documented Twitter library for Python. This is the python API that we will use to authenticate against twitter and send messages.

(2) Create the application on  https://dev.twitter.com/apps

Here you can create as much as applications as you need. This step will provide you with two authentication pieces required for the next step.


CONSUMER_KEY
CONSUMER_SECRET

It is important to remember to configure the application to Read, Write and Access direct messages located on settings tab.


(3) Authenticate against the application created in the above step.

This step engage with the authentication procedure of twitter and will provide you with another two pieces required to send the messages.


ACCESS_KEY
ACCESS_SECRET

The following script do this engage, just replace key and secret.


#!/usr/bin/python


import tweepy
CONSUMER_KEY = 'put here the consumer key'
CONSUMER_SECRET = 'put here de consumer secret'
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth_url = auth.get_authorization_url()
print 'Use this URL to get the PIN: ' + auth_url
PIN = raw_input('PIN?: ').strip()
auth.get_access_token(PIN)
print "ACCESS_KEY = '%s'" % auth.access_token.key
print "ACCESS_SECRET = '%s'" % auth.access_token.secret

Execute the script, copy and paste the url on your favorite browser and get the PIN. Introduce this PIN number and the script will print the access_key and access_secret required for the next step.

(4) Sending messages to Twitter

With the information gathered before and a script created using the Tweepy API it is very easy to send messages. The following code is depict the simple procedure of getting the message using a command line parameter and then send the message to twitter.


#!/usr/bin/python
#sendMessage2Twitter.py
import sys
import tweepy
CONSUMER_KEY = 'put here the consumer key'
CONSUMER_SECRET = 'put here the consumer secret'
ACCESS_KEY = 'put here the access key'
ACCESS_SECRET = 'put here the access secret'
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth.set_access_token(ACCESS_KEY, ACCESS_SECRET)
api = tweepy.API(auth)
api.update_status(sys.argv[1])

So, the last line get its argument from command line and update the status of our twitter, just by doing this.

./sendMessage2Twitter.py "This is a test of sending messages to twitter from command line using #teewpy and #python"

You can extend the script to gather any kind of information and send it to twitter. The next article will be dealing with getting info from a microcontroller and send it to twitter using this procedure.

VIDEO





Enjoy!

Read More......