Sprites.Media.Binary

The binary media: a run of raw bytes. The document is one state value, { length, bytes }, where length is the count of bytes and bytes is a flat list of that many values, each a whole number from 0 to 255. It is universal, held the same on every machine, so it carries no platform detail in the data. The editor is a hex editor drawn on a Vector canvas, panned and zoomed like the sprite and image editors, with the address on the left, the bytes as hex or bit squares in the middle, and the ASCII on the right.

Sprites.Media.Binary

Sprites.Media.Binary.MinLength Number

The smallest a blob may be, in bytes: one. A resize holds the length at least this high.

Sprites.Ui.Dom.Text('MinLength = ', Sprites.Media.Binary.MinLength);
The lower bound on a blob's size.

Sprites.Media.Binary.MaxLength Number

The largest a blob may be, in bytes: sixty five thousand five hundred and thirty six. A resize holds the length no higher than this.

Sprites.Ui.Dom.Text('MaxLength = ', Sprites.Media.Binary.MaxLength);
The upper bound on a blob's size.

Sprites.Media.Binary.DefaultLength Number

The size, in bytes, of a fresh blob: two hundred and fifty six.

Sprites.Ui.Dom.Text('DefaultLength = ', Sprites.Media.Binary.DefaultLength);
The byte count of a new document.

Sprites.Media.Binary.DefaultWidthChoice Number

The bytes shown on one line to start with: sixteen, one of a few powers of two.

Sprites.Ui.Dom.Text('DefaultWidthChoice = ', Sprites.Media.Binary.DefaultWidthChoice);
The default bytes per line.

Sprites.Media.Binary.MinByte Number

The lowest value a byte can hold: zero.

Sprites.Ui.Dom.Text('MinByte = ', Sprites.Media.Binary.MinByte);
The bottom of a byte's range.

Sprites.Media.Binary.MaxByte Number

The highest value a byte can hold: two hundred and fifty five.

Sprites.Ui.Dom.Text('MaxByte = ', Sprites.Media.Binary.MaxByte);
The top of a byte's range.

Sprites.Media.Binary.Zero Number

The empty value a new byte holds: zero. A fresh document fills every byte with it.

Sprites.Ui.Dom.Text('Zero = ', Sprites.Media.Binary.Zero);
The value a blank byte reads.

Sprites.Media.Binary.DefaultBrush Number

The first byte brush the Draw tool paints: zero.

Sprites.Ui.Dom.Text('DefaultBrush = ', Sprites.Media.Binary.DefaultBrush);
The starting byte value of the Draw tool.

Sprites.Media.Binary.DefaultBitBrush Number

The first bit brush painted in binary view: one, for a white square. Zero paints a black one.

Sprites.Ui.Dom.Text('DefaultBitBrush = ', Sprites.Media.Binary.DefaultBitBrush);
The starting bit value in binary view.

Sprites.Media.Binary.AddressDigits Number

The number of hex digits the address gutter shows: six.

const address = Sprites.Text.Hex(48, Sprites.Media.Binary.AddressDigits);
Sprites.Ui.Dom.Text('address = ', address);
An address padded to six hex digits.

Sprites.Media.Binary.ViewTop Number

The top edge, in pixels, the View panel docks to on the stage's left.

Sprites.Ui.Dom.Text('ViewTop = ', Sprites.Media.Binary.ViewTop);
The dock position of the View panel.

Sprites.Media.Binary.InfoTop Number

The top edge, in pixels, the Info panel docks to on the stage's left.

Sprites.Ui.Dom.Text('InfoTop = ', Sprites.Media.Binary.InfoTop);
The dock position of the Info panel.

Sprites.Media.Binary.AddrCols Number

The width of the address gutter, in character cells: six.

Sprites.Ui.Dom.Text('AddrCols = ', Sprites.Media.Binary.AddrCols);
The cell width of the address gutter.

Sprites.Media.Binary.HexCols Number

