Exhibit Kiosk

[mnarlock]

Hello,

I'm trying to develop a standalone app that would, in practice, present as two screens. One screen would have buttons or sliders that when pressed or when the slider is at a certain value would play videos on the second screen. I'm really at a loss for how to even start. Ideally this app would run on one PC and have two screens attached.

Any suggestions or links to relevant tutorials?

Much thanks!

[Robert Mc Dowell]

Maybe this can help

Building a kiosk using Flex | Adobe Developer Connection

[rayek.elfin]

You have three options:

1. run two separate applications which talk to each-other via a localhost network.
2. run the application full screen over the two screens. Both screens must ideally be identical.
3. run two separate windows of the same app.

Option (3) is not always supported by the authoring environment. I am unsure about Flex, but I do know that Unity does support this. Unity can create up to 8 different viewports, each displayed on its own screen, if required. Unity is free, and with the (commercial) PlayMaker plugin, you don't even need to learn (much) programming for this basic sounding kiosk application.

Unity - Manual: Multi-display

(1) is pretty simple to achieve in any authoring environment, such as Godot, Unity, ...

(1) is a good option in general as well. It does mean you will have to write the code for both apps to 'talk' to each-other, and it can get complex, but luckily in your case it seems pretty basic interaction behaviour.

Personally I think the localhost networking option is the most flexible solution. It would also allow you to control things even via a mobile device.

[mnarlock]

I'm going with #1...or trying to. I'm doing win projector instances of two apps that use localconnection. It's not working yet, however. In one instance I have two test buttons called "rain" and "snow." Ideally I'd like to click a button and have it send a message to the other win projector that would play a corresponding video. So, for instance, clicking the "rain" button sends a message to the other win projector to play the "rain" video.

I have this actionscript:

import flash.net.LocalConnection;

import flash.events.MouseEvent;

var send_lc:LocalConnection = new LocalConnection();

rain.addEventListener(MouseEvent.CLICK, send_lc.send("_connection1","rain"));

snow.addEventListener(MouseEvent.CLICK, send_lc.send("_connection1","snow"));

But I'm really not sure how to listen and execute the proper videos on the second win projector. Any thoughts?

[JoãoCésar]

Hi.

if you want two screens in the same PC, I think it's better for you to create another native window. It's way easier to establish a communication between them.

Because all you need to do is to access the stage property of each one and then proceed like you would with a regular single window app.

In this example, I start with the videos in the main window, but I immediately send them both to the new window using stage.addChild.

If you want to work with two separate FLAs, you can create all stuff that belongs to the second window in a second FLA and then load the SWF of this second FLA in the second window. I hope this makes sense.

AS3 code:

import flash.display.NativeWindow;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowSystemChrome;
import flash.display.NativeWindowType;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
var mainWindow:NativeWindow;
var newWindow:NativeWindow;
var rainPlaying:Boolean = false;
var snowPlaying:Boolean = false;
function start():void
{
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    mainWindow = stage.nativeWindow;
    createNewWindow(960, 540, "library", 0x131313);   
    newWindow.activate();
    rainVideo.scaleX = rainVideo.scaleY = 2;
    snowVideo.scaleX = snowVideo.scaleY = 2;
    rainVideo.x = newWindow.stage.stageWidth * 0.25 - rainVideo.width * 0.5;
    rainVideo.y = (newWindow.stage.stageHeight - rainVideo.height) * 0.5;
    snowVideo.x = newWindow.stage.stageWidth * 0.75 - snowVideo.width * 0.5;
    snowVideo.y = (newWindow.stage.stageHeight - snowVideo.height) * 0.5;
    newWindow.stage.addChild(rainVideo);
    newWindow.stage.addChild(snowVideo);
    rainButton.y = stage.stageHeight * 0.5;
    snowButton.y = stage.stageHeight * 0.5;
    rainButton.addEventListener(MouseEvent.CLICK, playRain);
    snowButton.addEventListener(MouseEvent.CLICK, playSnow);
}
function playRain(e:MouseEvent):void
{
    if (rainPlaying)
        rainVideo.stop();
    else
        rainVideo.play();
    rainPlaying = !rainPlaying;
}
function playSnow(e:MouseEvent):void
{
    if (snowPlaying)
        snowVideo.stop();
    else
        snowVideo.play();
    snowPlaying = !snowPlaying;
}
function createNewWindow(w:uint, h:uint, title:String = "window", color:uint = 0xffffff):void
{
    var options:NativeWindowInitOptions = new NativeWindowInitOptions();
    options.transparent = false;
    options.systemChrome = NativeWindowSystemChrome.STANDARD;
    options.type = NativeWindowType.NORMAL;
    newWindow = new NativeWindow(options);
    newWindow.title = title;
    newWindow.width = w;
    newWindow.height = h;
    newWindow.stage.color = color;
    newWindow.stage.align = StageAlign.TOP_LEFT;
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;   
}
start();

FLA download:

animate_cc_as3_two_screens.zip - Google Drive

If you're interested, here is a more advanced example:
Re: Adobe AIR desktop native windows drag and drop

Regards,

JC

[mnarlock]

Wow! Thanks very kindly for your response and efforts. The intent is for the videos to play fullscreen on the second monitor, but I think I can get that to work. One thing I was intending on doing is to publish these as win projectors. I tried that with the fla you provided and so far haven't been able to get it to run...seems like it crashes. I'll maybe do a reboot and see if that solves the issue. When do a debug, however, everything works wonderfully.

[JoãoCésar]

Nice! You're welcome!

Because this is an AIR for desktop app, you're gonna need to generate/publish the AIR output first before trying to use it outside of Animate CC.

Please let me know if you find any difficulty in running the second window in full screen.

Regards,

JC

[mnarlock]

I think I got it run as expected...though I'm not quite sure and now that I'm looking at it, I don't know if AIR is the right approach. I need to make the windows fullscreen so that the app can be used as a kiosk and people won't be able to close out of it. So far, the windows that open up have the controls on top. I also, weirdly, am not able to see any of the videos. In an ideal world, this kiosk project would have interactive buttons and such on one screen which allow them to adjust humidity, temperature, etc by using sliders or buttons. The other screen would be black with select video vignettes playing as certain buttons are pushed. A few years ago I cobbled something together using localconnection and, I think, just regular flash/actionscript 3. Of course, those files have now gone missing so I'm trying to recreate it all from memory.