ecookbook restoring the folders for testing...

docs/eCookbook/layouts/centered-and-simple.md

@@ -0,0 +1,14 @@
+## Simple Window with Elements Centered
+
+This little demo has several concepts that may be of help to you
+* The elements are all centered in the window
+* The graphics are base64 and contained in the .py file itself
+* It has an animation
+
+
+It looks like this running on Windows:
+
+![Ml8rxsYCoW.gif](/api/files/6048fd2dde9388633dd7b7f7/ml-8-rxsycow.gif "Ml8rxsYCoW.gif")
+
+
+<iframe src='https://trinket.io/embed/pygame/ee95a11842?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/layouts/collapsible-sections.md

@@ -0,0 +1,13 @@
+## Collapsible Sections
+
+Visible / Invisible settings on the plain tkinter based PySimpleGUI have been a real challenge.  In release 4.28.0 a new function, `pin`, was added that will "pin" an element to a location in your layout.  This will reserve the location for the element in the layout.  Without it, the element will move when you make it inivisible and visible again.
+
+There is a 1-pixel "penalty" of sorts when using this capability.  A single pixel is needed to reserve and hold this spot, a small price to pay given what you can do with this new capability.
+
+This demo shows how you can use this feature to make Column elements invisible as if a section of the window has been collapsed with the contents hidden.
+
+Here is how the demo looks running on Windows
+
+![Collapsable for cookbook.gif](/api/files/5f2c5d5847d1fc1c1a4d850a/collapsable-for-cookbook.gif "Collapsable for cookbook.gif")
+
+<iframe src='https://trinket.io/embed/pygame/df2c15979e?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/layouts/fixed-size-columns-with-justification.md

@@ -0,0 +1,27 @@
+## Fixed Size Columns - With `element_justification`
+
+Generally speaking, PySimpleGUI likes it when you don't force sizes of things to be a specific number of pixels.  Instead, it's suggested that you make things "float", to size themselves.
+
+The `Column` element supports setting a specific size for the Column, however, the use of the paramter `element_justification` does not work on these fixed size Columns.  Instead, another approach is needed.  
+Two options are (there may be more of course):
+1. Use a `Frame` element
+2. Instead of `size` parameter, use a `Sizer` element
+
+### The Frame Solution
+
+The easiest approach is to use a `Frame` element instead of a `Column`.  If using a `Frame` element, then setting a fixed size works with the `element_justification` parameter.
+
+In order to get the vertical alignment the easiest solution is to use the `VPush` element above and below the layout.  This will "push" from the top and the bottom with the result being that the layout is centered vertically.
+
+
+<iframe src='https://trinket.io/embed/pygame/e240ba6e38?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
+
+
+### The Column Solution
+
+The way to get both a fixed size Column and have the interrior be able to be justified is to use a little-known "helper element" called `Sizer`.  This element simply adds space in horizontal and veritcal directions.  The implementation of it is that it's simply a Column with padding added.  
+
+To help you use these, this demo was created.  It makes a "User Defined Element" (a function that looks like an element and can be used in layouts) that acts like a Column that enables you to have both a size and an element_justification parameter.
+
+
+<iframe src='https://trinket.io/embed/pygame/f38bc15b69?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/layouts/push-and-vpush-elements.md

@@ -0,0 +1,14 @@
+## `Push` and `VPush` Elements For Justification
+
+The aliases `Push` and `VPush` are aliases for `Stretch` and `VStretch`. `Stetch`, `VStretch`, and `Push` was in the 4.48.0 release.  `VPush` will be in the 4.49.0 release. 
+
+There are a couple of new Elements that help with layout justification (functions that act like elements to be precise).
+
+`Push` will push elements in a row away from it.  If you have a row with a `Push` element on the left, then it will push the elements to the right of it to the right.  If you have one on each end of a row, then the result will be the elements between them will be centered.
+
+`VPush` pushes rows of elements vertically in the same fashion that the `Push` does horizontally.  Place a `VPush` on the first row and it will push the other rows to the very bottom of the container (e.g. window).
+
+This example centers a couple of elements in the middle of the window by surrounding them by `Push` and `VPush` elements.
+
+
+<iframe src='https://trinket.io/embed/pygame/752555630c?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/layouts/swapping-window-layouts.md

@@ -0,0 +1,10 @@
+**(Simulated) Swapping of Entire Window Contents**
+
+While it's not possible to make layouts that are truly dynamic in PySimpleGUI, you can make things appear they do.
+
+In this demo the goal is to swap out the entire window, except for the bottom row of buttons, with a completely different "layout".  
+
+The way this is accomplished is to create multiple `Column` Elements that are all hidden except for the currently visible one.
+
+
+<iframe src='https://trinket.io/embed/pygame/90e0dd133c?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/layouts/to-do-list-using-generated-layout.md

@@ -0,0 +1,45 @@
+**Generated Layouts - To Do List Program**
+
+![SNAG-0492.jpg](https://user-images.githubusercontent.com/46163555/138909673-5af55647-509a-479b-9ba5-bc5d40465134.png)
+
+This program demonstrates how you can a Python "List Comprehension" to create
+a GUI layout. The layout is created in 3 steps.  
+1. A title line
+2. The list of checkboxes and descriptions
+3. The buttons
+ 
+That is the layout that these 3 lines of code create
+
+```python
+layout =  [[Text('My To Do List', font='Helvetica 15')]]
+layout += [[Text(f'{i}. '), CBox('', key=f'-CB{i}-'), Input(k=f'-IN{i}-')] for i in range(1,6)]
+layout += [[Button('Save'), Button('Load'), Button('Exit')]]
+```
+
+This program is a little different in that it imports the individual objects
+being used.  Typically the import you'll find in most PySimpleGUI programs is
+
+```python
+import PySimpleGUI as sg
+```
+
+The result of importing each object is that you do not need the `sg.` before each function call, thus making the code even more compact.  The layout looks cleaner as well.
+
+However, there are a few drawbacks.  One is being able to easily spot calls to the PySimpleGUI package.  Another is code completion.  If you type `sg.` (control+SPACE) in an IDE, it will show you a list of choices from the PySimpleGUI pacakge that are available to you.
+
+It's being presented simply as another way of doing things.   You'll find the other demos use
+
+```python
+import PySimpleGUI as sg
+```
+
+<iframe src='https://trinket.io/embed/pygame/45e4bb64b8?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
+
+---
+
+**To Do List using "normal" import (`import PySimpleGUI as sg`)**
+
+In this version, the typical import statement is used.  The program is identical to the one above, but you'll notice that each element and PySimpleGUI object now has `sg.` in front of it.  Nearly all demo programs use this import convention and users have adopted it as well.  It's a standard of sorts at this point.
+
+
+<iframe src='https://trinket.io/embed/pygame/3be33cd9ee?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>