[베타] ProtoPie MCP를 만나보세요! 자세히 보기

[베타] ProtoPie MCP 공개! 자세히 보기

Introducing ProtoPie

시작하기

첫 번째 프로토타입 제작하기

ProtoPie 생태계

ProtoPie Studio 인터페이스

Import

시작하기

Adobe XD에서 가져오기

Figma에서 가져오기

Sketch에서 가져오기

프로토파이 지니 (ProtoPie Genie)

Basic Elements

컨테이너

기기

레이어

미리보기 창

장면

스크롤/페이징

단축키

시스템 상태 표시줄

Triggers & Responses

이징 (Easing)

주석

응답

타임라인

트리거

Formulas

시작하기

함수

레이어 속성

구문

수식 활용 사례

Variables

시작하기

Variables

정의된 변수

변수 활용 사례

AI

시작하기

AI 상호작용 생성

AI 문서 Q&A

AI 패널 인터페이스

최상의 결과를 위한 팁

ProtoPie MCP

시작하기

Studio MCP 소개

Studio MCP 설치 및 설정

Code MCP 소개

Code MCP 설치 및 설정

Dev View

Auto Layout

시작하기

오토 레이아웃 속성

Components

시작하기

컴포넌트 가이드

구성 요소 편집

중첩된 컴포넌트

메시지 보내기 및 받기

Interaction Libraries

시작하기

상호작용 라이브러리 관리

도서관 회원 관리

Voice Prototyping

시작하기

수신 응답

음성 응답

사용 사례

음성 명령 트리거

Connecting Devices

blokdots 연결 중

모바일 기기 연결

ProtoPie Cloud

시작하기

프로토타입 관리

스토리지 관리

프로토타입 공유

ProtoPie Player

プロトタイプのテスト

글꼴 관리

오프라인 테스트

Wear OS용 ProtoPie Player

Teams

시작하기

편집기 및 뷰어

팀 온보딩하기

프로젝트

팀 소유자 및 팀 관리자

Handoff

시작하기

상호작용 기록 생성

통화 녹음 관리

녹화 페이지

User Testing

시작하기

제품 소개

테스트 룸 생성하기

외부 연동

테스트 세션 관리

테스트 결과 및 분석

ProtoPie Cloud에서의 사용자 테스트

ProtoPie Connect

시작하기

API 플러그인

아두이노 플러그인

blokdots 플러그인

커넥트 임베디드

사용자 정의 레이어 통합

사용자 지정 플러그인

기기 연결

게임패드 플러그인

IFTTT 플러그인

로지텍 G29 스티어링 휠 플러그인

プロトタイプのテスト

기능 비교

Unity 플러그인

ProtoPie Enterprise

시작하기

조직 설정

서비스 관리자

단일 로그인 (SSO)

Security

제품 소개

접근 제어

데이터 전송, 저장 및 백업

침해 사고 대응

네트워크 및 ProtoPie Player 앱 보안

물리적 보안

리스크 관리

메뉴

Introducing ProtoPie

시작하기

첫 번째 프로토타입 제작하기

ProtoPie 생태계

ProtoPie Studio 인터페이스

Import

시작하기

Adobe XD에서 가져오기

Figma에서 가져오기

Sketch에서 가져오기

프로토파이 지니 (ProtoPie Genie)

Basic Elements

컨테이너

기기

레이어

미리보기 창

장면

스크롤/페이징

단축키

시스템 상태 표시줄

Triggers & Responses

이징 (Easing)

주석

응답

타임라인

트리거

Formulas

시작하기

함수

레이어 속성

구문

수식 활용 사례

Variables

시작하기

Variables

정의된 변수

변수 활용 사례

AI

시작하기

AI 상호작용 생성

AI 문서 Q&A

AI 패널 인터페이스

최상의 결과를 위한 팁

ProtoPie MCP

시작하기

Studio MCP 소개

Studio MCP 설치 및 설정

Code MCP 소개

Code MCP 설치 및 설정

Dev View

Auto Layout

시작하기

오토 레이아웃 속성

Components

시작하기

컴포넌트 가이드

구성 요소 편집

중첩된 컴포넌트

메시지 보내기 및 받기

Interaction Libraries

시작하기

상호작용 라이브러리 관리

도서관 회원 관리

Voice Prototyping

시작하기

수신 응답

음성 응답

사용 사례

음성 명령 트리거

Connecting Devices

blokdots 연결 중

모바일 기기 연결

ProtoPie Cloud

시작하기

프로토타입 관리

스토리지 관리

프로토타입 공유

ProtoPie Player

プロトタイプのテスト

글꼴 관리

오프라인 테스트

Wear OS용 ProtoPie Player

Teams

시작하기

편집기 및 뷰어

팀 온보딩하기

프로젝트

팀 소유자 및 팀 관리자

Handoff

시작하기

상호작용 기록 생성

통화 녹음 관리

녹화 페이지

User Testing

시작하기

제품 소개

테스트 룸 생성하기

외부 연동

테스트 세션 관리

테스트 결과 및 분석

ProtoPie Cloud에서의 사용자 테스트

