KR101486608B1

KR101486608B1 - 인-다이어그램 셰이프 선택을 위한 동적 사용자 인터페이스

Info

Publication number: KR101486608B1
Application number: KR20097025677A
Authority: KR
Inventors: 댄 앨버트슨
Original assignee: 마이크로소프트 코포레이션
Priority date: 2007-06-15
Filing date: 2008-06-01
Publication date: 2015-02-04
Also published as: CN101681235A; WO2008157010A2; JP5130358B2; CN101681235B; US8739068B2; KR20100020959A; WO2008157010A3; US20080313565A1; EP2174205A2; EP2174205A4; JP2010531011A

Abstract

본 명세서에서는 사용자가 드로잉 캔버스를 벗어나지 않고 흐름도 또는 기타 다이어그램에 삽입되는 활성 다이어그램 셰이프를 선택할 수 있도록 하는 동적 사용자 인터페이스(UI)를 제공하는 기술이 제공된다. 본 발명의 실시예를 사용하여, 다이어그래밍 애플리케이션은 사용자에게 드로잉 캔버스에 인접하게 위치하는 셰이프 갤러리로부터의 다이어그램 셰이프에 대한 선택을 포함하는 드로잉 캔버스 내의 동적 UI를 제공한다. 이 동적 UI를 사용하여, 사용자는 캔버스를 벗어나지 않고 셰이프를 선택하고 이를 다이어그램에 삽입할 수 있다. 부가적으로, 사용자는 동적 UI로부터 교체 셰이프를 선택하여 드로잉 캔버스를 벗어나지 않고 현재의 다이어그램 셰이프를 교체할 수 있다. 커서가 다이어그램 셰이프, 연결 제어 또는 임의의 다른 UI 트리거에 인접하거나 이곳에 위치할 때, 동적 UI는 커서 옆에 디스플레이 개시된다.

다이어그래밍, 동적 사용자 인터페이스, UI, VISIO, 셰이프

Description

인-다이어그램 셰이프 선택을 위한 동적 사용자 인터페이스{DYNAMIC USER INTERFACE FOR IN-DIAGRAM SHAPE SELECTION}

다수의 다이어그래밍 애플리케이션은 사업 프로세스를 설명하기 위해 흐름도를 생성하도록 한다. 프로세스 내의 다양한 형식의 단계를 식별하기 위해 흐름도 에서 특정한 셰이프가 자주 사용된다. 예컨대, 프로세스 내에서 정사각형은 실행(action) 단계를 식별할 수 있는데 반하여, 마름모는 프로세스 내에서 결정(decision) 단계를 나타낼 수 있다. 다이어그래밍 애플리케이션을 사용하는 흐름도를 생성하기 위하여, 통상적으로 흐름도에서 일반적으로 사용되는 수개의 셰이프(shape)를 포함하는 셰이프 갤러리가 사용자에게 제공된다. 셰이프 갤러리는 흐름도가 생성되는 캔버스(canvas)와는 떨어져 있지만, 인접한 영역에 위치된다. 사용자는 원하는 셰이프를 선택하고 이 셰이프를 캔버스의 흐름도 내 원하는 위치에 드래그할 수 있다. 추가적인 셰이프를 부가하기 위해 사용자는 커서를 셰이프 갤러리로 이동하고, 원하는 셰이프를 선택하며, 셰이프를 드로잉 캔버스의 장소로 드래그하는 절차를 반복해야 한다.

셰이프를 흐름도에 추가시키는 다른 방법은, 전술한 바와 같이 셰이프 갤러리로부터 셰이프를 선택하는 것을 포함할 수 있다. 프로세스 다이어그램의 제1 셰이프를 셰이프 갤러리로부터 드로잉 캔버스로 드래그한 이후에, 사용자는 셰이프 갤러리로부터 선택된 셰이프와 동일한 후속 셰이프를, 드로잉 캔버스 상의 특정 객체 또는 제어를 선택함으로써 흐름도에 부가할 수 있다. 예컨대, 워싱턴주 레드몬드에 위치한 마이크로소프트사의 마이크로소프트 오피스 VISIO 2007 다이어그래밍 애플리케이션은 마우스 커서가 다이어그램 셰이프 상에서 움직일 때(hovered over a diagram shape) 나타나는 연결 제어를 활용한다. 연결 제어 중 하나가 선택되면, 선택된 다이어그램 셰이프과 동일한 셰이프 갤러리의 다이어그램 셰이프는 활용되는 연결 제어에 의해 지시된 흐름도에서의 위치에 배치되고, 연결선은 인접한 셰이프를 연결하기 위해 삽입된다.

유사하게, 다이어그램 셰이프를 변경하기 위하여, 사용자는 변경될 캔버스 상의 다이어그램 셰이프를 선택하여 셰이프 갤러리로부터 원하는 다이어그램 셰이프를 선택할 수 있다. 예컨대, 실행 단계에서 결정 단계로 변경하기 위하여, 사용자는 드로잉 캔버스에서 실행 단계를 선택하고, 이후 셰이프 갤러리로부터 결정 단계를 선택한다. 이에 응답하여, 직사각형 형상의 실행 단계는 마름모 형상의 결정 단계로 변경된다. 상술한 각각의 방법에서, 셰이프 갤러리로부터 원하는 다이어그램 셰이프를 선택하기 위해, 사용자는 마우스 커서를 사용하여 드로잉 캔버스로부터 벗어나는 것이 요구된다. 종종 다이어그래밍은 신속한 처리를 요하기 때문에, 어떠한 이유로든 드로잉 캔버스로부터 벗어나는 것은 효율성을 저하시킬 수 있다.

본 발명은 상술한 기술적 인식을 고려한 것이며, 그 밖에 본 발명에 대한 자세한 사항은 이하 기술한다.

본 명세서에서는 사용자가 흐름도 또는 기타 다이어그램의 드로잉 캔버스를 벗어나지 않고 다이어그램 셰이프를 선택하고 변경할 수 있도록 하는 동적 사용자 인터페이스(UI)를 제공하는 기술이 제공된다. 본 명세서에 제시된 개념을 사용하여, 다이어그래밍 애플리케이션 또는 기타 유형의 애플리케이션 프로그램은, 커서가 다이어그램 내의 특정 제어 상으로 이동하였을 때 커서에 인접하는 동적 UI를 제공한다. 이 동적 UI를 사용하여, 사용자는 드로잉 캔버스를 벗어나지 않고 활성 다이어그램 셰이프를 동적 다이어그램 UI에 의해 제공되는 제어에 따라서 상이한 셰이프로 변경할 수 있다.