The cells a hex byte spans: three.

Sprites.Ui.Dom.Text('HexCols = ', Sprites.Media.Binary.HexCols);
The cell width of a hex byte.

Sprites.Media.Binary.BinCols Number

The bit squares a binary byte spans: eight.

Sprites.Ui.Dom.Text('BinCols = ', Sprites.Media.Binary.BinCols);
The cell width of a binary byte.

Sprites.Media.Binary.RegionGap Number

The gap between the sections: zero. They sit flush, split by the black separator lines.

Sprites.Ui.Dom.Text('RegionGap = ', Sprites.Media.Binary.RegionGap);
The cell gap between regions.

Sprites.Media.Binary.AsciiCols Number

The width of an ASCII cell, in cells: one.

Sprites.Ui.Dom.Text('AsciiCols = ', Sprites.Media.Binary.AsciiCols);
The cell width of an ASCII cell.

Sprites.Media.Binary.FontSize Number

The text size, in world units, of the address, hex, binary and ASCII glyphs.

Sprites.Ui.Dom.Text('FontSize = ', Sprites.Media.Binary.FontSize);
The glyph height in world units.

Sprites.Media.Binary.Margin Number

The space left around the content on a fit, about half the address gutter, on every side.

Sprites.Ui.Dom.Text('Margin = ', Sprites.Media.Binary.Margin);
The fit margin in world units.

Sprites.Media.Binary.Overdraw Number

The extra rows drawn above and below the visible band: two.

Sprites.Ui.Dom.Text('Overdraw = ', Sprites.Media.Binary.Overdraw);
The rows of overdraw kept beyond the band.

Sprites.Media.Binary.MinShow Number

The smallest span, in world units, the fit view holds, so a tiny blob never zooms in too far: eight.

Sprites.Ui.Dom.Text('MinShow = ', Sprites.Media.Binary.MinShow);
The floor on the fit view's span.

Sprites.Media.Binary.AddrColour String

The colour of the address gutter text, a green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.AddrColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' AddrColour = ', Sprites.Media.Binary.AddrColour);
The address gutter colour, shown as a swatch.

Sprites.Media.Binary.TextColour String

The colour of the hex byte text, a dark green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.TextColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' TextColour = ', Sprites.Media.Binary.TextColour);
The hex text colour, shown as a swatch.

Sprites.Media.Binary.AsciiColour String

The colour of the ASCII glyphs, a muted grey green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.AsciiColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' AsciiColour = ', Sprites.Media.Binary.AsciiColour);
The ASCII glyph colour, shown as a swatch.

Sprites.Media.Binary.Black String

The black of a zero bit square in binary view, a very dark green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.Black);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' Black = ', Sprites.Media.Binary.Black);
The black bit square colour, shown as a swatch.

Sprites.Media.Binary.White String

The white of a one bit square, and the backdrop behind the content.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.White);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Style('border', '1px solid #ccc');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' White = ', Sprites.Media.Binary.White);
The white backdrop colour, shown as a swatch.

Sprites.Media.Binary.GridColour String

The colour of the faint grid lines, a light translucent green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.GridColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Style('border', '1px solid #ccc');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' GridColour = ', Sprites.Media.Binary.GridColour);
The faint grid line colour, shown as a swatch.

Sprites.Media.Binary.GridThickColour String

The colour of the thicker grid lines every eight rows, a stronger translucent green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.GridThickColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Style('border', '1px solid #ccc');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' GridThickColour = ', Sprites.Media.Binary.GridThickColour);
The thick grid line colour, shown as a swatch.

Sprites.Media.Binary.OutlineColour String

The colour of the black frame around the content and its separators.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.OutlineColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' OutlineColour = ', Sprites.Media.Binary.OutlineColour);
The frame colour, shown as a swatch.

Sprites.Media.Binary.SelColour String

