SigWebDevice TypeScript Implementation

SigWebDevice.ts

// SigWebTablet TypeScript SDK
// Based on SigWeb v1.0.4.0 by Topaz Systems Inc.

const getBlobURL =
  (window.URL && URL.createObjectURL.bind(URL)) ||
  ((window as any).webkitURL && (window as any).webkitURL.createObjectURL.bind((window as any).webkitURL)) ||
  (window as any).createObjectURL

const revokeBlobURL =
  (window.URL && URL.revokeObjectURL.bind(URL)) ||
  ((window as any).webkitURL && (window as any).webkitURL.revokeObjectURL.bind((window as any).webkitURL)) ||
  (window as any).revokeObjectURL

// --- Internal state ---

let displayCtx: CanvasRenderingContext2D | null = null
let evStatus = 0
let numPointsLastTime = 0
let sigWebFontThreshold = 155

export let onSigPenDown: (() => void) | null = null
export let onSigPenUp: (() => void) | null = null

// --- Helpers ---

function generateUUID(): string {
  let d = Date.now()
  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
    d += performance.now()
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (d + Math.random() * 16) % 16 | 0
    d = Math.floor(d / 16)
    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
  })
}

function makeUri(): string {
  let prot = location.protocol
  if (prot === 'file:') prot = 'http:'
  const port = prot === 'https:' ? 47290 : 47289
  return `${prot}//tablet.sigwebtablet.com:${port}/SigWeb/`
}

const baseUri = makeUri()

function createXHR(): XMLHttpRequest {
  return new XMLHttpRequest()
}

// --- Core HTTP operations ---

function getProperty(prop: string): string {
  const xhr = createXHR()
  xhr.open('GET', `${baseUri}${prop}?noCache=${generateUUID()}`, false)
  xhr.send(null)
  if (xhr.readyState === 4 && xhr.status === 200) return xhr.responseText
  return ''
}

function setProperty(prop: string): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}${prop}`, true)
  xhr.send(null)
  if (xhr.readyState === 4 && xhr.status === 200) return xhr.responseText
  return ''
}

function setPropertySync(prop: string): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}${prop}`, false)
  xhr.send()
  if (xhr.readyState === 4 && xhr.status === 200) return xhr.responseText
  return ''
}

function setStreamProperty(prop: string, stream: string): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}${prop}`)
  xhr.setRequestHeader('Content-Type', 'text/plain')
  xhr.send(stream)
  return ''
}

function syncSetStreamProperty(prop: string, stream: string): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}${prop}`, false)
  xhr.setRequestHeader('Content-Type', 'text/plain')
  xhr.send(stream)
  if (xhr.readyState === 4 && xhr.status === 200) return xhr.responseText
  return ''
}

function setImageStreamProperty(prop: string, stream: string): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}${prop}`, false)
  xhr.setRequestHeader('Content-Type', 'image/png')
  xhr.send(stream)
  if (xhr.readyState === 4 && xhr.status === 200) return xhr.responseText
  return ''
}

function setImageBlobProperty(prop: string, stream: string): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}${prop}`, false)
  xhr.setRequestHeader('Content-Type', 'blob')
  xhr.send(stream)
  if (xhr.readyState === 4 && xhr.status === 200) return xhr.responseText
  return ''
}

// --- Generic getter/setter factories ---

function getter(prop: string): () => string {
  return () => getProperty(prop)
}

function setter(prop: string): (v: string | number) => void {
  return (v) => setPropertySync(`${prop}/${v}`)
}

function streamGetter(prop: string): () => string {
  return () => {
    const str = getProperty(prop)
    return str.slice(1, str.length - 1)
  }
}

function streamSetter(prop: string): (v: string) => void {
  return (v) => setStreamProperty(prop, v)
}

// --- Installation check ---

export function IsSigWebInstalled(): boolean {
  const xhr = new XMLHttpRequest()
  try {
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 0) {
        console.log('Unknown Error Occurred. SigWeb Service response not received.')
      }
    }
    xhr.open('GET', `${baseUri}TabletState?noCache=${generateUUID()}`, false)
    xhr.send()
  } catch (e) {
    console.log('catch', e)
  }
  return xhr.status !== 404 && xhr.status !== 0
}

