The old way of downloading the PNG with the code should also stay. I want the SVG images for other things.
With SVGs you get high quality images of the blocks that you can size as big as you want. You aren't limited to the size of the generated png's. If you scale a bitmap you get less image quality.
Those svg images can be used on a lot of media for example on posters/tutorials/t-shirts
Below an example of a Scratch image generated by the Chrome extension I showed.
When you could get the SVG you could make images like these. You could seal them so you could write on them. You could tell about the different properties or let students write them down on it while working on a project together without using the computer.
This is how they look in Inkscape and in Brave. The scratch ones work without a problem. Only the green flag or the dropdown widget is made into a bunch of bad pixels but i can replace them.
They are also using the font from Scratch being Helvetica Neue. I don't know if that is the font of App Inventor to.
I was also wondering how many unnecessary data is send when generating the blocks. The bevel edges are not really needed and a remnant from earlier versions of the App Inventor blocks.
My guess is that the extension is making certain assumptions about the particularly Blockly version. Scratch blocks were created on a newer version of Blockly than App Inventor currently uses, so my guess is that it is failing to grab all of the necessary style dependencies to produce the right SVG. I do have a tool to generate all of the blocks from a given extension, which is used to provide the images in the IOT website e.g., the BluetootheLE docs where the images are actually SVG. That's done using nodejs, so a similar technique should work in the browser.
The block is not exporting correctly because newer version of blockly change the CSS injunction (currently we are not able to get CSS style using javascript blockly API) so now we have to select element form DOM and then copy the CSS content of the element.
Congratulations @Kevinkun!! Your extension is wonderful!! I had a lot of trouble when I needed to find blocks since the two apps I have built using App Inventor are quite large. It took me ages of panning and zooming in and out, and with your extension I can go directly where I want!
click on find and write the name of what you want to find.
Unfortunately, it just does that, for everything else just follow the advice to download the extension. Hello
Thanks again! Works as expected on Chrome. My browser is Firefox, I'll try that too.
What I find confusing is that it always says "Found one match", it would be nice
if it said "n of m" - but may be tricky to code...
I made an update for this AI2HELPER, now it looks like this:
Click the AI2HELPER button, it will show (or hide) a palette, you will see some buttons and a list of all the top blocks (global variables, procedures, and events) in alphabetical order.
Click on this list item, it will highlight the relavent blocks.
Thanks for your report. please check with 0.7.7.
Now the helper will hide automaticly when switching to designer view.
If the screen is not wide enough, you need to use the horizontal scrollbar.