FastWeb 3D-AI控制元件

• 適用平臺： APP(移動端)

  此組中的控制元件為3D展示的圖形與多媒體控制元件，以及與智慧識別相關的控制元件。

1. TUgApp3DAngle

  此控制元件用於展示環繞式全景圖片或者球形的全景圖片。通過初始參數的設定以及圖片地址的設定可在網頁頁面上顯示全景圖片。

1.1. 屬性

屬性	說明
Options	設定顯示的相關屬性

1.1.1. Options

property Options: TApp3DAngleOptions;

  設定3D顯示的相關選項。

1.1.1.1. cubemapconfig

property cubemapConfig: string;

  當projectionType屬性設定為cubemap或者cubestrip時，此項生效，用於配置專案的佈局設定。

1.1.1.2. fov

property fov: Integer;

  設定全景圖片顯示的視角。

1.1.1.3. fovRange

property fovRange: string

  設定全景圖片可調整的視角的顯示範圍。,比如[30,70]。

1.1.1.4. gyroMode

property gyroMode: TgyroMode;

  設定全景陀螺儀的工作模式。

• gm_none：不使用陀螺儀。
• gm_VR：使用VR模式進行工作。
• gm_yawPicth：使用航向模式進行工作。

1.1.1.5. gyroOption

property gyroOption: Boolean;

  設定是否在界面上顯示陀螺儀設定的按鈕選項。

1.1.1.6. image

property image: string;

  用於設定顯示的全景圖片的來源地址。此地址支援外鏈的地址，也支援本機的地址。請注意，如果在https下訪問FastWeb的，引入的外鏈地址也必須以https開頭，反之如果是在http下訪問FastWeb的，則引入的外鏈地址是http，否則會出現跨域請求的問題導致無法訪問。

1.1.1.7. pitch

property pitch: Integer;

  設定初始狀態下顯示的影象的俯仰角度。

1.1.1.8. pitchRange

property pitchRange: string;

  設定影象可調整顯示的俯仰角度的範圍。

1.1.1.9. projectionType

property projectionType: TprojectionType;

  設定全景影象的型別。可選的專案有以下型別。

• pt_cubemap：設定為立方體貼圖的全景模式。
• pt_cubestrip：設定為Cubestrip的全景模式。Cubestrip 是一種由六個立方體面組合而成的單一影象格式。 它幾乎與立方體貼圖相同，但實現方式不同。 它旨在獲得更好的效能和效率。 此外，它會自動檢測並支援 EAC。
• pt_equirectangular：等距柱狀投影全景模式。此模式下使用的全景圖片為2:1比例格式。通常由全景相機進行拍攝。
• pt_panorama：圓柱投影的全景模式，此模式的圖片通常來源於手機拍攝的全景影象。
• pt_stereoequi：立體等距柱狀投影全景模式。此模式下使用兩張2:1比例格式的全景圖片組成立體VR格式。

1.1.1.10. showPolePoint

property showPolePoint: Boolean;

  此項用於設定是否顯示極點。

1.1.1.11. strreoFormat

property stereoFormat: TstereoFormat;

  設定等距柱狀投影的內容格式。有以下選項可用。

• 3dh：左右立體 360 等距柱狀投影格式的常數值。
• 3dv：頂部底部立體 360 等距柱狀投影格式的常數值。
• none：指定媒體的常量值不是立體格式。

1.1.1.12. touchDirection

property touchDirection: Integer;

  設定初始的觸控方向。

1.1.1.13. touchOption

property touchOption: Boolean;

  設定是否顯示觸控設定的按鈕。

1.1.1.14. useKeyboard

property useKeyboard: Boolean;

  設定是否使用鍵盤進行顯示。

1.1.1.15. useZoom

property useZoom: Boolean;

  設定是否使用縮放的相關功能。

1.1.1.16. yaw

property yaw: Integer;

  設定圖片顯示的航向的角度。

1.1.1.17. yawRange

property yawRange: string;

  設定圖片顯示的航向的角度範圍。

1.2. 方法

1.2.1. Init

procedure Init;

  此方法用於對控制元件進行初始化操作，在設定完成Options的相關選項后可呼叫此方法來載入顯示。

