✅ TÍNH NĂNG:

  1. Nút tạm dừng / tiếp tục autotour

  2. Tooltip bong bóng có hiệu ứng

  3. Menu hiện danh sách scene (popup menu)

  4. Cho phép người dùng chọn cảnh thủ công

  5. Ẩn/hiện menu theo nút bấm


✅ TOÀN BỘ CODE

1. 🌐 Khai báo biến và nút khởi động

<krpano version=”1.20.11″ onstart=”startup();”>

<!– Biến –>
<var name=”autotour_enabled” value=”true” />

<!– Hành động khởi động –>
<action name=”startup”>
loadscene(scene1);
</action>


2. 🎛️ Nút tạm dừng / tiếp tục + tooltip

<layer name=”autotour_btn”
url=”skin/pause.png”
align=”righttop” x=”20″ y=”20″ scale=”0.5″
handcursor=”true”
onclick=”toggle_autotour();”
onhover=”show_autotour_tooltip(); tween(scale, 0.6, 0.2);”
onout=”hide_autotour_tooltip(); tween(scale, 0.5, 0.2);” />

<layer name=”autotour_tooltip”
type=”text”
visible=”false”
text=”Tạm dừng tour”
css=”padding:6px 12px; background:#000000cc; color:#fff; border-radius:6px; font-size:14px; box-shadow:0px 2px 6px rgba(0,0,0,0.5);”
align=”righttop” x=”70″ y=”22″
autoalpha=”true” alpha=”0″ zorder=”2″ />


3. 🔁 Xử lý tooltip + toggle

<action name=”show_autotour_tooltip”>
set(layer[autotour_tooltip].visible, true);
tween(layer[autotour_tooltip].alpha, 1, 0.3);
</action>

<action name=”hide_autotour_tooltip”>
tween(layer[autotour_tooltip].alpha, 0, 0.3);
delayedcall(0.3, set(layer[autotour_tooltip].visible, false););
</action>

<action name=”toggle_autotour”>
if(autotour_enabled,
set(autotour_enabled, false);
set(layer[autotour_btn].url, ‘skin/play.png’);
set(layer[autotour_tooltip].text, ‘Tiếp tục tour’);
,
set(autotour_enabled, true);
set(layer[autotour_btn].url, ‘skin/pause.png’);
set(layer[autotour_tooltip].text, ‘Tạm dừng tour’);
call(continue_autotour);
);
</action>


4. 📋 Menu chọn scene

🎯 Nút mở menu:

<layer name="menu_btn"
url="skin/menu.png"
align="righttop" x="80" y="20" scale="0.5"
handcursor="true"
onclick="toggle_scene_menu();" />
 

📋 Menu popup:

<layer name=”scene_menu”
type=”container”
align=”righttop”
x=”20″ y=”70″
width=”200″ height=”auto”
bgcolor=”0x000000CC”
visible=”false”
padding=”10″
border=”1″
bordercolor=”0xffffff”
roundedge=”8″
zorder=”3″>

<layer name=”btn1″ type=”text” text=”Cảnh 1″
y=”0″
css=”color:#fff; font-size:16px; padding:5px;”
onclick=”loadscene(scene1);” />

<layer name=”btn2″ type=”text” text=”Cảnh 2″
y=”30″
css=”color:#fff; font-size:16px; padding:5px;”
onclick=”loadscene(scene2);” />

<layer name=”btn3″ type=”text” text=”Cảnh 3″
y=”60″
css=”color:#fff; font-size:16px; padding:5px;”
onclick=”loadscene(scene3);” />
</layer>

🧠 Toggle menu:

 <action name="toggle_scene_menu">
if(layer[scene_menu].visible,
set(layer[scene_menu].visible, false);
,
set(layer[scene_menu].visible, true);
);
</action>
 


5. 🌄 Scene có autotour tùy điều kiện

<scene name=”scene1″ title=”Cảnh 1″ onstart=”if(autotour_enabled, delayedcall(5, loadscene(scene2)); );”>
<view hlookat=”0″ vlookat=”0″ fov=”90″ />
<image><cube url=”panos/scene1_%s.jpg” /></image>
</scene>

<scene name=”scene2″ title=”Cảnh 2″ onstart=”if(autotour_enabled, delayedcall(7, loadscene(scene3)); );”>
<view hlookat=”0″ vlookat=”0″ fov=”90″ />
<image><cube url=”panos/scene2_%s.jpg” /></image>
</scene>

<scene name=”scene3″ title=”Cảnh 3″>
<view hlookat=”0″ vlookat=”0″ fov=”90″ />
<image><cube url=”panos/scene3_%s.jpg” /></image>
</scene>

</krpano>


🖼️ Hình ảnh gợi ý cho icon:

  • pause.png → icon tạm dừng

  • play.png → icon phát tiếp

  • menu.png → icon 3 gạch ngang (hamburger menu)

 


Xem thêm: 

  1. Mua bản quyền krpano – Buy Licenses
  2. Krpano Plugins
  3. Khóa học VR360