본 명세서에 제시된 발명의 일 태양에 따르면, 다이어그래밍 애플리케이션은 커서가 드로잉 캔버스 상의 UI 트리거에 인접하는지 판단한다. UI 트리거는 다이어그램 셰이프이거나 연결 제어일 수 있다. 연결 제어는 선택된 다이어그램 셰이프가 다이어그램에 삽입되도록 하고 인접한 다이어그램 셰이프에 연결되도록 한다. 커서가 UI 트리거에 인접하다고 판정하는 것에 응답하여, 다이어그래밍 애플리케이션은 드로잉 캔버스 상에 동적 UI를 디스플레이하고 후속적으로 동적 UI를 통해 UI 셰이프 제어의 선택을 수신한다. 다이어그래밍 애플리케이션은 UI 셰이프 제어의 선택에 따라서 활성 다이어그램 셰이프를 설정하고 드로잉 캔버스 상에 활성 다이어그램 셰이프를 디스플레이한다.

본 발명의 일 실시예에 따르면, 드로잉 캔버스에 제시되는 동적 UI는 다이어그램 내에 배치 가능한 복수의 다이어그램 셰이프에 대응하는 선택가능한 셰이프 제어를 포함한다. 특정 셰이프 제어 및 대응하는 다이어그램 셰이프는 드로잉 캔버스에 인접한 셰이프 갤러리에서 가용한 다이어그램 셰이프에 따라서 선택된다. 동적 UI를 통해 가용한 셰이프 제어는 셰이프 갤러리의 다이어그램 셰이프와 직접 연관될 수 있거나, 셰이프 갤러리의 가용한 셰이프로부터의 선택일 수 있다.

본 발명의 추가 실시예는, 드로잉 캔버스 상의 다이어그램 내에 배치 가능한 복수의 다이어그램 셰이프에 대응하는 선택 가능한 UI 셰이프 제어를 갖는 동적 UI를 디스플레이하는 것을 포함한다. UI 셰이프 제어의 선택이 수신되고, 활성 다이어그램 셰이프가 이에 따라 설정된다. 이후 활성 다이어그램 셰이프가 드로잉 캔버스 상에 디스플레이된다. 실시예는 커서가 활성 다이어그램 셰이프에 인접한지 판단하는 단계와, 이에 응답하여 드로잉 캔버스 상에 동적 UI를 디스플레이하는 단계를 포함한다. 제2 UI 셰이프 제어의 선택은 동적 UI를 통해서 수신되고, 활성 다이어그램 셰이프는 제2 UI 셰이프 제어의 선택에 대응하여 다이어그램 셰이프로 교체된다.

본 명세서에 기재된 실시예가 다이어그래밍 애플리케이션의 문맥에서 제시되었지만, 프로세스의 시각화된 표현을 생성하거나 디스플레이하는 임의 형식의 프로그램이 본 명세서에 제시된 개념을 이용할 수 있다고 이해해야 한다. 상술한 청구 대상은 컴퓨터-제어 장치, 컴퓨터 프로세스, 컴퓨팅 시스템 또는 컴퓨터 판독가능 매체와 같은 제조 물품으로서 구현될 수 있다. 후술하는 발명의 실시예 및 관련된 도면을 참조하여 위와 같은 그리고 기타 다양한 특징들이 명확해질 것이다.

본 발명의 상세한 설명은 후술하는 실시예에서 구체적으로 기술하는 본 발명의 개념을 단순화한 형식으로 선택적으로 소개하기 위해 제공되었다. 이는 특허 청구범위의 주요 특징 또는 필수적 특징을 식별하거나 본 발명의 범위를 제한하기 위함이 아니다. 또한, 특허 청구 대상은 본 명세서에 기재된 모든 또는 임의의 기술적 과제를 해결하는 실시예에 제한되지 않는다.

도 1A-1C는 다이어그램에 다이어그램 셰이프를 부가할 때 활성 다이어그램 셰이프 선택을 변경하는 일 실시예를 나타내는 스크린 다이어그램.

도 2A-2B는 다이어그램 내의 현재 다이어그램 셰이프를 변경하는 일 실시예를 나타내는 스크린 다이어그램.

도 3A-3B는 온-다이어그램 셰이프 선택을 제공하는 일 실시예에 따르는 예시적인 프로세스를 나타내는 흐름도.

도 4는 본 발명의 실시예를 구현할 수 있는 컴퓨팅 시스템을 위한 예시적인 컴퓨터 하드웨어 및 소프트웨어를 나타내는 컴퓨터 구조도.

후술하는 발명의 상세한 설명은, 사용자가 드로잉 캔버스를 벗어나지 않고 활성 다이어그램 셰이프가 흐름도 또는 기타 다이어그램에 삽입되도록 변경할 수 있도록 하는 동적 UI를 제공하는 기술에 관한 것이다. 본 명세서에 제공되는 실시예를 사용하여, 다이어그래밍 애플리케이션 또는 다른 형식의 애플리케이션 프로그램은 사용자에게 동적 UI를 드로잉 캔버스 내에 제공할 수 있다. 동적 UI는 드로잉 캔버스에 근접하게 위치한 셰이프 갤러리 내의 다이어그램 셰이프에 대응하는 다이어그램 셰이프의 선택을 포함한다. 동적 UI를 사용하여, 사용자는 활성 셰이 프를 선택하여 캔버스를 벗어나지 않고 다이어그램을 셰이프에 삽입할 수 있다.

여기에 기술된 청구 대상은 컴퓨터 시스템에서의 운영 시스템 및 애플리케이션 프로그램의 실행과 함께 실행되는 프로그램 모듈의 일반적인 문맥에서 제공되지만, 당업자는 다른 형식의 프로그램 모듈과 함께 다른 실시예가 수행될 수 있음을 인식할 것이다. 일반적으로, 프로그램 모듈은 루틴, 프로그램, 컴포넌트, 데이터 구조 및 특정 태스크를 수행하거나 특정 추상화 데이터 형식을 구현하는 기타 구조를 포함한다. 더욱이, 당업자는 본 명세서에 기술된 청구 대상이 휴대형 장치, 멀티프로세서 시스템, 마이크로프로세서 기반 또는 프로그래밍 가능 가전 제품, 미니 컴퓨터, 메인프레임 컴퓨터 등을 포함하는 다른 컴퓨터 시스템 구성과 함께 실행될 수 있음을 이해할 것이다.