export function GetSigWebVersion(): string {
  const xhr = createXHR()
  xhr.open('GET', `${baseUri}SigWebVersion?noCache=${generateUUID()}`, false)
  xhr.send(null)
  if (xhr.readyState === 4 && xhr.status === 200) {
    return xhr.responseText.slice(1, xhr.responseText.length - 1)
  }
  return '1.5'
}

export function GetVersionString(): string {
  const str = getProperty('Version')
  return str.slice(1, str.length - 2)
}

// --- Signature image ---

export function GetSigImageB64(callback: (b64: string) => void): void {
  const cvs = document.createElement('canvas')
  cvs.width = Number(GetImageXSize())
  cvs.height = Number(GetImageYSize())

  const xhr2 = new XMLHttpRequest()
  xhr2.open('GET', `${baseUri}SigImage/1?noCache=${generateUUID()}`, true)
  xhr2.responseType = 'blob'
  xhr2.send(null)
  xhr2.onload = () => {
    const cntx = cvs.getContext('2d')!
    const img = new Image()
    img.src = getBlobURL(xhr2.response)
    img.onload = () => {
      cntx.drawImage(img, 0, 0)
      const b64String = cvs.toDataURL('image/png')
      const loc = b64String.search('base64,')
      callback(b64String.slice(loc + 7))
    }
  }
}

export function GetSigImage(ctx: CanvasRenderingContext2D): void {
  const xhr2 = new XMLHttpRequest()
  xhr2.open('GET', `${baseUri}SigImage/1?noCache=${generateUUID()}`, true)
  xhr2.responseType = 'blob'
  xhr2.send(null)
  xhr2.onload = () => {
    const img = new Image()
    img.src = getBlobURL(xhr2.response)
    img.onload = function (this: HTMLImageElement) {
      ctx.drawImage(img, 0, 0)
      revokeBlobURL(this.src)
    }
  }
}

// --- Pen events & display ---

export function SigWebSetDisplayTarget(obj: CanvasRenderingContext2D | null): void {
  displayCtx = obj
}

export function SigWebWaitForPenDown(callback: () => void): void {
  const xhr = createXHR()
  xhr.open('GET', `${baseUri}WaitForPenDown?noCache=${generateUUID()}`)
  xhr.timeout = 10000
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) callback()
  }
  xhr.send(null)
}

export function SigWebRefresh(): void {
  const numPoints = Number(NumberOfTabletPoints())
  if (numPoints === numPointsLastTime) return
  numPointsLastTime = numPoints

  const xhr2 = new XMLHttpRequest()
  xhr2.open('GET', `${baseUri}SigImage/0?noCache=${generateUUID()}`, true)
  xhr2.responseType = 'blob'
  xhr2.onload = () => {
    const img = new Image()
    img.src = getBlobURL(xhr2.response)
    img.onload = function (this: HTMLImageElement) {
      displayCtx?.drawImage(img, 0, 0)
      revokeBlobURL(this.src)
    }
  }
  xhr2.send(null)
}

export function SigWebEvent(): void {
  const oldEvStatus = evStatus
  const xhr = createXHR()
  xhr.open('GET', `${baseUri}EventStatus?noCache=${generateUUID()}`, true)
  xhr.onload = () => {
    evStatus = Number(xhr.responseText)
    if ((oldEvStatus & 0x01) && (evStatus & 0x02) && onSigPenDown) onSigPenDown()
    if ((oldEvStatus & 0x02) && (evStatus & 0x01) && onSigPenUp) onSigPenUp()
  }
  xhr.send(null)
}

export function IsPenDown(): number {
  return evStatus & 0x01
}

// --- LCD bitmap helpers ---

export function setSigWebFontThreshold(v: number): void {
  sigWebFontThreshold = v
}

function createLcdBitmapFromCanvas(
  canvas: HTMLCanvasElement,
  _xp: number,
  _yp: number,
  width: number,
  height: number,
): string {
  const data = canvas.getContext('2d')!.getImageData(0, 0, width, height).data
  let out = ''
  for (let i = 0; i < data.length; i += 4) {
    out += data[i] < sigWebFontThreshold ? 'B' : 'W'
  }
  return out
}

