- This topic has 3 replies, 3 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hello all…I am using processing to create something like a whiteboard. I have decided to use the layers API as a way to enable my whiteboard to allow the manipulation of individual “drawings”. Yes, I am a newbie with processing and Java (background is C# and C++). Also, I am not looking for somebody to write this program…just to help guide me to the correct method of implementing the Layers library.
Instead of creating a panel of buttons, I have decided to try to create a simple radial menu for changing colors. Essentially, when I right-click, it pops up a new layer with different colored buttons surrounding my cursor. This works perfectly…as soon as I click the button for that color, I can now draw to my original canvas with that selected color. The problem I am having is this:
As soon as I select the desired color by pressing the button on the newly created layer, I would like that layer to be removed. I understand I have to use a ListIterator and the remove() function, but I am unsure of where it will be placed at. Any guidance? I am posting some of my code below. I apologize in advance for the heavy commenting…this was done to explain to my colleagues how to implement the Layers library.
Thanks guys…and if you can think of any better ways of accomplishing this task, I am open to suggestions!
MAIN:
import com.nootropic.processing.layers.*;
AppletLayers layers; // You must declare an object of type AppletLayers. It doesn't have to be called "layers"
boolean colorWheelDisplayed = false; // Global variable used to determine if the color wheel is presently displayed
// WHITEBOARD SETUP FOR MAIN SCREEN...BACKGROUND IS OPAQUE (NOTICE THE LACK OF AN ALPHA VALUE)
void setup() {
size(1024, 768);
background(255);
stroke(0);
layers = new AppletLayers(this); // This creates a new object (layers) of type AppletLayers and passes (this) as an argument...must have (this) passed
}
// DRAW METHOD FOR DRAWING TO THE MAIN BACKGROUND (FIRST LAYER)
void draw() {
cursor(CROSS);
stroke(currentcolor); // currentcolor is updated depending on the button selected (comes from ColorWheel class)
if(mousePressed && (mouseButton != RIGHT)) { // This says just to draw as long as the right mouse button isn't
line(mouseX, mouseY, pmouseX, pmouseY); // clicked (otherwise, you get a dot when bringing up the color wheel)
}
}
// METHOD CALLED WHEN ANY MOUSE BUTTON IS RELEASED
void mouseReleased() {
if((mouseButton == RIGHT) && (colorWheelDisplayed == false)) { // If the right button is released and the color wheel isn't on screen...
layers.addLayer(new ColorWheel(this)); // ...add a new layer of type ColorWheel (sets up and draws according to the ColorWheel class...
colorWheelDisplayed = true; // ...and now our color wheel is on screen.
}
else if((mouseButton == RIGHT) && (colorWheelDisplayed == true)) { // If the right button is released and the color wheel isn't on screen...
//////NEED CODE HERE////// // ...then dismiss the color wheel and make no changes (cancelling the right-click).
}
else if((mouseButton == LEFT) && (colorWheelDisplayed == true)) { // If the left button is released and the color wheel is on screen...
stroke(currentcolor); // ...set our pen color to whatever was selected...
//////NEED CODE TO REMOVE THE COLOR WHEEL////// // ...dismiss the color wheel...
colorWheelDisplayed = false; // ...and now our color wheel is no longer on screen.
}
else if((mouseButton == LEFT) && (colorWheelDisplayed == false)) { // If the left button is released and the color wheel is on screen...
/////I DON'T KNOW WHAT YET....JUST DRAW OR SOMETHING//// // ...I don't think we need to do anything here and we can delete this else if.
}
}
// ***YOU MUST INCLUDE THIS METHOD TO WORK WITH THE LAYERS LIBRARY***
void paint(java.awt.Graphics g) {
if (layers != null)
{
layers.paint(this);
}
else {
super.paint(g);
}
}
ColorWheel Class:
********************************
******* COLORWHEEL CLASS *******
*******************************/
ColorButton redb, blueb, greenb, blackb, orangeb, purpleb; // Creates objects of type ColorButton (redb = red button, etc)
color currentcolor; // Global declaration of color variable currentcolor
// COLORWHEEL CLASS FOR SETTING UP THIS LAYER EACH TIME IT IS CALLED
class ColorWheel extends Layer { // ***This code is needed by layers library***
ColorWheel(PApplet parent) { // ***This code is needed by layers library***
super(parent); // ***This code is needed by layers library***
} // ***This code is needed by layers library***
// SETUP METHOD FOR SETTING UP THIS LAYER
void setup() {
background(0, 0); // Background for this layer MUST be transparent (Alpha set to 0)
color baseColor = color(0);
// Define red button
color buttoncolor = color(255, 0, 0); // Color of this button (NOTICE color IS ONLY DECLARED THIS FIRST TIME)
color highlight = color(255, 102, 102); // Color of this button when mouse cursor is over it
redb = new ColorButton(mouseX-30, mouseY-20, 30, buttoncolor, highlight); // Location of this button in relation to mouse curson when called
// Define green button
buttoncolor = color(0, 255, 0); // NOTICE color IS NO LONGER PREFACING buttoncolor
highlight = color(0, 255, 102);
greenb = new ColorButton(mouseX, mouseY-40, 30, buttoncolor, highlight);
// Define blue button
buttoncolor = color(0, 0, 255);
highlight = color(102, 102, 255);
blueb = new ColorButton(mouseX+30, mouseY-20, 30, buttoncolor, highlight);
// Define black button
buttoncolor = color(0, 0, 0);
highlight = color(102, 102, 102);
blackb = new ColorButton(mouseX-30, mouseY+20, 30, buttoncolor, highlight);
// Define orange button
buttoncolor = color(204, 102, 0);
highlight = color(255, 153, 102);
orangeb = new ColorButton(mouseX, mouseY+40, 30, buttoncolor, highlight);
// Define purple button
buttoncolor = color(127, 0, 127);
highlight = color(204, 103, 255);
purpleb = new ColorButton(mouseX+30, mouseY+20, 30, buttoncolor, highlight);
}
// DRAW METHOD CALLED FIRST TIME
void draw() {
update(mouseX, mouseY); // Call the update method with the current mouse coordinates (for updating the animation)
redb.display(); // Display the buttons...
greenb.display(); // ...
blueb.display(); // ...
blackb.display(); // ...
orangeb.display(); // ...
purpleb.display(); // ...
//ListIterator li = layers.getListIterator(); // I WAS PLAYING AROUND HERE TRYING TO FIGURE OUT WHERE TO PUT THE LISTITERATOR FOR COLORWHEEL REMOVAL
}
}
// CLASS WHICH CREATES THE COLOR BUTTONS USED ON THE COLOR WHEEL AND IN THE COLORWHEEL CLASS
class ColorButton extends Button
{
ColorButton(int ix, int iy, int isize, color icolor, color ihighlight)
{
x = ix; // Storing passed arguments into local variables...
y = iy; // ...
size = isize; // ...
basecolor = icolor; // ...
highlightcolor = ihighlight; // ...
currentcolor = basecolor; // ...
}
// OVER METHOD FOR DETERMINING IF MOUSE CURSOR IS OVER THE BUTTON
boolean over()
{
if( overCircle(x, y, size) ) { // If the mouse is over a circle at position x,y and of size 'size'...
over = true; // ...we are over it...
return true; // ...so return true...
}
else {
over = false; // ...otherwise we're not over it...
return false; // ...so return false.
}
}
// DISPLAY METHOD FOR DISPLAYING THE ACTUAL BUTTON
void display()
{
stroke(255);
strokeWeight(0);
fill(currentcolor);
ellipse(x, y, size, size);
}
}
// GLOBAL MOUSECLICKED METHOD FOR ACTION TAKEN WHEN THE MOUSE IS CLICKED
void mouseClicked() { // If the mouse is clicked (pressed and released)...
if(redb.pressed()) { // ...and the red button was pressed in that click and release...
currentcolor = redb.basecolor; // ...set our currentcolor to the red button's base color...
}
else if(blueb.pressed()) { // ...and so on and so on...
currentcolor = blueb.basecolor;
}
else if(greenb.pressed()) {
currentcolor = greenb.basecolor;
}
else if(blackb.pressed()) {
currentcolor = blackb.basecolor;
}
else if(orangeb.pressed()) {
currentcolor = orangeb.basecolor;
}
else if(purpleb.pressed()) {
currentcolor = purpleb.basecolor;
}
}
// UPDATE METHOD WITH MOUSE COORDINATES PASSED
void update(int x, int y)
{
if(locked == false) { // If the "toggle" is turned off...i.e. the base color is displayed...
redb.update(); // ...set to true and switch to highlight color if mouse coordinates are in this button... (REMEMBER...update() always returns true)
greenb.update(); // ...or do the same if it's this button instead...
blueb.update(); // ... and so on and so on...
blackb.update();
orangeb.update();
purpleb.update();
}
else { // If the "toggle" is turned on...
locked = false; // ...turn it off
}
}Sorry for the slow response. There are several things I needed to do in order to get your application working. Nice application, and nice coding! The updated code is attached.
First, add and remove layers from the draw() method like this. Keep track of the colorWheel Layer in a variable so you can find it later. Your mouseReleased() method can simply set the colorWheelDisplayed variable appropriately, then draw() will act on it.
void draw() {
if ((colorWheelDisplayed) && (colorWheel == null)) {
colorWheel = new ColorWheel(this);
layers.addLayer(colorWheel);
} else {
if ((!colorWheelDisplayed) && (colorWheel != null)) {
// need to remove the color wheel layer.
ListIterator li = layers.getListIterator();
while (li.hasNext()) {
Layer l = (Layer)li.next();
if (l == colorWheel) {
li.remove();
colorWheel = null;
}
}
}
}
...
Secondly, your buttons need to draw themselves on the ColorWheel layer instead of on the main drawing surface. So in the ColorWheel draw() method, call display() like this:
redb.display(this);
greenb.display(this);
...
And display() becomes this:
void display(Layer l)
{
l.stroke(255);
l.strokeWeight(0);
l.fill(currentcolor);
l.ellipse(x, y, size, size);
}
One more thing to worry about. To avoid a race condition with event processing, add this to the beginning of your mouseClicked() method:
void mouseClicked() {
if (!setupDone) {
return;
}
…where setupDone is a boolean that you set to true at the end of ColorWheel setup.
Thanks Michael…makes sense now!
I should be able to implement this in creating and removing other layers. Thanks again!
- You must be logged in to reply to this topic.