Hopscotch project JSON reader

This is amazing! Great job @t1_hopscotch

2 Likes

I’m going to try this out later. This looks sweet. Good job @t1_hopscotch!

1 Like

Whoops, should have added that it stands for JavaScript Object Notation, but that itself doesn’t explain much :joy: I will add that in though to clarify!


Wow thanks BuildASnowman :relaxed: You are one of the people I would like to thank! — I learnt from peeking around on the forum seeing what you’ve talked about regarding Hopscotch project JSONs :slight_smile:

Hehe, I actually did have more plans that I didn’t mention — I was hoping/dreaming (dreaming, more like) to make something so that you could view the code blocks more easily from a non iOS device (for example, if you’re on a computer, when someone links a project, you might just want to see the blocks which would be enough to help with a problem/question or just see how an aspect works for example, but you can’t do that at the moment).

I actually didn’t think much about an editor (I thought it might be beyond me just at this point :slight_smile:) — I saw @Rawrbear and @K1ish were working on one using GameMaker, but now I think about it, that would be pretty… fun… :thinking::open_mouth::yum: I’d need to be more familiar with how the blocks/code is arranged in the JSON file, but I think I can sort of see how to try edit the data using Python… :thinking:

(I recently got to be part of working on a website that uses Python for a server, so having it hosted as a website is a potential possibility… :open_mouth: but like I just said, these are just little dreams at the moment :stuck_out_tongue: but would be very, very fun to try and do :relaxed:)


Ooh thank you Sweetlina; I thought it would be pretty messy and confusing :joy: I will still try to clear it up though I think :slight_smile: And also, I think it’s lovely that you’re giving encouragement :blush: that’s awesome, no matter how old anyone is :relaxed: (also I don’t think ive really mentioned much about my age anyway actually :stuck_out_tongue:)

Thank you @anon68105100 and @William04GamerA too :relaxed:


Ooh I can go update the instructions :stuck_out_tongue: (I shouldn’t wait for a good reason, but this is a great one!) And also thanks to you too, @MR.GAM3R — I learnt from seeing you talking about project JSONs around the forum too :blush:

I would like to add that like 90% of the code there was searched up basically; really! :joy: — it is awesome seeing that you can indeed learn as you go!

16 Likes

That’s really cool X3

2 Likes

That’s very clever. Great work.

1 Like

I will just jot down a few things here :slight_smile:

You can edit this too, you know!

Ideas/investigations/possible todos :clipboard::

  • :white_check_mark: can save project to a file

  • document more on Hopscotch project JSONs so more Hops can see :relaxed:

  • possibly, see how going in another language might go

(Dreams) :thought_balloon::

  • render blocks in JSON files for viewing??
  • edit JSON files??
  • Discourse plugin??? so we can view directly on forum (very big dream)

Wonderings :thinking::

  • Does the order of keys in dictionaries matter for Hopscotch reading a JSON file? (In Python, the key order for dictionaries is different every time you start it)
  • What does the JSON for code look like if I put more blocks in a project? (e.g. have Ifs and Repeats inside each other, and Draw Trail and so on)
  • general idea of structure of JSON file

‘Purposes’:

(this doesn’t really have a purpose — main is just for fun :stuck_out_tongue:)

  • Just for fun!
  • So Hops can see more with project JSONs
  • Viewing code for projects more conveniently —
    e.g. if someone has a question about why some code isn’t working as expected, or if you just want to See Code for a project while viewing in a browser and you don’t have an iOS device with you

“Can I get involved…?”

