Sprites.Ui.Touch
Pointer input surfaces. A surface is a transparent overlay over a frame that reports where the pointer is, through values the caller holds.
Sprites.Ui.Touch.Pixels Void
Sprites.Ui.Touch.Pixels(active, out)
A pointer surface over the frame, present only while active. It fills the frame above its content and reports through the values in out: over while the pointer is on the surface, down while a button is held, and at for the pointer position in element pixels, measured from the top left. A press captures the pointer, so a drag keeps reporting while the button stays down, even past the edge of the frame.
| Input | Type | Description |
|---|---|---|
active | Boolean, Sprites.Reactive.Value or Function | Shows the surface while true. |
out | Object | The values to write, each optional: over (Boolean value), down (Boolean value) and at (value of { x, y } in element pixels). |
Returns nothing.
const over = Sprites.Reactive.Value(false);
const down = Sprites.Reactive.Value(false);
const at = Sprites.Reactive.Value({ x: 0, y: 0 });
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Class('image-frame');
Sprites.Ui.Dom.Style('width', '100%');
Sprites.Ui.Dom.Style('height', '160px');
Sprites.Ui.Content.Text('Move the pointer here.');
Sprites.Ui.Touch.Pixels(true, { over, down, at });
});
Sprites.Ui.Content.Text(() => {
const p = Sprites.Reactive.Get(at);
return 'over ' + Sprites.Reactive.Get(over) +
' · down ' + Sprites.Reactive.Get(down) +
' · at ' + Math.round(p.x) + ', ' + Math.round(p.y);
});Sprites.Ui.Touch.Scaled Void
Sprites.Ui.Touch.Scaled(active, pan, show, out)
The same surface, but at is reported in drawing units. pan and show are the same pair a Vector draws with, so the mapping is the inverse of its view: the smaller axis spans show units around pan, and a reading lands on the same drawing unit an element drawn there would sit on. Place it over a Vector on the same frame to read the pointer in the coordinates the drawing uses.
| Input | Type | Description |
|---|---|---|
active | Boolean, Sprites.Reactive.Value or Function | Shows the surface while true. |
pan | Sprites.Reactive.Value, Function or { x, y } | The centre point in drawing units, the same pan the Vector uses. |
show | Number, Sprites.Reactive.Value or Function | The units shown across the smaller axis, the same show the Vector uses. |
out | Object | The values to write, each optional: over (Boolean value), down (Boolean value) and at (value of { x, y } in drawing units). |
Returns nothing.
const pan = { x: 16, y: 16 };
const show = 32;
const at = Sprites.Reactive.Value({ x: 16, y: 16 });
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Class('image-frame');
Sprites.Ui.Dom.Style('width', '100%');
Sprites.Ui.Dom.Style('height', '160px');
Sprites.Ui.Image.Vector(pan, show, () => {
Sprites.Image.FillStyle('#93c5fd', () => {
Sprites.Image.Circle(() => Sprites.Reactive.Get(at).x, () => Sprites.Reactive.Get(at).y, 2);
});
});
Sprites.Ui.Touch.Scaled(true, pan, show, { at });
});
Sprites.Ui.Content.Text(() => {
const p = Sprites.Reactive.Get(at);
return 'at ' + p.x.toFixed(1) + ', ' + p.y.toFixed(1);
});