How to find stuff


    Please use Browser Search or Scroll down.





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


gyroscope control
 

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


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 -> controller_slide.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




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 &amp; 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>





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


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!


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