Easy way to make a functional table / grid / spreadsheet

[Martti Lamberg]

Hi!

If this isn't a good place to ask, can someone please forward me to a better web2py forum.

I have a question. Is there an easy way to make a functional table / grid / spreadsheet (or whatever the word is in English, I'm not referring to database table, or a desk)? I want a sort of a map that is x*y grid and every rectangle should have some value on it and be colored according to a certain rule. The values come from database and the users actions may alter the data (it's a game). And everything should happen in real time, without reloading the page. And I want to reserve the possibility to maybe have non-similar sized and shaped panes in the future (they could be even L-shaped or so). So do you have any recommendations? Does web2py offer any solutions straight out of the box or do I need a plugin or something similar?

Mind that I'm an IT, Python and web2py newbie, so try to keep your answers easy to understand. Thanks!

[Anthony]

Can you provide more detail regarding the workflow? Do you need updates going only from the browser to the server without page reloads, or does the server need to push realtime updates to the browser as well? Are there multiple players playing the same game simultaneously (so, if one player updates a cell, the other players' browsers need to show the update automatically)?

Regarding the design/display of the grid itself, you'll need to figure out the HTML/CSS for that. Once you do, though, you can use web2py's HTML helpers and template language to automate the building of each grid. If you show some HTML (or at least a mockup), we can probably help with the template code.

Anthony

[Dave S]

On Friday, June 12, 2015 at 8:51:53 AM UTC-7, Martti Lamberg wrote:

Hi!

If this isn't a good place to ask, can someone please forward me to a better web2py forum.

I have a question. Is there an easy way to make a functional table / grid / spreadsheet (or whatever the word is in English, I'm not referring to database table, or a desk)?

Would this fit HTML's idea of a table?  That certainly is something that discussed here.
 

I want a sort of a map that is x*y grid and every rectangle should have some value on it and be colored according to a certain rule. The values come from database and the users actions may alter the data (it's a game). And everything should happen in real time, without reloading the page.

Aside from Anthony's questions, you should be prepared to be doing javascript to handle the user input.  Javascript may also play a role in updates from the server (via jquery, which web2py makes use of).  Answering the questions Anthony posed could clarify how much javascript is needed.
 

And I want to reserve the possibility to maybe have non-similar sized and shaped panes in the future (they could be even L-shaped or so).

This part is harder to fit into the HTML table concept, but not impossible.

BTW, my javascript textbook had an assignment where a picture was cut into rectangles and scrambled.  The javascript had to let user move the blocks around to get them in the right order.  This didn't use tables, just x-y settings; that would perhaps work with non-rectangles without too much trouble.
 

So do you have any recommendations? Does web2py offer any solutions straight out of the box or do I need a plugin or something similar?

Mind that I'm an IT, Python and web2py newbie, so try to keep your answers easy to understand. Thanks!

Good luck!   We're looking forward to hearing more about this project.

/dps

[Massimo Di Pierro]

Look into this:

http://www.web2py.com/examples/spreadsheet/index

https://vimeo.com/5432441

and this

http://handsontable.com/

It would be a nice project to marge the two into one web2py app.

[Martti Lamberg]

Thank you for your answers! And sorry for the radio silence. I took some of your advice and went and studied some javascript and came up with a small demo.

More on the workflow: I need updates coming to and going from server without page reloads. Not necessarily all of them, but it would make the using more smooth. The possible actions are:

• User chooses different options from dropdown boxes: these don't change data, they just change what data is displayed on the map. Like changing a tab on web browser. But the data is shown on the same page and grid of course.
  
• User chooses an action from several options and performs it on a cell, by clicking on it when an action is selected. The program checks, if it's possible, and executes it. This changes data and the changes have to be shown immediately.
  
• The player ends a turn. This changes data and the effects have to be shown immediately.

There are some more actions, but those three are the most important ones. There are not multiple players playing the game simultaneously. Every player has their own game session. They can however save and load, so that's why every action that changes data have to be saved to db.

So, I made a very simple HTML/JS demo. It's just quickly thrown together, everything is mostly placeholder and I wouldn't be surprised if a few errors are mixed in as well. But it shows the main action and what should be going on.

Link: https://www.dropbox.com/s/isf38wh9x54pqfj/gm_demo.html?dl=0

The main problems still are:

• The very question I have, how can I create an HTML table with an algorithm? The algorithm would be something like: 
  function createMap(dataset) {

      createTable{

          width=dataset.width;

          height=dataset.height;

      }

      fillTable{

          for(cell in table){

              cell.onclick = performAction();

              cell.mined=false;

          }

      }

  }
  
  So a table is created according to the dimensions in dataset and every cell is given a function to execute, when onclick event happens. Also some values in database are assigned for the cell (in this example "mined"). Any idea how this should be done?
• How do you get data to/from database? And without page reloads? This version only has global variables.
• It seems that innerHTML always converts the content to a string before returning. Luckily JavaScript can convert strings back to numbers on the fly, so no problems in calculations, but on logical operations there are problems. Since "true" and "false are handled as strings, I had to compare them as such.

The problem came up in function giveColor(). If the data we are showing is "mined", which is a boolean list, the coloring rule has to check the values as strings. Any "proper" solutions?

[Anthony]

On Tuesday, June 30, 2015 at 1:29:50 PM UTC-4, Martti Lamberg wrote:

Thank you for your answers! And sorry for the radio silence. I took some of your advice and went and studied some javascript and came up with a small demo.

More on the workflow: I need updates coming to and going from server without page reloads.

When you say updates need to come from the server, are those always in direct response to a user action (i.e., user does something, an update is sent to the server, and the server then sends data back to the browser), or does the server sometimes have to push new data/messages to the browser without any immediately instigating user behavior (i.e., what might be called "server push"). Based on your description, it looks like the former, but if it is the latter, that complicates things

Anthony

[Martti Lamberg]

I guess always as a direct response to a user action. I'm not entirely sure as I can't think of an example of that so called server push. But I guess the game is static in that sense that it doesn't do anything unless the user makes it so.

Well one thing comes in mind and that is login timeout, but I don't think I would be needing that.

[Anthony]

On Wednesday, July 1, 2015 at 10:01:19 AM UTC-4, Martti Lamberg wrote:

I guess always as a direct response to a user action. I'm not entirely sure as I can't think of an example of that so called server push. But I guess the game is static in that sense that it doesn't do anything unless the user makes it so.

Well one thing comes in mind and that is login timeout, but I don't think I would be needing that.

In that case, this is all doable by making Ajax requests to web2py. To construct the grid programmatically, I suggest you read the web2py documentation on views. You can either build the grid via HTML helpers (possibly in the controller) or via raw HTML in the view (using Python code to loop over the data). For the Ajax requests, you can use web2py's built-in ajax() function (or otherwise just use jQuery directly). In your demo code, you would probably make an Ajax call somewhere in your performAction function.

Anthony