2. TUgApp3DView

  此控制元件用於對商品或者場景進行動態幻燈片型別的展示。通過滑鼠的拖動，切換照片顯示的角度，獲得近似於全景展示的效果。通過設定檔案的目錄，檔案序號列表規則以及參數的相關設定后，可顯示相應的展示圖片場景。

2.1. 屬性

屬性	說明
Options	設定3D顯示的相關選項

2.1.1. Options

property Options: TApp3DViewOptions

  此專案中包含了用於設定顯示的選項。下面將進行詳細介紹。

2.1.1.1. button_bottom

property button_bottom: Boolean;

  此項用於設定是否顯示底部的向下提示按鈕。

2.1.1.2. button_next

property button_next: Boolean;

  此項用於設定是否顯示右側的向後提示按鈕。

2.1.1.3. button_prev

property button_prev: Boolean;

  此項用於設定是否顯示左側的向前提示按鈕。

2.1.1.4. button_top

property button_top: Boolean;

  此項用於設定是否顯示頂部的向上提示按鈕。

2.1.1.5. data_amount

property data_amount: Double;

  設定用於展示的圖片檔案的數量。

2.1.1.6. data_amount_y

property data_amount_y: Double;

  設定用於y軸展示的圖片檔案的數量。

2.1.1.7. data_api_version

property data_api_version: string;

  設定使用api的版本號，預設為v7，一般不需要對其進行調整。

2.1.1.8. data_autoplay

property data_autoplay: Boolean;

  此項用於設定是否啟用自動播放幻燈片的功能。

2.1.1.9. data_autoplay_behaviour

property data_autoplay_behavior: Tdata_autoplay_behavior;

  此項用於設定自動播放的性為。

• spin_x：沿著x軸的方向排序進行播放。
• spin_xy：先沿著x軸的方向，后沿著y軸的方向排序進行播放。
• spin_yx：先沿著y軸的方向，后沿著x軸的方向排序進行播放。
• spin_y：沿著y軸的方向排序進行播放。

2.1.1.10. data_autoplay_reverse

property data_autoplay_reverse: Boolean;

  此項用於設定是否啟用自動反向播放幻燈片的功能。

2.1.1.11. data_bottom_circle

property data_bottom_circle: Boolean;

  此項用於設定是否顯示底部的360全景提示環。

2.1.1.12. data_bottom_circle_offset

property data_bottom_circle_offset: Double;

  此項用於設定全景提示環的位置偏移量。當數值增大時，提示環上移。

2.1.1.13. data_box_shadow

property data_box_shadow: string;

  用於設定容器的邊框css樣式。例如：inset 0 0 100px #222。

2.1.1.14. data_control_reverse

property data_control_reverse: Boolean;

  設定是否反向控制全景影象的播放。

2.1.1.15. data_disable_drag

property data_disable_drag: Boolean;

  設定是否禁用拖動變換全景影象。

2.1.1.16. data_disable_pinch_zoom

property data_disable_pinch_zoom: Boolean;

  設定是否禁用手指捏合縮放的功能，此功能僅在觸控式螢幕模式下可用。

2.1.1.17. data_disable_pointer_zoom

property data_disable_pointer_zoom: Boolean;

  設定是否禁用指針點選縮放的功能。

2.1.1.18. data_drag_speed

property data_drag_speed: Double;

  設定在拖動滑鼠以播放全景幻燈片時每一幀播放的時間間隔，以ms為單位。

2.1.1.19. data_filename

property data_filename: string;

  設定顯示的圖片序列的名稱，序號的部分使用{index}來代替。

2.1.1.20. data_filename_y

property data_filename_y: string;

  設定顯示在y軸方向上的圖片序列的名稱，序號的部分使用{index}來代替。

2.1.1.21. data_folder

property data_folder: string;

  設定顯示的圖片序列所在的目錄地址。

2.1.1.22. data_full_screen

property data_full_screen: Boolean;

  設定是否在界面上顯示全屏提示的控制按鈕。

2.1.1.23. data_hide_360_logo

