 {
  "mControlDataList": [
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 3 + ${width} * 2",
      "dynamicY": "${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -1,
        0,
        0,
        0
      ],
      "name": "Keyboard",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": false,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -5,
        0,
        0,
        0
      ],
      "name": "Mouse",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin}",
      "dynamicY": "${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        292,
        0,
        0,
        0
      ],
      "name": "Debug",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + ${width}",
      "dynamicY": "${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        84,
        0,
        0,
        0
      ],
      "name": "Chat",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 3 + (px(80.0) / 100.0 * ${preferred_scale}) * 2 + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        258,
        0,
        0,
        0
      ],
      "name": "Tab",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        294,
        0,
        0,
        0
      ],
      "name": "3rd",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        87,
        341,
        0,
        0
      ],
      "name": "⬆️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - ${height} - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        65,
        0,
        0,
        0
      ],
      "name": "⬅️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 4,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - ${width} - ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        83,
        0,
        0,
        0
      ],
      "name": "⬇️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - ${height} - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        68,
        0,
        0,
        0
      ],
      "name": "➡️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - ${width} - ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": true,
      "keycodes": [
        340,
        0,
        0,
        0
      ],
      "name": "SL",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 100.0,
      "dynamicX": "0.9296875 * ${screen_width} - (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) - (px(80.0) / 100.0 * ${preferred_scale}) + (px(80.0) / 100.0 * ${preferred_scale}) - ${width}",
      "dynamicY": "0.85 * ${screen_height} - (px(50.0) /100.0 * ${preferred_scale}) - (px(40.0) /100.0 * ${preferred_scale}) - ${margin} + (px(40.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - ${height} - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        32,
        0,
        0,
        0
      ],
      "name": "⬛",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 50.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} - ${width} - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        256,
        0,
        0,
        0
      ],
      "name": "Pause",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1295202816,
      "cornerRadius": 0.0,
      "dynamicX": "0.6710604 * ${screen_width} - ${width}",
      "dynamicY": "1.0 * ${screen_height} - ${height}",
      "height": 25.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        69,
        0,
        0,
        0
      ],
      "name": "•••",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -8684677,
      "strokeWidth": 22,
      "width": 25.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -6,
        0,
        0,
        0
      ],
      "name": " Mid",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - ${height} - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        70,
        0,
        0,
        0
      ],
      "name": "F",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "0.73888886 * ${screen_height} - (px(72.5) /100.0 * ${preferred_scale}) - (px(72.5) /100.0 * ${preferred_scale}) - ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} - ${height} - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        81,
        0,
        0,
        0
      ],
      "name": "Drop",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} - ${height} - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        87,
        341,
        68,
        0
      ],
      "name": "↗️",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} - ${height} - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        87,
        341,
        65,
        0
      ],
      "name": "↖️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} - ${width} - ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        65,
        0,
        83,
        0
      ],
      "name": "↙️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1300267136,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} * 2 + (px(50.0) / 100.0 * ${preferred_scale}) + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin} - (px(50.0) / 100.0 * ${preferred_scale}) - ${margin} + (px(50.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${screen_height} - ${margin} * 2 - (px(50.0) /100.0 * ${preferred_scale}) * 2 - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin} - (px(50.0) /100.0 * ${preferred_scale}) - ${margin} + (px(50.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        83,
        0,
        68,
        0
      ],
      "name": "↘️",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 50.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - ${height} - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        282,
        0,
        0,
        0
      ],
      "name": "Xray",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 100.0,
      "dynamicX": "0.89631844 * ${screen_width} - ${width}",
      "dynamicY": "0.34305555 * ${screen_height}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -4,
        0,
        0,
        0
      ],
      "name": "+",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 50.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 100.0,
      "dynamicX": "0.82747394 * ${screen_width} - ${width}",
      "dynamicY": "0.72017634 * ${screen_height} - ${height}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -3,
        0,
        0,
        0
      ],
      "name": "⚔️",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 50.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} + (px(89.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        86,
        0,
        0,
        0
      ],
      "name": "V",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - ${height} - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": false,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -2,
        0,
        0,
        0
      ],
      "name": "Gui",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 31.5,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        67,
        0,
        0,
        0
      ],
      "name": "Of Zoom",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 89.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} + (px(89.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 31.5,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        76,
        0,
        0,
        0
      ],
      "name": "FB",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 89.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 100.0,
      "dynamicX": "0.99023455 * ${screen_width} - (px(35.0) / 100.0 * ${preferred_scale})",
      "dynamicY": "0.73888886 * ${screen_height} - (px(72.5) /100.0 * ${preferred_scale}) - ${height} - ${margin}",
      "height": 72.5,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": true,
      "isToggle": false,
      "keycodes": [
        32,
        0,
        0,
        0
      ],
      "name": "^\n|",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 35.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 100.0,
      "dynamicX": "0.99023455 * ${screen_width} - ${width}",
      "dynamicY": "0.73888886 * ${screen_height} - ${height}",
      "height": 72.5,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        340,
        0,
        0,
        0
      ],
      "name": "|\nv",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 3,
      "width": 35.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "${margin} + (px(89.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(80.0) / 100.0 * ${preferred_scale}) + ${margin} + (px(89.0) / 100.0 * ${preferred_scale}) + ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 31.5,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        292,
        0,
        72,
        0
      ],
      "name": "NBT",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 89.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 100.0,
      "dynamicX": "0.9781992 * ${screen_width} - ${width}",
      "dynamicY": "0.73888886 * ${screen_height} - (px(72.5) /100.0 * ${preferred_scale}) - (px(72.5) /100.0 * ${preferred_scale}) - ${margin} - ${height} - ${margin}",
      "height": 50.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        -4,
        -4,
        -4,
        340
      ],
      "name": "SB",
      "opacity": 1.0,
      "passThruEnabled": true,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 50.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        0,
        0,
        86,
        0
      ],
      "name": "Tp",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - ${width} - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        0,
        0,
        75,
        0
      ],
      "name": "Macro",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - ${width} - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        0,
        0,
        72,
        0
      ],
      "name": "H",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": true,
      "keycodes": [
        0,
        0,
        292,
        0
      ],
      "name": "F3",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    },
    {
      "bgColor": 1291845632,
      "cornerRadius": 0.0,
      "dynamicX": "(${screen_width} - (px(80.0) / 100.0 * ${preferred_scale})) - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - (px(80.0) / 100.0 * ${preferred_scale}) - ${margin} - ${width} - ${margin}",
      "dynamicY": "${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin} + (px(30.0) /100.0 * ${preferred_scale}) + ${margin} - (px(30.0) /100.0 * ${preferred_scale}) - ${margin}",
      "height": 30.0,
      "isDynamicBtn": false,
      "isHideable": true,
      "isSwipeable": false,
      "isToggle": false,
      "keycodes": [
        0,
        0,
        293,
        0
      ],
      "name": "F4",
      "opacity": 1.0,
      "passThruEnabled": false,
      "strokeColor": -1,
      "strokeWidth": 0,
      "width": 80.0
    }
  ],
  "mDrawerDataList": [],
  "scaledAt": 100.0,
  "version": 4
}

