Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Display<EventTypes>

Here we will show letters and pictures on display on obniz Board.

Type parameters

  • EventTypes: string

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

  • new Display(obniz: any, info: any): Display

Properties

Obniz

Obniz: Obniz

obniz to be used

height

height: number

display height size

readonly

timeout

timeout: number = 30 * 1000

Rsponse waiting timeout in milliseconds

width

width: number

display width size

readonly

Static prefixed

prefixed: string | boolean

Methods

addListener

  • addListener(event: EventTypes, fn: ListenerFn, context?: any): this

circle

  • circle(x: number, y: number, r: number, mustFill?: undefined | false | true): 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

    Parameters

    • x: number
    • y: number
    • r: number
    • Optional mustFill: undefined | false | true

    Returns void

clear

  • clear(): void

  • Clear the display.

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

    Returns void

draw

  • draw(ctx: CanvasRenderingContext2D): 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);
    • 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);
    • 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);

    Parameters

    • ctx: CanvasRenderingContext2D

    Returns void

drawing

  • drawing(autoFlush: boolean): 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);

    Parameters

    • autoFlush: boolean

    Returns void

emit

  • emit(event: EventTypes, ...args: Array<any>): boolean

  • Calls each of the listeners registered for a given event.

    Parameters

    • event: EventTypes
    • Rest ...args: Array<any>

    Returns boolean

eventNames

  • eventNames(): Array<EventTypes>

  • Return an array listing the events for which the emitter has registered listeners.

    Returns Array<EventTypes>

fastValidate

  • fastValidate(commandUri: any, json: any): boolean

  • Parameters

    • commandUri: any
    • json: any

    Returns boolean

font

  • font(font: string | null, size?: undefined | number): 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)

    Parameters

    • font: string | null

      font name

    • Optional size: undefined | number

      size of font

    Returns void

getColor

  • getColor(): string

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

    const current = obniz.display.getColor();

    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

    Returns number

line

  • line(x_0: number, y_0: number, x_1: number, y_1: number): 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);

    Parameters

    • x_0: number
    • y_0: number
    • x_1: number
    • y_1: number

    Returns void

listenerCount

  • listenerCount(event: EventTypes): number

  • Return the number of listeners listening to a given event.

    Parameters

    • event: EventTypes

    Returns number

listeners

  • Return the listeners registered for a given event.

    Parameters

    • event: EventTypes

    Returns Array<ListenerFn>

notifyFromObniz

  • notifyFromObniz(json: any): void

off

  • off(event: EventTypes, fn?: EventEmitter.ListenerFn, context?: any, once?: undefined | false | true): this

  • Parameters

    • event: EventTypes
    • Optional fn: EventEmitter.ListenerFn
    • Optional context: any
    • Optional once: undefined | false | true

    Returns this

on

  • on(event: EventTypes, fn: ListenerFn, context?: any): this

  • Add a listener for a given event.

    Parameters

    • event: EventTypes
    • fn: ListenerFn
    • Optional context: any

    Returns this

once

  • once(event: EventTypes, fn: ListenerFn, context?: any): this

  • Add a one-time listener for a given event.

    Parameters

    • event: EventTypes
    • fn: ListenerFn
    • Optional context: any

    Returns this

pos

  • pos(x: number, y: number): { 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. こんにちは");

    Parameters

    • x: number
    • y: number

    Returns { x: number; y: number }

    • x: number
    • y: number

print

  • print(text: string): 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!");
    // Javascript Example
obniz.display.font('Serif',18)
obniz.display.print("Hello World🧡")

    Parameters

    • text: string

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

    Returns void

qr

  • qr(text: string, correction?: "L" | "M" | "Q" | "H"): 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")

    Parameters

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

    Returns void

raw

  • raw(data: number[]): void

  • Draw BMP image

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

    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: number, y: number, width: number, height: number, mustFill?: undefined | false | true): 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

    Parameters

    • x: number
    • y: number
    • width: number
    • height: number
    • Optional mustFill: undefined | false | true

    Returns void

removeAllListeners

removeListener

  • removeListener(event: EventTypes, fn?: EventEmitter.ListenerFn, context?: any, once?: undefined | false | true): this

  • Remove the listeners of a given event.

    Parameters

    • event: EventTypes
    • Optional fn: EventEmitter.ListenerFn
    • Optional context: any
    • Optional once: undefined | false | true

    Returns this

schemaBasePath

  • schemaBasePath(): string

setColor

  • setColor(color: string): 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)

    Parameters

    • color: string

      css acceptable color definition

    Returns void

setColorDepth

  • setColorDepth(depth: number): 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.

    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

validate

  • validate(commandUri: any, json: any): WSSchema.MultiResult

  • Parameters

    • commandUri: any
    • json: any

    Returns WSSchema.MultiResult

Generated using TypeDoc