[Canvas] Show tinted loading area while sprite loads

[dira]

Sprite, while loading, should have a black rectangle that has the same dimensions as the sprite it is bound to.

See https://github.com/curiousminds/interapptive-web/blob/master/app/assets/javascripts/builder/widgets/canvas_overflow_layer.js.coffee#L42 as a ref. to draw boxes

Here is the actual Cocos2d-html5 API for how to use the Rect() method that's used in above code to draw boxes: http://www.cocos2d-x.org/reference/html5-js/V2.2/index.html

UPDATED 10/4/2013 5:29 PM (PST)

[waseem]

:+1:

[whitman]

I believe the problem about sprites loading and no indicator is beyond just drag/dropping.

On staging, if there's images with large file sizes on a scene, a relatively substantial amount of time to load is required (noticeable). Moreover, the images are not shown at all until they're completely loaded, unless I am mistaken. Because of that, the users may think that images aren't there, and try to add the same image again while that first one is loading.

Would it make sense to have a loading icon / indicator over the canvas (an overlay) while there are any images loaded? If an image were dropped, we could show a green check box or something to let them know the drag/drop was successful, then switch that green check to a loading icon.

I understand there is a loading indicator in top-right already... but it seems like it would make sense to have an icon / overlay to prevent users from doing anything while a given scene loads.

Irina's proposed approach is viable as well, but it would be great if we could take care of the aforementioned scene loading issue as well, while we are at it.

@dira @waseem any thoughts / opinions on this?

[waseem]

Sounds good to me.

[dira]

I think the best would be to have, in the canvas, a 'shade' (colored rectangle) with 'Loading' in the middle whenever a sprite is loaded. It would be great for the shade to be the same dimensions as the sprite.

[whitman]

That sounds nice. I would probably create a layer (similar to canvas overflow layer), does that sound ok?

If so, I could create a branch and take care of that work now if that'd be helpful. The layer could be turned on/off via vent, of course

Let me know if I should proceed on that, please

[dira]

M... I was thinking that the view that is responsible for drawing the widget (Builder.SpriteWidget) could draw the rectangle (with the position & dimensions of the image), and then load the sprite in the same position (so, when loaded, it will cover the rectangle). What do you think? @whitman

[whitman]

Ah I misread that last comment. We can do that! Sounds good

[whitman]

But what happens if the user quickly adds 2 images to the canvas? Can these boxes be moved while the sprite loads so the user could move stacked loading boxes out of the way of one another?

[dira]

Yup, it will be possible if the SpriteWidget renders the rectangle, without chanding the code.

[whitman]

Sounds good.