Backpack should give some indication that the block was added

[BeksOmega]

Category

• Examples

Component

backpack

Describe the bug

When you drop a block in the backpack, there's no way to tell if it actually worked besides opening up the backpack.

To Reproduce

Steps to reproduce the behavior:

1. Go to the backpack demo
2. Drop a block over the backpack
3. Feel the uncertainty bubble in your stomach about whether the block actually went in the backpack or not.

Expected behavior

Probably a sound + a different visual state for having things in it vs not having things in it. This is what the trashcan does, and what AppInventor does.

Screenshots

N/A

Additional context

N/A

[Chappie74]

I started looking into this. Would like some assistance.

Would this image be suitable for a filled backpack?

Also, any resources you can point me to for playing sounds?

@BeksOmega

[BeksOmega]

Would this image be suitable for a filled backpack?

I like it! But I'm wondering if there's a way to change the icon to make it look more like a block/code? This reminds me of raw data, which could definitely also work, but I'm wondering if there are any other options first.

If we do go with this image: could you include a bit of info about how you created it, or where you found it? I want to make sure we're not violating any licenses hehe.

Honestly, the best option would probably be to let external devs modify the image (so the backpack could also be a box, suitcase, etc). But that's a separate issue hehe.

Also, any resources you can point me to for playing sounds?

I think you probably want to use getAudioManager, and then the WorkspaceAudio API.

Thank you for your interest in this issue! If you have any further questions please reply :D

[Chappie74]

Thanks for the reply.

I like it! But I'm wondering if there's a way to change the icon to make it look more like a block/code? This reminds me of raw data, which could definitely also work, but I'm wondering if there are any other options first.

Could you elaborate more on the raw data block/code idea you have in mind?

If we do go with this image: could you include a bit of info about how you created it, or where you found it? I want to make sure we're not violating any licenses hehe.

I created it myself. It's just a modified version of the image that is already there. I edited the SVG with inkscape, i'm no artist lol so I went for something simple.

I think you probably want to use getAudioManager, and then the WorkspaceAudio API.

I've figured out that I would need to use those functions for the audio. However, when I try loading it up, the file returns a 404. Any suggestions on that.

I have it stored here

And referencing it like this. I've also tried media/filename.mp3

In addition, the audio would be a trimmed version of freesound.org roughly 00:00.04 - 00:00.34

[BeksOmega]

Could you elaborate more on the raw data block/code idea you have in mind?

Thinking about this more, I couldn't come up with anything concrete + good haha. I was thinking "maybe an outline of a block" but that doesn't work if you're using different renderers. Then I thought "maybe some curlybraces?" but that doesn't make sense if you've never written text-based code before.

So I think your suggestion is great =)

I created it myself. It's just a modified version of the image that is already there. I edited the SVG with inkscape, i'm no artist lol so I went for something simple.

Awesome! That's perfect :D

I've figured out that I would need to use those functions for the audio. However, when I try loading it up, the file returns a 404. Any suggestions on that.

Hmmm. Yeah I'm wondering if that might be a limitation of our asset system. I see that the backpack is currently using a URI encoded version of the backpack image, rather than loading it, which is great for SVG, but less great for audio.

I will look into it!

[BeksOmega]

Ok @Chappie74 @maribethb found the solution. You need to include the files in the files property of the package.json so that webpack can pack it =)

Here's an example: https://github.com/google/blockly-samples/tree/master/examples/custom-tooltips-demo

I hope that helps! If there's anything else you need don't hesitate to ask =)

[Chappie74]

Thanks i'll take a look at it and get to working. Cheers!

[Chappie74]

Ok @Chappie74 @maribethb found the solution. You need to include the files in the files property of the package.json so that webpack can pack it =)

Here's an example: https://github.com/google/blockly-samples/tree/master/examples/custom-tooltips-demo

I've tried this suggested way, but haven't gotten it to work. Not sure if I may be doing something wrong.
I've gone ahead and created a PR for the visuals of a filled backpack.