krpano 1.21

    Hi Klaus,

    I'm working on a project that uses wheeldelta values.


    The project works on the three devices listed below.

    • Desktop with mouse
    • Desktop with touch device
    • Mobile

    There was no problem until version 1.20.11 of krpano.


    1. When using a touch device, if the version of krpano is 1.21, the sign of the wheeldelta value is reversed.
    2. When the version of krpano is 1.21, the desktop cannot detect the touch device.

    The code to test is written as below.


    The image below is the log of the zoom in operation when the krpano version is 1.20.11.
    The code above was tested on a desktop with a touch device.


    The image below is the log of the zoom out operation when the krpano version is 1.20.11.
    The code above was tested on a desktop with a touch device.


    The image below is the log of the zoom in operation when the krpano version is 1.21.
    The code above was tested on a desktop with a touch device.


    The image below is the log of the zoom out operation when the krpano version is 1.21.
    The code above was tested on a desktop with a touch device.


    wheeldelta example in krpano 1.20.11

    wheeldelta example in krpano 1.21


    Refer to the image below for the touch device installed on the desktop.

    Edited once, last by di0deman (August 27, 2023 at 5:03 AM).

    Hi Klaus,

    The code to test is written as below.

    3D-distorted hotspot with videoplayer example in krpano 1.20.11.
    3D-distorted hotspot with videoplayer example in krpano 1.21.

    In the version of krpano is 1.21, the hotspot's video stops or slows down within about 2 to 10 minutes.

    Edited once, last by di0deman (August 27, 2023 at 4:58 AM).

    Hi everyone,

    this is my first post on the forum. *smile*

    Thanks for the example with comparing panoramas! It is great.


    But I have questions:

    1. Is it possible to add hotspots to the left or right panorama? I tried this code below, but unfortunately it doesn't work (they are added when displaying a normal single panorama, not when comparing).


    2. I'm not sure if this is a bug, but on a mobile device after opening the example, when the screen is rotated, fullscreen mode is activated and the buttons to change the panorama comparison mode disappear.
    Also, only one panorama appears after rotation, not two. When the smartphone is vertical and I change the mode to, for example, Side-by-Side, and then rotate it to horizontal - two panoramas are already displayed side by side and buttons are visible too.

    Screenshots:



    Edited 2 times, last by pano_dave (June 14, 2023 at 3:34 PM).

    VTOUR CONFIG xmls / I'm currently trying to find the correct syntax to change the %s placeholder (image.cubelabels with default value l|f|r|b|u|d) or otherwise to change the lettered sequence value of sides to numerical (like 0|1|2|3|4|5). Can't find the right solution for # generate faces images / customimage[image].path=%INPUTPATH%/image_%s.jpg for output image_0.jpg image_1.jpg and etc. Thank you... if anyone knows the correct syntax

    Hi Klaus,
    i find small bug for alphachannel.
    if i use prealign in image and hotspot have prealign="true" ,then that hotspot is turning ry axis .


    Code
    <image prealign="0|80|0">			....... 		</image> 
<hotspot name="sbs"  url="alphachannel_sbs.jpg" 
alphachannel="SBS"
 distorted="true"	
 capture="false" ath="-15" 