이하의 실시예는, 본 발명의 특정 실시예 또는 예시를 나타내는 첨부된 도면이 참조된다. 먼저, 다이어그래밍 애플리케이션의 샘플 스크린 다이어그램을 나타내는 도 1A-2B와 관련하여 기술된 본 발명의 일 실시예가 기술된다. 비록 본 명세서에 기술된 다이어그래밍 애플리케이션은 마이크로소프트 오피스 VISIO 2007이지만, 다이어그램을 생성하고 디스플레이할 수 있는 모든 다이어그래밍 애플리케이션이 적용될 수 있음을 알아야 한다. 비록 본 명세서는 흐름도를 생성하고 편집하는 문맥에서 개시하고 있지만, 본 명세서의 기술 내용은 네트워크 다이어그램과 같이 임의의 형식의 다이어그램을 생성하고 편집하는데 동등하게 적용될 수 있음을 알아야 한다.

동일한 번호는 동일한 구성을 나타내는 도면을 참조하면, 다이어그램에서의 다이어그램 셰이프를 변경하기 위한 컴퓨팅 시스템 및 방법의 일 태양이 기술되어 있다. 특히, 도 1은 다이어그래밍 애플리케이션을 사용하여 생성된 예시적인 샘플 다이어그램(106)을 나타낸다. 다이어그램(106)은 다이어그램 페이지(102)의 드로잉 캔버스(104)에서 생성된다. 다이어그램(106)은 다이어그램 셰이프(114A-114C) 및 연결선(116A 및 116B)으로 나타난 복수의 프로세스 동작을 포함한다. 이상 간략하게 논의한 바와 같이, 프로세스 내의 다양한 형식의 단계를 식별하기 위해 특정한 셰이프가 흐름도에서 종종 사용된다. 예컨대, 직사각형은 프로세스에서의 실행 단계를, 마름모는 프로세스에서의 결정 단계를 나타낼 수 있다.

다이어그램(106)이 통상적으로 어떻게 생성되는지 설명하기 위해, 도 1A에 나타난 다이어그램 페이지(102)를 살펴본다. 다이어그램 페이지(102)는 드로잉 캔버스(104) 및 드로잉 캔버스(104)에 인접하게 위치한 수개의 제어를 포함한다. 셰이프 갤러리(108)는 드로잉 캔버스(104)에 인접하게 위치한 일 제어 영역이다. 셰이프 갤러리(108)는 다이어그램을 형성할 때 가장 일반적으로 사용되는 네 개의 상이한 다이어그램 셰이프에 대응하는 갤러리 셰이프 제어(110A-110D)를 제공한다. 셰이프 갤러리는 다이어그래밍 애플리케이션에 의해 제공되는 모든 가용한 다이어그램 셰이프에 대응하는 갤러리 셰이프 제어(110)를 모두 포함할 수 있고, 또는 사용자 정의된 다이어그램 셰이프 또는 일반적으로 사용되는 것에 대응되는 임의의 개수의 다이어그램 셰이프를 포함할 수 있다.

셰이프 갤러리(108)를 활용하는 다이어그램(106)을 생성하는 제1 방법은 커서(120)로 원하는 갤러리 셰이프 제어(110)를 선택하는 단계와, 셰이프 갤러 리(108)로부터의 각각의 다이어그램 셰이프(114)를 드로잉 캔버스(104)로 드래그하고 드롭하는 단계를 포함한다. 사용자는 연결선 제어(126)를 선택하여 각각의 연결선(116)을 드로잉 캔버스(104)에 드래그하고 드롭하여 다이어그램 셰이프들(114A-114C) 사이를 연결할 수 있다. 이 프로세스를 활용하기 위하여, 마이크로소프트 오피스 VISIO 2007 다이어그래밍 애플리케이션은 자동 연결 제어(128)를 제공한다. 선택되면, 자동 연결 제어(128)는 사용자가 갤러리 셰이프 제어(110A-110D) 중 하나를 선택하여 활성 다이어그램 셰이프(112)를 식별할 수 있도록 한다. 도 1A에서, 실행 단계를 나타내는 직사각형 셰이프가 활성 다이어그램 셰이프(112)로서 선택된다. 다이어그램 셰이프(114)가 전술한 드래그-드롭과 같은 방법으로써 일단 드로잉 캔버스(104)에 위치되면, 사용자는 커서(120)를 다이어그램 셰이프(114A-114C) 중 임의의 것에 인접하게, 혹은 다이어그램 셰이프(114A-114C) 중 임의의 것의 위로 이동하여, 다이어그램 어플리케이션이 다이어그램 셰이프 주위에 연결 제어(118A-118C)를 디스플레이하도록 트리거(trigger)할 수 있다. 본 명세서 전반에 걸쳐 커서(120)의 움직임을 다른 임의의 다이어그램 컴포넌트의 관계에서 기술하는데 사용한 용어 "인접한"은 다이어그램 구성요소에 인접하도록 커서(120)를 움직이는 것과, 다이어그램 구성요소 상에서 커서(120)를 움직이는 것을 포함한다고 이해해야 한다.

연결 제어(118A-118C)는 다이어그램(106)에 삽입될 다음 다이어그램 셰이프(114)를 위한 가용한 위치를 식별한다. 연결 제어(118A-118C)는, 다른 다이어그램 셰이프(114)가 추가되고 연결될 수 있는 각 방향을 나타내는 선택 가능한 지시 자를 제공한다. 여기서 다른 다이어그램 셰이프(114)가 추가되고 연결될 수 있는 각 방향은 다이어그램 셰이프(114)를 둘러싼다. 예컨대, 연결 제어(118A)는 사용자에게 다이어그램 셰이프(114)가 다이어그램 셰이프(114C) 위에 위치될 수 있다고 나타낸다. 직사각형 다이어그램 셰이프에 대응하는 갤러리 셰이프 제어(110A)가 활성 다이어그램 셰이프(112)로서 선택될 때 사용자가 연결 제어(118A)를 선택하면, 다이어그래밍 애플리케이션은 실행 단계를 다이어그램(106)에서의 다이어그램 셰이프(114C) 바로 위에 위치시키고, 다이어그램 셰이프(114C)로부터 새로운 실행 단계를 가리키는 화살표로써 새로운 활성 단계를 다이어그램 셰이프(114C)에 연결할 수 있다.