Yes!!

  • @Rawrbear has ideas for a Hopscotch IDE (integrated development environment) where you can make and edit Hopscotch projects :open_mouth:
  • Organising all these posts I’ve made :joy:
    (e.g. group together similar/related things, having a list where everything is, updating todo lists maybe — these are not what you have to do; I enjoy doing these too and I can do these myself, it is just if you like doing that sort of thing as well, then go for it :stuck_out_tongue:)

  • Styling for the blocks (when it comes to displaying the actual blocks, e.g. making the text for all the Movement blocks red etc. Will probably involve HTML & CSS, you can learn about those!

  • And of course if you want to try some of the programming, you are most welcome to do so!

  • And anything that you can dream of. This itself is a dream :joy:

Resources:

14 Likes

Jotting down a few other things… This is more informational.

Again, please feel very free to edit.

How the program works:

A general text description:

get the html from a project url
look for <div> tag that has a `data` attribute
get the value of that `data` attribute (as a string)
convert to an object (or anything that you can manipulate)
save the object to a JSON file

How to view the project JSON in your web browser (!)

  1. Go to project link and right click over the player:

  2. Click Inspect Element (how to peek behind the scenes of any website, or, in other words, ‘how 2 become L33T H4x0r/a mad hacker’ like in this PyCon (Python conference) talk)

    I’m using Safari, but this functionality is common to pretty much most browsers at least. In Safari, I navigated to Elements to see the HTML (hypertext markup language — is code used to make websites and uses <tags> to wrap around different things)

    You’ll find the JSON in the data= part of a <div> somewhere, and you’ll see it in a reaally long line:

You can copy and paste that somewhere and try to separate it manually, or the project files that are saved using the program I put above will have that automatically done too. I think some people have text editors that can also collapse things automatically for them, which is very handy (but I don’t have one that does. I have one that colours text so I can see things a little clearer though, it is called Atom.)

What does the project JSON contain???

I am still exploring this too :slight_smile: Some things you might see:

  • ‘Hey, I can see some block names!’ Yep there are the names of the blocks, this is the data for storing the blocks in projects I believe :slight_smile: Let’s take a look at some (or one or two).

[I may have to leave this til later, but you can see this is an example for `Grow by 10%` :slight_smile: for now]

  • Anything that is a generated ID will often be a really long sequence of characters. Generally, IDs need to be unique and the longer a string is, the more options you have for naming it.


(For example, if you have a one-letter long name, there are 26 letters in the English alphabet that you can choose for it. But if you extend it to 2 characters, now you have 26*26 = 676 options for names. You can imagine the more characters it becomes, the more options you’ll have. If you have a system that has heaps and heaps of objects, you’ll need pretty unique names.)

Also I think there are probably security reasons too for IDs seeming long and a little random. And there’ll be other reasons too. I’m mentioning this mainly for if you happen to be looking at them and going like ‘why is this so long??’ which would be totally okay by the way :stuck_out_tongue:

I heard we can edit the JSON. What happens if I edit the JSON?

There is a way to put JSON projects back into your Drafts (and get them from your Drafts) using iTunes and connecting your device to a computer. If the editing is valid JSON for a Hopscotch project, the changes will be made in the project too. There are Hops who are more familiar with this (plus the Hopscotch Team too of course :)

I’m not exactly sure how it works in Hopscotch but I just know JSON is a way of storing data generally. This is from a veery limited understanding and my initial aim is just to make this more accessible :relaxed: so please feel very free to correct.

So I’m guessing: the JSON isn’t exactly the project itself, it is a way of storing what is in the project. You store that the user who made the project is t1 (for example) and that these particular blocks are in the project (e.g. Draw Trail, Move Forward 300 etc.) And when the editor opens a project, it looks at these notes (what blocks are in it, in what order, what objects you said were in there, and who made it etc) and then knows what to show or display.

if you start copying and pasting the JSON section for a Grow block or something, and repeat doing that in a row, logically I’m guessing you’ll end up with a whole bunch of Grow By blocks in your project rule, right? Well, you know what, let’s go find that out… :open_mouth: coz we can do that :stuck_out_tongue: (might have to try later though coz I will have to head off for now :stuck_out_tongue_closed_eyes:)

And with the JSON ‘not being the actual project itself’, peeking around, I can see that the filename for a project ends in .hopscotch, so you can sort of see the JSON specifies more of the contents of a project —the blocks and rules inside it, its objects, its creator etc.

16 Likes

Is this code open source? I’d like to figure out a way to use this in our project, if possible. ^^

4 Likes

Hi Rawrbear! Yes! :smiley: it is the first link at the very top of the topic :relaxed: that is awesome, (dream would be to work with others) Feel very free to ask about anything :blush:

8 Likes

Is Python a web language (meaning you can integrate it into websites)? Don’t know much about it, lol.

3 Likes

That’s so confusing and cool XD

2 Likes

Ahh, thank you so much! I’ll try learning C++ as fast as possible to get the application out sooner (if school isn’t in the way too much). :smiley:

2 Likes

Yeah, you can import Python plugins into a website! You can also make/run Python PC applications and plugins with it if you install the language. ^^

2 Likes

Oh man - this is exactly what I hoped for when I published my hack. JSON’s are the key to hopscotch, and you are now the gatekeeper :stuck_out_tongue:

I made a programming language that translates to Hopscotch jsons before, to be able to make projects on my computer. I know quite a bit about the structure of these files - if you ever have a question, don’t hesitate to ask :smiley:

8 Likes

Yeah you can use Python for a number of things (it is referred to as a ‘general purpose’ programming language) :relaxed:

Wow are you using C++ for the JSON editor that you were working on? :open_mouth: haha there’s no rush or anything :relaxed::blush: I see you’re pretty keen about it though! and you must have quite a few things on your plate already too :slight_smile:

Wow that’s awesome to hear :relaxed: and wow… :open_mouth:

That is really cool!! A programming language, did you say? :open_mouth: that is epic; how does it work? And that’s lovely; thank you so much, I think I’ll have quite a few questions already actually :joy: I think for the moment they’re things that I can investigate myself first for now (and will probably get a better idea if I look through closely first)

Oh, I have some of my wonderings in one of the posts above, actually :slight_smile: I think I just need to get a general idea by peeking around more first.

7 Likes

Steps for starters: (a first edition)

Before you start, this involves installing some things so make sure everyone is okay with that. Also there is probably a risk that things might not work, so just be aware.

This is for the program to get a project URL and save its JSON contents in a folder.

  1. You can download the latest Python 3 (this is made with 3.6.0 I think) which will let you have IDLE on your computer. IDLE is what you can use to run Python programs.
    The program I made is using a programming language that is called Python, much like how Hopscotch is a programming language, except it just uses text instead of blocks.

  2. Once you have IDLE installed, open it and make a new file (File>New should do it). Go to the code in the original post, and copy and paste all the code from there into the new file. Then save the file (in a folder where you can find it), with a file name that ends in .py (you could call it hopscotch_read_url.py or something)

  3. In the folder where you saved the file, make a new folder inside there and call it project_data — yep, with underscores and exact case and everything (Python won’t recognise it if you change case or any symbols)

  4. Go back to IDLE and press F5 to run the program that you have open (or go to Run>Run Module at the top menu)

    I am expecting that you might run into an error that will probably say something like ‘No module named lxml’ or something like that. That’s because this program uses some code from a library called lxml (line 4):

from lxml import html

and we will need to install it. Installation was quick for me, but yeah I don’t remember what errors might pop up and what I’ve installed beforehand already :thinking:

5. Find the Terminal shell application for your computer (on Mac, it is the Terminal application; on Windows…tell me if you are using Windows, will have to look it up). And then type in:
pip install lxml
and press Enter. This may take a little while to install.

Then go back to step 4 to run the file again once that’s done.
You will find the project JSON under the project_data folder that you created earlier (hopefully…)

If you run into other errors, please let me know too, I don’t remember everything that might not work :joy: I’m also sorry if things don’t work; maybe I should put this at the start — edit, I will.

7 Likes

We were using GameMaker Language, but it’s not very good for making programs that search for data from currently-obtained local variables stored on your PC/Mac, plus it doesn’t support Apple operating systems very well. I was told to learn and use C++ instead, as it offers solutions to these problems, plus it’s a more common language.

Nope, it’s totally fine! This project seems it would be more fun/successful to develop than other projects I’m currently in the midst of ^^

4 Likes

You know what, I’ll learn Python instead. I haven’t actually touched C++ too much, plus it’ll make embedding your code easier.

I made a GitHub repo just now to store the new project’s code in. Maybe others would be willing to contribute as well :smiley:

https://github.com/TheRealPhotonic/Hopscotch-JSON-IDE

4 Likes

Cool, thanks for the tutorial! :)

1 Like

Is this like the Hopscotch JSON editor app you were working on a while back?

2 Likes