Beagle Board - beagleboard.org

Things used in this project

Hardware components:
10-turn linear potentiometer (10k)
×2
Momentary switch
×2
09590 01
LED (generic)
×1
Beagleboardblack
BeagleBoard.org BeagleBone Black
×1
Structural bracket
×2
Retractable badgeholder
×2
Spool
×4
Mfr 25frf52 1k sml
Resistor 1k ohm
×2
100 kΩ Resistor
×1
Hand tools and fabrication machines:
Drill press
Jigsaw
Hand drill
Vice
File

Schematics

Back to the Drawing Board Schematic
Sch

Code

Main CodeJavaScript
This file contains the logic for getting values for the pot and displaying it on the screen. Bonescript and Processing are required for it to run with the BBB.
<html>
  <head>
    <script src = "processing.js"></script>
    <script src = "bonescript.js"></script>
  </head>
<body>

<canvas id="sketch"></canvas>
  
<script id = "script1" type  = "text/javascript">
(function() {  
  
  var canvas = document.getElementById('sketch');
  var pjs = new Processing(canvas);
  
  var LED = "P9_15";
  var BUTTON = "P9_11";
  var COLORBUTTON = "P9_13";  
  var X_POT = "P9_33";
  var Y_POT = "P9_35";
  
  
  setTargetAddress('192.168.7.2', {initialized: run});
  
  //set up bonescript
  function run() 
  {
    var b = require('bonescript');
    b.pinMode(BUTTON, b.INPUT);
    b.pinMode(COLORBUTTON, b.INPUT);
    b.pinMode(LED, b.OUTPUT);
    b.pinMode(X_POT, b.INPUT);
    b.pinMode(Y_POT, b.INPUT);
    b.digitalWrite(LED, b.LOW);

    //canvas setup
    var drawPoint = false;
    var black = pjs.color(0,0,0);
    var red = pjs.color(255,0,0);
    var green = pjs.color(0,255,0);
    var blue = pjs.color(0,0,255);
    var currentColor = black;
    var COLORS = new Array(blue, green,red, black);
    var colorIndex = 0;
      var iterations = 0;
    

    //board and drawing functionality setup
    var drawMode = false;
    var startNewLine = true;
    var xcoord = 0;
    var ycoord = 0;
    var prev_xcoord = 0;
    var prev_ycoord = 0;
    var xmin = 0.15;
    var ymin = 0.15;
    var xmax = 0.95;
    var ymax = 0.95;
    var xraw = 0;
    var yraw = 0;
    var board_width = 0;
    var board_height = 0;
    var canvas_width = 512;
    var canvas_height = 512;


    pjs.setup = function()
    {

      pjs.size(canvas_width,canvas_height);
      pjs.background(240);
      pjs.fill(black);
      pjs.rect(450,450,62,62);
      pjs.fill(red);
      pjs.rect(450,388,62,62);
      pjs.fill(green);
      pjs.rect(450,326,62,62);
      pjs.fill(blue);
      pjs.rect(450,264,62,62);

    };
    
    pjs.draw = function()
    {
     
      if (pjs.keyPressed==true)
      {
        if (pjs.key=='c' || pjs.key=='C')
        {
          pjs.setup();
        }
      }

      b.digitalRead(BUTTON, onButtonPress);
        if (iterations >20)
        {
            b.digitalRead(COLORBUTTON, onColorSwitch);
            iterations = 0;
        }
        else{
            iterations++;
        }

      if (drawMode==true && xcoord < 450)
      {
        pjs.strokeWeight(2);
        pjs.stroke(currentColor);
        pjs.beginShape(pjs.LINES);
        pjs.vertex(prev_xcoord, prev_ycoord);
        pjs.vertex(xcoord, ycoord);
        prev_xcoord = xcoord;
        prev_ycoord = ycoord;
          pjs.endShape();

      }
    }
    
    function onColorSwitch(y)
      {
         console.log(colorIndex)
         if(y.value==b.LOW)
        {
            console.log("low")
            if(colorIndex == COLORS.length-1)
            {
                colorIndex = 0;
            }
            else
            {
                console.log("in increment")
                colorIndex ++;
            }
            switch (colorIndex)
            {
                case 0:
                                    console.log("in 0")

                    currentColor = COLORS[0];
                    break;
                case 1:
                                    console.log("in 1")

                    currentColor=COLORS[1];
                    
                    break;
                case 2:
                                    console.log("in 2")

                    currentColor = COLORS[2];
                    break;
                case 3:
                                    console.log("in 3")

                    currentColor = COLORS[3];
                    break;
            }
        }
        
      }
    


    //determine how to handle button HIGH vs button LOW
    function onButtonPress(x)
    {    
         var temp = voltageToCoords()
      if (x.value==b.LOW)
      {
        b.digitalWrite(LED, b.HIGH);  //turn on indicator LED

        if (temp ==false)
        {
          drawMode = false;
          return;            
        }
        if (startNewLine==true)
        {
          //sleep(200);
          prev_xcoord = xcoord;
          prev_ycoord = ycoord;
          startNewLine = false;       //currently drawing this line, so set to false
        }

        //select a color
        if (xcoord > 450 && xcoord < 512 && ycoord > 264 && ycoord < 326)
          currentColor = blue;
        if (xcoord > 450 && xcoord < 512 && ycoord > 326 && ycoord < 388)
          currentColor = green;
        if (xcoord > 450 && xcoord < 512 && ycoord > 388 && ycoord < 450)
          currentColor = red;
        if (xcoord > 450 && xcoord < 512 && ycoord > 450 && ycoord < 512)
          currentColor = black;
        drawMode = true;
      }
      else
      {
        drawMode = false;           //turn off drawing mode
        b.digitalWrite(LED, b.LOW); //turn off indicator LED
        startNewLine = true;        //get ready to start new line
      }
    }

    function voltageToCoords()
    {
      b.analogRead(X_POT, readX);
      function readX(x) 
      { 
        xraw = x.value;
      }
      b.analogRead(Y_POT, readY);
      function readY(y) 
      { 
        yraw = y.value;
      }
      xcoord = ((xraw - xmin) / (xmax - xmin)) * canvas_width;
      ycoord = ((yraw - ymin) / (ymax - ymin)) * canvas_height;

      if (xcoord < 0 || ycoord < 0)
        return false;
    }
    function sleep(milliseconds)
    {
      var start = new Date().getTime();
      for (var i=0; i<1e7; i++)
      {
        if ((new Date().getTime() - start) > milliseconds)
          break;    
      }
    }

    pjs.setup();
    pjs.draw();
    pjs.loop();

}
})(); 

</script>
</body>
</html>

Credits

Mv5ehjiqwy0lasfp1y4h
Priscilla Cheng
0 projects • 2 followers
Contact
2053e816d276097ab1b86f40aba32552
Tony Abdo
0 projects • 3 followers
Contact
14e8def823119563ed4ee9aa4adfb719
Rahul Ramakrishnan
0 projects • 2 followers
Contact

Replications

Did you replicate this project? Share it!

I made one

Love this project? Think it could be improved? Tell us what you think!

Give feedback

Comments

Add projectSign up / Login