자동 연결 프로세스는 다이어그램(106) 생성의 드래그-드롭 방법에 비교하여 효율성이 증가될 수 있지만, 자동 연결 프로세스와 다이어그램(106) 생성의 드래그-드롭 방법 모두 상이한 갤러리 셰이프 제어(110)를 선택하고 활성 다이어그램 셰이프(112)를 변경하기 위해 사용자가 드로잉 캔버스(104)로부터 셰이프 갤러리(108)로 커서(120)를 이동할 것을 요구한다. 본 명세서에서 제공되는 실시예에 따르면, 사용자는 커서(120)를 다음 다이어그램 셰이프(114)가 다이어그램(106) 내에 위치될 원하는 배치 방향에 대응하는 연결 제어(118) 상으로 이동시킬(navigate) 수 있다. 이 동작의 결과, 다이어그램(106) 내에 위치되는 다음 다이어그램 셰이프(114)의 형식을 변경하기 위하여, 사용자가 상이한 활성 다이어그램 셰이프(112)를 선택할 수 있도록 하는 동적 UI(122)가 사용자에게 제공될 수 있다.

도 1A는 다이어그램(106)이 생성되는 예시를 나타낸다. 현재의 활성 다이어그램 셰이프(112)는 직사각형이고, 실행 단계를 나타낸다. 활성 다이어그램 셰이프(112)는 이전에 사용자가 갤러리 셰이프 제어(110A)를 선택하였을 때, 예컨대 다이어그램(106)에 다이어그램 셰이프(114B)를 위치시켰을 때, 사용자에 의해 설정되었다. 다이어그램 셰이프(114C)를 다이어그램(106)에 추가시킨 이후, 사용자는 결정 단계를 다이어그램 셰이프(114B)의 바로 오른편에 위치시킬 수 있다. 삼각형 결정 단계 셰이프에 대응하는 갤러리 셰이프 제어(110B)를 선택하기 위해 드로잉 캔버스(104)를 벗어나기 보다, 본 실시예에서는 동적 UI(122)를 개시하는 것을 제공한다. 본 예시에서, 커서(120)가 위에 위치되면 강조표시되는 연결 제어(118B)는 동적 UI(122)를 위한 UI 트리거(130)로서 동작한다. UI 트리거(130)는 동적 UI(122)를 개시하기 위해 다이어그래밍 애플리케이션에 의해 지정된 다이어그램(106)의 임의의 구성요소일 수 있다. 도 1A에 나타난 예시에서 UI 트리거(130)가 연결 제어(118B)인 경우, 도 2A와 관련하여 개시되는 바와 같이 UI 트리거(130)는 다이어그램 셰이프(114) 일 수 있다.

동적 UI(122)는, 커서(120)가 UI 트리거(130)에 관여되는 드로잉 캔버스(104) 내 임의의 위치에 나타날 수 있기 때문에 이를 동적(dynamic)이라고 기술한다. 동적 UI(122)는 커서(120)를 둘러싼 드로잉 캔버스(104)의 임의의 위치에 제공될 수 있으며, 보다 바람직하게는 커서(120)와 이에 대응되는 UI 트리거(130)에 충분히 근접하게 위치되어, UI 트리거(130)와 동적 UI(122) 간의 이동해야 하는 거리가 최소화된다. 동적 UI(122)는 셰이프 갤러리(108)에 위치한 네가지 갤러리 셰이프 제어(110A-110D)에 대응하는 네가지 UI 셰이프 제어(124A-124D)를 포함하는 것으로 나타난다. 동적 UI(122)는 UI 셰이프 제어(124A-124D) 이외의 임의 갯수의 다른 형식의 제어를 포함할 수 있는 것을 이해해야 한다. 부가적으로, UI 셰이프 제어(124A-124D)는 갤러리 셰이프 제어(110A-110D)의 형식 및 갯수와 동일하거나, 셰이프 갤러리(108) 내에 위치한 갤러리 셰이프 제어(110A-110D)의 작은 하위 세트를 포함할 수 있다.

일단 동적 UI(122)가 개시되고 커서(120)에 인접하게 디스플레이되면, 사용자는 커서(120)를 동적 UI(122)로 이동시켜, 생성될 다이어그램(106)의 다음 구성요소의 원하는 다이어그램 셰이프에 대응하는 UI 셰이프 제어(124)를 선택한다. 선택된 UI 셰이프 제어(124)는 활성 다이어그램 셰이프(112)를 다이어그램(106)에 부가되는 후속하는 다이어그램 셰이프(114)로 설정할 수 있다. 예컨대, 도 1B를 보면, 사용자가 다이어그램 셰이프(114C)의 오른편에 결정 단계를 부가하기를 원하기 때문에, 사용자는 커서(120)를 동적 UI(122)으로 이동시키고, 마름모 형상의 결정 단계에 대응하는 UI 셰이프 제어(124B)를 선택한다. UI 셰이프 제어(124B)를 선택한 이후, 갤러리 셰이프 제어(110B)가 활성 다이어그램 셰이프(112)로서 강조된다.

일 실시예에 따르면, UI 셰이프 제어(124B)를 선택하면 결정 단계 및 적절한 연결선이 다이어그램(106) 내에 위치되고, 활성 다이어그램 셰이프(112)가 후속하는 다이어그램 셰이프(114) 부가를 위한 갤러리 셰이프 제어(110B)로서 설정된다. 도 1C는 상기 절차의 실행 결과인, 다이어그램(106) 내에 위치한 활성 다이어그램 셰이프(112) 및 대응하는 연결선(116C)을 나타낸다. 대안적으로, UI 셰이프 제어(124B)를 선택하면, 활성 다이어그램 셰이프(112)를 후속하는 다이어그램 셰이프(114)의 부가를 위한 갤러리 셰이프 제어(110B)로서 설정하기만 한다. 원하는 결정 단계를 다이어그램(106) 내에 위치시키기 위해 연결 제어(118B)의 부가적인 선택이 필요할 수 있다. 다른 일 실시예에 따르면, UI 셰이프 제어(124B)를 선택하면 결정 단계 및 적절한 연결선이 다이어그램(106) 내에 위치되지만, 활성 다이어그램 셰이프(112)를 갤러리 셰이프 제어(110B)로 설정하지 않는다. 이 대체 실시예는 사용자가 단일 형식의 다이어그램 셰이프(114)를 주로 사용하고, 다른 형식의 다이어그램 셰이프(114)가 가끔씩만 필요한 경우 바람직할 수 있다. 이 대체 실시예는 다이어그래밍 애플리케이션의 사용자 정의 선호에 따라서 주요 실시예로서 설정될 수 있다.

