feat(가이드): B04 전처리 가이드 글 8 · 그림 11 · 장면 목록(PLAN 540-1 · 요구 359 · 360)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-26 09:27:11 +09:00
parent 9bf63d00e0
commit ba69df8fa4
20 changed files with 705 additions and 4 deletions
@@ -1,9 +1,38 @@
-# 전처리 설명서
+# 전처리

-## 이 화면에서 하는 일
+올린 라이다 점들에서 땅 모양(지표면 모델)을 만들고, 그 지형 위에서 물이 어디로 모이는지(배수유역)까지 확인한 뒤 모델을 확정.
+
+## 여는 길
+
+- 파일입력의 분석이 끝나면 자동으로 열림.
+- 이미 끝난 프로젝트는 대시보드 [프로젝트] 표의 단계 막대에서 「전처리」 누름.
+
+![화면 한눈에](B04_00_overview.webp)
+
+## 화면 구역
+
+| 번호 | 구역 | 하는 일 |
+| --- | --- | --- |
+| 1 | 입력 포인트클라우드 | 분석할 라이다 파일 선택 · 좌표계 · 크기 · 점 개수 · 높이 범위 확인 |
+| 2 | 지표면 분석 | 지면 필터 · 서피스 · 스무딩을 골라 지표면 모델 선택 |
+| 3 | 모델 표시 옵션 | 축 · 서피스 · 등고선 켜고 끄기 · 등고선 간격 · 점 크기 · 밀도 |
+| 4 | 뷰어 시점 제어 | 사시도 · 상단 · 정면 · 측면으로 시점 바꿈 |
+| 5 | 단추 줄 | [?] 도움말 · [이 모델 확정] · [초기화] |
+| 6 | 진행 띠 | 분석 진행률과 안내 글 |
+| 7 | 입력 포인트클라우드 3D | 올린 점들을 3차원으로 봄 |
+| 8 | 지표면 모델 3D | 만들어진 땅 모양과 등고선 · 계획선 |
+| 9 | 도엽등고 3D 서피스 | 수치지형도 등고선으로 만든 지형 · 라이다 지형과 겹쳐 비교 |
+| 10 | 2D 배경 지도 및 GIS 레이어 | 지도 위에 계획선 · 등고선 · 배수유역 겹쳐 보기 |

 ## 작업 순서

-## 버튼
+1. 입력 파일과 점 개수 확인 → [입력 포인트클라우드](B04/01_입력_포인트클라우드).
+2. 지면 필터 · 서피스 · 스무딩을 골라 지표면 모델 선택 → [지표면 분석](B04/02_지표면_분석).
+3. 3D 화면을 돌려 보며 표시 옵션 조정 → [3D 보기](B04/03_3D_보기).
+4. 도엽등고 서피스로 라이다 모델과 비교 → [도엽등고 3D 서피스](B04/04_도엽등고_3D_서피스).
+5. 2D 지도에서 배수유역 확인 → [2D 지도와 GIS 레이어](B04/05_2D_지도와_GIS_레이어) · [배수유역](B04/06_배수유역).
+6. [이 모델 확정] → 노선 설계 화면으로 이동 → [모델 확정과 초기화](B04/07_모델_확정과_초기화).