function renderTextToCanvas(
  fnt: string,
  str: string,
  width: number,
  height: number,
  fillBg = '#FFFFFF',
  fillFg = '#000000',
): HTMLCanvasElement {
  const c = document.createElement('canvas')
  c.width = width
  c.height = height
  const cntx = c.getContext('2d')!
  cntx.font = fnt
  cntx.fillStyle = fillBg
  cntx.rect(0, 0, width, height)
  cntx.fill()
  cntx.fillStyle = fillFg
  cntx.textBaseline = 'top'
  cntx.fillText(str, 0, 0)
  cntx.drawImage(cntx.canvas, 0, 0, width, height)
  return c
}

function measureTextWidth(fnt: string, str: string): number {
  const c = document.createElement('canvas')
  const cntx = c.getContext('2d')!
  cntx.font = fnt
  return Math.round(cntx.measureText(str).width)
}

// --- LCD write helpers ---

function LcdWriteImageStream(
  dst: number,
  mode: number,
  xp: number,
  yp: number,
  xs: number,
  ys: number,
  data: string,
): void {
  setPropertySync(`LcdWriteImageStreamParams/${dst},${mode},${xp},${yp},${xs},${ys}`)
  setImageStreamProperty('LcdWriteImageStream/', data)
}

function LcdWriteImageBlob(
  dst: number,
  mode: number,
  xp: number,
  yp: number,
  xs: number,
  ys: number,
  data: string,
): void {
  setImageBlobProperty(`LcdWriteImageStream/${dst},${mode},${xp},${yp},${xs},${ys}`, data)
}

// --- Public LCD functions ---

export function LcdWriteImage(dst: number, mode: number, xp: number, yp: number, url: string): void {
  setPropertySync(`LcdWriteImage/${dst},${mode},${xp},${yp},${url.replace(/\//g, '_')}`)
}

export function LcdWriteLocalImage(dst: number, mode: number, xp: number, yp: number, url: string): void {
  setProperty(`LcdWriteImage/${dst},${mode},${xp},${yp},${url}`)
}

export function textToTablet(x: number, y: number, height: number, str: string, fnt: string): void {
  const xs = measureTextWidth(fnt, str)
  const c = renderTextToCanvas(fnt, str, xs, height)
  LcdWriteImageStream(0, 2, x, y, xs, height, createLcdBitmapFromCanvas(c, 0, 0, xs, height))
}

export function LCDWriteString(
  dest: number,
  mode: number,
  x: number,
  y: number,
  fnt: string,
  size: number,
  str: string,
): void {
  const xs = measureTextWidth(fnt, str)
  if (xs === 0) return
  const c = renderTextToCanvas(fnt, str, xs, size)
  LcdWriteImageStream(dest, mode, x, y, xs, size, createLcdBitmapFromCanvas(c, x, y, xs, size))
}

export function LCDDrawRectangle(
  dest: number,
  mode: number,
  x: number,
  y: number,
  xs: number,
  ys: number,
  fill: string,
): void {
  const c = document.createElement('canvas')
  c.width = xs
  c.height = ys
  const cntx = c.getContext('2d')!
  cntx.fillStyle = fill
  cntx.rect(0, 0, xs, ys)
  cntx.fill()
  cntx.drawImage(cntx.canvas, 0, 0, xs, ys)
  LcdWriteImageBlob(dest, mode, x, y, xs, ys, createLcdBitmapFromCanvas(c, x, y, xs, ys))
}

export function LCDDrawButton(
  dest: number,
  mode: number,
  x: number,
  y: number,
  xs: number,
  ys: number,
  strys: number,
  fill: string,
  fnt: string,
  str: string,
): void {
  const sxs = measureTextWidth(fnt, str)
  const c = document.createElement('canvas')
  c.width = xs
  c.height = ys
  const cntx = c.getContext('2d')!
  cntx.font = fnt
  cntx.fillStyle = fill
  cntx.rect(0, 0, xs, ys)
  cntx.fill()
  cntx.fillStyle = '#FFFFFF'
  cntx.textBaseline = 'top'
  cntx.fillText(str, (xs - sxs) / 2, (ys - strys) / 2)
  cntx.drawImage(cntx.canvas, 0, 0, xs, ys)
  LcdWriteImageBlob(dest, mode, x, y, xs, ys, createLcdBitmapFromCanvas(c, x, y, xs, ys))
}

