FastWeb之別墅3D展示

1. 說明

  js-cloudimage-360view是一個簡單且互動性強的庫，可用於虛擬展示產品的相關功能。其原理是通過圖片序列的排序，在界面中以幻燈片的方式展示，點選不同的視角呈現不同的圖片頁面。關於此範例使用的jQueryFrame示例的製作過程請參考360度瀏覽-自由視角-室內全景與360度瀏覽-自由視角-室外全景。

  通過本範例學習，可以掌握在示例中引入3D展示的相關功能。

2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  TUgImage元件，控制元件名稱為UgImage01。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel01，此控制元件為全域性佈局的容器控制元件。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel02，此控制元件為上半部分的佈局容器控制元件。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel04，此控制元件為左上部分顯示的佈局容器控制元件。

  1：TUgjQueryFrame元件，控制元件名稱為UgjQueryFrame01。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel05，此控制元件為右上部分顯示的佈局容器控制元件。

  2：TUgLabel元件，控制元件名稱為UgLabel01。

  3：TUgLabel元件，控制元件名稱為UgLabel02。

  4：TUgLabel元件，控制元件名稱為UgLabel05。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel03，此控制元件為下半部分的佈局容器控制元件。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel06，此控制元件為左下半部分的佈局容器控制元件。

  5：TUgLabel元件，控制元件名稱為UgLabel03。

  6：TUgLabel元件，控制元件名稱為UgLabel04。

  7：TUgLabel元件，控制元件名稱為UgLabel06。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel07，此控制元件為右下半部分的佈局容器控制元件。

  8：TUgjQueryFrame元件，控制元件名稱為UgjQueryFrame02。

  9：TUgTimer元件，控制元件名稱為UgTimer01。

• UgWebRunFrame屬性設定

  • Align：設定對齊的模式，設定為uniAlignmentClient。
  • Height：設定頁面高度=571。
  • Width：設定頁面寬度=1200。

• UgImage01屬性設定

  • Align：設定對齊的方式，設定為alClient。
  • Stretch：設定是否拉伸圖片顯示，設定為True。
  • Picture：設定圖片顯示，點選[√]打開圖片顯示的對話方塊，選擇圖片上傳。

• UgContainerPanel01屬性設定

  • Align：設定對齊方式，設定為alClient。
  • Layout：設定佈局的模式，設定為vbox。

• UgContainerPanel02屬性設定

  • Layout：設定佈局模式，設定為hbox。
  • LayoutConfig：設定佈局選項參數，Flex設定為1，Width設定為100%。

• UgContainerPanel04屬性設定

  • Layout：設定佈局模式，設定為fit。
  • LayoutConfig：設定佈局選項參數，Flex設定為1，Height設定為100%。

• 1：UgjQueryFrame01屬性設定

    雙擊打開管理器，在其中選擇360度瀏覽-自由視角-室外全景。

• UgContainerPanel05屬性設定

  • Layout：設定佈局模式，設定為hbox。
  • LayoutConfig：設定佈局選項參數，Flex設定為1，Width設定為100%。

• 2：UgLabel01屬性設定

  • Caption：設定顯示的字幕內容，設定為秀外。
  • Font：設定顯示的字型，點選[√]，打開字型設定界面。按照圖示進行設定。

  

• 3：UgLabel02屬性設定

  • AutoSize：設定是否自動根據文字內容縮放寬度，設定為False。
  • Caption：設定顯示的字幕內容，設定為不追求獨特風格 — 而著眼於恒久的美，採用現代簡約的設計語言，寬大的落地窗戶搭配素色外墻，讓建築歷久彌新。。
  • Font：設定顯示的字型，點選[√]，打開字型設定界面。按照圖示進行設定。

  

  • Width：設定顯示的寬度，設定為372。

• 4：UgLabel05屬性設定

  • Caption：設定顯示的字幕內容，設定為瞭解更多...。
  • Font：設定顯示的字型，點選[√]，打開字型設定界面。按照圖示進行設定。

  

• UgContainerPanel03屬性設定

  • Layout：設定佈局模式，設定為hbox。
  • LayoutConfig：設定佈局選項參數，Flex設定為1，Width設定為100%。

• UgContainerPanel04屬性設定

  • LayoutConfig：設定佈局選項參數，Flex設定為1，Height設定為100%。

• 5：UgLabel03屬性設定

  • Caption：設定顯示的字幕內容，設定為慧中。
  • Font：設定顯示的字型，點選[√]，打開字型設定界面。按照圖示進行設定。

  

• 6：UgLabel04屬性設定

  • AutoSize：設定是否自動根據文字內容縮放寬度，設定為False。
  • Caption：設定顯示的字幕內容，設定為全屋搭配智慧控制系統，預設多種居家場景，在不同的場景下呈現不同的環境效果，舒適感大幅提升。。
  • Font：設定顯示的字型，點選[√]，打開字型設定界面。按照圖示進行設定。

  

  • Width：設定顯示的寬度，設定為372。

• 7：UgLabel06屬性設定

  • Caption：設定顯示的字幕內容，設定為瞭解更多...。
  • Font：設定顯示的字型，點選[√]，打開字型設定界面。按照圖示進行設定。

  

• UgContainerPanel07屬性設定

  • Layout：設定佈局模式，設定為fit。
  • LayoutConfig：設定佈局選項參數，Flex設定為1，Height設定為100%。

• 8：UgjQueryFrame02屬性設定

    雙擊打開管理器，在其中選擇360度瀏覽-自由視角-室內全景。

• 9：UgTimer01屬性設定

  • Interval：設定時間間隔，設定為100。

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式無需引用單元。

3.1. 程式初始設定

  初始化jQueryFrame程式。

//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

{
  UgJQueryFrame02.Init("64F17C00-C4E1-4B98-9522-E7B3C23EE899");
  UgJQueryFrame01.Init("3F8A74D3-4367-43CC-B065-99D85DB539AE");
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;


Begin
  UgJQueryFrame02.Init('64F17C00-C4E1-4B98-9522-E7B3C23EE899');
  UgJQueryFrame01.Init('3F8A74D3-4367-43CC-B065-99D85DB539AE');
End.

// Make sure to add code blocks to your code group

3.2. 事件設定

• 9：UgTimer01-OnTimer事件

  初始化事件，顯示室內與室外的場景。

//JScript
function UgTimer01OnTimer(sender)
{
  UgJQueryFrame02.JSONTOData("{\"param_folder\":\"library/js/js-cloudimage-360-view/demo/outdoor/\"," + 
  "\"param_filename\": \"00_Haus_000{index}.jpg\"}");
  UgJQueryFrame01.JSONTOData("{\"param_folder\":\"library/js/js-cloudimage-360-view/demo/indoor/\"," + 
  "\"param_filename\": \"{index}.jpeg\"}"); 
  UgTimer01.Enabled = False;
}

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
  UgJQueryFrame02.JSONTOData('{"param_folder":"library/js/js-cloudimage-360-view/demo/outdoor/",' + 
  '"param_filename": "00_Haus_000{index}.jpg"}');
  UgJQueryFrame01.JSONTOData('{"param_folder":"library/js/js-cloudimage-360-view/demo/indoor/",' + 
  '"param_filename": "{index}.jpeg"}'); 
  UgTimer01.Enabled := False;
end;

// Make sure to add code blocks to your code group

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  左上角與右下角的場景可通過滑鼠點選來實現全景切換的功能。