Pi

Powerful on page calculations

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

Key Features

Demo

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

You must enter in a date.
You must enter in a date.

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.

Screenshots

Tutorials

Loading...

Downloads

Updates

See all updates Thanks!

You may also likeā€¦

HANGOUTS

Next Hangout Session
Friday, November 8

Subscribe

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

© 2024 Weavers Space | Terms of Service | Privacy Policy