9 Replies Latest reply: May 17, 2009 11:57 AM by 843851 RSS

    Gradient in MHP

    843851
      Hi,

      does anybody knows a way to fill, let's say HStaticText elements, with a gradient color?

      Is it possible, since Graphics2D is not available on MHP?

      Thank you for your all replies.

      Regards.
      Alex.
        • 1. Re: Gradient in MHP
          843851
          You are right in saying that Graphics2D is not part of the MHP API set. Some boxes may support it, but it you want interoperability, I'd avoid using things like this.

          Probably the easiest thing to do is to:

          1) Extend the HStaticText class
          2) override the paint method with what ever you want.

          Roger
          • 2. Re: Gradient in MHP
            843851
            Thank you, Roger for your soon reply, you've confirmed my suspicions.

            I've coded this class to solve my problem. It extends the HTextLook and paints a vertical gradient from one color to another. Maybe could be handful for someone, so, I put the code:
            import java.awt.Color;
            import java.awt.Graphics;
            import org.havi.ui.HTextLook;
            import org.havi.ui.HVisible;
            
            // Look para los HStaticText que establece un degradado vertical como fondo
            // Se indica el color
            public class GradientLook extends HTextLook {
            
                 private Color startColor, endColor;
                 private int startOffset, endOffset;     
                 private int redDistance, greenDistance, blueDistance;
                 private int redStep, greenStep, blueStep;
                 private int redDelta, greenDelta, blueDelta;
                 private int redCorrection, greenCorrection, blueCorrection;     
                 private boolean verbose;
            
            
                 GradientLook(Color startColor, Color endColor, int startOffset, int endOffset) {
                      this.startColor = startColor;
                      this.endColor = endColor;
                      this.startOffset = startOffset;
                      this.endOffset = endOffset;
                      verbose = false;
                 }
            
                 public void showLook(Graphics g, HVisible visible, int state) {
                      if ((visible != null) && (g != null)) {
                           if (verbose) System.out.println("Entering GradientLook...");
                           
                          int alturaGradiente = visible.getHeight() - startOffset - endOffset;
            
                          g.setColor(startColor);
                          g.fillRect(0, 0, visible.getWidth(), startOffset);                                      
                          g.setColor(endColor);
                          g.fillRect(0, visible.getHeight() - endOffset, visible.getWidth(), endOffset);                                      
            
                          if (alturaGradiente > 0) {
                               redDistance = Math.abs(startColor.getRed() - endColor.getRed());
                               greenDistance = Math.abs(startColor.getGreen() - endColor.getGreen());
                               blueDistance = Math.abs(startColor.getBlue() - endColor.getBlue());              
                               if (verbose) System.out.println("Gradient lines: " + alturaGradiente );
                               if (verbose) System.out.println("Distances: (R)" + redDistance + " (G)" + greenDistance + " (B)" + blueDistance);
            
                               int step;
                               int delta;
                               
                               if (redDistance > alturaGradiente) {
                                        redStep = 1;                             
                                    delta = 1;
                                    while (alturaGradiente*delta < redDistance) delta++;
                                    redDelta = delta;
                                    // es mejor aproximaci�n con el delta inmediatamente inferior  
                                    if (redDistance - alturaGradiente*(delta-1) < alturaGradiente*delta - redDistance) redDelta = delta-1;                             
                               }                   
                               if (redDistance < alturaGradiente) {
                                    redDelta = 1;
                                    step=1;
                                    while (alturaGradiente/step > redDistance) step++;
                                    redStep = step;
                                    // es mejor aproximaci�n con el step inmediatamente inferior  
                                    if (alturaGradiente/(step-1) - redDistance < redDistance - alturaGradiente/step ) redStep = step-1;                                                     
                               }
                               if (redDistance == 0) {
                                    redDelta = 0;
                                    redStep = 1;
                               }
                               if (startColor.getRed() - endColor.getRed() < 0) redDelta = redDelta*(-1);                        
            
                               
                               if (greenDistance > alturaGradiente) {
                                        greenStep = 1;                             
                                    delta = 1;
                                    while (alturaGradiente*delta < greenDistance) delta++;
                                    greenDelta = delta;
                                    // es mejor aproximaci�n con el delta inmediatamente inferior  
                                    if (greenDistance - alturaGradiente*(delta-1) < alturaGradiente*delta - greenDistance) greenDelta = delta-1;                             
                               }                   
                               if (greenDistance < alturaGradiente) {
                                    greenDelta = 1;
                                    step=1;
                                    while (alturaGradiente/step > greenDistance) step++;
                                    greenStep = step;
                                    // es mejor aproximaci�n con el step inmediatamente inferior  
                                    if (alturaGradiente/(step-1) - greenDistance < greenDistance - alturaGradiente/step ) greenStep = step-1;                                                                             
                               }
                               if (greenDistance == 0) {
                                    greenDelta = 0;
                                    greenStep = 1;
                               }
                               if (startColor.getGreen() - endColor.getGreen() < 0) greenDelta = greenDelta*(-1);                        
                               
                               
                               if (blueDistance > alturaGradiente) {
                                        blueStep = 1;                             
                                    delta = 1;
                                    while (alturaGradiente*delta < blueDistance) delta++;
                                    blueDelta = delta;
                                    // es mejor aproximaci�n con el delta inmediatamente inferior  
                                    if (blueDistance - alturaGradiente*(delta-1) < alturaGradiente*delta - blueDistance) blueDelta = delta-1;                             
                               }                   
                               if (blueDistance < alturaGradiente) {
                                    blueDelta = 1;
                                    step=1;
                                    while (alturaGradiente/step > blueDistance) step++;
                                    blueStep = step;
                                    // es mejor aproximaci�n con el step inmediatamente inferior  
                                    if (alturaGradiente/(step-1) - blueDistance < blueDistance - alturaGradiente/step ) blueStep = step-1;                             
                               }
                               if (blueDistance == 0) {
                                    blueDelta = 0;
                                    blueStep = 1;
                               }
                               if (startColor.getBlue() - endColor.getBlue() < 0) blueDelta = blueDelta*(-1);                        
                                    
                                    
                               
                               redCorrection = redDistance - ( alturaGradiente/redStep*Math.abs(redDelta) );
                               greenCorrection = greenDistance - ( alturaGradiente/greenStep*Math.abs(greenDelta) );
                               blueCorrection = blueDistance - ( alturaGradiente/blueStep*Math.abs(blueDelta) );
            
                               if (verbose) System.out.println("R: Step=" + redStep + "  Delta=" + redDelta + "  Correction=" + redCorrection);
                               if (verbose) System.out.println("G: Step=" + greenStep + "  Delta=" + greenDelta + "  Correction=" + greenCorrection);
                               if (verbose) System.out.println("B: Step=" + blueStep + "  Delta=" + blueDelta + "  Correction=" + blueCorrection);
                               if (verbose) System.out.println("Initial: " + startColor.getRed() + " " + startColor.getGreen() + " " + startColor.getBlue());
                               
                               int green = startColor.getGreen();
                               int red = startColor.getRed();
                               int blue = startColor.getBlue();
                               for (int i = 0; i < alturaGradiente; i++) {                   
            
                                    if (i % redStep == 0) red -= redDelta;
                                    if (i % greenStep == 0) green -= greenDelta;
                                    if (i % blueStep == 0) blue -= blueDelta;
                                    
                                    // Corrector 1 (se queda corto)
                                    if (i > alturaGradiente - redCorrection) red -= redDelta/(Math.abs(redDelta)); 
                                    if (i > alturaGradiente - greenCorrection) green -= greenDelta/(Math.abs(greenDelta)); 
                                    if (i > alturaGradiente - blueCorrection) blue -= blueDelta/(Math.abs(blueDelta)); 
                                    // Corrector 2 (se pasa)
                                    if (i*redDelta/redStep > redDistance - redDelta) red = endColor.getRed();
                                    if (i*greenDelta/greenStep > greenDistance - greenDelta) green = endColor.getGreen();
                                    if (i*Math.abs(blueDelta)/blueStep > blueDistance - Math.abs(blueDelta)) blue = endColor.getBlue();
                                    
                                    //if (verbose) System.out.println("         " + red + " " + green + " " + blue + "    gradient line="+ (i+1));
                                    g.setColor(new Color(red, green, blue));
                                    g.fillRect(0, startOffset + i, visible.getWidth(), 1);                                      
                               }
                               if (verbose) System.out.println("Final:   " + endColor.getRed() + " " + endColor.getGreen() + " " + endColor.getBlue());
                          }
                      }
                 }
            }
            The usage is quite simple:
            HStaticText gradientLabel;
            // whatever with gradientLabel...
            
            try{
                           gradientLabel.setLook(new GradientLook(Color.BLUE, Color.BLUE.darker().darker(), 20, 1));
            
            } catch(HInvalidLookException e) {}             
            • 3. Re: Gradient in MHP
              843851
              it's very good of you to supply the code. Thanks.
              • 4. Re: Gradient in MHP
                843851
                but it doesn't seem to be a good solution , because there are too many calculations in the painting code .
                • 5. Re: Gradient in MHP
                  843851
                  Do you want to suggest an alternative?
                  • 6. Re: Gradient in MHP
                    843851
                    I didn't get the logic.

                    How i would do is...
                    step = (end color - start color)/no. of lines
                    with this i would calculate
                    stepR, stepG, stepB

                    setColor = startcolor
                    loop(i)
                    setColor = setColor + step
                    drawLine with that color

                    I guess this would give the gradient effect.
                    • 7. Re: Gradient in MHP
                      843851
                      how about using MemoryImageSource to generate a new image and then draw it?
                      • 8. Re: Gradient in MHP
                        843851
                        Hi!
                        I am new in MHP. I am looking for applying to some look on text button. your code has given me new idea.
                        Thanks for posting the code. it help me alot.
                        • 9. Re: Gradient in MHP
                          843851
                          it's very good of you to supply the code. Thanks.