Layout pane structure with sprite selector seems to render ok, though stage + blocks panes are not displaying. Sprite Selector is in the wrong position, so there might be flexbox issues specific to IE here as well.

Related to IE - Unable to get property length of undefined or null reference

Tested on virtual image with:

MSEdge - Win10_preview
Edge version 38.14393.0.0
EdgeHTML 14.14393

I want this b/c on playground when I trying to open DevTools (F12 in Chrome) it fails because of playground's keyboard handler. It will be only in developing phase.

For compatibility testing it would be helpful if the GUI ran in 30fps by default.

Expected Behavior

Should be able to edit costumes.

Actual Behavior

Functionality not added.

Operating System and Browser

Ubuntu 16.04, chrome 56.0.2924.76

I am sure you're already working on this, just adding an issue so I can share our first play test findings / complaints.

These buttons should match the design in #1

Expected Behavior

A drop down on the top of the screen should exist called file, that should have in it (among other things) Upload from your computer, Download to your computer. Upload from your computer should create a file picker that picks and then loads an xml file, while download should generate and download an xml file.

Actual Behavior

Feature not yet implemented.

I will need this as well for the demos & play tests over here. Should I make a pull request for this? Or is said feature on the way?

1. Fix space-between issue when either 2-3 sprite items are in a row [vs either 1, or 4]. This will also let us remove margin on the sprite item component, and add it to parent as a independent class.

2. Refactor sprites from set width to PostCSS Lost grid (maybe)

Non-default costumes and backdrops are loading fine in the VM as far as I can tell, so something's up with the add/library situation. This is possibly in the VM functions to add these things, but will track here.

The sound microworld workshop was wonderful. Thanks a ton to both @rschamp and @ericrosenbaum for putting it together.

🎉 🐱 🍰 💥

Expected Behavior

Should be able to edit sprite name, draggable, location, visbility, and rotation style (manually)

Actual Behavior

Functionality not added

Operating System and Browser

Ubuntu 16.04, chrome 56.0.2924.76

I am sure you're already working on this, just adding an issue so I can share our first play test findings / complaints.

Scroll/pan position should probably be stored with a value for each target, so that switching between sprites won't make you need to go back to where your far-way scripts are. (That's a huge problem I have with multiple sprites having tons of scripts in Scratch 2!)

(Probably has a bit to do with scratch-vm..)

Kind of similar to scratchfoundation/scratch-blocks#690.

Moved from scratchfoundation/scratch-blocks#693
/cc @liam4

Anything that has a container, the component should be called x component

Wanted to write down some of the ideas Chris and I discussed about drag-and-drop.

• Since sprites need to be draggable outside of the stage area, they likely need to be rendered outside of the WebGL canvas during a drag.
• One idea is to grab the rendered drawable and paint it to a canvas when the drag begins. The drawable inside the stage can be hidden simultaneously, so it should be transparent to the user. Separately, the VM pauses the scripts on that target.
• The canvas could then be position:fixed/absolute, and dragged anywhere on the webpage (and dropped, for example, into the backpack, or whatever).
• When the drag finishes, the canvas is destroyed and the original drawable is unhidden. The VM should update the position of the sprite. If the drop was inside the stage, move the sprite; otherwise, snap it back to its pre-drag position.

I suspect most of this should be handled by the VM/Scratch-wrapper combo. Things that the renderer will need:

• Ability to hide a drawable (implemented in a PR).
• Ability to render a single drawable to a canvas (or otherwise pull out its pixels and give it to something that can).
• Anything else?

Moved from scratchfoundation/scratch-render#15
/cc @tmickel

Expected Behavior

Sprites and backdrops should display at 1x size on retina displays

Actual Behavior

Sprites and backdrops display at 2x size on retina displays

Steps to Reproduce

Open a project with a sprite while using a retina display

I've looked around and I can't find the reference for it to use vertical grammar.

Expected Behavior

They would be there.

Actual Behavior

They are not implemented.

Steps to Reproduce

Go to http://llk.github.io/scratch-gui and look above toolbox.

Operating System and Browser

Chrome Windows 10

Note

I have a fork that adds BLANK tabs in it is at https://github.com/TheBrokenRail/scratch-gui/tree/master These tabs use colors from the concept image in #1.

This could be used for the offline version, or for testing design for the offline version.

Links:
https://thebrokenrail.github.io/Scratch3Builder
https://github.com/TheBrokenRail/Scratch3Builder

I couldn't do mac because of GitHub file upload limits.

2 things:

• Need space between items across rows on hover
• Width on items are not the same across rows

https://llk.github.io/scratch-gui/#118804225

Stage/Sprite1 from the original project never go away. Do we need the vm.clear() for this?

There is a <CostumeCanvas /> component which should help with that. All the data from the VM should be present, except maybe the current costume per target.

