Pi 2

Powerful Form Workflows

Pi works with your existing favorite form stacks to bring you powerful calculations. You can use these calculations to update page content, populate charts, augment form data that gets submitted or even use it to apply CSS styles to the page. Pi is the most powerful formula and form helper stack out there.

Key Features

Demo

Charts

Dynamic Chart Data

Change the sliders to see the charts update dynamically.

  • Gauge 1 uses thresholds so that the color changes as the value does.
  • Gauge 2 displays 2 different values, each with their own arc.
  • Gauge 3 is a full circle with a traditional pie style chart that displays the percentages rather than the raw value.
  • Gauge 4 is a circle chart with multiple arcs for each data point.
50.00
10.00
Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Show/Hide

Dynamic Form Workflows

Use the following two simple examples of showing content based one the values of an input.

If you use the date picker to choose a date greater than 18 years, then more content will be displayed.

Type your input data here

Type your input data here

Awesome! I know you are building great things. Keep it up! ❤️

I hope that you are enjoying Pi 2. I worked really hard on it.

Select your birthday. If you are older than 18, you get a prize

Age:

🍻

Pi Show/Hide can show and hide any stack. It could be something simple like this text box, or it could be a more complex stack layout. You can even display or hide extra form fields based on the values or other form inputs.

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 1

Basic concept

Convert PX to REM. 16px = 1rem

Pi Class Output. The Pi class was added to this Header stack. Then entire contents of this header will be replaced with the results from Pi.

REM Conversion: rem

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 2

Slider Input. Rounding Results

Multiplies slider value by 3. The round the value

1.00

Triple:

Round:

Ceiling:

Floor:

Decimal:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 3

1 input, 2 outputs

Find the perimeter and the area of a circle

p = 2πr
a = πr2

p =

a =

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 4

Changing CSS Font Sizing

Take the number input and adjust the size of text

PI ROCKS!!!

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 5

Room area calc with 2 sliders

Calculates the area of a room by multiplying 2 sliders

1.00m
1.00m

Area:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 6

Pi as an input to another Pi

Calculates a rooms wall area by multiplying perimeter length by wall height and displays it to 2 decimal places

Room info:
3.00m
4.00m
2.40m

Wall area:

More sliders for paint properties

Paint info:
5.00m2
2.00
2.00l

Calculates the required number of cans of paint based on Pi calc and sliders above

Results:

Cans Required:

Actual Cans Required:

Demo 6b

Reducing the Pi's

All the above Pi's in one Pi

Cans required:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 7

Functions

Using a function to display months based on the slider value

Month Outputs Here

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 8

Day of Birth Calculator

Multiple Pi's with functions that generate values used in other Pi's to produce a day based on 3 select boxes.

My Image

Where:

  • h is the day of the week (0 = Saturday, 1 = Sunday, 2 = Monday, ..., 6 = Friday)
  • q is the day of the month
  • m is the month (3 = March, 4 = April, 5 = May, ..., 14 = February)
  • K the year of the century unless its Jan or Feb then its year -1
  • J is the zero-based century (actually ) For example, the zero-based centuries for 1995 and 2000 are 19 and 20 respectively (to not be confused with the common ordinal century enumeration which indicates 20th for both cases).

Born on a

class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 9

Colour via CSS

Manipulating CSS on this page via Pi

0.00
100.00
50.00

HSL

RGB

HEX

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 10

Selectbox and Check boxes

Event example that builds a price based on slider, select boxes and check boxes

1.00

class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 11

Date and Time

Time zone example that gives the date/time of others around the world to plan a meeting

0.00

Local Time:

Harry's Time:
class output
Fred's Time:
class output
Bob's Time:
class output
Jane's Time
class output
Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 12

Date difference

Calculates the difference between 2 date pickers and displays it in days, hours and seconds

Diffrence: days

Diffrence: hours

Diffrence: seconds

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 13

Loan Payments

Calculate the payment on a loan

Monthly Payment:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 14

Future Value

Future value of an cashflow based on growth rate

Projected Cashflow:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Demo 15

Advanced Text Processing

Output a HTML list of items chosen in the form.

Vacation Destinations:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

Reviews

We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.

Leave your review Thanks!

Screenshots

Tutorials

Loading...

Downloads

Updates

See all updates Thanks!

You may also like…

scroll me

HANGOUTS

Next Hangout Session
Friday, March 21

Subscribe

For product releases and updates by email, please subscribe below.

© 2025 Weavers Space | Terms of Service | Privacy Policy