ProtoPie Connect

시작하기

API 플러그인

아두이노 플러그인

blokdots 플러그인

커넥트 임베디드

사용자 정의 레이어 통합

사용자 지정 플러그인

기기 연결

게임패드 플러그인

IFTTT 플러그인

로지텍 G29 스티어링 휠 플러그인

プロトタイプのテスト

기능 비교

Unity 플러그인

ProtoPie Enterprise

시작하기

조직 설정

서비스 관리자

단일 로그인 (SSO)

Security

제품 소개

접근 제어

데이터 전송, 저장 및 백업

침해 사고 대응

네트워크 및 ProtoPie Player 앱 보안

물리적 보안

리스크 관리

함수

함수는 특정 작업을 수행하는 기성 도구와 같습니다. 데이터를 입력받아 처리하고 그 결과를 반환합니다.

함수가 수행할 수 있는 작업의 몇 가지 예는 다음과 같습니다.

  • 텍스트의 문자 수 세기

  • 텍스트에서 특정 단어 찾기

  • 두 숫자 중 더 작은 수 고르기

ProtoPie의 함수는 특정한 구조를 가지고 있습니다.

  • function(argument: TYPE) → result: TYPE

  • function(argument1: TYPE, argument2: TYPE) → result: TYPE

  • function(argument1: TYPE, argument2: TYPE, argument3: TYPE) → result: TYPE

함수는 일반적으로 입력을 위해 하나 이상의 인수(데이터)를 사용합니다. 즉, 함수가 작업을 수행하기 위해 사용하는 값입니다. 결과값 뿐만 아니라 인수는 언제나 특정한 타입의 값이어야 합니다. 타입은 텍스트, 숫자, 또는 색상이 될 수 있습니다.

선택할 수 있는 다양한 카테고리가 있습니다.

Text

concat(source1: TEXT, source2: TEXT)

TEXT

Combine two separate texts into one.

Example: concat("hello", "world")

"helloworld"

indexOf(source: TEXT, searchValue: TEXT)

NUMBER

Find the starting position of a keyword in a text. If the keyword isn't present in the text, the returned value is -1.

Example: indexOf("hello world", "world")

6

Example: indexOf("hello world", "hello")

0

Example: indexOf("hello world", "goodbye")

-1

Use indexOf for use cases like email validation. See use case example.

length(source: TEXT)

NUMBER

Count the number of characters in a text.

Example: length("hello")

5

Example: length("helloworld")

10

Example: length("hello world")

11

Use length for use cases like password validation. See use case example.

lowerCase(source: TEXT)

TEXT

Convert any text from uppercase to lowercase

Example: lowerCase("Hello")

"hello"

upperCase(source: TEXT)

TEXT

Convert any text from lowercase to UPPERCASE.

Example: upperCase("Hello")

"HELLO"

left(source: TEXT, count: NUMBER)

TEXT

Extract a part of a text from the left side based on a specific number of characters.

Example: left("hello", 3)

"hel"

right(source: TEXT, count: NUMBER)

TEXT

Extract a part of a text from the left side based on a specific number of characters.

Example: right("hello", 2)

"lo"

lpad(source: TEXT, length: NUMBER, pad: TEXT)

TEXT

Left-pad a text with another text, to a specific length.

Example: lpad("5", 2, "0")

"05"

Example: lpad("5", 4, "0")

"0005"

rpad(source: TEXT, length: NUMBER, pad: TEXT)

TEXT

Right-pad a text with another text, to a specific length.

Example: rpad("5", 2, "1")

"51"

Example: rpad("5", 6, "1")

"511111"

repeat(source: TEXT, count: NUMBER)

TEXT

Repeat a text a specific number of times.

Example: repeat("hello", 2)

"hellohello"

Example: repeat("hello", 3)

"hellohellohello"

replace(source: TEXT, from: TEXT, to: TEXT)

TEXT

Replace a part of a text with another text.

Example: replace("helloworld", "world", "protopie")

"helloprotopie"

Example: replace("goodbye, John", "goodbye", "thank you")

"thank you, John"

trim(source: TEXT)

TEXT

Remove whitespaces on both sides of a text.

Example: trim(" helloworld")

"helloworld"

Example: trim(" helloworld ")

"helloworld"

ltrim(source: TEXT)

TEXT

Remove whitespace from the left side of a text.

Example: ltrim(" helloworld ")

"helloworld "

rtrim(source: TEXT)

TEXT

Remove whitespace from the right side of a text.

Example: ltrim(" helloworld ")

" helloworld"

regexextract(source: TEXT, regular expression: TEXT)

TEXT

Extracts the first substrings of a text that match the provided regular expression.

Example: regexextract("Google Doc 101", "[0-9]+")

"101"

Example:

regexextract("The price today is $826.25", "[0-9]*\.[0-9]+[0-9]+")

"826.25"

regexreplace(source: TEXT, regular expression: TEXT, replacement: TEXT)

TEXT

Replaces part of a text string with a different text string using regular expressions.

Example: regexreplace("Google Doc 101", "[0-9]+", "777")

"Google Doc 777"

Example:

