리소스 로딩... 로딩...
  1. 소화
  2. 토론
  3. FMZ를 탐구합니다: 상태 표시줄 버튼의 새로운 응용 (부 1)

FMZ를 탐구합니다: 상태 표시줄 버튼의 새로운 응용 (부 1)

저자:FMZ~리디아, 창작: 2024-07-26 16:45:02, 업데이트: 2024-07-29 14:54:42

img

FMZ 퀀트 트레이딩 플랫폼 API 인터페이스의 주요 업데이트로 플랫폼의 전략 인터페이스 매개 변수, 인터랙티브 컨트롤 및 기타 기능이 조정되었으며 많은 새로운 기능이 추가되었습니다. 이전 기사는 인터페이스 매개 변수 및 인터랙티브 컨트롤의 업데이트 된 내용을 자세히 소개했습니다. 이 기사는 새로 도입 된 상태 표시줄 버튼의 응용을 계속 탐구합니다.FMZ.COM.

모든 전략 개발자는 사용하기 쉽고 강력하고 디자인적으로 간단한 UI 인터페이스를 구축하기를 희망합니다.FMZ.COM플랫폼 기능을 업그레이드하고 사용자 경험을 개선하기 위해 노력을 아끼지 않습니다. 전략 페이지의 상태 표시줄에 직접 인터랙티브 컨트롤을 설계하는 것은이 요구를 기반으로 한 업그레이드입니다.

다음으로, 다종양 전략 시나리오에서 그 응용을 살펴보자.

다종류 전략 시나리오

완전히 자동적인 다종류 중재 전략이든 반수동적인 다종류 타이밍 전략이든, 전략 UI 인터페이스에는 특정 제품에 대한 이익 취득, 손실 중지, 완전한 청산, 계획된 위탁 등과 같은 몇 가지 기능적 상호 작용 버튼이 있습니다.

그러면 우리는 가장 간단한 사용 시나리오로 상태 표시줄 버튼의 새로운 기능을 탐구합니다. 우리의 전략이 여러 종류를 거래한다고 가정합니다:

BTC_USDT 영구 계약, ETH_USDT 영구 계약, LTC_USDT 영구 계약, BNB_USDT 영구 계약, SOL_USDT 영구 계약

전략은 자동 거래를 실행하는 동안, 우리는 전략 인터페이스의 상태 표시줄에서 각 제품에 대한 오픈 포지션 버튼을 설계하기를 희망합니다. 그러나이 오픈 포지션 버튼은 다음과 같은 일련의 자세한 설정을 필요로합니다.

  • 명령 유형: 제한 명령/시장 명령
  • 주문의 질량: 질량
  • 주문의 가격: 가격.
  • 거래 방향: 구매 (장), 판매 (단기).

이 업그레이드 이전에 상태 표시줄 버튼은 버튼 상호 작용 메시지를 트리거 할 뿐이었다. 복잡한 메시지를 설정하기 위해 일련의 컨트롤을 묶는 방법이 없었다. 상호 작용으로의 이 업그레이드는 문제를 해결한다. 코드 디자인을 살펴보자. 코드에 추가된 상세한 댓글은 그러한 함수를 만드는 방법을 이해하기 쉽다.

디자인 예제:

// Set the types of operations BTC_USDT.swap is the type format defined by the FMZ platform, indicating the U-standard perpetual contract of BTC
var symbols = ["BTC_USDT.swap", "ETH_USDT.swap", "LTC_USDT.swap", "BNB_USDT.swap", "SOL_USDT.swap"]

// Construct a button based on a button template
function createBtn(tmp, group) {
    var btn = JSON.parse(JSON.stringify(tmp))
    _.each(group, function(eleByGroup) {
        btn["group"].unshift(eleByGroup)
    })

    return btn
}

