G4P Label SetText - Text becomes unclear when label text is changed

Good afternoon everyone

I've been creating some tools to play with projects for some time now using Processing. At some point I found the G4P library which makes making a GUI a lot simpler! I've always noticed (and wondered enough about it to come look for reasons) that when change the text of a label dynamically, the text becomes blurry or faded.

As an example, I have a button to connect to a serial port with a label on top indicating the status. When the sketch launches it looks clear like this:

G4P_Clear

But as soon as the text changes (in my case, it becomes "Searching" and "Connected") it becomes unclear to read (some worse than others, at times almost illegible). Here is a picture after I disconnected again:

G4P_Unclear

What would be the reason for this and how can I work around it?

Thank all!

JD

Tagged:

Answers

  • In the draw method use the background() statement to clear the screen ready for the next frame otherwise the controls are drawn on top of each other. This is not a problem for most controls because they are opaque but GLabel(s) has a transparent background by default.

  • edited January 2015

    Hi quark

    Thanks for the fast feedback.

    I start my draw method like this:

    public void draw(){ background(230);

    I've also tried to move it to the end of the method, but with the same results. Just to clarify something, the old text does 'disappear', so to speak, it's not like it writes text over other text, it's just that the new text appears unclear.

  • edited January 2015

    OK, no, scrap that, eyes are tired.. Still doesn't solve it, sorry :/

    -I've played around a bit after reading your comment regarding background()-

    -It seems that the problem occurs when you call background() in 'grayscale mode' (with a single parameter). Calling it in 'RGB mode' (with three parameters) solves the problem!-

  • edited January 2015

    It seems that the problem occurs when you call background() in 'grayscale mode' (with a single parameter). Calling it in 'RGB mode' (with three parameters) solves the problem!-

    Shouldn't make a difference :-?

    Are you changing the colorMode?

  • Ignore my last post - it is a library issue. The problem applies to all components that use text.

    When G4P moved to V3 it provided a number of enhancements

    1) it enabled text to be styled e.g. bold, italic etc.

    2) text can be aligned within a control e.g. centred

    3) all controls are draw to a Graphics2D buffer and redrawn when a change is required e.g. mouse over button. These buffers are simply copied to the main display so that you can see them.

    To do this the buffer font must be set so that the text metrics can be measured. The problem is that the metrics change the first time the controls text changes after that there is no further changes. I cannot find the cause but when I have time I will look at the problem in more detail.

    The text appears to go fuzzy because the characters are drawn closer together.

  • Great, thanks, I'll keep a lookout for updates. Is there a workaround in the meantime I can implement on 'critical' text?

    And great work on this library btw!! It's turned processing into a bloody cool tool for me.

  • There is no workaround at the moment because I have no idea why the metrics change on first use of setText. I will have have to put my Sherlock Holmes hat on :D

    BTW glad you like G4P

  • Have just released V3.5.1 which fixes this issue. :)

    Might take a couple of days for the PDE to check for updates but if you are in a hurry you can download if from SourceForge and instal it manually.

  • Excellent, thank you kindly sir! Love the support!

  • Hi Quark

    Don't know if I should start a separate thread, but it seems v3.5.1 crashes when clicking inside an empty text field. When reverting to v3.5 it works fine again.

    This is the printout in Processing terminal window:

    java.lang.NullPointerException at g4p_controls.StyledString.calculateFromXY(Unknown Source) at g4p_controls.GTextField.mouseEvent(Unknown Source) at g4p_controls.GWindowInfo.mouseEvent(Unknown Source) at sun.reflect.GeneratedMethodAccessor6.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at processing.core.PApplet$RegisteredMethods.handle(PApplet.java:1236) at processing.core.PApplet.handleMethods(PApplet.java:1431) at processing.core.PApplet.handleMouseEvent(PApplet.java:2826) at processing.core.PApplet.dequeueEvents(PApplet.java:2725) at processing.core.PApplet.handleDraw(PApplet.java:2397) at processing.core.PGraphicsJava2D.requestDraw(PGraphicsJava2D.java:240) at processing.core.PApplet.run(PApplet.java:2256) at java.lang.Thread.run(Unknown Source)

  • Have you tried the editable text control example that comes with the library - it worked for me.

    Can you create a very simple example sketch that demonstrates the problem so I can test it?

    Which version of Processing are you using and are you using GUI Builder?

  • edited January 2015

    Ah, yes, sorry, the opposite of TMI..

    I'm on Processing 2.2.1 (32bit), using the new GUI Builder (v2.5) on a Windows 7 machine. The text control I use is the one from the library as populated by the GUI Builder.

    I have literally created a blank project to update a label test based on what's typed in a textfield, but the moment I click inside the blank field, it crashes. If I start the sketch with the textfield populated, I can work with it no problem, until I clear it again, click on another control and click inside the blank textfield again.

    Here's the code:

    sketch_150112a.pde

    // Need G4P library
    import g4p_controls.*;
    
    
    public void setup(){
      size(480, 320, JAVA2D);
      createGUI();
      customGUI();
      // Place your setup code here
    
    }
    
    public void draw(){
      background(230);
    
    }
    
    // Use this method to add additional statements
    // to customise the GUI controls
    public void customGUI(){
    
    }
    

    gui.pde

    /* =========================================================
     * ====                   WARNING                        ===
     * =========================================================
     * The code in this tab has been generated from the GUI form
     * designer and care should be taken when editing this file.
     * Only add/edit code inside the event handlers i.e. only
     * use lines between the matching comment tags. e.g.
    
     void myBtnEvents(GButton button) { //_CODE_:button1:12356:
         // It is safe to enter your event code here  
     } //_CODE_:button1:12356:
    
     * Do not rename this tab!
     * =========================================================
     */
    
    public void textfield1_change1(GTextField source, GEvent event) { //_CODE_:textfield1:831734:
      println("textfield1 - GTextField >> GEvent." + event + " @ " + millis());
    } //_CODE_:textfield1:831734:
    
    public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:560015:
      label1.setText(textfield1.getText());
    } //_CODE_:button1:560015:
    
    
    
    // Create all the GUI controls. 
    // autogenerated do not edit
    public void createGUI(){
      G4P.messagesEnabled(false);
      G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
      G4P.setCursor(ARROW);
      if(frame != null)
        frame.setTitle("Sketch Window");
      textfield1 = new GTextField(this, 148, 145, 160, 30, G4P.SCROLLBARS_NONE);
      textfield1.setText("asdf");
      textfield1.setOpaque(true);
      textfield1.addEventHandler(this, "textfield1_change1");
      button1 = new GButton(this, 191, 102, 80, 30);
      button1.setText("Face text");
      button1.addEventHandler(this, "button1_click1");
      label1 = new GLabel(this, 190, 188, 80, 20);
      label1.setText("My label");
      label1.setOpaque(false);
    }
    
    // Variable declarations 
    // autogenerated do not edit
    GTextField textfield1; 
    GButton button1; 
    GLabel label1; 
    

    This happens regardless of what is in the textfield1_change1 handler.

  • Are you clearing the text using the keyboard or programmatically with setText ("")?

  • Both. I'm busy creating a thread for it, since I've found problem with v3.5 and textfields as well. It might be related. Will post link just now.

  • Here's is the new thread for the textfield issues I'm experiencing.

    http://forum.processing.org/two/discussion/8999/g4p-textfield-problems-v3-5-and-v3-5-1

    Please let me know if I can run some tests or provide more info :)

Sign In or Register to comment.