d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Processing As An Applet > Works On Java But Not Js
Add Reply New Topic New Poll
Retired Moderator
Posts: 35,755
Joined: Jan 12 2007
Gold: 10,825.00
Trader: Trusted
Jan 28 2014 06:32pm
So normally you can change it to Javascript and then export application so you can use it on the web.
Whenever I try it in Javascript, I always receive a blank screen. Anyone have any tips on how I can display this on a web page?

Java Version:


Javascript version:


I'm controlling a robot which is powered via wifi using a WiFly shield and Arduino

Code
import controlP5.*; // Import library for sliders (http://www.sojamo.de/libraries/controlP5/)
import processing.net.*; // Import library for sockets

ControlP5 controlP5; // Declare library for sliders
Client myClient; // Declare socket connection

ImageButtons turnLeft; // Declare image buttons
ImageButtons turnRight;
ImageButtons holdForward;
ImageButtons holdReverse;
ImageButtons stepForward;
ImageButtons stepReverse;
ImageButtons spinLeft;
ImageButtons spinRight;
ImageButtons spinLeftStep;
ImageButtons spinRightStep;
ImageButtons camUp;
ImageButtons camDown;

int straight = 1; // Declare variables for sliders
int straightstep = 1;
int outerturn = 1;
int innerturn = 1;
int spinhold = 1;
int spinstep = 1;

int sliderOffsetX = 20; // Variables for position and size of sliders
int sliderOffsetY = 220;
int sliderWidth = 100;
int sliderHeight = 10;

String[] forwardArray = new String[8]; //Declare arrays which contain Lego PF speeds
String[] reverseArray = new String[8];

void setup()
{
size(205, 480); // Set size of canvas
background(255); // Set white background
controlP5 = new ControlP5(this); // Initialize library for sliders

myClient = new Client(this, " ", 2000); // Open socket connection

controlP5.setColorLabel(0x00ff0000); // Set colors for sliders
controlP5.setColorValue(0xffffffff);
controlP5.setColorForeground(0xffff0000);
controlP5.setColorBackground(0xff660000);

forwardArray[0] = "08"; // Fill Lego PF speed arrays
forwardArray[1] = "01";
forwardArray[2] = "02";
forwardArray[3] = "03";
forwardArray[4] = "04";
forwardArray[5] = "05";
forwardArray[6] = "06";
forwardArray[7] = "07";

reverseArray[0] = "08";
reverseArray[1] = "15";
reverseArray[2] = "14";
reverseArray[3] = "13";
reverseArray[4] = "12";
reverseArray[5] = "11";
reverseArray[6] = "10";
reverseArray[7] = "09";

// Initialize sliders
Slider s1 = controlP5.addSlider("straight" , 0, 7, 1, sliderOffsetX, sliderOffsetY + 0, sliderWidth, sliderHeight);
Slider s2 = controlP5.addSlider("straightstep", 0, 7, 1, sliderOffsetX, sliderOffsetY + 30, sliderWidth, sliderHeight);
Slider s3 = controlP5.addSlider("outerturn" , 0, 7, 1, sliderOffsetX, sliderOffsetY + 60, sliderWidth, sliderHeight);
Slider s4 = controlP5.addSlider("innerturn" , 0, 7, 1, sliderOffsetX, sliderOffsetY + 90, sliderWidth, sliderHeight);
Slider s5 = controlP5.addSlider("spinhold" , 0, 7, 1, sliderOffsetX, sliderOffsetY + 120, sliderWidth, sliderHeight);
Slider s6 = controlP5.addSlider("spinstep" , 0, 7, 1, sliderOffsetX, sliderOffsetY + 150, sliderWidth, sliderHeight);

// Configure slider labels
s1.captionLabel().set("Straight"); // Set label value
s1.captionLabel().toUpperCase(false); // Disable forced uppercase
s2.captionLabel().set("Straight Step");
s2.captionLabel().toUpperCase(false);
s3.captionLabel().set("Outer Turn");
s3.captionLabel().toUpperCase(false);
s4.captionLabel().set("Inner Turn");
s4.captionLabel().toUpperCase(false);
s5.captionLabel().set("Spin Hold");
s5.captionLabel().toUpperCase(false);
s6.captionLabel().set("Spin Step");
s6.captionLabel().toUpperCase(false);

s1.setNumberOfTickMarks(8); // Set number of ticks for sliders
s2.setNumberOfTickMarks(8);
s3.setNumberOfTickMarks(8);
s4.setNumberOfTickMarks(8);
s5.setNumberOfTickMarks(8);
s6.setNumberOfTickMarks(8);

// Declare and initialize the three button states
PImage imgUp = loadImage("controlpanelup.png");
PImage imgHover = loadImage("controlpanelhover.png");
PImage imgDown = loadImage("controlpaneldown.png");

// Initialize buttons
turnLeft = new ImageButtons(0 , 0 , 77, 78, imgUp, imgHover, imgDown);
turnRight = new ImageButtons(129, 0 , 79, 78, imgUp, imgHover, imgDown);
holdForward = new ImageButtons(78 , 0 , 50, 49, imgUp, imgHover, imgDown);
holdReverse = new ImageButtons(78 , 158, 50, 50, imgUp, imgHover, imgDown);
spinLeft = new ImageButtons(0 , 79 , 49, 50, imgUp, imgHover, imgDown);
spinRight = new ImageButtons(158, 79 , 50, 50, imgUp, imgHover, imgDown);
spinLeftStep = new ImageButtons(50 , 79 , 29, 50, imgUp, imgHover, imgDown);
spinRightStep = new ImageButtons(129, 79 , 28, 50, imgUp, imgHover, imgDown);
stepForward = new ImageButtons(78 , 50 , 50, 30, imgUp, imgHover, imgDown);
stepReverse = new ImageButtons(78 , 128, 50, 28, imgUp, imgHover, imgDown);
camUp = new ImageButtons(0 , 128, 77, 78, imgUp, imgHover, imgDown);
camDown = new ImageButtons(129, 128, 79, 78, imgUp, imgHover, imgDown);

}