export function LCDWriteStringWindow(
  dest: number,
  mode: number,
  x: number,
  y: number,
  fnt: string,
  xsize: number,
  ysize: number,
  str: string,
): void {
  const c = renderTextToCanvas(fnt, str, xsize, ysize)
  LcdWriteImageBlob(dest, mode, x, y, xsize, ysize, createLcdBitmapFromCanvas(c, x, y, xsize, ysize))
}

export function LCDStringWidth(fnt: string, str: string): number {
  return measureTextWidth(fnt, str)
}

export function LCDStringHeight(_fnt: string, _str: string): number {
  return 16
}

export function LcdRefresh(mode: number, xp: number, yp: number, xs: number, ys: number): void {
  setPropertySync(`LcdRefresh/${mode},${xp},${yp},${xs},${ys}`)
}

export function LCDSendCmdString(cmdStr: string, returnCount: number, _result: string, timeOut: number): void {
  setStreamProperty(`LcdSendCmdString/${returnCount},${timeOut}`, cmdStr)
}

export function LCDSendCmdData(cmdStr: string, returnCount: number, _result: string, timeOut: number): void {
  setStreamProperty(`LcdSendCmdData/${returnCount},${timeOut}`, cmdStr)
}

export function LCDSendGraphicCanvas(
  dest: number,
  mode: number,
  x: number,
  y: number,
  canvas: HTMLCanvasElement,
): void {
  const gstr = createLcdBitmapFromCanvas(canvas, 0, 0, canvas.width, canvas.height)
  LcdWriteImageStream(dest, mode, x, y, canvas.width, canvas.height, gstr)
}

export function LCDSendGraphicUrl(dest: number, mode: number, x: number, y: number, url: string): void {
  LcdWriteImage(dest, mode, x, y, url)
}

export const LCDClear = () => getProperty('LcdClear')
export const LCDSetTabletMap = (
  _lcdType: number,
  _lcdXSize: number,
  _lcdYSize: number,
  _lcdXStart: number,
  _lcdYStart: number,
  _lcdXStop: number,
  _lcdYStop: number,
): void => {}

// --- Signature string ---

export function SetSigString(sigStr: string, ctx?: CanvasRenderingContext2D): string {
  const xhr = createXHR()
  xhr.open('POST', `${baseUri}SigString`)
  xhr.setRequestHeader('Content-Type', 'text/plain')
  xhr.send(sigStr)
  xhr.onload = () => {
    if (ctx) {
      const can = ctx.canvas
      SetImageXSize(can.width)
      SetImageYSize(can.height)
      GetSigImage(ctx)
    }
  }
  return ''
}

export const GetSigString = streamGetter('SigString')

// --- Measurement utility ---

export function measureText(
  text: string,
  fontSize: number,
  style?: string,
): { width: number; height: number } {
  const div = document.createElement('div')
  document.body.appendChild(div)
  if (style) div.setAttribute('style', style)
  div.style.fontSize = `${fontSize}px`
  div.style.position = 'absolute'
  div.style.left = '-1000px'
  div.style.top = '-1000px'
  div.innerHTML = text
  const result = { width: div.clientWidth, height: div.clientHeight }
  document.body.removeChild(div)
  return result
}