function main() {
    LogReset(1)

    var arrManager = []
    _.each(symbols, function(symbol) {
        arrManager.push({
            "symbol": symbol,
        })
    })

    // Btn
    var tmpBtnOpen = {
        "type": "button",
        "cmd": "open",
        "name": "Open a position and place an order",
        "group": [{
            "type": "selected",
            "name": "tradeType",
            "label": "OrderType",
            "description": "Market order, limit order",
            "default": 0,
            "group": "Trading setup",
            "settings": {
                "options": ["Market order", "Limit order"],
                "required": true,
            }
        }, {
            "type": "selected",
            "name": "direction",
            "label": "Trading direction",
            "description": "Buy, sell",
            "default": "buy",
            "group": "Trading setup",
            "settings": {
                "render": "segment",
                "required": true,
                "options": [{"name": "buy", "value": "buy"}, {"name": "sell", "value": "sell"}],
            }
        }, {
            "type": "number",
            "name": "price",
            "label": "price",
            "description": "The price of the order",
            "group": "Trading setup",
            "filter": "tradeType==1",
            "settings": {
                "required": true,
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "Order quantity",
            "description": "Order quantity",
            "group": "Trading setup",
            "settings": {
                "required": true,
            }
        }],
    }

    while (true) {
        var tbl = {"type": "table", "title": "dashboard", "cols": ["symbol", "actionOpen"], "rows": []}
        _.each(arrManager, function(m) {
            var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "trading instruments", "default": m["symbol"], "settings": {"required": true}}])
            tbl["rows"].push([m["symbol"], btnOpen])
        })
        
        var cmd = GetCommand()
        if (cmd) {
            Log("Receive interaction:", cmd)
            
            // Parsing interaction messages: open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
            // According to the first colon: the previous instruction determines which button template triggers the message
            var arrCmd = cmd.split(":", 2)
            if (arrCmd[0] == "open") {
                var msg = JSON.parse(cmd.slice(5))
                Log("Trading instruments:", msg["symbol"], ", Trading direction:", msg["direction"], ", Order type:", msg["tradeType"] == 0 ? "Market order" : "Limit order", msg["tradeType"] == 0 ? ", Order price: current market price" : ", Order price:" + msg["price"], ", Quantity of order:", msg["amount"])
            }
        }

        // Output status bar information
        LogStatus(_D(), "\n", "`" + JSON.stringify(tbl) + "`")
        Sleep(1000)
    }
}

먼저 실행 효과를 살펴보고 버튼 제어 장치의 디자인을 자세히 설명해보겠습니다. 전략 코드는 그림과 같이 실행됩니다.

img

버튼을 클릭하면 특정 주문 정보를 구성하는 팝업 창이 나타납니다.

img

우리가 설계한 시작 위치 정보를 채운 후, 전략이 로그 열에서 메시지를 받았으며, 코드를 통해 메시지를 분석하고 순서의 다양한 설정을 출력했습니다. 다음으로, 이 버튼이 어떻게 구성되는지 살펴봅시다:

