Png files to code

MIT App Inventor Help
1

I have seen random comments about png files exported from AI2 containing the code in the AI2 blocks.
Is that correct and if so how can the code be extracted?

2

Hi @Dro,

It really depends on the definition of “code”. When you export a block stack (not the whole workspace), we add an additional chunk to the PNG with a chunk type of coDe. This chunk contains the XML serialization of the blocks from the workspace. When you drag the PNG over the workspace, it will turn green and when you drop it App Inventor extracts the information and uses it to recreate the blocks in the workspace.

Many of the block images on this site have these chunks, and you can drag and drop them directly from the site into App Inventor, such as this one:

blocks (41)

3

Can you name the "site" you are referring to?

4

This site...here... the forum :slight_smile:

also can be found in the documentation

5

Here's a sample post.
Search for the word draggable (outside the topic of canvas drags).

6

Here is a video example of another draggable block set, for merge sort …

7

The right click menu on a block should have a Download Blocks as PNG option.
When the download arrives, give it an informative file name (procedure name, global variable name, event name, etc.)

Keep it on your local file system, Dropbox, even github, anywhere but Google Files, which will wreck the internal structure to save space.

8

Thank you all.