property data_hide_360_logo: Boolean;

  設定是否在初始的載入完成狀態下顯示360全景的logo提示。

2.1.1.24. data_image_list

property data_image_list: TStrings;

  此項用於手動指定顯示于圖片列表中的圖片專案以實現全景幻燈片方式的展示。

2.1.1.25. data_index_zero_base

property data_index_zero_base: Double;

  此項用於設定圖片序列的編號數字中如果有包含前導零的，表示前導零的數量，預設值為0表示不設定。此項需根據序號中數字的位數來確定，比如編號規則是0001，則應設定目前選項為4。

2.1.1.26. data_keys

property data_keys: Boolean;

  此項用於設定是否使用鍵盤來控制全景幻燈片的播放。

2.1.1.27. data_lazyload

property data_lazyload: Boolean;

  設定是否啟用延遲載入的模式。

2.1.1.28. lazy_load_selector

property data_lazyload_selector: string;

  設定延遲載入的選擇器。

  預設情況下，延遲載入的功能並不包含在控制元件中。 有很好的庫可以實現這一目標。 如果在配置中啟用延遲載入，則需要新增一個額外的庫，如lazysizes，yall.js（Yet Another Lazy Loader），lozad.js來處理它。

  要儲存API呼叫，可以使用以下庫來處理

<!---CDN鏈接到js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7--->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>

<!--CDN鏈接到js-cloudimage-360-view 1.1.0 + yall.js 3.1.1-->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>

<!--CDN鏈接到js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0-->
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>

2.1.1.29. data_logo_src

property data_logo_src: string;

  設定logo圖片的來源。可選擇本地或者網路的圖片來進行顯示。

2.1.1.30. data_magnifier

property data_magnifier: Double;

  設定圖片的放大倍率，預設選項為3。

2.1.1.31. data_maxscale

property data_max_scale: Double;

  設定全景圖片支援的最大縮放倍率。

2.1.1.32. data_on_mouse_leave

property data_on_mouse_leave: string;

  設定當滑鼠離開全景顯示區域時呼叫的方法。可設定的項為resetZoom，即圖片恢復原始的縮放倍率。預設為none。

2.1.1.33. data_pinch_zoom_factor

property data_pinch_zoom_factor: Double;

  設定使用雙指捏合縮放時縮放的因數。

2.1.1.34. data_play_once

property data_play_once: Boolean;

  設定是否僅進行一次自動播放。

2.1.1.35. data_pointer_zoom_factor

property data_pointer_zoom_factor: Double;

  設定使用滑鼠游標進行縮放操作時縮放的因數。

2.1.1.36. data_ratio

property data_ratio: Double;

  用於指定圖片顯示的寬高比，避免圖片因為大小不統一出現跳頁。

2.1.1.37. data_speed

property data_speed: Double;

  設定圖片顯示播放的幀的間隔時間，設定為ms。

2.1.1.38. data_spin_reverse

property data_spin_reverse: Boolean;

  設定是否在播放時反序號順序播放圖片。

2.1.1.39. data_stop_at_edges

property data_stop_at_edges: Boolean;

  設定是否取消圖片幻燈片的循環播放功能。

2.1.1.40. data_to_start_pointer_zoom

property data_to_start_pointer_zoom: Tdata_to_start_pointer_zoom;

  設定啟用游標縮放的方式，有以下選項。

• none：不使用游標縮放。
• click：使用點選以進行縮放。
• scroll：使用滾輪以進行縮放。

2.2. 方法

2.2.1. Init

procedure Init;

  此方法用於對控制元件進行初始化操作，在設定完成Options中的相關選項后，可呼叫此方法來載入顯示。

3. TUgApp3DVideo

  此元件可用於展示播放360°全景視訊。

3.1. 屬性

屬性	說明
Options	設定顯示的相關屬性

3.1.1. Options

property Options: TApp3DAngleOptions;

  設定3D顯示的相關選項。

3.1.1.1. cubemapconfig

property cubemapConfig: string;

  當projectionType屬性設定為cubemap或者cubestrip時，此項生效，用於配置專案的佈局設定。

3.1.1.2. fov

property fov: Integer;

  設定全景圖片顯示的視角。

