Giter VIP home page Giter VIP logo

blocklyduino / blocklyduino-v2 Goto Github PK

View Code? Open in Web Editor NEW
80.0 10.0 43.0 35.44 MB

BlocklyDuino v2(020), reboot and up to date with Google Blockly, graphical programming of Arduino boards

Home Page: https://blocklyduino.github.io/BlocklyDuino-v2/

License: GNU General Public License v3.0

JavaScript 67.39% HTML 17.46% CSS 2.76% Tcl 1.00% Makefile 0.36% Shell 1.53% M4 9.49%
arduino blockly arduino-programming blocklyduino education

blocklyduino-v2's Introduction

enter image description here Welcome to BlocklyDuino2

BlocklyDuino is a web-based program for editing and visual block programming editor for Arduino electronic boards.

BlocklyDuino is based on Blockly, the web-based graphical programming editor.

This new v2 version is also based on the work done on STudio4Education, a similar project for STmicroelectronics boards, and inspired by all fork of BlocklyDuino's original Gasolin's work.

It provides static type language blocks and code generators for simple Arduino programming.

BlocklyDuino also supports some Grove blocks to easily get started with microcontroller-based experimentation and learning.

BlocklyDuino's Demo

BlocklyDuino2 is a simple webware, you can give it a try here.

You can download it here and launch index.html.

Features

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

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.

Run locally on your web browser

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

The prefered way is to put the BlocklyDuino/web folder into a web server and open the url like localhost/index.html for use.

Usage

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

Integrated Arduino upload

You can try an Electron version with arduino-cli embbeded for an off-line version: https://github.com/BlocklyDuino/BlocklyDuino2Electron

ChangeLog

Check changelog here

Tools used

Ace editor

Authors and Contributors

Sébastien CANET ([email protected]) for this reboot and Electron version.

Fred Lin (@gasolin) for original BlocklyDuino.

Thanks Neil Fraser, Q.Neutron from Blockly https://developers.google.com/blockly/

Thanks Arduino and Seeeduino guys for Arduino and Grove blocks.

The BlocklyDuino project is also inspired by ardublock and modkit

This BlocklyDuino2 project is also inspired by Blockly@rduino, ardublockly, Blocklino and STudio4Education.

License

Copyright (C) 2020 Sébastien CANET [email protected] & Fred Lin [email protected]

  • Licensed under the GNU General Public License v3.0 (the "License").
  • You may not use this project or any file except in compliance with the License.
  • You may obtain a copy of the License at https://www.gnu.org/licenses/#GPL.

Code from Blockly is licensed under the Apache 2.0 license. Code from STudio4Education is licensed under the BSD 3-Clause license.

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.

Links and thanks

Tools without which nothing would have been possible (and millions of thanks to their creators!) :

blocklyduino-v2's People

Contributors

aramnasser avatar cparrapa avatar ktg441 avatar robertpheller avatar sam-tj avatar sebcanet avatar tn0503 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blocklyduino-v2's Issues

UI choices - accessibility

As seen in TurtleStudio (https://sam-tj.github.io/Turtle-Studio-v1/), UI interface could be dispatched in different places. The aim is make it simpliest as possible, for kids and newbies.
I don't want to remove any option (or it's another discussion, to decide what is useful or not for accesibility, and kids with colorblindings problem, etc) but decide what we can put where.

I'm working on new UI where all option are in a single panel but with accordion menus:
Image 1

Any suggestion?

Files organization - blocks creation

Discussion about the way blocks are defined in many files.
Actually (servomotor example):

  • blocklyduino\blocks\servo\servo.js: blocks design, 1 file per several blocks but 1 file and folder per type/category. in the folder, all needed design/picture.
  • arduino\addon\servo.js: generators for Arduino, with same name as block design
  • msg\blocks_en.js: english blocks translation, all blocks are translated in 1 file, 1 file per language

What could be easier to create blocks:

  • blocklyduino\blocks\servo\servo.blockly: blocks design, 1 file per several blocks but 1 file and folder per type/category. in the folder, all needed design/picture.
  • blocklyduino\blocks\servo\servo.arduino: generator for Arduino, with same name as block design
  • blocklyduino\blocks\servo\servo.en: english blocks translation, 1 file per language (servo.fr, servo.es, etc)

But to avoid implementinig all this boring list of js files, I think use something like head.js (https://github.com/headjs/headjs) and create 'master' file to call all design, all generators, etc.

Any idea?

Why html & css isn't used/coded properly

I thought contributing on this but I could not even change height/margin/padding of title name. Looks like CSS is forced coded and HTML also.
Can I change it the way its written and also keeping UI good.

Problem with passing parameters to url

Hi, there is some problem with url, check images for reference .
Before board selection:
image

After board selection,
image

This is causing the rest of images used inside blocks to break.

Gui in BDuino

hallow , i test in BDuino at now and because problem in gui , i recommend easy interface in page such as arduino code not easy for use, @SebCanet i think BlocklyDuino better graphics interface as this webserver for beginner

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.