Screen share Pepper's tablet - javascript

How can I share the screen of Pepper's tablet? I wish to show the content displayed on the tablet on a projector so that it is engaging a larger audience. Is there any way to access it using the Java or Python SDK?

Yes, I often do that.
One way of doing so in NAOqi 2.5:
Make a webpage for your tablet content, formatted so that it looks good both on Pepper's tablet and in a browser window (so you need to use responsive design). See this, for example, on how to build a project with a basic webpage.
Store your state on the robot-side, e.g. in a python script / service; and the webpage should just be a watcher of that state (e.g. subscribe to a signal on a service, or to an ALMemory key). If you have buttons on the webpage, they should not directly change the display, but rather notify the python, which will in turn update the state which will update the webpage.
When running the application, display it on the tablet on usual AND with a web browser, open http://your-robots-ip/apps/your-app-id/, and put it in full sceen.
Et voilà! You should have a nice synchronized display on the tablet and the screen!

Related

Force a maximized window on user's machine?

Tech using: JS, jQuery, CSS3, HTML5, and Anguler(4+).
User's system is usually a Windows machine running 2 monitors.
Is there a way to programmatically force maximized window on the user's machine and one further force it across multiple monitors?
The only thing that is coming to my mind is somehow grabs the user's monitor size or monitors size.
The users (a certain set of people) for this Web App - want it to take up the entire screen views.
It's user's responsibility to resize browser window to the appropriate size. A regular window (not a pop-up that was opened with window.open, as another answer explains) cannot be controlled by a website because a website doesn't own this window - there may be other tabs in this window that are equal in rights.
The users (a certain set of people) for this Web App - want it to take up the entire screen views.
A desktop application (Electron or NW.js) may be considered to provide required UX for for this set of people. In its most simple form it can be just a wrapper for a website with necessary usability improvements.
You cannot resize a main windows, only for dynamic created windows
Only if you created it with window.open
:You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
If you have used window.open , you can always try this :
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
it might works depends on browser but as a personal experience , forcing user to resize is not always good

Browsing VR websites in full screen stereoscopic view

I'm creating a virtual reality website and was wondering how could one make visitors browse from one VR website (A) in full screen stereoscopic view to another VR website (B), without exiting full screen stereoscopic view ? Is it even possible ?
This is how I imagine the "VR" web would look like, but I might be wrong.
Thank you.
In current experimental implementations of the webvr API (https://webvr.info), any website can always call requestPresent to enter VR mode if a headset is available. This is still far from providing a good link traversal experience. A website needs to know what headset was previously used to push the content appropriatley. A set of events have been recently defined for this purpose but are not still completely implemented by browsers. Additional specifications might be needed to define how browsers should behave when traversing links: How do you communicate the user you changed URL? How are content or HTTP errors notified? What is it displayed in the headset when you leave a site and the new one is still loading? Some discusion is happening here: https://github.com/w3c/webvr/issues/69

How to run a WebView in the background on Android?

I need to keep a WebView open in the background of my Android app so that I can move between pages and execute javascript. I need to be able to change activities without affecting the WebView. Occasionally I will bring it to the front but otherwise I need to maintain the same session without ever showing it. What's the best way to do this?
I'd suggest using an activity that have your web view and show your screens as fragments

How to create a web page with CSS and JS so it acts like UITabBar (framework?)

So we've decided to create a down and dirty Android version to a working iOS app.
Since we don't code in Java and resources are limited, we thought of creating a responsive web version of the app, that emulates the app's environment more or less, but keeps most of the functionality.
I should note that we haven't programmed responsive web pages before. we know there are media queries and functionalities for many different devices, though.
The idea was to create an Android app that uses a webView which is hardcoded to be a responsive web page. To the user we hope the result should be app-like.
We need the screen to look like this:
so that when the user presses A - the A screen would show, and when B is pressed, B is shown.
A shows a scrollable list of items
B shows a some buttons, pressing these buttons would change a value that is sent via a web reuest.
We need something to help us come up with buttons, presses, screen resizing, events fired...
Is there any framework that we can use to accomplish a task like this?
I was thinking of using jQuery, changing the visibility of the <div>s for the main screen. Of course it would take a graphic designer to make these buttons, and writing it all.
But is there any framework that is made for this? (We need the code!).
there will also be requests that are sent to the server and responses will be in JSON, so display A can be populated accordingly.
We need an answer that would target us to a solution that fulfills this functionality so we can go ahead and code the rest of the project.
Thanks!
Have a look at Ionic, it's a framework that would be ideal for this purpose. http://ionicframework.com/
Once installed, you can use their cli tool to generate an app with an empty tabbed based application like so: ionic start {appName} tabs.
After you've completed your app you can run ionic build android to build the app.

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

Categories

Resources