Values for Elements from Spreadsheet?

Elements
1

Hi all,

Many thanks in advance for considering my question. I’ve made a few websites with Hype but I’m not a programmer. I’m a med student and this current project is to create a new way to visualize the sensitivities of bacteria to antibiotics (antibiogram).

I’m wondering if there’s a way that I could link the values in a spreadsheet to values for elements - for example a column of percentages that determine the opacity of particular objects (for this project, the % sensitivity of bacteria to an antibiotic), or a column of words that corresponds to particular text boxes (here, the names of bacteria). I wonder about whether there’s a way to have an element grab data from a cell of a googledoc spreadsheet, so I could edit the spreadsheet and have the site stay up to date? Many thanks for your feedback,

Benji

2

Can’t hep on googledoc, but the common way would be to work with a database or *.json files.
may be googledoc has an export for json?

3

This maybe Possible. But maybe a bigger question outside of Hype.

I just did a test Using the Google Drive Javascript API.

My test worked but you will need to workout the full details of the Google Javascript API and then try and incorporate it into Hype.

It looks like the API allows you to access your files on the Google Drive via Javascript and a web app.

I would suggest that if you already have a Googel Drive/Account you setup a new Google account and use it for this and keep you main one separate.

In My test I followed the instructions Here

https://developers.google.com/drive/web/quickstart/js#step_1_enable_the_api_name

In the Instructions it Mentions about running a Python server. I did not want to do this so I worked around it.
Again for your test you will need to workout this yourself and how your real one would work.

My Test setup

I created a New Hype Project and added a HTML Widget.

I then Pasted the Code from the quickstart/js#step page into the innerHTML of the widget. ( with my client id as instructed)

I then uploaded it to my site.

In the credentials setup on the Developers console as mentioned in the quickstart/js#step page, where it asked me to enter a localHost URI (javascript redirect) , I ended up using my site URI .

Remember I have uploaded to my site and I did not want to use a local server.
There probably are instructions on how to do this correctly.

The test page loaded and asked for Auth. It then loaded the docs list as expected.

Note: what I have done above is just a proof of concept and in no way am I saying this is the correct way of using the API, I mention this because I do not know the security implications of my method above.

1 Like
4

h_classen, MarkHunte,

Many thanks for your thoughtful replies. I believe I’ve come to the point where I need to learn more about what’s "under the hood"so to speak. In order to achieve what I want, I’m headed for a study of javascript. Then I’ll better understand your responses and come to a solution for my vision for the website.

Sincerely,

Benji

5

It's possible with Hype. It involves JavaScript though.

The easiest way to get started is to convert the data to something more JavaScript friendly...

If the data is in an array, then the "inner HTML" of an element can change based on data from that table.

If the data needs to be constantly updated, then that's probably going to involve some heavy lifting on the server side, such as with PHP.

I'm not working on medical projects (that sounds cool by the way) but I am working on a game. The game design involves using an array to keep track of bombs. It's crazy early in design, so it's not a great example yet...

  • B.R.O.O.M. – Photics.com

    var grid = [
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    ];

Right now, there aren't any bombs in the game yet. That's a two-dimensional array, so the idea is to use the JavaScript to position the bombs. That approach might be applicable to your project.

6

This tutorial shows how to extract data from a google spreadsheet as Json data: Use a Google Spreadsheet as your JSON backend (Example)

2 Likes
7

I did a test with this and it works. But it looks like you have to publish to Public..

Be good if we could keep it private

8

Yeah that’s a bummer. Can you share your example?

9

This is the Public sheet.

Screen Shot 2015-12-03 at 20.51.56.JPG760×768 79.2 KB

Hype Scene with Data taken from the Google Sheet:

Screen Shot 2015-12-03 at 20.52.31.JPG720×780 89.1 KB

Updated Version:

getGSheet_v2.hype.zip (49.3 KB)

2 Likes