圖觀™應用編輯器 零基礎入門課(第六講)

圖觀digitail發表於2022-07-15

課程6:建立基本頁面互動

哈嘍,小夥伴們大家好~歡迎大家來到圖觀應用編輯器零基礎入門課程第6課,上節課程給大家講解了建立元件的操作方法,並且跟大家演示講解了如何利用元件建立詳情檢視和聯動對話方塊。


本節課程簡介

本節課主要通過6小節的內容來教大家,如何使用應用編輯器配置出:

(1)3個頁面的切換互動

(2)多個場景狀態的切換互動

(3)圖表與圖表聯動以及圖表

(4)圖層聯動4種頁面互動型別

這些互動也是數字孿生應用最基礎最常用的互動手段。那麼我們開始學習這些操作吧~


本節課完整版視訊



圖觀™️引擎 應用編輯器零基礎入門課程6《建立基本頁面互動,含頁面切換、狀態切換、聯動控制》_騰訊視訊

(點選視訊,觀看本節完整版教程)


本節課程詳解

1.通過導航欄配置多頁面切換

我們用“社群概覽”頁面為例給大家講解頁面切換如何配置。首先是修改頁面模板中的一級導航文字。

之前的課程我們講到了頁面模板中文字修改的方法,在左側控制元件列表或畫布中依次選中“一級導航”控制元件,在右側的屬性皮膚中,修改控制元件名稱和基礎設定中的文字為“社群概覽”“人車感知”“安全態勢”,然後把多餘的一級導航、二級導航刪掉。

然後點選畫布中的導航欄的“人車感知”控制元件,點選右側屬性皮膚下的互動設定,點選“新增互動行為”,觸發事件選擇:“頁面-跳轉頁面-確定”,點選“編輯”,選擇跳轉頁面至“人車感知”。

然後點選畫布中的“安全態勢”控制元件,點選右側屬性皮膚下的互動設定,點選“新增互動行為”,觸發事件選擇:“頁面-跳轉頁面-確定”,點選“編輯”,選擇跳轉頁面至“安全態勢”,點選“確定”並“儲存”。

同樣的將:“人車感知”“安全態勢”頁面中的3個主題按鈕也配置完成,點選“確定”並“儲存”,點選“預覽”,就可以看到3個頁面切換配置成功了。我們可以預覽整個系統,點選導航欄就可以進行頁面切換了。


2.配置場景多狀態切換

我們以“安全態勢”頁面-狀態導航欄-“社群全景”“自動旋轉”“自動漫遊”為例來和大家講下場景狀態的切換是怎麼配置的。

(1)狀態配置

首先來講一下“社群全景”按鈕的配置方法,我們從 【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置,選中畫布中的圖片按鈕,在右側 【屬性皮膚】中,設定控制元件名稱和按鈕文字為“社群全景”,切換至“樣式設定”,在 【基礎屬性】中對圖片按鈕的尺寸和位置進行配置,對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定,文字點選“開啟”,對文字的偏移量、陰影、樣式等內容進行自定義設定。

切換至“互動設定”,點選“新增互動行為”,觸發事件選擇:“場景-切換狀態-確定”,點選“編輯”,選擇切換狀態至“全景展示”,點選“確定”並“儲存”。

點選“新增互動行為”,觸發事件選擇:“場景-圖層-顯隱圖層-確定”,點選“編輯”,顯隱方式選擇“顯示圖層”,勾選全部圖層,點選“確定”並“儲存”。

同樣的操作方法,我們把“頂檢視”“閘機”“1號樓”“戶型剖分”“預設狀態”這幾個狀態也配置出來。值得注意的是,點選不同狀態按鈕會涉及到不同的視角,為了在不同視角下圖層展示的美觀,可以點選“新增互動行為”選擇顯隱部分圖層。

(2)自動旋轉

接下來講一下“自動旋轉”按鈕的配置方法,我們從 【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置,選中畫布中的圖片按鈕,在右側 【屬性皮膚】中,設定控制元件名稱和按鈕文字為“自動旋轉按鈕”,切換至“樣式設定”,在 【基礎屬性】中對圖片按鈕的尺寸和位置進行配置,對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定,文字點選“開啟”,對文字的偏移量、陰影、樣式等內容進行自定義設定。

切換至“互動設定”,點選“新增互動行為”,觸發事件選擇“攝像機-旋轉視野-確定”,點選“編輯”,設定旋轉一週時間“60”,旋轉方向“順時針”,點選“確定”並“儲存”。

(3)自動漫遊