-## 주의할 점
+> 주의: 처음 보는 조합(아직 계산하지 않은 지면 필터 · 서피스)을 고르면 계산 여부를 묻고, 계산에 수 분이 걸릴 수 있음.
+
+> 참고: 이 화면에는 [저장] 단추가 없고, [이 모델 확정] 이 저장과 다음 단계 이동을 겸함.
@@ -0,0 +1,27 @@
+# 입력 포인트클라우드
+
+분석에 쓸 라이다 파일을 고르고 파일 정보를 확인.
+
+## 여는 길
+
+- 전처리 화면 왼쪽 패널 맨 위 [입력 포인트클라우드] 카드.
+
+![입력 포인트클라우드 카드](B04_01_input_cloud.webp)
+
+그림 번호 — ① 입력 LAS 선택 칸 · ② 파일 정보 줄.
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | 선택 칸에서 분석할 입력 LAS 선택 (대개 하나) |
+| 2 | 아래 정보 줄 확인 |
+| 3 | 오른쪽 위 3D 화면에서 점이 제대로 보이는지 확인 |
+
+## 보이는 것
+
+- 정보 줄: 좌표계(EPSG 번호) · 크기(MB) · 포인트 수 · 표시 포인트 수 · 높이 범위(m).
+- 포인트 수가 크면 화면에는 50만 개 정도로 솎아 보여 줌(「500,000개 점 표시 중」).
+- 선택한 지면 필터에 따라 포인트 수가 달라짐(땅 점만 남기 때문).
+
+> 참고: 분석할 라이다 파일이 없으면 「분석 가능한 LAS/LAZ 파일이 없습니다.」 표시. [LAS 없이 설계] 로 올린 프로젝트는 도엽등고 서피스를 씀 → [B03 LAS 없이 설계](B03/05_LAS_없이_설계).
@@ -0,0 +1,43 @@
+# 지표면 분석
+
+지면 필터 · 서피스 · 스무딩 세 가지를 골라 지표면 모델을 정함.
+
+## 여는 길
+
+- 전처리 화면 왼쪽 패널 [지표면 분석] 카드.
+
+![지표면 분석 카드](B04_02_analysis_card.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | [지면 필터] 선택 — 나무 · 건물 점을 걷어내고 땅 점만 고르는 방법 |
+| 2 | [서피스] 선택 — 땅 점들을 면으로 만드는 방법 |
+| 3 | [스무딩] 에서 적용 또는 미적용 |
+| 4 | 오른쪽 위 3D 화면의 지표면 모델이 바뀌는지 확인 |
+
+그림 번호는 아래 표의 번호와 같음.
+
+| 번호 | 칸 | 선택지 |
+| --- | --- | --- |
+| 1 | 지면 필터 | CLASSIFICATION · GRID MIN Z · CSF · PMF |
+| 2 | 서피스 | TIN · DTM · NURBS · IMPLICIT · MESHFREE |
+| 3 | 스무딩 | 적용 · 미적용 |
+
+- CLASSIFICATION: 라이다 업체가 이미 분류해 둔 지면 점을 그대로 씀.
+- GRID MIN Z: 격자마다 가장 낮은 점을 땅으로 봄.
+- CSF: 지형을 뒤집어 가상의 천을 떨어뜨려 땅 점을 고름.
+- PMF: 창 크기를 키워 가며 나무 · 구조물을 단계적으로 걷어냄.
+
+## 보이는 것
+
+![계산 여부 확인 창](B04_03_build_confirm.webp)
+
+- 그림 ① 은 [서피스] 칸. 아직 계산하지 않은 조합을 고르면 「이 조합(…)은 아직 만들어지지 않았습니다. 지금 계산해 영구 저장할까요? 자료량에 따라 수 분이 걸립니다.」 확인 창이 뜸.
+- [계산하기] 를 누르면 계산해 저장하고, [취소] 하면 이전 조합으로 돌아감.
+- 서피스에 따라 스무딩이 안 되는 경우 「이 지표면 표현은 스무딩을 지원하지 않습니다.」 표시.
+
+> 주의: [계산하기] 는 오래 걸리고 창을 닫으면 안 됨 — 「지표면 모델 계산 중… 창을 닫지 마세요.」 표시 동안 기다림.
+
+> 참고: 이미 계산해 둔 조합은 바로 바뀜. 어느 조합이 가장 알맞은지 판단은 설계자가 정함.
@@ -0,0 +1,53 @@
+# 3D 보기
+
+입력 포인트클라우드와 지표면 모델을 3차원으로 돌려 보고, 표시 옵션과 시점을 바꿈.
+
+## 여는 길
+
+- 전처리 화면 위쪽 3D 화면 둘 · 왼쪽 패널의 [모델 표시 옵션] · [뷰어 시점 제어].
+
+![3D 화면 둘](B04_07_two_viewers.webp)
+
+그림 번호 — ① 입력 포인트클라우드 아래 점 개수 글 · ② 축척 막대 · ③ 방위 표시 · ④ 등고선 라벨.
+
+## 단계
+
+### 마우스로 보기
+
+| 조작 | 하는 일 |
+| --- | --- |
+| 왼쪽 단추를 누른 채 끌기 | 가리킨 점을 중심으로 돌림 |
+| 휠 | 가리킨 자리를 기준으로 가까이 · 멀리 |
+| 가운데(휠) 단추를 누른 채 끌기 | 화면을 옮김 |
+
+### 표시 옵션
+
+![모델 표시 옵션 카드](B04_04_display_options.webp)
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | (그림 ①) [축] · [서피스] · [등고선] 단추로 보이는 것을 켜고 끔 |
+| 2 | (그림 ② ③) 등고선을 켠 뒤 [간격] 칸에 숫자(m)를 넣고 [적용] |
+| 3 | (그림 ④) [점 크기] 슬라이더로 점의 굵기 조정 |
+| 4 | (그림 ⑤) [밀도] 슬라이더로 보이는 점의 비율 조정 |
+
+### 시점 바꾸기
+
+![뷰어 시점 제어 카드](B04_05_view_controls.webp)
+
+그림 번호는 아래 표 순서와 같음.
+
+| 단추 | 시점 |
+| --- | --- |
+| 사시도 | 비스듬히 내려다봄 |
+| 상단 | 바로 위에서 봄 |
+| 정면 | 앞쪽에서 봄 |
+| 측면 | 옆에서 봄 |
+
+## 보이는 것
+
+- 지표면 모델 화면에는 축척 막대 · 방위 표시 · 높이 색 범례 · 등고선 라벨(예: 850m) · 계획선이 함께 보임.
+- 등고선을 처음 켜면 「등고선을 그리는 중…」 표시 후 나타남.
+- 등고선 옵션 줄 아래에 현재 조합 요약(예: CLASSIFICATION · DTM · 등고선 1m)이 보임.
+
+> 참고: 점 크기와 밀도를 줄이면 오래된 컴퓨터에서 3D 화면이 부드러워짐.
@@ -0,0 +1,33 @@
+# 도엽등고 3D 서피스
+
+1:5,000 수치지형도(도엽)의 등고선만으로 만든 지형 모델. 라이다 모델과 비교하거나 라이다가 없을 때의 지형으로 씀.
+
+## 여는 길
+
+- 전처리 화면 가운데 [도엽등고 3D 서피스] 구역(3D 화면 둘 바로 아래).
+
+![도엽등고 3D 서피스 구역](B04_08_sheet_surface.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | 위쪽 단추 줄에서 만드는 방법 선택 — TIN(도엽선) · TIN 격자 · TPS(박판) · ANUDEM형 · 다중해상도 · 라플라스 |
+| 2 | [스무딩] 에서 적용 또는 미적용 |
+| 3 | [라이다 겹쳐 보기] 에 체크하면 라이다 지표면과 겹쳐 비교 |
+| 4 | 3D 화면을 돌려 두 모델의 차이를 확인 |
+
+| 번호 | 칸 | 하는 일 |
+| --- | --- | --- |
+| 1 | 방법 단추 줄 | 도엽 등고선으로 면을 만드는 방법 선택 |
+| 2 | 스무딩 | 면을 매끈하게 다듬음 |
+| 3 | 라이다 겹쳐 보기 | 라이다 모델과 겹침 |
+
+## 보이는 것
+
+- 위 그림은 현재 [라플라스] 가 진하게 표시된 모습.
+- 흐리게 보이는 방법은 아직 만들어지지 않은 것. 누르면 계산할지 묻는 확인 창이 뜸.
+- 지금 쓰는 방법은 진한 색으로 표시됨.
+- 라이다 지표면 모델이 없으면 「겹쳐 볼 라이다 지표면 모델이 없습니다.」 표시.
+
+> 참고: 3D 보는 조작은 위의 3D 화면과 같음 → [3D 보기](B04/03_3D_보기).
@@ -0,0 +1,38 @@
+# 2D 지도와 GIS 레이어
+
+배경 지도 위에 계획선 · 지적 · 행정구역 · 등고선 같은 국가 GIS 자료를 겹쳐 봄.
+
+## 여는 길
+
+- 전처리 화면 맨 아래 [2D 배경 지도 및 GIS 레이어] 구역.
+
+![레이어 단추 줄](B04_09_map_layers.webp)
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | [배경 지도] 줄에서 백지도 · 위성 · 하이브리드 가운데 선택 |
+| 2 | [국가 GIS 레이어] 줄에서 보고 싶은 층 단추를 눌러 켜고 끔 |
+| 3 | 지도 위에서 휠로 확대 · 축소, 가운데 단추를 끌어 옮김 |
+| 4 | 처음 모습으로 돌아가려면 [보기 초기화] |
+
+| 번호 | 줄 | 단추 |
+| --- | --- | --- |
+| 1 | 배경 지도 | 백지도 · 위성 · 하이브리드 |
+| 2 | 국가 GIS 레이어 | 계획선 · 연속지적도 · 시군구 · 읍면동 · 등고선 · 도엽 등고선 · 세류(전체) · 표고점 · 성절토 · 옹벽석축 · 등고 라벨 |
+| 3 | 배수유역 | 유역 분석 · 1차 유역 · 2차 유역 · 유역 방향 · 평균 흐름 · 흐름 강도 · 집중유역 · 상세유역 분석 · 세부유역 |
+| 4 | 보기 초기화 | 확대와 위치를 처음으로 |
+
+## 보이는 것
+
+![지도 화면](B04_10_map_view.webp)
+
+- 그림 ① 지도 오른쪽 아래 「○○개 객체 표시」 · ② 왼쪽 아래 축척 막대 · ③ 오른쪽 흐름 강도 색 범례 · ④ 위쪽 분석 결과 요약 글.
+- 켠 단추는 색 테두리로 표시됨.
+- 지도 오른쪽 아래에 「○○개 객체 표시」 · 왼쪽 아래에 축척 막대.
+- 흐름 강도를 켜면 오른쪽에 색 범례 · 위쪽에 분석 결과 요약 글이 나옴.
+- 지도를 불러오는 중에는 「지도 레이어를 불러오는 중입니다.」 · 실패하면 「지도 레이어를 불러오지 못했습니다.」 표시.
+- 계획선은 파일입력에서 올린 노선. 올리지 않았으면 「B03에서 계획노선 파일을 올리면 표시됩니다.」 표시.
+
+> 참고: 마우스 왼쪽 단추는 지도 위 객체를 고르는 데만 쓰고, 지도 이동은 가운데 단추.
@@ -0,0 +1,40 @@
+# 배수유역
+
+계획선 둘레에서 물이 어디로 모여 흘러드는지 지도에서 분석해 보고, 관이 들어갈 자리를 정함.
+
+## 여는 길
+
+- 전처리 화면 맨 아래 지도 구역의 [배수유역] 줄.
+
+![배수유역 줄과 지도](B04_10_map_view.webp)
+
+그림 번호 — ③ 흐름 강도 색 범례 · ④ 분석 결과 요약 글(자세한 번호는 [2D 지도와 GIS 레이어](B04/05_2D_지도와_GIS_레이어) 참고).
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | [유역 분석] 을 누름 — 30초 안팎 걸림 · 결과는 저장되어 다음에 열면 바로 보임 |
+| 2 | [1차 유역] · [2차 유역] · [유역 방향] · [평균 흐름] 을 켜고 끄며 결과 확인 |
+| 3 | [흐름 강도] 로 도로 1m마다 모이는 상류 면적을 색으로 확인 |
+| 4 | [집중유역] 으로 물이 특히 많이 모이는 자리(마커) 확인 · 마커를 누르면 그 자리로 들어오는 면의 외곽선이 보임 |
+| 5 | [상세유역 분석] 을 누르면 관 매설 지점을 기준으로 [세부유역] 을 나눔 |
+
+### 관 매설 지점 고르기
+
+| 조작 | 하는 일 |
+| --- | --- |
+| 계획선 위에서 오른쪽 단추 | [관 매설 추가] |
+| 마커 위에서 오른쪽 단추 | [관 매설 삭제] |
+| 마커를 끌기 | 계획선을 따라 자리 옮김 |
+
+## 보이는 것
+
+- 분석 중에는 「배수유역을 처음부터 다시 분석하는 중입니다. 30초 안팎 걸립니다…」 표시.
+- 저장된 결과가 있으면 [저장분] 표시와 함께 면적 · 유하장 같은 요약 글.
+- 관 요약 글 예: 「관 1개(기본 1 / 자동 0 / 수동 0) · 세부유역 2개」.
+- 관끼리 너무 가까우면 「관끼리 최소 간격 ○○m 안에는 넣을 수 없습니다.」.
+
+> 주의: 관을 고친 뒤에는 [상세유역 분석] 을 다시 눌러야 세부유역이 새로 나뉨(「편집 중」 표시).
+
+> 참고: 분석 결과와 관 매설 지점은 [이 모델 확정] 때 함께 저장됨 → [모델 확정과 초기화](B04/07_모델_확정과_초기화).
@@ -0,0 +1,31 @@
+# 모델 확정과 초기화
+
+고른 지표면 모델과 표시 설정을 확정해 노선 설계로 넘어가거나, 화면 값을 확정된 상태로 되돌림.
+
+## 여는 길
+
+- 전처리 화면 왼쪽 패널 맨 아래 단추 줄.
+
+![단추 줄](B04_06_confirm_reset.webp)
+
+그림 번호 — ① [?] · ② [이 모델 확정] · ③ [초기화].
+
+## 단계
+
+| 단계 | 할 일 |
+| --- | --- |
+| 1 | 지면 필터 · 서피스 · 스무딩과 등고선 간격을 정함 |
+| 2 | 배수유역을 분석했다면 관 매설 지점을 확인 |
+| 3 | [이 모델 확정] 누름 |
+| 4 | 「모델을 확정했습니다. 필터: …, 기법: …」 알림과 함께 노선 설계 화면(B05)으로 이동 |
+| 5 | 화면 값을 확정 상태로 되돌리려면 [초기화] |
+
+## 보이는 것
+
+- 확정하면 선택한 모델 · 스무딩 · 등고선 간격과 관 매설 지점이 함께 저장됨.
+- [초기화] 는 지면 필터 · 서피스를 기본으로 되돌리고 확정된 값을 다시 불러옴.
+- 오류 시 「모델 확정에 실패했습니다.」 알림.
+
+> 주의: 확정하면 이전 확정 값이 새 값으로 바뀜. 누르기 전에 지면 필터 · 서피스 · 스무딩 선택을 한 번 더 확인.
+
+> 참고: [?] 는 이 화면의 도움말.
@@ -0,0 +1,407 @@
+[
+  {
+    "name": "B04_00_overview",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "viewport": [
+      1600,
+      2000
+    ],
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__viewers"
+      },
+      {
+        "wait_ms": 2500
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": null,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(1)"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2)"
+      },
+      {
+        "n": 3,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(3)"
+      },
+      {
+        "n": 4,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(4)"
+      },
+      {
+        "n": 5,
+        "sel": ".ui-sidebar-actions"
+      },
+      {
+        "n": 6,
+        "sel": ".b04-surface__status"
+      },
+      {
+        "n": 7,
+        "sel": ".point-viewer"
+      },
+      {
+        "n": 8,
+        "sel": ".b04-surface__viewers > .terrain-model-group"
+      },
+      {
+        "n": 9,
+        "sel": ".b04-surface__sheet-section"
+      },
+      {
+        "n": 10,
+        "sel": ".b04-map"
+      }
+    ]
+  },
+  {
+    "name": "B04_01_input_cloud",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__form"
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(1)",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(1) select"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-surface__input-info"
+      }
+    ]
+  },
+  {
+    "name": "B04_02_analysis_card",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__form"
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2)",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2) .b04-surface__field:nth-of-type(1)"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2) .b04-surface__field:nth-of-type(2)"
+      },
+      {
+        "n": 3,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2) .b04-surface__field:nth-of-type(3)"
+      }
+    ]
+  },
+  {
+    "name": "B04_03_build_confirm",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__form"
+      },
+      {
+        "select": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2) select >> nth=1",
+        "value": "NURBS"
+      },
+      {
+        "wait_ms": 1500
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": null,
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(2) select >> nth=1"
+      }
+    ]
+  },
+  {
+    "name": "B04_04_display_options",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__form"
+      },
+      {
+        "eval": "(()=>{const bs=[...document.querySelectorAll('.b04-surface__form .ui-sidebar-scroll > section:nth-child(3) .toggle-button')].filter(e=>e.getBoundingClientRect().width>0);const rs=bs.map(e=>e.getBoundingClientRect());const L=Math.min(...rs.map(r=>r.left)),T=Math.min(...rs.map(r=>r.top)),R=Math.max(...rs.map(r=>r.right)),B=Math.max(...rs.map(r=>r.bottom));const d=document.createElement('div');d.id='__tg';d.style.cssText='position:absolute;pointer-events:none;left:'+(L+scrollX)+'px;top:'+(T+scrollY)+'px;width:'+(R-L)+'px;height:'+(B-T)+'px';document.body.appendChild(d)})()"
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(3)",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": "#__tg"
+      },
+      {
+        "n": 2,
+        "sel": ".contour-interval-input"
+      },
+      {
+        "n": 3,
+        "sel": ".contour-interval-submit"
+      },
+      {
+        "n": 4,
+        "sel": ".viewer-option-row:nth-of-type(1)"
+      },
+      {
+        "n": 5,
+        "sel": ".viewer-option-row:nth-of-type(2)"
+      }
+    ]
+  },
+  {
+    "name": "B04_05_view_controls",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "viewport": [
+      1600,
+      1100
+    ],
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__form"
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(4)",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(4) button >> nth=0",
+        "pos": "bl"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(4) button >> nth=1",
+        "pos": "bl"
+      },
+      {
+        "n": 3,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(4) button >> nth=2",
+        "pos": "bl"
+      },
+      {
+        "n": 4,
+        "sel": ".b04-surface__form .ui-sidebar-scroll > section:nth-child(4) button >> nth=3",
+        "pos": "bl"
+      }
+    ]
+  },
+  {
+    "name": "B04_06_confirm_reset",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".ui-sidebar-actions"
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".ui-sidebar-actions",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".ui-sidebar-actions .ui-help-btn"
+      },
+      {
+        "n": 2,
+        "sel": ".ui-sidebar-actions .ui-btn--filled"
+      },
+      {
+        "n": 3,
+        "sel": ".b04-surface__reset"
+      }
+    ]
+  },
+  {
+    "name": "B04_07_two_viewers",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__viewers"
+      },
+      {
+        "wait_ms": 2500
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-surface__viewers",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".point-viewer .b04-surface__status-info"
+      },
+      {
+        "n": 2,
+        "sel": ".point-viewer .b04-surface__scale"
+      },
+      {
+        "n": 3,
+        "sel": ".terrain-model-group .b04-surface__compass"
+      },
+      {
+        "n": 4,
+        "sel": ".terrain-model-group .contour-label"
+      }
+    ]
+  },
+  {
+    "name": "B04_08_sheet_surface",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-surface__sheet-section"
+      },
+      {
+        "scroll": ".b04-surface__sheet-section"
+      },
+      {
+        "wait_ms": 2500
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-surface__sheet-section",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-surface__sheet-toolbar"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-surface__sheet-smoothing"
+      },
+      {
+        "n": 3,
+        "sel": ".b04-surface__sheet-lidar"
+      }
+    ]
+  },
+  {
+    "name": "B04_09_map_layers",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-map"
+      },
+      {
+        "scroll": ".b04-map"
+      },
+      {
+        "wait_ms": 2500
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-map__controls",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-map__control-group:nth-child(1)"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-map__control-group:nth-child(2)"
+      },
+      {
+        "n": 3,
+        "sel": ".b04-map__control-group:nth-child(3)"
+      },
+      {
+        "n": 4,
+        "sel": ".b04-map__controls > button"
+      }
+    ]
+  },
+  {
+    "name": "B04_10_map_view",
+    "route": "#/b04-preprocess",
+    "project": "road",
+    "before": [
+      {
+        "eval": "document.head.insertAdjacentHTML('beforeend','<style>.ui-toast-container{display:none!important}</style>')"
+      },
+      {
+        "wait": ".b04-map"
+      },
+      {
+        "scroll": ".b04-map"
+      },
+      {
+        "wait_ms": 8000
+      }
+    ],
+    "settle_ms": 6000,
+    "clip": ".b04-map",
+    "callouts": [
+      {
+        "n": 1,
+        "sel": ".b04-map__status-corner"
+      },
+      {
+        "n": 2,
+        "sel": ".b04-map__scale"
+      },
+      {
+        "n": 3,
+        "sel": ".ui-flow-legend"
+      },
+      {
+        "n": 4,
+        "sel": ".b04-map__watershed-status"
+      }
+    ]
+  }
+]