// --- Simple get/set property wrappers ---
// Signature properties
export const SetSigCompressionMode = setter('CompressionMode')
export const GetSigCompressionMode = getter('CompressionMode')
export const SetEncryptionMode = setter('EncryptionMode')
export const GetEncryptionMode = getter('EncryptionMode')
export const SetKeyString: (v: string) => void = (v) => setStreamProperty('KeyString', v)
export const GetKeyString = streamGetter('KeyString')
export const AutoKeyStart = () => setPropertySync('AutoKeyStart')
export const AutoKeyFinish = () => setPropertySync('AutoKeyFinish')
export const SetAutoKeyData: (v: string) => void = (v) => setStreamProperty('SetAutoKeyData', v)
export function AutoKeyAddData(keyData: string): string {
  setStreamProperty('AutoKeyAddData', keyData)
  return GetKeyString()
}
export function AutoKeyAddANSIData(keyData: string): string {
  return syncSetStreamProperty('AutoKeyAddANSIData', keyData)
}
export const GetKeyReceiptAscii = streamGetter('KeyReceiptAscii')
export const GetSigReceiptAscii = streamGetter('SigReceiptAscii')
export const SetTimeStamp: (v: string) => void = (v) => setStreamProperty('TimeStamp', v)
export const GetTimeStamp = streamGetter('TimeStamp')
export const SetAnnotate: (v: string) => void = (v) => setStreamProperty('Annotate', v)
export const GetAnnotate = streamGetter('Annotate')
export const GetDaysUntilCertificateExpires = getter('DaysUntilCertificateExpires')
export const ClearTablet = getter('ClearSignature')
export const NumberOfTabletPoints = getter('TotalPoints')
export const SetSaveSigInfo = setter('SaveSigInfo')
export const GetSaveSigInfo = getter('SaveSigInfo')
export const SetSavePressureData = setter('SavePressureData')
export const GetSavePressureData = getter('SavePressureData')
export const SetSaveTimeData = setter('SaveTimeData')
export const GetSaveTimeData = getter('SaveTimeData')
export const SetAntiAliasSpotSize = setter('AntiAliasSpotSize')
export const GetAntiAliasSpotSize = getter('AntiAliasSpotSize')
export const SetAntiAliasLineScale = setter('AntiAliasLineScale')
export const GetAntiAliasLineScale = getter('AntiAliasLineScale')
export const GetNumberOfStrokes = getter('NumberOfStrokes')
export const GetNumPointsForStroke: (v: number) => string = (v) => getProperty(`NumberOfPointsInStroke/${v}`)
export const GetPointXValue = (v1: number, v2: number): string => getProperty(`PointXValue/${v1}/${v2}`)
export const GetPointYValue = (v1: number, v2: number): string => getProperty(`PointYValue/${v1}/${v2}`)
export const SetAntiAliasEnable = setter('AntiAliasEnable')
export const GetAntiAliasEnable = getter('AntiAliasEnable')
export const SetUseAmbientColors = setter('UseAmbientColors')

// Display properties
export const SetDisplayXSize = setter('DisplayXSize')
export const GetDisplayXSize = getter('DisplayXSize')
export const SetDisplayYSize = setter('DisplayYSize')
export const GetDisplayYSize = getter('DisplayYSize')
export const SetDisplayPenWidth = setter('DisplayPenWidth')
export const GetDisplayPenWidth = getter('DisplayPenWidth')
export const SetDisplayTimeStamp = setter('DisplayTimeStamp')
export const GetDisplayTimeStamp = getter('DisplayTimeStamp')
export const SetDisplayTimeStampPosX = setter('DisplayTimeStampPosX')
export const GetDisplayTimeStampPosX = getter('DisplayTimeStampPosX')
export const SetDisplayTimeStampPosY = setter('DisplayTimeStampPosY')
export const GetDisplayTimeStampPosY = getter('DisplayTimeStampPosY')
export const SetDisplayTimeStampSize = setter('DisplayTimeStampSize')
export const GetDisplayTimeStampSize = getter('DisplayTimeStampSize')
export const SetDisplayAnnotate = setter('DisplayAnnotate')
export const GetDisplayAnnotate = getter('DisplayAnnotate')
export const SetDisplayAnnotatePosX = setter('DisplayAnnotatePosX')
export const GetDisplayAnnotatePosX = getter('DisplayAnnotatePosX')
export const SetDisplayAnnotatePosY = setter('DisplayAnnotatePosY')
export const GetDisplayAnnotatePosY = getter('DisplayAnnotatePosY')
export const SetDisplayAnnotateSize = setter('DisplayAnnotateSize')
export const GetDisplayAnnotateSize = getter('DisplayAnnotateSize')