void draw()
{
// Call update and display functions for the buttons
// Each button is updated with the corresponding slider value
// to form a command to be send via socket connection
turnLeft.update("z" + forwardArray[outerturn] + reverseArray[innerturn] + "1x", "z08080x");
turnLeft.display();
turnRight.update("z" + forwardArray[innerturn] + reverseArray[outerturn] + "1x", "z08080x");
turnRight.display();

holdForward.update("z" + forwardArray[straight] + reverseArray[straight] + "1x", "z08080x");
holdForward.display();
holdReverse.update("z" + reverseArray[straight] + forwardArray[straight] + "1x", "z08080x");
holdReverse.display();

stepForward.update("z" + forwardArray[straightstep] + reverseArray[straightstep] + "0x", "");
stepForward.display();
stepReverse.update("z" + reverseArray[straightstep] + forwardArray[straightstep] + "0x", "");
stepReverse.display();

spinLeft.update("z" + forwardArray[spinhold] + forwardArray[spinhold] + "1x", "z08080x");
spinLeft.display();
spinRight.update("z" + reverseArray[spinhold] + reverseArray[spinhold] + "1x", "z08080x");
spinRight.display();

spinLeftStep.update("z" + forwardArray[spinstep] + forwardArray[spinstep] + "0x", "");
spinLeftStep.display();
spinRightStep.update("z" + reverseArray[spinstep] + reverseArray[spinstep] + "0x", "");
spinRightStep.display();

// The camera does not use a slider, instead,
// it uses a fixed value in the Arduino code,
// that is why this only needs a short value.
camUp.update("zu", "zs");
camUp.display();
camDown.update("zd", "zs");
camDown.display();

}

// Button class from Processing examples
class Button
{
int x, y;
int w, h;
color basecolor, highlightcolor;
color currentcolor;
boolean over = false;
boolean pressed = false;


void pressed() {
if(over && mousePressed) {
pressed = true;
} else {
pressed = false;
}
}

boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
}

// Image button class from Processing examples
// Modified to support:
// - sprites
// - only one action when mouse is down
// - mouse up action
// - command values for up and down state
class ImageButtons extends Button
{
PImage base;
PImage roll;
PImage down;
PImage currentimage;

String downValue; // Declare var for command when button is pressed
String upValue; // Declare var for command when button is released
boolean mouseWasDown = false; // Declare var to keep track of mouse state

ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage iroll, PImage idown)
{
x = ix;
y = iy;
w = iw;
h = ih;
base = ibase.get(ix, iy, iw, ih); // Apply sprites
roll = iroll.get(ix, iy, iw, ih);
down = idown.get(ix, iy, iw, ih);
currentimage = base;
}

void update(String sDownValue, String sUpValue)
{
// Set new command values for up and down state
if(!pressed){
downValue = sDownValue;
}
upValue = sUpValue;

over();
pressed();
if(pressed) {
if(!mouseWasDown){ // Check to make sure command is sent once
myClient.write(downValue); // Send motor ON command via socket connection
mouseWasDown = true; // Make sure command will not be send again
}
currentimage = down;
} else if (over){
currentimage = roll;
} else {
currentimage = base;
}

if(!pressed && mouseWasDown){ // Check for mouse button release
myClient.write(upValue); // Send motor OFF command via socket connection
mouseWasDown = false; // Allow new ON command to be send again
}


}

void over()
{
if( overRect(x, y, w, h) ) {
over = true;
} else {
over = false;
}
}

void display()
{
image(currentimage, x, y);
}
}


This post was edited by Ryans on Jan 28 2014 06:35pm
Member
Posts: 1,358
Joined: Dec 30 2012
Gold: 0.10
Jan 28 2014 06:43pm
What version of the processing library are you using?
Retired Moderator
Posts: 35,755
Joined: Jan 12 2007
Gold: 10,825.00
Trader: Trusted
Jan 28 2014 06:49pm
We are using Processing 2.1
So the library is whichever .net came with the 2.1 ide
Member
Posts: 1,358
Joined: Dec 30 2012
Gold: 0.10
Jan 28 2014 06:59pm
Quote (Ryans @ Jan 28 2014 04:49pm)
We are using Processing 2.1
So the library is whichever .net came with the 2.1 ide


Hm, okay.

Are all of the necessary images / files in the applet folder for the web app, and are all of the necessary paths for finding these resources set?

This post was edited by SelfTaught on Jan 28 2014 07:00pm
Retired Moderator
Posts: 35,755
Joined: Jan 12 2007
Gold: 10,825.00
Trader: Trusted
Jan 28 2014 07:04pm
Yep. From what ive researched the new version does it automatically, but i tried to manually put in the images anyway.
Member
Posts: 1,358
Joined: Dec 30 2012
Gold: 0.10
Jan 28 2014 07:09pm
Quote (Ryans @ Jan 28 2014 05:04pm)
Yep. From what ive researched the new version does it automatically, but i tried to manually put in the images anyway.


Mind posting your javascript code?
Retired Moderator
Posts: 35,755
Joined: Jan 12 2007
Gold: 10,825.00
Trader: Trusted
Jan 28 2014 07:27pm
It is the same code. You are supposed to just change it to javascript then export it to the web. That is what ive seen tutorials do unless i am mistaken
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll