Prototype Library

m.peres

in Library and Tool Development • 1 years ago

Hello folks,

I would like to share with you something I have been working in the last couple of days, or nights. Basically it is a library that allows you to quick sketch UI like interactions in Processing. There is also a Tweener library built in with support to callbacks and blocking events.

I have just put this together this weekend and it is far from being bug free. With that said, I would love to hear your feedback on possible features and if you see yourself using something like this. So far, this is what is included in the package:

Generate graphics based on blueprints that can be reutilized;

tween fields with support to callbacks and blocking the UI (optional);

Adding parts and subparts. All the transformations are handled by the library.

Changing the pivot point of any part at runtime;

Change properties like x, y, alpha, width, scale... etc.

'Relative to' point. This is trick to explain, but it basically attaching the pivot point of a child to a point in the parent.

Support to mouse events, including mouse wheel.

Support to Part events (on clicked, on pressed, etc) with support to arbitrary shapes (non square stuff).

There is an example included with some comments on it. If you would like to contribute, feel free to drop me a line.

http://www.miguelperes.com/processing.org/Prototype.zip

Replies(17)

m.peres

Prototype Library (New Version)

1 year ago

I have put a lot of work in this code since I've made the last post. among the changes:

ADDED:

- Part behaviors (See examples)

- support to mouse events based on pixel, square and circle collision working together with transformation.

- Code cleaned and optimized, texture are cached and loaded only once. Parts using the same texture share the same image.

- Shape part (allows you to use drawing functions to generate a texture.

- PartUpdated, you can now add a listener to any part and get notified when one of its properties have changed.

- 9 scale grid.

- lots of extra mouse events, like onStarDragging, onStopDragging, onClick, onRollOver, OnRollOut...

- new examples.

- source code.

- lots of bug fixing and refactoring.

REMOVED:

- No blueprints anymore, they were kind of useless.

- Tweener removed, I will add it again in the next release.

From now on, I will try to focus on adding new behaviors, code more widgets examples and a dedicated Text Part. and bug fixing. This image is from a quick Slider I did using the library. the Source code is inside the examples folder. The .PSD files are also there for the more design inclined, like me :)

http://www.miguelperes.com/processing.org/Prototype.zip

m.peres

Re: Prototype Library

1 year ago

For the Eclipse users out there, the source is also available at GitHub:

https://github.com/mperes/Prototype

datamosh

Re: Prototype Library

1 year ago

Hi,

in processing 2.0a1 on both examples i got this error:

ClassCastException: processing.opengl.PGraphicsOpenGL cannot be cast to processing.core.PGraphics3D

Exception in thread "Animation Thread" java.lang.ExceptionInInitializerError

at prototype.PartBuilder.behaviors(Unknown Source)

at ProgressBar$MySlider.<init>(ProgressBar.java:84)

at ProgressBar.setup(ProgressBar.java:41)

at processing.core.PApplet.handleDraw(Unknown Source)

at processing.core.PApplet.run(Unknown Source)

at java.lang.Thread.run(Thread.java:662)

Caused by: java.lang.ClassCastException: processing.opengl.PGraphicsOpenGL cannot be cast to processing.core.PGraphics3D

at prototype.Utils.<clinit>(Unknown Source)

... 6 more

m.peres

Re: Prototype Library

1 year ago

Hi datamosh,

Thanks for letting me know. I double checked the casting that was causing the error and it is now running fine on Processing 2.0a4 (Mac). Please let me know if it works for you:

http://www.miguelperes.com/processing.org/Prototype_fixed.zip

datamosh

Re: Prototype Library

1 year ago

ok, now it works on 2.0a1(PC)

is the ProgressBar example expected to progress?

in the same example is declared a PFont not used.

m.peres

Re: Prototype Library

1 year ago

Hi datamosh,

The example should be actually named Slider, as it is actually that and not a progress bar. Just drag the knob :) Thanks for pointing out the PFont, I think I left it there from a previous sketch when the value of the progress bar was being shown on the screen.

datamosh

Re: Re: Prototype Library

1 year ago

actually I cannot drag the knob! :)

m.peres

Re: Prototype Library

1 year ago

I have upped a new version with all the fixes you've pointed out. I have also added a small feature to augment the performance of the library: No calculation is done over Parts that are out of the screen area. By default this check is done every 15 frames, you can change this interval by calling prototype.checkOffScreenParts(int), where int is the frame interval. Set the value to 0 to force performing calculation over parts out of the screen.

http://www.miguelperes.com/processing.org/Prototype.zip

datamosh

Re: Re: Prototype Library

1 year ago

I still have the same issue, cannont interact...

I didn't find any mouseX, mouseY, maybe they should be called somewhere?

In the scaleRotation example the only interaction I get is the stop of rotation,

and i can't get the change of the cursor, i tryed cursor(CROSS) too, but it remains the same...

m.peres

Re: Prototype Library

