Processing 1.0 - Processing Discourse - rich gui library? other solution?

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

‹ Previous Topic | Next Topic ›

Pages: 1

rich gui library? other solution? (Read 2480 times)

posiXtom

rich gui library? other solution?
Feb 15^th, 2010, 12:40pm

Hi,
my first (but certainly not last) post on this forum.

for my master in audiovisual arts i'm using processing as a visual layer for a user to communicate with arduino.

i'm building an interactive multi-sensory-room for people with a handicap.

now, my question is, is it possible to make my interface look like my photoshop sketch?

or is this far-fetched?
if this is possible,
it would be nice to receive some general, or specific guidance.

thx in advance,
Tom

posiXtom YaBB Newbies Offline Posts: 15	Re: rich gui library? other solution? Reply #1 - Feb 15^th, 2010, 12:44pm example of how i would like my interface to look like: http://img97.imageshack.us/img97/3943/interfacebijsturen.jpg

antiplastik

Re: rich gui library? other solution?
Reply #2 - Feb 15^th, 2010, 1:02pm

The buttons will be definitely easy to code. The knobs might be a bit harder, but I think you can do that with 2 images, some arcs and masks.

Have a look at the learning section > buttons. This OOP example is a good start if you want to build your own GUI elements :
http://processing.org/learning/topics/imagebutton.html

c.a. church YaBB Newbies Offline Posts: 4	Re: rich gui library? other solution? Reply #3 - Feb 15^th, 2010, 1:29pm I am creating a UI right now, using a layout derived from photoshop and images. Been having good luck so far using the controlp5 library. Haven't thought of doing anything like those circular fill areas, so couldn't tell you how to do that w/ CP5. !c

seltar

Re: rich gui library? other solution?
Reply #4 - Feb 15^th, 2010, 3:44pm

Code:


float p = 35; // PERCENT
PGraphics pgMask = createGraphics(pg.width,pg.height, JAVA2D);
  pgMask.beginDraw();
  pgMask.smooth();
  pgMask.stroke(255);
  pgMask.noStroke();
  pgMask.fill(255);
  pgMask.arc(pgMask.width/2,pgMask.height/2,pgMask.width,pgMask.height, TWO_PI-PI/2, TWO_PI-PI/2 + TWO_PI*(p/100));
  pgMask.endDraw();

Something like that should get you going..
Then just apply the mask to the image ( img.mask(pgMask); )
and adjust the width / height of the mask to be the same as your image

good luck

I'm bored, therefore I program
http://seltar.org > seltar's special place
http://snippet.seltar.org > seltar's snippet palace
http://libraries.seltar.org > seltar's libraries

posiXtom YaBB Newbies Offline Posts: 15	Re: rich gui library? other solution? Reply #5 - Feb 16^th, 2010, 3:43am thx for the replies, should give me a kickstart. will keep you posted on the progress!

R_the

Re: rich gui library? other solution?
Reply #6 - Feb 18^th, 2010, 1:32pm

Seltar thank you for that, I didn't even know there was a mask function, that will make my life a lot easier.

I've quickly extended the example a bit further for my own purposes and thought I'd post it:
lastsanity.com/downloadables/roundControlTest.zip

@posiXtom: I hope you didn't mind me cutting up the image you posted in photoshop for the example above. Show us a video, or something, when you finish, I'm fiddling around in this same area and am curious to see how your project turns out.

antiplastik YaBB Moderator Offline Posts: 699 France	Re: rich gui library? other solution? Reply #7 - Feb 18^th, 2010, 3:43pm I've reused R_the example and added some OOP, so you can easily put many controls on the same panel http://n.clavaud.free.fr/processing/20100219-roundControlTest_OOP.zip

R_the

Re: rich gui library? other solution?
Reply #8 - Feb 19^th, 2010, 8:30am

Nice work antiplastik

. I've integrated this into my own mildly insane branching tree gui toolkit I've been working on, but I figured I should post something... less involved.

I've been trying to think of other ways to improve these controls some:

If you click and drag, and then move your mouse outside of the control, the farther your mouse is from the control, the smaller the change per degree. This would allow very precise changes for things like floats. And allow for an easily variable level of precision.

R_the YaBB Newbies Offline Posts: 8	Re: rich gui library? other solution? Reply #9 - Feb 19^th, 2010, 10:41am Alright I decided to have a try at the changeable sensitivity: http://www.lastsanity.com/downloadables/roundControlTest_OOP2.zip Things were getting messy with the math doing the trig myself, so I changed everything to use PVector for some simplicity.

posiXtom

Re: rich gui library? other solution?
Reply #10 - Feb 19^th, 2010, 3:27pm

wow, some very nice stuff!

I don't care that you guys re-use the image.

I'm currently finishing up some other stuff for school and then I'll dive into this...

instead of draging the controls, I'm using those circles to display the amount of time a unit is used in a session.

A full explanation of my project and the further challenges for the gui will folow in a couple of days!

thx already for the great help and I'm glad i sparked your creativity!

antiplastik YaBB Moderator Offline Posts: 699 France	Re: rich gui library? other solution? Reply #11 - Feb 20^th, 2010, 2:30am I've changed the way the knobs react to the mouse : just drag up and down. I like it better that way (and the maths are waaay more simple)! http://n.clavaud.free.fr/processing/20100220-roundControlTest_OOP3.zip

posiXtom

Re: rich gui library? other solution?
Reply #12 - Feb 21^st, 2010, 5:23pm

i've further worked out the interface.
simplified it here and there.

http://img28.imageshack.us/img28/7711/example1u.jpg
http://img294.imageshack.us/img294/5885/example2qm.jpg
http://img186.imageshack.us/img186/7429/example3.jpg

thx again for solving the round-knob.
other issues that are rising for me are:
- tabbed interface
- volume slider
and a selection menu that gets it's options out of a database.

note that this interface will be used on a touch screen,
that's why everything has to be so simple and large.

looking forward to your input!
Tom

posiXtom

Re: rich gui library? other solution?
Reply #13 - Feb 25^th, 2010, 6:13am

Today i updated your script to work in my application

each module now can be started and stopped
and the image shows the time the module has been on in function of the total time.
you can test it here:

http://cmdstud.khlim.be/~tluyten/Master/roundControlTest_OOP5.zip

now, as you can see I use the polymonkey lib
when the module isn't turned on i get this print "the stopwatch hasn't started yet" although i'm not printing!
I'm not so experienced, so i don't know how to alter the source... any ideas?

second problem is the tabbed interface.
i found the controlP5 lib usefull, but i need a little help setting this up using images.

thx in advance, your help is much appreciated!

p.s. for the latest developments on the whole project check
http://blog.fiftylab.be

thx

Pages: 1

‹ Previous Topic | Next Topic ›