regexreplace("The price today is $826.25", "[0-9]*\.[0-9]+[0-9]+", "315.75")

"The price is $315.75"

parseJson(source: TEXT, key: TEXT)

TEXT

Parses a valid JSON string and returns the corresponding value.

Example:

parseJson("{\"name\":\"John\", \"age\":30, \"car\":null}", "age")

"30"

Example:

parseJson("{\"name\":\"John\", \"age\":30, \"car\":null}", "name")

"John"

concat(source1: TEXT, source2: TEXT)

TEXT

Combine two separate texts into one.

Example:

concat("hello", "world")

"helloworld"

indexOf(source: TEXT, searchValue: TEXT)

NUMBER

Find the starting position of a keyword in a text. If the keyword isn't present in the text, the returned value is -1.

Example:

indexOf("hello world", "world")

6

Example:

indexOf("hello world", "hello")

0

Example:

indexOf("hello world", "goodbye")

-1

Use indexOf for use cases like email validation. See use case example.

length(source: TEXT)

NUMBER

Count the number of characters in a text.

Example: length("hello")

5

Example: length("helloworld")

10

Example: length("hello world")

11

Use length for use cases like password validation. See use case example.

lowerCase(source: TEXT)

TEXT

Convert any text from uppercase to lowercase

Example: lowerCase("Hello")

"hello"

upperCase(source: TEXT)

TEXT

Convert any text from lowercase to UPPERCASE.

Example: upperCase("Hello")

"HELLO"

left(source: TEXT, count: NUMBER)

TEXT

Extract a part of a text from the left side based on a specific number of characters.

Example: left("hello", 3)

"hel"

right(source: TEXT, count: NUMBER)

TEXT

Extract a part of a text from the left side based on a specific number of characters.

Example: right("hello", 2)

"lo"

lpad(source: TEXT, length: NUMBER, pad: TEXT)

TEXT

Left-pad a text with another text, to a specific length.

Example: lpad("5", 2, "0")

"05"

Example: lpad("5", 4, "0")

"0005"

rpad(source: TEXT, length: NUMBER, pad: TEXT)

TEXT

Right-pad a text with another text, to a specific length.

Example: rpad("5", 2, "1")

"51"

Example: rpad("5", 6, "1")

"511111"

repeat(source: TEXT, count: NUMBER)

TEXT

Repeat a text a specific number of times.

Example: repeat("hello", 2)

"hellohello"

Example: repeat("hello", 3)

"hellohellohello"

replace(source: TEXT, from: TEXT, to: TEXT)

TEXT

Replace a part of a text with another text.

Example: replace("helloworld", "world", "protopie")

"helloprotopie"

Example:

replace("goodbye, John", "goodbye", "thank you")

"thank you, John"

trim(source: TEXT)

TEXT

Remove whitespaces on both sides of a text.

Example:

trim(" helloworld")

"helloworld"

Example:

trim(" helloworld ")

"helloworld"

ltrim(source: TEXT)

TEXT

Remove whitespace from the left side of a text.

Example:

ltrim(" helloworld ")

"helloworld "

rtrim(source: TEXT)

TEXT

Remove whitespace from the right side of a text.

Example:

ltrim(" helloworld ")

" helloworld"

regexextract(source: TEXT, regular expression: TEXT)

TEXT

Extracts the first substrings of a text that match the provided regular expression.

Example: regexextract("Google Doc 101", "[0-9]+")

"101"

Example:

regexextract("The price today is $826.25", "[0-9]*\.[0-9]+[0-9]+")

"826.25"

regexreplace(source: TEXT, regular expression: TEXT, replacement: TEXT)

TEXT

Replaces part of a text string with a different text string using regular expressions.

Example: regexreplace("Google Doc 101", "[0-9]+", "777")

"Google Doc 777"

Example:

regexreplace("The price today is $826.25", "[0-9]*\.[0-9]+[0-9]+", "315.75")

"The price is $315.75"

parseJson(source: TEXT, key: TEXT)

TEXT

Parses a valid JSON string and returns the corresponding value.

Example:

parseJson("{\"name\":\"John\", \"age\":30, \"car\":null}", "age")

"30"

Example:

parseJson("{\"name\":\"John\", \"age\":30, \"car\":null}", "name")

"John"

예를 들어, parseJson(var, "key")을 살펴보겠습니다. 여기서 var는 JSON 문자열을 저장하는 텍스트 변수이고, "key"는 파싱할 키입니다. 후자는 . (점) 표기법을 통해 중첩된 키 호출과 배열 형태의 객체에 대한 간편한 참조를 지원합니다.

parseJson 함수는 ProtoPie에서 복잡한 데이터 구조로 작업하는 것을 크게 간소화합니다. 또한 대부분의 API 응답이 JSON 형식이므로, Pie 내에서 parseJson을 사용할 수 있게 되면 API와의 골치 아픈 연동 작업이 매우 간단해집니다.