1 year ago

Hi datamosh,

Every part has its own model, so calculations are mainly done over localMouseX and localMouseY, which you can see being used into the rotation example. I am not sure what is happening in your case as no error is being shown. I've tried on both 1.5 and 2.0a4 in my mac and it seen to be working fine. I don't have 2.0a1 here, so I cant say if it is a bug with the version, platform, or in my code. I will try running the lib on an windows virtual machine, in the meantime could you please try updating to 2.0a4 and see if you get better results?

datamosh

Re: Re: Prototype Library

1 year ago

I cannot run it on 2.0a4 because of an error with openGL (no gluegen-rt in java.library.path) that I have since java update 1.6 and that was fixed on 2.0a1 (in fact I can run everything from openGL).

I think we should wait for someone with another system/version to be sure that it's not just my problem...

m.peres

Re: Prototype Library

1 year ago

Hi Datamosh,

Thanks very much for your input, I really appreciate it. It is difficult to find all this stuff by yourself. Well, I managed to debug it on a Windows VM and it was really not working in any version of Processing. The bug was located in the code that I used to get the current matrix. It worked on Mac, but not on Widows. I managed to do a quick fix, but now that I have a proper environment I will look for a more permanent solution. In the meantime you can download a working windows version at:

www.miguelperes.com/processing.org/Prototype_Win.zip

UPDATE:

I reviewed the quick fix and the same package should be working fine now for both platforms:

http://www.miguelperes.com/processing.org/Prototype.zip

datamosh

Re: Re: Prototype Library

1 year ago

ok, now it work!!! :)

I'm glad to help.

Unfortunately I'm not so good at programming and it doesn't seem to so easy to create a controller from scratch since it seems to me that there's a lot of java needed for that.

I like the fact that one must click on the knob to change the value, unlike with controlP5 where you click wherever in the slider area and the value changes immediatly to that point.

As far as I can understand from your second post you managed to have less cpu load with the textures used to display the controller, but it seems to me quite heavy a 40% cpu load to display a slider, are there ways to limit the cpu load?

Is the scaleGrid there to limit the work, isn't it? I don't understand how it works...

Just another thing: I was palying with the ScaleRotation example and I was dragging an ancor point here and there, when the rectangle began to rotate with the mouseButton pressed, it continued to rotate and change the size since I released the button, then I began to play once again and it started to rotate (after the period of supposed inactivity) then, suddenly it disappeared, no way to have it back.

m.peres

Re: Prototype Library

1 year ago

I planning to add a couple of more basic widgets like, knobs, button, etc, in the next release ready to be used with listener or by linking the value of the widget to a field. Although I should say, that the the main scope of the library is not to provide a new set of GUI elements, but to make easier to quickly prototype new interface controls.

About the CPU load, I will definitely look into that. I will probably have to get a windows machine before as in my macbook 13 Core 2 Duo, the cpu load does not go over 7%. Adding more 10 sliders on the screen and it also stays under 30%. The scale grid functions allows you to determine how a image is going to be scale. It is used for example to scale the progress bar so it keeps the gradient and rounded borders. It can be tweaked to get faster. I am also aware that that I can bring the cpu load down by updating the part's inner transformation only when a property is changed. I will try and see how much juice I can squeeze from it.

I will take a look at the code and see what I can speed up for the next release. I will also check the rotate example, there is probably a bug there that passed unnoticed.

m.peres

Re: Prototype Library

1 year ago

The cpu load was really at the scale9grid method. I have changed the function, it is now much less cpu intensive, but a little bit more(almost imperceptible) memory consuming. I was able to load 100+ sliders at less than 50%. Could you give a try and see how it works for you?

Update: I think the rotate example is fixed, there was a error in the method that responsible for checking if a part is in the screen.

http://www.miguelperes.com/processing.org/Prototype.zip

datamosh

Re: Prototype Library

1 year ago

It seems that the cpu load average is about 40% but sometimes it slow down to around 20% for few seconds, then it goes up to 40%-47%(for few time), but the good news is that no matter how much slider you load, the cpu remains almost the same...

about the memory: it raise up as long as you change the value, if it's a matter of pixels setted isn't better to erase data from memory or reuse the same space allocated for the same slider to set the pixels value ?

( maybe too much confused as suggestion since I'm not sure :D )

EDIT: I didn't load 100 slider but 20

m.peres

Re: Prototype Library

1 year ago

I have made a lot of news updates on the library, among the most important changes:

- Text part with support to automatic cropping of words;

- Multiple state parts, can be used for animation of simple effects like onRollOver, onRollOut events;

- More sample widgets with examples of how to use PartEvent listeners;

- Optimization to use new Vertex Buffer.

Due to the last point, there is now two versions of the code available:

http://www.miguelperes.com/processing.org/Prototype.zip

http://www.miguelperes.com/processing.org/Prototype_P2.0a.zip

Top Reply