Currently they are individually styled.

The implementation should be at a point where some design can be applied, and this is needed for the prototype.

These seem to load very slowly.

The basic problem is that they require tons of network requests currently. The sprite library has to request one JSON file per sprite, and then separately one SVG/PNG. The costume library has to request all the images (no JSON), but there are many of them.

Two ways we could address this are packaging the metadata into scratch-gui, or by implementing lazy loading.

This is my accounting:

• say
• say for n secs
• think
• think for n secs
• entire pen category
• show variable/list, hide variable/list.
• when "loudness"/"video motion" > _ (timer works).
• ask and wait
• answer (for ask and wait)
• loudness
• video motion reporter
• turn video on/off
• username
• "more blocks" category

We need to refine the design of this pane

Iterate the application UI shell, aka, chrome, towards latest designs.

The Backdrops Don't All Work Because Several of Them Are Missing Size / Resolution Info

I assume you already know this, but talking is fun.

Specifically:

• atom playground
• beach malibu
• bedroom1
• bedroom2
• bench with view

and 74 others have empty "info".

On a fresh clone and npm install:

npm WARN EPEERINVALID [email protected] requires a peer of [email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of [email protected] but none was installed.

Expected Behavior

Not yet implemented

Copying this as it's a line item from the prototype plan. I'm assuming it just means getting the styling right.

Updated by Paul, July 6th

First Iteration will include

• Play / Stop
• Renaming
• Start / End Trimmer
• Duplicate entire sound
• Applying effects to an entire sound (chipmunk, monster, robot, echo, fuzz)

Not included this iteration

• undo/redo
• positive selection tool
• pause
• timing indications
• zooming

This is a common request from partners and would be good to generate.

I ran npm install, and then npm start, and got this error:

npm start

> [email protected] start C:\Users\johnr\Documents\scratch-gui
> webpack-dev-server --port $npm_package_config_port --content-base=./build

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES $npm_package_config_port
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1249:19)
    at listen (net.js:1298:10)
    at Server.listen (net.js:1382:7)
    at Server.listen (C:\Users\johnr\Documents\scratch-gui\node_modules\webpack-dev-server\lib\Server.js:321:27)
    at Object.<anonymous> (C:\Users\johnr\Documents\scratch-gui\node_modules\webpack-dev-server\bin\webpack-dev-server.js:183:37)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\johnr\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v7.0.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `webpack-dev-server --port $npm_package_config_port --content-base=./build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --port $npm_package_config_port --content-base=./build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the scratch-gui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --port $npm_package_config_port --content-base=./build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs scratch-gui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls scratch-gui
npm ERR! There is likely additional logging output above.

Expected Behavior

Should be a button to delete a sprite

Expected Behavior

After selecting new sprite, said sprite should appear.

Actual Behavior

Works sometimes, but not always. Eg. apple doesn't load.

Steps to Reproduce

Start blank project, click new sprite, click apple.

Operating System and Browser

Ubuntu 16.04, chrome 56.0.2924.76

Expected Behavior

The costume and backdrop libraries are extensive, and there should be search, check boxes for tags wanted, or other sorting functionality to make them more usable.

• Design
  • Benchmarks
  • Existing use case documentation
  • Overall UX wires
  • Vector editor spec
  • Bitmap editor spec
• Implementation
  • Add "costume" tab
  • Vector editor
  • Bitmap editor

Expected Behavior

Should click new backdrop, and on the new screen, should be able to select import, then select a backdrop

Actual Behavior

No such import button / function

I will need to add this for the local play test over here. If you all have this in the works, let me know.

This block is intended to make the sprite turn in the opposite direction when it hits an edge.

What actually happens is that the sprite just keeps moving into the edge of the screen.

To view the error, just make a script saying: 'When green flag clicked, forever, move 10 steps. If on edge bounce.'

This error was viewed in Firefox on Mac OS X 10.6

Green flag/stop seem a little small and offset scratch-blocks
Sprite selector bounding box will sometimes cut off text
Sprite selector is not centered on sprite
No bounding box for stage.

Expected Behavior

There should be spacing between the green flag and stop button.

Actual Behavior

There is no spacing between them

Steps to Reproduce

Open Scratch GUI

Operating System and Browser

Chromebook

In https://llk.github.io/scratch-gui/ if you click on 'New Sprite' and select a sprite in the pop over modal, only some of the sprites may rendered in the stage.
For example 'Abby' works, but not 'Airplane' or 'Bat2'.
I am not sure if this should be an issue for gui, since not new sprite button in vm's playground.

Part of #53. Stub HTML is in place, hook up to VM.

You should be able to toggle between "light mode" (as in the comp in #1) and "dark mode" (the current default look of scratch-blocks). The light mode should be defined as the default look in scratch-blocks.