3.1.1.3. fovRange

property fovRange: string

  設定全景圖片可調整的視角的顯示範圍。,比如[30,70]。

3.1.1.4. gyroMode

property gyroMode: TgyroMode;

  設定全景陀螺儀的工作模式。

• gm_none：不使用陀螺儀。
• gm_VR：使用VR模式進行工作。
• gm_yawPicth：使用航向模式進行工作。

3.1.1.5. gyroOption

property gyroOption: Boolean;

  設定是否在界面上顯示陀螺儀設定的按鈕選項。

3.1.1.6. pitch

property pitch: Integer;

  設定初始狀態下顯示的影象的俯仰角度。

3.1.1.7. pitchRange

property pitchRange: string;

  設定影象可調整顯示的俯仰角度的範圍。

3.1.1.8. projectionType

property projectionType: TprojectionType;

  設定全景影象的型別。可選的專案有以下型別。

• pt_cubemap：設定為立方體貼圖的全景模式。
• pt_cubestrip：設定為Cubestrip的全景模式。Cubestrip 是一種由六個立方體面組合而成的單一影象格式。 它幾乎與立方體貼圖相同，但實現方式不同。 它旨在獲得更好的效能和效率。 此外，它會自動檢測並支援 EAC。
• pt_equirectangular：等距柱狀投影全景模式。此模式下使用的全景圖片為2:1比例格式。通常由全景相機進行拍攝。
• pt_panorama：圓柱投影的全景模式，此模式的圖片通常來源於手機拍攝的全景影象。
• pt_stereoequi：立體等距柱狀投影全景模式。此模式下使用兩張2:1比例格式的全景圖片組成立體VR格式。

3.1.1.9. showPolePoint

property showPolePoint: Boolean;

  此項用於設定是否顯示極點。

3.1.1.10. strreoFormat

property stereoFormat: TstereoFormat;

  設定等距柱狀投影的內容格式。有以下選項可用。

• 3dh：左右立體 360 等距柱狀投影格式的常數值。
• 3dv：頂部底部立體 360 等距柱狀投影格式的常數值。
• none：指定媒體的常量值不是立體格式。

3.1.1.11. touchDirection

property touchDirection: Integer;

  設定初始的觸控方向。

3.1.1.12. touchOption

property touchOption: Boolean;

  設定是否顯示觸控設定的按鈕。

3.1.1.13. useKeyboard

property useKeyboard: Boolean;

  設定是否使用鍵盤進行顯示。

3.1.1.14. useZoom

property useZoom: Boolean;

  設定是否使用縮放的相關功能。

3.1.1.15. video

property video: string

  用於設定顯示的全景視訊的來源地址。此地址支援外鏈的地址，也支援本機的地址。請注意，如果在https下訪問FastWeb的，引入的外鏈地址也必須以https開頭，反之如果是在http下訪問FastWeb的，則引入的外鏈地址是http，否則會出現跨域請求的問題導致無法訪問。

  地址的格式示例見下：

<!-- mp4視訊源地址引入-->
<source src="library/js/egjs-view360/examples/img/seven.mp4" type="video/mp4">  
<!--webm視訊源地址引入-->
<source src="library/js/egjs-view360/examples/img/seven.webm" type="video/webm"> 

3.1.1.16. yaw

property yaw: Integer;

  設定圖片顯示的航向的角度。 3.1.1.15.

3.1.1.17. yawRange

property yawRange: string;

  設定圖片顯示的航向的角度範圍。

3.2. 方法

3.2.1. Init

procedure Init;

  此方法用於對控制元件進行初始化操作，在設定完成Options的相關選項后可呼叫此方法來載入顯示。

3.2.2. Play

procedure Play;

  開始進行播放全景視訊。

3.2.3. Pause

procedure Pause;

  執行暫停播放全景視訊。

3.2.4. setVideo

procedure setVideo;

  可執行替換視訊播放器中的播放來源。

//JScript
  UgApp3DVideo01.Init;
  UgApp3DVideo01.SetVideo("ibrary/js/egjs-view360/examples/img/seven.mp4","{projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR}");
  UgApp3DVideo01.Play;

