App made with Hype (and not only)


(Freelancer) #1

Hi to everyone

I’ve released a free app for Android ( soon available also for iPad) made with Hype (XDK > android & Cordova/Xcode >IOS)
I used also some other things like some 3d panoramas and so on.
This is our first project made in HTML5/CSS, normally we work on IOS only.

Available in Google Play in English and Italian, about 45mb ( less in IOS version)

Regards


VR Panoramas in Hype
Introducing HypeDocks, a new resource :smile:
Welcome on board! Please introduce yourself 🖐
(Greg) #2

Looks great, well done.


(kerguelen) #3

Looks gorgeous !
How do you implement the 360° panorama and the 3D object manipulating tool ?


(Freelancer) #4

@kerguelen

This is not true 3D inside the document, this is a kind of interactive sprite.
I’ve made the model in 3D with several renders ( one for each position/rotation).
in the Hype project I used a widget to import the sequence, about 750kb only.

All panoramas are made with dedicated software, all imported via widget.
I worked a lot to find the right way to optimize all panoramas. Now every panorama is stored in a single Hype project in order to avoid “memory warning” in old devices.


#5

Indeed this looks great!
I tried it on a Nexus 7.
The panoramas impressed very much! Could you elaborate a bit more about the ‘dedicated’ software and widgets?
Looking forward to the iOS version!


(Freelancer) #6

@Olav
I used Panotour Pro to build all panoramas but I’m not sure to suggest this (very expensive) software. I’ve lost about “400%” of my time to avoid bugs and fix limitations of this software in order to use the output in a Hype/app project. Probably is better Pano2VR by http://ggnome.com
If you’ve planned panos in hype project ( expecially if you need a offline app) go to Pano2VR

NOTE: you must turn OFF ( on load the pano) any animation / rotation / event to avoid “memory warning” and crashes.

I’ve imported all external resources ( any external js) in the index of the panorama and then I’ve stored all datas in a folder in the same level of the hype resources folder ( in www).

"index_pano1.html "via URL to import the pano in the widget HTML ( in this case offline)

The IOS version is “in waiting for review” :smile:


#7

Much appreciated!
Thank you very much for sharing your workflow on this. I do have some Panoramic experience and hopefully be able to implement it in a Hype document or app.
Thanks again and good luck with your app!


(kerguelen) #8

Thanks for these precisions !
You did a nice job here indeed


(Freelancer) #9

Thanks a lot guys

another important thing: all panos are made both for HTM5 and flash.
The flash verison is better than the HTML5 version, however you can’t add a flash projector in IOS and we decided to use the HTML only.

in this URL , in the first panorama, you can see the enriched flash version ( multiresolution version) with some effects like flare and dynamic audio with fade/in/out. A part the full screen option ( all hype/panos fit to any device) we can’t add these features.

question: on the web is available a good flash projector (offline) for the Android version?

thanks


Box hover Effect - 4 BOX ( squared and rounded shapes )
(Freelancer) #10

@Olav @kerguelen @gasspence
IOS / iPad version available here: http://itunes.apple.com/it/app/arco-dei-gavi/id1008915686?l=en&mt=8


360 degrees Video player
(thejoepeach) #11

amazing dude… your books looks so great… i will share with one client that are looking for something just like this…

Thanks for sharing…


#12

Wow, amazing demo.

I am new to Hype (or indeed to any software like this!). Could you explain how you did the jigsaw on your video and what would I need to do to achieve something similar?

Thanks for sharing


(Freelancer) #13

Hi @Jilo in this App I developed a simplified version based on this template in jQuery.
The game was embedded through the HTML widget element.

more methods
jigsaw puzzle https://gist.github.com/themorgantown/9774219
Javascript Callback/hypeDocument Javascript Callback/hypeDocument variable control from inner HTML