Embed Google PhotoSphere (gapi.panoembed) using image NOT hosted on Google servers - javascript

Google has made it pretty easy to embed 360-degree panaroma shots (called "PhotoSpheres") from Android phones directly onto your own website through the plusone.js api
A very basic example is:
<html>
<head>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<body>
<g:panoembed imageurl="https://lh5.googleusercontent.com/-kr97Eucg6sM/UKGEuvo_eBI/AAAAAAAAi0s/adq8uqyhm_k/photo.jpg" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="600,400"/>
<script>
gapi.panoembed.go();
</script>
</body>
</html>
However, this ONLY seems to work if the image passed in imageurl is hosted in Google+. Is there a way to use these images without first giving the image to Google? I take the panorama on my Android phone and can view the 360-degree magic on my device with no problem. I copy the image off my device and upload it to my web server, however if I link to my own copy of the image, the "magic Google stuff" does not happen. If I then upload the image to Google+ and then view it and get the URL and paste that in...then it works perfectly. I would sure like to skip the Google+ step and just use my images without giving them to Google.
Any idea how to get this working on images that are not Google hosted?

This project on github might be what you are looking for:
Photosphere - Github

If you use AngularJs, I developed a small directive right here : https://github.com/Gullfaxi171/angular-photosphere-directive
you'll just have to type :
<photosphere src="path/img.jpg"></photosphere>
in your HTML

Related

Azure Maps Template animation not working

I'm trying to use this template but the animation doesnt quite work. eveything is being plotted but after clicking "play" it doesn't move.
The only thing i changed was the subscriptionKey
https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Animations/Animate%20along%20a%20path.html
enter image description here
If you are running the example on a local computer or on the server, you have to include the js library of the animations
<script src = "../ Common / scripts / azure-maps-animations.min.js"> </script>
source javascript

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>

Displaying Picture in Pepper Tablet Web Page using Javascript Qi SDK

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)

PowerPoint presentation in web Browser without using Google Docs

I trying to display my ppt for long time where the screen should run continuously in web page without using Google Docs or Skype Drive where the ppt file and html page is in my local folder but it is not showing in web page. The code is below :
<!DOCTYPE html>
<html>
<body>
<iframe src="lp.ppt" width="800px" heigt="600px" name="iframe_a"></iframe>
</body>
</html>
can anyone help to display ppt in html page.
I'd recommend the official View Office documents online
For embedding you can simply use code like below:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src={urlencode(site-to-ppt)}' width='962px' height='565px' frameborder='0'></iframe>

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

Categories