Giter VIP home page Giter VIP logo

espruinowebide's Introduction

Espruino Web IDE

A VT100 Serial Terminal as a Chrome Web App (with both syntax highlighted and graphical editors) - designed for writing code on microcontrollers that use the Espruino JavaScript interpreter.

ScreenShot ScreenShot

This is a Chrome Web App that uses chome.serial to access your PC's serial port. You can download it from the Chrome Web Store: https://chrome.google.com/webstore/detail/espruino-serial-terminal/bleoifhkdalbjfbobjackfdifdneehpo

It implements basic VT100 terminal features (up/down/left/right/etc) - enough for you to write code using the Espruino. You can also use the right-hand pane to write JavaScript code on the PC, and can then click the 'transfer' icon to send that code directly down the Serial Port.

Installing From Chrome Web Store

Installing from GitHub (Latest Version)

  • Install the Chrome Web Browser
  • Download the files in EspruinoWebIDE to an EspruinoWebIDE directory on your PC (either as a ZIP File, or using git)
  • Download the files in EspruinoTools into the EspruinoWebIDE/EspruinoTools on your PC (either as a ZIP File, or using git)
  • Click the menu icon in the top right
  • Click 'Settings'
  • Click 'Extensions' on the left
  • Click 'Load Unpackaged Extension'
  • Navigate to the EspruinoWebIDE Directory and click Ok
  • Job Done. It'll now appear as an app with the 'Unpacked' banner so you can tell it apart from the normal Web IDE. You can start it easily by clicking the 'Launch' link on the extensions page, or whenever you open a new tab.

Permissions

This web app requires the following permissions:

  • Serial port access : So that it can access the Espruino board via USB/Serial
  • Webcam access : So that when you click the little person icon in the top-right of the terminal window, you can overlay the terminal on a live video feed
  • Filesystem/storage access : For loading/saving your JavaScript files to your local disk

Using

  • Run the Web app
  • Click the Help (?) icon, then the Tour button to get a guided tour.

Contributing

Contributions are welcome - especially if they make the Web IDE easier to use for newcomers!

Getting Started

Espruino Web IDE expects the EspruinoTools repository to be in EspruinoWebIDE/EspruinoTools. If you're using Git, make sure you add it using the command:

git submodule add [email protected]:espruino/EspruinoTools.git

Code Style

  • Please stick to a K&R style with no tabs and 2 spaces per indent
  • Filenames should start with a lowerCase letter, and different words should be capitalised, not split with underscores

Code Outline

  • Core functionality goes in js/core, Plugins go in js/plugins. See plugins/_examplePlugin.js for an example layout
  • Plugins/core need to implement in init function, which is called when the document (and settings) have loaded.
  • Plugins can respond to specific events using Espruino.addProcessor. For instance you can use Espruino.addProcessor("transformForEspruino", function (data,callback) { .. }) and can modify code before it is sent to Espruino.
  • Icons are added using Espruino.Core.App.addIcon and are generally added from JsvaScript file that performs the operation
  • Config is stored in Espruino.Config.FOO and is changed with Espruino.Config.set("FOO", value). Espruino.Core.Config.add can be used to add an option to the Settings menu.
  • Annoyingly, right now plugins still have to be loaded via a <script> tag in main.html

espruinowebide's People

Contributors

gfwilliams avatar mattbrailsford avatar jumjum123 avatar granjow avatar sdaves avatar

Watchers

James Cloos avatar SINLINX Open Hardware avatar

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.