Pano2vr



notes for Pano2vr:

using cardboad skin

use cardboard skin (cardboard.ggsk) select cardboard.ggt from the Template list in the HTML pane. (in skin make sure crosshair is activated for pointing!) for navigating in cardboard just point the crosshair to a hotspot to move

upload to google street view

account setup

(shoot with GPS data!) click street view button -> add google account drag panos into tour browser click Tour map button and drag HOTspots to location

fix north

click EYE button (top menu) to enable Viewer settings check center marker check Hide ghost hostpots tottle Pick Landmark button then right click on maps view to set new radar direction

place hotspots automatically

(no more manually needed!) tour map -> link icon -> closest node to edit links, just select 2 with shift then properties -> uncheck Auto Place / Lock position click Place and set something then click copy button to apply to all click Upload button (if there is error, just use single upload and upload each) distance is too far probably... then it will take several days to show up in google as photo sphere

src

https://www.youtube.com/watch?v=3cMXeD1BYrM

limit view

viewing parameters -> check show limits

add patches

in big preview window -> icons -> patches doublclick into preview pano to add a patch then EXTRACT and save

add email address

URL: mailto:name@domain.com

gyroscope control

output -> html -> click Settings button for Template check "Include gyroscope control"

control elements based on rotation (PAN) of pano

use PAN north, like compass then control elements based on PAN north coordinates

animate/slide/fade skin elements

create click button, add action Source: Mouse Click Action: Position Type: Toggle Element Position Offset: X: -250px Y: 0px Target: $parent

src

in skin editor_: File -> Open -> controllerslide.ggsk

animating scenes

click in animation editor html5 output: rotate -> use animation then record with screen capturing/quicktime player and crop edges in quicktime, render custom options and set size

tooltip for poly hotspots

to format the floating window: html5 output -> hotspots -> enable and set sizes then use the title field (with html tags) <br><span style="font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-align: center;">LOREM IPSUM</span> alternativ option: create a replacement floating tooltip for all hotspots: https://ggnome.com/wiki/Floating%20Tooltips%20and%20Hotspots

direct node access

html5 outout -> html -> template settings -> check direct node access index.html#node1

day/night scene transitions

preferences -> advanced tab -> show internal node ID in tourbrowser (bottom) hover over image to get internal node ID select first pano -> user data -> source field: {other-pano-node-ID} create button mouse click -> open next panorama -> URL: $us -> View: $cur

override the zoom transition

not possible... pick crossfade or zoom...

src

https://ggnome.com/wiki/Scene_Transitions

timers

open skin editor place timer icon (top) place the concerning element under it appearance settings: click orange logic block: visibility Active = false visible: true default value: visible: false timer settings: timeout: 12 sek type: loaded repeat: one time

elements to be activated/deactivated need hierachy

popup_image timer_image button-close-element button-ok-element text then activated popup_image with a node

src

https://www.youtube.com/watch?v=MJkJ9BKiQVI&list=PLiX2igIlGXJmlUayg2FHT_9nCLkFXbR2i&index=8

transitions between panos

transition type: cross dissolve transition time: 1.0s effects: before: zoom in after: zoom in uncheck wait for transition zoomed FoV: 35 zoom Speed: 1.00

video embedding (stiched!)

restraints: play position cannot be modified, cannot be hidden or modified in skin just create webm, so it will play in chrome/mozilla, exclude safari/IE by using webm, dont even create mp4 for safari/IE because it produces too many errors extract patch from patch image, generate video frames in PS then use ffmpeg to generate video from the single frames (brew install ffmpeg --with-libvpx or brew reinstall ffmpeg --with-libvpx) ffmpeg -framerate 8 -i img%01d.png -c:v libvpx -r 10 -pix_fmt yuv420p out.webm adjust framerate: 1/5 or 0.25 or 20 for right playbackspeed, -r 10 frames/sec (or for mp4: ./ffmpeg -framerate 8 -i img%03d.png -c:v libx264 -r 10 -pix_fmt yuv420p out.mp4 or ./ffmpeg -i input-file.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis out.webm ) use node marker for click/hover actions on the video create a poly hotspot in the hotspot editor: poly01 skin editor -> add a node marker -> give proxy ID poly01 give the node actions now: i.e. go to next pano on click, or play/pause video

