tangledown.org

TangleDown Syntax View Source

TangleDown is generally added to a Markdown document by

  • creating "fenced code" blocks of initial variable values and relationships between variables
  • creating inline t[]() tags for views of variables
  • creating block header t[]() tags for branching constructs based on variables

Code Blocks

The goal of TangleDown is to not feel too much like coding, but we need to know a little more than how you want to view and interact with your data. To make your document reactive, TangleDown needs two types of code: initialize and update. A variable, used in a view somewhere, needs to appear in either or both code blocks in order to work properly.

initialize

Any number of initialize fenced code blocks will be read, and the variables mentioned there will be created and available for use when the page loads. 

~~~~.initialize
#cookies: 1
~~~~

will get magically munged into. This is probably a huge XSS vulnerability: working on it.

    this.cookies = 1

Immediately after initialize is called, and every time a viewer interacts with a view, all update expressions will be reevaluated.

~~~~.update
#calories: #cookies * 50
~~~~

will become:

    this.calories = this.cookies * 50

Right now, the translation is pretty minimal, so basically you'll have to use JavaScript math notation, except with the # notation... hopefully this makes it a little easier to read the "code", without taking away too much power. A lot of useful operators are available out of the box: 

+, /, %, *

while the Math object provides many others: from javascripters

Math.abs(a)     // the absolute value of a
Math.acos(a)    // arc cosine of a
Math.asin(a)    // arc sine of a
Math.atan(a)    // arc tangent of a
Math.atan2(a,b) // arc tangent of a/b
Math.ceil(a)    // integer closest to a and not less than a
Math.cos(a)     // cosine of a
Math.exp(a)     // exponent of a (Math.E to the power a)
Math.floor(a)   // integer closest to a, not greater than a
Math.log(a)     // log of a base e
Math.max(a,b)   // the maximum of a and b
Math.min(a,b)   // the minimum of a and b
Math.pow(a,b)   // a to the power b
Math.random()   // pseudorandom number 0 to 1 (see examples)
Math.round(a)   // integer closest to a (see rounding examples)
Math.sin(a)     // sine of a
Math.sqrt(a)    // square root of a
Math.tan(a)     // tangent of a

Basic Number View

The basic Tangle number view is a display-only, inline text span which will show a variable, such that typing

 The answer to life, the universe and everything is t[](answer)

will create

The answer to life, the universe and everything is

Basic views can optionally be formatted and labeled:

 Zaphod has t[](heads ' heads')

will create

Zaphod has heads

while

 I am at a rough estimate t[](timessmarter humanized ' times') more intelligent than you

will create

I am at a rough estimate times more intelligent than you

Editable Views

The real power of Tangle lies in the intuitive editable views. Several are available from TangleKit.

Adjustable Number

The adjustable number provides a lot of flexiblity without requiring too much extra definition. The basic form shows a whole number (non-negative integer), which can be clicked on and dragged to the right or the left to change numbers:

I am t[number](years ' years old'), so have been alive at least t[](days ' days')

yields

I am years old, so have been alive at least days.

number can be customized with minimum, maxmimum and increment values (as well as formats and labels like the read-only view). All are optional.

I am t[number](10<years..10<100 ' years old'), so have been alive at least t[](days ' days')

yields

I am years old, so have been alive at least days.

Number Field View

Sometimes, just typing a number is more intuitive than hunting for it through clicking and dragging. TangleKit provides for this case:

I am t[field](years) old, so have been alive at least t[](days ' days').

yields

I am old, so have been alive at least days.

Branching

TangleDown can create several kinds of branching, so that parts of your document show up when certain conditions are met, sort of like "choose your own adventures".

The simplest type is an interactive view which changes a variable between 0 and 1.

The lights are t[toggle](lights)[off][on]. You are using t[](kilowatts ' kW')

makes

The lights are off, and it is very dark in hereon and it is very bright. You are using kW

If you have more to say than you 

t[switch](lights)
|   It is dark. 
    You might be eaten by a grue.

|   In the glaring light, 
    at least you can see the grue.

creates

It is dark. You might be eaten by a grue.In the glaring light, at least you can see the grue.

Formats

Formatting either uses the sprintf technique, which feels a lot like coding, but gets the job done.

Additionally, some more formatters are available, which return the values as:

cents_as_dollars
number of pennies as dollars and cents

1000 to $10.00

humanized

spelled out in english words

`12007021 to one million two hundred thousand seven hundred two

p3

decimal with precision to the thousandths

.0011231 to .001

neg_p3

negative value with precision to the thousandths

.0011231 to -.001

p3

decimal with precision to the hundredths

.011231 to .01

e6

floored to the millions

12007021 to 1

abs_e6

floored to the millions, absolute

-12007021 to 1

freq

as a frequency

3000 to 3 KHz

dollars

dollars without cents

10.01 to $10

free

like dollars, but free if zero

0.0 to free

percent

a percent

.7121 to 71%

Navigate