다음 작업을 설계하기 위해 parseJson 함수를 사용할 수 있습니다.

  • ProtoPie Connect의 Bridge 앱을 통해 Pie에 JSON 문자열을 연동합니다 (예: message: “AutomobileSignal”, value: “json string”).

  • Receive trigger를 거쳐 Pie 내부의 변수에 값을 저장합니다.

  • JSON 문자열에서 데이터 값들을 직접 꺼내어 활용합니다.

  • 자세한 내용을 알아보려면 이 Pie 예제를 살펴보세요.

Math

pow(source: NUMBER, exponent: NUMBER)

NUMBER

Calculate the result of the first number raised to the power of the second number.

Example: pow(2,3)

8

sqrt(source: NUMBER)

NUMBER

Calculate the square root of a number. This doesn't work for negative numbers.

Example: sqrt(9)

3

Example: sqrt(2)

1.41

min(source1: NUMBER, source2: NUMBER)

NUMBER

Extract the smallest of two numbers.

Example: min(0, 1)

0

max(source1: NUMBER, source2: NUMBER)

NUMBER

Extract the largest of two numbers.

Example: max(0, 1)

1

abs(value: NUMBER)

NUMBER

Return the absolute value of a number. In practice, this comes down to removing the negative sign in front of a number.

Example: abs(-1)

1

Example: abs(5 - 25)

20

sign(value: NUMBER)

NUMBER

Check if a number is positive or negative. Return 1 if a number is positive. Return -1 if a number is negative. Return 0 if a number is 0.

Example: sign(5)

1

Example: sign(-10)

-1

Example: sign(0)

0

round(source: NUMBER)

NUMBER

Return the rounded value of a number.

Example: round(3.49)

3

Example: round(1.5)

2

Example: round(6.79)

7

floor(source: NUMBER)

NUMBER

Return the nearest whole number down.

Example: floor(1.5)

1

Example: floor(2.99)

2

ceil(source: NUMBER)

NUMBER

Return the nearest whole number up.

Example: ceil(1.5)

2

Example: ceil(4.3)

5

random()

NUMBER

a random decimal number between 0 and 1.

Example: random()

a random decimal number between 0 and 1

random(min: NUMBER, max: NUMBER)

NUMBER

Return a decimal number randomly between two given numbers.

Example: random(1, 5)

a random decimal number between 1 and 5

randomInt(min: NUMBER, max: NUMBER)

NUMBER

Return a whole number randomly between two given numbers.

Example: randomInt(1, 5)

a random whole number between 1 and 5

radians(degrees: NUMBER)

NUMBER

Convert degrees to radians.

Example: radians(180)

3.14 = π

Example: radians(90)

1.57 = π / 2

degrees(radians: NUMBER)

NUMBER

Convert radians to degrees.

Example: degrees($pi)

180

Example: degrees($pi / 2)

90

sin(radians: NUMBER)

NUMBER

Calculate the sine of a number in radians.

Example: sin($pi / 2)

1

Example: sin($pi / 6)

0.5

cos(radians: NUMBER)

NUMBER

Calculate the cosine of a number in radians.

Example: cos(0)

1

Example: cos($pi / 2)

0

tan(radians: NUMBER)

NUMBER

Calculate the tangent of a number in radians.

Example: tan($pi / 4)

1

Example: tan(0)

0

asin(x: NUMBER)

NUMBER

Calculate the arcsine (in radians) of x.

Example: asin(1)

1.57 = π / 2

Example: asin(0.5)

0.52 = π / 6

acos(x: NUMBER)

NUMBER

Calculate the arccosine (in radians) of x.

Example: acos(1)

0

Example: acos(0)

1.57 = π / 2

atan(x: NUMBER)

NUMBER

Calculate the arctangent (in radians) of x.

Example: atan(1)

0.79 = π / 4

Example: atan(0)

0

atan2(y: NUMBER, x: NUMBER)

NUMBER

Calculate the arctangent (in radians) of x and y, also known as the angle in the Euclidean plane.

Example: atan2(1, 0)

1.57 = π / 2

Example: atan2(1, 1)

0.79 = π / 4

pow(source: NUMBER, exponent: NUMBER)

NUMBER

Calculate the result of the first number raised to the power of the second number.

Example: pow(2,3)

8

sqrt(source: NUMBER)

NUMBER

Calculate the square root of a number. This doesn't work for negative numbers.

Example: sqrt(9)

3

Example: sqrt(2)

1.41

min(source1: NUMBER, source2: NUMBER)

NUMBER

Extract the smallest of two numbers.

Example: min(0, 1)

0

max(source1: NUMBER, source2: NUMBER)

NUMBER

Extract the largest of two numbers.

Example: max(0, 1)

1

abs(value: NUMBER)

NUMBER

Return the absolute value of a number. In practice, this comes down to removing the negative sign in front of a number.

Example: abs(-1)

1

Example: abs(5 - 25)

20

sign(value: NUMBER)

NUMBER

Check if a number is positive or negative. Return 1 if a number is positive. Return -1 if a number is negative. Return 0 if a number is 0.

Example: sign(5)

1

Example: sign(-10)

-1

Example: sign(0)

0

round(source: NUMBER)

NUMBER

Return the rounded value of a number.

Example: round(3.49)

3