//PasScript
  UgApp3DVideo01.Init;
  UgApp3DVideo01.SetVideo('library/js/egjs-view360/examples/img/seven.mp4','{projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR}');
  UgApp3DVideo01.Play;

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

4. TUgAppAlbumView

  此元件以相簿的形式展示圖片序列，在底部顯示圖冊的縮圖，點選對應的縮圖可檢視圖片。

4.1. 屬性

屬性	說明
Image	設定圖片顯示的列表
Options	設定幻燈片的屬性設定選項

4.1.1. HTML

property Image: TStringList;

  設定圖片、視訊顯示的圖片集合，格式顯示如下。

<!--圖片支援的顯示格式-->
<img src="library/js/fotorama/image/1.jpg">
<img src="library/js/fotorama/image/2.jpg">
<img src="library/js/fotorama/image/3.jpg">
<img src="library/js/fotorama/image/4.jpg">
<img src="library/js/fotorama/image/5.jpg">
<!--視訊支援的顯示格式-->
<a href="https://www.samplevideo.com/iframe/video1?autoplay=1" data-video="true">
<img src="library/js/fotorama/image/food5.jpg"></a>

  其中src后的地址請替換為自定義的地址。此地址支援外鏈的地址，也支援本機的地址。請注意，如果在https下訪問FastWeb的，引入的外鏈地址也必須以https開頭，反之如果是在http下訪問FastWeb的，則引入的外鏈地址是http，否則會出現跨域請求的問題導致無法訪問。

4.1.2. Options

property Options: TAppAlbumViewOptions;

  設定顯示的相關參數。可用於設定的相關參數如下。

4.1.2.1. data_allowfullscreen

property data_allowfullscreen: Boolean;

  設定是否將目前顯示的內容以全屏的方式展示。

4.1.2.2. data_arrows

property data_arrows: Boolean;

  設定是否在目前顯示的內容中展示切換圖片的箭頭。

4.1.2.3. data_autoplay

property data_autoplay: string;

  此項用於設定在自動播放模式下播放每張圖片切換的時間間隔，以ms為單位，如果設定為none，則自動播放的模式被關閉。

4.1.2.4. data_click

property data_click: Boolean;

  設定是否啟用控制元件的點選切換圖片的功能。

4.1.2.5. data_clicktransition

property data_clicktransition: Tdata_transition;

  設定點選按鈕時切換圖片的樣式。

4.1.2.6. data_direction

property data_direction: Tdata_direction;

  設定照片集切換的方向。

• rtl：從右向左切換。
• ltr：從左向右切換。

4.1.2.7. data_fit

property data_fit: Tdata_fit;

  選擇圖片在控制元件中的展示佈局方式。

• contain：將圖片保持比例進行伸縮以適應佈局顯示。
• cover：將圖片進行擷取，以適應預設的寬高比進行佈局顯示。
• scaledown：當顯示的圖片解析度比控制元件容器解析度大時進行縮小以適應顯示。
• none：使用圖片自己的解析度來進行顯示。如果大於容器則顯示居中的部分。

4.1.2.8. data_glimpse

property data_glimpse: string;

  設定以畫素或者百分比表示的附近的幀影象的概覽的大小。

4.1.2.9. data_hash

property data_hash: Boolean;

  當啟用此選項后，在圖片進行切換時會更改頁面的URL。

4.1.2.10. data_height

property data_height: string;

  設定以畫素或者百分比表示的展示容器的高度。

4.1.2.11. data_keyboard

property data_keyboard: Boolean;

  設定是否啟用鍵盤切換圖片展示的功能。

4.1.2.12. data_loop

property data_loop: Boolean;

  設定是否啟用圖片序列集合循環展示的功能。

4.1.2.13. data_margin

property data_margin: Integer;

  設定以畫素為單位的圖片之間的水平邊距。

4.1.2.14. data_maxheigh

property data_maxheigh: string;

  設定以畫素或者百分比表示的展示容器允許的最大高度。

4.1.2.15. data_maxwidth

property data_maxwidth: string;

  設定以畫素或者百分比表示的展示容器允許的最大寬度。