먼저 JSON 객체인 버튼 템플릿을 정의하고 변수 tmpBtnOpen에 할당합니다.

    {
        "type": "button",       // The type of status bar output control. Currently only buttons are supported.
        "cmd": "open",          // The message prefix received by the GetCommand function in the strategy when the button is triggered, such as this example: open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
        "name": "Open a position and place an order",      // Strategy interface, the content displayed on the button on the status bar, refer to the above picture
        "group": [{             // When the button is triggered, the controls in the pop-up box are configured and set. The group field value of this layer is an array, and the controls in the pop-up box are arranged from top to bottom according to the order of this array.
            "type": "selected",               // The first control type is: selected, drop-down box
            "name": "tradeType",              // When the status bar button is triggered, the message contains the settings of the control, and tradeType is the key name of the value currently entered in the drop-down box control. If the first option "Market Order" is selected, the message received by the GetCommand function contains the key-value pair information of "tradeType":0.
            "label": "orderType",               // When the button is triggered, the title of the current control in the pop-up box
            "description": "Market order, limit order",    // The description information of the current control will be displayed when the mouse is placed on the "small question mark" icon on the right side of the control.
            "default": 0,                     // The default value of the current control. For example, if the current control is a drop-down box, if no selection is made, the default value is the first option in the drop-down box. Usually, the default value of a drop-down box refers to the index of the drop-down box option, that is, the first one is 0, then 1, and so on. If the options of the drop-down box are in key-value format, the default value refers to value.
            "group": "Trading setup",               // If there are many controls in the pop-up box, they can be grouped. This field can set the grouping information.
            "settings": {                     // The specific settings of this drop-down box
                "options": ["Market order", "Limit order"],   // Options is a setting related to the drop-down box. It is used to set the options in the drop-down box. The value of this field is an array, which arranges the options in the drop-down box in sequence.
                "required": true,                // Required indicates whether it is set as mandatory (required) content.
            }
        }, {
            "type": "selected",         // This is also a Selected type
            "name": "direction",
            "label": "Trading direction",
            "description": "Buy, sell",
            "default": "buy",
            "group": "Trading setup",
            "settings": {
                "render": "segment",   // Unlike the default drop-down box control, the drop-down box can be replaced with a "segment selector" through the render field, such as the "buy/sell" control in the figure above.
                "required": true,
                "options": [{"name": "buy", "value": "buy"}, {"name": "sell", "value": "sell"}],   // Use key-value to set options
            }
        }, {
            "type": "number",           // Numeric input box type control
            "name": "price",
            "label": "price",
            "description": "The price of the order",
            "group": "Trading setup",
            "filter": "tradeType==1",   // The filter can be used to determine whether to display the current control. When tradeType==1, it means it is a market order, so there is no need to set the price for this control, so it is not displayed.
            "settings": {
                "required": true,       // Required when the control is activated (required)
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "Order quantity",
            "description": "Order quantity",
            "group": "Trading setup",
            "settings": {
                "required": true,
            }
        }],
    }

  • 그룹 이것은 단지 예일 뿐이기 때문에, 포지션을 열 때 설정된 오더 방향, 가격, 양, 오더 타입에 국한되지 않고 실제 디자인과 사용에 더 많은 요구 사항이 있을 수 있다. 또한 수익을 취하고 스톱-러스 플랜 오더와 같은 출구 규칙의 설계도 있을 수 있다. 따라서 UI의 새로운 버전은 그룹 필드를 지원하며, 위 스크린 샷에서 트레이딩 설정의 접는 설정과 같이 팝업 박스에서 그룹 컨트롤을 함께 표시하기 위해 편리하다.

  • 필요 버튼 구조의 그룹 필드에 설정된 컨트롤은 필요한 설정 필드를 추가하여 필요한지 여부를 설정합니다. 필요한 것으로 설정되어 있지만 사용 중에 채우지 않으면 대화형 정보를 전송하기 위해 OK 버튼을 클릭할 수 없으며 빨간색 명령 메시지가 표시됩니다.

  • 필터 필터 필드는 필터 의존도를 설정하기 위해 추가됩니다. 예를 들어 위의 예제에서 시장 주문 유형이 선택되면 주문 가격은 필요하지 않습니다. 컨트롤을 number 타입과 이름 price로 숨길 수 있습니다.

  • 표현 이러한 기본 유형의 컨트롤 (형 필드 설정): 숫자, 문자열, 선택, 부울. 제어 렌더링을 설정하기 위해 필드 렌더링을 추가하면 각 컨트롤에는 자체 여러 렌더링 구성 요소가 있습니다. 예를 들어, 위의 예제에서 선택된 드롭다운 박스 컨트롤을 세그먼트 선택기로 렌더링하는 것이 더 적합합니다. 왜냐하면 드롭다운 박스는 두 번 클릭해야 하기 때문입니다.

마지막으로, 주의깊은 독자들은 질문 할 수 있습니다. 위의 스크린 샷에서 "거래 상징"을 작성 한 팝업 박스에서 제어 정보를 볼 수 없습니다. 이 "거래 상징"은 "거래 설정" 그룹에 속하지 않습니다 (즉:"group": "Trading setup"이 설정이 실행됩니다.)

여기 상태 표시줄 테이블의 버튼을 상태 표시줄의 다른 정보와 연결하는 디자인의 시범입니다.createBtn함수는 템플릿에 따라 최종 버튼 구조를 구성하는 데 사용됩니다.tmpBtnOpen, 그리고 다른 정보는 건설 중에 버튼 구조에 기록됩니다.

// When constructing a button, bind the name of the current row and other information, add a control to the button's pop-up box, and place it first
var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "Trading symbols", "default": m["symbol"], "settings": {"required": true}}])

그래서 최종 효과는 당신이 선을 가진 버튼을 누르면symbol의BNB_USDT.swap전략 인터페이스의 상태 표시줄에서 트레이딩 기호 입력 상자는 팝업 상자에BNB_USDT.swap automatically.

이 문서에서는 UI의 새로운 버전의 응용의 작은 부분을 소개합니다. 전체 길이를 고려하면 다음 기사에서 다른 수요 시나리오의 설계에 대해 계속 논의 할 것입니다.

응원해주셔서 감사합니다!

더 많은

2019 FMZ - 모든 권리 보호