Display

Display available device like obniz Board series, You can draw on a display.

Class Reference

Draw Method

obniz device can accept binary array which represents each pixel color. display.raw() sends the array. binary array should start from left-top. For monochrome display, each bit for each pixel. For color display, It depends on color depth.

You can use Canvas for high-level rendering. obniz.js has helper function to read canvas display.draw(). For Nodejs, node-canvas is available.


let ctx = $("#canvas")[0].getContext('2d');

// When Node.js
//    npm install canvas. ( version 2.0.0 or later required )
//const { createCanvas } = require('canvas');
//const canvas = createCanvas(128, 64); 
//const ctx = canvas.getContext('2d');

ctx.fillStyle = "white";
ctx.font = "30px Avenir";
ctx.fillText('Avenir', 0, 40);

obniz.display.draw(ctx);

So UTF8 characters and 3D graphics can be drawn.

Simple Drawing

obniz.js has support rendering functions. You don’t need to care canvas. For Example, display.print() draw text immediately. obniz.js create canvas internally when is using in browser.

obniz.display.print("Hello World🧡");

There are other rendering functions.

obniz.display.line(30, 30, 100, 30);
obniz.display.rect(20, 20, 20, 20);
obniz.display.circle(100, 30, 20);

obniz.display.line(60, 50, 100, 30);
obniz.display.rect(50, 40, 20, 20, true);
obniz.display.line(50, 10, 100, 30);
obniz.display.circle(50, 10, 10, true);

// Changing color will affect only color display models.
obniz.display.setColor('#FF0000');
obniz.display.rect(0, 0, 10, 10, false)
obniz.display.setColor('blue');
obniz.display.rect(0, 10, 10, 10, false)

Color Depth

Color drawing is available on devices like M5StickC.

obniz.display.font('Avenir',70)
obniz.display.print("🧡😁");

By default, it draws most colorful mode. But it takes time to transfer datas. When you need more faster way, use display.setColorDepth() to reduce bit depth.

  • 1: 1bit depth. monochrome mode. With obniz Board, this is only option.
  • 4: 4bit for 16 colors.
  • 16: 16bit for RGB565 colors.

1bit is 16 times faster compared from 16bit. Changing color is performed in obniz.display.draw() automatically. You don’t need to care your canvas datas.

obniz.display.setColorDepth(4);
obniz.display.font('Avenir',70)
obniz.display.print("🧡😁");
4 bit: 16 color mode

Buffering

Rendering functions draw canvas immediately and transfer datas on each. You may want to just render and transfer once.display.drawing() will change drawing mode. for false, It just render on canvas. No transfer. Call drawing(true) to transfer current canvas once.

obniz.display.drawing(false);
obniz.display.print("Hello");
obniz.display.print("World");
obniz.display.drawing(true);