Spec
#Table scroller
Sometimes, the people is looking for something that is in their mind but just with a visual reference and they don't know the concept in specific about what are they looking for, or just they don't know what do they want, so, this project is for helping that people.
But first we need to know how can we show the options to the user.
Visual search is a type of perceptual task requiring attention that typically involves an active scan of the visual environment for a particular object or feature (the target) among other objects or features (the distractors). wikipedia.org
Based on the previous definition, we can see that the mind needs to have clarity about what is looking and a good presentation mixed with order in the images and ideas can be a good solution to really help the user to find what he is looking for.
- A user interface that facilitates the presentation of images.
- Use visual search principles.
- How the proposal images works.
How to guide users for visual searching purposes.
If we show order in the images presentation and provide an easy way to control this will be faster to find something.
- The table only will work with the measures 3x3 (3 rows with its 3 inner columns)
- The grid showcase will always have 3 rows with its 3 inner columns, that is 3x3.
- We will have a easy tutorial guide for the user
- The page will start with a first searching input, to then show the table.
By using an interface that shows the proposed images and an overlay that adds new images, we can help the user to find what he's looking for:
- By using a table with the measures 3x3 to show the main images that result of the user searching, with this we'll have a image center and 8 directions to choose the next center image:
- Vertical: top and bottom.
- Horizontal: right and left.
- Diagonal: top-right, top-left, bottom-right and bottom-left.
- With an overlay that would have buttons only in the edges (the central cell doesn't have it) the user will can control the movement of the table and the button will be in the same position all the time.
- The back end will provide the searching engine for this.
When the user gives a set of keywords, we'll provide him with a grid with some options so he'll control this pressing the buttons in the overlay table, to add new images and delete the opposite ones to refine the search.
+-------------------+
| The document will |
| load the table |
| with the overlay |
| that have the |
| the control |
| buttons |
+---------+---------+
|
+---------v---------+
| the user press |
+------> one of the buttons|
| | in the edges |
| | of the table |
| +---------+---------+ (buttons)
| | +------+------+------+
| +---------v---------+ | top | top | top |
| |the table ceate one| | left | | right|
| | extra row or/and | +------+------+------+
| | columns depending +--->| left | | right|
| | of the position | | | | |
| | of the button | +------+------+------+
| | pressed | |bottom| |bottom|
| +---------+---------+ | left |bottom| right|
| | +------+------+------+
| +---------v---------+
| | the row or/and |
| | column in the |
| | opposite side |
| | will be deleted |
| +---------+---------+
| |
| +---------v---------+
| | the current |
| | position will be |
| | updated |
| +---------+---------+
| |
+----------------+
- At the beginning will be the 3x3 grid and the ovelay with the buttons.
- When the user press one of the 8 buttons this will
- activate the functions that adds columns/rows, delete the opposite rows/cols and change the current position variable
the table will continue mesured 3x3 but with different position.
This is the field where the user can write the keywords about his search.
The table is a simple table with the specific measures of 3x3 and the position property as absolute.
- Table
This is another table but inside of this has buttons only in the edges (so, the center cell is empty), and its position property is absolute.
- Buttons
The buttons inside each cell of the overlay table call a specific function depending on its position.
In this part we have 4 funcions for the 4 sides of the thable (top, bottom, right and left). Once the user clicks one of the buttons this module will activte one function or 2 in the corners case (for adding one column and one row at the same time).
For the functions adding rows top and bottom, we first need to get the table and use the insertRow() method, and then insert 3 new cells with the insertCell() method using a iterator, like the example below:
function addTopRow() {
var theTable, newTopRow, firstCells;
var theTable = document.getElementById('myTable');
var newTopRow = theTable.insertRow(0);
var firstCells = theTable.getElementsByTagName('tr')[1].getElementsByTagName("td");
for (var i = 0; i < firstCells.length; i++) {
newTopRow.insertCell(i);
};
}
To adding columns in the right and left sides, we again get first the table and then with a iterator we use the insertCell() method for add a new cell in each row, depending of the value that this method receives will define the side in which we want to add one new column (0 will be the left side and -1 will be the right). like the following example:
function addLeftCol() {
var rowsTable;
var rowsTable = document.getElementById('myTable').getElementsByTagName('tr');
for (var i = 0; i < rowsTable.length; i++) {
rowsTable[i].insertCell(0);
};
}
Once the functions finish to creating the new columns and/or rows it is time to delete the opposite overflow, so for this we will have 4 functions, one for each side of the table (top, bottom, right and left). Depending on the last function that created the new row and/or column we'll know what of this 4 functions do we need.
For the top and bottom sides, we just need to use the deleteRow() method to the table, like the example below:
function deleteTopRow() {
var theTable = document.getElementById('myTable');
theTable.deleteRow(-1);
}
For the right and left sides we need a iterator to pass into each row and then delete one cell, either the first one (for the left side) or the last one (for the right side).
function deleteLeftCol() {
var rowsTable = document.getElementById('myTable').getElementsByTagName('tr');
for (var i = 0; i < rowsTable.length; i++) {
rowsTable[i].deleteCell(-1);
};
}
The user maybe doesn't need to know how many cell he is from the beggining, but we can know his position in the table using coordinates like a cartesian plane, and for that we will have a variable that will let us know the current position and will be affected by 8 functions that will add or substract numbers depending on the button pressed.
For this we have 2 axis, one is the X axis that represents the columns (right and left sides) and on the other hand we have the Y axis for the rows (top and bottom sides).
For the X axis if the user press one of the top buttons we need to add one number to this axis, and if the user press one in the oposite side (bottom) we will substract one (positives for up, and negatives for down).
It's similar in the Y axis but we will add one if the buttons are on the right and substract if they are in the left.
[+]
^
|
|
|
|
|
[-] <------------ 0,0 -------------> [+]
|
|
|
|
|
v
[-]
For making this posible we will start we varible with the value 0,0.
var currentPosition = "0,0";
After that we will use the split() method for divide the string value of our variable into 2 array items, and then we need to pass this values to numbers, so for that, we'll use the parseInt() method.
var independentVelues = currentPosition.split(",");
var positionX = parseInt(independentVelues[0]);
var positionY = parseInt(independentVelues[1]);
And for this we just need to add or substract one number (position) depending the button pressed, as we can see below:
+--------------------------+
| Modification in the axis |
+---------------------+-------------+------------+
| Button pressed | X | Y |
+---------------------+-------------+------------+
| Top | / | +1 |
+---------------------+-------------+------------+
| Bottom | / | -1 |
+---------------------+-------------+------------+
| Right | +1 | / |
+---------------------+-------------+------------+
| Left | -1 | / |
+---------------------+-------------+------------+
| Corner Right-Top | +1 | +1 |
+---------------------+-------------+------------+
| Corner Right-Bottom | +1 | -1 |
+---------------------+-------------+------------+
| Corner Left-Top | -1 | +1 |
+---------------------+-------------+------------+
| Corner Left-Bottom | -1 | -1 |
+---------------------+-------------+------------+
Example of a Right-Top function ():
currentPosition = 0,0;
function goRightUp() {
var independentVelues = currentPosition.split(",");
var positionX = parseInt(independentVelues[0]) + 1;
var positionY = parseInt(independentVelues[1]) + 1;
currentPosition = positionX + "," + positionY;
}
- Input values that the user gives it.
- Shearching input: for knowing what needs to show as the result.
- The overlay (buttons): to recive the orders for creating or deleting new rows and cols, which in turn it depends on other two modules, which will see later.
- User actions: to activate the buttons and to know what functions do it needs to call.
- Adding new columns and rows: Once the user generates an action, the table needs to add new columns or rows.
- Deleting opposite columns and rows: To get rid of the surplus, when a new row or column is created we'll delete the opposite one.
- The table: To add the columns and rows into this element.
- Te overlay: To know in which side do we need to add the columns and rows, depending on the activate button.
- The table: To delete the columns and rows into this element.
- Te overlay: To know in which side do we need to delete the columns and rows, depending on the activate button.
- The overlay: To know in which axis do we need to add or subtract one number, depending on the activate button.
- The table must be 3x3 (3 rows & 3 columns)
- Each cell measures do not matter
- Do not remove the overlay, the buttons are the mechanism that makes the table works.
- The overlay and the table must have the
position: absolutein the stylesheet.
- The overlay and the table must have the
+--------------+------------------+-------------------+--------------+------------+
| User | Table | Overlay | Functions | back end |
+--------------+------------------+-------------------+--------------+------------+
| Indicates the |
| keywords +-----------------------------------------------------> Recieve the|
| input data |
| + |
| | |
| v |
| Select 9 |
| related images|
| Displays a table <----------------------------+ and sends this|
| of 3x3 to show them |
| + in each cell |
| | in the table |
| +-------------+ |
| | |
| v |
| The user |
| press one of |
| the buttons |
| + |
| | |
| v |
+---------------------------------------------------------------------------------+
| EXAPLES OF USE CASES |
+---------------------------------------------------------------------------------+
+---------------------------------------------------------------------------------+
| TOP |
+--------------+------------------+-------------------+--------------+------------+
| User | Table | Overlay | Functions | back end |
+--------------+------------------+-------------------+--------------+------------+
| User press |
| the top +--------------------> The top button |
| bottom calls a function |
| that activates +--------+ |
| the functions: | |
| v |
| Adding top |
| Add one top row <---------------------+ row function |
| + |
| + |
| Delete one |
| Delete one <----------------------+ bottom row |
| bottom row with its |
| inner cells |
| + |
| + |
| add one number |
| to the Y axis |
| and updates the |
| current position |
| variable |
+---------------------------------------------------------------------------------+
+---------------------------------------------------------------------------------+
| CORNER BOTTOM-RIGHT |
+--------------+------------------+-------------------+--------------+------------+
| User | Table | Overlay | Functions | back end |
+--------------+------------------+-------------------+--------------+------------+
| User press |
| the corner +------------------> The corner button |
| bottom-right calls a function +-----+ |
| button that activates | |
| the functions: v |
| Adding bottom |
| Add one <------------------------+ rows function |
| bottom row + |
| + |
| Adding right |
| Add one <------------------------+ col function |
| right column + |
| + |
| Delete one <------------------------+ Delete top |
| top row row function |
| + |
| + |
| Delete one <------------------------+ Delete right |
| rigth column col function |
| + |
| + |
| add one number |
| to the X axis |
| and substract |
| one to the Y |
| axis to updates |
| the current |
| position variable |
+---------------------------------------------------------------------------------+
- The table has a overlay with buttons?
- if I press a button that isn't one of the corner do I have a new row or column in the side that I press it?
- If I press a button in one of the corners do I have a new column and row in the side that I press it?
- The columns and rows are delete once I press a button in the opposite side?
- If I pres one of the buttons the table continue mesuring 3x3?
- The current position variable in uploaded once I press one of the buttons?