GUI assistance (G4P & CP5)

mtwals

Hello everyone, I recently submitted a question about my CP5 library not exporting properly [LINK]

So far no responses. I can see that this category has some regular contributors, so maybe no one knows why this is happening? I have not found any other instances of people having a problem like this or solving it online, though I have been searching all weekend. I did find a few instances of other libraries that did not export and the solution was to manually move a folder over to the app folder, but I do not know how to apply this solution to cp5 if it would work.

I also have discovered that an active member here, @Quark is the author of the G4P library. So I am hoping that perhaps switching to G4P may provide more stability and support in the future. My app is for desktop (windows/PC) use for most of the foreseeable future.

It seems that cp5 has been getting more and more unstable as I update processing and I am not sure that Sojamo (Andreas Schlegel) is still maintaining it. I know Quark is active here so hopefully, you will see this. Are you still actively maintaining G4P and keeping up with processing updates?

Currently, my app only uses buttons that increase or decrease variables and one user inputted text box. So maybe just creating my own imageButton class would be a more stable long term solution?

I understand that if no one knows how to help, you may not be posting, but since I have already put so much time into the current GUI using CP5, any suggestions on how I might solve this problem without switching GUI libraries would be very helpful, but anything will help.

Thanks!

m

quark

My library is called G4P so I have edited your post accordingly.

I am still maintaining G4P and will be doing so for the foreseeable future. I should point out that G4P is only designed to work in Java mode to create desktop apps. I believe contolP5 works in Android and possibly Javascript but I could be wrong as I have never used the library.

Looking at your other post it appears that the images used on the buttons are not being detected after export. The most likely cause is that they are not being exported with the application - you should be able to check this with Windows Explorer / Osx Finder or Linus equivalent depending on your OS.

This is the code you posted in the other discussion.

cp5.addButton("topChamferTaller")
    .setImages(loadImage("../img/upArrowBtnBase.png"), loadImage("../img/upArrowBtnRoll.png"), 
    loadImage("../img/upArrowBtnDown.png"))
    .setPosition(topChamferInputPos[0], topChamferInputPos[1])
    .updateSize() 
  ;

I assume that the img folder is in the root of the sketch folder?

When you use loadImage Processing will look in the root of the sketch folder and if not there it will then look for a folder called data and look inside it..

When you export the application ONLY the images stored in the data folder are exported so it is important that all resources such as images, wav files etc are stored in a folder called data which you should create in the sketch folder.

cp5.addButton("topChamferTaller")
    .setImages(loadImage("upArrowBtnBase.png"), loadImage("upArrowBtnRoll.png"), 
    loadImage("upArrowBtnDown.png"))
    .setPosition(topChamferInputPos[0], topChamferInputPos[1])
    .updateSize() 
  ;

and put the images directly in the data folder.

mtwals

oh! Thank you!

Seems pretty simple, but it still took me a few tries to get it working in the sketch and in the app.

No matter where I had the image folder and no matter what it was called, it still did not export automatically and I needed to move it manually after export. But it is working now!

Thanks, again. You guys are really great.

kfrajer

I confirmed I had controlP5 running on android mode (tested with 3.0.2 AM version). I don't think it suppose to work under javascript though.

Also, I believe that if you have your image in your data foder, then when you export your application, it should work. I did a test with exporting Controlp5button example and this is what I get for the folder structure of the exported program:

$> tree application.windows64

C:\USERS\C\DOCUMENTS\PROCESSING\LIBRARIES\CONTROLP5\EXAMPLES\CONTROLLERS\CONTROLP5BUTTON\APPLICATION.WINDOWS64
├───data
├───java
│ ├───bin
│ │ ├───dtplugin
│ │ ├───plugin2
│ │ └───server
│ └───lib
│ ├───amd64
│ ├───applet
│ ├───cmm
│ ├───deploy
│ ├───ext
│ ├───fonts
│ ├───images
│ │ └───cursors
│ ├───jfr
│ ├───management
│ └───security
├───lib
└───source

And under data:

$> tree /f data
C:\USERS\C\DOCUMENTS\PROCESSING\LIBRARIES\CONTROLP5\EXAMPLES\CONTROLLERS\CONTROLP5BUTTON\APPLICATION.WINDOWS64\DATA
button_a.png
button_b.png
button_c.png
Thumbs.db

Kf

mtwals

Thank you for your comments.

I see now that it does export automatically for the windows app, but it did not export the data folder for the mac app. Unless I am still doing something wrong, it appears necessary to move the folder manually after export.

Also, it seems that it MUST be named 'data'. and the code must explicitly call loadImage(../data/).

I tried exporting with my code calling loadImage(../img/) and then moving the 'img' folder into the root of the app and it did not work.

kfrajer

loadImage(../img/) will not work. What you could try is

String path= dataPath("");
loadImage(path+"/img/your_img.jpg");

However, it is too bad you have to copy the folder manually after you export your application. You should open a ticket in GitHub and they should be able to fix it in a future update.

Kf

quark

I have reported this as an issue

kfrajer

Thxs @quark

Kf