The colour of the selection outline, a bright green.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.SelColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' SelColour = ', Sprites.Media.Binary.SelColour);
The selection outline colour, shown as a swatch.

Sprites.Media.Binary.CaretColour String

The colour of the type caret outline, an orange.

Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('background', Sprites.Media.Binary.CaretColour);
  Sprites.Ui.Dom.Style('padding', '0 2em');
  Sprites.Ui.Dom.Text(' ');
});
Sprites.Ui.Dom.Text(' CaretColour = ', Sprites.Media.Binary.CaretColour);
The caret outline colour, shown as a swatch.

Sprites.Media.Binary.GridWidth Number

The line width of a faint grid line, in world units.

Sprites.Ui.Dom.Text('GridWidth = ', Sprites.Media.Binary.GridWidth);
The width of a faint grid line.

Sprites.Media.Binary.GridThickWidth Number

The line width of a thick grid line, drawn every eight rows.

Sprites.Ui.Dom.Text('GridThickWidth = ', Sprites.Media.Binary.GridThickWidth);
The width of a thick grid line.

Sprites.Media.Binary.OutlineWidth Number

The line width of the black frame, in world units.

Sprites.Ui.Dom.Text('OutlineWidth = ', Sprites.Media.Binary.OutlineWidth);
The width of the frame line.

Sprites.Media.Binary.SelWidth Number

The line width of the selection outline, in world units.

Sprites.Ui.Dom.Text('SelWidth = ', Sprites.Media.Binary.SelWidth);
The width of the selection outline.

Sprites.Media.Binary.CaretWidth Number

The line width of the caret outline, in world units.

Sprites.Ui.Dom.Text('CaretWidth = ', Sprites.Media.Binary.CaretWidth);
The width of the caret outline.

Sprites.Media.Binary.NewDocument Function

Sprites.Media.Binary.NewDocument(length)

A new binary document of length bytes, all zero: the plain { length, bytes } the store seeds a record from. Called once as the editor opens, so it builds the plain seed directly.

InputTypeDescription
lengthNumberThe count of bytes in the new blob.

Returns a plain { length, bytes } document with every byte zero.

const doc = Sprites.Media.Binary.NewDocument(4);
Sprites.Ui.Dom.Text('length = ', doc.length);
const byte = Sprites.Media.Binary.ByteAt(doc, 0);
Sprites.Ui.Dom.Text(', first byte = ', byte);
A fresh four byte blob, every byte zero.

Sprites.Media.Binary.ByteAt Sprites.Reactive.Value

Sprites.Media.Binary.ByteAt(data, index)

The byte at an index of a document, or undefined past the end. Read only, a composite over Sprites.Array.At.

InputTypeDescription
dataObject or Sprites.Reactive.ValueA { length, bytes } document.
indexNumber or Sprites.Reactive.ValueThe byte index to read.

Returns a read-only Sprites.Reactive.Value holding the byte, or undefined past the end.

const data = { length: 3, bytes: [10, 20, 30] };
const index = Sprites.Reactive.Value(1);
const byte = Sprites.Media.Binary.ByteAt(data, index);
Sprites.Ui.Input.Number(index);
Sprites.Ui.Dom.Text(' byte = ', byte);
The byte at the chosen index.

Sprites.Media.Binary.Poke Sprites.Reactive.Value

Sprites.Media.Binary.Poke(data, index, value)

The same document with the byte at an index set to value, keeping every other byte and the length. A composite over Sprites.Array.Set and Sprites.Object.With, for a paint or a type: it composes the new document, which a Set of data commits.

InputTypeDescription
dataObject or Sprites.Reactive.ValueA { length, bytes } document.
indexNumber or Sprites.Reactive.ValueThe byte index to change.
valueNumber or Sprites.Reactive.ValueThe new byte value.

Returns a read-only Sprites.Reactive.Value holding the new document.

