Friday, December 18, 2009

FileMaker 8+ gradient progress bar with one field - without containers


In the following article I will share a technique that I implemented in our current development, which needed FM8 techniques, as our client currently uses that.

I needed a progress bar, which looks great to show a script progress on a found set.

I didn't want to use containers and started thinking about how I would be able to create the progress bar without them.

Here's what I came up with:



The progress bar is a simple repeating field calculation(text) with 100 repetitions.

It uses the following calculation:

Let ( [r1=123;g1=80;b1=200;r2=10;g2=180;b2=50] ;

If ( Truncate ( (Get(RecordNumber)/Get(FoundCount)) * 100 ; 0) ≥ Get ( CalculationRepetitionNumber );


TextColor ( "█" ;RGB(


r1 + Floor((Get ( CalculationRepetitionNumber ) * (r2 - r1) / 100));

g1 + Floor((Get ( CalculationRepetitionNumber ) * (g2 - g1) / 100));

b1 + Floor((Get ( CalculationRepetitionNumber ) * (b2 - b1) / 100))


)


);""))


The first part of it is a LET calculation where I set up the beginning and the ending RGB colors, which will be used to calculate the actual repetition font color. The second part is a percentage calculator based on the current record and the found set.
The last part is used to calculate the actual RGB color.

The layout is simple, I just added the 100 repetitions, resized it, and set the font size to 72 points. I also added a fill color to the containers, that is what you can see under the gradient bar.

By modifying the rgb values you can come up with any color gradient you like:


I attached a sample file where you can find the calculation, investigate it, etc.

You can download it here.

Please check the demo file, and use this technique it if you like it.


Please visit our site, http://crm.fm which has our main FileMaker product, and support us by buying it. Thanks!

The material on this document is offered as is. There is no representation or warranty, expressed or implied, nor does any other contributor to this post. Consequential and incidental damages are expressly excluded. FileMaker Pro is the registered trademark of FileMaker Inc.

3 comments:

  1. Hi Adam,
    this is not for this particular technique -which I like so much. This comment is because I have found your site very interesting. Your explanations are clear and very well focused, and the attached files are a joy to explore and admire.
    Thank you very much and if posible, please, continue your divulgative and generous work.

    ReplyDelete
  2. Thank you for your kind words! Really glad that you like my work! :)

    ReplyDelete
  3. This was exactly what I was looking for! I design and maintain a solution for a pet boarding place and I wanted to give a visual indicator of how full our various kennels were on a given date. I have the percentage, so what I wanted to do was turn the background / fill into a sort of "progress bar" that would be blank at 0% and full at 100%. The thing that tripped me up the most was that I needed the Extend function (I never work with repeating fields). Here's my resulting calculation:

    Let(

    [r1=171; g1=209; b1=175; r2=0; g2=135; b2=11];


    If(

    Truncate(Extend(percent_full_kennel_dog_standard_history) * 100; 0)

    Get(CalculationRepetitionNumber);

    TextColor ( "█" ;RGB(
    r1 + Floor((Get(CalculationRepetitionNumber) * (r2 - r1) / 100));
    g1 + Floor((Get(CalculationRepetitionNumber) * (g2 - g1) / 100));
    b1 + Floor((Get(CalculationRepetitionNumber) * (b2 - b1) / 100))
    )

    ); "")



    )


    Great tip! Found you through a Google search.

    -HazMatt

    ReplyDelete