Open Stage Control + TidalCycles = ❤️

By the way, this concept of sending visual feedback OSC is brilliant! I'll have a go at it soon enough. This could grow into a fully interactive hybrid platform for running tidalcycles

Not sure what you are referring to, I used the default theme for Open Stage Control. Here is my control.json file, it it helps !

{
  "session": {
    "type": "root",
    "id": "root",
    "interaction": true,
    "width": "auto",
    "height": "auto",
    "colorBg": "auto",
    "colorText": "auto",
    "colorWidget": "auto",
    "alphaFillOn": "auto",
    "padding": "auto",
    "css": "",
    "variables": "@{parent.variables}",
    "traversing": false,
    "layout": "default",
    "justify": "start",
    "gridTemplate": "",
    "contain": true,
    "scroll": true,
    "innerPadding": true,
    "verticalTabs": false,
    "value": "",
    "default": "",
    "linkId": "",
    "script": "",
    "address": "/ctrl",
    "preArgs": "",
    "typeTags": "",
    "decimals": 2,
    "target": "",
    "ignoreDefaults": false,
    "bypass": false,
    "widgets": [
      {
        "type": "panel",
        "top": 40,
        "left": 40,
        "id": "bd",
        "visible": true,
        "interaction": true,
        "width": 440,
        "height": 120,
        "expand": "false",
        "colorBg": "auto",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "padding": "auto",
        "css": "",
        "variables": "@{parent.variables}",
        "traversing": false,
        "layout": "default",
        "justify": "start",
        "gridTemplate": "",
        "contain": true,
        "scroll": true,
        "innerPadding": true,
        "verticalTabs": false,
        "value": "",
        "default": "",
        "linkId": "",
        "script": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "widgets": [
          {
            "type": "knob",
            "top": 50,
            "left": 10,
            "id": "@{parent.id}_beats",
            "visible": true,
            "interaction": true,
            "width": 50,
            "height": 50,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "design": "solid",
            "pips": false,
            "dashed": false,
            "spring": false,
            "doubleTap": false,
            "range": {
              "min": 0,
              "max": 8
            },
            "logScale": false,
            "sensitivity": 1,
            "steps": 9,
            "origin": "auto",
            "value": "",
            "default": 0,
            "linkId": "",
            "script": "",
            "address": "/ctrl",
            "preArgs": "@{parent.id}_beats",
            "typeTags": "si",
            "decimals": 0,
            "target": "",
            "ignoreDefaults": false,
            "bypass": false,
            "mode": "vertical",
            "angle": 270,
            "html": ""
          },
          {
            "type": "fader",
            "top": 20,
            "left": 80,
            "id": "@{parent.id}_shift",
            "visible": true,
            "interaction": true,
            "width": 260,
            "height": 30,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "design": "default",
            "knobSize": "auto",
            "horizontal": true,
            "pips": false,
            "dashed": false,
            "gradient": [],
            "snap": false,
            "spring": false,
            "doubleTap": false,
            "range": {
              "min": 0,
              "max": 7
            },
            "logScale": false,
            "sensitivity": 1,
            "steps": 8,
            "origin": "auto",
            "value": "",
            "default": 0,
            "linkId": "",
            "script": "",
            "address": "/ctrl",
            "preArgs": "@{parent.id}_shift",
            "typeTags": "si",
            "decimals": 0,
            "target": "",
            "ignoreDefaults": false,
            "bypass": false,
            "html": ""
          },
          {
            "type": "matrix",
            "top": 60,
            "left": 80,
            "id": "@{parent.id}_pattern",
            "visible": true,
            "interaction": true,
            "width": 260,
            "height": 40,
            "expand": "false",
            "colorBg": "auto",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "widgetType": "led",
            "quantity": 8,
            "start": 0,
            "props": {},
            "layout": "horizontal",
            "gridTemplate": "",
            "traversing": true,
            "innerPadding": true,
            "value": "",
            "default": "",
            "linkId": "",
            "script": "",
            "address": "/@{parent.id}/pattern",
            "preArgs": "",
            "typeTags": "",
            "decimals": 0,
            "target": "",
            "ignoreDefaults": false,
            "bypass": false,
            "justify": "start",
            "contain": true,
            "scroll": true,
            "variables": "@{parent.variables}",
            "widgets": [],
            "tabs": [],
            "html": ""
          },
          {
            "type": "text",
            "top": 10,
            "left": 10,
            "id": "text_@{parent.id}",
            "visible": true,
            "width": 40,
            "height": 30,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "vertical": false,
            "wrap": false,
            "align": "center",
            "value": "@{parent.id}",
            "default": "",
            "linkId": "",
            "script": "",
            "address": "auto",
            "preArgs": "",
            "target": "",
            "html": ""
          },
          {
            "type": "knob",
            "top": 40,
            "left": 350,
            "id": "@{parent.id}_roll",
            "visible": true,
            "interaction": true,
            "width": 60,
            "height": 60,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "design": "solid",
            "mode": "vertical",
            "spring": false,
            "pips": false,
            "dashed": false,
            "angle": 270,
            "doubleTap": false,
            "range": {
              "min": 1,
              "max": 4
            },
            "logScale": false,
            "sensitivity": 1,
            "steps": 4,
            "origin": "auto",
            "value": "",
            "default": "",
            "linkId": "",
            "script": "",
            "address": "/ctrl",
            "preArgs": "@{parent.id}_roll",
            "typeTags": "si",
            "decimals": 0,
            "target": "",
            "ignoreDefaults": false,
            "bypass": false,
            "html": ""
          },
          {
            "type": "text",
            "top": 10,
            "left": 340,
            "id": "text_3",
            "visible": true,
            "width": 80,
            "height": 20,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "vertical": false,
            "wrap": false,
            "align": "center",
            "value": "roll",
            "default": "",
            "linkId": "",
            "script": "",
            "address": "auto",
            "preArgs": "",
            "target": "",
            "html": ""
          }
        ],
        "tabs": [],
        "html": ""
      },
      {
        "type": "clone",
        "top": 170,
        "left": 40,
        "id": "clone_1",
        "visible": true,
        "interaction": true,
        "width": 440,
        "height": 130,
        "expand": "false",
        "css": "",
        "widgetId": "bd",
        "props": {
          "id": "sd"
        },
        "label": "",
        "variables": "@{parent.variables}"
      },
      {
        "type": "clone",
        "top": 310,
        "left": 40,
        "id": "clone_2",
        "visible": true,
        "interaction": true,
        "width": 440,
        "height": 130,
        "expand": "false",
        "css": "",
        "widgetId": "bd",
        "props": {
          "id": "hh"
        },
        "label": "",
        "variables": "@{parent.variables}"
      },
      {
        "type": "panel",
        "top": 40,
        "left": 490,
        "id": "bpm",
        "visible": true,
        "interaction": true,
        "width": 190,
        "height": 190,
        "expand": "false",
        "colorBg": "auto",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "padding": "auto",
        "css": "",
        "variables": "@{parent.variables}",
        "traversing": false,
        "layout": "default",
        "justify": "start",
        "gridTemplate": "",
        "contain": true,
        "scroll": true,
        "innerPadding": true,
        "verticalTabs": false,
        "value": "",
        "default": "",
        "linkId": "",
        "script": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "widgets": [
          {
            "type": "text",
            "top": 0,
            "left": 0,
            "id": "text_1",
            "visible": true,
            "width": 180,
            "height": 30,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "vertical": false,
            "wrap": false,
            "align": "center",
            "value": "BPM",
            "default": "",
            "linkId": "",
            "script": "",
            "address": "auto",
            "preArgs": "",
            "target": "",
            "html": ""
          },
          {
            "type": "knob",
            "top": 40,
            "left": 40,
            "id": "bpm_knob",
            "visible": true,
            "interaction": true,
            "width": "auto",
            "height": "auto",
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "design": "solid",
            "mode": "vertical",
            "spring": false,
            "pips": false,
            "dashed": false,
            "angle": 270,
            "doubleTap": false,
            "range": {
              "min": 60,
              "max": 180
            },
            "logScale": false,
            "sensitivity": 1,
            "steps": "",
            "origin": "auto",
            "value": "",
            "default": 90,
            "linkId": "",
            "script": "",
            "address": "/ctrl",
            "preArgs": "bpm",
            "typeTags": "",
            "decimals": 0,
            "target": "",
            "ignoreDefaults": false,
            "bypass": false,
            "html": ""
          },
          {
            "type": "text",
            "top": 150,
            "left": 50,
            "id": "bpm_display",
            "visible": true,
            "width": 80,
            "height": 30,
            "expand": "false",
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "css": "",
            "vertical": false,
            "wrap": false,
            "align": "center",
            "value": "@{bpm_knob.value}",
            "default": "",
            "linkId": "",
            "script": "",
            "address": "auto",
            "preArgs": "",
            "target": "",
            "html": ""
          }
        ],
        "tabs": [],
        "html": ""
      },
      {
        "type": "panel",
        "top": 450,
        "left": 40,
        "id": "bb",
        "visible": true,
        "interaction": true,
        "width": 440,
        "height": 200,
        "expand": "false",
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "padding": "auto",
        "css": "",
        "colorBg": "auto",
        "layout": "default",
        "justify": "start",
        "gridTemplate": "",
        "contain": true,
        "scroll": true,
        "innerPadding": true,
        "verticalTabs": false,
        "variables": "@{parent.variables}",
        "traversing": false,
        "value": "",
        "default": "",
        "linkId": "",
        "script": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "widgets": [],
        "tabs": [],
        "html": ""
      }
    ],
    "tabs": [],
    "visible": true,
    "html": ""
  },
  "version": "1.6.0",
  "type": "Open Stage Control session"
}

Thanks! The way I did it, the main drawback is the lag in the display - the pattern gets updated as it plays. I guess it could be useful in some situations, though!