## Team-One's Embeddable Widget

# Team-One's iframe-based Widget

Team-One's *widget* is a responsive version of Team-One's web application that can be embedded within an arbitrary web page.

In its most basic form, the Team-One widget is inovoked by a simple `<iframe>`

tag, like this:

```
<iframe src="https://w.intellinote.net/" height="500" width="400"></iframe>
```

When rendered, this yields a lighter-weight but fully-functional version of Team-One's web client, embedded directly in the page, like this:

The remainder of this document describes ways you can customize the look, feel and behavior of the widget.

## Height and Width

The height and width of the widget component is determined by the `height`

and `width`

parameters of the `iframe`

tag.

The widget can be arbitrarily large and have an arbitrary aspect-ratio, but the *minimum* supported height is 500 pixels and the *minimum* supported width is 400 pixels.

(Note that those are the dimensions used for the widget instance above.)

## Source URL (`src`

)

You can adjust the initial view displayed in the Team-One widget by setting various parameters within the widget's source URL.

### The Default View

When invoked via the bare `https://w.intellinote.net/`

URL, the widget will launch in a "default" view determined by the user's last activity within Team-One (whether through the widget, the regular WebUI or from one of the mobile clients).

### Setting the Workspace Context

To open the widget into a specific workspace, you can pass the `p`

parameter, using this general form:

```
https://w.intellinote.net/#note/p=<BASE62-ENCODED-WORKSPACE-ID>&nb=<VIEW>
```

The value of the `p`

parameter must be a workspace identifier that the end-user has access to.

This workspace identifier is encoded using the Base62-encoding (see below for details).

For example, to open the widget to the "Home" section of the workspace with the identifier `48078`

, we'd use the Base62-representation of that number, `cvs`

, as follows:

```
https://w.intellinote.net/#note/p=cvs&nb=Home
```

### Setting the Workspace View

Within Team-One there are multiple "views" of each workspace. For example, you can view a list of notes, a list of tasks, etc.

To open the widget into a particular view of a workspace, you can pass the `nb`

parameter, using this general form:

```
https://w.intellinote.net/#note/p=<BASE62-ENCODED-WORKSPACE-ID>&nb=<VIEW>
```

Once again, the value of the `p`

parameter must be a workspace identifier that the end-user has access to (Base62-encoded).

The `nb`

parameter must be one of `Home`

, `Notes`

or `Tasks`

to open the workspace in the "home", note-list and task-list views (respectively).

For example, to open the widget to the "Notes" section of the workspace with the identifier `48078`

(`cvs`

), we'd use the following:

```
https://w.intellinote.net/#note/p=cvs&nb=Notes
```

### Viewing a Specific Note

To open the widget to a specific note (or task, discussion or other Team-One note "type"), you can pass the `id`

parameter, using this general form:

```
https://w.intellinote.net/#note/p=<BASE62-ENCODED-WORKSPACE-ID>&id=<BASE62-ENCODED-NOTE-ID>
```

The value of the `id`

parameter must be a note (of any type) that the end-user has access to. The value of the `p`

parameter must be the workspace identifier of the workspace that contains that note.

Both the `id`

and `p`

parameters contain identifiers in the Base62-encoding (see below for details).

For example, to open the widget to the task with the identifier `123456`

(found within the workspace with the identifier `48078`

) we'd use the Base62-representation of those numbers, `w7e`

and,`cvs`

, respectively.

```
https://w.intellinote.net/#note/p=cvs&id=w7e
```

# The Base62 Encoding

The Base62 encoding is a URL-shortening technique that uses uppercase and lowercase English letters (A-Z) and the Arabic numerals (0-9) to represent a value as base-62 number.

Much like decmial (base-10) encodes numbers using the digits `0`

through `9`

and hexadecimal (base-16) encodes numbers using the digits `0`

through `9`

and `A`

through `F`

, base-62 encodes numbers using the digits `0`

through `9`

, `a`

through `z`

, and `A`

through `Z`

(a total of 62 distinct "digits").

