Class Display

constructor

• new Display(obniz, info): Display

• Parameters

  • obniz: any

  • info: any

  Returns Display

Readonly height

Readonly width

circle

• circle(x, y, r, mustFill?): void

• Draw a circle. If you are using node.js, node-canvas is required.

  // Javascript Example
  obniz.display.circle(40, 30, 20);
  obniz.display.circle(90, 30, 20, true); // filled circle
  Copy

  Parameters

  • x: number

  • y: number

  • r: number

  • Optional mustFill: boolean

  Returns void

clear

• clear(): void

• Clear the display.

  // Javascript Example
  obniz.display.clear();
  Copy

  Returns void

draw

• draw(ctx): void

• Draw Display from HTML5 Canvas context. With node-canvas, this works with node.js.

  • on HTML, load ctx from existing

  let ctx = $("#canvas")[0].getContext('2d');
  
  ctx.fillStyle = "white";
  ctx.font = "30px Avenir";
  ctx.fillText('Avenir', 0, 40);
  
  obniz.display.draw(ctx);
  Copy

  • on HTML, create new canvas dom and load it.

  
  let ctx = obniz.util.createCanvasContext(obniz.display.width, obniz.display.height);
  
  ctx.fillStyle = "white";
  ctx.font = "30px Avenir";
  ctx.fillText('Avenir', 0, 40);
  
  obniz.display.draw(ctx);
  Copy

  • running with 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);
  Copy

  Parameters

  • ctx: CanvasRenderingContext2D

  Returns void

drawing

• drawing(autoFlush): void

• You can specify to transfer the displayed data or not. This affects only the functions that use canvas like clear/print/line/rect/circle/draw. If you are using node.js, node-canvas is required.

  Use false to stop updating display and true to restart updating.

  // Javascript Example
  obniz.display.drawing(false);
  for (var i=0;i<100; i++) {
    var x0 = Math.random() * 128;
    var y0 = Math.random() * 64;
    var x1 = Math.random() * 128;
    var y1 = Math.random() * 64;
    obniz.display.clear();
    obniz.display.line(x0, y0, x1, y1);
  }
  obniz.display.drawing(true);
  Copy

  Parameters

  • autoFlush: boolean

  Returns void

font

• font(font, size?): void

• This changes the font. The options for fontFamily and fontSize depend on your browser. If you are using node.js, node-canvas is required.

  The default font is Arial 16px. If you set the parameter to null, you will be using the default font.

  // Javascript Example
  obniz.display.font('Avenir',30)
  obniz.display.print("Avenir")
  
  obniz.display.font(null,30) //default font(Arial) 30px
  obniz.display.font('Avenir') //Avenir with default size(16px)
  Copy

  

  Parameters

  • font: null | string

    font name

  • Optional size: number

    size of font

  Returns void

getColor

• getColor(): string

• Getting color for fill/stroke style for further rendering.

  const current = obniz.display.getColor();
  Copy

  Returns string

getColorDepth

• getColorDepth(): number

• Getting color depth for all communication for the display

  const current = obniz.display.getColorDepth(); // => return current depth. 1 or higher
  Copy

  Returns number

line

• line(x_0, y_0, x_1, y_1): void

• Draw a line between two points. If you are using node.js, node-canvas is required.

  // Javascript Example
  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);
  Copy

  

  Parameters

  • x_0: number

  • y_0: number

  • x_1: number

  • y_1: number

  Returns void

pos

• pos(x, y): {
      x: number;
      y: number;
  }

• It changes the display position of a text. If you are using print() to display a text, position it to top left.

  If you are using node.js, node-canvas is required.

  // Javascript Example
  obniz.display.pos(0,30);
  obniz.display.print("YES. こんにちは");
  Copy

  

  Parameters

  • x: number

  • y: number

  Returns {
      x: number;
      y: number;
  }

  • x: number

  • y: number

print

• print(text): void

• Print text on display.

  If you are using node.js and text is included characters out of ASCII code range, node-canvas is required.

  // Javascript Example
  obniz.display.print("Hello!");
  Copy

  // Javascript Example
  obniz.display.font('Serif',18)
  obniz.display.print("Hello World🧡")
  Copy

  

  Parameters

  • text: string

    Text to display. With browser, UTF8 string is available.

  Returns void

qr

• qr(text, correction?): void

• This shows QR code with given text and correction level. The correction level can be

  • L
  • M(default)
  • Q
  • H

  H is the strongest error correction.

  // Javascript Example
  obniz.display.qr("https://obniz.io")
  Copy

  Parameters

  • text: string

  • Optional correction: "Q" | "L" | "M" | "H"

  Returns void

raw

• raw(data): void

• Draw BMP image

  obniz.display.raw([255, 255,,,,,])
  Copy

  You should care about colorDepth before sending raw datas.

  Parameters

  • data: number[]

    data array. The order is as below. {1byte} {2byte} {3byte}...{16byte} {17byte} {18byte} {19byte}... ..... .....................

  Returns void

rect

• rect(x, y, width, height, mustFill?): void

• Draw a rectangle. If you are using node.js, node-canvas is required.

  // Javascript Example
  obniz.display.rect(10, 10, 20, 20);
  obniz.display.rect(20, 20, 20, 20, true); // filled rect
  Copy

  Parameters

  • x: number

  • y: number

  • width: number

  • height: number

  • Optional mustFill: boolean

  Returns void

schemaBasePath

• schemaBasePath(): string

• Returns string

setColor

• setColor(color): void

• Setting color for fill/stroke style for further rendering. If you are using node.js, node-canvas is required.

  obniz.display.color('#FF0000');
  obniz.display.rect(0, 0, 10, 10, false)
  obniz.display.color('blue');
  obniz.display.rect(0, 10, 10, 10, false)
  Copy

  Parameters

  • color: string

    css acceptable color definition

  Returns void

setColorDepth

• setColorDepth(depth): void

• Setting color depth for all communication for the display higher number will get more beautiful colors and lowest number 1 is just monochrome. But 16 bit color mode is 16 times data bytes needed for same size rendering.

  obniz.display.setColorDepth(4); // => 4bit color mode.
  Copy

  Parameters

  • depth: number

    monochrome display always 1. For color display 1(monochrome) and 4 and 16 can be selected. default value is highest color depth for your display. If you call just

  Returns void