microsoft / microsoft/pxt

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

Open
#9,892 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
641
Avg merge
12h 4m
Merged PRs (30d)
57

Description

I opened this issue originally in pxt-arcade repo but after analyzing the codebase it looks like the PR needs to be in this repo


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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names no files, tests, or entry points; review the linked pxt-arcade issue and confirm the team's current direction before locating the asset editor. Done would be an agreed implementation of the Import flow, including local image upload, resizing with aspect-ratio handling, palette reduction, and returning the result to the editor.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.