建立基本頁面互動
課程6
哈嘍,小夥伴們大家好~歡迎大家來到圖觀應用編輯器零基礎入門課程第6課,上節課程給大家講解了建立元件的操作方法,並且跟大家演示講解了如何利用元件建立詳情檢視和聯動對話方塊。
本節課程簡介
本節課主要透過6小節的內容來教大家,如何使用應用編輯器配置出:
(1)3個頁面的切換互動
(2)多個場景狀態的切換互動
(3)圖表與圖表聯動以及圖表
(4)圖層聯動4種頁面互動型別
這些互動也是數字孿生應用最基礎最常用的互動手段。那麼我們開始學習這些操作吧~
本節課完整版影片
(點選影片,觀看本節完整版教程)
本節課程詳解
1.透過導航欄配置多頁面切換
我們用“社群概覽”頁面為例給大家講解頁面切換如何配置。首先是修改頁面模板中的一級導航文字。
之前的課程我們講到了頁面模板中文字修改的方法,在左側控制元件列表或畫布中依次選中“一級導航”控制元件,在右側的屬性面板中,修改控制元件名稱和基礎設定中的文字為“社群概覽”“人車感知”“安全態勢”,然後把多餘的一級導航、二級導航刪掉。
然後點選畫布中的導航欄的“人車感知”控制元件,點選右側屬性面板下的互動設定,點選“新增互動行為”,觸發事件選擇:“頁面-跳轉頁面-確定”,點選“編輯”,選擇跳轉頁面至“人車感知”。
然後點選畫布中的“安全態勢”控制元件,點選右側屬性面板下的互動設定,點選“新增互動行為”,觸發事件選擇:“頁面-跳轉頁面-確定”,點選“編輯”,選擇跳轉頁面至“安全態勢”,點選“確定”並“儲存”。
同樣的將:“人車感知”“安全態勢”頁面中的3個主題按鈕也配置完成,點選“確定”並“儲存”,點選“預覽”,就可以看到3個頁面切換配置成功了。我們可以預覽整個系統,點選導航欄就可以進行頁面切換了。
2.配置場景多狀態切換
我們以“安全態勢”頁面-狀態導航欄-“社群全景”“自動旋轉”“自動漫遊”為例來和大家講下場景狀態的切換是怎麼配置的。
(1)狀態配置
首先來講一下“社群全景”按鈕的配置方法,我們從
【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件
拖拽到畫布相應位置,選中畫布中的圖片按鈕,在右側
【屬性面板】
中,設定控制元件名稱和按鈕文字為“社群全景”,切換至“樣式設定”,在
【基礎屬性】
中對圖片按鈕的尺寸和位置進行配置,對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定,文字點選“開啟”,對文字的偏移量、陰影、樣式等內容進行自定義設定。
切換至“互動設定”,點選“新增互動行為”,觸發事件選擇:“場景-切換狀態-確定”,點選“編輯”,選擇切換狀態至“全景展示”,點選“確定”並“儲存”。
點選“新增互動行為”,觸發事件選擇:“場景-圖層-顯隱圖層-確定”,點選“編輯”,顯隱方式選擇“顯示圖層”,勾選全部圖層,點選“確定”並“儲存”。
同樣的操作方法,我們把“頂檢視”“閘機”“1號樓”“戶型剖分”“預設狀態”這幾個狀態也配置出來。值得注意的是,點選不同狀態按鈕會涉及到不同的視角,為了在不同視角下圖層展示的美觀,可以點選“新增互動行為”選擇顯隱部分圖層。
(2)自動旋轉
接下來講一下“自動旋轉”按鈕的配置方法,我們從
【資產庫】-【系統資產】-【控制元件】
中選擇圖片按鈕控制元件拖拽到畫布相應位置,選中畫布中的圖片按鈕,在右側
【屬性面板】
中,設定控制元件名稱和按鈕文字為“自動旋轉按鈕”,切換至“樣式設定”,在
【基礎屬性】
中對圖片按鈕的尺寸和位置進行配置,對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定,文字點選“開啟”,對文字的偏移量、陰影、樣式等內容進行自定義設定。
切換至“互動設定”,點選“新增互動行為”,觸發事件選擇“攝像機-旋轉視野-確定”,點選“編輯”,設定旋轉一週時間“60”,旋轉方向“順時針”,點選“確定”並“儲存”。
(3)自動漫遊
最後在講一下“自動漫遊”按鈕的配置方法,我們從【資產庫】-【系統資產】-【控制元件】中選擇圖片按鈕控制元件拖拽到畫布相應位置,選中畫布中的圖片按鈕,在右側【屬性面板】中,設定控制元件名稱和按鈕文字為“自動漫遊按鈕”,切換至“樣式設定”,在【基礎屬性】中對圖片按鈕的尺寸和位置進行配置,對圖片按鈕控制元件全域性樣式中的填充方式、按鈕圓角、按鈕顏色、按鈕背景圖片等各項引數進行自定義設定,文字點選“開啟”,對文字的偏移量、陰影、樣式等內容進行自定義設定。
切換至“互動設定”,點選“新增互動行為”,觸發事件選擇“其他-API指令集-確定”,點選“編輯”,將API程式碼貼上到文字框。
小夥伴們可以透過以上3種方式獲取“智慧社群配套素材”
點選“新增互動行為”,觸發事件選擇“場景-圖層-顯隱圖層-確定”,點選“編輯”,顯隱方式選擇“顯示圖層”,隱藏全部圖層,點選“確定”並“儲存”。
點選“預覽”,我們可以預覽整個系統,點選狀態按鈕,可以看到三維場景在進行相應的切換狀態,證明狀態切換配置成功了。
3.配置圖表與圖表之間的聯動
接下來我們講解一下“安全態勢”頁面中安防事件處理狀態、事件型別、事件列表三個圖表之間的聯動是怎麼配置的。
首先回到上一級引數編輯中,引數名稱新增“安全態勢”,引數設定為“意外傷害、黑名單人員、點位著火、周界告警”;引數名稱新增“安防事件處理”,引數設定為“已完成、處理中、待處理”。
在進入 “安全態勢”頁面編輯介面,點選安防事件處理狀態環圖,
在右側屬性面板點選互動行為,被動接收引數開啟,預設繫結引數為安防事件處理,其他接收引數為安全態勢,點擊發送引數開始,預設繫結引數為安防事件處理
;
點選安防事件型別分析弧形圖,在右側屬性面板點選互動行為,被動接收引數開啟,預設繫結引數為安全態勢,其他接收引數為安防事件處理,點擊發送引數開始,預設繫結引數為安全態勢;
點選安防事件列表,在右側屬性面板點選互動行為,被動接收引數開啟,其他接收引數為安全態勢、安防事件處理,點擊發送引數關閉。點選“儲存”,點選“預覽”,點選安防事件處理狀態或者安防事件型別中的各個列舉,其他圖表資料都伴隨切換展示,證明三個圖表之間的聯動配置成功了。
4.配置圖表與場景圖層之間的聯動
我們可以看到在“安全態勢”頁面下,點選【安防事件總數】卡片,三維可顯示安防事件點位分佈情況。那這個表圖聯動的互動是怎麼做出來的呢?
首先點選畫布中的“安防事件總數”控制元件,點選右側屬性面板下的互動設定,點選“新增互動行為”,觸發事件選擇“場景-圖層-顯隱圖層-確定”,點選“編輯”,顯隱方式選擇“隱藏圖層”,勾選除告警事件、告警氣泡以外的全部圖層,點選“確定”並“儲存”。
另外保證該互動是在安全態勢預設狀態下顯示的,還要
增加一個互動行為:點選右側屬性面板下的互動設定,點選“新增互動行為”,觸發事件選擇“場景-切換狀態-確定”,點選“編輯”,選擇切換狀態至“安全態勢”
,點選“確定”並“儲存”,點選“預覽”,就可以看到表圖聯動的互動配置成功了。
5.配置其他頁面、場景多狀態切換
同樣的操作方法,我們將“社群概覽”頁面、“人車感知”頁面的場景狀態切換按鈕逐一進行配置。點選“確定”並“儲存”。
6.預覽“智慧社群運營中心”專案階段成果
在3個頁面的主題切換、狀態切換編輯完成並儲存後,點選“預覽”按鈕,點選一級導航及狀態切換按鈕,檢視在3個頁面中我們所新增的互動行為。
本節總結
好的,本節課和大家操作演示瞭如何使用應用編輯器配置出:頁面切換、場景狀態切換、圖表與圖表聯動以及圖表與圖層聯動4種頁面互動型別,相信大家已經掌握了今天課程的內容,那本節課程到這裡就結束啦~
下節預告
下節課程呢,我們要繼續來教大家建立配置頁面中複雜互動的方法,包括:影片接入、閘機模型開啟關閉的動畫控制、層級下鑽都是怎樣實現的。小夥伴一定要持續關注哦~
圖觀
線上試用地址
圖觀™引擎現可申請免費試用!現在試用還可獲得1對1技術支援和專屬大禮包~還等什麼,快快聯絡我們體驗圖觀™引擎的強大功能吧~
1.訪問圖觀™官方網站,在瀏覽器中輸入網址:
https://www.tuguan.net
在圖觀™官方網站中,您可獲取圖觀™最新產品技術動態以及全面的開發指引,幫助您快速瞭解圖觀™數字孿生視覺化引擎。
2.新增數字冰雹客服微信,稽核通過後可獲取體驗邀請碼。
掃碼新增好友
內測申請/一對一諮詢
關注公眾號,瞭解更多資訊