const data = { length: 3, bytes: [0, 0, 0] };
const value = Sprites.Reactive.Value(255);
const next = Sprites.Media.Binary.Poke(data, 1, value);
const byte = Sprites.Media.Binary.ByteAt(next, 1);
Sprites.Ui.Input.Number(value);
Sprites.Ui.Dom.Text(' byte one = ', byte);
Byte one of the document set to the value.

Sprites.Media.Binary.SetBit Sprites.Reactive.Value

Sprites.Media.Binary.SetBit(data, index, bit, value)

The same document with one bit of the byte at an index set to value, zero or one, counting bit 0 as the most significant. It clears the bit's place then adds the value there, keeping every other bit. A composite over Bit, Sprites.Maths and Poke, for a bit paint or a bit type.

InputTypeDescription
dataObject or Sprites.Reactive.ValueA { length, bytes } document.
indexNumber or Sprites.Reactive.ValueThe byte index to change.
bitNumber or Sprites.Reactive.ValueThe bit position, bit 0 the most significant.
valueNumber or Sprites.Reactive.ValueThe new bit value, zero or one.

Returns a read-only Sprites.Reactive.Value holding the new document.

const data = { length: 1, bytes: [0] };
const bit = Sprites.Reactive.Value(0);
const next = Sprites.Media.Binary.SetBit(data, 0, bit, 1);
const byte = Sprites.Media.Binary.ByteAt(next, 0);
Sprites.Ui.Input.Number(bit);
Sprites.Ui.Dom.Text(' byte = ', byte);
Setting bit zero gives 128; bit seven gives 1.

Sprites.Media.Binary.Length Sprites.Reactive.Value

Sprites.Media.Binary.Length(data)

A two way view of a document's length, in bytes. Read, it is the byte count; set, it resizes the bytes to that length, cropping the tail or padding with zero, and writes the whole document back. A composite over Sprites.Array.Resize and Sprites.Object.With, for the Info length input.

InputTypeDescription
dataSprites.Reactive.ValueA two way { length, bytes } document.

Returns a two way Sprites.Reactive.Value of the byte count; setting it resizes the blob.

const seed = Sprites.Media.Binary.NewDocument(8);
const data = Sprites.Reactive.Value(seed);
const length = Sprites.Media.Binary.Length(data);
Sprites.Ui.Input.Number(length);
Sprites.Ui.Dom.Text(' length = ', length);
Change the length and the blob resizes to match.

Sprites.Media.Binary.Summary Sprites.Reactive.Value

Sprites.Media.Binary.Summary(length)

The meta info summary for a blob: its byte count as one short string, for the meta record a listing reads. A composite over Sprites.Text.Concat.

InputTypeDescription
lengthNumber or Sprites.Reactive.ValueThe byte count of the blob.

Returns a read-only Sprites.Reactive.Value holding the summary string.

const length = Sprites.Reactive.Value(256);
const summary = Sprites.Media.Binary.Summary(length);
Sprites.Ui.Input.Number(length);
Sprites.Ui.Dom.Text(' summary = ', summary);
The byte count as a short label.

Sprites.Media.Binary.Ascii Sprites.Reactive.Value

Sprites.Media.Binary.Ascii(byte)

The ASCII character a byte shows: its glyph when it is a printable code from 32 up to 126, or a dot otherwise. A composite over Sprites.Maths, Sprites.Logic and Sprites.Text.

InputTypeDescription
byteNumber or Sprites.Reactive.ValueThe byte value to show.

Returns a read-only Sprites.Reactive.Value holding the glyph, or a dot.

const byte = Sprites.Reactive.Value(65);
const glyph = Sprites.Media.Binary.Ascii(byte);
Sprites.Ui.Input.Number(byte);
Sprites.Ui.Dom.Text(' glyph = ', glyph);
Sixty five reads A; a control code reads a dot.

Sprites.Media.Binary.Bit Sprites.Reactive.Value

Sprites.Media.Binary.Bit(byte, bit)

