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
222
555
999
10Aa
11Bb
15Ff
1610g
3523z
3624A
613DZ
623E10
633F11
432110E117H
6553610000h32
42949672961000000004GFfc4
18014398509481984400000000000001kvnArUVig
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:

  1. 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).

  2. Multiple that value by the number 62 raised to the nth 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:

  1. We convert the rightmost digit (3) to 3 * 62^0= 3*1 = 3.
  2. We convert the second-to-the-right digit (B) to 37 * 62^1 = 37 * 62 = 2294.
  3. We convert the leftmost digit (a) to 10 * 62^2 = 10 * 3844 = 38440.
  4. 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 ("").

  1. Compute floor( N / 62 ) (the whole number part of N/62) call that value n.
  2. Compute N mod 62 (the "remainder" after dividing by 62, i.e., N - n*62). Call that value r.
  3. Convert r to its Base62 equivalent (e.g, 0 => 0, 9 => 9, 10 => a, 35 => z, 36 => A, 61 => Z).
  4. Prepend that Base62 "digit" to B (i.e. B = Base62(r) + B, where + means "concatentate strings").
  5. Let N = n and repeat the process starting at step 1.
  6. Repeat until N is 0.

For example, to convert the decimal value 40737 to Base62.

  1. 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".
  2. 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".
  3. 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".
  4. 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
  }
}