created 1 year ago

Javascript Online Compiler

Write, Run & Share Javascript code online using OneCompiler's JS online compiler for free. It's one of the robust, feature-rich online compilers for Javascript language. Getting started with the OneCompiler's Javascript editor is easy and fast. The editor shows sample boilerplate code when you choose language as Javascript and start coding.

About Javascript

Javascript(JS) is a object-oriented programming language which adhere to ECMA Script Standards. Javascript is required to design the behaviour of the web pages.

Key Features

Open-source
Just-in-time compiled language
Embedded along with HTML and makes web pages alive
Originally named as LiveScript.
Executable in both browser and server which has Javascript engines like V8(chrome), SpiderMonkey(Firefox) etc.

Syntax help

STDIN Example

var readline = require('readline');
var rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  terminal: false
});

rl.on('line', function(line){
    console.log("Hello, " + line);
});

variable declaration

Keyword	Description	Scope
var	Var is used to declare variables(old way of declaring variables)	Function or global scope
let	let is also used to declare variables(new way)	Global or block Scope
const	const is used to declare const values. Once the value is assigned, it can not be modified	Global or block Scope

Backtick Strings

Interpolation

let greetings = `Hello ${name}`

Multi line Strings

const msg = `
hello
world!
`

Arrays

An array is a collection of items or values.

Syntax:

let arrayName = [value1, value2,..etc];
// or
let arrayName = new Array("value1","value2",..etc);

Example:

let mobiles = ["iPhone", "Samsung", "Pixel"];

// accessing an array
console.log(mobiles[0]);

// changing an array element
mobiles[3] = "Nokia";

Arrow functions

Arrow Functions helps developers to write code in concise way, it’s introduced in ES6.
Arrow functions can be written in multiple ways. Below are couple of ways to use arrow function but it can be written in many other ways as well.

Syntax:

() => expression

Example:

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const squaresOfEvenNumbers = numbers.filter(ele => ele % 2 == 0)
                                    .map(ele => ele ** 2);
console.log(squaresOfEvenNumbers);

De-structuring

Arrays

let [firstName, lastName] = ['Foo', 'Bar']

Objects

let {firstName, lastName} = {
  firstName: 'Foo',
  lastName: 'Bar'
}

rest(...) operator

 const {
    title,
    firstName,
    lastName,
    ...rest
  } = record;

Spread(...) operator

//Object spread
const post = {
  ...options,
  type: "new"
}
//array spread
const users = [
  ...adminUsers,
  ...normalUsers
]

Functions

function greetings({ name = 'Foo' } = {}) { //Defaulting name to Foo
  console.log(`Hello ${name}!`);
}
 
greet() // Hello Foo
greet({ name: 'Bar' }) // Hi Bar

Loops

1. If:

IF is used to execute a block of code based on a condition.

Syntax

if(condition){
    // code
}

2. If-Else:

Else part is used to execute the block of code when the condition fails.

Syntax

if(condition){
    // code
} else {
    // code
}

3. Switch:

Switch is used to replace nested If-Else statements.

Syntax

switch(condition){
    case 'value1' :
        //code
        [break;]
    case 'value2' :
        //code
        [break;]
    .......
    default :
        //code
        [break;]
}

4. For

For loop is used to iterate a set of statements based on a condition.

for(Initialization; Condition; Increment/decrement){  
//code  
}

5. While

While is also used to iterate a set of statements based on a condition. Usually while is preferred when number of iterations are not known in advance.

while (condition) {  
  // code 
}

6. Do-While

Do-while is also used to iterate a set of statements based on a condition. It is mostly used when you need to execute the statements atleast once.

do {  
  // code 
} while (condition);

Classes

ES6 introduced classes along with OOPS concepts in JS. Class is similar to a function which you can think like kind of template which will get called when ever you initialize class.

Syntax:

class className {
  constructor() { ... } //Mandatory Class method
  method1() { ... }
  method2() { ... }
  ...
}

Example:

class Mobile {
  constructor(model) {
    this.name = model;
  }
}

mbl = new Mobile("iPhone");