Pi 2

icon

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

12     SVG  Code ViewSwitch to codeview to add SVG codexxxxxxxxxx 1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M16.69,47.31A52.12,52.12,0,0,1,2.537,33.673a2.9,2.9,0,0,1-.008-3.353C5.921,25.507,16.793,12,32,12a29.018,29.018,0,0,1,15.309,4.687" fill="none" stroke="currentColor" stroke-width="4"></path><path d="M51.909,20a55.426,55.426,0,0,1,9.554,10.311,2.9,2.9,0,0,1-.008,3.373C57.992,38.5,46.96,52,32,52a26.869,26.869,0,0,1-10.033-2" fill="none" stroke="currentColor" stroke-width="4"></path><line x1="5" y1="59" x2="59" y2="5" fill="none" stroke="currentColor" stroke-width="4"></line><path d="M43.321,28A12.009,12.009,0,0,1,28,43.316" fill="none" stroke="currentColor" stroke-width="4"></path><path d="M23.519,40.485A12,12,0,0,1,40.487,23.513" fill="none" stroke="currentColor" stroke-width="4"></path></g></svg>   Title         Summary

Use Actual Math

Simply type out your math formula. No need to struggle through tons of complex stack settings to build your formula.

Show/Hide

Conditionally show or hide content based on form field values.

Autosave

Never accidentally lose work typed into a form with the autosave feature.

Chart Data

Pi Gauge presents data from your forms dynamically in customizable gauge charts.

Power of JavaScript

Your formulas may contain JavaScript. This unlocks powerful libraries that are built into every browser. For extra magic, you can create your own custom JS functions.

3rd Party Form Stacks

Use Pi with your existing forms. This allows you to keep using your favorite forms from Foundation, FormsPlus, FormSnap and more.

Update Page Content

Use Pi to pull data out of your forms and integrate it into your actual page content.

13     SVG  Code ViewSwitch to codeview to add SVG codexxxxxxxxxx 1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="9" y1="39" x2="13" y2="39" fill="none" stroke="currentColor" stroke-width="4"></line><line x1="32" y1="16" x2="32" y2="20" fill="none" stroke="currentColor" stroke-width="4"></line><line x1="48.263" y1="22.737" x2="45.435" y2="25.565" fill="none" stroke="currentColor" stroke-width="4"></line><line x1="55" y1="39" x2="51" y2="39" fill="none" stroke="currentColor" stroke-width="4"></line><line x1="28.464" y1="35.464" x2="16" y2="23" fill="none" stroke="currentColor" stroke-width="4"></line><circle cx="31.999" cy="39" r="5" fill="none" stroke="currentColor" stroke-width="4"></circle><path d="M57.372,55A30,30,0,1,0,6.628,55Z" fill="none" stroke="currentColor" stroke-width="4"></path></g></svg>2   Title         Summary

Realtime Processing

Pi will monitor every input field as the data gets updated in real-time.

Update Form Fields

Pi can update existing form field values. This means that the calculations can be a part of the data submitted by the form. This could be via and email, database insert and more.

CSS Styling

Take your Pi calculations and apply the value to CSS on the page. You this to control font-size, colors and more. (CSS knowledge required)

Date Math

Pi ships with date functions from momentjs.com. This allows us to interact with dates in interesting ways.

Finance Helpers

Pi ships with financial functions from financejs.org. This brings use easy to use functions for loan amortization, ROI, Rule of 72 and more.

Adv Math Helpers

Pi ships with advanced math functions from mathjs.org. This brings use easy to use functions for algebra, fractions, matrices and more.

Multiple Steps

You can chain multiple Pi stacks so that you one calculation can depend on another. This allows you to use multiple values on your content or to simply break up your logic.

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

 5/5 (2 reviews)


Sean Bisset

Sean Bisset

Q-TechUAE

star-alt
star-alt
star-alt
star-alt
star-alt

"300 character are not enough to describe how awesome this stack is. Initially, finding a use case seems far fetched, but once you start you just cant put it down. The ideas start flooding in. The stuff you can do with PI is limitless and on top of that, it works fantastically with the other stacks. What more can you wish for!"



Franco

Franco

none

star-alt
star-alt
star-alt
star-alt
star-alt

"very useful. I have just one question: would it be possible to include the math.round function to set the number of decimals in a resulting calculation?"



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

Pi screenshot
screenshots
screenshots
screenshots
screenshots
screenshots

Tutorials

Loading...
Grab Bag of Awesome Form Updates 7 More: Email, Foundation, Pi and Feeds
Grab Bag of Awesome Form Updates 7 More: Email, Foundation, Pi and Feeds
Pi Stack v2.0 Sneak Peek - Next Level Interactive Forms
Pi Stack v2.0 Sneak Peek - Next Level Interactive Forms
Stacks Website Builder: Where Power and Flexibility Meet
Stacks Website Builder: Where Power and Flexibility Meet
Pi Stack v2.0 Sneak Peek - Next Level Interactive Forms
Pi Stack v2.0 Sneak Peek - Next Level Interactive Forms
Upgrading from Pi v1 to v2
Upgrading from Pi v1 to v2
Pi Show/Hide Stack Overview
Pi Show/Hide Stack Overview
Pi Stack v2 Overview
Pi Stack v2 Overview
Pi Gauge Stack Overview
Pi Gauge Stack Overview
Pi AutoSave Stack Overview
Pi AutoSave Stack Overview
Printing your Webpages
Printing your Webpages
Live Questions and Answers
Live Questions and Answers
Working in Forms with Pi
Working in Forms with Pi
Financial Calculations with Pi
Financial Calculations with Pi
Date Calculations with Pi
Date Calculations with Pi
Advanced Usage of Pi
Advanced Usage of Pi
Intermediate Usage of Pi
Intermediate Usage of Pi
Customizing CSS with Pi
Customizing CSS with Pi
Basics of using the Pi Stack for RapidWeaver
Basics of using the Pi Stack for RapidWeaver
Pi Stack for RapidWeaver Overview
Pi Stack for RapidWeaver Overview

Downloads

Pi Demo Project

Uploaded by Weaver's Space

Pi Demo with F6

This is the same Pi demo rebuilt using Foundation 6.

Uploaded by Weaver's Space

Updates

v2.1.2

  • Fixed issues with nested Show/Hide stacks with Remove from Form enabled

v2.1.1

  • Pi Show/Hide: When using Remove from Form on Hide in a Foundation 6 form, validation of fields will not work on newly displayedform fields.
  • Pi AutoSave: Now works with Pi Show/Hide to attempt to restore field values with Remove from Form on Hide enabled.

v2.1.0

  • Pi Show/Hide now has a timing option
  • Pi Show/Hide now has Remove from Form on Hide option that will completely remove the content from the page whenhidden. It will be added back into the form when shown. Any data in the field will get lost when it's hidden.

v2.0.2

  • Pi Show/Hide will not control the required attributes on inputs. If an input is set to be required but it is hidden,the required flag will be removed. If the form field is shown, Pi will add the required field back in.
  • Pi Autosave now supports checkbox, radio and select fields.

v2.0.1

  • New Pi.updateInput and Pi.updateHTML helper functions
  • New unique icons for each stack
  • Numbers with leading zero will be treated as a string. If you need to treat is as a number then use parseInt()
  • Show/hide timing has sped up
  • Improved support for hidden input values
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