Modal panel without the button

Installation & Configuration
1

I'm trying to create a modal panel which covers my regular panel interface based on a received OSC value. I have been able to get this working by making a modal panel and then setting the value at run time from a received OSC message. This allows an external program to pop up/down the panel. So far, so good.

That said, the modal panel seems to REQUIRE a button appear which allows the user to pop up the panel. I don't want the user to be able to do that. Trying to set the 'visible' flag on the modal to false just makes everything disappear. I tried setting the label to false and that just gave me a button with no text.

Is there some other way to achieve the same effect? I tried using tabs but I can't figure out how to make the tab labels disappear or to manipulate which tab is visible from an external source.

I also tried two panels on top of each other and just manipulating the visible property of the top one. This seemed to work but I was having trouble configuring the panels fully cover their parent container.

thanks,
Rob

2

Setting the visible property to @{this} so that the modal widget is hidden when closed will do the job.

2 Likes
3

Yup. That's great! It should be noted that, if the modal itself does not have 100% coverage, you will see the button appear/disappear in the interface behind it. For my use case this works perfectly.

Thanks!
Rob

4

hi @rawbengal

Would you send us a session file to illustrate this tip ?
Cheers

5

Here you go. Reception of "/disabled" on OSC will enable/disable the modal panel.

{
  "createdWith": "Open Stage Control",
  "version": "1.10.3",
  "type": "session",
  "content": {
    "type": "root",
    "id": "root",
    "visible": true,
    "interaction": true,
    "comments": "",
    "width": "auto",
    "height": "auto",
    "colorText": "auto",
    "colorWidget": "auto",
    "alphaFillOn": "auto",
    "padding": "auto",
    "html": "",
    "css": "",
    "colorBg": "auto",
    "layout": "vertical",
    "justify": "start",
    "gridTemplate": "",
    "contain": true,
    "scroll": true,
    "innerPadding": true,
    "verticalTabs": false,
    "variables": "@{parent.variables}",
    "traversing": false,
    "value": "",
    "default": "",
    "linkId": "",
    "address": "auto",
    "preArgs": "",
    "typeTags": "",
    "decimals": 2,
    "target": "",
    "ignoreDefaults": false,
    "bypass": false,
    "script": "",
    "widgets": [
      {
        "type": "button",
        "top": 10,
        "left": 30,
        "id": "button_1",
        "visible": true,
        "interaction": true,
        "comments": "",
        "width": "auto",
        "height": "auto",
        "expand": true,
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "padding": "auto",
        "html": "",
        "css": "",
        "colorTextOn": "auto",
        "label": "My Interface",
        "vertical": false,
        "wrap": false,
        "on": 1,
        "off": 0,
        "mode": "push",
        "doubleTap": false,
        "value": "",
        "default": "",
        "linkId": "",
        "address": "auto",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "script": ""
      },
      {
        "type": "modal",
        "top": 10,
        "left": 20,
        "id": "modal_1",
        "visible": "@{this}",
        "interaction": true,
        "comments": "",
        "width": "auto",
        "height": "auto",
        "expand": "false",
        "popupWidth": "100%",
        "popupHeight": "100%",
        "popupLeft": "auto",
        "popupTop": "auto",
        "relative": false,
        "ignoreTabs": false,
        "colorText": "auto",
        "colorWidget": "auto",
        "colorStroke": "auto",
        "colorFill": "auto",
        "alphaStroke": "auto",
        "alphaFillOff": "auto",
        "alphaFillOn": "auto",
        "lineWidth": "auto",
        "padding": "auto",
        "css": "",
        "colorBg": "rgba(130,44,44,1)",
        "layout": "grid",
        "justify": "start",
        "gridTemplate": 1,
        "contain": true,
        "scroll": true,
        "innerPadding": true,
        "label": "auto",
        "popupLabel": false,
        "popupPadding": "auto",
        "variables": "@{parent.variables}",
        "traversing": false,
        "doubleTap": false,
        "value": "",
        "default": "",
        "linkId": "",
        "address": "/disabled",
        "preArgs": "",
        "typeTags": "",
        "decimals": 2,
        "target": "",
        "ignoreDefaults": false,
        "bypass": false,
        "script": "",
        "widgets": [
          {
            "type": "text",
            "top": 0,
            "left": 0,
            "id": "text_1",
            "visible": true,
            "comments": "",
            "width": "auto",
            "height": "auto",
            "expand": true,
            "colorText": "auto",
            "colorWidget": "auto",
            "colorStroke": "auto",
            "colorFill": "auto",
            "alphaStroke": "auto",
            "alphaFillOff": "auto",
            "alphaFillOn": "auto",
            "lineWidth": "auto",
            "padding": "auto",
            "html": "",
            "css": "",
            "vertical": false,
            "wrap": false,
            "align": "center",
            "value": "The interface is disabled",
            "default": "",
            "linkId": "",
            "address": "auto",
            "preArgs": "",
            "decimals": 2,
            "target": "",
            "script": ""
          }
        ],
        "tabs": []
      }
    ],
    "tabs": []
  }
}
1 Like