Bit number bit of a byte, counting bit 0 as the most significant: the byte over two to the power of its distance from the low bit, floored, modulo two. A composite over Sprites.Maths.

InputTypeDescription
byteNumber or Sprites.Reactive.ValueThe byte value to read.
bitNumber or Sprites.Reactive.ValueThe bit position, bit 0 the most significant.

Returns a read-only Sprites.Reactive.Value holding the bit, zero or one.

const byte = Sprites.Reactive.Value(128);
const bit = Sprites.Reactive.Value(0);
const value = Sprites.Media.Binary.Bit(byte, bit);
Sprites.Ui.Input.Number(byte);
Sprites.Ui.Input.Number(bit);
Sprites.Ui.Dom.Text(' bit = ', value);
Bit zero of 128 is one, the top bit set.

Sprites.Media.Binary.Selected Sprites.Reactive.Value

Sprites.Media.Binary.Selected(state, index)

True while the byte at an index falls inside the selection range. A composite over the range bounds and Sprites.Logic. With no selection selStart is undefined, so hasSelection is false and no cell reads as selected.

InputTypeDescription
stateObjectThe editor state, its selStart and selEnd the range ends.
indexNumber or Sprites.Reactive.ValueThe byte index to test.

Returns a read-only Sprites.Reactive.Value, true while the index lies in the range.

const state = { selStart: 2, selEnd: 5 };
const index = Sprites.Reactive.Value(3);
const selected = Sprites.Media.Binary.Selected(state, index);
Sprites.Ui.Input.Number(index);
Sprites.Ui.Dom.Text(' selected = ', selected);
True while the index lies between two and five.

Sprites.Media.Binary.DrawSelect Void

Sprites.Media.Binary.DrawSelect(state, index, x, r, w)

A selection outline around a cell, drawn while the byte at an index is in the range. A composite over Selected, If and Sprites.Image.Draw.

InputTypeDescription
stateObjectThe editor state, its selStart and selEnd the range ends.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
xNumber or Sprites.Reactive.ValueThe left of the cell, in world units.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.
wNumber or Sprites.Reactive.ValueThe width of the cell, in world units.

Returns nothing; it draws the outline into the current surface.

const state = { selStart: 0, selEnd: 2 };
const pan = Sprites.Reactive.ReadOnly({ x: 1.5, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 4, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 3, 1);
  });
  Sprites.Media.Binary.DrawSelect(state, 1, 1, 0, 1);
});
An outline around the selected cell.

Sprites.Media.Binary.DrawByteCaret Void

Sprites.Media.Binary.DrawByteCaret(state, index, x, r, w)

A caret outline around a hex byte cell, drawn while the Type tool holds the caret on it.

InputTypeDescription
stateObjectThe editor state, its isType flag and caret index.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
xNumber or Sprites.Reactive.ValueThe left of the cell, in world units.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.
wNumber or Sprites.Reactive.ValueThe width of the cell, in world units.

Returns nothing; it draws the caret into the current surface.

const state = { isType: true, caret: 1 };
const pan = Sprites.Reactive.ReadOnly({ x: 1.5, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 4, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 3, 1);
  });
  Sprites.Media.Binary.DrawByteCaret(state, 1, 1, 0, 1);
});
A caret box on the byte under the type caret.

Sprites.Media.Binary.DrawBitCaret Void

Sprites.Media.Binary.DrawBitCaret(state, index, base, r)

A caret outline around one bit square, drawn while the Type tool holds the caret on that byte and bit position, in binary view.

InputTypeDescription
stateObjectThe editor state, its isType flag, caret index and bitpos.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
baseNumber or Sprites.Reactive.ValueThe left of the byte's bit squares, in world units.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.

Returns nothing; it draws the caret into the current surface.

const state = { isType: true, caret: 0, bitpos: 3 };
const pan = Sprites.Reactive.ReadOnly({ x: 4, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 9, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 8, 1);
  });
  Sprites.Media.Binary.DrawBitCaret(state, 0, 0, 0);
});
A caret box on the bit square at the bit position.