4.1.2.16. data_minheight

property data_minheight: string;

  設定以畫素或者百分比表示的展示容器允許的最小高度。

4.1.2.17. data_minwidth

property data_minwidth: string;

  設定以畫素或者百分比表示的展示容器允許的最小寬度。

4.1.2.18. data_nav

property data_nav: string;

  設定圖片導航欄的顯示方式。

• dots：顯示為點狀。
• thumbs：顯示縮圖。
• false：不顯示導航欄。

4.1.2.19. data_navposition

property data_navposition: string;

  設定顯示導航欄的位置。此項僅在data_nav不設定為false時有效。

• bottom：顯示于底部。
• top：顯示于頂部。

4.1.2.20. data_navwidth

property data_navwidth: string;

  以畫素或者百分比設定導航欄容器的寬度。

4.1.2.21. data_raio

property data_ratio: string;

  設定寬高比，如果使用的寬度屬性為百分比，則此處建議使用。

4.1.2.22. data_shadows

property data_shadows: Boolean;

  設定是否顯示陰影效果。

4.1.2.23. data_shuffle

property data_shuffle: Boolean;

  設定是否在啟動時隨機打亂圖片順序進行顯示。

4.1.2.24. data_startindex

property data_startindex: string;

  設定影象序列的起始顯示位置。圖片是從0開始編號排序的。

4.1.2.25. data_stopautoplayontouch

property data_stopautoplayontouch: Boolean;

  設定是否在使用者點選、觸控操作控制元件時停止自動播放。

4.1.2.26. data_swipe

property data_swipe: Boolean;

  設定是否在切換圖片時啟用滑動視覺效果。

4.1.2.27. data_thumbborderwidth

property data_thumbborderwidth: Integer;

  設定顯示縮圖導航欄時，提示邊框的寬度。

4.1.2.28. data_thumbfit

property data_thumbfit: string;

  設定縮圖在界面中的顯示方式。

• contain：將圖片保持比例進行伸縮以適應佈局顯示。
• cover：將圖片進行擷取，以適應預設的寬高比進行佈局顯示。
• scaledown：當顯示的圖片解析度比控制元件容器解析度大時進行縮小以適應顯示。
• none：使用圖片自己的解析度來進行顯示。如果大於容器則顯示居中的部分。

4.1.2.29. data_thumbheight

property data_thumbheight: Integer;

  設定縮圖區域顯示的畫素高度。

4.1.2.30. data_thumbmarign

property data_thumbmargin: Integer;

  設定縮圖區域顯示的畫素邊距。

4.1.2.31. data_thumbwidth

property data_thumbwidth: Integer;

  設定縮圖區域顯示的畫素寬度。

4.1.2.32. data_transition

property data_transition: Tdata_transition;

  設定圖片切換的樣式。

• silde：圖片滑動切換。
• crossfade：交叉淡化疊加切換。
• dissolve：交叉溶解切換。

4.1.2.33. data_width

property data_width: string;

  設定控制元件顯示區域的寬度。

4.2. 方法

4.2.1. Init

procedure Init;

  此方法用於對控制元件進行初始化操作，在設定完成Options的相關選項后可呼叫此方法來載入顯示。

4.2.2. Show

procedure Show(const Value: string);

  設定要顯示的圖片內容，有以下幾種使用方式。

//JScript
//顯示序號為0的圖片
UgAppAlbumView01.Show("0");

//顯示下一張
UgAppAlbumView01.Show(">");

//顯示上一張
UgAppAlbumView01.Show("<");

//顯示最後一張
UgAppAlbumView01.Show(">>");

//設定一張圖片顯示的時長
UgAppAlbumView01.Show("{index:1,time:500}");

//PasScript
//顯示序號為0的圖片
UgAppAlbumView01.Show('0');

//顯示下一張
UgAppAlbumView01.Show('>');

//顯示上一張
UgAppAlbumView01.Show('<');

//顯示最後一張
UgAppAlbumView01.Show('>>');

//設定一張圖片顯示的時長
UgAppAlbumView01.Show('{index:1,time:500}');

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

4.2.3. First

