Functions

Function은 ProtoPie에서 설정해 둔 Formula로, 데이터를 입력하면 결과값을 추출하도록 설계되어 있습니다. 다음은 Function이 하는 역할에 대한 예시입니다.

  • 텍스트의 글자 수를 계산합니다.
  • 텍스트에 있는 특정 단어를 추출합니다.
  • 여러 숫자 가운데 가장 작은 값을 추출합니다.

Function은 다음과 같은 구조를 갖습니다.

  • function(argument: TYPE) → 결과 값: TYPE
  • function(argument1: TYPE, argument2: TYPE) → 결과 값: TYPE
  • function(argument1: TYPE, argument2: TYPE, argument3: TYPE) → 결과 값: TYPE

Function에는 한 개 혹은 여러 개의 데이터를 입력해야 합니다. 이 때 데이터는 텍스트, 숫자, 색상 등 특정 유형을 사용해야 합니다.

Function의 종류는 다음과 같이 구분할 수 있습니다.

Text

  • concat(source1: TEXT, source2: TEXT)TEXT

    두 개의 다른 텍스트를 하나로 결합시킵니다.

    • Example:concat("hello", "world")"helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER

    텍스트에서 특정 단어가 시작되는 위치를 찾습니다. 해당 단어가 텍스트 내 존재하지 않을 경우. 값은 -1로 추출됩니다.

    • Example:indexOf("hello world", "world")6
    • Example:indexOf("hello world", "hello")0
    • Example:indexOf("hello world", "goodbye")-1
    • 예를 들어, 이메일 인증 프로토타입을 만들 때 indexOf를 사용할 수 있습니다. 다음 링크에서 예제를 확인하십시오.
  • length(source: TEXT)NUMBER

    텍스트의 글자 수를 계산합니다.

    • Example:length("hello")5
    • Example:length("helloworld")10
    • Example:length("hello world")11
    • 예를 들어, 비밀번호 인증 프로토타입을 만들 때 length를 사용할 수 있습니다. 다음 링크에서 예제를 확인하십시오.
  • lowerCase(source: TEXT)TEXT

    텍스트를 소문자로 변경합니다.

    • Example:lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT

    텍스트를 대문자로 변경합니다.

    • Example:upperCase("Hello")"HELLO"
  • left(source: TEXT, count: NUMBER)TEXT

    텍스트 좌측에서 원하는 개수 만큼 글자를 추출합니다.

    • Example:left("hello", 3)"hel"
  • lpad(source: TEXT, length: NUMBER, pad: TEXT)TEXT

    원하는 길이가 되도록 텍스트 좌측에 입력한 글자를 추가합니다.

    • Example:lpad("5", 2, "0")"05"
    • Example:lpad("5", 4, "0")"0005"
  • rpad(source: TEXT, length: NUMBER, pad: TEXT)TEXT

    원하는 길이가 되도록 텍스트 우측에 입력한 글자를 추가합니다.

    • Example:rpad("5", 2, "1")"51"
    • Example:rpad("5", 6, "1")"511111"
  • repeat(source: TEXT, count: NUMBER)TEXT

    텍스트를 입력한 숫자 만큼 반복합니다.

    • Example:repeat("hello", 2)"hellohello"
    • Example:repeat("hello", 3)"hellohellohello"
  • replace(source: TEXT, from: TEXT, to: TEXT)TEXT

    텍스트의 특정 부분을 다른 글자로 변경합니다.

    • Example:replace("helloworld", "world", "protopie")"helloprotopie"
    • Example:replace("goodbye, John", "goodbye", "thank you")"thank you, John"
  • trim(source: TEXT)TEXT

    텍스트 양쪽에 있는 여백을 삭제합니다.

    • Example:trim(" helloworld ")"helloworld"
    • Example:trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT

    텍스트 좌측에 있는 여백을 삭제합니다.

    • Example:ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT

    텍스트 우측에 있는 여백을 삭제합니다.

    • Example:rtrim(" helloworld ")" helloworld"

