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

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
  • Parameters

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

    Returns this

circle

  • circle(x: number, y: number, r: number, mustFill?: undefined | false | true): void
  • (It does not work with node.js. Please use display.draw())

    This draws a circle.

    // 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.

    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>

font

  • font(font: string | null, size?: undefined | number): void
  • (It does not work with node.js. Please use display.draw())

    This changes the font. The options for fontFamily and fontSize depend on your browser.

    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
  • (It does not work with node.js. Please use display.draw())

    Now we draw a line between two points.

    // 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

  • listeners(event: EventTypes): Array<ListenerFn>
  • 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 }
  • (This does not work with node.js. Please use display.draw()) It changes the display position of a text. If you are using print() to display a text, position it to top left.

    // 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.

    // 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. (It does not work with node.js. Please use display.draw())

    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
  • (It does not work with node.js. Please use display.draw())

    This draws a rectangle.

    // 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

  • Remove all listeners, or those of the specified event.

    Parameters

    Returns this

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.

    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

    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