tips

Final project

Our code:

https://goo.gl/qNTxSK

https://gist.github.com/anonymous/9cc92c02cfb81852f9ca

Exercises functions

1.- Function console.log()

2.- Function alert

3.- Function add two numbers

4.- Function add two numbers [Taking values of input text]

Adding elements UI

 <canvas id="mycanvas"></canvas><br>
<button onclick="document.getElementById('tipo_figura').value='0';">Line</button>
<button onclick="document.getElementById('tipo_figura').value='1';">Circle</button>
<button onclick="document.getElementById('tipo_figura').value='2';">Square</button>
<button onclick="document.getElementById('tipo_figura').value='3';">Triangle</button>
<button onclick="document.getElementById('tipo_figura').value='4';">Point</button>
<button onclick="clear_processing();">Borrar</button><br>
5<input type="range" name="size_figura" id="size_figura" min="5" max="120" onchange="modify_size();">120<br>
<input type="color" name="favcolor" id="favcolor" value="#ff0000"><br>
 <button onclick="save_image();">Guardar</button><br>

<input type="hidden" name="tipo_figura" id="tipo_figura" value="0">

Working with functions

 <script type="application/javascript">
     var processingInstance;

     function clear_processing() {
         switchSketchState("clear_all");
     }
 
     function modify_size() {
         switchSketchState("modify_size");
     }
     
     function save_image()
     {
         switchSketchState("save_image");
     }
 
     function switchSketchState(function_name) 
     {
         if (!processingInstance) 
         {
            processingInstance = Processing.getInstanceById('mycanvas');
         }
         if (function_name == "clear_all") {
             processingInstance.clear_all();
         } 
         else if(function_name == "modify_size")
         {
             processingInstance.modify_size();
         }
         else if(function_name == "save_image")
         {
             processingInstance.save_image();
         }
     }
 </script>

Add functions Processing

<script type="text/processing" data-processing-target="mycanvas">
......
 void clear_all()
{
    background(125);
    //myDataRef.push({tipo:"clear_all"});
    //myDataRef.remove();
}

void modify_size()
{
    sizeFigura = parseInt(document.getElementById("size_figura").value);
}
void fill_color()
{
    String str_hex_color = document.getElementById("favcolor").value;
    fill(   parseInt(str_hex_color.substr(1,2),16),
            parseInt(str_hex_color.substr(3,2),16),
            parseInt(str_hex_color.substr(5,2),16) );
    //myDataRef.push({tipo:"fill",color: str_hex_color});
}        
....
</script>

Modifying Processing Functions

void mouseDragged()
{
    dibuja();
}
 
 void mouseClicked()
 {
     dibuja();
 }

Modifying Processing Functions

void dibuja()
{
    tipoFigura = parseInt(document.getElementById("tipo_figura").value);
    
    fill_color();
    
  //[0 Linea , 1 Circulo, 2 Cuadrado, 3 triangulo 4 punto]
    if(tipoFigura == 0)
    {
        stroke_color();
        strokeWeight(sizeFigura);
        line(pmouseX, pmouseY, mouseX, mouseY);
        
     //myDataRef.push({tipo:"line",pmouse_X: pmouseX, pmouse_Y: pmouseY,size_Figura: sizeFigura,mouse_X:mouseX,mouse_Y:mouseY});
    }
    else if(tipoFigura == 1)
    {
        ellipse(pmouseX, pmouseY, sizeFigura, sizeFigura);
      //myDataRef.push({tipo:"ellipse",pmouse_X: pmouseX, pmouse_Y: pmouseY,size_Figura: sizeFigura});
    }
    strokeWeight(1);
    stroke(255);
}

 void draw(){  
  
}

Socket

A socket is one endpoint of a two-way communication link between two programs running on the network. A socket is bound to a port number so that the TCP layer can identify the application that data is destined to be sent to.

192.168.1.254:8888

• JSON stands for JavaScript Object Notation
• JSON is lightweight data interchange format
• JSON is language independent *
• JSON is "self-describing" and easy to understand

JSON

Working with Firebase

https://www.firebase.com

Follow the tutorial

https://www.firebase.com/tutorial/#gettingstarted

Add firebase to our project

<script src="https://ccd94f6c793dfeaf64f2e6f3d004ebe03a292369.googledrive.com/host/0B7OEfN_CMe_zaVRQenRHaGxsQ2s"></script> 
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>

<script type="text/processing" data-processing-target="mycanvas">
        var myDataRef = new Firebase('Escibir aqui su direecion de firebase ...https://amber-....firebaseio.com/');
        int tipoFigura = 0;
        int sizeFigura = 30;
.....
</script>

Remote blackboard

https://gist.github.com/anonymous/9d647a2ca827d5a344f3