bpi-bit離線版製作記錄

參考網址:https://github.com/junhuanchen/scratch3-eim-mpfshell

建立scratch3目錄,並進入目錄中
mkdir scratch3
cd scratch3
sudo npm  add uglifyjs-webpack-plugin

sudo npm install -g webpack
sudo npm install -g webpack-dev-server

下載github中的scratch-gui
git clone https://github.com/LLK/scratch-gui
cd scratch-gui
npm install
使用瀏覽器輸入http://0.0.0.0:8601/可以看到scratch3官方編輯器了

bpi-bit擴充積木,需要兩個github專案,如下:
https://github.com/junhuanchen/scratch3-eim-mpfshell
https://github.com/CodeLabClub/scratch3_eim

回到scratch3目錄下
cd scratch3
git clone https://github.com/junhuanchen/scratch3-eim-mpfshell.git
git clone https://github.com/CodeLabClub/scratch3_eim.git
把複製專案vm到目錄中
cp -r scratch3_eim scratch-gui/node_modules/scratch-vm/src/extensions/
cp -r scratch3-eim-mpfshell/scratch3_mpfshell scratch-gui/node_modules/scratch-vm/src/extensions/
 cp -r scratch3-eim-mpfshell/scratch3_bpibit scratch-gui/node_modules/scratch-vm/src/extensions/
編輯index.jsx
vim scratch-gui/src/lib/libraries/extensions/index.jsx
在import 下一行,加入下列內容
//bpibit
import mpfshellImage from './mpfshell/mpfshell.png';
import WebduinoImage from './bpibit/webduino.png';

在export default [中最後面加入(注意有個",")
    ,
    {
        name: 'Mpfshell',
        extensionId: 'mpfshell',
        collaborator: 'JunhuanChen',
        iconURL: mpfshellImage,
        description: (
            <FormattedMessage
                defaultMessage="Mpfshell for Scratch3"
                description="Use mpfshell control micropython."
                id="gui.extension.Mpfshell.description"
            />
        ),
        featured: true
    },
    {
        name: 'bpi:bit',
        extensionId: 'bpibit',
        collaborator: 'Bananapi',
        iconURL: WebduinoImage,
        description: (
            <FormattedMessage
                defaultMessage="bpi:bit for scratch3"
                description="bpibit"
                id="gui.extension.bpibit.description"
            />
        ),
        featured: true
    }

編輯extension-manager.js
vim scratch-gui-ok/node_modules/scratch-vm/src/extension-support/extension-manager.js
註解掉 //gdxfor: () => require('../extensions/scratch3_gdx_for'),

加入下列內容
,
//mpfshell: Scratch3MpfshellBlocks,
    eim: () => require('../extensions/scratch3_eim'),
    mpfshell: () => require('../extensions/scratch3_mpfshell'),
    bpibit: () => require('../extensions/scratch3_bpibit'),

把圖檔拷貝進入目錄(好像少了mpfshell.png,自己找一張吧)
mkdir scratch-gui/src/lib/libraries/extensions/bpibit
mkdir scratch-gui/src/lib/libraries/extensions/mpfshell
 cp scratch3-eim-mpfshell/webduino.png scratch-gui/src/lib/libraries/extensions/bpibit/
cp scratch3-eim-mpfshell/mpfshell.png scratch-gui/src/lib/libraries/extensions/mpfshell/
重新執行npm start
 就可以看到bpi-bit的擴充積木了,

至於連線程式請參考https://adapter.codelab.club/user_guide/install/
 說明,燒入韌體和執行連線程式.

中文化

vim scratch-gui/node_modules/scratch-l10n/locales/editor-msgs.js
 加入下列內容
 "bpibit.isconnected": "是否連線",
    "bpibit.connect": "連線",
    "bpibit.close": "關閉",

vim scratch-gui/node_modules/scratch-vm/src/extensions/scratch3_bpibit/index.js


在bpibit部分中在
blocks: [
                {
                    opcode: 'isconnected',
                    blockType: BlockType.REPORTER,
下加入下列內容
text: formatMessage({
                        id: 'bpibit.isconnected',
                    }),

 

再到網頁中就可以看到中文化完整的內容