環繞風景展示
# FastWeb 環繞風景展示
環繞風景展示的 IsoBean 參照 環繞風景展示-視覺化控制元件 進行改進。可在呼叫URL的同時傳入查詢參數 image，用於打開指定的環繞全景圖片。
# 1. 設計Bean模組
點選 [云服務工具] - [Bean模組(Web)]，打開Bean模組管理界面，點選 [新增] 按鈕，建立一個Bean模組，設定示例如下。點選 [儲存] 按鈕。
選擇剛才建立的Bean，點選 [Bean設計] 按鈕，進入Bean設計的主界面，設計的界面樣式如下。界面樣式與指令碼設計部分的配置參考 環繞風景展示-視覺化控制元件。
Bean模組在原有模組的基礎上修改的部分如下。
UgWebRunFrameOnAfterRunScript 中程式修改如下。
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
ViewInit(UniApplication.Parameters.Values["image"]);
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgWebRunFrameOnAfterRunScript(sender: tobject);
begin
UGMM.LC(Self);
ViewInit(UniApplication.Parameters.Values['image']);
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
ViewInit 修改如下。
//JScript
function ViewInit(url)
{
//設定全景圖片的來源
Ug3DAngle01.Options.image = url;
//設定專案的型別
Ug3DAngle01.Options.projectionType = pt_panorama;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure ViewInit(url);
begin
//設定全景圖片的來源
Ug3DAngle01.Options.image := url;
//設定專案的型別
Ug3DAngle01.Options.projectionType := pt_panorama;
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
新增 UgWebRunFrameOnAjaxEvent 事件，設定如下。
//JScript
function UgWebRunFrameOnAjaxEvent(sender,eventname,params)
//更新的WebSocket格式如下
//*****
//{
// "username": "demo", //運行IsoBean的使用者，修改爲實際運行的使用者
// "action": "callback",
// "tag":"0",
// "data": {
// "callbackcomponent": "wb-vis-0007_hydren_view",
// "callbackeventname": "update",
// "callbackparams": [
// {
// "paramname": "image",
// "paramvalue": "https://cdn.pixabay.com/photo/2020/07/14/19/21/field-5405425_960_720.jpg" //查詢的內容，修改爲想查詢的內容
// }
// ]
// }
//}
{
if (SameText(eventname,"update"))
{
ViewInit(Params.Values["image"]);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//PasScript
function UgWebRunFrameOnAjaxEvent(sender,eventname,params)
//更新的WebSocket格式如下
//*****
// "username": "demo", //運行IsoBean的使用者，修改爲實際運行的使用者
// "action": "callback",
// "tag":"0",
// "data": {
// "callbackcomponent": "wb-vis-0007_hydren_view",
// "callbackeventname": "update",
// "callbackparams": [
// {
// "paramname": "image",
// "paramvalue": "https://cdn.pixabay.com/photo/2020/07/14/19/21/field-5405425_960_720.jpg" //查詢的內容，修改爲想查詢的內容
// }
// ]
// }
//}
begin
if (SameText(eventname,'update')) then
begin
ViewInit(Params.Values['image']);
end;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Make sure to add code blocks to your code group
# 2. 設計IsoBean模組
點選 [云服務工具] - [IsoBean模組管理]，打開IsoBean模組管理界面，點選 [新增] 按鈕，按照以下提示建立一個IsoBean模組。點選 [儲存] 按鈕。
建立完成後，選擇建立的IsoBean，點選 [API設計]，建立的API請按照以下方式進行設定。
//JScript
function RestAPI()
{
var url,image,tag;
image = iif(URLParams.Values["image"]=="",APIParams.Values["image"],URLParams.Values["image"]);
tag = iif(URLParams.Values["tag"]=="",APIParams.Values["tag"],URLParams.Values["tag"]);
url = "/?bean="+Var_Bean + "&userkey=" + Var_UserKey + "&language=" + Var_Language + "&image=" + Httpencode(image) + "&tag=" + tag;
Result = " <html>"
+ " <body style=\"margin: 0px;height: 100%;width: 100%;\">"
+ " <iframe width=\"100%\" height=\"100%\" frameborder=\"no\" border=\"0\" marginwidth=\"0px\" marginheight=\"0px\" scrolling=\"no\" allowtransparency=\"yes\" src=\"" + url + "\""
+ " width=\"100%\""
+ " height=\"100%\""
+ " >"
+ " </iframe>"
+ " </body>"
+ " </html>";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PasScript
function RestAPI:String;
var
url: String;
image: String;
tag: String;
begin
image := iif(URLParams.Values['image']='',APIParams.Values['image'],URLParams.Values['image']);
tag := iif(URLParams.Values['tag']='',APIParams.Values['tag'],URLParams.Values['tag']);
url := '/?bean='+Var_Bean + '&userkey=' + Var_UserKey + '&language=' + Var_Language + '&image=' + image + "&tag=" + tag;
Result := ' <html>'
+ ' <body style="margin: 0px;height: 100%;width: 100%;">'
+ ' <iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0px" marginheight="0px" scrolling="no" allowtransparency=\"yes\" src="' + url + '"'
+ ' width="100%"'
+ ' height="100%"'
+ ' >'
+ ' </iframe>'
+ ' </body>'
+ ' </html>';
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Make sure to add code blocks to your code group
# 3. 發佈IsoBean
儲存后，返回列表界面，選擇剛才建立的IsoBean模組，點選 [IsoBean發佈]，打開 IsoBean 發佈界面。
選擇要發佈的使用者(admin)，點選 [IsoBean 選擇...]，從打開的IsoBean列表中選擇剛才建立的IsoBean模組，雙擊匯入至發佈列表中，點選 [儲存] 按鈕，然後點選 [確定] 按鈕關閉發佈界面。
重新返回API設計界面，點選 [測試] 圖示按鈕，打開界面。點選 [Send] 按鈕檢視運行的結果。如果返回的結果中包含資訊，則IsoBean建立成功。
按照本節開頭的方式將IsoBean發佈給其他使用者，之後，可使用 http://localhost:8888/?isobean=IB_wb-vis-0007_hydren_view&userkey={user_guid}&image={image} (opens new window) 來打開頁面。{user_guid} 為發佈使用者的ID，{image} 為使用全景模式檢視的圖片源。
當此 IsoBean 處於運行狀態時，可使用 WebSocket 發送以下訊息模板以更新圖片。
{
"username": "demo", //運行IsoBean的使用者，修改爲實際運行的使用者
"action": "callback",
"tag": "0",
"data": {
"callbackcomponent": "wb-vis-0007_hydren_view",
"callbackeventname": "update",
"callbackparams": [
{
"paramname": "image",
"paramvalue": "https://cdn.pixabay.com/photo/2020/07/14/19/21/field-5405425_960_720.jpg" //更新的圖片源，修改爲自定義的源，注意有些圖片源伺服器有CORS限制，不能直接載入，建議將檔案下載至本地伺服器后處理
}
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在FastWeb中使用以下示例來更新。
//JScript
{
var l;
l = new TStringlist();
//更新的圖片源，修改爲自定義的源，注意有些圖片源伺服器有CORS限制，不能直接載入，建議將檔案下載至本地伺服器后處理
l.Values["image"] = "https://cdn.pixabay.com/photo/2020/07/14/19/21/field-5405425_960_720.jpg";
//demo 處修改爲實際運行的使用者名稱稱
UGMM.SendWsMsg("demo","callback","wb-vis-0007_hydren_view","0","update",l);
l.Free;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
//PasScript
var
l: TStringList;
begin
l := TStringList.Create();
//更新的圖片源，修改爲自定義的源，注意有些圖片源伺服器有CORS限制，不能直接載入，建議將檔案下載至本地伺服器后處理
l.Values['image'] := '2022-01-01';
//demo 處修改爲實際運行的使用者名稱稱
UGMM.SendWsMsg('demo','callback','wb-vis-0007_hydren_view','0','update',l);
l.Free;
end;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// Make sure to add code blocks to your code group