procedure First;

  呼叫此方法后，可用於顯示序列中的第一張圖片。

4.2.4. Next

procedure Next;

  呼叫此方法后，可用於顯示圖片序列中的下一張圖片。

4.2.5. Previous

procedure Previous;

  呼叫此方法后，可用於顯示圖片序列中的上一張圖片。

4.2.6. Last

procedure Last;

  呼叫此方法后，可用於顯示圖片序列中的最後一張圖片。

4.2.7. StartAutoplay

procedure StartAutoplay;

  呼叫此方法后，可開始進行自動播放。

4.2.8. StopAutoplay

procedure StopAutoplay;

  呼叫此方法后，可停止自動播放的過程。

4.2.9. RequestFullScreen

procedure RequestFullScreen;

  呼叫此方法后，可將控制元件進行全屏展示。

4.2.10. CancelFullScreen

procedure CancelFullScreen;

  呼叫此方法后，可取消控制元件的全屏顯示。

4.2.11. PlayVideo

procedure PlayVideo;

  圖片序列中如果正在展示視訊型別的對象，呼叫此方法可開始進行視訊播放。

4.2.12. StopVideo

procedure StopVideo;

  圖片序列中如果目前正在播放視訊，呼叫此方法可停止視訊的播放。

4.2.13. Resize

procedure Resize(const Value: string);

  呼叫此方法可重新調整大小。使用的方法如下：

//JScript
//width 與height中的數值可以使用數值或者百分比來進行表示
UgAppAlbumView01.Resize("{width: 500,height: 333}");

//PasScript
//width 與height中的數值可以使用數值或者百分比來進行表示
UgAppAlbumView01.Resize('{width: 500,height: 333}');

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

4.2.14. SetOptions

procedure SetOptions(const Value: string);

  呼叫此方法可修改參數資訊。使用的方法如下。

//JScript
//可修改的參數屬性均來源於Options屬性中，去掉屬性名稱前的'data_'識別符號就可引入至此作為屬性名稱來使用。
UgAppAlbumView01.SetOptions("{nav: false,arrows: false}");

//PasScript
//可修改的參數屬性均來源於Options屬性中，去掉屬性名稱前的'data_'識別符號就可引入至此作為屬性名稱來使用。
UgAppAlbumView01.SetOptions('{nav: false,arrows: false}');

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

4.2.15. Load

procedure Load(const Value: string);

  呼叫此方法可載入選擇的圖片為新的圖片序列。使用的方式如下。

//JScript
UgAppAlbumView01.Load("[{img: 'library/js/fotorama/image/food1.jpg', thumb: 'library/js/fotorama/image/food1.jpg'}," + 
"{img: 'library/js/fotorama/image/food2.jpg', thumb: 'library/js/fotorama/image/food2.jpg'}]");

//PasScript
UgAppAlbumView01.Load('[{img: ''library/js/fotorama/image/food1.jpg'', thumb: ''library/js/fotorama/image/food1.jpg''},' + 
'{img: ''library/js/fotorama/image/food2.jpg'', thumb: ''library/js/fotorama/image/food2.jpg''}]');

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

4.2.16. Push

procedure Push(const Value: string);

  呼叫此方法將選擇的圖片加入目前的圖片序列中，使用的方式如下。

//JScript
//下述方法可將圖片以及對應的縮圖加入至圖片序列。
UgAppAlbumView01.Push("{img: 'library/js/fotorama/image/food2.jpg', thumb: 'library/js/fotorama/image/food2.jpg'}");

//PasScript
//下述方法可將圖片以及對應的縮圖加入至圖片序列。
UgAppAlbumView01.Push('{img: ''library/js/fotorama/image/food2.jpg'', thumb: ''library/js/fotorama/image/food2.jpg''}');

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

4.2.17. Pop

procedure Pop;

  呼叫此方法將最後一張圖片移除出目前序列。

4.2.18. Shift

procedure Shift;

  呼叫此方法將第一張圖片移除出目前序列。

4.2.19. UnShift

procedure Unshift(const Value: string);

  呼叫此方法將選擇的圖片插入至圖片序列中。使用的方式如下。

