Develop Reference

Sites controlled with mobile phone?

I'ts not a coding question so apologies if this is in the wrong forum, but how do sites such as https://lightsaber.withgoogle.com/ work? How does the site know the user is on the page with their phone? I've seen a few of these as of late and I'm at a loss as too how they're built...

It's not a coding question, you pointed it right.
But this is just what we can call Real time web, featuring technologies as NodeJS, Socket.io, etc. I played with this for fun, but I don't know any other technologies that offers the same features (there are some, it's just I don't know).
How does it work ?
Let's consider a webpage with 2 views : desktop and mobile (whatever the way the "mobile version" is rendered)
You connect your mobile to it (on the same url, or nearly the same, with some params to identify the mobile as current user's one). On the light saber game, note that it generates a custom URL to identify the user on desktop and the user on mobile as the same user.
When you visit the page with your mobile with that URL, Web API lets you use some features like Device Orientation (so the page can see how your mobile is positionned, for example)
Then, the mobile viewsend those events (mobile orientation) to the desktop view to update the way its rendered (light saber more on left, or whatever).
To go a bit deeper :
Mobile view emits events containing the current mobile x,y,z (this coordinates are relative to the event start. e.g. On page load, x = 0, y = 0, z = 0, whatever the device position) each time the device position changes, captured by the server.
The server is listening for those events, and each time it gets one, emit another event (with some trasformation, why not ?) which this time is captured by the desktop view which apply the changes with new values.
So basically, the Google light saber exeprience can be see like this :
Mobile (send position x,y,z) --> Server (get mobile position and broadcast it) --> Desktop (get mobile position from server and apply changes on the view)
I talked about Node and Socket.io because it makes this kind of experience really simple. I mean: really.

This has to do with the link that the page offers. The first person who navigates to the generated link with their mobile phone is the one the site is going to "connect" with.
When you visit the generated link with your phone, that (mobile) page sends a signal to the original page (by some means, like with websockets or just database fiddling) which generated the link, that someone has navigated to the generated link with their phone. After that it's just the matter of what to do next.
Simplified:
Have some page A generate a link to a page B
Make page A wait until generated page B signals that someone has navigated to it
Make page A (and B) do something

Is there a way to control browser size and position across multiple displays / monitors?

Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors

Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.

You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.

Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.

Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)

I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.

What is the right way to open titanium appcelerator windows?

I am working on a Titanium Appcelerator iOS app that contains an initial Dashboard screen and 2 separate screens that can be accessed from the Dashboard.
I have set up my app to use a navigation controller and everything is controlled from a main.js file using custom event listeners. I do this so that I can separate the code for each screen into separate files.
The problem is that with each screen that loads, I have to open the window on the nav stack and then add all the elements to it. This is fine for one of the screens because it just contains a few views and labels. However, the other screen has a MapView and it takes 3 seconds or so to load after the user sees the screen open.
What is the right way to handle this? Is there a way to preload the window before opening but to keep my current architecture?
I asked this question in a much more confusing and specific way, here but I think that this general question is applicable to more people as the architecture style I am using is fairly common.

I think your approach is fairly typical...unfortunately I don't know of any way to preload the content of your window. You may be able to improve the user experience as the map view loads by including a static image of the map canvas (in the same way Apple's UI guidelines recommend that the Default.png be an image of the app itself's basic interface to give the impression that it's loading quickly). You can also add a loading spinner in the form of a Ti.UI.ActivityIndicator. Both of these can be added by default to the window, then hidden as you show the map on the map view's load event. I think they'd probably help make that 3 second wait seem less painful.
I noticed in your other post that you observed the map still took a long time to load even when you weren't actively getting the user's GPS location. While true, you might be able to save some time by getting the location immediately upon app launch, then passing it to your map window with the custom event you're using, so the map could then be initialized directly on the user's location, rather than a dummy location.

