Bootstrap Chameleon Logo

CPP to Json

zh-cn

Rules

Converting C++ Slate's chain-style programming syntax to JSON format is an important approach for TAPython to simplify Slate interface development.

There are several rules for the conversion:

1. Omit SNew and write the widget name directly.

For example: SNew(STextBlock)

Will become "STextBlock":{}

2. For widgets assigned via "SAssignNew", use the "Aka" keyword instead.

For example: SAssignNew(ButtonPicture, SImage)

Will become "SImage":{"Aka": "ButtonPicture"}

3. In Slate, convert the [ ] of widgets supporting a single child component to "Content": {}`

For example:

c++ 

SNew(SCheckBox)
.Padding(2.5f)
[
    SNew(STextBlock).Text(LOCTEXT("Key", "Key"))
]

Will become:

JSON

"SCheckBox":
{
    "Padding": 2.5,
    "Content": {
        "STextBlock": { "Text": "Key" }        
    }
}

In the above example, STextBlock is actually a child widget (content) of SCheckBox.

4. For multiple child components, convert them to "Slots": []

In widgets that support multiple Slots, convert +SSomewidget::Slot to "Slots": [{...}, {...} ...]. Each child component in a Slot is a JsonObjectValue in the Slots array.

For example:

C++ 

SNew(SHorizontalBox)
    + SHorizontalBox::Slot()
    .AutoWidth()
    .HAlign(HAlign_Center)
    .Padding(2.5f)
    [
        SNew(SCheckBox)
        .OnCheckStateChanged(this, &SControlRigPoseView::OnKeyPoseChecked)
        .Padding(2.5f)
        [
            SNew(STextBlock).Text(LOCTEXT("Key", "Key"))
        ]
    ]
    + SHorizontalBox::Slot()
    [
        SNew(SCheckBox)
        [
            SNew(STextBlock).Text(LOCTEXT("Mirror", "Mirror"))
        ]
    ]

JSON

"SHorizontalBox":
{
    "Slots": [
        {
            "AutoWidth": true,
            "HAlign": "Center",
            "Padding": 2.5,
            "SCheckBox":
            {
                "OnCheckStateChanged": "chameleon_tool_instance.on_key_pose_checked(%)",
                "Padding": 2.5,
                "Content": 
                {
                    "STextBlock": { "Text": "Key"}
                }
            }
        },
        {
            "SCheckBox":
            {
                "Content": 
                {
                    "STextBlock": { "Text": "Mirror"}
                }
            }
        }
    ]
}

5. Convert Style.Get to Style name and Brush values

The writing method of obtaining a Brush (or other widget styles) from a Style will be converted to two values: Style and Brush.

For example:

C++

SNew(SBorder)
.BorderImage(FEditorStyle::Get().GetBrush("ToolPanel.DarkGroupBorder"))
[
    SNew(SSpacer)
    .Size(FVector2D(100, 50))
]

Will be converted to:

JSON

"SBorder":{
    "BorderImage":
    {
        "Style": "FEditorStyle",
        "Brush": "ToolPanel.DarkGroupBorder"
    },
    "Content": 
    {
        "SSpacer": { "Size": [100, 50] }
    }
}

6. Convert Vector, Color, etc. to array format

For example

 SNew(SSpacer).Size(FVector2D(100, 50))

Will be converted to:

"SSpacer": { "Size": [100, 50] }

7. Others

  • Function calls like AutoWidth() are converted to settings with the same name
  • Indeterminate properties like FillColumn(0, 0.5f).FillColumn(1, 0.5f). are converted to a two-dimensional array format
  • Properties like Padding, Margin, ContentPadding, etc. of type FMargin are converted to a single value or an array, depending on whether there is only one value or not

For example:

C++

SNew(SGridPanel)
    .FillColumn(0, 0.5f)
    .FillColumn(1, 0.5f)
    + SGridPanel::Slot(0, 0)
    [
        SNew(STextBlock)
        .Text(LOCTEXT("SBorderLabel", "SBorder"))
    ]
    + SGridPanel::Slot(1, 0)
    .Padding(0.0f, 4.0f)
    [
        SNew(SBorder)
        [
            SNew(SSpacer)
            .Size(FVector2D(100, 50))
        ]
    ]

Is equivalent to:

JSON

"SGridPanel":
{
    "FillColumn": [[0, 0.5],[1, 0.5]],
    "Slots":
    [
        {
            "Column_Row": [0, 0],
            "STextBlock": { "Text": "SBorder" }
        },
        {
            "Column_Row": [1, 0],
            "SBorder":
            {
                "Content":
                {
                    "SSpacer": { "Size": [100, 50] }
                }
            }
        }
    ]
}

In Built-in Tools there are several Chameleon Tool examples for reference.

You can also use the Sketch Tool to directly modify the editor, with real-time visible modifications for convenient and practical usage of properties related to the interface. See Polish UI with Sketch

When using PyCharm, you can configure the preset live-templates for quick input. See Better autocomplete for details.