//JScript
UgAppAlbumView01.Unshift("{img: 'library/js/fotorama/image/food2.jpg', thumb: 'library/js/fotorama/image/food2.jpg'}");

//PasScript
UgAppAlbumView01.Unshift('{img: ''library/js/fotorama/image/food2.jpg'', thumb: ''library/js/fotorama/image/food2.jpg''}');

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

4.2.20. Reverse

procedure Reverse;

  將圖片顯示進行反向排序。

4.2.21. Shuffle

procedure Shuffle;

  將圖片顯示的順序打亂後重新進行排序顯示。

5. TUgAppImageClassifier

  此控制元件為圖片分類識別元件，將圖片傳遞給控制元件，可通過識別來區分當前圖片所屬的分類型別。此控制元件需要在https模式訪問FastWeb的情況下才可使用，

5.1. 屬性

屬性	說明
Image	設定要識別的圖形影象

5.1.1. Image

property Image: TUgAppImage;

  設定要用於識別的圖形影象的內容。當圖形影象發生變化時，會觸發控制元件的圖形識別的功能。

5.2. 事件

5.2.1. OnResult事件

procedure UgAppImageClassifier01OnResult(sender: tobject;const alabel: string;const aconfidence: string);

  設定當控制元件識別有結果需要輸出時觸發事件。

  以下為示例，標示如何使用此事件輸出結果資訊。

//JScript
function UgAppImageClassifier01OnResult(sender,alabel,aconfidence)
{
  UgAppMemo01.Lines.Add("label："+alabel);
  UgAppMemo01.Lines.Add("confidence："+aconfidence);
}

//PasScript
procedure UgAppImageClassifier01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgMemo01.Lines.Add('label：'+alabel);
  UgMemo01.Lines.Add('confidence：'+aconfidence);
end;

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

5.3. 方法

5.3.1. Init

procedure Init;

  設定對控制元件進行初始化操作。

6. TUgAppObjectDetect

  此元件用於設定物體檢測，輸入圖片后，反饋檢測的結果。此控制元件需要在https模式訪問FastWeb的情況下才可使用。

6.1. 屬性

屬性	說明
Image	設定要識別的圖形影象

6.1.1. Image

property Image: TUgAppImage;

  設定要用於識別的圖形影象的內容。當圖形影象發生變化時，會觸發控制元件的圖形識別的功能。

6.2. 事件

6.2.1. OnResult事件

procedure UgAppObjectDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);

  設定當控制元件識別有結果需要輸出時觸發事件。

  以下為示例，標示如何使用此事件輸出結果資訊。

//JScript
function UgAppObjectDetect01OnResult(sender,alabel,aconfidence)
{
  UgAppMemo01.Lines.Add("label："+alabel);
  UgAppMemo01.Lines.Add("confidence："+aconfidence);
}

//PasScript
procedure UgAppObjectDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgAppMemo01.Lines.Add('label：'+alabel);
  UgAppMemo01.Lines.Add('cofidence：'+aconfidence);
end;

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

6.3. 方法

6.3.1. Init

procedure Init;

  設定對控制元件進行初始化操作。

7. TUgAppVideoDetect

  此元件可通過攝像頭獲取到的視訊流來分析檢測的物體。此元件需要在https模式訪問FastWeb的情況下才可使用。

7.1. 事件

7.1.1. OnResult事件

procedure UgAppVideoDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);

  設定當檢測識別到物體后觸發事件，用於反饋識別的結果。

//JScript
function UgAppVideoDetect01OnResult(sender,alabel,aconfidence)
{
  UgAppMemo01.Lines.Add("label:"+alabel);
  UgAppMemo01.Lines.Add("confidence:"+aconfidence);
}

//PasScript
procedure UgAppVideoDetect01OnResult(sender: tobject;const alabel: string;const aconfidence: string);
begin
  UgAppMemo01.Lines.Add('label:'+alabel);
  UgAppMemo01.Lines.Add('confidence:'+aconfidence);
end;

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

7.2. 方法

7.2.1. Init

procedure Init;

  設定對控制元件進行初始化操作，初始化后相機會被打開以開始識別。