Control websockets with static web pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
apps
doc
.gitignore
_config.yml
readme.md
readme_fr.md

readme.md

Français

LibreInterface banner
Arduino Applications / Code Editor / Download

What is LibreInterface ?

LibreInterface is a web application to build a static webpage. You can use it to create a local web page or remote/dashboard for arduino (using the examples provided) and share it as a json file.

LibreInterface is bundled with a lot of useful libraries, so it can work even without an internet connection

  • Semantic UI / Jquery (for the design)
  • WebMidi (control midi using a webpage)
  • Highlight/Code Mirror (display code)
  • Markdown-browser (Display markdown as a webpage)
  • Highcharts (Create charts)
  • Reconnecting Websocket (auto reconnect websocket)

Applications

Example applications for libreConnect

There are examples of remotes, applications for my arduino devices Screenshot of libreinterface

Code your webpage in a text editor

  • Copy blank.html into a new file blank.html --> homepage.html
  • Add your code inside body

You can learn how to create elements at semantic-ui.com

Code your webpage inside your web browser.

You can also use the online editor All changes are saved inside your browser using localStorage and can be exported as a json file.

  • Go to madnerd.org/interface/editor.html
  • Click on the green icon to edit the code of the page using codemirror: Top Menu
  • The code will be injected inside this div, when you saved it.
<div id="application" class="custom-code"></div> ```
![Code Editor](doc/codeeditor.png)

Code is saved inside localStorage in your browser, you can create as many pages as you like. 

You can also share your code using upload/download, this will download/upload your localStorage (for the current domain) as a json file. 
![Bottom Menu](doc/bottommenu.png)

The editor works on smartphones/tablet using Firefox/Chrome, I recommended using a bluetooth keyboard or a least this key layout [Hacker's keyboard](https://play.google.com/store/apps/details?id=org.pocketworkstation.pckeyboard) 

> You can use the variable isComputer to change how the application behave on a phone or a computer. 

# Licenses
* Markdown-js : MIT (https://github.com/evilstreak/markdown-js)
* Code Mirror: MIT (https://codemirror.net/) 
* Semantic UI: MIT (https://semantic-ui.com/) 
* Highlight-JS: BSD 3 (https://highlightjs.org/) 
* Semantic-UI-Range: MIT (https://github.com/tyleryasaka/semantic-ui-range)
* Jquery: Apache v2 (http://jquery.com/)