export movie for html5

compose it in quicktime/vegas/whatever and export full size, then compress it in miro (or handbrake or ffmpeg): H.264 (MP4) works in Safari/IE WebM works in Android, Chrome, Firefox, Opera export the full composition from quicktime first get settings from orig movie window -> show movie inspector file -> export -> MPEG4 Video Format: H264 Data Rate: 6000 kbits/sec Image Size: Current Frame Rate: Current miro: webm for Android/Mozilla drag video into app Format -> Video -> WebM HD then copy from output folder miro: h.264 (mp4) for Apple/IE drag video Format -> Video -> MP4 then copy from output folder

embedding

<video width="640" height="360" controls> <source src="asdf.mp4" type="video/mp4" /> <source src="asdf.webm" type="video/webm" /> Your browser does not support the video tag. </video> Recommended is to embed video using youtube (share->embed): <iframe width="700" height="400" src="http://www.youtube.com/embed/AoVhmM_s2hY?rel=0" frameborder="0" allowfullscreen></iframe>

src

https://en.wikipedia.org/wiki/HTML5_video#Browser_support https://ggnome.com/forum/viewtopic.php?t=7745

offline videos with popups

create _videos and html_ file in output folder

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .video { width: 100%; overflow: hidden; max-height:100px; text-align: center; } </style> </head> <body> <video width="640" height="360" class="video" scrolling="no" seamless="seamless" controls> <source src="videos.mp4" type="video/mp4" /> <source src="videos.webm" type="video/webm" /> Your browser does not support the video tag. </video> </body> </html>

link it in pano2vr with hotspot

place hotspot and remember hotspot ID open skin editor, create group create close button & text field inside group

set actions on group:

init -> set value: put here the IFRAME! -> target: "your text field" iframe: <iframe width="640" height="360" src="video.html" frameborder="0" allowfullscreen></iframe> mouse click -> Toggle Element Visibility -> target: $self

set actions on close botton:

mouse click -> set value: <LEAVE EMPTY>!! -> target: "your text field" mouse click -> set value: put here the IFRAME! -> target "your text field" iframe: <iframe width="640" height="360" src="video.html" frameborder="0" allowfullscreen></iframe>

trigger content based on area, mouseover

create a poly hotspot in the hotspot editor: poly01 skin editor -> add a node marker -> give proxy ID poly01 give the node actions, like show/hide popups

welcome popup content on individual panos, using tags

add a tag to the pano (user data) in the skin add some elements, uncheck visible also in skin editor from top bar, add a node node settings: type same tag as in the pano Node Actions: Activate, show element, pop_image Deactivate, hide element, pop_image

src

http://ggnome.com/wiki/Using_Node_Markers_(Pano2VR)#Activating_elements

minimaps

hide minimap in mobile, custom css

goto skin editor select minimap group -> advanced tab -> add css class: hide-on-mobile then open index.html and paste this: @media (max-width: 670px) { .hide-on-mobile { display: none; } }

settings

skin/controller: simplex.ggsk -> edit copy "hide_template" group from another tour (hide_template group) marker_normal marker_active markertemplate marker_title canvas size: 640 x 480 uncheck hide TEMPLATE layer, leave rest drag panos from other window into map select tourbrowser window, drag panos onto map

change map icons

find circle -> properties -> svg image -> change

multilevel floormap

add a tag to each pano (user data): level1, level2, usw in the skin add some elements, uncheck visible also in skin editor from top bar, add a node node settings: type same tag as in the pano Node Actions: Activate, show element, NODE_LEVEL1 Deactivate, hide element, NODE_LEVEL1 Activate, hide element, NODE_LEVEL2 Activate, hide element, NODE_LEVEL3 Mouse click, trigger click, $self (to prevent error when empty spot on map is clicked) create level buttons, set this action: mouse click, open next pano, select next floor start pano