// Image properties
export const SetImageXSize = setter('ImageXSize')
export const GetImageXSize = getter('ImageXSize')
export const SetImageYSize = setter('ImageYSize')
export const GetImageYSize = getter('ImageYSize')
export const SetImagePenWidth = setter('ImagePenWidth')
export const GetImagePenWidth = getter('ImagePenWidth')
export const SetImageTimeStamp = setter('ImageTimeStamp')
export const GetImageTimeStamp = getter('ImageTimeStamp')
export const SetImageTimeStampPosX = setter('ImageTimeStampPosX')
export const GetImageTimeStampPosX = getter('ImageTimeStampPosX')
export const SetImageTimeStampPosY = setter('ImageTimeStampPosY')
export const GetImageTimeStampPosY = getter('ImageTimeStampPosY')
export const SetImageTimeStampSize = setter('ImageTimeStampSize')
export const GetImageTimeStampSize = getter('ImageTimeStampSize')
export const SetImageAnnotate = setter('ImageAnnotate')
export const GetImageAnnotate = getter('ImageAnnotate')
export const SetImageAnnotatePosX = setter('ImageAnnotatePosX')
export const GetImageAnnotatePosX = getter('ImageAnnotatePosX')
export const SetImageAnnotatePosY = setter('ImageAnnotatePosY')
export const GetImageAnnotatePosY = getter('ImageAnnotatePosY')
export const SetImageAnnotateSize = setter('ImageAnnotateSize')
export const GetImageAnnotateSize = getter('ImageAnnotateSize')
export const SetJustifyX = setter('JustifyX')
export const GetJustifyX = getter('JustifyX')
export const SetJustifyY = setter('JustifyY')
export const GetJustifyY = getter('JustifyY')
export const SetJustifyMode = setter('JustifyMode')
export const GetJustifyMode = getter('JustifyMode')

// KeyPad
export function KeyPadAddHotSpot(
  key: number,
  coord: number,
  xp: number,
  yp: number,
  xs: number,
  ys: number,
): void {
  setPropertySync(`KeyPadAddHotSpot/${key},${coord},${xp},${yp},${xs},${ys}`)
}

export function KeyPadMarkHotSpot(
  _key: number,
  _coord: number,
  xp: number,
  yp: number,
  xs: number,
  ys: number,
): void {
  LCDWriteString(0, 2, xp, yp, '16pt sans-serif', 32, '+')
  LCDWriteString(0, 2, xp + xs, yp, '16pt sans-serif', 32, '+')
  LCDWriteString(0, 2, xp, yp + ys, '16pt sans-serif', 32, '+')
  LCDWriteString(0, 2, xp + xs, yp + ys, '16pt sans-serif', 32, '+')
}

export const KeyPadQueryHotSpot = (key: number): string => getProperty(`KeyPadQueryHotSpot/${key}`)
export const KeyPadClearHotSpotList = () => setPropertySync('KeyPadClearHotSpotList')

export function SetSigWindow(coords: number, xp: number, yp: number, xs: number, ys: number): void {
  setPropertySync(`SigWindow/${coords},${xp},${yp},${xs},${ys}`)
}

export const ClearSigWindow = (inside: number) => setPropertySync(`ClearSigWindow/${inside}`)

// LCD
export const SetLCDCaptureMode = setter('CaptureMode')
export const GetLCDCaptureMode = getter('CaptureMode')

export function LCDSetWindow(xP: number, yP: number, xS: number, yS: number): void {
  setPropertySync(`LCDSetWindow/${xP},${yP},${xS},${yS}`)
}

export const LCDSetPixelDepth = setter('LcdSetPixelDepth')
export const LCDGetLCDSize = getter('LcdGetLcdSize')
export const LCDSetCompressionMode = setter('LcdCompressionMode')
export const LCDGetCompressionMode = getter('LcdCompressionMode')
export const LCDSetZCompressionMode = setter('LcdZCompressionMode')
export const LCDGetZCompressionMode = getter('LcdZCompressionMode')