最後在講一下“自動漫遊”按鈕的配置方法,我們從【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置,選中畫布中的圖片按鈕,在右側【屬性皮膚】中,設定控制元件名稱和按鈕文字為“自動漫遊按鈕”,切換至“樣式設定”,在【基礎屬性】中對圖片按鈕的尺寸和位置進行配置,對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定,文字點選“開啟”,對文字的偏移量、陰影、樣式等內容進行自定義設定。

切換至“互動設定”,點選“新增互動行為”,觸發事件選擇“其他-API指令集-確定”,點選“編輯”,將API程式碼貼上到文字框。

圖觀™應用編輯器 零基礎入門課(第六講)

小夥伴們可以通過以上3種方式獲取“智慧社群配套素材”

點選“新增互動行為”,觸發事件選擇“場景-圖層-顯隱圖層-確定”,點選“編輯”,顯隱方式選擇“顯示圖層”,隱藏全部圖層,點選“確定”並“儲存”。

點選“預覽”,我們可以預覽整個系統,點選狀態按鈕,可以看到三維場景在進行相應的切換狀態,證明狀態切換配置成功了。


3.配置圖表與圖表之間的聯動

接下來我們講解一下“安全態勢”頁面中安防事件處理狀態、事件型別、事件列表三個圖表之間的聯動是怎麼配置的。

首先回到上一級引數編輯中,引數名稱新增“安全態勢”,引數設定為“意外傷害、黑名單人員、點位著火、周界告警”;引數名稱新增“安防事件處理”,引數設定為“已完成、處理中、待處理”。

在進入 “安全態勢”頁面編輯介面,點選安防事件處理狀態環圖, 在右側屬性皮膚點選互動行為,被動接收引數開啟,預設繫結引數為安防事件處理,其他接收引數為安全態勢,點選傳送引數開始,預設繫結引數為安防事件處理

點選安防事件型別分析弧形圖,在右側屬性皮膚點選互動行為,被動接收引數開啟,預設繫結引數為安全態勢,其他接收引數為安防事件處理,點選傳送引數開始,預設繫結引數為安全態勢;

點選安防事件列表,在右側屬性皮膚點選互動行為,被動接收引數開啟,其他接收引數為安全態勢、安防事件處理,點選傳送引數關閉。點選“儲存”,點選“預覽”,點選安防事件處理狀態或者安防事件型別中的各個列舉,其他圖表資料都伴隨切換展示,證明三個圖表之間的聯動配置成功了。


4.配置圖表與場景圖層之間的聯動

我們可以看到在“安全態勢”頁面下,點選【安防事件總數】卡片,三維可顯示安防事件點位分佈情況。那這個表圖聯動的互動是怎麼做出來的呢?

首先點選畫布中的“安防事件總數”控制元件,點選右側屬性皮膚下的互動設定,點選“新增互動行為”,觸發事件選擇“場景-圖層-顯隱圖層-確定”,點選“編輯”,顯隱方式選擇“隱藏圖層”,勾選除告警事件、告警氣泡以外的全部圖層,點選“確定”並“儲存”。

另外保證該互動是在安全態勢預設狀態下顯示的,還要 增加一個互動行為:點選右側屬性皮膚下的互動設定,點選“新增互動行為”,觸發事件選擇“場景-切換狀態-確定”,點選“編輯”,選擇切換狀態至“安全態勢”,點選“確定”並“儲存”,點選“預覽”,就可以看到表圖聯動的互動配置成功了。


5.配置其他頁面、場景多狀態切換

同樣的操作方法,我們將“社群概覽”頁面、“人車感知”頁面的場景狀態切換按鈕逐一進行配置。點選“確定”並“儲存”。


6.預覽“智慧社群運營中心”專案階段成果

在3個頁面的主題切換、狀態切換編輯完成並儲存後,點選“預覽”按鈕,點選一級導航及狀態切換按鈕,檢視在3個頁面中我們所新增的互動行為。


本節總結

好的,本節課和大家操作演示瞭如何使用應用編輯器配置出:頁面切換、場景狀態切換、圖表與圖表聯動以及圖表與圖層聯動4種頁面互動型別,相信大家已經掌握了今天課程的內容,那本節課程到這裡就結束啦~


下節預告

下節課程呢,我們要繼續來教大家建立配置頁面中複雜互動的方法,包括:視訊接入、閘機模型開啟關閉的動畫控制、層級下鑽都是怎樣實現的。小夥伴一定要持續關注哦~


圖觀 線上試用地址

圖觀™引擎現可申請免費試用!現在試用還可獲得1對1技術支援和專屬大禮包~還等什麼,快快聯絡我們體驗圖觀™引擎的強大功能吧~

訪問圖觀™官方網站


圖觀™應用編輯器 零基礎入門課(第六講)


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70005982/viewspace-2905965/,如需轉載,請註明出處,否則將追究法律責任。

相關文章