Sprites.Media.Binary.DrawHex Void

Sprites.Media.Binary.DrawHex(state, index, r, c, cy)

One hex byte at column c of row r: its two hex digits centred in the cell, then the selection and caret outlines. A composite over ByteAt, Sprites.Text.Hex and Sprites.Image.Draw.Text.

InputTypeDescription
stateObjectThe editor state, its data, dataX and caret fields.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.
cNumber or Sprites.Reactive.ValueThe column within the row.
cyNumber or Sprites.Reactive.ValueThe row centre, in world units.

Returns nothing; it draws the hex cell into the current surface.

const state = { data: { length: 1, bytes: [171] }, dataX: 0, isType: false, caret: 0, selStart: undefined, selEnd: undefined };
const pan = Sprites.Reactive.ReadOnly({ x: 1.5, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 4, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 3, 1);
  });
  Sprites.Media.Binary.DrawHex(state, 0, 0, 0, 0.5);
});
The byte 171 drawn as its two hex digits.

Sprites.Media.Binary.DrawBinary Void

Sprites.Media.Binary.DrawBinary(state, index, r, c, cy)

One binary byte at column c of row r: eight bit squares, a zero on a black square or a one on a white one, the text the opposite of the square, then the selection outline and the caret bit. A composite over ByteAt, Bit, Repeat and Sprites.Image.Draw.

InputTypeDescription
stateObjectThe editor state, its data, dataX and caret fields.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.
cNumber or Sprites.Reactive.ValueThe column within the row.
cyNumber or Sprites.Reactive.ValueThe row centre, in world units.

Returns nothing; it draws the eight bit squares into the current surface.

const state = { data: { length: 1, bytes: [171] }, dataX: 0, isType: false, caret: 0, bitpos: 0, selStart: undefined, selEnd: undefined };
const pan = Sprites.Reactive.ReadOnly({ x: 4, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 9, () => {
  Sprites.Media.Binary.DrawBinary(state, 0, 0, 0, 0.5);
});
The byte 171 drawn as eight black and white bit squares.

Sprites.Media.Binary.DrawByte Void

Sprites.Media.Binary.DrawByte(state, index, r, c, cy)

One byte cell, hex or binary by the View setting. A composite over If and Else.

InputTypeDescription
stateObjectThe editor state, its binary flag and cell fields.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.
cNumber or Sprites.Reactive.ValueThe column within the row.
cyNumber or Sprites.Reactive.ValueThe row centre, in world units.

Returns nothing; it draws the cell hex or binary into the current surface.

const binary = Sprites.Reactive.Value(false);
const state = { data: { length: 1, bytes: [171] }, dataX: 0, binary: binary, isType: false, caret: 0, bitpos: 0, selStart: undefined, selEnd: undefined };
Sprites.Ui.Button.Toggle(binary, 'Toggle view');
const pan = Sprites.Reactive.ReadOnly({ x: 4, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 9, () => {
  Sprites.Media.Binary.DrawByte(state, 0, 0, 0, 0.5);
});
Toggle the view and the cell switches hex to binary.

Sprites.Media.Binary.DrawAscii Void

Sprites.Media.Binary.DrawAscii(state, index, r, c, cy)

One ASCII cell at column c of row r: the byte's glyph centred, then the selection outline. A composite over ByteAt, Ascii and Sprites.Image.Draw.Text.

InputTypeDescription
stateObjectThe editor state, its data, asciiX and range fields.
indexNumber or Sprites.Reactive.ValueThe byte index of the cell.
rNumber or Sprites.Reactive.ValueThe row, its top edge in world units.
cNumber or Sprites.Reactive.ValueThe column within the row.
cyNumber or Sprites.Reactive.ValueThe row centre, in world units.

Returns nothing; it draws the glyph into the current surface.

const state = { data: { length: 1, bytes: [65] }, asciiX: 0, selStart: undefined, selEnd: undefined };
const pan = Sprites.Reactive.ReadOnly({ x: 0.5, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 2, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 1, 1);
  });
  Sprites.Media.Binary.DrawAscii(state, 0, 0, 0, 0.5);
});
The byte 65 drawn as its ASCII glyph A.

