diff --git a/.gitignore b/.gitignore index 91839739..c84f6597 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,13 @@ +# OS files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +Icon? +ehthumbs.db +Thumbs.db +Desktop.ini +$RECYCLE.BIN/ *.swp .vagrant diff --git a/CHANGELOG b/CHANGELOG index f1177762..d3098c74 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,34 @@ +1.1.3 +----- +* Fixes issue loading hex files into the Editor (https://github.com/bbcmicrobit/PythonEditor/pull/89) +* Delegates Intel Hex manipulation to a library (https://github.com/NordicSemiconductor/nrf-intel-hex) +* Help file can read URL parameters to indicate what features to show +* When an invalid hex file is loaded it will now display an error message (before it didn't do anything) + +1.1.2 +----- + +* Updated MicroPython to 1.0.1 release +* Updated README with migration documentation + +1.1.1 +----- + +* Added migration capability + +1.1.0 +----- + +* Updated MicroPython to 1.0.0 release +* Added help overlay with version information + +1.0.0 +----- + +* Updated styling +* Moved show script to bin/show +* Flags disabled by default: blocks, experimental, and share + 0.1.0 ----- diff --git a/README.rst b/README.rst index 83df9e49..d157f2c2 100644 --- a/README.rst +++ b/README.rst @@ -22,7 +22,7 @@ submodules:: Assuming you have Python 3 installed you can serve the editor like this:: - $ ./show.sh + $ ./bin/show http://localhost:8000/editor.html Serving HTTP on 0.0.0.0 port 8000 ... @@ -136,6 +136,29 @@ relatively small when you consider: * The web has caching built in (we should trust it) * We actually want kids to view source and find the .hex file in as raw a form as possible. +Importing Projects +++++++++++++++++++ +Python projects from external sources can be imported into the editor using a special URL e.g. +``https://python.microbit.org/v/1.1#project:{{ encoded project }}`` + +To encode a project, it must be structured as follows: + +:: + + { + meta: { + cloudId: "microbit.co.uk", # optional + comment: "A MicroPython script", # required - may be blank + editor: "python", # required - editor name + lastUse: 1538407830, # optional - UNIX time the script was last used + name: "unearthly script 2" # required - may be blank + }, + source: "# Add your Python code here. E.g.\r\n from microbit import *\r\n while True:\r\n display.scroll('Hello, World!')\r\nsleep(2000)" + } + +This JSON structure is compressed using `LZMA +`_, and then encoded as Base64 to include in the import URL. + Configuration ------------- diff --git a/base64-js/base64.js b/base64-js/base64.js new file mode 100644 index 00000000..0c621d35 --- /dev/null +++ b/base64-js/base64.js @@ -0,0 +1 @@ +(function(r){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=r()}else if(typeof define==="function"&&define.amd){define([],r)}else{var e;if(typeof window!=="undefined"){e=window}else if(typeof global!=="undefined"){e=global}else if(typeof self!=="undefined"){e=self}else{e=this}e.base64js=r()}})(function(){var r,e,n;return function(){function r(e,n,t){function o(f,i){if(!n[f]){if(!e[f]){var u="function"==typeof require&&require;if(!i&&u)return u(f,!0);if(a)return a(f,!0);var v=new Error("Cannot find module '"+f+"'");throw v.code="MODULE_NOT_FOUND",v}var d=n[f]={exports:{}};e[f][0].call(d.exports,function(r){var n=e[f][1][r];return o(n||r)},d,d.exports,r,e,n,t)}return n[f].exports}for(var a="function"==typeof require&&require,f=0;f0){throw new Error("Invalid string. Length must be a multiple of 4")}var n=r.indexOf("=");if(n===-1)n=e;var t=n===e?0:4-n%4;return[n,t]}function d(r){var e=v(r);var n=e[0];var t=e[1];return(n+t)*3/4-t}function c(r,e,n){return(e+n)*3/4-n}function h(r){var e;var n=v(r);var t=n[0];var f=n[1];var i=new a(c(r,t,f));var u=0;var d=f>0?t-4:t;for(var h=0;h>16&255;i[u++]=e>>8&255;i[u++]=e&255}if(f===2){e=o[r.charCodeAt(h)]<<2|o[r.charCodeAt(h+1)]>>4;i[u++]=e&255}if(f===1){e=o[r.charCodeAt(h)]<<10|o[r.charCodeAt(h+1)]<<4|o[r.charCodeAt(h+2)]>>2;i[u++]=e>>8&255;i[u++]=e&255}return i}function s(r){return t[r>>18&63]+t[r>>12&63]+t[r>>6&63]+t[r&63]}function l(r,e,n){var t;var o=[];for(var a=e;au?u:i+f))}if(o===1){e=r[n-1];a.push(t[e>>2]+t[e<<4&63]+"==")}else if(o===2){e=(r[n-2]<<8)+r[n-1];a.push(t[e>>10]+t[e>>4&63]+t[e<<2&63]+"=")}return a.join("")}},{}]},{},[])("/")}); diff --git a/bin/show b/bin/show new file mode 100755 index 00000000..4e8d4c71 --- /dev/null +++ b/bin/show @@ -0,0 +1,8 @@ +#!/bin/bash +echo "http://localhost:8000/editor.html" + +pushd `dirname $0` > /dev/null +SCRIPTPATH=`pwd` +popd > /dev/null + +cd ${SCRIPTPATH}/../ && python3 -m http.server diff --git a/editor.html b/editor.html index c6839b1d..f51c575b 100644 --- a/editor.html +++ b/editor.html @@ -70,9 +70,18 @@ + + +
MicroPython Version:
+ + Python on the micro:bit + Python on the micro:bit @@ -60,64 +78,73 @@
- + - +

