Skip to content

A-S-T-U-C-E/STudio4Education

Repository files navigation

Studio4Education

logo

Designed for Arrowhead Tools Project (https://www.arrowhead.eu/arrowheadtools), Studio4Education is a web-based visual programming editor for ST microelectronics boards, thanks to Blockly, the web-based, graphical programming editor.

Studio4Education provides static type language blocks and code generators for simple C programming.

Features

  • Programming with visually drag and drop code blocks
  • Generate fully compatible code
  • Multiple boards choice for automatic selection of pin functions
  • Load different on-site examples with url parameters
  • Keyboard navigation and accessibility helpers
  • Theme choice
  • Block render choice
  • Multi language
  • Keyboard navigation
  • etc

Accessibility

You can enter accessibility mode by hitting Shift + Ctrl + k.

Official documentation: https://developers.google.com/blockly/guides/configure/web/keyboard-nav

Key mapping is customizable by activating 'open key mappings' option.

Some basic commands for moving around are below.

Workspace Navigation

  • W: Previous block/field/input at the same level.
  • A: Up one level (Field (or input) -> Block -> Input (or field) -> Block -> Stack -> Workspace).
  • S: Next block/field/input at the same level.
  • D: Down one level (Workspace -> Stack -> Block -> Input (or field) -> Block -> Field (or input)).
  • T: Will open the toolbox. Once in there you can moving around using the WASD keys. And insert a block by hitting Enter.
  • X: While on a connection hit X to disconnect the block after the cursor.

Cursor

The cursor controls how the user navigates the blocks, inputs, fields and connections on a workspace. Two different cursors:

  • Default Cursor: Allow the user to go to the previous, next, in or out location.
  • Basic Cursor: Using the pre order traversal allows the user to go to the next and previous location.

Demo

Studio4Education is a web tool. You can give it a try at Web version.

Run locally on your web browser

If you want to install it locally. Get code from github and open index.html in your browser.

Integrated upload

An Electron version with arduino-cli embbeded for an off-line version is also available: https://github.com/A-S-T-U-C-E/S4E_Electron

Usage

  1. Open browser to Studio4Education folder and select your board, your language, your favorite theme + renderer.
  2. Drag and drop blocks to make a program.
  3. Copy all of the source code into an existing or new project in the Arduino IDE with STM32Duino installed
  4. Configure your Arduino IDE with the right board and communication port.
  5. Press the 'Upload' button in the Arduino IDE to burn the code into a connected board.

ChangeLog

Check changelog here

Tools used

addons

CircuitJS

Monaco editor

libraries

Code-prettify

Draggable + Resizable Dialog

iro.js

jsdiff

fonts

Font Accessible Dfa

Font Awesome

Font Bitter

Font Luciole

Font OpenDyslexic

Authors and Contributors

Sébastien Canet (scanet@libreduc.cc).

The Studio4Education project is also inspired by Blockly@rduino, ardublockly (great thanks to Carlos Pereira Atencio @carlosperate for this great automatic typing variable script) and Blocklino.

License

Copyright (C) 2020 Sébastien Canet scanet@libreduc.cc

Blockly Build Status

Google's Blockly is a web-based, visual programming editor. Users can drag blocks together to build programs. All code is free and open source.

The project page is https://developers.google.com/blockly/

Blockly has an active developer forum. Please drop by and say hello. Show us your prototypes early; collectively we have a lot of experience and can offer hints which will save you time.

Help us focus our development efforts by telling us what you are doing with Blockly. The questionnaire only takes a few minutes and will help us better support the Blockly community.

Want to contribute? Great! First, read our guidelines for contributors.