16-1.Design GUI with illustrator

First, I used Adobe illustrator and designed the appearance.This monster is "Drakee" who is the monster of japanese famous video game "DRAGON QUEST".

16-2 Programming with processing

Next, I programmed with processing. The design is very simple. I imported date (year,month,day) and temperature from my Drakee board with serial communication. The program is below.

        import processing.serial.*;
        Serial serial;
        float x;
        float B;
        float R;
        float V;
        float r;
        float T;
        int value;
        int b1;
        int b2;
        int b3;
        int b4;
        int b5;
        PImage img;

        void setup() {
          size(560, 340);
          serial = new Serial(this,"/dev/tty.usbserial-FTGO00D8", 9600);
        }

        void draw() { 
           background(255);

           if ((b1 == 1) & (b2 == 2) & (b3 == 3) & (b4 == 4)){
           V = 2.5 - b5*5.0/(20.0*512.0);
           R = 10000.0/(5.0/V-1.0);
           B = 3750.0;
           r =  10000.0;
           T = 1.0/(log(R/r)/B+(1/(25.0+273.15))) - 273.15;
           println(T);
           }

           fill(0,0,0);
           PFont myFont = loadFont("PixelMplus12-Bold-34.vlw");
           textFont(myFont);
           text(year(), 85, 58); 
           text(month(),85, 96); 
           text(day(), 85, 132);
           text(T, 70, 170); 
           text("FABACADEMY2016 WEEK16 ASSIGNMENT", 10, 280); 
           text("INTERFACE & APPLICATION PROGRAM*", 10, 320); 
           img = loadImage("pic.png"); 
           image(img, 10, 10);

        }

        void serialEvent(Serial p){
            b1 = b2;
            b2 = b3;
            b3 = b4;
            b4 = b5;
            b5 = p.read();
        }
           

16-3. GUI & DEMO Movie

This is my GUI. In the upper left of the window , we can see temperature changing and today's date.

Download : temp_drakee.zip// include .pde, data and img files

And, this is DEMO movie.