Hello Tuur,Have you tried using particles.js(https://particles.js.org/)? If you can use it in combination with krpano, there are a lot of effects can be use.
I have tried many times, canvas animation, but no success...
Hello Tuur,Have you tried using particles.js(https://particles.js.org/)? If you can use it in combination with krpano, there are a lot of effects can be use.
I have tried many times, canvas animation, but no success...
Hi,
sorry, but I don't understand that case...
For me the example as it is, is working correctly...About scope=local - just adding that to the original example wouldn't work because both actions (loadingpercent_startloading and loadingpercent_stoploading) are using the same variables. Here optionally also a private local scope could be used to share the variables.
Best regards,
Klaus
1.20.9 original example:
<action name="loadingpercent_startloading">
showlog();
set(loadingpercent_isloading, true);
set(layer[loadingpercent_text].visible, true);
asyncloop(loadingpercent_isloading,
mul(pv, progress.progress, 100);
roundval(pv,0);
trace('percent_text:',pv);
txtadd(layer[loadingpercent_text].html, 'Loading ', get(pv), '%');
);
</action>
Display More
result:
INFO: krpano 1.20.9 (build 2020-11-19)
INFO: HTML5/Desktop - Chrome 88.0 - WebGL
INFO: percent_text:0 [145x]
INFO: percent_text:17
INFO: percent_text:33 [15x]
1.20.9 my code:
<action name="loadingpercent_startloading" scope="local">
showlog();
set(loadingpercent_isloading, true);
set(layer[loadingpercent_text].visible, true);
asyncloop(loadingpercent_isloading,
mul(pv, progress.progress, 100);
roundval(pv,0);
trace('percent_text:',pv);
txtadd(layer[loadingpercent_text].html, 'Loading ', get(pv), '%');
if(pv==100,delayedcall(0.25,set(loadingpercent_isloading, false);set(layer[loadingpercent_text].visible, false);););
);
</action>
Display More
result:
INFO: krpano 1.20.9 (build 2020-11-19)
INFO: HTML5/Desktop - Chrome 88.0 - WebGL
INFO: percent_text:0 [162x]
INFO: percent_text:17
INFO: percent_text:33 [87x]
INFO: percent_text:50 [30x]
INFO: percent_text:67 [76x]
INFO: percent_text:83 [48x]
INFO: percent_text:100 [16x]
1.19.10 original example result:
INFO: krpano 1.19-pr10 (build 2017-05-10)
INFO: HTML5/Desktop - Chrome 88.0 - WebGL
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:0
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:17
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:33
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:50
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:67
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:83
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
INFO: percent_text:100
Display More
since version1.2,it can't display progress' correct value.
if action not set scope="local",it will show like:
0%
17%
and then the layer (loadingpercent_text) will be hide
link:https://krpano.com/releases/1.20.…ress/index.html
xml:https://krpano.com/viewsource.htm…percenttext.xml
fix code:
<krpano>
<!-- loading percent events -->
<events name="loadingpercent" keep="true"
onxmlcomplete="loadingpercent_startloading();"
/>
<!-- loading percent text -->
<layer name="loadingpercent_text" keep="true"
type="text"
align="center"
y="10%"
background="false"
css="color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:22px; font-style:italic;" textshadow="2"
html=""
/>
<!-- loading percent actions -->
<action name="loadingpercent_startloading" scope="local">
set(loadingpercent_isloading, true);
set(layer[loadingpercent_text].visible, true);
asyncloop(loadingpercent_isloading,
trace(progress.progress);
mul(pv, progress.progress, 100);
roundval(pv,0);
txtadd(layer[loadingpercent_text].html, 'Loading ', get(pv), '%');
if(pv==100,delayedcall(0.25,set(loadingpercent_isloading, false);set(layer[loadingpercent_text].visible, false);););
);
</action>
</krpano>
Display More
LOL...Screen to Gif ,recording screen,about 7ms,more or less
so delayedcall 100ms is ok,no scene/screen flash cross
but also hope klaus.krpano fix it or give some advice.now just like perfect,it not perfect.
use layers onload event also have about 7ms scene
thank you indexofrefraction,i have to use delayedcall to fix it.
<layer name="layer_load_test" url="layertest.jpg" keep="true" visible="true" height="100%" width="100%" safearea="false" onclick="set(x,-3000)" onloaded="delayedcall(0.1,set(layer[load_test_container_overlay].alpha,0));"/>
now look like perfect
<layer name="load_test_container" type="container" height="100%" width="100%" bgcolor="0x3c6b05" bgalpha="1" keep="true" zorder="99">
<layer name="layer_load_test" url="layertest.jpg" keep="true" visible="true" height="100%" width="100%" safearea="false" onclick="set(x,-3000)"/>
</layer>
this is my use code,it not perfect.i set container's bgcolor like image's bgcolor.
i still want get some way to solution this issue.
Hi indexofrefraction,i try it,but no effect
<layer name="load_test_container_overlay" type="container" height="100%" width="100%" bgcolor="0x000000" bgalpha="1" keep="true" zorder="100"/>
<events name="remove_overlay" keep="true" onloadcomplete="set(layer[load_test_container_overlay].alpha,0)"/>
<layer name="load_test_container" type="container" height="100%" width="100%" bgcolor="0x000000" bgalpha="0" keep="true" zorder="99">
<layer name="layer_load_test" url="layertest.jpg" keep="true" visible="true" height="100%" width="100%" safearea="false" onclick="set(x,-3000)"/>
</layer>
I test set layer type is container,it is ok.
<layer name="load_test_container" type="container" height="100%" width="100%" bgcolor="0x000000" bgalpha="1" keep="true" zorder="99" onclick="set(x,-3000)" bgcapture="true"/>
if layer type is image,it will caused this bug.it's will show adout 10+ ms scene
below code also caused this bug
I found a problem with the display of the layer,the layer will show after the scene load finish.this is a bug?
When i open the vtour,i will first see black backgroud color and then see the scene ,the last see the layer.
1.bgcolor
2.scene
3.layer
But this is not what i want.I want first see the layer,after click will see scene.
1.bgcolor
2.layer
3.click-->layer-->scene
this is my code
<layer name="layer_load_test" url="layertest.jpg" keep="true" visible="true" height="100%" width="100%" safearea="false" zorder="99" onclick="set(x,-3000)/>
<scene name="scene_pano" title="pano" onstart="" thumburl="panos/pano.tiles/thumb.jpg" lat="" lng="" heading="">
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/pano.tiles/preview.jpg" />
<image>
<cube url="panos/pano.tiles/pano_%s.jpg" />
</image>
</scene>
Display More
attachments is my frame-by-frame recording
thank you so much :indexofrefraction , klaus
I set width and height 120% and set layer align center can fill screen.
This is bug?
<layer name="layer_bg"
type="container"
bgcolor="0xcccccc"
preload="true"
handcursor="false"
enabled="true"
children="true"
visible="true"
zorder="90"
maskchildren="true"
keep="true"
width="100%"
height="100%" bgalpha="1" bgcapture="true"
/>
Display More
iphone fullscreen,width set 100%,it can't fill screen.how to solve it?height also has this problem without the default skin
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
use this code on krpanoplugin,pr13 is ok ,but pr15-16,ERROR: parsing './plugins/test.js' failed:SyntaxError: Unexpected token :,what's wrong with it?
1.link css
<link rel="stylesheet" type="text/css" href="//cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
2.xml code-hotspot(can't display css icon)
<hotspot name="spot1" style="test" ath="0" atv="0" html="1235555 [span class='mdi mdi-map-marker-radius' /]" />
<style name="test" type="text" url="%SWFPATH%/plugins/textfield.swf" backgroundcolor="0x000000" backgroundalpha="0.8" css="font-size:20px; color:#ffffff" />
3.xml code-layer(can display css icon)
<layer name="spot1" style="test" ath="0" atv="0" html="1235555 [span class='mdi mdi-map-marker-radius' /]" />
<style name="test" type="text" url="%SWFPATH%/plugins/textfield.swf" backgroundcolor="0x000000" backgroundalpha="0.8" css="font-size:20px; color:#ffffff" />
i want to use hotspot,but it can't display css icon,what's wrong?
How to solve it? chrome 66.0.3359.181
QuoteVM37:5 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
Quoteinitvars:{timestamp:Date.parse(new Date())},
Quote<include url="test.xml?%$timestamp%" />
The above code is very very slowly.
----------------------------------------------------------------------------
The following code is working fine.
Quoteinitvars:{timestamp:"1516535425"},
Quote<include url="test.xml?%$timestamp%" />
---------------------------------------------------------------------------
why?
I want to pause the background music when the video is played.
below is my code,when pauseonstart is false,i can not use onvideoplay event. How can I deal with it?
<hotspot name="videospot" url="%SWFPATH%/plugins/videoplayer.swf"
alturl="%SWFPATH%/plugins/videoplayer.js" videourl="1.mp4|1.webm"
posterurl="1.jpg"
ath="-0.024664"
atv="-2.167905"
width="200"
height="300"
scale="0.31117"
distorted="true"
rx="0"
ry="0"
rz="-0.137759"
edge="center"
loop="false"
pausedonstart="false"
directionalsound="true"
range="200" volume="0.7"
onclick="togglepause();"
onvideoplay="test(true);"
onvideopaused="test(false);"
onvideocomplete="test(false);"
/>
<action name="test">
if(%1 == true,set(plugin[soundinterface].mute,true);,set(plugin[soundinterface].mute,false););
</action>
Display More