
markup.push({

BalanceView: {
    "+": "GroupView",
    gxLayout: [
        "H:|-12-[balance]-12-|",
        "V:|-30-[balance]-16-|",

        "V:[leftLabel]-(-1)-[balance]&alignLeft",
        "V:[balanceReadout]-(-1)-[balance]&alignCenterX",
        "V:[rightLabel]-(-1)-[balance]&alignRight",
    ],
    gxChildViews: {
        balance: {
            "+": "SliderView.trackUnfilled",
            gxValueKey: "nodeModel.balance",
            gxRangeMin: -1,
            gxRangeMax: 1,
            gxDetents: "0",
            gxKeystrokeStepSize: 0.01,
            axTitle: "Balance",
            axFormatter: "PercentFormatter",
            axHelp: "Negative % is Left, Positive is Right",
        },
        leftLabel: labelView("L", "size12"),
        rightLabel: labelView("R", "right.size12"), // "Right", right aligned
        balanceReadout: {
            "+": "ReadoutView.centerx",
            gxIntrinsicWidth: 100,
            gxValueKey: "nodeModel.balance",
            gxFormatter: "LeftRightFormatter.fullWords"
        }
    }
},

BalancePopover: {
    "+": "PopoverTemplate",
    gxTitle: "Balance",
    gxLayout: [ 
        "H:|-12-[self(284)]-12-|",    // sets popover width
        "V:|-12-[self]-12-|",
        "V:|-41-[settingsContainer]-8-[presetsGroup]",
        "H:|-0-[settingsContainer]-0-|",
   ],
    gxChildViews: {
        title: "PopoverTitle",
        switch: "PopoverOnOffSwitch",
        presetsGroup: presetsGroup(),
        settingsContainer: {
            nsClass: "GXDrawView"
        }
    }
}

})
