Webapp in 2 monitors - javascript

I am trying to find a way how to build a browser web app that runs in 2 monitors, like;
i have a secondary monitor that i want to put there some window, i want it fullscreen, and automatically in the secondary, so no drags, while the main app should stay in the primary monitor, where is the browser... no way seems, nothing really works so the only way seems to be with some desktop app.
I don't really care if the solution is browser dependent at this point, but still can't find a real solution.
Does a ny body tried something like this and can give me some ideas how to build it?
EDIT
... i need the second monitor to have some specific content, so not a clone of the primary...
kind of... i'm playing some game in the first monitor and i see statistics on the second...

What you are trying to do is not possible yet, but there is a Presentation API that is being discussed that would let you do exactly what you are looking for:
This specification defines an API to enable web content to access external presentation-type displays and use them for presenting web content.
Unfortunately, it seems like there are no browser implementations yet.
Your only other option right now is to use 2 independent browser pages that communicate with each other somehow (LocalStorage, WebSockets etc.).

Related

web app- Would it be possible to disable Windows+Printscreen?

I am trying to prevent users from taking screenshot in my web application written in Java.From my research,it seems highly unlikely.I did found a link below:
https://stackoverflow.com/questions/3130983/stop-user-from-using-print-scrn-printscreen-key-of-the-keyboard-for-any-we
It's able to disable the printscreen button but it doesn't disable if a user tries to use windows+printscreen.Now, I know even if I do managed to disable it, there's other third party application like snipping tools,camera,etc to take a screenshot but that's way beyond my control and I'm not looking into those.
I was just wondering is there a way to disable Win+Printscreen to prevent user from screenshotting?
If anyone has done it before, I appreciate any sort of suggestion.
Simple answer: No
Have a quick think about why you need to hide this info, does it really matter if other people see it? I assume that you have proof that you came up with your conclusion/process first? The information will never remain exclusive forever, especially not on the internet.
You normally do not have access to higher level controls so it is normally not possible with a web app. Having said that, there are several possible ideas:
Send your content directly to the graphics device/card via an API so that it is never visible to the operating system screen space (Where print screen works). However, with the right tools it is still possible to catch a graphics stream but it's a little harder for the average user.
Make your webapp launch a custom desktop application with more control over the OS (Download an exe and run it?)
Design a plugin/extension for a web browser that limits the use of printScreen, and then only show content on your webapp if your site can see that the plugin/extension is installed and running. This may not work with the way that Chrome and Firefox now manage plugins, it would need more investigation.
The best answer would be to only show limited info/conclusions on your webapp, and keep all the proof of concept hidden. Then you can make people sign-up to your app if they want more information, and then give a strict set of criteria that must be met.

Communicating two or more browser tabs, which could be the best method?

I want to design a small (at least, the very basics for now) IDE to make websites and applications with HTML, CSS, Javascript and a full LAMP stack.
One of the things I would like to do is to be able to open the preview window in a different browser tab (instead of having it in an HTML-encoded tab (a <div> element or similar), like Dreamweaver does) or even, while in source mode, being able to display the toolset in another browser tab and displace this tab onto a second display (or even a third one, although I have just one display, but it's for illustrating my situation).
Once deployed in another browser tab, I want for every browser tab to reflect any changes done to any of the other browser tabs.
For example, if I have the source view in one display and open the properties grid in another and I change a color input value, I want the output view to reflect this change in color for whichever component gets the update.
I have my mind quite clear on how to approach the data structures, how to do the preview, data caching, storing the project data, etc.
What I don't have that clear is how to effectively communicate the tabs between them. One idea is to use a combination of AJAX requests and server-sent events (SSEs) to communicate but, even if that could work, looks like crude to me.
I was thinking on something like websockets with message passing. I could encode any changes in a given component, send them to the server and have it route to the appropiate listeners for each one of them to reflect any change locally.
I have very litte experience with websockets, though... so I'm in doubt. Can you give me a hint on what could be the most efficient method here?
I've experimented recently with WebSockets, in combination Java on Server and JavaScript on client side. First wanted to go with simple Java SE, had a nightmare, didn't succeed to make it work and at end the found this tutorial:
https://blog.idrsolutions.com/2013/12/websockets-an-introduction/
Works like charm. Just stick with environment mentioned there - Java EE, GlassFish, NetBeans... Not saying that NetBeans is best IDE or something...
Of course, there is NodeJS option for back-end if you preffer JavaScript.
But generally speaking WebSockets works...and works well. :)

Take a screenshot of whole screen using html5/javascript?