+ +
http://goo.gl/SrIrIE -

Start Here

-

So you're looking at the Python editor and wondering what to do. That's - easy! Let's learn about the different parts of the editor. First of all, - there are some buttons across the top:

- -

The Editor +

The Python editor is perfect for those who want to push their coding skills further. A selection of snippets and a range of pre-made images and music give you a helping hand with your code. The editor is powered by the global Python Community.

+ + +

The main menu of the editor contains various buttons that allow you to interact with the editor and the micro:bit device. + If you have additional features enabled in the editor, for example WebUSB you may see extra buttons availble in this menu. +

+ +

A picture of the buttons along the top of the editor.

-

Pressing the TAB key will move the focus between the buttons. Pressing - ENTER will activate the highlighted button. If you're in the text window - (see below) you'll need to press the ESCAPE key to re-focus on the buttons. - You can, of course, use your mouse.

- -

What do they do?

+

As well as using a mouse, you can use the TAB key to navigate through the options and Enter to activate them. If you're in the text window, The ESC key will re-focus on the menu. +

- + - + - + - @@ -192,70 +232,57 @@

Start Here

The name and description for your script is shown on the top right hand side. Click them to edit them.

-

The other part of the editor is the text window:

+

Text window

+

The other part of the editor is the text window, where we edit our scripts.

A picture of the text area in the code editor.

-

It's very simple to use. Just click and type.

- -

The editor tries to help you out by colouring the text to show what - all the different parts of your program are. For example, Python keywords +

The editor tries to help out by colouring the text to show what + all the different parts of program are. For example, Python keywords (words built into the Python language) are grey. The brighter coloured words are bits of the program you have created. Brown words are constant values that never change and purple words represent strings of characters to display. All the lines are numbered with the current line highlighted.

-

Do you want to see how the editor actually works? It's easy, to view - the "source code" press CTRL-U (or CMD-U on a Mac). There's a secret - message for you in the code. Can you find it?

- - http://goo.gl/ArpNbM -

Hello, World!

- -

A 'Hello, World!' program is traditionally used as a quick test to see if we've got + our software or hardware configured correctly.

+

http://goo.gl/zpfrsY

-

The version of Python that runs on the BBC micro:bit is called - MicroPython. It's exactly like real Python except it's designed - to run on small devices like the BBC micro:bit. Here's the MicroPython code - you need to make your BBC micro:bit say "Hello, World!". Copy and paste it - into the Python editor, download it and copy it onto your device (just like - Yellow and Blue suggest):

+

Here's how we do this in the Python editor:

from microbit import *
 
 
 display.scroll("Hello, World!")
-

The first line (from microbit import *) tells MicroPython +

The first line (from microbit import *) tells MicroPython to get all the bits of Python needed to program the micro:bit.

-

The second line(display.scroll("Hello, World!")) tells +

The second line (display.scroll("Hello, World!")) tells MicroPython to use one of those bits of Python (the display module) to scroll the text, "Hello, World!" across the physical - display on the front of the device. It's all remarkably obvious. If you - followed Yellow and Blue's instructions you should see something like - this:

+ display on the front of the device.

-

An animation of 'hello world' scrolling over the display.

-

Can you make it scroll any other messages? Why not try making your - BBC micro:bit scroll your name? Remember, MicroPython will scroll - everything between the "quotation marks".

- +

When you load the Python editor in your browser, this is the default script you will see, + asking the micro:bit to scroll the words across the LED screen and then display an image of a heart.

+

Why not try making the micro:bit scroll your name?

+ +

Blockly

Use blockly to make new Python code from easy to assemble blocks of code.

An animation demonstrating how to use snippets.

Blockly updates Python in the code editor as you move blocks around. @@ -276,7 +303,8 @@

Blockly

However, by using Blockly you'll very quickly get the hang of how Python code works and fits together.

- +
+

Snippets

Snippets are a cool way to avoid typing. The animation below shows you @@ -292,26 +320,26 @@

Snippets

snippet and then fill in the remaining blocks of code so it does what you want.

-

When blockly is enabled the "Snippets" button is disabled. This avoids +

When blockly is enabled the "Snippets" button is disabled. This avoids snippets from interfering with code that blockly may be generating.

+

http://goo.gl/bT8a8M

+

Bug Fixes

Things will go wrong!

-

