Displaying Picture in Pepper Tablet Web Page using Javascript Qi SDK - javascript

I'm trying to create a javascript application where it takes the picture using ALPhotoCapture in Pepper and displays the picture as a part of a web page in the Pepper Tablet. I'm able to make the Pepper take the Picture on FrontTactileTouch event and the picture is stored in /home/nao/recordings/cameras/picture.jpg. However, When I'm using the Javascript to load the Picture. The Browser doesn't allow me to show the picture on the tablet. On Googling, I found that browsers don't allow us to load the local pictures on the web page because of security issues. Does Pepper run Chrome Browser?
Just wanted to know if there is any workaround to display the local images in Pepper Tablet Web page. I've come across this ( https://community.ald.softbankrobotics.com/en/forum/display-image-peppers-tablet-8658 ) where They take a picture using Choregraphe and show it in the Tablet. But, this way the picture occupies the whole tablet. I just want the picture to be a part of the web page. Any suggestions are much appreciated.

if your application id srinu634app (be sure that's the actual package id, not just the name), you can save your image to:
/home/nao/.local/share/PackageManager/apps/srinu634app/html/img/photo1.png
... and then, in your project's html folder, you can have an index.html referencing img/photo1.png in an <img> (you could have the robot notify the javascript when an image is taken and what it's name is etc.).
Note that it's also possible to directly get the image data from javascript, without ever creating a file - see here for some discussion of how to do that: https://community.ald.softbankrobotics.com/en/forum/how-appear-naos-camera-view-using-qimessagingjs-webpage-6287
(the use case is a video stream; doing a static image like you do is simpler)

Related

Necklace Mockup Tool in JavaScript does not always work as expected

I am using Shopify and a script located at https://app.cjdropshipping.com/static/shopify/pod/pod.js to generate mockups for a necklace product. You basically need to upload a photo and then it takes it and sends it to the server to generate a front and back side cover.
Well, this script does not always work on mobile.
You can try the mockup tool at https://purfectgifts.com/products/petnecklace as well as analyze it.
It does not always capture the whole area of the uploaded image dimensions and does not put the generated image instead of the original product image.
I need to have this fixed for mobile (iPhone & Android). It works better on Desktop.
I think this issue about the script has to do with how it loads itself...
Please help me out with this. You can make me the happiest person in the world if you can help me with that.
I am not a programmer but I tried to change how the script loads.
I think the issue is about how the script is loaded.
I appended the following code right above the closing body tag:
<script type='text/javascript' async=false defer=false src='https://app.cjdropshipping.com/static/shopify/pod/pod.js'></script>

Check if website is displayed on TV?

If I'm watching my website on my PS4 browser on my TV, the text is very small (probably because the tv is 1920x1080) - but I actually want it to format, as if it was on mobile (filling the whole screen to be readable from my sofa).
Is there a way to check if the website is displayed on a tv-screen?
(It could be through chromecast as well)
You could check for a special user agent in your TV's browser by going to a page like this (http://mybrowserinfo.com/detail.asp).
Then you can use the data-useragent and data-platform attributes to selectively apply CSS (see an example here: https://css-tricks.com/snippets/javascript/add-data-attribute-of-user-agent/).

Convert interactive flash animation to javascript to use in html5

Hi,
I have a banner on my site made in flash. Its an animation that ends with a sequence showing buttons which the user can click to navigate to inner pages. Since flash seems to be dead soon I would like to replace that with html5 friendly code. Is it possible to have a program such as Adobe Flash CS5 to convert the full movie for me into javascript code? Or I have to write the javascript all by myself from scratch?
Thank you.
You can use Flash CC to publish you flash file into HTML canvas base structure. Steps -
Open file in Flash CC select commands->Convert to other Documents.
Folder Select HTML 5 Canvas from Dropdown and press OK. Now open
newly created Flash file and publish. It will give you the canvas
base html file.
The html and javascript you get is in organized format and you can even edit code as well.
Hope it solve your problem.

Dropzone.js no longer uploading multiple imgs to website on Android

Up until about a couple weeks ago, my web app was working great on desktop and mobile, using dropzone.js as a drag and drop means of uploading images. Now suddenly on my Android device things have changed.
When it was working:
Member hit the upload button and was prompted to select which app to use to select the images for upload. Typically default app was "Gallery" which doesn't allow for multiple selections, but when Google Photos was selected, multiple images could be selected and all images selected would upload. With a tool tip I was able to advise users on Android to use Google Photos vice Gallery.
Now
Same scenario, including being able to select multiple images to upload. However, when the "Done" button is pressed to initiate the upload, only the first image selected uploads.
Multiple uploads work as expected on desktop and iOS but for whatever reason something has changed with Android and/or Google Photos that for the life of me I can't figure out.
fiddle
For those of you willing to take the time to help out, please try it on both your desk top and Android device to see the difference in behavior.
Also note that the .js included with the fiddle is for reference only and is being driven by the same file externally.
Please note the above fiddle doesn't actually upload the images anywhere, but it is the exact behavior I am having issues with. The upload part of the script and db management is separate from this issue.
The actual structure when all located together is to have the following script:
<script src="js/dropzone.js"></script>
Thanks
Here is what I tried
I've updated a bit the code.
https://jsfiddle.net/_jserodio/dgq50zc3/10/
Here is what I tested
In Android 5.0 it works with Google Chrome.
But It didn't work with Firefox and/or Lightning browser.
It's not supported for Android 4.x and bellow
http://caniuse.com/#feat=input-file-multiple

Embedding .rh 3d models in html for interactive display

I have to embed the 3D models (format: right hemisphere) in the HTML page (WebHelp). The 3D player has to be embedded in the page/browser, rather than being a pop-up page.
In other words, to act like a YouTube video player embedded in the HTML page, showing a lightweight splash screen or multimedia thumbnail, that you can turn into full screen.
I am not able to follow on how to use the SAP VisualEnterpriseViewer to accomplish this. Otherwise, can we use javascript for this purpose? I know that jsc3d does not support .rh format yet.
Please help.
Thanks
No one can support .rh format, except RH/SAP. It is a closed, proprietary format. And forget about html5, canvas, webgl etc. These are too open, SAP / RH have traditionally created data silos rather than working off of open standards.
SAP VEV , formerly DeepView, does have a complete JS interface. The viewer doesn't have to be a popup. Look in the docs, you can embed the viewer in a page, and disable all the menus etc through appropriate javascript calls. The docs are distributed with the viewer sdk, however it is getting rather hard to come by now. Also helpful, and included with the docs, are examples.

Categories