본 명세서에 제공되는 실시예는 추가적으로 사용자에게 다이어그램 내의 현재 다이어그램 셰이프의 셰이프를 변경하는 기능을 제공한다. 도 2A는 다이어그램 페이지(102)의 드로잉 캔버스(104) 내에 생성되는 예시적인 다이어그램(206)을 나타낸다. 다이어그램(206)은 다이어그램 셰이프(214A-214C) 및 이에 대응하는 연결선(216A 및 216B)을 포함한다. 사용자가 다이어그램 셰이프(214C)는 실행 단계를 나타내는 직사각형 보다 결정 단계를 나타내는 마름모가 되어야 한다고 결정하였다고 가정하자. 사용자는 다이어그램 셰이프(214C)를 선택할 수 있고, 이후 변경을 유효하게 하기 위하여 셰이프 갤러리(108)로 이동하여 갤러리 셰이프 제어(110B)를 선택할 수 있다. 하지만, 본 명세서에서 제공되는 실시예는 사용자가 드로잉 캔버 스(104)를 벗어나지 않고 원하는 변경을 행할 수 있도록 한다.

본 실시예에서, 다이어그램 셰이프(214C)는 UI 트리거(130)로서 동작한다. 사용자가 커서(120)를 다이어그램 셰이프(214C)로 이동시킬 때, 다이어그래밍 애플리케이션은 UI 트리거(130) 상에서의 움직임을 감지하고 동적 UI(122)를 커서(120) 및/또는 UI 트리거(130)의 근접한 위치에 디스플레이한다. 다이어그램 셰이프(214C)를 마름모형 결정 단계로 교체하기 위하여, 사용자는 UI 셰이프 제어(124B)를 선택한다. UI 셰이프 제어(124B)의 선택을 감지하면, 도 2B에 나타난 바와 같이, 다이어그래밍 애플리케이션은 다이어그램 셰이프(214C)를 활성 다이어그램 셰이프(112)로 교체한다. 다이어그래밍 애플리케이션은 동적 UI(122)의 디스플레이를 개시하는 UI 트리거(130)로서 동작하는 다이어그램 제어의 임의 형식 및 수량을 정할 수 있는 것을 이해해야 한다.

예컨대, 모든 다이어그램 셰이프(214A-214D)는, 동적 UI(122)를 개시하는 특정 다이어그램 셰이프(214)의 교체를 위한 동적 다이어그램 UI(122)의 디스플레이를 개시하는 UI 트리거(130)일 수 있다. 각각의 다이어그램 셰이프(214A-214D)는 다이어그램 셰이프(214)를 다이어그램(206)에 추가하는데 도움을 주는 연결 제어(218A-218C)를 디스플레이하기 위한 트리거일 수 있다. 각각의 연결 제어(218A-218C)는 다이어그램(206)에 후속적으로 추가될 다이어그램 셰이프(214)의 형식을 변경하는데 사용자에게 도움을 주기 위한 동적 UI(122)를 개시하는 UI 트리거(130)일 수 있다. 다이어그램 셰이프(214)가 동적 UI(122)를 개시하는지 여부 혹은 연결 제어(218)가 동적 UI(122)를 개시하는지 여부에 기초하여, UI 셰이프 제어(124) 의 사용자 선택은 현재의 다이어그램 셰이프(214)를 변경하거나 다이어그램(206)에 다이어그램 셰이프(214)를 부가할 수 있다.

도 3A-3B를 보면, 다이어그램(106)을 생성하는 동안 사용자가 활성 다이어그램 셰이프(112)를 선택할 수 있도록 하는 드로잉 캔버스(104) 내에 동적 UI(122)를 제공하는 예시적인 루틴(300)이 설명되어 있다. 본 명세서에서 기술된 논리 동작은 (1) 컴퓨터 시스템에서 동작하는 프로그램 모듈 또는 일련의 컴퓨터 구현 동작으로서, 및/또는 (2) 컴퓨터 시스템 내의 회로 모듈 또는 상호 연결된 기계 논리 회로로서 구현될 수 있다. 이는, 컴퓨팅 시스템의 성능 및 기타 요구사항에 의존하여 선택적으로 구현될 수 있다. 따라서, 본 명세서에서 기술한 논리 동작은 동작, 구조화 장치, 액트(act) 또는 모듈로서 일컬어 진다. 이러한 동작, 구조화 장치, 액트 또는 모듈은 소프트웨어, 펌웨어, 특수 목적 디지털 논리 및 이들의 조합으로 구현될 수 있다. 본 명세서의 기재 사항 및 도면에 나타난 것보다 더 많거나 적은 동작이 수행될 수 있음을 이해해야 한다. 이러한 동작은 본 명세서에 기술된 것과 다른 순서로 수행될 수 있다.

루틴(300)은 동작(302)에서 시작하며, 다이어그래밍 애플리케이션은 셰이프 갤러리(108)에서의 갤러리 셰이프 제어(110)의 선택을 수신한다. 동작(302)에서, 루틴(300)은 동작(304)에서 계속되어, 다이어그래밍 애플리케이션은 선택된 갤러리 셰이프 제어(110)에 대응하는 셰이프를 활성 다이어그램 셰이프(112)로 설정한다. 루틴은 동작(304)에서 동작(306)으로 계속되어, 다디어그래밍 애플리케이션은 활성 다이어그램 셰이프(112)를 다이어그램(106)에 삽입하라는 요청을 수신한다. 요청 은 셰이프 갤러리(108)로부터 드로잉 캔버스(104)로의 드래그-드롭 액션으로부터, 혹은 다이어그램(106) 내의 연결 제어(118)의 선택으로부터 발생될 수 있다. 동작(306)에서, 루틴(300)은 동작(308)으로 계속되어, 다이어그래밍 애플리케이션은 요청된 활성 다이어그램 셰이프(112) 및 임의의 요청된 연결선(116)을 다이어그램(106)에 디스플레이한다. 사용자가 연결 제어(118)의 선택을 통해 다이어그램 셰이프(114)를 요청할 때 연결선(116)이 요구될 수 있다.