Example: round(1.5)

2

Example: round(6.79)

7

floor(source: NUMBER)

NUMBER

Return the nearest whole number down.

Example: floor(1.5)

1

Example: floor(2.99)

2

ceil(source: NUMBER)

NUMBER

Return the nearest whole number up.

Example: ceil(1.5)

2

Example: ceil(4.3)

5

random()

NUMBER

a random decimal number between 0 and 1.

Example: random()

a random decimal number between 0 and 1

random(min: NUMBER, max: NUMBER)

NUMBER

Return a decimal number randomly between two given numbers.

Example: random(1, 5)

a random decimal number between 1 and 5

randomInt(min: NUMBER, max: NUMBER)

NUMBER

Return a whole number randomly between two given numbers.

Example: randomInt(1, 5)

a random whole number between 1 and 5

radians(degrees: NUMBER)

NUMBER

Convert degrees to radians.

Example: radians(180)

3.14 = π

Example: radians(90)

1.57 = π / 2

degrees(radians: NUMBER)

NUMBER

Convert radians to degrees.

Example: degrees($pi)

180

Example: degrees($pi / 2)

90

sin(radians: NUMBER)

NUMBER

Calculate the sine of a number in radians.

Example: sin($pi / 2)

1

Example: sin($pi / 6)

0.5

cos(radians: NUMBER)

NUMBER

Calculate the cosine of a number in radians.

Example: cos(0)

1

Example: cos($pi / 2)

0

tan(radians: NUMBER)

NUMBER

Calculate the tangent of a number in radians.

Example: tan($pi / 4)

1

Example: tan(0)

0

asin(x: NUMBER)

NUMBER

Calculate the arcsine (in radians) of x.

Example: asin(1)

1.57 = π / 2

Example: asin(0.5)

0.52 = π / 6

acos(x: NUMBER)

NUMBER

Calculate the arccosine (in radians) of x.

Example: acos(1)

0

Example: acos(0)

1.57 = π / 2

atan(x: NUMBER)

NUMBER

Calculate the arctangent (in radians) of x.

Example: atan(1)

0.79 = π / 4

Example: atan(0)

0

atan2(y: NUMBER, x: NUMBER)

NUMBER

Calculate the arctangent (in radians) of x and y, also known as the angle in the Euclidean plane.

Example: atan2(1, 0)

1.57 = π / 2

Example: atan2(1, 1)

0.79 = π / 4

Color

color(red: NUMBER, green: NUMBER, blue: NUMBER)

COLOR

Return a color value (hex color code) based on an RGB value.

Example: color(255, 255, 255)

#FFFFFF

Example: color(255, 102, 97)

#FF6661

red(source: COLOR)

NUMBER

Return the red RGB parameter of a hex color code.