Math

  • pow(source: NUMBER, exponent: NUMBER)NUMBER

    첫번째 숫자를 두번째 숫자 만큼 거듭제곱합니다.

    • Example:pow(2, 3)8
  • sqrt(source: NUMBER)NUMBER

    입력된 숫자의 제곱근을 추출합니다. 입력한 숫자가 음수이면 계산되지 않습니다.

    • Example:sqrt(9)3
    • Example:sqrt(2)1.41
  • min(source1: NUMBER, source2: NUMBER)NUMBER

    입력한 숫자 중 최소값을 추출합니다.

    • Example:min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER

    입력한 숫자 중 최대값을 추출합니다.

    • Example:max(0, 1)1
  • abs(value: NUMBER)NUMBER

    입력된 숫자의 절대값을 추출합니다. 사실상 음수의 마이너스 기호를 삭제하기 위해 사용됩니다.

    • Example:abs(-1)1
    • Example:abs(5 - 25)20
  • sign(value: NUMBER)NUMBER

    입력된 숫자가 양수인지 음수인지 판별합니다. 양수는 1, 음수는 -1로 값이 추출됩니다. 0을 입력하면 결과값도 0이 됩니다.

    • Example:sign(5)1
    • Example:sign(-10)-1
    • Example:sign(0)0
  • round(source: NUMBER)NUMBER

    입력된 숫자를 반올림합니다.

    • Example:round(3.49)3
    • Example:round(1.5)2
    • Example:round(6.79)7
  • floor(source: NUMBER)NUMBER

    입력된 숫자를 내림합니다.

    • Example:floor(1.5)1
    • Example:floor(2.99)2
  • ceil(source: NUMBER)NUMBER

    입력된 숫자를 올림합니다.

    • Example:ceil(1.5)2
    • Example:ceil(4.3)5
  • random()NUMBER

    0과 1 사이의 소수를 무작위로 추출합니다.

    • Example:random()0과 1 사이의 소수를 무작위로 추출
  • random(min: NUMBER, max: NUMBER)NUMBER

    입력한 두 숫자 사이의 소수를 무작위로 추출합니다.

    • Example:random(1, 5)1과 5 사이의 소수를 무작위로 추출
  • randomInt(min: NUMBER, max: NUMBER)NUMBER

    입력한 두 숫자 사이의 정수를 무작위로 추출

    • Example:randomInt(1, 5)1과 5 사이의 정수를 무작위로 추출
  • radians(degrees: NUMBER)NUMBER

    각도 값을 라디안으로 추출합니다.

    • Example:radians(180)3.14 = π
    • Example:radians(90)1.57 = π / 2
  • degrees(radians: NUMBER)NUMBER

    라디안을 각도 값으로 추출합니다.

    • Example:degrees($pi)180
    • Example:degrees($pi / 2)90
  • sin(radian: NUMBER)NUMBER

    라디안의 사인 값을 추출합니다.

    • Example:sin($pi / 2)1
    • Example:sin($pi / 6)0.5
  • cos(radian: NUMBER)NUMBER

    라디안의 코사인 값을 추출합니다.

    • Example:cos(0)1
    • Example:cos($pi / 2)0
  • tan(radian: NUMBER)NUMBER

    라디안의 탄젠트 값을 추출합니다.

    • Example:tan($pi / 4)1
    • Example:tan(0)0
  • asin(x: NUMBER)NUMBER

    라디안에서 x의 아크사인 값을 추출합니다.

    • Example:asin(1)1.57 = π / 2
    • Example:asin(0.5)0.52 = π / 6
  • acos(x: NUMBER)NUMBER

    라디안에서 x의 아크코사인 값을 추출합니다.

    • Example:acos(1)0
    • Example:acos(0)1.57 = π / 2
  • atan(x: NUMBER)NUMBER

    라디안에서 x의 아크탄젠트 값을 추출합니다.

    • Example:atan(1)0.79 = π / 4
    • Example:atan(0)0
  • atan2(x: NUMBER, y: NUMBER)NUMBER

    라디안에서 x와 y의 아크탄젠트 값을 추출합니다.

    • Example:atan2(1, 0)1.57 = π / 2
    • Example:atan2(1, 1)0.79 = π / 4

