How to make my own parts

Let's make your own parts library and share it.

Making on my own

obniz.js has parts library. But you might want to make your own parts library for parts which are not listed in the library or those you have created yourself.

This lesson shows you how to do that.

Let's just do it

Let's just start doing it before learning how it works.
The LED of obniz.js only has on/off/blink functions, so let's make a new LED which has "on for 1sec" function.

class MYLED {
  constructor() {
    this.keys = ['anode', 'cathode'];
    this.requiredKeys = ['anode', 'cathode'];
  }

  static info() {
    return {
      name: 'MYLED',
    };
  }

  wired(obniz) {
    this.obniz = obniz;
    this.io_anode = obniz.getIO(this.params.anode);
    this.io_anode.output(false);
    this.io_cathode = obniz.getIO(this.params.cathode);
    this.io_cathode.output(false);
  }

  onesec() {
    this.io_anode.output(true);
    obniz.wait(1000);
    this.io_anode.output(false);
  }
}

if (typeof module === 'object') {
  module.exports = MYLED;
}

This is my own LED library named "MYLED".
onesec() function will turn on anode for LED only for 1sec.
The ways to include this to your own HTML are:

  1. write directly into the script tag
  2. write and share js file and import it with the script tag

1 is very simple - just copy & paste. But today, we will do the second way, which is actually more convenient.

First, we need to share this JavaScript file. Create an account and make a new js file in your repository on developer's console .

Press "Create New" and choose type "Parts/Util js file"

The file name can be anything. Here we are naming it "myled".

Press "Create" to create a js file, copy the above code and save it.
Saving can be done by pressing "Save&Open" or "Save" under "Tool".
After saving, open your repository on developer's console again. You can see myled and an example of a script tag to incorporate it.

To use it on your HTML, you should do below.

  1. load js file with the script tag
  2. call Obniz.PartsRegistrate function to register the parts.
<html>
<head>
  <script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
  <script src="https://obniz.io/users/あなたのid/repo/myled.js"></script>
</head>
<body>

<div id="obniz-debug"></div>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {

  Obniz.PartsRegistrate(MYLED);
  var led = obniz.wired("MYLED", { anode:0, cathode:1 } );
  led.onesec();
}

</script>
</body>
</html>

Connect a LED to io0,1 and run it. The LED will be ON only for 1sec.

DONE! You successfully created your own parts!
You can create more parts and functions as you wish!

To create your own library class, the simple procedure is:

  1. Create a class like above
  2. In keys within constructor(), put in key names of the objects called by obniz.wired. In requiredKeys, put names of very important required keys.
  3. In info() insert names of parts used in obniz.wired.
  4. In wired() write initialization codes. The obniz passed from obniz.wired can be accessed from this.params.
  5. Make your functions.
  6. Share js file and incorporate it.

How it works

Let's now see the details of how it works.
Open LED and you will see both usage and the code.
Press github icon to open LED source code.

Let's take a look at the program

Looking at the whole thing is tiring so let's just extract the important aspects. As LED can be turned on by on(), we will extract those around on(). The simplified LED code is below.

class LED {
  constructor() {
    this.keys = ['anode', 'cathode'];
    this.requiredKeys = ['anode'];
  }

  static info() {
    return {
      name: 'LED',
    };
  }

  wired(obniz) {
    function getIO(io) {
      if (io && typeof io === 'object') {
        if (typeof io['output'] === 'function') {
          return io;
        }
      }
      return obniz.getIO(io);
    }

    this.obniz = obniz;
    this.io_anode = getIO(this.params.anode);
    this.io_anode.output(false);
    if (this.params.cathode) {
      this.io_cathode = getIO(this.params.cathode);
      this.io_cathode.output(false);
    }
  }

  on() {
    this.endBlink();
    this.io_anode.output(true);
  }

  off() {
    this.endBlink();
    this.io_anode.output(false);
  }
}

if (typeof module === 'object') {
  module.exports = LED;
}

YES, each part is a class.
LED is a class named "LED"
To use it from obniz, you need to register this class to obniz.
Actually, the parts that were included in obniz.js from the beginning are the parts that obniz.js loaded and registered to its own library when the program first started moving.
You can do the same thing to register your parts.

Structure and registration

The minimum structure of the parts class is as below.

class LED {
  constructor() {
    this.keys = ['anode', 'cathode'];
    this.requiredKeys = ['anode'];
  }

  static info() {
    return {
      name: 'LED',
    };
  }

  wired(obniz) {

  }
}

if (typeof module === 'object') {
  module.exports = LED;
}

The keys inside constructor() are the names of keys among the objects received from obniz.wired that are necessary. This is used when obniz.wired() is called.

this.keys = ['anode', 'cathode'];

requiredKeys are the names of keys among the objects received from obniz.wired that are absolutely necessary. Without requiredKeys, an error will automatically occur when obniz.wired is called.
So, in this case, anode is required but cathode is not.

this.requiredKeys = ['anode'];

The name in info() is used to find parts that can be used as obniz.wired('LED') .

static info() {
  return {
    name: 'LED',
  };
}

wired() is called when obniz.wired() is called.
The objects passed by obniz.wired() can be accessed from this.params.

module.exports at the end is not neccesary in HTML.
But this is convenient when you want to use this in Node.js.

if (typeof module === 'object') {
  module.exports = LED;
}

Registration and Use

The flow from registration to usage is as below.

  1. Obniz.PartsRegistrate(); Pass class to Obniz.

The name is defined at this point. It is written in json within info().

static info() {
  return {
    name: 'LED',
  };
}
  1. Use my own parts with obniz.wired().

obniz.js will do below to the parts at this point.

  1. Instantiate your class. So constructor() will be executed
  2. An object passed from obniz.wired() will be filtered with keys. And it will show an error when it is missing requiredKeys.
  3. The filtered object will be put on this.params
  4. Call wired() function on your parts.

So obniz will check parameters.

var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {

  Obniz.PartsRegistrate(MYLED);
  var led = obniz.wired("MYLED", { anode:0, cathode:1 } );
  led.onesec();
}

You can use your parts without registration, like below.

var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {

  var led = new MYLED();
  led.params = { anode:0, cathode:1 };
  led.wired(obniz);
  led.onesec();
}




You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us