Example: red(#FF0000)

255

Example: red(#008000)

0

Example: red(#0000FF)

0

green(source: COLOR)

NUMBER

Return the green RGB parameter of a hex color code.

Example: green(#FF0000)

0

Example: green(#008000)

128

Example: green(#0000FF)

0

blue(source: COLOR)

NUMBER

Return the blue RGB parameter of a hex color code.

Example: blue(#FF0000)

0

Example: blue(#008000)

0

Example: blue(#0000FF)

255

color(red: NUMBER, green: NUMBER, blue: NUMBER)

COLOR

Return a color value (hex color code) based on an RGB value.

Example: color(255, 255, 255)

#FFFFFF

Example: color(255, 102, 97)

#FF6661

red(source: COLOR)

NUMBER

Return the red RGB parameter of a hex color code.

Example: red(#FF0000)

255

Example: red(#008000)

0

Example: red(#0000FF)

0

green(source: COLOR)

NUMBER

Return the green RGB parameter of a hex color code.

Example: green(#FF0000)

0

Example: green(#008000)

128

Example: green(#0000FF)

0

blue(source: COLOR)

NUMBER

Return the blue RGB parameter of a hex color code.

Example: blue(#FF0000)

0

Example: blue(#008000)

0

Example: blue(#0000FF)

255

Type Conversion

number(source: TEXT)

NUMBER

Convert a text to a number. This doesn't work if the text cannot be converted to a number.

Example: number("1234")

1234

Example: number("94.27")

94.27

text(source: NUMBER)

TEXT

Convert a number to a text.

Example: text(1234)

"1234"

Example: text(94.27)

"94.27"

Example: text(1 + 3)

"4"

format(source: NUMBER, format: TEXT)

TEXT

Convert a number to a text with a certain format. # is a placeholder for whole numbers whereas 0 represents the fractional part.

Example: format(1234.567, "#")

"1235"

Example: format(1234.567, "#,###")

"1,235"

Example: format(1234.567, "#.###,00")

"1.234,57"

Example: format(1234.567, "#,##.00")

"12,34.57"

Example: format(1234.567, "#,###.00")

"1,234.57"

color(source: TEXT)

COLOR

Convert a text to a color value (hex color code). This doesn't work if the text doesn't have a hex color code structure.

Example: green("#FFFFFF")

#FF0000

number(source: TEXT)

NUMBER

Convert a text to a number. This doesn't work if the text cannot be converted to a number.

Example: number("1234")

1234

Example: number("94.27")

94.27

text(source: NUMBER)

TEXT

Convert a number to a text.

Example: text(1234)

"1234"

Example: text(94.27)

"94.27"

Example: text(1 + 3)

"4"

format(source: NUMBER, format: TEXT)

TEXT

Convert a number to a text with a certain format. # is a placeholder for whole numbers whereas 0 represents the fractional part.

Example:

format(1234.567, "#")

"1235"

Example:

format(1234.567, "#,###")

"1,235"

Example:

format(1234.567, "#.###,00")

"1.234,57"

Example:

format(1234.567, "#,##.00")

"12,34.57"

Example:

format(1234.567, "#,###.00")

"1,234.57"

color(source: TEXT)

COLOR

Convert a text to a color value (hex color code). This doesn't work if the text doesn't have a hex color code structure.

Example: green("#FFFFFF")

#FF0000

Layers

layer(source: TEXT)

LAYER

Refer to a layer.

Use this as part of a formula or a different function.

layer(source: TEXT).property

TEXT or NUMBER

Refer to a layer's property. Learn more about layer properties.

Example: layer("Rectangle 1").x

x-coordinate of the layer called Rectangle 1

Example: layer("Oval 1").opacity

Opacity of the layer called Oval 1

Example: layer("Input 1").text

Text in the input layer called Input 1

parent(layerName: LAYER)

LAYER

Refer to the parent layer, e.g., a container or component.

Use this as part of a formula or a different function.

parent(layerName: LAYER).property

TEXT or NUMBER

Refer to the parent layer's property. Learn more about layer properties.

Example: layer("Rectangle 1").x

x-coordinate of Rectangle 1 its parent layer

Example: layer("Oval 1").opacity

Opacity of Oval 1 its parent layer

initial(layerName: LAYER, layerProperty: TEXT)

TEXT or NUMBER

Return the initial value (before any interactions) of a specific layer property. Learn more about layer properties.

Example: initial("Rectangle 1").x

Initial x-coordinate of Rectangle 1

Example: initial("Oval 1, opacity")

Initial opacity of Oval 1

Example: initial("Input 1, text")

Initial text in Input 1

layer(source: TEXT)

LAYER

Refer to a layer.

Use this as part of a formula or a different function.

layer(source: TEXT).property

TEXT or NUMBER

Refer to a layer's property. Learn more about layer properties.

Example: layer("Rectangle 1").x

x-coordinate of the layer called Rectangle 1

Example: layer("Oval 1").opacity

Opacity of the layer called Oval 1

Example: layer("Input 1").text

Text in the input layer called Input 1

parent(layerName: LAYER)

LAYER

Refer to the parent layer, e.g., a container or component.

Use this as part of a formula or a different function.

parent(layerName: LAYER).property

TEXT or NUMBER

Refer to the parent layer's property. Learn more about layer properties.

Example: layer("Rectangle 1").x

x-coordinate of Rectangle 1 its parent layer

Example: layer("Oval 1").opacity

Opacity of Oval 1 its parent layer

initial(layerName: LAYER, layerProperty: TEXT)

TEXT or NUMBER

Return the initial value (before any interactions) of a specific layer property. Learn more about layer properties.

Example:

initial("Rectangle 1").x

Initial x-coordinate of Rectangle 1

Example:

initial("Oval 1, opacity")

Initial opacity of Oval 1

Example:

initial("Input 1, text")

Initial text in Input 1

Relative Coordinates

toLayerX(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a x coordinate relative to the screen into the corresponding x coordinate relative to a container or component. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the x coordinate relative to a container `Container 1` based on the position (100, 200) relative to the screen, use the following function:

toLayerX(`Container 1`, 100, 200)

returns the x coordinate relative to `Container 1` based on the x coordinate `100` relative to the screen.

toLayerY(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a y coordinate relative to the screen into the corresponding y coordinate relative to a container or component. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the y coordinate relative to a container `Container 1` based on the position (100, 200) relative to the screen, use the following function:

toLayerY(`Container 1`, 100, 200)

returns the x coordinate relative to `Container 1` based on the x coordinate `100` relative to the screen.

toScreenX(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a x coordinate relative to a container or component into the corresponding x coordinate relative to the screen. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the x coordinate relative to the screen based on the position (10, 20) relative to a container `Container 1` , use the following function:

toScreenX(`Container 1`, 10, 20)

returns the x coordinate relative to the screen based on the x coordinate `10` relative to `Container 1`.

toScreenY(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a y coordinate relative to a container or component into the corresponding y coordinate relative to the screen. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the y coordinate relative to the screen based on the position (10, 20) relative to a container `Container 1`, use the following function:

toScreenY(`Container 1`, 10, 20)

returns the y coordinate relative to the screen based on the y coordinate `20` relative to `Container 1`.

toLayerX(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a x coordinate relative to the screen into the corresponding x coordinate relative to a container or component. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the x coordinate relative to a container `Container 1` based on the position (100, 200) relative to the screen, use the following function:

Example:

initial("Rectangle 1").x

returns the x coordinate relative to `Container 1` based on the x coordinate `100` relative to the screen.

toLayerY(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a y coordinate relative to the screen into the corresponding y coordinate relative to a container or component. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the y coordinate relative to a container `Container 1` based on the position (100, 200) relative to the screen, use the following function:

Example:

initial("Rectangle 1").x

returns the x coordinate relative to `Container 1` based on the x coordinate `100` relative to the screen.

toScreenX(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a x coordinate relative to a container or component into the corresponding x coordinate relative to the screen. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the x coordinate relative to the screen based on the position (10, 20) relative to a container `Container 1` , use the following function:

Example:

initial("Rectangle 1").x

returns the x coordinate relative to the screen based on the x coordinate `10` relative to `Container 1`.

toScreenY(containerName: LAYER, x: NUMBER, y: NUMBER)

NUMBER

Convert a y coordinate relative to a container or component into the corresponding y coordinate relative to the screen. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

For example, if you want to get the y coordinate relative to the screen based on the position (10, 20) relative to a container `Container 1`, use the following function:

Example:

initial("Rectangle 1").x

returns the y coordinate relative to the screen based on the y coordinate `20` relative to `Container 1`.

Time & Date

참고: 시간 및 날짜 함수는 ISO8601 형식을 따릅니다.

timeNow()

TEXT

Retrieves the current time information.

Example: timeNow()

17:44:50.123

time(hour: NUMBER, min: NUMBER, sec: NUMBER)

TEXT

Constructs a time object with the provided hour, minute, and second values, presenting the time in the standard "hour:minute:second" format.

Example: time(14, 50, 23)

14:50:23

hour()

NUMBER

Retrieves and returns the hour component of a given time in a 24-hour format. This function takes a time value as input and extracts the hour part, providing it as a numerical value.

Example: hour("17:44:30")

17

minute()

NUMBER

Extracts and returns the minute component of a given time in a 24-hour format.

Example: minute("17:44:30")

44

second()

NUMBER

Extracts and returns the minute component of a given time in a 24-hour format.

Example: second("17:44:30")

30

diffTime()

NUMBER

Calculates the difference between two points in time, returning the duration in hours, minutes, and/or seconds.

Example: diffTime("17:45:30", "18:45:30", "H")

1

Example: diffTime("17:45:30", "18:45:30", "M")

60

Example: diffTime("17:45:30", "18:45:30", "S")

3600

formatTime()

NUMBER

Transforms a time value into a human-readable string, following a specified format pattern.

Example: formatTime("11:44:30", "HHa")

11am

Example: formatTime("11:44:30", "HHam mm")

11am 44

Example: formatTime("11:44:30", "hh:mm a")

11:40 am

dateNow()

NUMBER

Retrieves and returns the current date at the moment of execution.

Example: dateNow()

2023-09-22

date(year: NUMBER, month: NUMBER, day: NUMBER)

TEXT

Constructs a date object using the provided year, month, and day values, returning it in "year-month-day" format.

Example: date(2014, 12, 8)

2014-12-08

year()

NUMBER

Extracts and returns the year component from a "year-month-day" date string.

Example: year("2014-12-08")

2014

month()

NUMBER

Extracts and returns the month component from a "year-month-day" formatted date.

Example: month("2014-12-08")

12

day()

NUMBER

Extracts and returns the day component from a "year-month-day" formatted date.

Example: day("2014-12-08")

8

DiffDate()

NUMBER

Calculates the difference between two dates and returns it as a numerical value based on a specified unit ("Y", "M", "D", "YD", "YM", "MD"). Note: If the "to" date is earlier than the "from" date, the result will be -1.

Example: diffDate("1973-02-24", "1969-05-16", "Y")

-1

Example: diffDate("1973-02-24", "1969-05-16", "M")

-1

Example: diffDate("1973-02-24", "1969-05-16", "D")

-1

Example: diffDate("1969-05-16", "1973-02-24", "Y")

3

Example: diffDate("1969-05-16", "1973-02-24", "M")

45

Example: diffDate("1969-05-16", "1973-02-24", "D")

1380

Example: diffDate("1969-05-16", "1973-02-24", "MD")

8

Example: diffDate("2023-01-01", "2023-02-10", "MD")

9

Example: diffDate("1969-05-16", "1973-02-24", "YM")

9

Example: diffDate("1969-05-16", "1973-02-24", "YD")

284

Example: diffDate("2023-01-01", "2023-02-10", "YD")

40

formatDate()

TEXT

Returns a formatted date string based on the provided date value and format string.

Example: formatDate("2023-06-01", "DD/MM/YYYY")

01/06/2023

Example: formatDate("2023-06-01", "YYYY MMMM dddd")

2023 June Thursday

Example: formatDate("2023-06-01", "MMM DD, YY")

Jun 01, 23

epochtodate(timestamp: NUMBER)

TEXT

Converts a Unix epoch timestamp (ms) into a UTC DateTime representation.

Example: epochtodate (0)

1970-01-01T00:00:00Z

Example: epochtodate (-1)

1969-12-31T23:59:59.999Z

Example: epochtodate (1)

1970-01-01T00:00:00.001Z

Example: epochtodate (1655908429662)

1970-01-01T00:00:00.001Z

epochtodate(timestamp: NUMBER, format: TEXT)

TEXT

Converts a Unix timestamp into a human-readable date/time string based on the specified format.

Example: epochtodate (1695316200000)

2023-09-21T17:10:00Z

Example: epochtodate (1695316200000, "hh:mm")

17:10

timeNow()

TEXT

Retrieves the current time information.

Example: timeNow()

17:44:50.123

time(hour: NUMBER, min: NUMBER, sec: NUMBER)

TEXT

Constructs a time object with the provided hour, minute, and second values, presenting the time in the standard "hour:minute:second" format.

Example: time(14, 50, 23)

14:50:23

hour()

NUMBER

Retrieves and returns the hour component of a given time in a 24-hour format. This function takes a time value as input and extracts the hour part, providing it as a numerical value.

Example: hour("17:44:30")

17

minute()

NUMBER

Extracts and returns the minute component of a given time in a 24-hour format.

Example: minute("17:44:30")

44

second()

NUMBER

Extracts and returns the minute component of a given time in a 24-hour format.

Example: second("17:44:30")

30

diffTime()

NUMBER

Calculates the difference between two points in time, returning the duration in hours, minutes, and/or seconds.

Example:

diffTime("17:45:30", "18:45:30", "H")

1

Example:

diffTime("17:45:30", "18:45:30", "M")

60

Example:

diffTime("17:45:30", "18:45:30", "S")

3600

formatTime()

NUMBER

Transforms a time value into a human-readable string, following a specified format pattern.

Example:

formatTime("11:44:30", "HHa")

11am

Example:

formatTime("11:44:30", "HHam mm")

11am 44

Example:

formatTime("11:44:30", "hh:mm a")

11:40 am

dateNow()

NUMBER

Retrieves and returns the current date at the moment of execution.

Example: dateNow()

2023-09-22

date(year: NUMBER, month: NUMBER, day: NUMBER)

TEXT

Constructs a date object using the provided year, month, and day values, returning it in "year-month-day" format.

Example: date(2014, 12, 8)

2014-12-08

year()

NUMBER

Extracts and returns the year component from a "year-month-day" date string.

Example: year("2014-12-08")

2014

month()

NUMBER

Extracts and returns the month component from a "year-month-day" formatted date.

Example: month("2014-12-08")

12

day()

NUMBER

Extracts and returns the day component from a "year-month-day" formatted date.

Example: day("2014-12-08")

8

DiffDate()

NUMBER

Calculates the difference between two dates and returns it as a numerical value based on a specified unit ("Y", "M", "D", "YD", "YM", "MD"). Note: If the "to" date is earlier than the "from" date, the result will be -1.

Example:

diffDate("1973-02-24", "1969-05-16", "Y")

-1

Example:

diffDate("1973-02-24", "1969-05-16", "M")

-1

Example:

diffDate("1973-02-24", "1969-05-16", "D")

-1

Example:

diffDate("1969-05-16", "1973-02-24", "Y")

3

Example:

diffDate("1969-05-16", "1973-02-24", "M")

45

Example:

diffDate("1969-05-16", "1973-02-24", "D")

1380

Example:

diffDate("1969-05-16", "1973-02-24", "MD")

8

Example:

diffDate("2023-01-01", "2023-02-10", "MD")

9

Example:

diffDate("1969-05-16", "1973-02-24", "YM")

9

Example:

diffDate("1969-05-16", "1973-02-24", "YD")

284

Example:

diffDate("2023-01-01", "2023-02-10", "YD")

40

formatDate()

TEXT

Returns a formatted date string based on the provided date value and format string.

Example:

formatDate("2023-06-01", "DD/MM/YYYY")

01/06/2023

Example:

formatDate("2023-06-01", "YYYY MMMM dddd")

2023 June Thursday

Example:

formatDate("2023-06-01", "MMM DD, YY")

Jun 01, 23

epochtodate(timestamp: NUMBER)

TEXT

Converts a Unix epoch timestamp (ms) into a UTC DateTime representation.

Example:

epochtodate (0)

1970-01-01T00:00:00Z

Example:

epochtodate (-1)

1969-12-31T23:59:59.999Z

Example:

epochtodate (1)

1970-01-01T00:00:00.001Z

Example:

epochtodate (1655908429662)

1970-01-01T00:00:00.001Z

epochtodate(timestamp: NUMBER, format: TEXT)

TEXT

Converts a Unix timestamp into a human-readable date/time string based on the specified format.

Example:

epochtodate (1695316200000)

2023-09-21T17:10:00Z

Example:

epochtodate (1695316200000, "hh:mm")

17:10

ProtoPie School 마스터클래스에서 더 알아보기

ProtoPie에서 함수를 사용하는 방법에 대해 더 알고 싶으신가요? ProtoPie 마스터클래스에 참여하여 본 문서에 나열된 일부 함수를 사용하는 구체적인 예시와 가이드를 확인해보세요.