Recreating Excel (I know - it's for a client)

General Discussion Other

jonaslabe..

Recreating Excel (I know - it's for a client)

in General Discussion • Other • 4 months ago

Yes, so I need to prototype a kind of excel-behaviour. I want to create a grid of cells that I can highlight upon mouseclick, or drag-and-select (and highlight) a set of cells. I also want to be able to highlight a different set of cells upon clicking one. Also, I need a menu to pop up under the mouse pointer upon click. How the...? Any help greatly appreciated!

Replies(11)

quarks

Re: Recreating Excel (I know - it's for a client)

4 months ago

You might try the ControlP5 library (select Import Library from the menus).

Do the cell contents need to be editable? Do you want Excel like calculations?

jonaslabe..

Re: Recreating Excel (I know - it's for a client)

3 months ago

Thanks, quarks. Ah, yes the ControlP5, of course. If the cell contents were edible it would be awesome, copying and pasting (across several cells) would suffice in that case. Any tips on that?

akiersky

Re: Recreating Excel (I know - it's for a client)

3 months ago

I agree with quaks, cp5 will help a lot in this project. (@quarks, funny you aren't suggesting your own :)) from what I ahve found, controlp5 elements all have their labels set slightly differently, should be documented here

I was able, for example, to get and change the label of a Bang like this:

gen = cp5.get(Bang.class, "generate pdf").setLabel("Loading...");

"generate pdf" being the button name (not the label) and I am changing the text to 'Loading' I also save the item in a varable "gen" to change it later too. there are quite a few color and styling options in the classes too, but some are a bit obscure (I have to get the button, get the text inside, then start changing it... I guess there's not really another way to get at that). here's one of the longer ones I am using to create a textfield, populate it with the date and change the styling of it:

cp5.addTextfield("start month").setPosition(15, 70).setSize(50,25).setText(c.get(Calendar.MONTH)+1+"").
setFont(f2).setColorCursor(75).setColorForeground(75).setColorBackground(color(239, 244, 239)).
setColor(75).getCaptionLabel().setFont(f3).setText("month").toUpperCase(false).setColor(75);

I was quite surprised of how many options there were, albeit verbose to get to some of them. I think it could work well in your case.

Lastly, the controlEvent:

void controlEvent(ControlEvent theEvent) {
// awesome code to react to control events
}

Is useful to capture and react to all your buttons. Then it's just a matter of laying out all the buttons in a grid.

sounds like a (crazy client request...) ...fun project :)

good luck,

jonaslabe..

Re: Re: Recreating Excel (I know - it's for a client)

3 months ago

Thanks, ak. I'm not that skilled, but I appreciate your input!

quarks

Re: Re: Recreating Excel (I know - it's for a client)

3 months ago

@quarks, funny you aren't suggesting your own :)

Just noticed this thought I should respond.

Of course I prefer G4P to ControlP5, but then I am biased

The reason I didn't mention G4P was because it does not have a table type control though it would be possible to use a grid of GTextField objects since they support copy and paste (text)

andreas.s..

Re: Recreating Excel (I know - it's for a client)

3 months ago

Hi, here is a sketch that shows how to create an editable numberbox, maybe this can help you with the editing part, (this can also be adopted to other controllers like a bang, button, slider, etc. )

import controlP5.*;
// Editable Numberbox for ControlP5
// tested with processing 2.0
ControlP5 cp5;
void setup() {
size(400, 400);
cp5 = new ControlP5(this);
Numberbox n = cp5.addNumberbox("numbers")
.setSize(100, 20)
.setPosition(100, 100)
.setValue(0)
;
makeEditable( n );
}
void draw() {
background(0);
}
// function that will be called when controller 'numbers' changes
public void numbers(float f) {
println("received "+f+" from Numberbox numbers ");
}
void makeEditable( Numberbox n ) {
// allows the user to click a numberbox and type in a number which is confirmed with RETURN
final NumberboxInput nin = new NumberboxInput( n ); // custom input handler for the numberbox
// control the active-status of the input handler when releasing the mouse button inside
// the numberbox. deactivate input handler when mouse leaves.
n.addCallback(new CallbackListener() {
public void controlEvent(CallbackEvent theEvent) {
if (theEvent.getAction()==ControlP5.ACTION_RELEASED) { nin.setActive( true ); }
else if (theEvent.getAction()==ControlP5.ACTION_LEAVE) { nin.setActive( false ); nin.submit(); }
}
}
);
}
// input handler for a Numberbox that allows the user to
// key in numbers with the keyboard to change the value of the numberbox
public class NumberboxInput {
String text = "";
Numberbox n;
boolean active;
NumberboxInput(Numberbox theNumberbox) {
n = theNumberbox;
registerMethod("keyEvent", this );
}
public void keyEvent(KeyEvent k) {
// only process key event if input is active
if (k.getAction()==KeyEvent.PRESS && active) {
if (k.getKey()=='\n') { // confirm input with enter
submit();
return;
} else if(k.getKeyCode()==BACKSPACE) {
text = text.isEmpty() ? "":text.substring(0, text.length()-1);
//text = ""; // clear all text with backspace
}
else if(k.getKey()<255) {
// check if the input is a valid (decimal) number
final String regex = "\\d+([.]\\d{0,2})?";
String s = text + k.getKey();
if ( java.util.regex.Pattern.matches(regex, s ) ) {
text += k.getKey();
}
}
n.getValueLabel().setText(this.text);
}
}
public void setActive(boolean b) {
active = b;
if(active) {
n.getValueLabel().setText("");
text = "";
}
}
public void submit() {
if (!text.isEmpty()) {
n.setValue( float( text ) );
text = "";
}
else {
n.getValueLabel().setText(""+n.getValue());
}
}
}

andreas schlegel, http://www.sojamo.de

jonaslabe..

Re: Re: Recreating Excel (I know - it's for a client)

3 months ago

Thanks, andreas. I'm in over my head already, but I appreciate your answer. :)

kevinwork..

Re: Recreating Excel (I know - it's for a client)

3 months ago

Is there a reason you have to use Processing for this and not, say, Java? It would be pretty trivial in Java Swing, just a JTable and a JPopupMenu.

You might even be able to integrate Java with an existing Processing project. But then again you could also just use an open source spreadsheet viewer...

jonaslabe..

Re: Re: Recreating Excel (I know - it's for a client)

3 months ago

Nope, no reason other than my faint familiarity with Processing as compared to Java. But your suggestions seem sound, I'll grab a developer here and have a look at it, thanks!

PhiLho

Re: Recreating Excel (I know - it's for a client)

3 months ago

Indeed, Processing isn't the perfect tool for such task!
Swing is more suited to your needs, with robust and well documented Swing library addressing exactly this goal.
Alternatively, you can take a look at JavaFX, more graphically oriented, pushed as replacement of Swing.
Or Apache Pivot, why not?
Or, even, GWT, offering the advantage of running on a browser (but with the disadvantage of needing a server, depends on the needs of the client).
All this use Java, which you already use with Processing, so you are not in a totally foreign ground. But the learning curve will be step anyway, as these GUI libraries are extensive and huge!

jonaslabe..

Re: Re: Recreating Excel (I know - it's for a client)

3 months ago

All righty, thanks for your advice, Philho. I don't think I'm going to try to do this all by myself, and your pointers are much appreciated!

Top Reply