KR20210127131A - 상호 작용 gps 통합, 3d 모델링 공간 생성을 위한 시스템 및 방법 - Google Patents

상호 작용 gps 통합, 3d 모델링 공간 생성을 위한 시스템 및 방법 Download PDF

Info

Publication number
KR20210127131A
KR20210127131A KR1020217016596A KR20217016596A KR20210127131A KR 20210127131 A KR20210127131 A KR 20210127131A KR 1020217016596 A KR1020217016596 A KR 1020217016596A KR 20217016596 A KR20217016596 A KR 20217016596A KR 20210127131 A KR20210127131 A KR 20210127131A
Authority
KR
South Korea
Prior art keywords
location
user
page
digital
data
Prior art date
Application number
KR1020217016596A
Other languages
English (en)
Inventor
로스 에이치 와킨슨
스티븐 탄너 클라크
에디슨 웨인 루디
시에라 브레안 포츠
Original Assignee
다이멘셔널 에셋 솔루션스, 엘엘씨
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 다이멘셔널 에셋 솔루션스, 엘엘씨 filed Critical 다이멘셔널 에셋 솔루션스, 엘엘씨
Publication of KR20210127131A publication Critical patent/KR20210127131A/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/003—Navigation within 3D models or images
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/011—Arrangements for interaction with the human body, e.g. for user immersion in virtual reality
    • G—PHYSICS
    • G01—MEASURING; TESTING
    • G01C—MEASURING DISTANCES, LEVELS OR BEARINGS; SURVEYING; NAVIGATION; GYROSCOPIC INSTRUMENTS; PHOTOGRAMMETRY OR VIDEOGRAMMETRY
    • G01C21/00—Navigation; Navigational instruments not provided for in groups G01C1/00 - G01C19/00
    • G01C21/20—Instruments for performing navigational calculations
    • G01C21/206—Instruments for performing navigational calculations specially adapted for indoor navigation
    • G—PHYSICS
    • G01—MEASURING; TESTING
    • G01C—MEASURING DISTANCES, LEVELS OR BEARINGS; SURVEYING; NAVIGATION; GYROSCOPIC INSTRUMENTS; PHOTOGRAMMETRY OR VIDEOGRAMMETRY
    • G01C21/00—Navigation; Navigational instruments not provided for in groups G01C1/00 - G01C19/00
    • G01C21/26—Navigation; Navigational instruments not provided for in groups G01C1/00 - G01C19/00 specially adapted for navigation in a road network
    • G01C21/34—Route searching; Route guidance
    • G01C21/36—Input/output arrangements for on-board computers
    • G01C21/3626—Details of the output of route guidance instructions
    • G01C21/3635—Guidance using 3D or perspective road maps
    • G01C21/3638—Guidance using 3D or perspective road maps including 3D objects and buildings
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
    • G06T17/05—Geographic models
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/04—Indexing scheme for image data processing or generation, in general involving 3D image data
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2210/00—Indexing scheme for image generation or computer graphics
    • G06T2210/04—Architectural design, interior design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
    • G06T2219/004—Annotating, labelling
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
    • G06T2219/024—Multi-user, collaborative environment

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Remote Sensing (AREA)
  • Radar, Positioning & Navigation (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Graphics (AREA)
  • Geometry (AREA)
  • Computer Hardware Design (AREA)
  • Automation & Control Theory (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

실제 위치의 디지털 3D 표현과 인터페이스하기 위한 시스템 및 방법. 본 발명의 실시예는 실시간 GPS 통합으로 건물 또는 시설 내부의 원격 모니터링 및 디지털 횡단을 허용하는 것에 관한 것이다.

Description

상호 작용 GPS 통합, 3D 모델링 공간 생성을 위한 시스템 및 방법
이전 출원에 대한 인용
본 출원은 "상호 작용 GPS 통합, 3D 모델링 공간 생성을 위한 시스템 및 방법(System and Method for Creating interactive GPS-Integrated, 3D-Modelled Spaces)"이라는 제목으로 2018 년 11 월 2 일에 출원된 미국 가출원 번호 62/754,620에 우선권을 주장한다.
본 발명은 전반적으로 특수화된, 매핑된 위치 데이터(location data) 및 이러한 데이터와 인터페이스하기 위한 관련 소프트웨어 플랫폼을 사용하는 디지털 3D 모델링 위치의 생성 및 사용에 관한 것이다.
디지털 위치 모델을 생성하기 위한 종래 기술의 접근 방식은 내부 공간의 시뮬레이션된 보행을 포함하는 범위까지 이러한 모델과의 상호 작용을 허용하지만, 본 발명은 추가 정보를 매핑된 위치 데이터에 통합하여 추가적인 실용적인 유용성을 제공한다. 본 발명의 하나의 목적은 외부 및 내부 모두에서 매핑된 위치 모델의 일부 또는 섹션을 실제 포지셔닝(positioning) 정보와의 결합을 허용하는 것이다. 매핑된 위치 모델에서 캡처된 아이템이 모델에 결합된 이러한 아이템에 대한 추가 정보를 가질 수 있는 것이 추가 목적이다. 본 발명의 또 다른 목적은 매핑된 위치 모델에 실질적으로 실시간으로 업데이트되는 위치 데이터를 추가로 결합하는 것이다. 그런 다음, 사용자는 웹 기반 또는 기타 소프트웨어 플랫폼을 통해 매핑된 위치 모델 및 임의의 관련 정보에 액세스할 수 있다.
이러한 데이터 결합을 통해, 사용자가 본 발명에 의해 고려되는 매핑되고 모델링된 임의의 실제 세계 사이트의 상태를 컴퓨팅 디바이스에서 원격으로 모니터링할 수 있는 동적 시스템이 생성된다. 특히, 종래 기술의 기능을 개선하여, 실시간 위치 데이터의 통합 (GPS 디바이스와 결합함으로써)을 통해 비상, 구조 또는 기타 인원이 매핑된 위치 모델에 의해 캡처한 내부 물리적 공간을 횡단할 때 원격 모니터링 및 안내가 가능하다.
도 1은 본 발명의 일 실시예의 플랫폼 전체에서 사용되는 패널 바, 삽입 폼(form) 및 그리드를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 2는 "고객 추가" 패널이 오픈 토그링된 본 발명의 일 실시예로부터의 고객 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 3은 "위치 추가” 패널이 오픈 토글링된 본 발명의 일 실시예로부터 위치 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 4는 "LIM 추가” 패널이 오픈 토글링된 상태로 본 발명의 일 실시예로부터 LIM 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 5는 본 발명의 일 실시예로부터의 맵 설정 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 6은 본 발명의 일 실시예로부터의 사용자 등록 폼을 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 7은 본 발명의 일 실시예로부터의 사용자 목록 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 8은 본 발명의 일 실시예로부터의 사용자 할당 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 9는 본 발명의 일 실시예로부터의 위치 목록 그리드를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 10은 선택된 위치의 한 포지션(position)에 위치 이미지 맵을 디스플레이 하는 본 발명의 일 실시예로부터의 위치 이미지 맵 페이지를 나타내는 UI 엘리먼트의 일 구현예를 도시한다.
도 11은 본 발명의 매핑된 위치 인터페이스 플랫폼의 일 실시예에 따른 사이트 맵이다.
본 설명은 첨부 도면과 함께 본 발명의 실시예의 비 제한적인 예를 제시한다. 특정 하드웨어 및 소프트웨어 솔루션 또는 기술이 본 출원에서 설명될 수 있지만, 당업자는 그러한 솔루션 또는 기술에 대한 임의의 수의 등가물이 본 발명의 다양한 실시예를 실현하는 데 사용될 수 있음을 인식할 것이다.
본 발명의 특정 실시예는 매핑된 위치 데이터의 세트를 포함한다. 이러한 매핑된 위치 데이터 세트는 그 자체로 적어도 하나의 디지털 위치 모델 또는 이미지, 정적 지리적 포지션을 나타내는 데이터, 위치 내의 포지션 또는 위치와 관련된 아이템 또는 객체에 대한 추가 세부 사항을 나타내는 2 차 모델 정보를 포함할 수 있다. 이들 실시예는 상기 디지털 위치 모델 또는 이미지 상에서 상기 실질적으로 실시간 포지셔닝 데이터의 소스로서 역할을 하는 포지셔닝 디바이스의 위치를 제시하는 데 사용되는 실질적으로 실시간 포지션 데이터를 더 포함할 수 있다. 일부 실시예는 또한 사용자가 상기 매핑된 위치 데이터 세트와 상호 작용하고 일부 경우에는 수정할 수 있도록 구성된 매핑된 위치 인터페이스 플랫폼을 포함할 것이다.
다른 실시예에서, 매핑된 위치 데이터 세트는 조합된 경우 위치 내의 영역을 나타내는 디지털 횡단 가능한 3D 공간을 생성하는 복수의 디지털 위치 모델 또는 이미지를 포함할 수 있다.
상기 매핑된 위치 데이터 세트의 속성 및 그러한 데이터의 엘리먼트가 서로 또는 본 발명의 다양한 다른 컴포넌트와 결합되는 방식을 설명하는 본 발명의 비 제한적인 일 실시예가, 매핑된 위치 인터페이스 플랫폼을 구현하는 관점에서 아래에 개시된다.
매핑된 위치 인터페이스 플랫폼. 플랫폼 (또는 애플리케이션)의 주요 기능은 사용자에게 시설의 3D 모델 또는 이미지를 제공하고 사용자가 해당 시설 내에서 장비와 인터페이스 할 수 있는 웹 기반의 사용하기 쉬운 툴을 제공하는 것이다. 최첨단 이미징 기술을 활용하여 모든 자산이 디지털 스토리지에 쉽게 문서되고 사용자 액세스를 위해 구성될 수 있다.
애플리케이션은 ASP.NET MVC 프레임 워크를 사용하여 구축될 수 있다. 이것은 모델 - 뷰 - 컨트롤러(model - view - controller) 디자인 패턴을 사용하여 웹 애플리케이션을 구축하는 것을 전문으로 하는 당업계에 알려진 프레임 워크이다. 본 발명의 이 실시예의 기본 구현은 웹 애플리케이션, 모델 및 데이터베이스 프로젝트의 MVC 패턴을 따르는 3 개의 개별 프로젝트를 사용하여 달성될 수 있다. 그러나, Windows 서비스에 해당하는 제 4 프로젝트가 통합 GPS 디바이스로부터의 GPS 데이터 수집을 통해 달성된 증강된 기능을 제공하기 위해 추가로 고려된다.
웹 애플리케이션 (뷰 및 컨트롤러) 프로젝트. 웹 애플리케이션 프로젝트 생성 동안, 통합 개발 환경 ("IDE" : integrated development environment)은 여러 디폴트 폴더 및 파일을 셋업할 것이다. 뷰(view), 컨트롤러, 스크립트, 스타일 및 앱 시작용 폴더가 Web.Config 파일과 함께 생성될 것이다. 컨트롤러, 뷰, 스크립트 및 스타일에 대한 디폴트 파일이 새로 생성된 폴더에 자동으로 추가될 것이다. 계속하기 전에 데이터베이스 위치, 이름을 구성하고 인증 정보를 지정한다. 이러한 설정은 Web.Config 파일에 추가되며 ASP.NET 아이덴티티 및 데이터베이스 프로젝트에 의해 사용될 것이다.
이 실시예의 구현예는 또한 ASP.NET 아이덴티티 시스템의 통합을 고려한다. 이 시스템은 관련 인증 서비스에 백본(back - bone)을 제공한다. ASP.NET 아이덴티티를 설정할 때, "개별 계정" 사용 옵션이 선택되어야 한다. 이 옵션은 각각의 사용자에게 고유한 사용자 이름과 암호를 제공한다. 그런 다음 암호 정책이 수립되고 두 개의 별개의 역할이 셋업되어야 한다. 이러한 역할 중 첫 번째 역할은 관리자(Administrator)이다. 이 역할을 가진 사용자는 모든 페이지 및 피처(feature)에 대한 권한을 갖는다. 생성되어야 하는 다른 역할은 위치 사용자이다. 이 역할을 가진 사용자는 자신의 위치 및 자신에게 할당된 매핑된 위치 데이터를 볼 수 있는 액세스 만 가질 것이다. ASP.NET 아이덴티티 설치는 또한 몇 가지 새로운 뷰, 컨트롤러를 가져올 것이고 초기 구성에 기초하여, 멤버 자격 엔티티 클래스를 제공할 것이다. 아이덴티티 설치는 아이덴티티가 사용자 계정 및 역할을 관리하는 데 필요한 필수 테이블이 있는 애플리케이션 데이터베이스를 생성할 것이다. ASP.NET 아이덴티티가 생성한 새 데이터베이스는 플랫폼의 일차 데이터베이스가 된다.
MVC 웹 애플리케이션은 마스터 페이지(master page)로 작동할 공유 뷰를 사용한다. 이러한 공유 뷰는 스타일 시트 위치, 스크립트 파일 위치, 머리글(header), 메뉴 및 바닥글(footer)을 저장할 것이다. 콘텐츠 뷰가 생성될 때, 모든 페이지에서 다시 코딩할 필요없이 모든 페이지가 동일한 머리글, 메뉴, 바닥글 등을 가질 수 있도록 디폴트 공유 뷰가 지정되어야 한다.
고객, 위치, 매핑된 위치 데이터 (3D 이미지 미니 맵 설정 및 3D 이미지 미니 맵 포함), GPS 구성, GPS 디바이스, 개인(personnel) 관리 및 사용자 구성을 관리하기 위해 뷰 및 컨트롤러도 생성되어야 한다. 사용자 구성은 관리자가 새 사용자를 셋업하고, 위치 사용자에게 특정 위치에 대한 액세스 권한을 할당하고, 암호를 재설정하고, GPS 디바이스를 개인 사용자에게 할당할 수 있는 뷰를 포함한다.
각각의 뷰는 다음을 포함해야 한다 :
Figure pct00001
고객 (삽입 폼, 판독 데이터에 대한 그리드(Grid), 편집 및 삭제)
Figure pct00002
위치 (삽입 폼, 판독 데이터에 대한 그리드, 편집 및 삭제)
Figure pct00003
위치 (삽입 폼, 판독 데이터에 대한 그리드, 편집 및 삭제) 별 3D 이미지 창 (또는 "3D 이미지 맵" 창 또는 "위치 이미지 맵"창이라고 함)
Figure pct00004
3D 이미지 미니 맵 설정 (미니 맵 설정 섹션 참조)
Figure pct00005
3D 이미지 미니 맵 GPS 구성 (GPS 추적 통합 섹션 참조)
Figure pct00006
GPS 디바이스 (삽입 폼, 판독 데이터에 대한 그리드, 편집 및 삭제)
Figure pct00007
GPS 디바이스 순서 폼 (GPS 디바이스 순서 폼 섹션 참조)
Figure pct00008
개인 관리 (삽입 폼, 판독 데이터에 대한 그리드, 편집 및 삭제)
Figure pct00009
각각의 역할 별 사용자 관리 (삽입 폼, 판독 데이터에 대한 그리드, 편집 및 삭제)
Figure pct00010
위치 사용자 할당 (개인 사용자에게 디바이스 할당 섹션 참조)
Figure pct00011
암호 재설정 폼
Figure pct00012
개인 사용자에게 GPS 디바이스 추가 (삽입 폼, 판독 데이터에 대한 그리드, 편집 및 삭제)
위치 사용자 뷰/컨트롤러 또한 생성되어야 하며 다음 두 가지 뷰로 구성된다 :
Figure pct00013
위치 3D 이미지 창 - 카메라 제조업체에 의해 제공되는 공간의 3D 표현을 위한 통합 iFrame을 포함할 것이다. 미니 맵은 3D 이미지 창의 오른쪽 상단에 있다.
Figure pct00014
평면도 모드 - 시설 평면도의 하향식 뷰이다. 각각의 개인 사용자에 대한 GPS 마커가 디스플레이될 것이다.
모델 프로젝트. 모든 모델 및 뷰모델(ViewModel) 객체는 이 프로젝트에서 선언된다. 각각의 모델은 해당 객체에 의해 사용될 다양한 속성을 포함하는 cs 파일이다. 모델 프로젝트에 대한 웹 애플리케이션 프로젝트에 참조는 컴포넌트를 공유할 수 있도록 셋업되어야 한다. 각각의 모델 객체는 데이터베이스 프로젝트에서 생성될 데이터베이스 테이블도 나타낼 것이다. 스키마 모형(mock - up)이 생성된 후, 실제 cs 파일 생성이 시작되어야 한다. 필수 속성, 외래 키 및 디스플레이 이름을 지정하려면 데이터 주석 어셈블리(Data Annotations assembly)를 사용해야 한다. 생성되어야 하는 클래스(class)는 "고객(Customers)", "개인 사용자(Personnel User)"("고객(Customers)"에 대한 외래 키 포함), GPS 디바이스 ("고객(Customers)"에 대한 외래 키 포함), "개인 사용자 GPS 디바이스(Personnel User GPS Device)"("개인 사용자"및 "GPS 디바이스"에 대한 외래 키 포함), "위치"("고객(Customer)"에 대한 외래 키 포함), "위치 3D 이미지"("위치(Location)"에 대한 외래 키 포함), 그런 다음 "위치 사용자"가 할당된 “위치”를 저장할 테이블이다. 모델 프로젝트가 구축되면, 데이터베이스 프로젝트를 만들고 웹 프로젝트 셋업 동안에 ASP.NET 아이덴티티가 생성한 데이터베이스에 테이블을 추가할 준비가 된 것이다.
데이터베이스 프로젝트. 데이터베이스 프로젝트의 생성은 엔티티 프레임워트(Entity Framework)의 사용을 고려한다. 엔티티 프레임워크는 애플리케이션과 데이터베이스 간의 통신을 관리하는 데 사용된다. 사용자가 제출한 폼(form)과 데이터의 데이터베이스에서의 최종 방식 사이의 맵(map) 역할을 한다. 모델 프로젝트의 모든 모델 객체가 지정된 엔티티 컨텍스트(entity context)가 생성된다. 마이그레이션 스크립트(migration script)가 실행되면 모델 객체를 미러링하는 데이터베이스의 테이블이 생성된다.
매핑된 위치 데이터와 플랫폼 통합. 3D 모델링 공간 (예를 들어, Matterport에 의해 개발될 공간)을 생성하기 위해 디지털 이미지를 캡처하도록 디자인된 특수 카메라가 사용자 지정 위치의 3D 표현을 제공하는 데 사용될 것으로 예상된다. 당업자에 의해 이해되는 바와 같이, 이러한 카메라의 제조업체는 카메라에 의해 생성된 임의의 이미지 또는 기타 데이터의 사용을 가능하게 하는 소프트웨어 개발 키트 ("SDK")를 제공할 것이다. 제조업체의 애플리케이션 프로그래밍 인터페이스 ("API")와의 상호 작용은 주로 자바스크립트(JavaScript)를 사용하여 클라이언트 측에서 이루어진다. 제조업체의 API와 통신하기 위한 특정 지침은 해당 제조업체에 의해 제공되는 문서에서 쉽게 확인할 수 있다. 또한, 카메라로 캡처되어 제조업체의 데이터 호스팅 서비스에 업로드된 후 디지털 이미지 또는 이미지에 의해 생성된 공간을 3D 표현으로 프레임화하는 데 필요한 코드가 이러한 문서에서 유사하게 찾을 수 있음을 이해한다. 이 실시예는 고객 계정을 그들 개별 시설 (또는 위치)의 매핑된 위치 데이터, 특별히 3D 표현에 링크하는 플랫폼을 제공한다. 이 플랫폼을 통해, 고객은 선택한 위치의 3D 표현을 셋업하고 링크될 수 있고, 이는 위치의 API 토큰에 의해 데이터베이스에서 가져 와서 이러한 3D 표현을 디스플레이하는 페이지를 로그인시 동적으로 구축할 수 있다.
추가 프레임 워크. 이 실시예는 추가 사용자 인터페이스 ("UI") 헬퍼(helper) 및 다음을 포함하는 스크립트 라이브러리의 사용을 추가로 고려한다 :
Figure pct00015
ASP.NET/HTML 입력 컨트롤을 향상시키는 Kendo UI Suite;
Figure pct00016
자바스크립트 기능을 향상시키는 jQuery;
Figure pct00017
NewtonSoft.Json은 클라이언트와 서버간에 전송되는 데이터의 포맷을 지정하는데 도움이 된다.
Figure pct00018
Angular는 표준 HTML 태그 및 자바스크립트에 데이터 관리를 추가하는 데 도움이 된다.
데이터베이스 서버. 관계형 데이터베이스(relational database)는 플랫폼 데이터와 문서를 저장하는 데 사용된다. "서버 레벨" 하드웨어에서 실행되는 데이터베이스 엔진을 사용하여 데이터와 문서를 저장해야 한다. 데이터베이스의 테이블은 웹 애플리케이션 프로젝트 (아이덴티티를 위해) 및 모델 프로젝트에 지정된 모델 객체를 미러링한다.
고객 관리 페이지, 역할 : 관리자. 플랫폼은 각각의 고객의 주 계정(primary account)이 추적되는 고객 관리 페이지를 포함할 것이다.
이 페이지는 클릭시 열리고 접히는 “패널 바(Panel Bar)"를 포함한다. 열면 고객 삽입 폼이 디스플레이될 것이다. 접으면 고객 삽입 폼이 숨겨지고 "고객 추가(Add Customer)"제목이 디스플레이된다. "패널 바" 아래에는 테이블에 모든 고객을 나열하는 그리드가 있다. 정렬 가능한 열 머리글 및 데이터 행이 있는 페이징 가능(paging - enabled) 테이블이다. 각각의 행은 고객을 나타낸다. 각각의 행의 고객 데이터 외에도 세 개의 버튼이 있다 :
Figure pct00019
"편집(Edit)” 버튼 : 클릭하면 음영 오버레이(shaded overlay)가 있는 고객 페이지의 주요 피처가 비활성화되고 편집 가능한 폼으로 모든 고객 속성을 나열하는 팝업이 열린다.
Figure pct00020
"삭제(Delete)" 버튼 : 클릭하면 관리자 사용자에게 고객이 삭제될 것인지 확인하라는 것을 프롬프트(prompt)할 것이다. 조치가 확인되면, 고객은 데이터베이스에서 삭제된 것으로 마킹된다. 이것은 현재 데이터베이스에서 고객을 제거하는 것이 아니라 단순히 삭제된 것으로 플래그(flag)를 지정하여 효과적으로 숨긴다. "취소"를 선택하면 작업이 취소되고 정상 화면이 디스플레이될 것이다.
Figure pct00021
“위치(Locations)” 버튼 : 클릭하면 고객의 위치 화면이 디스플레이된다.
샘플 고객 폼은 다음 필드를 포함할 수 있다 :
Figure pct00022
이름 - 텍스트 박스, 영숫자, 필수, 텍스트로 필터링 가능, 정렬 가능
Figure pct00023
계정 번호 - 이것은 현재 고객 식별 체계에 맞게 수동으로 할당된다. 텍스트 박스, 영숫자, 필수, 텍스트로 필터링 가능, 정렬 가능
Figure pct00024
주소 1 - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00025
주소 2 - 텍스트 박스, 영숫자, 옵션, 정렬 가능
Figure pct00026
도시(City) - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00027
주(State) - 50 개 주와 워싱턴 DC를 모두 포함하는 드롭 다운, 영숫자, 필수, 정렬 가능
Figure pct00028
우편 번호 - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00029
전화 번호 - 마스크된 텍스트 박스, 숫자, 필수, 정렬 가능
Figure pct00030
주 연락처 이름 - 고객과의 주 연락처의 전체 이름이다. 텍스트 박스, 영숫자, 옵션, 정렬 가능
Figure pct00031
주요 콘텐츠 이메일 주소 - 텍스트 박스, 영숫자, 옵션, 정렬 가능
Figure pct00032
주 연락처 전화 번호 - 텍스트 박스, 영숫자, 옵션, 정렬 가능
Figure pct00033
로고 - 서버에 업로드되어 보고서에 사용된다. 파일 업로드 UI 컴포넌트, 옵션
Figure pct00034
위도 - 숫자 텍스트 박스, 숫자, 옵션
Figure pct00035
경도 - 숫자 텍스트 박스, 숫자, 옵션
Figure pct00036
메모(Notes) - HTML 포맷 WYSIWYG 편집기로 고객 메모를 저장한다. 옵션
Figure pct00037
활성(active) - 불리언(Boolean), 필수, 필터링 가능, 정렬 가능
고객 관리 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저 페이지(Razor page)(뷰)이다. 이 페이지는 컨트롤러 내부에 대응하는 메서드(method)를 또한 가질 수 있다. 컨트롤러의 메서드는 사용자가 인증되었는지, 권한이 있는지 확인하고 사용자 ID로 ViewBag를 설정한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, CSS, 자바스크립트, jQuery 및 Angular를 사용하여 패널 바, 삽입 폼 및 그리드를 구축한다. 패널 바는 HtmlHelper 블록으로 구축된 Kendo 패널 바이다. 그것은 이름, 애니메이션 및 아이템에 대한 속성을 함유한다. 삽입 폼이 패널 바의 "아이템"섹션에 추가된다. 패널 바의 "아이템" 섹션에 있는 콘텐츠는 Angular 컨트롤러의 범위에서 활성화될 각각의 입력 아이템에 대한 추가 Angular 속성이 있는 표준 html 태그를 사용하고 있다. 패널 바 아래에는 표준 HTML div 태그를 사용하는 그리드가 있다. 그리드는 페이지의 스크립트 섹션에서 활성화된다. 이 페이지의 스크립트 섹션은 여러 역할을 가지며 비동기식으로 실행된다. 페이지가 로드되면 Kendo UI 컨트롤러를 활성화하고 드롭 다운에 대한 데이터 소스를 정의하며 HTML DOM 내부에 저장된 이벤트를 생성한다.
Kendo UI 컨트롤러를 활성화하면 텍스트 박스, 드롭 다운, html 편집기 및 그리드와 같은 입력 아이템이 활성화된다. 그리드가 활성화되면, 데이터 소스가 고객 목록을 JSON 객체로 반환하는 컨트롤러 내부의 메서드로 설정된다. 그리드의 속성도 정의된다. 속성의 예는 폭, 페이지화 가능, 스크롤 가능, 편집 가능 등이 있다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00038
"고객 추가" 버튼 클릭 - 클릭하면 각각의 입력 아이템에 대한 변수를 생성하고 해당 입력 아이템의 Angular 범위 속성 값을 할당한다. 그런 다음, JSON.Stringify 메서드를 사용하여 각각의 입력 값이 JSON 스트링(string)에 추가된다. 스트링이 JSON으로 설정되면 해당 데이터를 "AddCustomer"라는 CustomerController 내부의 메서드에 게시한다(post). AddCustomer 메서드는 JSON 스트링을 고객 모델 객체로 직렬화(serizalize)한다. 객체가 되면 엔티티 프레임워크를 사용하여 데이터베이스에 삽입된다. 결과가 뷰로 다시 전달되고 결과를 사용자에게 알리는 메시지가 디스프레이된다.
Figure pct00039
고객 "편집" 버튼 클릭 - "편집"이벤트는 Kendo 템플릿(template)을 사용하여 스크립트 태그 내에서 발화(fire)되는 팝업 편집기를 사용하여 폼을 구축할 것이다. 클릭이 발화된 행을 알고 해당 행의 데이터를 텍스트 박스 및 다른 입력 아이템에 로드하는 것을 알 것이다. 고객이 편집되면 해당 데이터를 컨트롤러에 게시하고 컨트롤러는 데이터를 고객 모델 객체로 직렬화한 다음 데이터베이스 프로젝트를 사용하여 데이터베이스의 행을 업데이트한다.
Figure pct00040
고객 "삭제" 버튼 클릭 - 클릭하면 그리드 내에서 파기 메서드(destroy method)가 실행된다. 그러면 컨트롤러의 파기 메서드에 객체가 게시되고 해당 고객이 삭제된 것으로 마킹된다. 실제로는 데이터베이스에서 어떤 레코드도 삭제되지 않을 것이다.
Figure pct00041
"위치" 버튼 클릭 - "위치" 버튼 이벤트는 고객 ID에 해당하는 위치 뷰를 디스플레이할 것이다.
위치 페이지, 역할 : 관리자. 위치 페이지는 각각의 고객의 위치(들)이 추적되는 곳이다.
이 페이지는 클릭시 열리고 접히는 “패널 바"를 포함한다. 열면 위치 삽입 폼이 디스플레이 될 것이다. 접으면 위치 삽입 폼이 숨겨지고 "위치 추가" 라는 제목을 갖는다. "패널 바" 아래에는 모든 고객의 위치를 나열하는 그리드가 있다. 정렬 가능한 열 머리글 및 데이터 행이 있는 페이징 가능 테이블이다. 각각의 행은 위치이다. 각각의 행의 위치 데이터 외에도 세 개의 버튼이 있다.
Figure pct00042
“편집” 버튼 : 클릭하면 음영 오버레이가 있는 위치 페이지의 주요 피처를 비활성화한 다음 편집 가능한 폼으로 모든 위치 속성을 나열하는 팝업이 열린다.
Figure pct00043
"삭제" 버튼 : 클릭하면 관리자 사용자에게 위치가 삭제될 것인지 확인하라는 것을 프롬프트(prompt)할 것이다. 작업이 확인되면 위치가 데이터베이스에서 삭제된 것으로 마킹된다. 이것은 현재 데이터베이스에서 위치를 제거하지 않고 단순히 삭제된 것으로 플래그를 지정하여 효과적으로 숨긴다. "취소"를 선택하면 작업이 취소되고 정상 화면이 표시된다.
Figure pct00044
“위치 이미지 맵(location lmage Maps)” 버튼 : 클릭하면 해당 위치의 이미지 맵이 디스플레이된다.
샘플 위치 폼은 다음 필드를 포함할 수 있다 :
Figure pct00045
이름 - 텍스트 박스, 영숫자, 필수, 텍스트로 필터링 가능, 정렬 가능
Figure pct00046
계정 번호 - 지정된 고객 위치 식별 체계에 맞게 수동으로 할당된다. 텍스트 박스, 영숫자, 필수, 텍스트로 필터링 가능, 정렬 가능
Figure pct00047
주소 1 - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00048
주소 2 - 텍스트 박스, 영숫자, 선택, 정렬 가능
Figure pct00049
도시 - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00050
주 - 50 개 주와 워싱턴 DC를 모두 포함하는 드롭 다운, 영숫자, 필수, 정렬 가능
Figure pct00051
우편 번호 - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00052
전화 번호 - 마스크된 텍스트 박스, 숫자, 필수, 정렬 가능
Figure pct00053
위치 로고 - 서버에 업로드되어 보고서에 사용된다. 파일 업로드 UI 컴포넌트, 옵션
Figure pct00054
위도 - 숫자 텍스트 박스, 숫자, 옵션
Figure pct00055
경도 - 숫자 텍스트 박스, 숫자, 옵션
Figure pct00056
메모 - WYSIWYG 편집기를 사용하여 HTML 형식으로 위치 메모를 저장할 것이다. 옵션.
위치 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저(Razor) 페이지 (뷰)이다. 이 페이지에는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었는지, 권한이 있는지 확인하고 사용자 ID와 고객 ID로 두 개의 ViewBag를 설정한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, CSS, 자바스크립트, jQuery 및 Angular를 사용하여 패널 바, 삽입 폼 및 그리드를 구축한다. 패널 바는 HtmlHelper 블록으로 구축된 Kendo 패널 바이다. 그것은 이름, 애니메이션 및 아이템에 대한 속성을 포함한다. 삽입 폼이 패널 바의 "아이템" 섹션에 추가된다. 패널 바의 "아이템" 섹션에 있는 콘텐츠는 Angular 컨트롤러의 범위에서 활성화될 각각의 입력 아이템에 대한 추가 Angular 속성이 있는 표준 html 태그를 사용하고 있다. 패널 바 아래에는 표준 HTML div 태그를 사용하는 그리드가 있다. 그리드는 페이지의 스크립트 섹션에서 활성화될 것이다. 이 페이지의 스크립트 섹션에는 여러 역할이 있으며 비동기식으로 실행된다. 페이지가 로드되면 Kendo UI 컨트롤러를 활성화하고 드롭 다운에 대한 데이터 소스를 정의하며 HTML DOM 내부에 저장된 이벤트를 생성할 것이다.
Kendo UI 컨트롤러를 활성화하면 텍스트 박스, 드롭 다운, html 편집기 및 그리드와 같은 입력 아이템이 활성화된다. 그리드가 활성화되면 데이터 소스가 위치 목록을 JSON 객체로 반환하는 컨트롤러 내부의 메서드로 설정된다. 그리드의 속성도 정의된다. 속성의 예는 폭, 페이지 가능(pageable), 스크롤 가능, 편집 가능 등이 있다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00057
“위치 추가” 버튼 클릭 - 클릭하면 각각의 입력 아이템에 대한 변수를 생성하고 해당 입력 아이템에 대한 Angular 범위 속성 값을 할당한다. 그런 다음 JSON.Stringify 메서드를 사용하여 각각의 입력 값이 JSON 스트링에 추가된다. 스트링이 JSON으로 설정되면 "AddLocation"로 불리는 CustomerController 내의 메서드에 해당 데이터를 게시한다. AddLocation 메서드는 JSON 스트링을 위치 모델 객체로 직렬화한다. 객체가 되면 데이터베이스 프로젝트를 사용하여 데이터베이스에 삽입된다. 결과가 뷰로 다시 전달되고 결과를 사용자에게 알리는 메시지가 디스플레이된다.
Figure pct00058
위치 "편집” 버튼 클릭 - "편집" 이벤트는 Kendo 템플릿을 사용하여 스크립트 태그 내에서 발화되는 팝업 편집기를 사용하여 폼을 구축할 것이다. 클릭이 발화된 행을 알고 해당 행의 데이터를 텍스트 박스 및 다른 입력 아이템에 로드한다. 위치가 편집되면 해당 데이터를 컨트롤러에 게시하고 컨트롤러는 데이터를 위치 모델 객체로 직렬화한 다음 데이터 프로젝트를 사용하여 데이터베이스의 행을 업데이트한다.
Figure pct00059
위치 "삭제” 버튼 클릭 - 클릭하면 그리드 내에서 파기 메서드가 실행된다. 그러면 컨트롤러의 파기 메서드에 객체가 게시되고 해당 위치가 삭제된 것으로 마킹된다. 실제로는 데이터베이스에서 어떤 레코드도 제거하지 않을 것이다.
Figure pct00060
“위치 이미지 맵” 버튼 클릭 -“위치 이미지 맵” 버튼 이벤트는 위치 ID에 해당하는 LocationImageMap 뷰를 디스플레이할 것이다.
위치 이미지 맵 페이지, 역할 : 관리자. 위치 이미지 맵 페이지는 고객의 위치가 실제 건물의 위치 이미지 맵 (효과적으로 3D 위치 모델 또는 이미지 역할을 함)과 링크되는 곳이다.
이 페이지는 클릭시 열리고 접히는 “패널 바"를 포함한다. 열면 LIM 삽입 폼이 디스플레이될 것이다. 접으면 LIM 삽입 폼이 숨겨지고 "위치 이미지 맵 추가"라는 제목을 갖는다. "패널 바" 아래에는 테이블에 모든 고객을 나열하는 그리드가 있다. 정렬 가능한 열 머리글 및 데이터 행이 있는 페이징 가능 테이블이다. 각각의 행은 카메라 제조업체에 의해 제공되는 고유 ID가 있는 LIM이다. 각각의 행의 LIM 데이터 외에도 세 개의 버튼이 있다.
Figure pct00061
“편집” 버튼 : 클릭하면 음영 오버레이가 있는 LIM 페이지의 주요 피처를 비활성화한 다음 편집 가능한 폼으로 모든 LIM 속성을 나열하는 팝업이 열린다.
Figure pct00062
"삭제” 버튼 : 클릭하면 관리자 사용자에게 LIM을 삭제할 것인지 확인할 것을 프롬프트할 것이다. 조치가 확인되면 LIM이 데이터베이스에서 삭제된 것으로 마킹될 것이다. 이것은 현재 데이터베이스에서 LIM을 제거하지 않고 단순히 삭제된 것으로 플래그를 지정하여 효과적으로 숨긴다. "취소"를 선택하면 작업이 취소되고 정상 화면이 디스플레이될 것이다.
Figure pct00063
“맵 업데이트(Update Map)” 버튼 : 클릭하면 LIM의 설정 페이지가 디스플레이된다. "맵 업데이트” 버튼의 오른쪽 열(column)에는 맵을 온라인으로 볼 준비가 되었는지 여부를 보여주는 "맵 업데이트" 속성이 있다. 이 속성은 관리자에게 LIM ID에 해당하는 블루프린트(blueprint)/미니 맵이 구성되었는지 여부를 나타낸다.
샘플 LIM 폼은 다음 필드를 포함할 수 있다 :
Figure pct00064
이름 - 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00065
이미지 API 토큰 - 이미지를 함께 타일링하여 공간의 3D 표현을 형성할 수 있는 카메라 시스템으로 위치를 촬영하면, 캡처된 이미지가 제조업체의 서비스에 업로드된다. 처리되면, 특별히 업로드된 이미지에 액세스하기 위한 토큰이 생성된다. 텍스트 박스, 영숫자, 필수, 정렬 가능
Figure pct00066
그리드 순서 - 텍스트 박스, 숫자, 필수, 정렬 가능
Figure pct00067
썸네일 아이콘 - LIM이 여러 개인 경우 이 위치에 대한 고객의 LIM 페이지에서, 각각의 LIM에 대해 업로드된 썸네일 아이콘을 사용하여 서로 다른 이미지 세트 간에 빠르게 스위칭할 것이다. 파일 업로드 UI 컴포넌트, 옵션
Figure pct00068
블루프린트/맵 - 각각의 LIM에 대해 LIM의 메인 3D 버전에서 사용자가 어디에 있는지 보여주는 해당 블루프린트/미니 맵이 있다. 카메라 제조업체는 API를 통해 카메라가 이미지를 캡처할 때마다 위치 스팟을 제공한다. 이러한 스팟은 블루프린트/미니 맵에 표시되며 사용자는 점을 클릭하여 LIM을 "보행(walk - through)"하지 않고도 스팟에서 스팟으로 이동할 수 있다. 3D LIM 내부에 사용자의 현재 위치에 대한 점이 있으며 방향을 표시하는 시야(field-of-vision) 콘이 있다. 파일 업로드 UI 컴포넌트, 옵션
LIM 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저 페이지 (뷰)이다. 이 페이지는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었는지, 권한이 있는지 확인하고 위치의 ID로 ViewBag를 설정한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, CSS, 자바스크립트, jQuery 및 Angular를 사용하여 패널 바, 삽입 폼 및 그리드를 구축한다. 패널 바는 HtmlHelper 블록으로 구축된 Kendo 패널 바이다. 그것은 이름, 애니메이션 및 아이템에 대한 속성을 포함한다. 삽입 폼이 패널 바의 "아이템" 섹션에 추가된다. 패널 바의 "아이템" 섹션에 있는 콘텐츠는 Angular 컨트롤러의 범위에서 활성화될 각각의 입력 아이템에 대한 추가 Angular 속성이 있는 표준 html 태그를 사용하고 있다. 패널 바 아래에는 표준 HTML div 태그를 사용하는 그리드가 있다. 그리드는 페이지의 스크립트 섹션에서 활성화된다. 이 페이지의 스크립트 섹션에는 여러 역할이 있으며 비동기식으로 실행된다. 페이지가 로드되면 Kendo UI 컨트롤러를 활성화하고 HTML DOM 내부에 저장된 이벤트를 생성할 것이다.
Kendo UI 컨트롤러를 활성화하면 텍스트 박스, html 편집기 및 그리드와 같은 입력 아이템이 활성화된다. 그리드가 활성화되면 데이터 소스는 LIM 목록을 JSON 객체로 반환하는 컨트롤러 내부의 메서드로 설정된다. LIM 객체를 생성하는 동안 맵이 올바르게 설정되었는지 확인한다. 이 확인은 "맵 업데이트 됨" 속성에 녹색 "예"또는 빨간색 "아니요"를 추가한다. 그리드의 속성도 정의된다. 속성의 예로는 폭, 페이지 가능, 스크롤 가능, 편집 가능 등이 있다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00069
"LIM 추가” 버튼 클릭 - 클릭하면 각각의 입력 아이템에 대한 변수를 생성하고 해당 입력 아이템에 대한 Angular 범위 속성 값을 할당한다. 그런 다음 JSON.Stringify 메서드를 사용하여 각각의 입력 값이 JSON 스트링에 추가된다. 스트링이 JSON으로 설정되면 해당 데이터를 "AddLIM"이라는 CustomerController 내의 메서드에 게시한다. AddCustomer 메서드는 JSON 스트링을 LocationImageMap 모델 객체로 직렬화한다. 객체가 되면 데이터베이스 프로젝트(고객 객체는 앞에서 설명한 엔티티 프레임 워크를 통해 추가되고, 이 상이한 방식의 데이터베이스 엔트리를 검증되기를 단지 원함)를 사용하여 데이터베이스에 삽입된다. 결과가 뷰로 다시 전달되고 결과를 사용자에게 알리는 메시지가 디스플레이된다.
Figure pct00070
LIM "편집” 버튼 클릭 - "편집"이벤트는 Kendo 템플릿을 사용하여 스크립트 태그 내에서 실행되는 팝업 편집기를 사용하여 폼을 구축할 것이다. 클릭이 발생한 행을 알고 해당 행의 데이터를 텍스트 박스 및 다른 입력 아이템에 로드한다. LIM이 편집되면 해당 데이터를 컨트롤러에 게시하고 컨트롤러는 데이터를 고객 객체로 직렬화한 다음 데이터 프로젝트를 사용하여 데이터베이스의 행을 업데이트할 것이다.
Figure pct00071
LIM "삭제” 버튼 클릭 - 클릭하면 그리드 내에서 파기 메서드가 실행된다. 그러면 컨트롤러의 파기 메서드에 객체가 게시되고 해당 LIM이 삭제된 것으로 마킹된다. 실제로는 데이터베이스에서 어떤 레코드도 제거하지 않는다.
Figure pct00072
“맵 업데이트” 버튼 클릭 -“맵 업데이트” 버튼 이벤트는 LIM ID와 함께 위치 뷰를 디스플레이할 것이다.
맵 설정 페이지, 역할 : 관리자. 맵 설정 페이지에서는 관리자가 카메라 제조업체에 의해 제공된 카메라 위치 점을 LIM에 해당하는 업로드된 블루프린트/미니 맵과 정렬할 수 있다.
이 페이지는 위치 이미지 맵 ID를 사용하여 데이터베이스로부터 특정 API 토큰을 가져온다. 그런 다음 스크립트를 실행하여 iFrame에 API 토큰을 추가하여 제조업체 서비스에서 3D 이미지 맵 (특수 카메라로 캡처된 이미지를 포함)을 로딩한다. 위치 이미지 맵 (LIM : Location Image Map)의 오른쪽 상단 모서리에는 LIM의 이미지 엘리먼트를 캡처할 때 카메라 배치에 해당하는 위치 점과 현재 사용자의 시뮬레이션된 시야각(field-of-vision cone)의 포지션을 나타내는 점을디스플레이하는 업로드된 블루프린트/미니 맵이 있다. 이미지 프레임의 왼쪽에는 관리자가 왼쪽 상단 모서리의 위치와 카메라 위치 스팟을 수용하는 엘리먼트의 높이/폭을 변경할 수 있는 4 개의 숫자 텍스트 박스가 있다. 값이 올바르게 구성되고 미니 맵이 3D 이미지 맵과 정렬되면, "값 업데이트” 버튼을 클릭해야 한다.
샘플 맵 설정 폼은 다음 필드를 포함할 수 있다 :
Figure pct00073
폭 : 숫자 텍스트 박스, 필수 - 카메라 위치 점을 저장하는 엘리먼트의 폭을 조작한다. 이것은 숫자가 픽셀 또는 백분율로 저장될 것이다.
Figure pct00074
높이 : 숫자 텍스트 박스, 필수 - 카메라 위치 점을 저장하는 엘리먼트의 높이를 조작할 것이다. 이것은 백분율로 저장될 것이다.
Figure pct00075
왼쪽 : 숫자 텍스트 박스, 필수 - 카메라 위치 점을 저장하는 엘리먼트의 왼쪽 시작 지점을 조작할 것이다. 이것은 백분율로 저장될 것이다.
Figure pct00076
상단 : 숫자 텍스트 박스, 필수 - 카메라 위치 점을 저장하는 엘리먼트의 상단을 조작할 것이다. 이것은 백분율로 저장될 것이다.
맵 설정 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저 페이지 (뷰)이다. 이 페이지는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었는지, 권한이 있는지 확인하고 LIM 정보, 이미지 토큰 및 블루프린트/미니 맵(Blueprint/Mini - Map)에 대한 파일 경로로 몇 개의 ViewBag를 설정한다. 컨트롤러의 메서드는 C#을 사용한다. 이 뷰는 HTML, C#, CSS, 자바스크립트, jQuery 및 Angular를 사용하여 맵 설정 폼을 생성하고 카메라 제조업체의 서비스에서 LIM을 프레임화하고 카메라 이미지 스팟과 통합된 미니 맵을 구축한다. 페이지가 로드되면 Kendo UI 컨트롤러를 활성화하고 텍스트 박스를 디폴트 값으로 채우거나 서버에 ajax 호출을 하고 해당 값을 요청한다. 애플리케이션 데이터베이스에서 값을 검색할 때 텍스트 박스 값을 채우고 각각에 대한 범위 속성을 설정할 것이다. 다음으로 카메라 제조업체의 API에 연결하여 3D 이미지 객체를 검색한다. 이 객체에는 카메라 위치 점, 사용자의 현재 위치 및 자산 태그(asset tag)가 있다. 사용자의 위치와 3D 이미지 시야의 치수로, 현재 사용자의 시야각을 계산할 수 있다. 콘은 간단한 div와 CSS로 구축된다. 사용자가 주위를 둘러 보면 3D 이미지 맵에서 사용자가 보는 것과 일치하도록 CSS의 속성이 변경된다.
Kendo UI 컨트롤러를 활성화하면 텍스트 박스와 버튼이 활성화된다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00077
3D 이미지 맵 설정 : Matterpoint 토큰에 대한 ViewBag 객체가 전달된다. 오른쪽 3D 이미지 맵을 가리키는 iFrame의 소스 속성을 편집하도록 구성된 스크립트는 페이지가 로드될 때 실행된다.
Figure pct00078
블루프린트/미니 맵 셋업 : 블루프린트/미니 맵의 이미지 위치에 대한 ViewBag 객체가 전달된다. ViewBag 객체는 C# Razor를 사용하여 HTML에서 직접 사용된다.
Figure pct00079
카메라 위치 스팟 로딩 : 카메라 제조업체의 API에 대한 연결이 생성되고 이미지 토큰을 사용하는 객체가 요청된다. 모든 카메라 이미지 스팟의 위치와 현재 사용자 위치의 시야 치수가 반환된다. 카메라 위치 스팟 엘리먼트는 블루 프린트/미니 맵 위에 계층화(layer)된다. 처음에는, 점이 정렬되지 않으며 크기 및 위치 텍스트 박스를 통해 올바르게 업데이트되어야 한다.
Figure pct00080
카메라 위치 스팟의 엘리먼트 위치 및 크기 업데이트 : 3D 이미지 맵 왼쪽에 있는 4 개의 텍스트 박스를 사용하면 카메라 제조업체의 API에서 뷰로 발송된 카메라 위치 스팟을 이동하고 크기를 조정할 수 있다. 카메라 위치 스팟에 대한 엘리먼트를 저장하는 div에는 엘리먼트와 함께 인라인으로 지정된 상단, 왼쪽, 높이 및 폭이 있다. 텍스트 박스의 값을 변경할 때 자바스크립트에서 "변경(Change)"이벤트를 호출하고 해당 CSS 속성을 지속적으로 업데이트하여 진행중인 작업 뷰를 제공한다.
Figure pct00081
“값 업데이트” 버튼 클릭 - 클릭하면 변수를 생성하고 각각의 텍스트 박스 값의 범위를 업데이트한다. 그런 다음 JSON.Stringify 메서드를 사용하여 각각의 값이 JSON 스트링에 추가된다. 스트링이 JSON으로 설정되면 해당 데이터를 "UpdateMapValues"라는 CustomerController 내부의 메서드에 게시한다. "UpdateMapValues"메서드는 JSON 스트링을 고객 모델 객체로 직렬화한다. 객체가되면 데이터베이스 프로젝트를 사용하여 데이터베이스에 삽입된다. 결과가 뷰로 다시 전달되고 결과를 사용자에게 알리는 메시지가 디스플레이된다.
Figure pct00082
블루프린트/미니 맵에 있는 현재 사용자의 시야각(Field-of-view cone) 변경 : 기존 3D 이미지 객체를 사용하여 화면에 디스플레이되는 시야가 결정된다. 시야는 숫자 치수로 저장된다. 이러한 치수는 블루프린트/미니 맵에서 시야각을 결정하는 데 사용된다. 콘은 CSS 속성이 있는 div이다. 시야가 이동될 때마다 치수 계산을 업데이트하고 일치하도록 CSS를 변경하는 이벤트를 호출한다.
사용자 등록 페이지, 역할 : 관리자. 이 페이지에서 관리자는 새 사용자를 셋업할 수 있다.
이 페이지는 표준 HTML 폼과 데이터를 서버에 제출하기 위한 하나의 버튼을 포함한다.
Figure pct00083
제출 버튼(Submit Button) : 클릭하면 폼 데이터가 서버에 게시되고 처리된 후 데이터베이스에 새 사용자가 삽입된다. 두 가지 중에서 선택할 수 있는 두 가지 역할이 있다.
o 관리자(Administrator) : 애플리케이션 전체에 대한 관리 권한이 있다.
o 위치 사용자(Location User) : 위치 목록 및 할당된 해당 위치 이미지 맵에만 액세스할 수 있다.
o 암호 요구 사항 : 최소 6 자. 하나 이상의 숫자 또는 특수 문자, 적어도 하나의 소문자 및 적어도 하나의 대문자가 필요하다.
샘플 등록 사용자 폼은 다음 필드를 포함할 수 있다 :
Figure pct00084
이름 - 텍스트 박스, 영숫자, 필수
Figure pct00085
성 - 텍스트 박스, 영숫자, 필수
Figure pct00086
역할 - 드롭 다운, 필수
o DAS 관리자
o 위치 사용자
Figure pct00087
전화 번호 - 텍스트 박스, 영숫자, 옵션
Figure pct00088
이메일 - 텍스트 박스, 영숫자, 필수. 이것은 사용자 이름이기도 하다.
Figure pct00089
암호 - 암호 입력 아이템, 영숫자, 필수
Figure pct00090
암호 확인 - 암호 입력 아이템, 영숫자, 필수 -‘암호’필드와 일치해야 한다.
사용자 등록 페이지는 애플리케이션의 마스터 머리글, 메뉴, 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저 페이지 (뷰)이다. 이 페이지는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었는지 확인하고 사용자 역할 목록으로 ViewBag를 채운다. 이 ViewBag는 "역할(Role)" 드롭 다운을 채우는 데 사용된다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, CSS, 자바스크립트, jQuery 및 Angular를 사용하여 삽입 폼을 구축한다. 등록 폼은 Razor BeginForm "Using" 블록으로 래핑(wrapped)되고 뷰에 할당된 RegisterViewModel에 연결된다. 모든 입력 아이템에는 각각의 입력 아이템이 속한 ViewModel의 속성을 정의하는 HTMLHelpers가 있다. 제출되면 HTMLHelper 이름을 사용하여 객체를 생성하고 해당 데이터를 BeginForm "Using"블록에 지정된 뷰에 제출한다. 데이터가 Registration POST 메서드에 도달하면 사용자 객체를 생성하고 지정된 암호를 사용하여 Create User 메서드를 실행한다. 사용자를 성공적으로 추가하면 해당 사용자에게 역할을 할당하고 결과 메시지를 디스플레이하는 등록 페이지로 다시 관리자를 반환한다.
Kendo UI 컨트롤러를 활성화하면 텍스트 박스, 드롭 다운(dropdown)과 같은 입력 아이템이 활성화된다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00091
폼 버튼 클릭 삽입 - 클릭하면 암호 요구 사항을 확인하고 입력 아이템의 데이터를 사용하여 새 사용자 객체를 만든 다음 그것을 삽입될 컨트롤러로 발송한다.
삽입 폼의 "역할" 드롭 다운은 역할 목록을 함유하는 ViewBag와 함께 AccountsContoller에서 설정된다.
사용자 목록 페이지, 역할 : 관리자. 이 페이지에는 역할 별로 그룹화된 두 개의 사용자 목록이 있다. 사용자는 관리자 또는 위치 사용자이다.
이 페이지에는 애플리케이션에 액세스할 수 있는 사용자를 나열하는 두 개의 그리드가 있다. 사용자가 "관리자" 테이블에 있으면 전체 애플리케이션과 사용 가능한 모든 피처에 대한 전체 권한이 있는 것이다. 사용자가 "위치 사용자"인 경우 할당된 위치에만 액세스할 수 있다. 각각의 위치에는 위치 이미지 맵 (또는 맵)이 있으며 해당 사용자가 각각의 위치를 디지털 방식으로 탐색하고 자산 태그를 볼 수 있다.
이 페이지의 유일한 폼은 관리자가 "위치 사용자"에 대한 "암호 재설정” 버튼을 클릭할 때 열린다. 각각의 사용자는 자신의 UserId에 연결된 자신의 "암호 재설정” 버튼을 갖게 된다. 이 폼은 암호 입력을 허용하고 새 암호를 확인하는 별도의 필드를 포함한다.
사용자 목록 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저 페이지 (뷰)이다. 이 페이지에는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었으며 페이지를 볼 수 있는 권한이 있는지를 확인한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, 자바스크립트 및 jQuery를 사용하여 두 개의 그리드를 구축한다. 그리드는 Razor 용 Kendo HTMLHelpers를 사용하여 구축, 정의 및 채워진다. 각각의 그리드는 각각의 특정 역할에 대해 ViewModel에 직접 연결된다. DASAdminViewModel은 상단 그리드를 채우고 LocationUserViewModel은 하단 그리드를 채운다(populate). 열과 데이터 소스는 자바스크립트 없이 레이저 내부에서 정의된다. 각각의 그리드는 별도의 데이터 소스를 갖는다. 위치 사용자 그리드 안에는 각각의 사용자 행에 대한 암호 재설정 버튼이 있다. 클릭하면 발화된 행을 결정하고 해당 사용자의 UserId를 가져올 것이다. 그런 다음 자바스크립트 이벤트를 호출하여 Kendo Popup을 활성화하고 사용자가 새 암호를 타이핑할 수 있도록 한다. 암호가 검증되고 확인되면 컨트롤러에서 해당 사용자의 암호를 재설정하는 메서드를 호출한다. 제출시 Kendo 팝업 창이 닫힌다.
Kendo UI 컨트롤러를 활성화하면 두 개의 그리드가 활성화된다. 그리드가 활성화되면 데이터 소스는 사용자 목록 (관리자 또는 위치 사용자)을 JSON 객체로 반환하는 컨트롤러 내부의 메서드로 설정된다. 그리드의 속성도 정의된다. 속성의 예로는 폭, 페이지 가능, 스크롤 가능, 편집 가능 등이 있다.
이 페이지는 다음 이벤트에 응답하도록 구성된다:
Figure pct00092
“암호 재설정” 버튼 클릭 - 이 버튼을 클릭하면 위치 사용자의 암호가 재설정된다. 이것은 버튼이 클릭된 행 데이터를 가져 오는 자바스크립트 이벤트를 호출하고 관리자가 암호를 재설정할 수 있는 Kendo 팝업 창을 생성한다.
Figure pct00093
새 암호를 타이핑하고 확인한 후 Kendo Popup 창에 위치된“Reset” 버튼. 이것은 UserId와 함께 "ResetLocationUserPassword"라는 컨트롤러 메서드에 데이터를 게시한다.
암호 재설정 페이지, 역할 : 관리자. 이 페이지에서는 현재 로그인한 사용자가 자신의 암호를 재설정할 수 있다.
사용자는 상단 박스에 현재 암호를 타이핑하고 중간 박스에 새 암호를 타이핑하고 하단 박스에 새 암호를 확인한다. 데이터를 컨트롤러로 발송하고 데이터베이스를 업데이트하는 "암호 변경"이라는 버튼이 있다. 새 암호는 6 자 이상, 적어도 하나의 숫자 또는 특수 문자, 적어도 하나의 소문자, 적어도 하나의 대문자 이어야 한다.
샘플 재설정 암호 폼은 다음 필드를 포함할 수 있다 :
Figure pct00094
현재 암호 - 암호 입력 아이템, 영숫자, 필수
Figure pct00095
새 암호 - 암호 입력 아이템, 영숫자, 필수
Figure pct00096
암호 확인 - 암호 입력 아이템, 영숫자, 필수 - "새 암호" 필드와 일치해야 한다.
암호 재설정 페이지는 공유 뷰 내부에 구축된 레이저 페이지 (뷰)로, 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있다. 이 페이지는 컨트롤러 내부에 해당 메서드를 또한 가질 수 있다. 컨트롤러의 메서드는 사용자가 인증되었는지 확인한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C# 및 자바스크립트를 사용한다. 암호 변경 폼은 Razor BeginForm "사용" 블록에 래핑되어 있으며 뷰에 할당된 ChangePasswordViewModel에 연결된다. 모든 입력 아이템에는 각각의 입력 아이템이 속한 ViewModel의 속성을 정의하는 HTMLHelpers가 있다. 제출되면 HTMLHelper 이름을 사용하여 객체를 생성하고 해당 데이터를 BeginForm "Using" 블록에 지정된 작업에 제출한다. 데이터가 ChangePassword ActionResult에 도달하면 사용자의 암호를 재설정하고 결과 메시지를 디스플레이하는 "암호 변경"페이지로 다시 리다이렉션(redirect)한다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00097
“암호 변경(Change Password)” 버튼 클릭 - 클릭하면 암호 요구 사항을 확인하고 입력 아이템의 데이터를 사용하여 ChangePasswordViewModel 객체를 생성한 다음 그것을 업데이트될 컨트롤러로 발송한다.
사용자 할당 페이지, 역할 : 관리자. 이 페이지에는 모든 활성 위치 사용자가 나열되고 관리자가 사용자를 특정 위치에 할당할 수 있다.
이 페이지에는 "위치 사용자"가 나열된 그리드가 있다. 그리드의 각각의 사용자 행에는 "위치 할당"이라는 버튼이 있다. 클릭하면 해당 사용자에게 할당될 수 있는 모든 위치를 나열하는 페이지로 리다이렉션된다. 각각의 위치에는 위치 이미지 맵 (또는 맵)이 있으며 해당 사용자가 각각의 위치를 디지털 방식으로 탐색하고 자산 태그를 볼 수 있다.
그리드는 다음 열을 포함할 수 있다 :
Figure pct00098
"위치 할당(Assign Location)” 버튼 : 체크 박스가 있는 모든 위치를 나열하는 페이지를 디스플레이하고 관리자가 사용자가 볼 수 있는 위치를 확인할 수 있도록 한다.
Figure pct00099
이름 : 정렬 및 필터링 가능
Figure pct00100
성 : 정렬 및 필터링 가능
Figure pct00101
이메일 : 정렬 및 필터링 가능
Figure pct00102
전화 번호 : 정렬 및 필터링 가능
사용자 할당 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저(Razor) 페이지 (뷰)이다. 이 페이지는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었으며 페이지를 볼 수 있는 권한이 있는지 확인한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, 자바스크립트 및 jQuery를 사용하여 사용자 위치 그리드를 구축하고 버튼을 클릭하여 발화된 이벤트를 정의한다. 그리드는 Razor 용 Kendo HTMLHelpers를 사용하여 구축, 정의 및 채워진다. 그리드는 LocationUserViewModel에 직접 연결되며 데이터 소스를 고객 컨트롤러의 ActionResult에 설정한다. 해당 ActionResult는 ViewModel 객체 목록을 반환한다. "위치 사용자" 그리드 내부에는 각각의 사용자 행에 대한 "위치 할당” 버튼 이 있다. 클릭하면 실행된 행을 결정하고 해당 사용자의 UserId를 가져온다. 그런 다음 해당 사용자를 위치를 할당할 수 있는 새 페이지로 리다이렉션한다.
이 페이지는 사용자가 "위치 할당” 버튼을 클릭할 때 실행되는 자바스크립트 이벤트에 대해 구성된다. 그리드의 현재 행을 잡고 해당 사용자의 ID를 찾는다. 그런 다음 URL을 구축하고 해당 사용자를 새 페이지로 리다이렉션한다.
사용자 위치 할당 페이지, 역할 : 관리자. 이 페이지에서는 관리자가 위치 사용자에게 특정 위치를 할당할 수 있다. 위치 사용자가 시스템에 로그인하면, 이 페이지에서 할당된 위치에만 액세스할 수 있다.
이 페이지는 위치 목록을 함유하는 그리드를 포함한다. 그리드의 각각의 행에는 관리자가 위치 사용자에게 할당할 시설을 선택할 수 있는 체크박스가 있다. 위치가 선택되면 컨트롤러에 데이터를 게시하고 데이터베이스를 업데이트하는 "사용자 할당"이라는 버튼이 있다.
그리드는 다음 열을 포함할 수 있다:
Figure pct00103
체크박스 열 : 관리자가 할당할 위치를 선택할 수 있는 활성 체크박스이다.
Figure pct00104
계정 번호 : 고객 계정 번호, 정렬 가능, 필터링 가능
Figure pct00105
위치 이름 : 정렬 가능, 필터링 가능
Figure pct00106
도시 : 정렬 가능, 필터링 가능
Figure pct00107
주(State) : 정렬 가능, 필터링 가능
사용자 위치 할당 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저(Razor) 페이지 (뷰)이다. 이 페이지는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되었는지, 권한이 있는지 확인하고 이전 페이지에서 이 페이지로 전달된 사용자의 UserId로 ViewBag를 설정한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, CSS, 자바스크립트 및 jQuery를 사용하여 그리드를 구축하고 "사용자 할당" 버튼 이벤트를 정의한다. 표준 HTML div 태그를 사용하고 페이지의 스크립트 섹션에서 활성화되는 그리드이다. 이 페이지의 스크립트 섹션에는 여러 역할이 있으며 비동기식으로 실행된다. 페이지가 로드되면 Kendo UI 컨트롤러를 활성화하고 위치 그리드를 설정하며 HTML DOM 내부에 저장되는 이벤트를 생성한다.
Kendo UI 컨트롤러를 활성화하면 "사용자 할당” 버튼 및 위치 그리드가 활성화된다. 그리드가 활성화되면 데이터 소스는 위치 사용자 목록을 JSON 객체로 반환하는 컨트롤러 내부의 메서드로 설정된다. 그리드의 속성도 정의된다. 속성의 예로는 폭, 페이지 가능, 스크롤 가능, 편집 가능 등이 있다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00108
"사용자 지정” 버튼 클릭 - 버튼을 클릭하면 그리드 행을 반복(loop)하고 해당 행이 선택되었는지 확인한다. 선택되면 UserId 및 LocationId를 JSON으로 변환하여 컨트롤러에 제출할 어레이에 푸시(push)한다. 컨트롤러는 JSON 객체를 LocationUserLocation 객체 목록에 직렬화한 다음 데이터베이스 프로젝트를 사용하여 데이터베이스에 추가할 것이다. 그런 다음 관리자에게 이 페이지에 결과 메시지가 도시된다.
위치 사용자 포털 페이지, 역할 : 위치 사용자. "위치 사용자" 역할을 가진 사용자가 플랫폼에 로그인하면 "위치 사용자 포털"로 향한다.
이 페이지에는 사용자가 할당된 위치 사이를 스위칭할 수 있는 드롭 다운을 특징으로 한다. 위치 이미지 맵 (LIM : Location Image Map) 내에서 사이트를 디지털 방식으로 탐색하고 미니 맵에서 진행 상황을 보고 LIM 내에 태그가 지정된 자산을 클릭하여 볼 수 있다. 위치의 크기에 따라, 위치를 다수의 LIM으로 분할 수 있으며, 각각의 LIM은 서로 다른 카메라 포지션에서 캡처한 특정 이미지를 가지고 있으며, 위치를 완전히 묘사하기 위해 함께 집성되거나 그리드로 표시된다. 현재 LIM 이미지의 오른쪽에는 선택된 위치에 해당하는 다른 LIM 이미지의 썸네일이 있다. 사용자는 썸네일을 클릭하고 해당 LIM을 로딩할 수 있다.
샘플 위치 이미지 맵 폼은 다음 속성을 포함할 수 있다 :
Figure pct00109
위치 : 드롭 다운, 필수 - 사용자의 위치를 스위칭하고 화면 엘리먼트를 업데이트하는 이벤트를 발화한다.
위치 이미지 맵 페이지는 애플리케이션의 마스터 머리글, 메뉴 및 바닥글을 사용할 수 있도록 공유 뷰 내부에 구축된 레이저 페이지 (뷰)이다. 이 페이지에는 컨트롤러 내부에 해당 메서드를 또한 갖는다. 컨트롤러의 메서드는 사용자가 인증되고 권한이 있는지 확인한다. 컨트롤러의 메서드는 C#을 사용한다. 뷰는 HTML, C#, CSS, 자바스크립트, jQuery 및 Angular를 사용하여 위치 드롭 다운을 채우고 카메라 제조업체의 서비스에서 LIM을 프레임화하고 카메라 이미지 스팟과 통합되는 미니 맵을 구축한다. 페이지가 로드되면 Kendo UI 컨트롤러가 활성화되고 로그인한 사용자에게 뷰 권한이 있는 위치 목록이 드롭 다운에 채워진다. 다음으로, 카메라 제조업체의 API에 연결하여 LIM에 해당하는 3D 이미지 객체를 검색한다. 해당 객체는 추가하여, 효과적인 3D 모델링 공간, 카메라 위치 점, 사용자의 현재 위치 및 자산 태그를 포함하는 카메라에 의해 캡처된 위치 영역의 볼 수 있는 이미지를 갖는다. 사용자의 위치와 3D 이미지 "시야(field-of-view)"의 크기를 사용하여 미니 맵에서 현재 사용자의 시야각(field-of-vision cone)을 계산할 수 있다. 콘(cone)은 간단한 div와 CSS로 구축된다. 사용자가 주변을 둘러 보면 시야를 다시 계산하고 CSS의 속성을 3D 이미지 맵에서 사용자가 보는 것과 일치하도록 변경한다. 표시되는 LIM 이미지의 오른쪽에는 필요에 따라 현재 위치에 해당하는 추가 LIM의 이미지가 썸네일 그리드를 통해 디스플레이될 수 있다. 썸네일은 관리자 포털을 통해 업로드되었다.
Kendo UI 컨트롤러를 활성화하면 위치 드롭 다운이 활성화된다.
이 페이지는 다음 이벤트에 응답하도록 구성된다 :
Figure pct00110
Kendo UI 스크립트로 활성화하고 위치 목록을 반환하는 컨트롤러에 대한 URL을 지정하여 위치 드롭 다운의 데이터 소스를 설정한다. 세션 변수에 저장된 UserID를 확인하여 올바른 목록을 얻는다.
Figure pct00111
여러 LIM의 썸네일 그리드 생성하기. 페이지 로드시 컨트롤러에 ajax 호출이 수행되어 선택한 위치에 대한 LIM 목록을 가져온다. 각각의 LIM에 대해, 여러 데이터 속성이 있는 썸네일이 설정된다. 이러한 데이터 속성은 블루프린트/미니 맵을 구성하는 데 사용된다.
Figure pct00112
3D 이미지 맵 설정 : 이미지 토큰은 현재 선택한 썸네일의 데이터 속성으로 저장된다. 페이지 로드시, iFrame의 소스 속성을 편집하고 올바른 3D 이미지 맵을 가리키도록 구성된 스크립트가 실행된다.
Figure pct00113
블루프린트/미니 맵 설정 : 현재 선택된 썸네일을 사용하여 미니 맵 이미지 위치에 대한 데이터 속성을 검색한다. 그런 다음 jQuery를 사용하여 썸네일의 데이터 속성 값에 대한 이미지 소스를 설정한다.
Figure pct00114
카메라 위치 스팟 로딩 : 카메라 제조업체의 API에 대한 연결이 생성되고 이미지 토큰을 사용하여 객체가 요청된다. 모든 카메라 이미지 스팟의 위치와 현재 사용자 위치의 시야 치수가 반환된다. 블루 프린트/미니 맵 위에 카메라 위치 스팟 엘리먼트를 계층화하고 있다.
Figure pct00115
블루프린트/미니 맵에 있는 현재 사용자의 시야각 변경 : 기존 3D 이미지 객체를 사용하여 화면에 디스플레이되는 시야가 결정된다. 시야는 숫자 치수로 저장된다. 이러한 치수는 블루프린트/미니 맵에서 시야각을 계산하는 데 사용된다. 콘은 CSS 속성이 있는 div이다. 시야가 움직일 때마다 계산을 업데이트하고 일치하도록 CSS를 변경하는 이벤트가 호출된다.
매핑된 위치 데이터, 플랫폼 및 외부 디바이스 간의 관계는 플랫폼의 데이터베이스에 저장된 임의의 위치에서 잠재적인 비상 상황을 지원할 추가 플랫폼 기능을 제공하는 뷰 또는 페이지와 관련하여 아래에 설명된다.
GPS 추적 통합. 관리자가 이전에 업로드된 미니 맵 주변의 GPS 좌표를 설정할 수 있는 뷰가 생성된다. GPS 좌표가 설정되면, 애플리케이션은 시설 또는 위치 내부의 위도와 경도를 계산한다. jQuery "onClick"이벤트는 GPS 좌표를 생성하고 좌표가 설정된 이미지의 픽셀 위치를 마킹하는 데 사용된다. 3D 이미지 설정 페이지에서 이미지 크기를 줄이면, 애플리케이션이 GPS 지점을 다시 계산한다. 계산은 백분율을 기반으로 한다. 이미지가 12% 축소되면, 새 GPS 지점도 12% 축소된다. 픽셀은 정수이므로 다시 계산된 값이 10 진수이면 표준 수학 규칙을 사용하여 반올림하거나 내림한다.
개인 사용자에게 디바이스 할당. 개인 사용자를 관리하기 위한 뷰가 생성된다. 이러한 사용자는 시스템에 액세스할 수 없지만 GPS 디바이스가 할당된다. 이 뷰는 이름, 개인 ID, 직함 등과 같은 정보를 캡처하여 데이터베이스에 저장한다. 개인 User가 생성되면, 이를 GPS 디바이스에 링크할 수 있다. GPS 디바이스에는 디바이스 뒷면에 QR 코드가 찍혀 있어 위치 사용자가 목록에서 개인 사용자를 선택하고 프롬프트되면 디바이스를 스캔할 수 있다. 위치 사용자는 개인 사용자 및 GPS 디바이스를 비활성화할 수도 있다. 개인 사용자가 비활성화되면 해당 사용자로부터 디바이스를 제거하고 인벤토리(inventory)에서 사용할 수 있다. 사용자에게 할당되지 않은 디바이스에서 검색할 수 있는 뷰도 있다. 이를 통해 고객은 인벤토리에 할당된 디바이스 vs. 할당되지 않은 디바이스의 수를 추적할 수 있다.
위치 맵 상의 GPS 정보. 스레드 풀(thread pool)을 활용하는 윈도우(Windows) 서비스가 구축된다. 여러 스레드를 생성하면 서버가 한 번에 여러 GPS 디바이스와 통신할 수 있다. GPS 디바이스 제조업체는 이러한 요청을 수행하는 데 사용할 수 있는 API 또는 SDK를 가질 것이다. 각각의 요청은 GPS 디바이스의 위도와 경도를 반환한다. 그런 다음, 해당 판독 값의 타임 스탬프와 함께 애플리케이션 데이터베이스에서 해당 디바이스의 위치를 업데이트한다. 서버는 설사 애플리케이션에 로그인 한 사람이 없더라도 API와 지속적으로 통신한다. 클라이언트 측에는 사용자가 액세스하는 특정 위치에 대한 GPS 디바이스 목록을 요청하는 애플리케이션 데이터베이스에 대한 ajax 호출이 있다. 그런 다음 이러한 디바이스를 반복하고 계산된 위도 및 경도 픽셀 위치에 대하여 점을 맵에 표시한다. 이 호출은 사용자가 해당 뷰에 있는 동안 계속 실행된다. 위치 사용자는 GPS 점을 "온(On)" 및 "오프(Off)"로 전환할 수 있다.
GPS 개인 추적 뷰. 위치 이미지 "평면도 모드"에 대한 뷰가 생성된다. 평면도 모드는 시설의 하향식 뷰다. 이렇게 하면 미니 맵의 더 큰 버전이 표시되며 시설의 평면도가 너무 커서 화면에 맞지 않는 경우 사용자가 이미지를 클릭하고 스팬(span)할 수 있다. 이 페이지에서 스크립트가 실행되고 이 화면에 GPS 점을 배치하도록 구성되며 위치 사용자는 점 위에 마우스를 올려 그 사람이 누구인지 확인하고 마지막으로 읽은 날짜와 시간을 볼 수 있다.

Claims (12)

  1. 3D 모델링 공간과 인터페이스를 위한 시스템에 있어서,
    위치(location)의 디지털 3 차원 (3D) 표현;
    상기 위치의 지리적 포지션(position)을 나타내는 데이터; 및
    디지털 위치 인터페이스 플랫폼으로서, 상기 디지털 위치 인터페이스 플랫폼은 사용자가 상기 위치의 상기 디지털 3D 표현에 액세스할 수 있도록 구성된, 상기 디지털 위치 인터페이스 플랫폼을 포함하는, 시스템.
  2. 제 1 항에 있어서, 상기 위치는 구조물의 내부인, 시스템.
  3. 제 2 항에 있어서, 상기 디지털 위치 인터페이스 플랫폼은 포지셔닝 디바이스(positioning device)의 지리적 포지션을 나타내는 데이터를 수신하도록 추가로 구성된, 시스템.
  4. 제 3 항에 있어서, 상기 디지털 위치 인터페이스 플랫폼은 상기 포지셔닝 디바이스가 상기 위치 내에 위치될 때 상기 위치의 상기 디지털 3D 표현을 통해 상기 포지셔닝 디바이스의 상기 지리적 포지션이 상기 사용자에게 표시되도록 추가로 구성된, 시스템.
  5. 제 4 항에 있어서, 상기 위치의 상기 디지털 3D 표현은 상기 위치의 적어도 하나의 디지털 이미지를 포함하는, 시스템.
  6. 제 5 항에 있어서, 위치 내에 위치된 객체(object)의 속성을 나타내는 객체 데이터를 더 포함하고, 상기 디지털 위치 인터페이스 플랫폼은 사용자가 상기 위치의 상기 디지털 3D 표현과의 상호 작용을 통해 상기 객체 데이터에 액세스 할 수 있도록 추가로 구성된, 시스템.
  7. 3D 모델링된 공간과 인터페이스하기 위한 방법에 있어서,
    위치의 디지털 3 차원 (3D) 표현을 생성하는 단계;
    상기 위치의 지리적 포지션을 나타내는 데이터를 획득하는 단계; 및
    사용자가 상기 위치의 상기 디지털 3D 표현에 액세스할 수 있도록 구성된 디지털 위치 인터페이스 플랫폼을 컴퓨팅 디바이스에서 실행하는 단계를 포함하는, 방법.
  8. 제 7 항에 있어서, 상기 위치는 구조물의 내부인, 방법.
  9. 제 8 항에 있어서, 포지셔닝 디바이스의 지리적 포지션을 나타내는 데이터를 획득하는 단계를 더 포함하는, 방법.
  10. 제 9 항에 있어서, 상기 포지셔닝 디바이스의 지리적 포지션이 상기 위치 내에 위치될 때 상기 디지털 위치 인터페이스 플랫폼을 통해 상기 사용자에게 상기 포지셔닝 디바이스의 지리적 포지션이 표시되게 하는 단계를 더 포함하는, 방법.
  11. 제 10 항에 있어서, 상기 위치의 상기 디지털 3D 표현은 상기 위치의 적어도 하나의 디지털 이미지를 포함하는, 방법.
  12. 제 11 항에 있어서, 상기 디지털 위치 인터페이스 플랫폼을 통해 상기 위치의 상기 디지털 3D 표현과의 상호 작용을 통해 상기 위치 내에 위치된 객체의 속성을 나타내는 객체 데이터가 상기 사용자에게 표시되게 하는 단계를 더 포함하는, 방법.
KR1020217016596A 2018-11-02 2019-11-04 상호 작용 gps 통합, 3d 모델링 공간 생성을 위한 시스템 및 방법 KR20210127131A (ko)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US201862754620P 2018-11-02 2018-11-02
US62/754,620 2018-11-02
PCT/US2019/059719 WO2020093064A1 (en) 2018-11-02 2019-11-04 System and method for creating interactive gps-integrated, 3d-modelled spaces

Publications (1)

Publication Number Publication Date
KR20210127131A true KR20210127131A (ko) 2021-10-21

Family

ID=70458911

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020217016596A KR20210127131A (ko) 2018-11-02 2019-11-04 상호 작용 gps 통합, 3d 모델링 공간 생성을 위한 시스템 및 방법

Country Status (6)

Country Link
US (1) US20200143591A1 (ko)
EP (1) EP3874467A4 (ko)
JP (1) JP2022506754A (ko)
KR (1) KR20210127131A (ko)
CA (1) CA3118490A1 (ko)
WO (1) WO2020093064A1 (ko)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11288733B2 (en) * 2018-11-14 2022-03-29 Mastercard International Incorporated Interactive 3D image projection systems and methods
US11551370B2 (en) * 2020-12-18 2023-01-10 Nationwide Management Services, Inc. Remote inspection and appraisal of buildings

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8160400B2 (en) * 2005-11-17 2012-04-17 Microsoft Corporation Navigating images using image based geometric alignment and object based controls
US20080062167A1 (en) * 2006-09-13 2008-03-13 International Design And Construction Online, Inc. Computer-based system and method for providing situational awareness for a structure using three-dimensional modeling
US8503762B2 (en) * 2009-08-26 2013-08-06 Jacob Ben Tzvi Projecting location based elements over a heads up display
US8928666B2 (en) * 2012-10-11 2015-01-06 Google Inc. Navigating visual data associated with a point of interest
US8928657B2 (en) * 2013-03-07 2015-01-06 Google Inc. Progressive disclosure of indoor maps
US20140310630A1 (en) * 2013-04-12 2014-10-16 Navteq B.V. Method and apparatus for providing interactive three-dimensional indoor environments
US10163255B2 (en) * 2015-01-07 2018-12-25 Geopogo, Inc. Three-dimensional geospatial visualization

Also Published As

Publication number Publication date
US20200143591A1 (en) 2020-05-07
EP3874467A4 (en) 2022-07-20
WO2020093064A1 (en) 2020-05-07
EP3874467A1 (en) 2021-09-08
JP2022506754A (ja) 2022-01-17
CA3118490A1 (en) 2020-05-07

Similar Documents

Publication Publication Date Title
US11494549B2 (en) Mobile reports
CN105190617B (zh) 具有对全局协作数据的白板访问的协作系统
US9299047B2 (en) Metadata-configurable systems and methods for network services
US9483754B2 (en) Interactive building stacking plans
US20140136996A1 (en) Virtual remembrance system
TW202042168A (zh) 事件管理系統
US11057477B2 (en) Method for providing web service, recording medium recording program for providing web service, and server apparatus
WO2021113897A1 (en) An asset virtualisation system
US20200019285A1 (en) Geospatial asset management
KR20210127131A (ko) 상호 작용 gps 통합, 3d 모델링 공간 생성을 위한 시스템 및 방법
US11507712B2 (en) Generating an image for a building management system
US10467714B2 (en) Interactive building stacking plan user interface
US20210012556A1 (en) System and method for 3d-modelling an environment and integrating real-time observational tools
JP2020008890A (ja) 情報処理装置、情報処理方法及びプログラム
US20160012560A1 (en) System and method for emergency planning management
Giannattasio et al. The BIM model for existing building heritage: From the geometric data acquisition to the information management
Hall et al. Design and implementation of a map-centred synchronous collaboration tool using open source components: the MapChat project
US10733676B2 (en) Automatic generation of expense data using facial recognition in digitally captured photographic images
Wajid et al. WebGraveStone: An online gravestone design system based on jQuery and MVC framework
US20040158346A1 (en) System and method of generating instructional information from graphic images and fonts for use in producing a craft project
Prescott et al. Investigating Application of LiDAR for Nuclear Power Plants
KR102190792B1 (ko) 사회복지 자격정보 제공방법, 이를 위한 컴퓨터 프로그램
JP2003345860A (ja) 間取り案取得方法、間取り案取得システムおよび記録媒体
CN109416698A (zh) 对传播到移动应用的组织链接进行编排
US20240028820A1 (en) Visual Editor of Spreadsheet and Database Tables