Beiträge von tmrnvrcome

  • Multiple Scrollarea with Multiple Textfield Layers

    Hi . I need help for my program . I have multiple textfield layers in a scene and I want to use ScrollArea plugin to toggle between the different layers. Only ONE textfield layer is visible at any ONE time.

    I did a simple mock up. But the scrollslider does not return to the original position and the text is cut off at the bottom.

    Do i have to create a scrollbar for each and every layer ? and use one layer container to contain one scrollbar and one textfield layer ?

    Code is as follows :


    <krpano>

    <!-- use a grid preview pano as background -->
    <preview type="grid(cube,16,16,512,0xCCCCCC,0xF6F6F6,0x999999);" details="16" />

    <!-- view settings -->
    <view hlookat="0" vlookat="0" fovtype="VFOV" fov="100" fovmin="60" fovmax="150" />


    <!-- the textfield -->
    <layer name="textfield" url="textfield.png" align="center" x="0" y="0" width="50%" height="300" scale9grid="6|6|268|188">

    <!-- the scrolling text -->
    <layer name="textmask" type="container" align="lefttop" x="5" y="5" width="-30" height="-10" maskchildren="true">
    <layer name="textscroller" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" mwheel="true" direction="v" overscroll="0" align="lefttop" width="100%" height="100%" onscroll="if(hoverflow GT 0, div(yp,toverflow,hoverflow);Math.min(yp,1);Math.max(yp,0); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrollup].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight); mul(yp,th);add(yp,layer[scrollup].pixelheight); copy(layer[scrollslider].y,yp); );">
    <layer name="text" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" x="0" y="0" visible="false" width="100%" autoheight="true" background="false" border="false" onautosized="copy(layer[textscroller].height, height);"
    padding="10 15"
    html="data:testtext"
    css="color:#000000; font-family:Arial; font-size:12px;"
    />
    <layer name="text2" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" x="0" y="0" visible="true" width="100%" autoheight="true" background="false" border="false" onautosized="copy(layer[textscroller].height, height);"
    padding="10 15"
    html="data:testtext2"
    css="color:#000000; font-family:Arial; font-size:12px;"
    />
    </layer>
    </layer>

    <!-- the scrollbar -->
    <layer name="scrollbar" type="container" bgcolor="0x000000" bgalpha="0.25" align="righttop" x="5" y="5" width="19" height="-10">
    <layer name="scrollup" url="dirbutton.png" align="righttop" x="19" rotate="-90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,+1));" />
    <layer name="scrolldown" url="dirbutton.png" align="rightbottom" x="19" rotate="+90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,-1));" />
    <layer name="scrollslider" url="sliderbutton.png" align="righttop" x="0" y="19" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="if(layer[textscroller].hoverflow GT 0, copy(cy,y);copy(sy,mouse.stagey);dragging(); );" dragging="if(pressed, sub(dy,mouse.stagey,sy);add(ny,cy,dy);Math.max(ny,layer[scrollup].pixelheight); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight);Math.min(ny,th); copy(y,ny); sub(ny,layer[scrollup].pixelheight);sub(th,layer[scrollslider].pixelheight);div(ny,th); copy(fh,layer[textscroller].hoverflow); mul(fh,-1); mul(ny,fh); layer[textscroller].stopscrolling(); copy(layer[textscroller].y,ny); delayedcall(0,dragging()); );" />
    </layer>

    </layer>
    <hotspot name="btn" url="dirbutton.png" scale="2.0" ath="0" atv="-40" onclick="toggle(layer[text].visible); toggle(layer[text2].visible);" />

    <!-- the text for testing -->
    <data name="testtext">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </data>

    <data name="testtext2">
    [p]Portuguese Macau around 1665, produced by the Dutch cartographer Johannes Vingboons (Image source: Atlas of Mutual Heritage). [/p]
    [/br]
    [p]Compare the map to today’s Macao.[/p]
    [p]The Portuguese were officially granted by the Ming dynasty in 1577 to use Macao as a port which developed into a colony.
    For more than 250 years Macao was the only port in China where Europeans could stay for a long period of time, and develop a community.
    The Dutch and British both tried to snatch without success Macao from the Portuguese. All sorts of Europeans came and went.
    The Portuguese maritime empire long ended in the early seventeenth century, but Macao limped ahead playing a key role in China-west interactions.
    It only formally became a part of Chinese territory in 1999. What a colony with rich and colorful histories.[/p]
    </data>

    </krpano>

  • krpano 1.19-pr4 / 1.19-pr5 / 1.19-pr6

    Hi . I need help for my program . I have multiple textfield layers in a scene and I want to use ScrollArea plugin to toggle between the different layers. Only ONE textfield layer is visible at any ONE time.

    I did a simple mock up. But the scrollslider does not return to the original position and the text is cut off at the bottom.

    Do i have to create a scrollbar for each and every layer ? and use one layer container to contain one scrollbar and one textfield layer ?

    Code is as follows :


    <krpano>

    <!-- use a grid preview pano as background -->
    <preview type="grid(cube,16,16,512,0xCCCCCC,0xF6F6F6,0x999999);" details="16" />

    <!-- view settings -->
    <view hlookat="0" vlookat="0" fovtype="VFOV" fov="100" fovmin="60" fovmax="150" />


    <!-- the textfield -->
    <layer name="textfield" url="textfield.png" align="center" x="0" y="0" width="50%" height="300" scale9grid="6|6|268|188">

    <!-- the scrolling text -->
    <layer name="textmask" type="container" align="lefttop" x="5" y="5" width="-30" height="-10" maskchildren="true">
    <layer name="textscroller" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" mwheel="true" direction="v" overscroll="0" align="lefttop" width="100%" height="100%" onscroll="if(hoverflow GT 0, div(yp,toverflow,hoverflow);Math.min(yp,1);Math.max(yp,0); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrollup].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight); mul(yp,th);add(yp,layer[scrollup].pixelheight); copy(layer[scrollslider].y,yp); );">
    <layer name="text" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" x="0" y="0" visible="false" width="100%" autoheight="true" background="false" border="false" onautosized="copy(layer[textscroller].height, height);"
    padding="10 15"
    html="data:testtext"
    css="color:#000000; font-family:Arial; font-size:12px;"
    />
    <layer name="text2" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" x="0" y="0" visible="true" width="100%" autoheight="true" background="false" border="false" onautosized="copy(layer[textscroller].height, height);"
    padding="10 15"
    html="data:testtext2"
    css="color:#000000; font-family:Arial; font-size:12px;"
    />
    </layer>
    </layer>

    <!-- the scrollbar -->
    <layer name="scrollbar" type="container" bgcolor="0x000000" bgalpha="0.25" align="righttop" x="5" y="5" width="19" height="-10">
    <layer name="scrollup" url="dirbutton.png" align="righttop" x="19" rotate="-90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,+1));" />
    <layer name="scrolldown" url="dirbutton.png" align="rightbottom" x="19" rotate="+90" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="asyncloop(pressed, layer[textscroller].scrollby(0,-1));" />
    <layer name="scrollslider" url="sliderbutton.png" align="righttop" x="0" y="19" crop="0|0|19|19" onovercrop="0|19|19|19" ondowncrop="0|38|19|19" ondown="if(layer[textscroller].hoverflow GT 0, copy(cy,y);copy(sy,mouse.stagey);dragging(); );" dragging="if(pressed, sub(dy,mouse.stagey,sy);add(ny,cy,dy);Math.max(ny,layer[scrollup].pixelheight); copy(th,layer[scrollbar].pixelheight);sub(th,layer[scrolldown].pixelheight);sub(th,layer[scrollslider].pixelheight);Math.min(ny,th); copy(y,ny); sub(ny,layer[scrollup].pixelheight);sub(th,layer[scrollslider].pixelheight);div(ny,th); copy(fh,layer[textscroller].hoverflow); mul(fh,-1); mul(ny,fh); layer[textscroller].stopscrolling(); copy(layer[textscroller].y,ny); delayedcall(0,dragging()); );" />
    </layer>

    </layer>
    <hotspot name="btn" url="dirbutton.png" scale="2.0" ath="0" atv="-40" onclick="toggle(layer[text].visible); toggle(layer[text2].visible);" />

    <!-- the text for testing -->
    <data name="testtext">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </data>

    <data name="testtext2">
    [p]Portuguese Macau around 1665, produced by the Dutch cartographer Johannes Vingboons (Image source: Atlas of Mutual Heritage). [/p]
    [/br]
    [p]Compare the map to today’s Macao.[/p]
    [p]The Portuguese were officially granted by the Ming dynasty in 1577 to use Macao as a port which developed into a colony.
    For more than 250 years Macao was the only port in China where Europeans could stay for a long period of time, and develop a community.
    The Dutch and British both tried to snatch without success Macao from the Portuguese. All sorts of Europeans came and went.
    The Portuguese maritime empire long ended in the early seventeenth century, but Macao limped ahead playing a key role in China-west interactions.
    It only formally became a part of Chinese territory in 1999. What a colony with rich and colorful histories.[/p]
    </data>

    </krpano>

  • Textfield not selectable in html5 (19.pr5)

    Hi , how to disable the interactivecontent after i set my layer textfield to tween(alpha , 0); and set(visible , false); ???

    The interactivecontent is still active when the layer is not visible. How do I know ? Because the cursor changes when I mouseover the area which the interactivecontent appeared before.

  • krpano 1.19-pr4 / 1.19-pr5 / 1.19-pr6

    hi there. I have just converted to 1.19 pr-6. i have 17 scenes, and a target box in each scene.

    the properties of the target box is as follows :

    distorted="true" depth="off" vr_timeout="3000" zorder="1" zoom="true" enabled="true" alpha="1.0" visible="true"

    onloaded="tween(alpha,1.0); "



    the target box would appear in the scene. but when I mouse over or when the crosshair is over it in VR mode, the target box would just disappear !
    when i go to the previous scene and back to the current scene , sometimes the target box is there, sometimes it is not !!

    I have no idea what is wrong. this target box has similar settings as my other hotspots, but only it is causing issues.

    1) is it because i am using a .png file ?
    i am using a 256x256px .png image
    2) the target box has the same name in all the scenes, could it be the problem ?
    <hotspot name="hotspot_trigger"

    and In every scene , I have a function to remove it.
    <events name="nextsnd"
    onnewpano="webvr.resetSensor(178.536);"
    onremovepano="removehotspot(hotspot_trigger);
    removehotspot(HS_narration);
    removehotspot(HS_image);
    removehotspot(previous);
    removehotspot(title);
    removehotspot(home);
    removehotspot(restart); "
    />

    please help. this problem is getting annoying.

  • krpano 1.19 - Pre Release 3

    Hi Guys

    I am using the krpano v1,19 p3.

    I realise my hotspots wil always disappear 1second later.

    Then I added in this code (red) which was found in the krpano_vr.xml.

    <hotspot name="next" style="prevnextbtn" url="buttons/Btn_Next.png" ath="-157.795" atv="50.473" onclick="tween(ty|alpha, 8000|0.0, 2.5, easeInQuint, removehotspot(next)); skin_nextscene_loop(+1);" onloaded="if(vr_start_done === true, removehotspot(start); start_vr(); , tween(alpha,1); );" />

    It worked. But can anyone explain what this particular line of code mean? How come the hotspots in each scenes stopped disappearing after i used this code?

    Thanks for ur understanding. *smile*

  • Audio after entering a hotspot

    Hi Tuur

    I have a similar question - autoplay sound in mobile devices.

    I have this code

    onstart="webvr.resetSensor(4.428); playsound(audioI,'audios/I.wav|audios/I.ogg', 1); "


    it works fine on my desktop pc. But when i tried it on my smartphone, sometimes it starts without tapping the screen and sometimes it does not start. Any solution for this?

  • Sound files failing to open sometimes - 1.19 pr 3

    Same problem. Mine works fine on the Chrome using my desktop pc. But the sounds do not play automatically when I am using my smartphone. Why? Well, most of the time the sounds do not play in my smartphone

    I have 2 audios.

  • krpano 1.19 - Pre Release 1 - WebVR / MobileVR / Stereoscopic 3D Support (Oculus Rift, Google Cardboard, GearVR, ...)

    It's ok. I got it already.

  • How to Use WebVR Plugin's ResetSensor()

    Hi guys

    I am new at programming and krpano.

    I have an introduction page with thumbnail previews and then linked scenes of panorama pics with hotspots. I would like to be able to see the same startview for every scene after i enter VRmode. Where and how should I use the resetSensor(hlookat) ? Should I use it in the tour.xml or webvr.xml? how should I code it?

    When i Enter VR mode on my mobile device, I would like to see the startview that i have set no matter which position i am standing.

    I did this.

    onstart="lookat(179.999,0); if(webvr.isenabled == true, webvr.resetSensor(hlookat));"

    And upon using the resetSensor(hlookat); , where should i delete the KEEPMOVING ?

    Thanks.

  • krpano 1.19 - Pre Release 1 - WebVR / MobileVR / Stereoscopic 3D Support (Oculus Rift, Google Cardboard, GearVR, ...)

    Hi guys

    I am new at programming and krpano.

    I have an introduction page with thumbnail previews and then linked scenes of panorama pics with hotspots. I would like to be able to see the same startview for every scene after i enter VRmode. Where and how should I use the resetSensor(hlookat) ? Should I use it in the tour.xml or webvr.xml? how should I code it?

    When i Enter VR mode on my mobile device, I would like to see the startview that i have set no matter which position i am standing.

    I did this.

    onstart="lookat(179.999,0); if(webvr.isenabled == true, webvr.resetSensor(hlookat));"

    And upon using the resetSensor(hlookat); , where should i delete the KEEPMOVING ?

    Thanks.