Explore the Sample HTML - dtex/NodebotUI GitHub Wiki

Let's look at ./node_modules/nodebotui/eg/led.html

<head>
  <title>Led Example</title>
</head>
<body> 
  <form id="sampleBoard" data-device-type="board">
    <label for="myled">Toggle LED</label>
    <input type="checkbox" id="myled" data-device-type="Led" data-pin="13" />
  </form>
  <script src="http://localhost:3000/nodebotui/nodebotui-client.js"></script>
</body>

Let's break that down. There are really three important lines that we should talk about. Read on...

####Initializing the Board

<form id="sampleBoard" data-device-type="board">

A form with a data-device-type attribute of "board" will map to a board that is plugged into the computer hosting the NodebotUI server. A unique id attribute is mandatory because this is the identifier NodebotUI will use when referring to the board.

####Initializing a Device

<input type="checkbox" id="myled" data-device-type="Led" data-pin="13" />

Within the form, inputs map to devices attached to the Arduino. These inputs are called "Browser Controls". The required attributes are id, data-device-type and data-pin. The data-device-type let's NodebotUI know what kind of device we are talking to (led, server, etc), and the latter let's us know what pin the device is attached to.

Connecting to the NodebotUI Server

<script src="http://localhost:3000/nodebotui/nodebotui-client.js"></script>

This script should be at the end of your HTML page, just inside the closing body tag. This is where we take care of all the hard stuff for you.

####Next: Explore the Sample Server

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️