Using MyBinder to demo use of PySimpleGUI

demo_directions.md

Using MyBinder to demo use of PySimpleGUI

Walkthrough for installation of PySimpleGUI and example use of PySimpleGUI in your browser in temporary remote sessions served via MyBinder

Benefits:

• Runs remotely so nothing modified on your machine.
• Everything is already prepared, except for installation of the one package to be demonstrated.
• No login required.
• Spyder-IDE sessions set up to work with Python code and has useful utilities present that make development there nice.

Access Spyder-IDE demo session and set up for use of PySimpleGUI

Specifically, this will use Spyder-IDE as the interactive development environment (IDE) on a Linux-based desktop in your browser.
This demonstration will open an example of code that uses PySimpleGUI and generates a GUI window.

1. Go to the Spyder GitHub repository site and click the launch binder badge, or click here, to initiate launching a session.

2. After the session spins up and shows a Linux desktop in your browser window, double-click the 'Spyder 4.x' icon on the left side.

3. A window will come up and you select Launch Anyway to start Spyder.

4. Dismiss welcome screen by pressing 'Dismiss'

5. To install PySimpleGUI, next to the 'In [1]:' prompt in the bottom, right console , enter the text %pip install pysimplegui and hit return. (Because it is a console on a remote computer, you cannot easily copy and paste text from your local browser into the machine, and so you'll need to type.)

6. PySimpleGUI will be installed.

Continue on to the next section to get some code to run in the temporary remote session.

Get the demonstration code into a clipboard on the remote system and paste into a file in Spyder-IDE

You want to follow the steps closely and make sure you are working on the remote machine so that you are doing the steps of getting the code into the clipboard on the remote machine and not your local system.

This will cover how to get code text for a script that uses PySimpleGUI into the remote machine's clipboard so that the code can be copied to the Spyder-IDE window in the remote session.

1. On the remote machine, click on the 'Applications' tab in the upper left of the session desktop. Then choose 'Web Browser' from the drop-down menu. If that gives an error, go to the desktop and look for 'Web Browser' icon or an icon that says 'Workshop' and click that and translate the instructions in the next few steps to be run in that browser.

2. A browser window will open and then you want to cLick the DuckDuckGo tab in the upper left of this new window. (The browser currently is qutebrowser and I found a guide to the commands, such as navigating 'back' here. Interestingly, when you press : to get to the comamnd interface and start typing a command, often on the right side, it will show a keyboard shortcut that are the keybindings discussed on the 'quickstart' and shown on the key binding cheatsheet. For example, from the Quickstart, for navigation "Use H and L to go back and forth in the history." Alternatively, you can right-click in Qutebrowser window and select 'Back' as well.)

3. In the DuckDuckGO search bar type 'Jupyter Discourse' and enter hit return. (As stated above, because it is remote computer, you cannot easily copy and paste text from your local browser into the machine, and so you'll need to type.) (If you are trying this well after September 2022, you'll want to search 'Jupyter Discourse pysimplegui' and then replace the next step with following the links to get to the post entitled 'PySimpleGUI - “forbidden” on jupyter notebook'.)

4. Near the top, you should see listed a link 'Jupyter Community Forum - A place of Jovyans to share...'. Just below that should be a sub-heading link of 'Latest Topics'. Click on that link to open a list of the latest posts. Look for one entitled 'PySimpleGUI - “forbidden” on jupyter notebook' near the top of that list and click on it. The reply to the original post contains code that we can use to run a demonstration of PySimpleGUI and so we need to use the Qutebrowser to get to that code block so that we can copy it into the clipboard on the remote session and paste it over to the Spyder-IDE code window in that remote session.

5. Because Discourse doesn't currently support the Qutebrowser, normal scrolling won't work. However, using Qutebrowser scroll commands this can be overcome. Click in the Qutebrowser window and then type on your keyboard a semi-colon. You'll notice that brings up a list of commands. Typing additional text the corresponds to commands on the list will filter the selection so you can choose the specific scrolling one, and so continue to follow the semi-colon by entering the word scroll. Then click on 'scroll-page' from the list of commands that comes up to have that become the command and then type a space followed by 0 1 (that's a zero & another space followed by 1) to specify to scroll no distance horizontal & one page vertical. You should see a code block that starts import PySi mpleGUI as sg. Click in front of the import text and hold down the mouse button while dragging downward to select all the code block by going as far down as you can, dragging beyond the Qutebrowser window even. Don't worry that you cannot see the actual bottom, it should select the block. Release the mouse button and then right-click on the blue highlighted code text that you can see. Select from the menu that comes up 'Copy' to copy that text to the clipboard of the remote computer. Now click back over to the Sypder-IDE tab on the remote session. Click in the code window pane on the left and then right-click on that pane and choose 'Paste' from the menu that comes up to paste in the code text that is currently in the clipboard. (You may be able to use the keyboard to hit Ctrl + V to do the pasting; however, bringing up the menu with righ-click and selecting 'Paste' will work on all systems and so it is more reliable.)

6. You may see something like the following along the bottom of what you pasted:

1 Like
Home Categories FAQ/GUIDELINES....
Powered by Discourse, best viewed with Javascript enable

Just select those last few lines and delete them to make the code text end in window.close().

Now you should have code in the pane on the left side in the Spyder-IDE interface. You can now select that code and run it.

Run the code to see PySimpleGUI in action

1. Use the mouse to select all the code in the left pane.

2. Click on the green 'play' arrow on the toolbar just above the middle of that pane, and to the right side of the symbols for saving the file text to run the code. Alternatively to run, select from 'Run' from the main menu along the top of the Spyder-IDE window and choose the top entry > 'Run' from the list of possible selections.

3. You'll see panel that says at the top 'Run settings for temp.py' and click on 'Run' in the bottom right corner to run the code. Clicking that 'Run' will also set it to use the default settings subsequently in the same session.

4. Wait a few seconds, and you should see a window come up entitled 'Spreadsheet'. That's the PySimpleGUI window the code made. You can type in the cells there and if you click 'Submit', you'll see the window close and the data in the cells of the 'spreadsheet' come up in the terminal as text in the bottom right side.