Color

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

    RGB 값을 기본으로 하는 색상 코드를 추출합니다.

    • Example:color(255, 255, 255)#FFFFFF
    • Example:color(255, 102, 97)#FF6661
  • red(source: COLOR)NUMBER

    색상 코드의 적색 RGB 파라미터를 추출합니다.

    • Example:red(#FF0000)255
    • Example:red(#008000)0
    • Example:red(#0000FF)0
  • green(source: COLOR)NUMBER

    색상 코드의 녹색 RGB 파라미터를 추출합니다.

    • Example:green(#FF0000)0
    • Example:green(#008000)128
    • Example:green(#0000FF)0
  • blue(source: COLOR)NUMBER

    색상 코드의 청색 RGB 파라미터를 추출합니다.

    • Example:blue(#FF0000)0
    • Example:blue(#008000)0
    • Example:blue(#0000FF)255

Type Conversion

  • number(source: TEXT)NUMBER

    텍스트를 숫자로 변경합니다. 텍스트가 숫자로 이루어져야 사용할 수 있습니다.

    • Example:number("1234")1234
    • Example:number("94.27")94.27
  • text(source: NUMBER)TEXT

    숫자를 텍스트로 변경합니다.

    • Example:text(1234)"1234"
    • Example:text(94.27)"94.27"
    • Example:text(1 + 3)"4"
  • format(value: NUMBER, format: TEXT)NUMBER

    숫자를 원하는 형식의 텍스트로 변경합니다. 숫자를 특정 형식으로 나타내기 위해서는 텍스트로 변경되어야합니다. 으로 정수 자리를, 0으로 소수점 자리를 표시할 수 있습니다.

    • Example:format(1234.567, "#")1235
    • Example:format(1234.567, "#,###")1,235
    • Example:format(1234.567, "#.###,00")1.234,57
    • Example:format(1234.567, "#,###.00")1,234.57
    • Example:format(1234567, "#,###.00")1,234.57
    • Example:format(1234.567, "#,##.00")12,34.57
  • color(source: TEXT)COLOR

    텍스트를 색상 코드로 변경합니다. 텍스트가 색상 코드에 맞는 구조로 이루어져야 사용할 수 있습니다.

    • Example:color("#FFFFFF")#FFFFFF

Layers

  • layer(source: TEXT)LAYER

    특정 레이어를 참조할 수 있습니다.

    • 다른 Function 및 모든 Formula에 활용 가능합니다.
  • layer(source: TEXT).propertyTEXT or NUMBER

    레이어의 속성을 활용할 수 있습니다. 레이어 속성에 대한 자세한 사항은 다음 링크를 참고하십시오.

    • Example:layer("Rectangle 1").xRectangle 1 레이어의 X좌표
    • Example:layer("Oval 1").opacityOval 1 레이어의 투명도
    • Example:layer("Input 1").textInput 1 레이어의 텍스트
  • parent(layerName: LAYER)LAYER

    부모 레이어(컨테이너, 컴포넌트 등)를 참조할 수 있습니다.

    • 다른 Function 및 모든 Formula에 활용 가능합니다.
  • parent(layerName: LAYER).propertyTEXT or NUMBER

    부모 레이어의 속성을 활용할 수 있습니다. 레이어 속성에 대한 자세한 사항은 다음 링크를 참고하십시오.

    • Example:parent("Rectangle 1").xRectangle 1 부모 레이어의 X좌표
    • Example:parent("Oval 1").opacityOval 1 부모 레이어의 투명도
  • initial(layerName: LAYER, layerProperty: TEXT)TEXT or NUMBER

    특정 레이어 속성의 인터랙션 적용 전 초기 설정값을 추출합니다. 레이어 속성에 대한 자세한 사항은 다음 링크를 참고하십시오.

    • Example:initial(`Rectangle 1`, "x")Rectangle 1 레이어의 X좌표 초기 설정값
    • Example:initial(`Oval 1`, "opacity")Oval 1 레이어의 투명도 초기 설정값
    • Example:initial(`Input 1`, "text")Input 1 레이어의 텍스트 초기 설정값

Relative Coordinates

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

    컨테이너 혹은 컴포넌트에 대한 X 상대 좌표를 추출합니다. 컨테이너나 컴포넌트에 속한 레이어의 경우, 이에 대한 상대 좌표값을 갖습니다.

    • 예를 들어, 화면 상 (100,200)의 위치를 기준으로 컨테이너 내 X 상대 좌표를 추출하려면 다음 수식을 사용할 수 있습니다.
    • Example:toLayerX(Container 1, 100, 200)화면 상 X=100을 기준으로 한 Container 1에 대한 X 상대 좌표
  • toLayerY(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    컨테이너 혹은 컴포넌트에 대한 Y좌표를 추출합니다. 컨테이너나 컴포넌트에 속한 레이어의 경우, 이에 대한 상대 좌표값을 갖습니다.

    • 예를 들어, 화면 상 (100,200)의 위치를 기준으로 컨테이너 내 Y 상대 좌표를 추출하려면 다음 수식을 사용할 수 있습니다.
    • Example:toLayerY("Container 1", 100, 200)y-coordinate relative to Container 1 based on the y-coordinate of 200 relative to the screen
  • toScreenX(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    화면에 대한 X 상대 좌표를 추출합니다. 컨테이너나 컴포넌트에 속한 레이어의 경우, 이에 대한 상대 좌표값을 갖습니다.

    • 예를 들어, 컨테이너 혹은 컴포넌트 상 (10,20)의 위치를 기준으로 화면 내 X 상대 좌표를 추출하려면 다음 수식을 사용할 수 있습니다.
    • Example:toScreenX("Container 1", 10, 20)Container 1 상 X=10를 기준으로 한 화면에 대한 X 상대 좌표
  • toScreenY(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    화면에 대한 Y 상대 좌표를 추출합니다. 컨테이너나 컴포넌트에 속한 레이어의 경우, 이에 대한 상대 좌표값을 갖습니다.

    • 예를 들어, 컨테이너 혹은 컴포넌트 상 (10,20)의 위치를 기준으로 화면 내 Y 상대 좌표를 추출하려면 다음 수식을 사용할 수 있습니다.
    • Example:toScreenY("Container 1", 10, 20)Container 1 상 Y=20을 기준으로 한 화면에 대한 Y 상대 좌표
Back To Top