I am looking to take a full screenshot through a webpage, outside of the browser window. Basically, I am trying to build a help tool for both web-based apps and offline programs, and as a part of this I would like to be able to take screenshots from a webpage so the user does not have to download a program to take a screenshot/upload it to our website.
I am aware there may not be a solution to this, but if there was that would be awesome!
Cheers in advance
There are ways to achieve what you want to do in part. However, it is important to know that they do require user permissions.
You also ask if a web page can take a screenshot outside of a browser window- this is a huge breach of privacy and I would advise against implementing anything that goes down this route. For what your trying to do, it is always best to have user consent.
If you interest is in saving the user time and giving the user a more seamless experience, consider one or more of these options:
You can use one of several JavaScript plugins/ API's to allow to user to select portions of what they see on the web page and then upload it to you. For instance, you can do this on YouTube. Go to youtube.com and scroll to the bottom of the page and click Help and then Send feedback. Here you can enter text as well as "highlight" portions of the page and send them to YouTube. To achieve something like this, look into something like html2canvas.
Give your user quick access to the download pages for tools like Snipping Tool for Windows. This way, if they don't have it on their machine already, at least they don't have to go looking for it.
From my experience in dealing with customers, many of them don't even know that things like Snipping Tool exist on their machine. Perhaps, an FAQ or help section that would guide the user would be useful.
In summary, it is possible through a web page to "screenshot" what is on a web page itself but nothing I have come across that allows you to capture anything outside of the web browsers context.
This is definitively not possible using only HTML5/JavaScript. You would have to involve a browser plugin such as Flash, a Java applet or perhaps a Firefox add-on.
Note: I'm assuming you mean taking a screenshot of the entire monitor, not just the browser window.

Getting multiple pages talking to each other

I am coding a Web app that needs to have multiple tabs/Web pages open. And I would like them to talk to each other. And I don't want the pages to talk to the server. So is it possible with HTML5/JS? By the way they are all on the same domain name.
I've never come across a webapp which used the browsers tab functionality as a means of navigating. I don't want to say it's wrong, because I don't know your particular requirements and, of course, I haven't played with every single webapp in the world.
However, would it not make more sense to implement your own tabbing system within your web app than rely on a feature of the browser which is probably inconsistently implemented and which may be affected by the user's personal settings?
If you're set on this path, and offline functionality is a definite requirement, then I think your only option is using the LocalConnection feature of Flash, as Brad suggests in the comments. I imagine you could create a bridge with ExternalInterface to pass any data from Flash to the page. The Flash would need do nothing else but marshal the communications (it could occupy a single pixel somewhere on the page). This is a similar approach to the one the dojotookit took with their Flash storage, designed to provide a more capable alternative to cookies.
I think the answer here is that what happens in the view, doesn't have to reveal whats happening behind the scenes.
You can make DOM elements on a page communicate with other DOM elements on the page without making a asynchronous call to the server if thats what you're asking.
If you have two tabs in the.. lets say chrome browser, and you want one DOM element to talk to another DOM element on a completely different browser tab. You have to make that asynchronous call to the server which will shoot one back to the other tab. But you don't have to show that happening in the view :) (This can be done with Node.JS/Socket.io, an example would be a chat room built with HTML5/JS)
Hope this helps
I know this is an older post, but you may want to look into local storage, or even cookies set via javascript.
There are 2 reliable ways you can have pages in other tabs (or across iframes) talk to each other.
The postMessage API allows pages to send messages even when they are on different domains. There are some security issues to be aware of to avoid malicious behavior. You can read about that in the linked article.
localStorage and sessionStorage will dispatch a "storage" event when they are changed. Using this event you can be notified in other tabs when the data has changed. This only works within the same domain. Because this is all you need, it might be the wiser option to avoid any security issues.

Where should a javascript developer start to create a desktop browser?

I have a project where I need to create a desktop app that acts like a browser, however, I need to be able to execute my own css and javascript on ANY page that a user goes to. The goal is to have a user be able to browse to a website, and then click on certain elements of the site and quickly pull information regarding that element (divID, classes, etc), then add some javascript inside the browser that will add some new functionality to the page (though only in the browser). I'll also need to sync this desktop app up to both an internal database as well as connect to a remote database online.
I'm a javascript developer, and so I really want to be able to use jquery to help build out the interaction with the site. I've played around with adobe air, and was able to build a browser using flex, but then I wasn't able to use jquery to manipulate the pages (maybe there's a way, but I don't know flex at all, and I couldn't figure it out and didn't want to waste too much time to discover that I couldn't do it). I then tried to create an HTML air app and have the browser essentially be an iframe. However, the cross domain scripting became an issue, and I don't think that the iframe sandBox solution is what I'm after because that looks like I would need to create a local version for each page that is browsed to, and then alter that local version.
So, I'm back to square one and am trying to find what technology I should be looking at where I can add my own javascript and css to a page within a browser? I'm familiar with javascript and PHP, but this will be my first desktop app. I'm willing to learn a new technology though I obviously want to be able to stick to what I'm most familiar with. I've thought about building a firefox plugin, but I'm hoping to sell this app, and I think a stand alone app would allow for a higher price tag.
Try Adobe Air. It's cross platform, has the ability to create "real" apps, can load and process HTML and CSS (has webkit built in), and allows for the creation of applications using HTML/CSS/JavaScript. If you're looking for something more freedom loving, check out Titanium, which is a similar framework.

Categories