Break the Grid

Break out of the black box and allow users to show their creativity while increasing productivity. This hybrid work solution will make collaboration easier, more accessible, and much more enjoyable.

Comment

Inspiration

As a remote worker, I am constantly thinking of ways to improve video conferencing.

The large black boxes on my screen all day have always felt uninspiring. Seeing an online classroom is even more jarring. Back in school, the teachers would always decorate their rooms with so much color and vibrance. Where is that vibrance now in this new digital world?

With Break the Grid, I wanted to bring it back. In doing so, the video platform can leverage the preference shown to its platform to pull ahead in market share.

What it does

Break the Grid is a customized screen experience. We are throwing out the industry's black and gray box grid in favor of engaging colors, themes, and collaborative grid layouts.

By utilizing color palette selection, a user is able to select the colors that they love, make them feel creative, or show off their personality.

In addition to the color, the resizing of the grid is essential to improved productivity. By introducing an auto-size priority line in addition to the user input resizing, we are able to have a more engaged and collaborative experience.

How I built it

To create the Grid Resizing Solution I used Python and the following logic:

  1. Retrieve the list of participants and their current status (mic on/off, video on/off, screen sharing on/off) from the Zoom API.
  2. Calculate the priority for each participant based on their status, following the order given in the prompt (screen share > mic+camera on > mic on > camera on > mic+camera off).
  3. Sort the list of participants based on their priority, from highest to lowest.
  4. Determine the desired size of each box for each participant, based on their priority. For example, the largest screen share participant might get 2/3 of the screen, while the smallest mic+camera off participant might get 1/6 of the screen.
  5. Allow the user to change the size of each box individually by dragging its borders. As the user changes the size of a box, adjust the size of the other boxes accordingly to maintain the desired proportions. If the user does not manually resize any boxes, display the boxes with the predetermined sizes based on their priority.

To create a color selector GUI for the ZOOM grid (as an example) using Tkinter:

  1. Import the necessary modules: tkinter for creating the GUI, and askcolor from tkinter.colorchooser for opening a color selection dialog.
  2. Define a Grid class that represents a grid of buttons, with methods for setting and getting the color of each button.
  3. In the init method of the Grid class, initialize the grid with the specified number of rows and columns, and set the colors of all buttons to white.
  4. Define a GridGUI class that represents the GUI for the grid of buttons, with methods for handling button clicks and the color picker dialog.
  5. In the init method of the GridGUI class:
  6. Create a new Grid object with the specified number of rows and columns.
  7. Create a new tkinter window (self.root).
  8. Create a 2D list of tkinter buttons, one for each button in the grid, and add them to the window. Each button is configured to call the on_button_click method with its row and column as arguments when it is clicked.
  9. Create a tkinter button for opening the color selection dialog (self.color_picker_button), and add it to the window. When this button is clicked, it calls the on_color_picker_click method.
  10. In the on_button_click method of the GridGUI class:
  11. Get the current color of the button that was clicked using the Grid object's get_color method.
  12. Toggle the color of the button between black and white.
  13. Set the new color of the button using the Grid object's set_color method.
  14. Update the background color of the button using the tkinter configure method.
  15. In the on_color_picker_click method of the GridGUI class:
  16. Open a color selection dialog using the askcolor method, and get the selected color.
  17. Set the color of all buttons in the grid using the Grid object's set_color method.
  18. Update the background color of all buttons in the grid using the tkinter configure method.
  19. Define a run method in the GridGUI class that starts the tkinter main loop to display the window.
  20. Create a new GridGUI object with the specified number of rows and columns.
  21. Run the GUI using the run method of the GridGUI object.

Challenges I ran into

The inability to integrate the changes to the Zoom code itself caused me to use example code and to break down the process of changing the code base via GitHub ReadMe and Code Files. I focused on creating a more seamless integration by fully explaining each and every step taken in detail and commenting the code well.

Accomplishments that I'm proud of

The extreme user focus when developing these ideas. I spoke with colleagues, student, and Zoom and video conferencing users to see what has frustrated them. I read articles on why the words "Zoom Meeting" causes so much dread in people these days. I looked into other marketplace solutions to see how cutting-edge these abilities would be for Zoom. TLDR; implementation would differentiate Zoom like no other.

I am proud of the ideas generated and the potential engagement they will cause. Whether it's a child being fully engaged in a Math class or a team being able to finally have the right tools to tackle their biggest challenge yet, I know these features will help them.

What I learned

I learned so much about the video conferencing landscape and the vast improvements that need to be made in order to elicit engagement from its users. I also learned color selection GUIs, theme implementation, and resizing coding challenges that I can take into future projects.

What's next for Break the Grid

Implementation. I would love to share further documentation with the team and work through the next steps for an MVP roll out. Priority for release would be as follows: color selection picker, resize feature, a Zoom Marketplace to purchase themes, then deeper integrations with emerging technology and Zoom products. This would be a huge step for the next phase of video conferencing.

Built With

Share this project:

Updates