xdk-log-logger-onscreen

@accedo/xdk-log-logger-onscreen

@accedo/xdk-log transport - onscreen

This is the onscreen logger transport for @accedo/xdk-log.

All console logging function will be redirected to the onscreen logging area.

Usage

// xdk.config.js
import transport from '@accedo/xdk-log-logger-onscreen';

const logging = {
  transport,

  // Below are the configurations that is understood
  // by the onscreen logger.
  maxLine: 24, // Numbers of line of log to be printed onscreen.
  trigger: 'KEY_1', // XDK Key ID to monitor for that toggle the show/hide of the log area.
  style: {
    area: DEFAULT_AREA_STYLE, // Style that will be applied to the log area.
    line: DEFAULT_LINE_STYLE // Style that will be applied to each log line.
  }
};

const CONFIG = {
  devices,
  logging
};

export default CONFIG;

Styling of Log Area and Log line

Any style applied by the xdk.config.js will always merge with default style defined below before applying to the DOM element.

Style is applied using the expression HTMLElement.style[key] = value.

Default Style of the Log Area

const DEFAULT_AREA_STYLE = {
  backgroundColor: '#111',
  color: '#eee',
  fontFamily: 'monospace',
  fontSize: '1rem',
  height: '50vh',
  opacity: 0.5,
  overflow: 'auto',
  position: 'absolute',
  right: 0,
  top: '50vh',
  width: '66.7vw',
  zIndex: 100
};

Default Style of the Log line

const DEFAULT_LINE_STYLE = { marginLeft: '2ch' };