루틴(300)은 동작(308)에서 동작(310)으로 진행되어, 다이어그래밍 애플리케이션은 커서(120)가 UI 트리거(130) 상에서, 혹은 이 근접 경계 내에서 이동하는 것을 감지한다. 루틴(300)은 동작(310)에서 동작(312)으로 진행되어, 다이어그래밍 애플리케이션은 UI 트리거(130) 상에 혹은 부근에서 커서(120)를 감지하는 것에 응답하여 동적 UI(122)를 커서(120)의 부근에 디스플레이한다. 전술한 바와 같이, 동적 UI(122)는 셰이프 갤러리(108) 내에 하나 또는 모든 갤러리 셰이프 제어(110A-110D)를 포함할 수 있다. 루틴(300)은 동작(312)에서 동작(314)으로 진행되어, 다이어그래밍 애플리케이션은 원하는 다이어그램 셰이프(114)에 대응하는 UI 셰이프 제어(124)의 선택을 수신한다.

루틴(300)은 동작(314)에서 동작(316)으로 진행하여, 다이어그래밍 애플리케이션은 선택된 UI 셰이프 제어(124)에 대응하는 셰이프를 활성 다이어그램 셰이프(112)로 설정한다. 루틴은 동작(318)에서 동작(316)으로 진행하여, 다이어그래밍 애플리케이션은 UI 트리거(130)가 연결 제어(118)인 동적 UI(122)를 개시하였는지 판단한다. 만약, UI 트리거(130)가 연결 제어(118)가 아니고, 이에 따라 다이 어그램 셰이프(114)이면, 루틴(300)은 동작(320)으로 진행하여, 다이어그래밍 애플리케이션은 지정된 다이어그램 셰이프(144)를 활성 다이어그램 셰이프(112)로 교체한다. 루틴(300)은 동작(320)에서 동작(326)으로 계속되고, 전술한 바에 따라 진행한다.

하지만, 동작(318)에서 다이어그래밍 애플리케이션이 UI 트리거(130)가 연결 제어(118)라고 판단하면, 루틴(300)은 동작(322)으로 진행하여, 다이어그래밍 애플리케이션은 다이어그램(106)의 활성 다이어그램 셰이프(112)를 디스플레이한다. 활성 다이어그램 셰이프(112)는 연결 제어(118)에 따라서 정렬된다. 예컨대, 만약 연결 제어(118)가 오른쪽을 가리킨다면, 활성 다이어그램 셰이프(112)는 연관된 현재 다이어그램 셰이프(114)의 오른쪽으로 위치되고 정렬될 것이다. 루틴(300)은 동작(322)에서 동작(324)으로 진행되어, 다이어그래밍 애플리케이션은 다이어그램(106) 내의, 활성 다이어그램 셰이프(112)와 이와 연관된 현재 다이어그램 셰이프(114) 사이에 연결선(116)을 디스플레이한다. 루틴(300)은 동작(324)에서 동작(326)으로 진행되어, 다이어그래밍 애플리케이션은 동적 UI(122)를 드로잉 캔버스(104)로부터 삭제한다. 루틴은 동작(328)로 진행되어 종료된다.

도 4는 드로잉 캔버스(104) 영역 내의 활성 다이어그램 셰이프(112)의 선택을 수신하기 위한 인 다이어그램, 동적 UI(122)를 제공하기 위해 본 명세서에서 기술된 소프트웨어 구성 요소를 실행할 수 있는 컴퓨터(400)의 예시적인 컴퓨터 구조를 나타낸다. 도 1에 나타난 컴퓨터 구조는 통상의 데스크탑, 랩탑 컴퓨터, 또는 서버 컴퓨터를 나타내며, 본 명세서에서 기술된 컴퓨터 프로그램의 모든 태양을 구 현하기 위해 활용될 수 있다.

도 4에 나타난 컴퓨터 구조는 CPU (central processing unit; 402), RAM (random access memory; 414) 및 ROM (read only memory; 416)를 포함하는 시스템 메모리(408), 및 메모리를 CPU(402)에 연결하는 시스템 버스(404)를 포함한다. 예컨대 부팅 시에 컴퓨터(400) 내의 구성요소들 사이에서 정보를 전송하는데 도움을 주는 기본 루틴을 포함하는 기본 입/출력 시스템은 ROM(416)에 저장된다. 컴퓨터(400)는 운영 시스템(418), 애플리케이션 프로그램 및 기타 프로그램 모듈(이하 보다 상세히 기술함)을 저장하기 위한 대용량 저장 장치(410)를 더 포함한다.

대용량 저장 장치(410)는 버스(404)에 접속된 대용량 저장 제어기(도시 생략)를 통해 CPU(402)에 접속된다. 대용량 저장 장치(410) 및 이와 연관된 컴퓨터 판독 가능 매체는 컴퓨터(400)를 위한 비활성 저장소를 제공한다. 비록, 본 명세서에서 기술한 컴퓨터 판독가능 매체에 대한 기술이 하드 디스크 또는 CD-ROM과 같은 대용량 저장 장치를 가리키지만, 당업자는 컴퓨터 판독가능 매체가 컴퓨터(400)에 의해 엑세스 가능한 임의의 가용 컴퓨터 저장 매체일 수 있음을 이해할 것이다.

컴퓨터 판독가능 매체는, 이에 제한되는 것은 아니지만, 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술에 의해 구현되는 휘발성 및 비휘발성, 착탈식 및 비착탈식 등의 컴퓨터 판독 가능 매체 등을 포함할 수 있다. 예컨대, 컴퓨터 판독가능 매체는 RAM, ROM, EPROM, EEPROM, 플래시 메모리 또는 기타 고체 상태(solid state) 메모리 기술, CD-ROM, DVD, HD-DVD, BLU-RAY 또는 기타 광학 저장소, 자기 카세트, 자기 테이프, 자기 디스크 저장소 또는 기타 자기 저장 장치 또는 컴퓨터(400)에 의해 엑세스 가능하고, 원하는 정보를 저장하는데 사용될 수 있는 임의의 기타 매체를 포함할 수 있으며, 이에 제한되는 것은 아니다.