For example, the following table lists some numbers in their base-10, base-16 and base-62 representations:

Decimal (Base-10) | Hexadecimal (Base-16) | Base-62 |
---|---|---|

2 | 2 | 2 |

5 | 5 | 5 |

9 | 9 | 9 |

10 | A | a |

11 | B | b |

15 | F | f |

16 | 10 | g |

35 | 23 | z |

36 | 24 | A |

61 | 3D | Z |

62 | 3E | 10 |

63 | 3F | 11 |

4321 | 10E1 | 17H |

65536 | 10000 | h32 |

4294967296 | 100000000 | 4GFfc4 |

18014398509481984 | 40000000000000 | 1kvnArUVig |

Decimal (Base-10) | Hexadecimal (Base-16) | Base-62 |

## Converting from Base62 to Decimal (Base10)

Like any base, to calculate the decimal representation of a Base62 number, we compute the following sum for each digit:

Convert the Base64 representation of the digit to the Base10 equivalent (e.g.

`0 => 0`

,`9 => 9`

,`a => 10`

,`z => 35`

,`A => 36`

,`Z => 61`

).Multiple that value by the number

`62`

raised to the`n`

th power, where`n`

is the position of that digit to the left of the decimal point (starting with 0).

For example, to compute the decimal representation of the Base62 number `aB3`

:

- We convert the rightmost digit (
`3`

) to`3 * 62^0= 3*1 = 3`

. - We convert the second-to-the-right digit (
`B`

) to`37 * 62^1 = 37 * 62 = 2294`

. - We convert the leftmost digit (
`a`

) to`10 * 62^2 = 10 * 3844 = 38440`

. - We sum all of these values (
`3 + 2294 + 38440`

) to compute the final value (`40737`

).

## Converting from Decimal (Base10) to Base62

To convert a decimal (Base10) number to Base62, we reverse the logic:

Let `N`

be the decimal value. Let `B`

be the Base62 string we are construcing, initially empty (`""`

).

- Compute
`floor( N / 62 )`

(the whole number part of`N/62`

) call that value`n`

. - Compute
`N mod 62`

(the "remainder" after dividing by`62`

, i.e.,`N - n*62`

). Call that value`r`

. - Convert
`r`

to its Base62 equivalent (e.g,`0 => 0`

,`9 => 9`

,`10 => a`

,`35 => z`

,`36 => A`

,`61 => Z`

). - Prepend that Base62 "digit" to
`B`

(i.e.`B = Base62(r) + B`

, where`+`

means "concatentate strings"). - Let
`N = n`

and repeat the process starting at step 1. - Repeat until
`N`

is`0`

.

For example, to convert the decimal value `40737`

to Base62.

- We compute
`n`

and`r`

for`40737`

, yielding`n = floor(40737/62) = floor(657.048387097) = 657`

and`r = 40737 - 62*657 = 40737 - 40734 = 3`

. This becomes our right-most-digit, so`B = "3"`

. - We compute
`n`

and`r`

for`657`

, yielding`n = floor(657/62) = floor(10.5967741935) = 10`

and`r = 657 - 62*10 = 657 - 620 = 37`

. The Base62 digit for the value`37`

is`B`

. This becomes our next digit, so`B`

is now`"B3"`

. - We compute
`n`

and`r`

for`10`

, yielding`n = floor(10/62) = floor(0) = 0`

and`r = 10 - 62*0 = 10 - 0 = 10`

. The Base62 digit for the value`10`

is`a`

. This becomes our next digit, so`B`

is now`"aB3"`

. - Our
`N`

value is`0`

, so we're done with the conversion.

## Implementations

A Base62 encoding and decoding library function can be found in many programming languages.

For reference, here is a basic JavaScript implementation of a Base62 encoding function:

```
function base62encode(i) {
var digits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
if(i === 0) {
return '0';
} else {
var s = ''
while (i > 0) {
s = digits[i % 62] + s
i = Math.floor(i / 62)
}
return s
}
}
```