A "Holiday Card" target for a Microsoft MakeCode Editor
This repo contains a "Holiday card" target built with Microsoft MakeCode (PXT). The editor is hosted on the GitHub pages at https://samelhusseini.github.io/pxt-holidays/controller.html
The repo serves as a demonstration to anyone trying to integrate PXT into their own application without using the PXT frontend.
Using the "editor controller" mode of PXT, you can embed PXT inside an iframe in your application and send and receive messages query project state and control PXT using a pre-defined protocol. The protocol for communicating with PXT in that mode is defined here: https://github.com/Microsoft/pxt/blob/master/pxteditor/editorcontroller.ts
This repo also contains a separate site built with React.js that demonstrates how to communicate with PXT. The site is built under /site. You would mostly likely not use this if you're trying to integrate PXT into your application.
If you'd like to start your own editor, create a copy of this repo and fix all the TODOs.
- Setup local server (see below)
- Follow these instructions to build and test the React site.
- Update metadata in
pxtarget.json. Change the id, title, name, etc... to your taste.
sim/simulator.ts. If needed add additional JS library under
- Update the APIs in
sim/api.tsto use your runtime.
- Test your editor in the local server
pgk staticpkg --gh --bumpto upload a static version to GitHub pages.
These instructions allow to run locally to modify this target.
The following commands are a 1-time setup after synching the repo on your machine.
- install node.js
- install the PXT command line
npm install -g pxt
- install the node dependencies
Running the local server
Once you're done, simply run this command to open a local web server:
Normally, you would test your page from http://localhost:3232/index.html but since the editor is in "controller" mode, we would instead test it from a page were it's embedded in an iframe, use http://localhost:3232/controller.html instead.
Follow these instructions to build and test the React site.
After making a change in the source, refresh the page in the browser.
Updating the tools
If you would like to pick up the latest PXT build, simply run
More instructions at https://github.com/Microsoft/pxt#running-a-target-from-localhost