다양한 실시예에 따르면, 컴퓨터(400)는 네트워크(420)와 같은 네트워크를 통해 원격 컴퓨터로의 논리 접속을 사용하는 네트워크화된 환경에서 동작할 수 있다. 컴퓨터(400)는 버스(404)에 접속된 네트워크 인터페이스 유닛(406)을 통해 네트워크(420)에 접속될 수 있다. 네트워크 인터페이스 유닛(406)은 네트워크의 다른 타입 및 원격 컴퓨터 시스템에 접속하도록 사용될 수 있다. 컴퓨터(400)는 또한 키보드, 마우스 또는 전자 스타일러스(도 4에 도시 생략)를 포함하는 수개의 기타 장치로부터 입력을 수신하고 처리하기 위한 입/출력 제어기(412)를 포함할 수 있다. 본 명세서에 기재된 마우스를 사용하는 사용자 입력 동작은 키보드, 전자 스타일러스 또는 기타 적절한 사용자 입력 장치를 사용하여 수행될 수 있다. 유사하게, 입/출력 제어기는 디스플레이 스크린, 프린터 또는 다른 형식의 출력 장치(도 4에 도시 생략)로의 출력을 제공할 수 있다.

간략하게 전술한 바와 같이, 수개의 프로그램 모듈 및 데이터 파일은 네트워크화된 데스트탑, 랩탑, 서버 컴퓨터의 운영을 제어하는데 적합한 운영 시스템(418)을 포함하는 컴퓨터(400)의 RAM(414) 및 대용량 저장 장치(410)에 저장될 수 있다. 대용량 저장 장치(410) 및 RAM(414)은 하나 이상의 프로그램 모듈을 포함할 수 있다. 특히, 대용량 저장 장치(410) 및 RAM(414)는 다이어그래밍 애플리케이션(422)을 저장할 수 있다.

전술한 바에 기초하여, 사용자로 하여금 흐름도 또는 기타 다이어그램의 드로잉 캔버스를 벗어나지 않고 다이어그램 셰이프를 선택하고 변경하도록 하는 동적 사용자 인터페이스(UI)를 제공하는 기술이 본 명세서에서 제시되었음을 이해할 것이다. 비록 본 명세서에서 제시된 청구 대상은 컴퓨터 구조 특징, 방법론적 동작, 컴퓨터 판독가능 매체로서 특정된 언어로 기술하고 있지만, 특허청구범위에 기재된 본 발명은 본 명세서에서 기술된 특정 특징, 동작 또는 매체에 반드시 제한되는 것은 아님을 이해해야한다. 오히려, 특정 특징, 동작 또는 매체는 특허 청구 범위를 구현하는 예시적인 형태로 기술되었다.

전술한 청구 대상은 예시로서 제공되었으며, 이에 제한되어서는 아니된다. 본 명세서에 기술된 청구 대상은, 반드시 예시된 실시예 및 응용예만을 따라야 하는 것은 아니며, 본 발명의 사상 및 범위를 벗어나지 아니하고 다양한 수정 및 변경이 이루어질 수 있다.

Claims

다이어그램을 생성하는 동안 다이어그램 셰이프(diagram shape)를 선택하는 방법으로서,

커서가 드로잉 캔버스 상의 UI 트리거(user interface trigger)에 인접한지 판단하는 단계 - 상기 드로잉 캔버스는 오프 캔버스 셰이프 갤러리(off-canvas shape gallery)와 인접하고, 상기 UI 트리거는 상기 드로잉 캔버스 내의 제1 다이어그램 셰이프 및 상기 다이어그램 내에 제2 다이어그램 셰이프가 삽입될 배치 방향을 나타내는 적어도 하나의 선택가능한 지시자를 포함하는 연결 제어(connection control)를 포함함 - ;

상기 커서가 상기 UI 트리거에 인접하다고 판단하는 것에 응답하여, 동적 UI를 상기 드로잉 캔버스 상에 상기 UI 트리거의 최소 네비게이션 거리 이내로 디스플레이하는 단계 - 상기 동적 UI는 복수의 선택가능한 UI 셰이프 제어를 포함하는 셰이프 갤러리를 포함하고, 각각의 선택가능한 UI 셰이프 제어는 상기 드로잉 캔버스 상의 상기 다이어그램 내에 배치 가능한 상이한 다이어그램 셰이프에 대응함 - ;

상기 복수의 선택가능한 UI 셰이프 제어 중에서 상기 제2 다이어그램 셰이프의 선택을 수신하는 단계;

상기 UI 트리거가 상기 연결 제어인 경우, 상기 제2 다이어그램 셰이프를 상기 연결 제어와 연관된 상기 제1 다이어그램 셰이프에 인접하게 삽입하고, 상기 제1 다이어그램 셰이프 및 상기 제2 다이어그램 셰이프 사이에 연결선(connector)을 삽입하는 단계; 및

상기 UI 트리거가 상기 제1 다이어그램 셰이프인 경우, 상기 제1 다이어그램 셰이프를 상기 제2 다이어그램 셰이프로 교체(replace)하는 단계

를 포함하는 방법.
삭제
삭제
제1항에 있어서,

상기 동적 UI는 복수의 다이어그램 셰이프를 포함하는 방법.
제1항에 있어서,

상기 다이어그램 내에 배치 가능한 상기 상이한 다이어그램 셰이프는 상기 드로잉 캔버스에 인접한 상기 오프 캔버스 셰이프 갤러리 내에 디스플레이되는 상이한 다이어그램 셰이프들에 직접 대응하는 방법.
제1항에 있어서,

상기 다이어그램 내에 배치 가능한 상기 상이한 다이어그램 셰이프는 상기 드로잉 캔버스에 인접한 상기 오프 캔버스 셰이프 갤러리에 위치한 다이어그램 셰이프들의 그룹으로부터의 다이어그램 셰이프의 하위 세트를 포함하는 방법.
삭제
삭제
삭제
컴퓨터에 의해 실행될 경우, 상기 컴퓨터로 하여금 방법을 수행하도록 하는 컴퓨터 실행가능 명령어를 포함하는 컴퓨터 저장 매체로서, 상기 방법은,