Sprites.Media.Binary.DrawRow Void

Sprites.Media.Binary.DrawRow(state, r)

One row r of the view: the address at the left, then the byte and ASCII cells across the width, each cell drawn only where it falls inside the blob so the last row stops at the end. A composite over Repeat and If.

InputTypeDescription
stateObjectThe editor state, its width, length, data and layout fields.
rNumber or Sprites.Reactive.ValueThe row index to draw.

Returns nothing; it draws the whole row into the current surface.

const binary = Sprites.Reactive.Value(false);
const state = { data: { length: 4, bytes: [72, 105, 33, 0] }, length: 4, width: 4, binary: binary, dataX: 6, asciiX: 18, isType: false, caret: 0, bitpos: 0, selStart: undefined, selEnd: undefined };
Sprites.Ui.Button.Toggle(binary, 'Toggle view');
const pan = Sprites.Reactive.ReadOnly({ x: 11, y: 0.5 });
Sprites.Ui.Image.Vector(pan, 24, () => {
  Sprites.Media.Binary.DrawRow(state, 0);
});
One row: address, four bytes and their ASCII.

Sprites.Media.Binary.Rows Void

Sprites.Media.Binary.Rows(state)

The rows on screen: the band from the first drawn row down, a fitted count that follows the pan and zoom, each row drawn in world space. A composite over Repeat.

InputTypeDescription
stateObjectThe editor state, its firstDrawRow, drawCount and row fields.

Returns nothing; it draws the visible band of rows into the current surface.

const binary = Sprites.Reactive.Value(false);
const state = { data: { length: 8, bytes: [72, 105, 33, 0, 65, 66, 67, 68] }, length: 8, width: 4, binary: binary, dataX: 6, asciiX: 18, firstDrawRow: 0, drawCount: 2, isType: false, caret: 0, bitpos: 0, selStart: undefined, selEnd: undefined };
Sprites.Ui.Button.Toggle(binary, 'Toggle view');
const pan = Sprites.Reactive.ReadOnly({ x: 11, y: 1 });
Sprites.Ui.Image.Vector(pan, 24, () => {
  Sprites.Media.Binary.Rows(state);
});
Two rows of the blob drawn in world space.

Sprites.Media.Binary.Backdrop Void

Sprites.Media.Binary.Backdrop(state)

The white backdrop behind the whole content, address, data and ASCII together, so the checker board shows only outside it. One filled rectangle the full width and height.

InputTypeDescription
stateObjectThe editor state, its totalW and totalRows the content size.

Returns nothing; it fills the backdrop into the current surface.

const state = { totalW: 6, totalRows: 3 };
const pan = Sprites.Reactive.ReadOnly({ x: 3, y: 1.5 });
Sprites.Ui.Image.Vector(pan, 7, () => {
  Sprites.Image.Checkerboard();
  Sprites.Media.Binary.Backdrop(state);
});
A white panel over the checkerboard.

Sprites.Media.Binary.Grid Void

Sprites.Media.Binary.Grid(state)

The light grid: faint vertical lines every eight columns in the data and the ASCII, and a horizontal line on every visible row boundary, thicker every eight rows. The verticals run the full height as one line each; the horizontals draw only over the visible band. A composite over Repeat and Sprites.Image.Draw.

InputTypeDescription
stateObjectThe editor state, its region widths, band and total size fields.

Returns nothing; it draws the grid lines into the current surface.