// Tablet properties
export const SetRealTabletState = setter('TabletState')
export const GetTabletState = getter('TabletState')
export const SetTabletLogicalXSize = setter('TabletLogicalXSize')
export const GetTabletLogicalXSize = getter('TabletLogicalXSize')
export const SetTabletLogicalYSize = setter('TabletLogicalYSize')
export const GetTabletLogicalYSize = getter('TabletLogicalYSize')
export const SetTabletXStart = setter('TabletXStart')
export const GetTabletXStart = getter('TabletXStart')
export const SetTabletYStart = setter('TabletYStart')
export const GetTabletYStart = getter('TabletYStart')
export const SetTabletXStop = setter('TabletXStop')
export const GetTabletXStop = getter('TabletXStop')
export const SetTabletYStop = setter('TabletYStop')
export const GetTabletYStop = getter('TabletYStop')
export const SetTabletFilterPoints = setter('TabletFilterPoints')
export const GetTabletFilterPoints = getter('TabletFilterPoints')
export const SetTabletTimingAdvance = setter('TabletTimingAdvance')
export const GetTabletTimingAdvance = getter('TabletTimingAdvance')
export const SetTabletComPort = setter('TabletComPort')
export const GetTabletComPort = getter('TabletComPort')
export const SetTabletBaudRate = setter('TabletBaudRate')
export const GetTabletBaudRate = getter('TabletBaudRate')
export const SetTabletRotation = setter('TabletRotation')
export const GetTabletRotation = getter('TabletRotation')
export const SetTabletType = setter('TabletType')
export const GetTabletType = getter('TabletType')
export const SetServerTabletType = setter('ServerTabletType')
export const GetServerTabletType = getter('ServerTabletType')
export const SetTabletComTest = setter('TabletComTest')
export const GetTabletComTest = getter('TabletComTest')
export const SetTabletResolution = setter('TabletResolution')
export const GetTabletResolution = getter('TabletResolution')
export const TabletConnectQuery = getter('TabletConnectQuery')
export const TabletModelNumber = getter('TabletModelNumber')
export const TabletSerialNumber = getter('TabletSerialNumber')
export const SetTabletPortPath = setter('TabletPortPath')
export const SetTabletLocalIniFilePath = setter('TabletLocalIniFilePath')
export const SetTabletModel = setter('TabletModel')
export const SetSerialPortCloseDelay = setter('SerialPortCloseDelay')
export const GetSerialPortCloseDelay = getter('SerialPortCloseDelay')
export const EnableTabletEncryption = () => setPropertySync('EnableTabletEncryption')

export function SetTabletEncryptionMode(hmode: number, tmode: number): void {
  setPropertySync(`TabletEncryptionMode/${hmode},${tmode}`)
}

export const SetMaxLogFileSize = setter('MaxLogFileSize')
export const GetSigSockServerPath = getter('SigSockServerPath')
export const GetSigSockClientName = getter('SigSockClientName')
export const GetSigSockPortNumber = getter('SigSockPortNumber')
export const SetSigSockServerPath = setter('SigSockServerPath')
export const SetSigSockClientName = setter('SigSockClientName')
export const SetPortNumber = setter('PortNumber')
export const SetSigSockPortNumber = setter('SigSockPortNumber')
export const GetFirmwareRevision = getter('FirmwareRevision')

export const SetTabletData: (v: string) => void = (v) => setStreamProperty('TabletData', v)
export const GetTabletData = streamGetter('TabletData')

export const OpenTablet = setter('OpenTablet')
export const CloseTablet = () => setProperty('CloseTablet')
export const ResetParameters = () => setPropertySync('ResetParameters')
export const Reset = () => setProperty('Reset')

// --- Tablet state management ---

export function SetTabletState(
  v: number,
  ctx?: CanvasRenderingContext2D | ReturnType<typeof setInterval> | null,
  tv?: number,
): ReturnType<typeof setInterval> | null {
  const delay = tv || 100

  if (GetTabletState() != String(v)) {
    if (v === 1) {
      if (ctx && 'canvas' in ctx) {
        const can = (ctx as CanvasRenderingContext2D).canvas
        SetDisplayXSize(can.width)
        SetDisplayYSize(can.height)
        SigWebSetDisplayTarget(ctx as CanvasRenderingContext2D)
      }
      SetRealTabletState(v)
      if (ctx && GetTabletState() !== '0') {
        return setInterval(SigWebRefresh, delay)
      }
      return null
    } else {
      if (ctx) clearInterval(ctx as ReturnType<typeof setInterval>)
      SigWebSetDisplayTarget(null)
      SetRealTabletState(v)
    }
  }
  return null
}