for the navigation controller i started using https://github.com/vuinguyen/NavController
it works very well for ios/android and the git code was straight forward and easy to follow. its an enhanced version of the one Kevin Whinnery put out quite some time ago. I have been using it in 3.0 without any specific complaints. I've added the ability to suppress native ios navigation headers but aside from that it dropped right in.

I don't think so using the exact same architecture. Upon initial load of the app, you could load all your views within one window, instead of using multiple windows. Then, modify the one that is currently being shown by altering the zIndexes

Printscreen function desired from web control on browser

All,
I have a requirement to enable users of our web page to download jpeg images of the Bing maps that we have put on our forest fire simulation dot net aspx web page. The page in question presently displays a Bing map and up to 96 shapes in as many layers which can take up to 20 seconds to load completely. I could put all these shapes on one layer if it would help - but I an not sure that it would and I thought I would ask here first.
Apparently, any "complicated" client side actions (like ALT-print screen, print from the web page, mwsnap3, or other third party solutions) will not suffice, so I am told to implement a button on the page that will download (or make available) a jpeg image document/image when it is pressed on the page.
I started with a great thread at Convert webpage to image from ASP.NET. ,which is really close to what I want, but the page gets rendered on the browser.ReadyState != WebBrowserReadyState.Complete transition, which fires off before my shapes are loaded on the Bing canvas. I tried to render the page on the DocumentTitleChanged event (and then tried to change the title when my shaped completed loading), but this did not work either.
I tried to force the "Print screen" character with javascript (see Is it possible to simulate key press events programmatically?), but this translated into a comma (decimal 44) and did not work as expected.
I also see that HTLM5 has some support for this ( http://www.nihilogic.dk/labs/canvas2image ) but while this worked in FireFox, it did not work in IE, which is the browser of choice. I also want to run this on mobile devices, which might not support HTML5 for some time either.
I have a few questions:
1 - Is there another (simple) way to print the contents of the web page that I am missing?
2 - Is there some other WebBrowser event that I can fire that will make more sense)?
3 - Would it help if I stated with some other control then put the maps and shapes on this control for subsequent printing?
4 - Does this go against the grain of web browsing and is just a bad idea (seems that if I can force a 'print screen' then evil web sites could force a Ctrl-Alt-Delete button sequence)?
Thanks - Steve

It might not be an approach you want to do as it will require you to repeat alot of the functionality you already have in a different way but the only truely full proof way to do this is to get the map as an image from the bing maps static imagery service and use GDI+ to draw onto the map yourself then just serve that image direct to the user. Gets round any browser issues but a fair amount of work depending on your requirements:
http://rbrundritt.wordpress.com/2009/02/22/drawing-routes-with-the-ve-web-service/

Good JS lib to take screenshot of the screen

I want my users to be able to take a screenshot of the webpage (or me defining the size of the screenshot) and then allowing them to save it to their computer.
Does anyone know of a good JS lib that allows you to do this?
I know there are addons for the browser, but i wanted something pure JS so that the user can just click in a button and a "save as" link apears with a screenshot of what they are looking at.
Thanks for the help.
/fmsf

Browsers don't expose APIs that allow this to web pages, so there is no way to achieve this using plain JavaScript running in a page.
The only way to achieve this would be to have screen grabs prepared on the server, and a normal download link pointing to the appropriate one.

This can't be done in JavaScript. Taking screen shots outside the current document/domain is a potential security problem and is not possible. See my question about getting the pixel colour from the current mouse position for more background.
If you need to transmit the screen shots onto your server, look into external applications that interact with your web site. Open-source bug tracker Mantis for example has a screenshot application for Windows.
If the screenshot and the saving of the file are both to take place on the client computer, check out Fireshot for Firefox. It doesn't seem to offer any interaction capabilities with a pre-defined web site but may be the right tool for your users.

HTML2Canvas (http://html2canvas.hertzen.com/) recreates the rendered HTML into a canvas. And you can save the canvas as an image. That could do the trick, although it's not 100% accurate (and for good reasons - that would open security holes in browsers if that was possible, see https://stackoverflow.com/a/1936084/1333479).