const binary = Sprites.Reactive.Value(false);
const state = { binary: binary, dataX: 6, dataW: 48, asciiX: 54, asciiW: 16, totalW: 70, totalRows: 8, firstDrawRow: 0, drawCount: 8 };
Sprites.Ui.Button.Toggle(binary, 'Toggle view');
const pan = Sprites.Reactive.ReadOnly({ x: 35, y: 4 });
Sprites.Ui.Image.Vector(pan, 74, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 70, 8);
  });
  Sprites.Media.Binary.Grid(state);
});
The faint grid, thicker every eighth row.

Sprites.Media.Binary.Frame Void

Sprites.Media.Binary.Frame(state)

The black frame: a border around the whole content, and a vertical line between the address and the data, and between the data and the ASCII. Drawn last, so the separators read over the cells.

InputTypeDescription
stateObjectThe editor state, its totalW, totalRows, dataX and asciiX fields.

Returns nothing; it draws the frame and separators into the current surface.

const state = { totalW: 10, totalRows: 3, dataX: 3, asciiX: 8 };
const pan = Sprites.Reactive.ReadOnly({ x: 5, y: 1.5 });
Sprites.Ui.Image.Vector(pan, 11, () => {
  Sprites.Image.Draw.FillStyle(Sprites.Media.Binary.White, () => {
    Sprites.Image.Draw.Rectangle(0, 0, 10, 3);
  });
  Sprites.Media.Binary.Frame(state);
});
The frame with the address and ASCII separators.

Sprites.Media.Binary.View Void

Sprites.Media.Binary.View(state, pan, show)

The view: a checkerboard backdrop, then a Vector over it holding the white backdrop, the light grid, the visible rows and the black frame, panned and zoomed by pan and show. A composite over Sprites.Image.Checkerboard and Vector.

InputTypeDescription
stateObjectThe full editor state the view reads.
panSprites.Reactive.ValueA { x, y } value, the world point at the view centre.
showNumber or Sprites.Reactive.ValueThe span, in world units, shown across the smaller axis.

Returns nothing; it builds the whole canvas view.

const binary = Sprites.Reactive.Value(false);
const state = { data: { length: 8, bytes: [72, 105, 33, 0, 65, 66, 67, 68] }, length: 8, width: 4, binary: binary, dataX: 6, dataW: 12, asciiX: 18, asciiW: 4, totalW: 22, totalRows: 2, firstDrawRow: 0, drawCount: 2, isType: false, caret: 0, bitpos: 0, selStart: undefined, selEnd: undefined };
Sprites.Ui.Button.Toggle(binary, 'Toggle view');
const readPan = Sprites.Reactive.ReadOnly({ x: 11, y: 1 });
const pan = Sprites.Reactive.Binding(readPan);
const show = Sprites.Reactive.Value(26);
Sprites.Media.Binary.View(state, pan, show);
The whole hex view over a checkerboard.

Sprites.Media.Binary.Editor Void

Sprites.Media.Binary.Editor(data, thumb, info)

The binary editor. Builds the canvas hex view on the host, the pan and zoom overlays, the touch surface for the drawing tools, and the tool and panel windows, the way the sprite and image editors do. It builds interface and returns nothing; the doc fields it is given are where the edits land.

InputTypeDescription
dataSprites.Reactive.ValueThe doc's blob, a two way value of { length, bytes }.
thumbSprites.Reactive.ValueA value the doc keeps for a listing's preview. Reserved: the blob draws no thumbnail.
infoSprites.Reactive.ValueA value the editor Sets to a short byte count summary on an edit.

Returns nothing; it builds the whole binary editor on the host.

const seed = Sprites.Media.Binary.NewDocument(64);
const data = Sprites.Reactive.Value(seed);
const thumb = Sprites.Reactive.Value('');
const info = Sprites.Reactive.Value('');
Sprites.Media.Binary.Editor(data, thumb, info);
Sprites.Ui.Dom.Text(' info = ', info);
The full binary editor on a fresh sixty four byte blob.