Skip to content
a fresh approach to spreadsheets
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
css
fonts
img
js
locales
.gitignore
LICENSE
README.md
index.html

README.md

SNTE - say no to Excel!

A functional prototype implementation of a fresh approach to spreadsheets. The software incorporates findings from a user study as well as a comprehensive literature review conducted as part of a master thesis at Vienna University of Technology.

See the demos at http://snte.steviec.at/.

Key features

  • unlimited workspace (as opposed to the well-known grid)
  • different workspace elements: tables, textfields, comments, images, charts
  • simplified formula editing
  • reduced featureset focusing on common tasks in the private domain
  • compact, usable interface

Usage

All logic is contained in snte.js. Setup of the application happens in snte_boostrap() function.

snte_boostrap()

Configuration

All configuration of the SNTE application is done with global variables.

var snteSupportedLanguages = [];
var snteDefaultLanguage = "en";

var snteImage = {};

var snteChromeSize = {};
var snteWorkspaceSize = {};
var snteDefaultElementSizes = {};

var snteWYSIWYG = {};

var snteCellTypes = {};

var snteSupportedFormulas = [];

var snteFillColorNeedsBlackFont = []
var snteColorPalette = [];

Workspace

Adding new elements

Adding new elements to the workspace can be done manually by the user or programmatically. All elements available to user creation have a corresponding entry in the #snte-menu-add-element dropdown-menu. A single JavaScript function handles interaction events:

function snte_workspace_add_element(type) {...}

Adding and configuring workspace elements programmatically allows for building small dedicated spreadsheet apps. The histogram-element is an example for that: it consists of a pre-configured table, a special chart and two comments.

function snte_workspace_add_histogram() {
  var $tableCommentElement = snte_workspace_add_comment();
  $tableCommentElement.html(i18n.t("histogram.table-hint"));
  snte_workspace_resize_element($tableCommentElement, "400px", "150px");
  snte_workspace_position_element($tableCommentElement, snteChromeSize.top.height, 50);

  var $chartCommentElement = snte_workspace_add_comment();
  $chartCommentElement.html(i18n.t("histogram.chart-hint"));
  snte_workspace_resize_element($chartCommentElement, "300px", "130px");
  snte_workspace_position_element($chartCommentElement, snteChromeSize.top.height+50, 650);

  var $tableElement = snte_workspace_add_table(snteDefaultElementSizes.histogram.rows, snteDefaultElementSizes.histogram.columns, true, false, true, false, true, false);
  $tableElement.addClass("snte-element-histogram");
  var tableInstance = $tableElement.handsontable("getInstance");
  var tableSettings = $tableElement.handsontable("getSettings");
  tableSettings.colHeaders = false;
  tableSettings.minSpareRows = 1;
  tableInstance.setDataAtCell(0,0,i18n.t("histogram.columns.name.header"));
  tableInstance.setDataAtCell(0,1,i18n.t("histogram.columns.value.header"));
  tableInstance.setDataAtCell(1,0,i18n.t("histogram.columns.name.example"));
  tableInstance.setDataAtCell(1,1,i18n.t("histogram.columns.value.example"));

  tableInstance.selectCell(0,0,0,1);
  snte_wysiwyg_update_table_cell_meta("fillColor", "rgba(239,239,239,1)");
  snte_wysiwyg_update_table_cell_meta("bold", true);

  snte_workspace_set_element_title($tableElement, i18n.t("histogram.table-title"));
  snte_workspace_position_element($tableElement, snteChromeSize.top.height+160, 50);

  tableInstance.selectCell(0,0,tableInstance.countRows()-1, tableInstance.countCols()-1);
  $("input#snte-chart-wizard-first-data-row").attr("checked", "checked");
  var $chartElement = snte_workspace_add_chart("histogram");
  $chartElement.addClass("snte-element-histogram");
  snte_workspace_resize_element($chartElement, "600px", "450px");
  snte_workspace_position_element($chartElement, snteChromeSize.top.height+160, 250);
  snte_workspace_set_element_title($chartElement, i18n.t("histogram.chart-title"));

  snte_workspace_bring_to_front($tableCommentElement.parent("div.snte-element-container"));
  snte_workspace_bring_to_front($chartCommentElement.parent("div.snte-element-container"));

  tableInstance.selectCell(1,0);
}

Manipulating elements

Manipulation of workspace elements happens in function prefixed "snte_workspace_". Supported functionality:

get_element_title

Returns the element title. Currently used for tables and charts.

set_element_title

Sets the element title. Currently used for tables and charts.

remove_element

Move element to trash or delete itpermanently.

restore_element

Restore element from trash.

reset_focus

Removes focus from the currently focused element.

set_focus

Sets focus to an element.

position_element

Moves element to the specified place on the workspace.

make_draggable

Adds and configures drag'n'drop UI handles to an element.

resize_element

Resizes an element to the specified size.

make_resizable

Adds and configures resize UI handles to an element.

bring_to_front

Brings an element to the front of the workspace stack.

send_to_back

Sends an element to the back of the workspace stack.

center_element

Moves an element to the middle of the screen.

add_histogram

Adds a new histogram element to the workspace.

add_chart

Adds a new chart element to the workspace.

add_table

Adds a new table element to the workspace.

add_text

Adds a new textfield element to the workspace.

add_comment

Adds a new comment element to the workspace.

add_image

Adds a new image element to the workspace.

i18n

For new translations, simply place corresponding language-files in a sub-directory within locales folder. Names of the sub-directories are language-codes (e.g. "de", "en"). Language-files must be named "translation.json" and contain JSON encoded object. To register a new translation, add it to the global configuration variable snteSupportedLanguages.

var snteSupportedLanguages = ["en", "de"];
var snteDefaultLanguage = "en";

Builds on

  • jQuery
  • jQuery UI
  • Bootstrap
  • jquery-handsontable
  • jquery-handsontable-excel
  • i18next
  • Numeral
  • phpJS

License

The MIT License (see the LICENSE file for the full text).

You can’t perform that action at this time.