You have to imagine Python is the most strict English teacher in the +

You have to imagine Python is the most strict language teacher in the universe... yes, even more strict than that really strict one you have at - your school. Put simply, you have to type Python without any + school. Put simply, you have to type Python without any mistakes for it to work.

All programmers make mistakes and create bugs. It's a fact of life. When you have a bug MicroPython tries to help you out: it will scroll a - message on its display. It may even include a line number. This message is - like the first clue in a treasure hunt, you have to figure out the rest - yourself.

+ message on its display. It may even include a line number.

Common bugs include Syntax Errors (which means you've typed it in wrong) and Name Errors (that mean you've typed in correct Python, but @@ -319,19 +347,28 @@

Bug Fixes

If you're unsure what to do go read the - MicroPython docs. Alternatively, just ask someone who knows what they're - doing. If no such person is available you could just follow this handy flow - chart:

- -

The XKCD tech support cheat sheet.

- -

Fun Stuff

+ MicroPython docs or open a support request with the micro:bit team. +

Further Information

http://goo.gl/q5DAAW

+

MicroPython

+

http://goo.gl/9lcLAf

+

The version of Python that runs on the BBC micro:bit is called + MicroPython. It's exactly like real Python except it's designed + to run on small devices like the BBC micro:bit. You can find out more about it + on the MicroPython site and by reading the MicroPython for micro:bit reference.

+ +

How the editor works

+

To see how the editor actually works? It's easy, to view + the "source code" press CTRL-U (or CMD-U on a Mac). There's a secret + message for you in the code. Can you find it?

+

The code for the editor lives in a repository on Github. Github + makes it easy to raise a bug report and contribute to the project. For example, here's the HTML code for this help page.

+ +

What next?

Python makes it simple to write powerful programs. Can you work out what this program does?

@@ -357,20 +394,12 @@

Fun Stuff

How could you improve it? What changes could you make?

-

http://goo.gl/9lcLAf

-

If you're looking for inspiration (robots, cool light displays and goofy - games) you should check out the - World Tour. These projects - were created by volunteers from the global Python community (of which you're - now a member!).

- Download button +
+ + + +
Click on the "Download" button to save a special "hex" file on - your computer. Plug in your BBC micro:bit (it'll show up as USB - storage) and drag the newly saved file onto the device. Your code + computer. Plug in BBC micro:bit (it'll show up as USB + storage) and drag the newly saved file onto the device. Code will run (or you'll see an error message scroll past on the - device's display). See below for how to extract your code from a + device's display). See below for how to extract code from a hex file back into the editor.
- Save button +
+ +
- Click on the "Save" button to save your code onto your computer. - Because you're downloading Python code your computer might check + Click on the "Save" button to save the code onto your computer. + Because you're downloading Python code computer might check you want to save the file. It's trying to protect you from downloading random software from the internet. But since this is - your own code you're safe to proceed. See below for how to load + own code you're safe to proceed. See below for how to load code back into the editor.
- Load button +
+ +
- It's very easy to load files from your computer into the editor: - click the load button then drag the file from your computer onto + It's very easy to load files from computer into the editor: + click the load button then drag the file from computer onto the grey "drop" area. Alternatively, you could use the file picker (just click on the link at the bottom to toggle between the two options). The editor knows how to read Python files (whose name @@ -125,24 +152,28 @@

Start Here

ends with ".hex").
- Blockly button +
+ +
- This is an experimental feature. It may change in future + This is an experimental feature. It may change in the future and could contain bugs. Clicking the "Blockly" button displays a set of drag-and-drop blocks that can be used to quickly create Python code. Move the blocks, watch Python code appear and change. Moving such - blocks will re-write your Python code and you may lose work. + blocks will re-write Python code and you may lose work. Furthermore, the arrangement of blocks is currently not saved, just the resulting Python code.
- Snippets button +
+ +
Clicking on the "Snippets" button brings up a menu of Python @@ -150,40 +181,49 @@

Start Here

re-use in your own programs. There are snippets for most common things you'll want to do with Python. Select the one you want and fill in the gaps in the code editor to make it do what you want. - Snippets are disabled when blockly is enabled. + Snippets are disabled when blockly is enabled.
- Help button +
+ +
Clicking on the "Help" button gets you here. But you knew that - already, right..? :-) Notice that your editor is still available - but in a separate tab in your browser. + already, right..? :-) Notice that editor is still available + but in a separate tab in browser.
- Share button +
+ +
Clicking on the "Share" button creates a unique link that points to - your script. Add this link to your bookmarks to retrieve your code. - If you share this link others will be able to see your code. So - your code remains private you must set a password and an optional + script. Add this link to bookmarks to retrieve code. + If you share this link others will be able to see code. So + code remains private you must set a password and an optional password hint for it. This button is not available if you're running the editor from a local file system.
- Zoom buttons + +
+ +
+
+ +
Everyone likes to show off their awesome Python skills. These buttons are especially useful to zoom-in and zoom-out when you're - trying to show your code to a large group of people via a + trying to show code to a large group of people via a projector.