jeffderek / zoom-native-room-controls-preview

WebApp for previewing Zoom Native Room Controls json files
https://zoom.jeffmcaleer.com/
MIT License
14 stars 1 forks source link

Add support for scrolling #5

Closed CLWelsh closed 2 years ago

CLWelsh commented 2 years ago

Long ZRC files are supported by Zoom and allow users to scroll vertically to see items that don't fit on the screen. Support for this will help preview the complete UI to clients.

{
    "about": {
      "room_name": "NYC Conference 32E",
      "devicePort": "47002",
      "controller_url": "udp://10.100.13.169",
      "programmer": "Chris Welsh / AVI-SPL LLC - Chicago, IL",
      "site_info": "Jenner & Block - NYC - 32nd Floor Conference Center",
      "instructions": "Search and replace the devicePort (47002) & controller_url (e.g. udp://10.100.13.169) above to match the info to the room this file is for.  The port will be unique for each room in a given system.  DO NOT MAKE ANY OTHER CHANGES.",
      "generated": "02/25/2022 14:00:00",
      "copyright": "(C) 2022 AVI-SPL LLC"
    },
    "adapters": [
      {
        "model": "GenericNetworkAdapter",
        "ip": "udp://10.100.13.169:47002",
        "ports": [
          {
            "id": "lightingAndStatus",
            "name": "Lighting",
            "methods": [
              {
                "id": "power",
                "name": "On/Off",
                "command": "{\"LightingPreset\": \"%\"}",
                "params": [
                  {
                    "id": "lightsOn",
                    "name": "On",
                    "value": "On"
                  },
                  {
                    "id": "lightsOff",
                    "name": "Off",
                    "value": "Off"
                  }
                ],
                "type": "actions"
              },
              {
                "id": "presets",
                "name": "Presets",
                "command": "{\"LightingPreset\": \"%\"}",
                "params": [
                  {
                    "id": "preset1",
                    "name": "Video Call",
                    "value": "1"
                  },
                  {
                    "id": "preset2",
                    "name": "Presentation",
                    "value": "2"
                  }
                ],
                "type": "actions"
              },
              {
                "id": "status",
                "name": "Status",
                "command": "{\"ZoomStatus\": \"%\"}",
                "params": [
                  {
                    "id": "meeting_started",
                    "name": "meeting_started",
                    "value": "meeting_started"
                  },
                  {
                    "id": "meeting_ended",
                    "name": "meeting_ended",
                    "value": "meeting_ended"
                  },
                  {
                    "id": "microphone_muted",
                    "name": "microphone_muted",
                    "value": "microphone_muted"
                  },
                  {
                    "id": "microphone_unmuted",
                    "name": "microphone_unmuted",
                    "value": "microphone_unmuted"
                  },
                  {
                    "id": "video_started",
                    "name": "video_started",
                    "value": "video_started"
                  },
                  {
                    "id": "video_stopped",
                    "name": "video_stopped",
                    "value": "video_stopped"
                  },
                  {
                    "id": "operation_time_started",
                    "name": "operation_time_started",
                    "value": "operation_time_started"
                  },
                  {
                    "id": "operation_time_ended",
                    "name": "operation_time_ended",
                    "value": "operation_time_ended"
                  }
                ],
                "type": "actions"
              }
            ]
          }
        ]
      },
      {
        "model": "GenericNetworkAdapter",
        "ip": "udp://10.100.13.169:47002",
        "ports": [
          {
            "id": "shades",
            "name": "Shades",
            "methods": [
              {
                "id": "shadesBlackout",
                "name": "Blackout",
                "command": "{\"ShadesBlackout\": \"%\"}",
                "params": [
                  {
                    "id": "open",
                    "name": "Open",
                    "value": "Open"
                  },
                  {
                    "id": "close",
                    "name": "Close",
                    "value": "Close"
                  }
                ],
                "type": "actions"
              },
              {
                "id": "shadesSolar",
                "name": "Solar",
                "command": "{\"ShadesSolar\": \"%\"}",
                "params": [
                  {
                    "id": "open",
                    "name": "Open",
                    "value": "Open"
                  },
                  {
                    "id": "close",
                    "name": "Close",
                    "value": "Close"
                  }
                ],
                "type": "actions"
              }
            ]
          }
        ]
      },
      {
        "model": "GenericNetworkAdapter",
        "ip": "udp://10.100.13.169:47002",
        "ports": [
          {
            "id": "contentSources",
            "name": "Content Source",
            "methods": [
              {
                "id": "sources",
                "name": "Sources",
                "command": "{\"ContentSource\": \"%\"}",
                "params": [
                  {
                    "id": "source1",
                    "name": "Laptop (Auto)",
                    "value": "1"
                  },
                  {
                    "id": "source2",
                    "name": "Room PC",
                    "value": "2"
                  },
                  {
                    "id": "source3",
                    "name": "Wireless",
                    "value": "3"
                  }
                ],
                "type": "actions"
              }
            ]
          }
        ]
      },
      {
        "model": "GenericNetworkAdapter",
        "ip": "udp://10.100.13.169:47002",
        "ports": [
          {
            "id": "displayPower",
            "name": "Display Power",
            "methods": [
              {
                "id": "displayPower",
                "name": "Display Power",
                "command": "{\"DisplayPower\": \"%\"}",
                "params": [
                  {
                    "id": "on",
                    "name": "On",
                    "value": "On"
                  },
                  {
                    "id": "off",
                    "name": "Off",
                    "value": "Off"
                  }
                ],
                "type": "actions"
              }
            ]
          }
        ]
      },
      {
        "model": "GenericNetworkAdapter",
        "ip": "udp://10.100.13.169:47002",
        "ports": [
          {
            "id": "tvTuner",
            "name": "TV Tuner",
            "methods": [
              {
                "id": "tvMode",
                "name": "TV Tuner",
                "command": "{\"tvTunerMode\": \"%\"}",
                "params": [
                  {
                    "id": "tvTunerModeStart",
                    "name": "Start",
                    "value": "Start"
                  },
                  {
                    "id": "tvTunerModeStop",
                    "name": "Stop",
                    "value": "Stop"
                  }
                ],
                "type": "actions"
              },
              {
                "id": "tvVolume",
                "name": "Volume",
                "command": "{\"tvVolume\": \"%\"}",
                "params": [
                  {
                    "id": "tvVolumeDown",
                    "name": "Vol -",
                    "value": "-"
                  },
                  {
                    "id": "tvVolumeUp",
                    "name": "Vol +",
                    "value": "+"
                  }
                ],
                "type": "actions"
              },
              {
                "id": "tvChannel",
                "name": "Channel",
                "command": "{\"tvChannel\": \"%\"}",
                "params": [
                  {
                    "id": "tvChannelDown",
                    "name": "Ch -",
                    "value": "-"
                  },
                  {
                    "id": "tvChannelUp",
                    "name": "Ch +",
                    "value": "+"
                  }
                ],
                "type": "actions"
              },
              {
                "id": "presets",
                "name": "Presets",
                "command": "{\"tvPreset\": \"%\"}",
                "params": [
                  {
                    "id": "ABC",
                    "name": "ABC",
                    "value": "1"
                  },
                  {
                    "id": "CBS",
                    "name": "CBS",
                    "value": "2"
                  },
                  {
                    "id": "FOX",
                    "name": "FOX",
                    "value": "3"
                  },
                  {
                    "id": "NBC",
                    "name": "NBC",
                    "value": "4"
                  },
                  {
                    "id": "CNBC",
                    "name": "CNBC",
                    "value": "5"
                  },
                  {
                    "id": "CNN",
                    "name": "CNN",
                    "value": "6"
                  },
                  {
                    "id": "C-SPAN",
                    "name": "C-SPAN",
                    "value": "7"
                  },
                  {
                    "id": "MSNBC",
                    "name": "MSNBC",
                    "value": "8"
                  },
                  {
                    "id": "Fox News",
                    "name": "Fox News",
                    "value": "9"
                  },
                  {
                    "id": "Weather",
                    "name": "Weather",
                    "value": "10"
                  }
                ],
                "type": "actions"
              }
            ]
          }
        ]
      }
    ],
    "styles": [
      "lightingAndStatus.icon=icon_light",
      "lightingAndStatus.main_method=power",
      "lightingAndStatus.status.invisible=true",
      "shades.icon=icon_curtain",
      "contentSources.icon=icon_tv",
      "contentSources.main_method=contentSources",
      "displayPower.icon=icon_power",
      "displayPower.main_method=displayPower",
      "tvTuner.icon=icon_cable_tv",
      "tvTuner.tvVolume.tvVolumeUp.icon=icon_up",
      "tvTuner.tvVolume.tvVolumeDown.icon=icon_down",
      "tvTuner.tvChannel.tvChannelUp.icon=icon_up",
      "tvTuner.tvChannel.tvChannelDown.icon=icon_down",
      "tvTuner.main_method=tvMode"
    ],
    "rules": {
      "meeting_started": [
        "lightingAndStatus.status.meeting_started"
      ],
      "meeting_ended": [
        "lightingAndStatus.status.meeting_ended"
      ],
      "microphone_muted": [
        "lightingAndStatus.status.microphone_muted"
      ],
      "microphone_unmuted": [
        "lightingAndStatus.status.microphone_unmuted"
      ],
      "video_started": [
        "lightingAndStatus.status.video_started"
      ],
      "video_stopped": [
        "lightingAndStatus.status.video_stopped"
      ],
      "operation_time_started": [
        "lightingAndStatus.status.operation_time_started"
      ],
      "operation_time_ended": [
        "lightingAndStatus.status.operation_time_ended"
      ]
    }
  }
jeffderek commented 2 years ago

I almost asked when I saw your preview image of this one whether it scrolled or not :)

jeffderek commented 2 years ago

Scrolling now "works", but I don't think this is complete. Having some issues with flexbox. If I let Flexbox set the <main> selector's height, it works until the content overflows and once it overflows the height just grows with it. I have to manually force the height artificially low to get it to scroll. Definitely doing something wrong here, but at least for now it works well enough that you can see your entire preview so we can debug other issues.

jeffderek commented 2 years ago

Scrolling is cleaned up and works well.