커서가 드로잉 캔버스 상의 UI 트리거(user interface trigger)에 인접한지 판단하는 단계 - 상기 드로잉 캔버스는 오프 캔버스 셰이프 갤러리와 인접하고, 상기 UI 트리거는 상기 드로잉 캔버스 내의 제1 다이어그램 셰이프 및 상기 다이어그램 내에 제2 다이어그램 셰이프가 삽입될 배치 방향을 나타내는 적어도 하나의 선택가능한 지시자를 포함하는 연결 제어를 포함함 - ;

상기 커서가 상기 UI 트리거에 인접하다고 판단하는 것에 응답하여, 동적 UI를 상기 드로잉 캔버스 상에 디스플레이하는 단계 - 상기 동적 UI는 복수의 선택가능한 UI 셰이프 제어를 포함하는 온 캔버스 셰이프 갤러리(on-canvas shape gallery)를 포함하고, 각각의 선택가능한 UI 셰이프 제어는 상기 드로잉 캔버스 상의 다이어그램 내에 배치 가능한 상이한 다이어그램 셰이프에 대응함 - ;

상기 동적 UI를 통해 상기 온 캔버스 셰이프 갤러리로부터의 상기 복수의 선택가능한 UI 셰이프 제어 중에서 상기 제2 다이어그램 셰이프의 선택을 수신하는 단계;

상기 UI 트리거가 상기 연결 제어인 경우, 상기 제2 다이어그램 셰이프를 상기 연결 제어와 연관된 상기 제1 다이어그램 셰이프에 인접하게 삽입하고, 상기 제1 다이어그램 셰이프 및 상기 제2 다이어그램 셰이프 사이에 연결선을 삽입하는 단계; 및

상기 UI 트리거가 상기 제1 다이어그램 셰이프인 경우, 상기 제1 다이어그램 셰이프를 상기 제2 다이어그램 셰이프로 교체하는 단계

를 포함하는 컴퓨터 저장 매체.
제10항에 있어서,

상기 다이어그램 내에 배치 가능한 상기 상이한 다이어그램 셰이프는 상기 드로잉 캔버스에 인접한 상기 오프 캔버스 셰이프 갤러리 내에 디스플레이되는 상이한 다이어그램 셰이프들에 직접 연관되는 컴퓨터 저장 매체.
제10항에 있어서,

상기 다이어그램 내에 배치 가능한 상기 상이한 다이어그램 셰이프는 상기 드로잉 캔버스에 인접한 상기 오프 캔버스 셰이프 갤러리 내에 위치한 다이어그램 셰이프들의 그룹으로부터의 다이어그램 셰이프들의 하위 세트를 포함하는 컴퓨터 저장 매체.
삭제
삭제
제10항에 있어서,

상기 방법은,

커서가 상기 드로잉 캔버스 상의 활성 셰이프에 인접한지 판단하는 단계;

상기 커서가 상기 활성 셰이프에 인접하다고 판단하는 것에 응답하여, 상기 동적 UI를 상기 드로잉 캔버스에 디스플레이하는 단계;

상기 동적 UI를 통해 제2 UI 셰이프 제어의 선택을 수신하는 단계; 및

상기 활성 셰이프를 상기 제2 UI 셰이프 제어의 상기 선택에 대응하는 다이어그램 셰이프로 교체하는 단계

를 더 포함하는, 컴퓨터 저장 매체.
다이어그램을 생성하는 동안 활성 다이어그램 셰이프를 선택하는 방법으로서,

오프 캔버스 셰이프 갤러리로부터 상기 활성 다이어그램 셰이프의 사용자 선택을 수신하는 단계;

상기 활성 다이어그램 셰이프를 상기 다이어그램 내에 디스플레이하라는 요청을 수신하는 단계;

상기 활성 다이어그램 셰이프를 상기 다이어그램 내에 디스플레이하라는 상기 요청을 수신하는 것에 응답하여, 상기 활성 다이어그램 셰이프를 상기 다이어그램 내에 디스플레이하는 단계;

커서가 드로잉 캔버스 상에 디스플레이된 상기 활성 다이어그램 셰이프와 연관된 연결 제어 트리거 UI를 포함하는 제1 트리거에 인접한지 판단하는 단계 - 상기 연결 제어 트리거 UI는 상기 연결 제어 트리거 UI가 선택되면 상기 다이어그램 내에 새로운 다이어그램 셰이프가 삽입될 방향을 표시하는 선택가능한 지시자를 포함함 - ;

상기 커서가 상기 연결 제어 트리거 UI에 인접하다고 판단하는 것에 응답하여, 동적 UI를 상기 드로잉 캔버스 상에서 상기 커서에 인접하게 디스플레이하는 단계 - 상기 동적 UI는 상기 드로잉 캔버스 상의 상기 다이어그램 내에 배치 가능한 선택가능한 복수의 UI 셰이프 제어를 포함하는 온 캔버스 셰이프 갤러리를 포함하고, 상기 복수의 선택가능한 UI 셰이프 제어는 상기 드로잉 캔버스에 인접한 오프 캔버스 셰이프 갤러리 내에 배치된 복수의 갤러리 셰이프 제어에 대응함 - ;

상기 커서가 상기 드로잉 캔버스 상의 활성 다이어그램 셰이프 트리거 UI를 포함하는 제2 트리거에 인접하다고 판단하는 단계;

상기 커서가 상기 활성 다이어그램 셰이프 트리거 UI에 인접하다고 판단하는 것에 응답하여, 상기 동적 UI를 상기 드로잉 캔버스 상에 상기 커서에 인접하도록 디스플레이하는 단계;

상기 동적 UI를 통해 상기 복수의 선택가능한 UI 셰이프 제어 중에서 UI 셰이프 제어의 선택을 수신하는 단계;

상기 제1 트리거에 인접하는 상기 커서에 응답하여 디스플레이된 상기 UI 셰이프 제어의 상기 선택을 수신하면, 상기 선택가능한 지시자에 의해 표시되는 상기 방향으로 상기 선택된 UI 셰이프 제어에 대응되는 다이어그램 셰이프를 상기 다이어그램 내에 삽입하는 단계;

상기 제2 트리거에 인접하는 상기 커서에 응답하여 디스플레이된 상기 UI 셰이프 제어의 상기 선택을 수신하면, 상기 동적 UI를 통해 선택된 상기 UI 셰이프 제어의 상기 선택에 대응되는 다이어그램 셰이프로서 상기 활성 다이어그램 셰이프를 교체하는 단계

를 포함하는 방법.
삭제
삭제
삭제
삭제