radar beam in mini map

open new-radar-skin, copy the radar, open own skin and paste it then put radar graphic under each node in the map add this to the node parent (marker_node8): Activate, show element, radar beam8 Deactivate, hide element, radar beam8

right direction of radar beam

click oben map icon find address in google maps (satellite) select a pano -> user data -> click copy button (to copy to all panos) then select each pano -> view parameters -> North: ROTATE AND SET! to get the right direction: north is the north of the minimap! just point to the northern edge in each pano

add environment sounds to single panos

in media editor, place sound mode surround loop: 0 ACHTUNG: wenn filme abgespielt werden, auf PAUSE setzen!

popup_video gruppe: mouse click, play/pause media, 0, _sound_prov

der close button bekommt keine Aktion

add sound event on click/hover

place sound in media editor, give a name, set loop -1 (0 is continuous loop) mouse enter, start media _sound-ring

duplicate skin button sound on/off

create 2 buttons actions on button_on: mouse click, set volume 1, _main mouse click, hide element, button_on mouse click, show element, button_off usw

formatting of elements in skin editor

uncheck Auto Size textbox groesser ziehen, und folgendes reinschreiben: <br><span style="font-family: Helvetica, Arial, sans-serif; font-weight:bold; margin:10px; padding:10px; text-align: center;">$hs</span>

autorotate first pano

turn off autorotate in output settings select an element zb pop_image in skin editor Actions: Viewer Init -> Start Auto Rotate Mouse Over -> Stop Auto Rotate Insert "Mouse Over -> Stop Auto Rotate" Action for all other Elements in this pano!

falls missing links/bilder/error

check path in media items in single panos! sollte so ausschaun: ../

add youtube video

add hotspot, remember hotspot id in skin editor create group add textfield inside with youtube dimensions, ID: video-iframe-page enter hotspot id in group field proxy id field get youtube embed code: share -> embed

group icon, actions

1. Action

Source: Mouse Click Action: Toggle Element Visibility Target: $self

2. Action

Source: Init Action: Set Text Text: <iframe width="640" height="360" src="VIDEOURL.COM" frameborder="0" allowfullscreen></iframe> Target: video-iframe-page

close button (under group icon), actions

1. Action

Source: Mouse Click Action: Set Text Text: HIER LEER LASSEN Target: video-iframe-page

2. Action

Source: Init Action: Set Text Text: <iframe width="640" height="360" src="VIDEOURL.COM" frameborder="0" allowfullscreen></iframe> Target: video-iframe-page (es muss nocheinmal geladen werden, also resettet fuer das naechste mal)

add images/media

media -> modify doubleclick -> select image click mode: pop out 100% works with gifs too, or animated pngs as sprites!

add tooltip/hotspots

fast way

select pano -> Hotspots drag polygon hotspot or point title: <b> das sit dibaablabalaa </b> ev. add website link too... create html5 output: advanced settings: hotspot text box show current

slow way

select pano -> hotspots -> add one give id (popup123) (in the simplex skin) goto skin editor -> add text box appearance: uncheck visible Text: add somehting check wordwrap, autosize hotspot proxy id: popup123 skin id: SKIN-ID-NAME actions: mouse click, toggle element visibility, $self

change hotspot icon

create another fadenkreuz (from menu oben) copy hsimage von anderem hotspot and replace SVG when creating new hotspot: skin id: SKIN-ID-NAME

adding a logo

skin editor -> drag PNG onto canvas position (right tab) -> anchor: click top left corner actions -> doubleclick into table source: mouse click action: go to URL check it in live preview (top corner) file -> save as -> another skin

src

https://www.youtube.com/watch?v=qk6tOxUnTBg

patch nadir

output: Tranformation then click Convert Input -> vertical cross clone stamp in photoshop nadir and zenith then in pano2vr, click Select Input, ok convert input -> leave defaults

or just use affinity photo

layers -> equi... use inpainting brush to retouche fast layers -> remove projection



Tags: ,
Published: September, 2019