Get the pixel screen size in Spark AR studio (for Facebook)

Question

I am starting to work with Spark AR studio and I looking for to get the screen size in pixel to compare the coordinate obtained by the gesture.location on Tap.

TouchGestures.onTap().subscribe((gesture) => {
  // ! The location is always specified in the screen coordinates
  Diagnostics.log(`Screen touch in pixel = { x:${gesture.location.x}, y: ${gesture.location.y} }`);

  // ????
});

The gesture.location is in pixel (screen coordinate) and would like to compare it with the screen size to determine which side of the screen is touched.

Maybe using the Camera.focalPlane could be a good idea...

Update

I tried two new things to have the screen size:

const CameraInfo = require('CameraInfo');
Diagnostics.log(CameraInfo.previewSize.height.pinLastValue());

const focalPlane = Scene.root.find('Camera').focalPlane;
Diagnostics.log(focalPlane.height.pinLastValue());

But both return 0

score 3 · Answer 1 · answered Sep 17 '19 at 14:25

This answer might be a bit late but it might be a nice addition for people looking for a solution where the values can easily be used in script, I came across this code(not mine, forgot to save a link):

var screen_height = 0;
Scene.root.find('screenCanvas').bounds.height.monitor({fireOnInitialValue: true}).subscribe(function (height) {
    screen_height = height.newValue;
});
var screen_width = 0;
Scene.root.find('screenCanvas').bounds.width.monitor({fireOnInitialValue: true}).subscribe(function (width) {
    screen_width = width.newValue;
});

This worked well for me since I couldn't figure out how to use Diagnostics.log with the data instead of Diagnostics.watch.

1

What is this screenCanvas? – jiawen Nov 19 '19 at 20:32

score 2 · Accepted Answer · edited Jul 11 '19 at 16:05

2

Finally,

Using the Device Info in the Patch Editor and passing these to the script works!

First, add a variable "to script" in the editor:

Then, create that in patch editor:

And you can grab that with this script:

const Patches = require('Patches');
const screenSize = Patches.getPoint2DValue('screenSize');

My mistake was to use Diagnostic.log() to check if my variable worked well.

Instead use Diagnostic.watch():

Diagnostic.watch('screenSize.x', screenSize.x);
Diagnostic.watch('screenSize.y', screenSize.y);

edited Jul 11 '19 at 16:05

JackKalish

1,555
2
15
24

answered Jan 23 '19 at 17:33

Jérémie Boulay

400
4
13

with latest version the api syntax is: const screenSize = await Patches.outputs.getPoint2D('screenSize'); – seekingtheoptimal Dec 21 '21 at 00:33

goretex · Answer 3 · 2019-01-22T03:57:40.423

1

Screen size is available via the Device Info patch output, after dragging it to patch editor from the Scene section.

edited Jan 22 '19 at 03:57

answered Jan 22 '19 at 01:09

goretex

11
2

1

I need to have these values in the script. And I don't succeed to add these to the script. See my last update – Jérémie Boulay Jan 22 '19 at 21:07

score 0 · Answer 4 · answered Oct 15 '19 at 14:54

0

Now in the open beta (as of this post) you can drag Device from the scene sidebar into the patch editor to get a patch that outputs screen size, screen scale, and safe area inserts as well as the self Object. The Device patch

answered Oct 15 '19 at 14:54

Thomas Greenstein

13
2

OLENZILLA · Answer 5 · 2020-02-02T07:30:17.323

The device size can be used in scripts using CameraInfo.previewSize.width and CameraInfo.previewSize.height respectively. For instance, if you wanted to get 2d points representing the min/max points on the screen, this'd do the trick.

const CameraInfo = require('CameraInfo')
const Reactive = require('Reactive')

const min = Reactive.point2d(
  Reactive.val(0),
  Reactive.val(0)
)
const max = Reactive.point2d(
  CameraInfo.previewSize.width,
  CameraInfo.previewSize.height
)

(The point I want to emphasize being that CameraInfo.previewSize.width and CameraInfo.previewSize.height are ScalarSignals, not number literals.)

Edit: Here's a link to the documentation: https://sparkar.facebook.com/ar-studio/learn/documentation/reference/classes/camerainfomodule

Get the pixel screen size in Spark AR studio (for Facebook)

5 Answers5