Pre PR discussion - adding image import support to the asset editor

[talkol]

I want to work on a PR for this feature. Before I start working on it, I want to verify with the team that the feature is welcome.

Is your feature request related to a problem? Please describe. Importing an external image file to the editor is currently cumbersome. The best current alternative is https://github.com/riknoll/pxt-arcade-asset-tool which is great but a bit complicated for children to use.

Describe the solution you'd like I want the image editor in Make Code arcade to have easy support for importing images from local files.

Describe alternatives you've considered The alternative I considered appears in https://arcade.makecode.com/developer/images under the section "Importing custom art and palettes". As a tech savvy person I could make it work, but children I helped struggled with this method.

Additional context The feature I want to add will be under the image editor (Create New Asset - Image). The current pixel image editor has two top tabs - "Editor" and "Gallery". I want to add a third option named "Import". If someone clicks on "Import", they would see a dialog that allows them to upload/drag a local image file (JPG, PNG, etc). They would be able to select a new image size post import - since most external images are too big for Make Code's resolution. The aspect ratio would be taken from the uploaded image and maintained, so if the user changes with to "160px" (Make Code screen width), the height would be adjusted automatically.

Once the user confirms the import, the image would be resized and the number of colors reduced to match the default Make Code palette. The user would be returned to the "Editor" tab, with the resized image pixels visible on screen. The flow is very similar to choosing an image from the "Gallery" tab.

@riknoll - as a member of the team and the creator of pxt-arcade-asset-tool, I will appreciate your feedback before I start working on this feature.

[abchatra]

@riknoll ?

[riknoll]

This is a feature that we have intentionally avoided for a few reasons:

1. Most images look bad when converted into our color palette
2. Inappropriate content
3. We want to encourage kids to draw their own art

That being said, this is an oft-requested feature, so perhaps its time to revisit that. I will bring this up with the team.

If we were to go ahead with a design, I would favor doing something outside the image editor itself; maybe something more akin to the "Colors" button for changing the color palette which appears in the left hand side of the assets editor.

[abchatra]

We can also start this as an experiment.

[talkol]

1. Most images look bad when converted into our color palette

As preparation for this PR, I've done some work with dithering algorithms (all MIT) and reached some very nice results.

I've taken multiple high res images and let the algorithm resize them to 160x120 (Arcade screen res) and reduce the colors to Arcade's default 16-color palette. I think the results below are excellent:

You can try it out with your own images: https://github.com/talkol/pxt-image-import

[talkol]

If we were to go ahead with a design, I would favor doing something outside the image editor itself; maybe something more akin to the "Colors" button for changing the color palette which appears in the left hand side of the assets editor.

I have a PR under way and made some progress with the UI. After trying multiple alternatives, the one that felt most natural was to add under the "Gallery" top tab that has the "Filter" button on the right, another button on the right (left to "Filter") named "Import". When you press "Import", just like the Filter panel pops in, you get an Import panel which lets you choose the image, its new pixel size, the resize method (bilinear, bicubic, etc) and the color reduction method (nearest, dither, etc). Once you confirm, the flow unites with the same flow as selecting an image in the gallery - move to the "Editor" top tab with the new image pixels inside the editor

[juliekol]

Some screenshots of the current UI in the PR, as explained in the comment above:

"Gallery" tab with new "Import" button on right:

The panel shown after new "Import" button is clicked:

The idea is that the user intent in the "Editor" tab is to edit pixels. The user intent in the "Gallery" tab is to select a pre made image. If no suitable image is found in the built-in art gallery, we are now ready to allow the user to still find resolution by clicking the "Import" button and using a file on their computer.