prealign="true"		scale="0.5"		/>


    And another problem if i use alphachannel video hotspot, that hotspot always volume = 1 , i can not changei. if i make muted="true", then sound is muted.

    <layer name="inf_l" type="text" keep="true" edge="bottom" oy="-20" enabled="false" bgalpha="0.3"
    onloaded="show_distance(); delayedcall(0.01, onloaded());" />

    <action name="show_distance" scope="local" >
    screentodepth( mouse.x, mouse.y, hit);
    copy(caller.x, mouse.x);
    copy(caller.y, mouse.y);
    calc(caller.html, 'mouse hit.d=' + roundval(hit.d, 1));
    </action>pint_r mouse hit.d = 0 I am in STL model, don't know where is wrong, no hit *confused*

    Upgrading from 1.20 to 1.21 loading error: Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross origin data, and may not be loaded.

    1.21 is missing 'Origin' in Request Headers compared to 1.20

    ---------------------------------------------------
    Today's new discovery: This may be a bug. If it is a complete protocol address (starting with [http://]or [https://]), it is normal, but using a relative protocol address (starting with [//]) will cause this problem.

    Edited 3 times, last by MANJAY (June 27, 2023 at 5:28 AM).

    Hi Klaus,

    The code to test is written as below:

    The test_onmousewheel action called on krpano 1.20.11 but, never called on krpano 1.21.

    children example in krpano 1.20.11

    children example in krpano 1.21.

    Hi Klaus，
    I found that in the <flat>, the tow-finger pinch operation on trackpad doesn't work and I couldn't zoom. But it works fine in <cube>. I ran the same test with your examples, and the results were the same.

    https://krpano.com/releases/1.21/…rtment/tour.xml
    https://krpano.com/krpano.html?xm…untain/flat.xml


    events.ongesture wasn't triggered on trackpad.

    wheeldelta_touchscale Once pinched on the trackpad, the value is persisted. After using the mouse wheel, the value will remain the same.

    Klaus and KRPano fam,

    Got a strange mystery that I just can't debug.
    I have created a plugin, leveraging socket.io, Agora and a few other components that is similar in nature to the Live Presenter Plugin but definitely different. We use the term conference for a presentation session.
    It works great using krpano 1.20.11 (build 2022-03-07). A host can start a conference and then the audience/participants can join in via a conference-specific URL.
    HOWEVER, when I use krpano 1.21 (build 2023-04-30) the <div> I'm appending to the sprite just won't append. I've traced and console.log()-ed to an obscene extent trying to figure this one out to no avail.
    Obviously this has something to do with host - vs - audience/participants but what just does not jive out is why does this work with v1.20 and not with v1.21?
    No code changes what-so-ever. Just the core KRPano version change.
    Below is the relevant code in the plugin that creates the <div> and appends to the plugin.sprite.
    And below that is the log and elements for both the "host" and the "audience/participant".
    You can see in the logs that the appending seems to go down, with theResults being traced in both instances.
    But the following log lines host-VM61:56 and participand-VM36:56 indicate that that host was appended-to while the participant WAS NOT.

    If anyone can shed light or point me in any direction on this it would be GREATLY appreciated.

    // create the wrapping div
    confdiv = document.createElement('div');
    confdiv.style.width = '100%'; // => automatic scale with the parent element
    confdiv.style.height = '400px';
    confdiv.style.overflowY = 'hidden';
    confdiv.style.overflowX = 'hidden';
    confdiv.id = 'confdiv';
    confdiv.style.position = 'absolute';
    confdiv.style.bottom = '0px';
    confdiv.style.display = 'flex';
    confdiv.style.flexDirection = 'column';
    confdiv.style.justifyContent = 'flex-end';
    confdiv.style.pointerEvents = 'none';
    // add it to the DOM
    if (plugin.sprite) {
    const theResults = plugin.sprite.appendChild(confdiv);
    consolelog('Adding confidiv to the DOM', 2);
    console.log(theResults);
    } else {
    consolelog('NO SPRITE', 2);
    }
    consolelog(window.location.hostname);
    if ($('#confdiv').length > 0) {
    consolelog('CONFDIV EXISTS ONLOAD', 2);
    } else {
    consolelog('CONFDIV DOES NOT EXISTS ONLOAD', 2);
    }

    Host log
    VM61:56 ------ SECONDARY | Adding confidiv to the DOM
    VM61:62 <div id="confdiv" style="width: 100%; height: 400px; overflow: hidden; position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;"></div>flex
    VM61:56 --- PRIMARY | preview.xplorit.local
    VM61:56 ------ SECONDARY | CONFDIV EXISTS ONLOAD

    Host elements
    <div style="position: absolute; box-sizing: content-box; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background: none; visibility: visible; border-color: rgb(0, 0, 0); border-style: solid; border-width: 0px; border-radius: 0px; z-index: 163; width: 320px; height: 70px; transform: translateZ(0px) translate(1514px, 778px) translate(0px, 0px);">
    <div style="position: absolute; box-sizing: content-box; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; z-index: 118; background: none no-repeat; visibility: visible; width: 320px; height: 70px; transform: translateZ(0px) translate(0px, 0px) translate(0px, 0px);">
    <div id="confdiv" style="width: 100%; height: 400px; overflow: hidden; position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;">
    <!-- Chat Content -->
    </div>
    </div>
    </div>


    Participant log
    VM36:56 ------ SECONDARY | Adding confidiv to the DOM
    VM36:62 <div id="confdiv" style="width: 100%; height: 400px; overflow: hidden; position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;"></div>
    VM36:56 --- PRIMARY | preview.xplorit.local
    VM36:56 ------ SECONDARY | CONFDIV DOES NOT EXISTS ONLOAD

    Participant element
    <div style="position: absolute; box-sizing: content-box; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background: none; visibility: visible; border-color: rgb(0, 0, 0); border-style: solid; border-width: 0px; border-radius: 0px; z-index: 165; width: 320px; height: 70px; transform: translateZ(0px) translate(1514px, 778px) translate(0px, 0px);">
    </div>


    Hi,

    what's the related xml or plugin including code?

    Maybe the plugin.sprite element wasn't added to the DOM yet, when you're trying to get it from there...
    Or the plugin has a parent layer element that was loaded and added yet?
    There can be multiple reasons, there is no guarantee that a plugin.sprite would be anytime added on the DOM...

    Best regards,
    Klaus

    Klaus,

    The layer/plugin is created dynamically with the action below.
    Below that I have the JS console output for both v1.20 and v1.21 runs with this.The only dif in the logs being where the resetMap() is logged.
    I added in the traces, first to see if a layer[xplorit_conference] already exists ( which it should not ) and second to see if the layer[xplorit_conference] ends up being created. I also did this for the other layer/plugin being added by this action.
    In both cases, v1.20 & 1.21 the PRE and POST checks PASS.
    Now, in ATTENDEE 1.21 when I check pugin-side to see if the div was added to the DOM it is not, as reported by:
    VM28:56 ------ SECONDARY | CONFDIV DOES NOT EXISTS ONLOAD

    The ONLY thing that changed when I ran these two comparisons is switching out the krpano.js versions. No code was altered what-so-ever.
    As much as this could be something in the sequencing of my code, the version discrepancy really has me confused here.

    <action name="load_xplorit_conference">
     trace('load_xplorit_conference()');
    <!-- set the socket stage to capture mouse events -->
     set(layer[socket_stage].capture, true);
    set(layer[socket_stage].enabled, true);
    set(layer[socket_stage].bgcapture, true);
    <!-- add the two layers/plugins that are needed for the conferencing module -->
     if(layer[xplorit_conference],
    trace('xplorit_conference PRE CHECK - FAILED!');
    ,
    trace('xplorit_conference PRE CHECK - PASSED!');
    );
    addlayer(xplorit_conference);
    set(layer[xplorit_conference].type, plugin);
    set(layer[xplorit_conference].parent, layer[socket_stage]);
    set(layer[xplorit_conference].with, 100%);
    set(layer[xplorit_conference].height, 100%);
    set(layer[xplorit_conference].align, leftbottom);
    set(layer[xplorit_conference].x, 0);
    set(layer[xplorit_conference].y, 0);
    set(layer[xplorit_conference].keep, true);
    set(layer[xplorit_conference].visible, true);
    set(layer[xplorit_conference].alpha, 1.0);
    set(layer[xplorit_conference].enabled, true);
    set(layer[xplorit_conference].capture, true);
    set(layer[xplorit_conference].bgcapture, false);
    set(layer[xplorit_conference].zorder, 0);
    set(layer[xplorit_conference].room, %1);
    set(layer[xplorit_conference].mode, %2);
    set(layer[xplorit_conference].url,'/xplorit_common/frameworks/xplorit/plugins/xplorit_conference.min.js');
    set(layer[xplorit_conference].onloaded, conf_nav_open());

    if(layer[xplorit_conference],
    trace('xplorit_conference POST CHECK - PASSED!');
    ,
    trace('xplorit_conference POST CHECK - FAILED!');
    );

    if(layer[conf_overlay],
    trace('conf_overlay PRE CHECK - FAILED!');
    ,
    trace('conf_overlay PRE CHECK - PASSED!');
    );

    addlayer(conf_overlay);
    set(layer[conf_overlay].keep, true);
    set(layer[conf_overlay].align, righttop);
    set(layer[conf_overlay].width, 100%);
    set(layer[conf_overlay].height, 100%);
    set(layer[conf_overlay].x, 0);
    set(layer[conf_overlay].y, 0);
    set(layer[conf_overlay].visible, true);
    set(layer[conf_overlay].alpha, 1.0);
    set(layer[conf_overlay].enabled, false);
    set(layer[conf_overlay].capture, false);
    set(layer[conf_overlay].bgcapture, false);
    set(layer[conf_overlay].zorder, 1);
    set(layer[conf_overlay].cursor, pointer);
    set(layer[conf_overlay].parent, STAGE);

    set(layer[conf_overlay].url,'/xplorit_common/frameworks/xplorit/plugins/xplorit_whiteboard.min.js');
    if(layer[conf_overlay],
    trace('xplorit_conference POST CHECK - PASSED!');
    ,
    trace('xplorit_conference POST CHECK - FAILED!');
    );

    </action>

    ATTENDEE 1.20
    VM24:1 INFO: join_conf()
    VM24:1 INFO: load_xplorit_conference()
    VM24:1 INFO: xplorit_conference PRE CHECK - PASSED!
    VM24:1 INFO: xplorit_conference POST CHECK - PASSED!
    VM24:1 INFO: conf_overlay PRE CHECK - PASSED!
    VM24:1 INFO: xplorit_conference POST CHECK - PASSED!
    VM67:53 --- PRIMARY | resetMap()
    VM68:56 --- PRIMARY | xplorit_conference.registerplugin myScreenName = Phreddy
    VM68:56 ------ SECONDARY | Adding confidiv to the DOM
    VM68:62 <div id="confdiv" style="width: 100%; height: 400px; overflow: hidden; position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;"></div>flex
    VM68:56 --- PRIMARY | preview.xplorit.local
    VM68:56 ------ SECONDARY | CONFDIV EXISTS ONLOAD
    VM68:56 ------ SECONDARY | load_scripts(/node_modules/http://socket.io/client-dist/so…N-production.js, async function xa(){d("newstart()");va();wa()})
    VM68:56 --- PRIMARY | resolve_url_path(/node_modules/http://socket.io/client-dist/socket.io.js)
    VM24:1 INFO: conf_nav_open()
    VM68:56 ------ SECONDARY | load_scripts(/node_modules/agora-rtc-sdk-ng-latest/AgoraRTC_N-production.js, async function xa(){d("newstart()");va();wa()})
    VM68:56 --- PRIMARY | resolve_url_path(/node_modules/agora-rtc-sdk-ng-latest/AgoraRTC_N-production.js)
    VM68:56 ------ SECONDARY | load_scripts(, async function xa(){d("newstart()");va();wa()})
    VM68:56 --- PRIMARY | newstart()
    VM68:56 --- PRIMARY | chat_start()
    VM68:56 --- PRIMARY | conference_start()
    VM68:56 --- PRIMARY | onResize()
    VM68:56 --- PRIMARY | join_conf()
    VM68:56 --- PRIMARY | socket_connect()
    VM68:56 --- PRIMARY | socket_connecting......
    VM68:56 --- PRIMARY | join_conf_socket([object Object])
    VM68:56 --- PRIMARY | common_conf_elements([object Object])
    VM68:56 --- PRIMARY | common_socket([object Object])
    VM68:56 --- PRIMARY | show_chat()
    VM68:56 ------ SECONDARY | CONFDIV EXISTS SHOWCHAT
    VM68:56 ------ SECONDARY | add flex_hide
    VM68:56 ------ SECONDARY | socket.id ====== gw9ITndI-qqwP2FsAAAL
    VM68:56 --- PRIMARY | newjoin()
    VM68:56 ------ SECONDARY | CONFDIV EXISTS NEWJOIN
    VM68:56 --- PRIMARY | join_agora()
    VM68:56 ------ SECONDARY | CONFDIV EXISTS AGORA

    ATTENDEE 1.21
    INFO: join_conf()
    VM24:3 INFO: load_xplorit_conference()
    VM24:3 INFO: xplorit_conference PRE CHECK - PASSED!
    VM24:3 INFO: xplorit_conference POST CHECK - PASSED!
    VM24:3 INFO: conf_overlay PRE CHECK - PASSED!
    VM24:3 INFO: xplorit_conference POST CHECK - PASSED!
    VM28:56 --- PRIMARY | xplorit_conference.registerplugin myScreenName = Phreddy
    VM28:56 ------ SECONDARY | Adding confidiv to the DOM
    VM28:62 <div id="confdiv" style="width: 100%; height: 400px; overflow: hidden; position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;"></div>
    VM28:56 --- PRIMARY | preview.xplorit.local
    VM28:56 ------ SECONDARY | CONFDIV DOES NOT EXISTS ONLOAD
    VM28:56 ------ SECONDARY | load_scripts(/node_modules/http://socket.io/client-dist/so…N-production.js, async function xa(){d("newstart()");va();wa()})
    VM28:56 --- PRIMARY | resolve_url_path(/node_modules/http://socket.io/client-dist/socket.io.js)
    VM24:3 INFO: conf_nav_open()
    VM28:56 ------ SECONDARY | load_scripts(/node_modules/agora-rtc-sdk-ng-latest/AgoraRTC_N-production.js, async function xa(){d("newstart()");va();wa()})
    VM28:56 --- PRIMARY | resolve_url_path(/node_modules/agora-rtc-sdk-ng-latest/AgoraRTC_N-production.js)
    VM76:53 --- PRIMARY | resetMap()
    VM28:56 ------ SECONDARY | load_scripts(, async function xa(){d("newstart()");va();wa()})
    VM28:56 --- PRIMARY | newstart()
    VM28:56 --- PRIMARY | chat_start()
    VM28:56 --- PRIMARY | conference_start()
    VM28:56 --- PRIMARY | onResize()
    VM28:56 --- PRIMARY | join_conf()
    VM28:56 --- PRIMARY | socket_connect()
    VM28:56 --- PRIMARY | socket_connecting......
    VM28:56 --- PRIMARY | join_conf_socket([object Object])
    VM28:56 --- PRIMARY | common_conf_elements([object Object])
    VM28:56 --- PRIMARY | common_socket([object Object])
    VM28:56 --- PRIMARY | show_chat()
    VM28:56 ------ SECONDARY | CONFDIV DOES NOT EXISTS SHOWCHAT
    VM28:56 ------ SECONDARY | add flex_hide
    VM28:56 ------ SECONDARY | socket.id ====== yLh_yRepYJjLdmJKAAAP
    VM28:56 --- PRIMARY | newjoin()
    VM28:56 ------ SECONDARY | CONFDIV DOES NOT EXISTS NEWJOIN
    VM28:56 --- PRIMARY | join_agora()
    VM28:56 ------ SECONDARY | CONFDIV DOES NOT EXISTS AGORA

    Hi,

    Quote from Douglas Rhiner

    set(layer[xplorit_conference].parent, layer[socket_stage]);

    That's the most important part - what's about that socket_stage layer?
    Where was it defined and was it already added?

    Quote from Douglas Rhiner

    if(layer[xplorit_conference],

    Note - teses checks are unnecessary, these are only checking if that object exists...

    About 1.20 and 1.21 generally - yes, they can work differently in 'undefined' cases (as the internal layer system is almost completely new), but assuming that e.g. not loaded or not added elements or elements without layout are always already on the DOM is also wrong. E.g. when changing the parent, the changing of the underlying DOM elements will be not done instantly, that will be done in the next 'layout step' because that change can also have an effect on the sizes and positions.

    You could try adding a

    Code
    display.layout.update();

    [/url] call to ensure that dynamic layout changes, like the parent change are performed.

    See:
    https://krpano.com/docu/xml/#display.layout.update

    Best regards,
    Klaus

    Klaus,

    First off, thank you for helping me with this.

    The layer[socket_stage] is part of the primary XML layout, non-dynamically generated.

    <layer name="socket_stage" type="container" style="socket_stage"></layer>

    I managed to get the video elements to render for the ATTENDEE by adding in display.layout.update(); ( as you suggested in two places - see code below ) but they are definitely no children of layer[socket_stage] in the ATTENDEE instance.
    Here are the Elements gleaned from the Element Inspector in Chrome.
    As you can see the HOST layer[socket_stage] definitly is parent to the plugin.

    I've included two screen captures of both HOST and ATTENDEE instances.
    Once again all of this is pulling from the same code base and using v1.21.

    HOST

    ATTENDEE

    HOST
    <div style="position: absolute; box-sizing: content-box; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background: none; visibility: visible; border-color: rgb(0, 0, 0); border-style: solid; border-width: 0px; border-radius: 0px; z-index: 163; width: 320px; height: 70px; transform: translateZ(0px) translate(717px, 417px) translate(0px, 0px);">
    <div style="position: absolute; box-sizing: content-box; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; z-index: 118; background: none no-repeat; visibility: visible; width: 320px; height: 70px; transform: translateZ(0px) translate(0px, 0px) translate(0px, 0px);">
    <div id="confdiv" style="width: 100%; height: 400px; overflow: hidden; position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;">
    </div>
    </div>
    </div>

    ATTENDEE
    <div style="position: absolute; box-sizing: content-box; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background: none; visibility: visible; border-color: rgb(0, 0, 0); border-style: solid; border-width: 0px; border-radius: 0px; z-index: 161; width: 320px; height: 70px; transform: translateZ(0px) translate(717px, 417px) translate(0px, 0px);"></div>

    Action segment with display.layout.update();
    addlayer(xplorit_conference);
    display.layout.update();
    set(layer[xplorit_conference].type, plugin);
    set(layer[xplorit_conference].parent, layer[socket_stage]);
    display.layout.update();
    set(layer[xplorit_conference].with, 100%);
    set(layer[xplorit_conference].height, 100%);
    set(layer[xplorit_conference].align, leftbottom);
    set(layer[xplorit_conference].x, 0);
    set(layer[xplorit_conference].y, 0);
    set(layer[xplorit_conference].keep, true);
    set(layer[xplorit_conference].visible, true);
    set(layer[xplorit_conference].alpha, 1.0);
    set(layer[xplorit_conference].enabled, true);
    set(layer[xplorit_conference].capture, true);
    set(layer[xplorit_conference].bgcapture, false);
    set(layer[xplorit_conference].zorder, 0);
    set(layer[xplorit_conference].room, %1);
    set(layer[xplorit_conference].mode, %2);
    set(layer[xplorit_conference].url,'/xplorit_common/frameworks/xplorit/plugins/xplorit_conference.min.js');
    set(layer[xplorit_conference].onloaded, conf_nav_open());
    display.layout.update();

    Klaus,

    The only way I have managed to get this to work is:

    1. When adding the plugin setting the parent with the full-path of of the parent layer and calling display.layout.update(); in the following two positions.
    addlayer(xplorit_conference);
    display.layout.update();
    set(layer[xplorit_conference].type, plugin);
    set(layer[xplorit_conference].parent, layer[socket_stage]);
    display.layout.update();
    ...

    2. As the very last operation in local.registerplugin we set the parent with the name, not the full-path;
    krpano.set("layer[xplorit_conference].parent", "socket_stage");

    I traced & logged this out to no end and can't find where the parent-child connection gets lost.
    No matter where in my code I get(layer[xplorit_conference].parent), it always comes up layer[socket_stage] although obviously this is not the case.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login