ecookbook restoring the folders for testing...

docs/eCookbook/graph-element/animated-line-graph.md

@@ -0,0 +1 @@
+<iframe src="https://trinket.io/embed/pygame/9f838232bd" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>

docs/eCookbook/graph-element/dashboard-mockup.md

@@ -0,0 +1,18 @@
+
+The beginnings of a Dashboard.  Shows dummy data as a moving line graph, some Elements to gather input, a play and pause button. 
+
+This demo uses a construct named "User Defined Elements".  These are functions that return an element and thus the function call can be made from inside of a layout.  In the layout there 3 elements on a row that look like this:
+
+`[ColumnParm('Model', 1, model_dict), ColumnParm('Parameter', 2, parm_dict),ColumnParm('Data Set', 3, data_set_dict),   ],
+`
+
+`ColumnParm` returns a `Frame` Element that has a number of radio buttons inside.  
+
+This link shows the program running on Trinket in "Published" mode:
+
+https://pysimplegui.trinket.io/sites/quick-and-dirty-dashboard-for-reddit
+
+
+And as usual here is the code:
+
+<iframe src="https://trinket.io/embed/pygame/3fed5650f4" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>

docs/eCookbook/graph-element/fourier-animated-graph.md

@@ -0,0 +1,16 @@
+### A Fourier Transform Graph
+
+![SNAG-0738.jpg](/api/files/5e83ba8fb4fd11574a7f9dfa/snag-0738.jpeg "SNAG-0738.jpg")
+
+This compact and impressive Fourier Transform demo program was submitted by an innovative PySimpleGUI user named Jason Yang (https://github.com/jason990420).  He's created a number of other amazing PySimpleGUI programs such as the solitaire and minesweeper games.  Not only did he write this impressive demonstration, but he also figured out how to create line drawings in a highly efficient manner that resulted in a new Graph Element drawing primitve.
+
+The underlying drawing primitive that makes it all possible is a new Graph Element method, `draw_lines`.  If you want to run this code, you'll need to download the latesst version of PySimpleGUI from the PySimpleGUI GitHub (http://www.PySimpleGUI.com).  The code will be released to PyPI soon as release 4.19.0.  For nom you'll need to get it from GitHub as version 4.18.0.9.
+
+When run on a desktop PC, the update is much smoother.
+
+You can run the Trinket "published" version for a cleaner look here: 
+
+https://pysimplegui.trinket.io/sites/fouriergraph
+
+
+<iframe src='https://trinket.io/embed/pygame/e73472d2bc?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/graph-element-bar-chart.md

@@ -0,0 +1,51 @@
+## Graph Element - Bar Charts
+
+Sometimes using Matplotlib is overkill.  
+
+Some graphing can be done trivially with PySimpleGUI.  A **Bar Chart** in particular is *quite easy*.
+
+The reason bar charts are simple and easy to make can be found by breaking down a bar chart.  A bar chart is literally a series of rectangles.
+
+##  A 6-line Example
+
+Here's an example with the minmum number of lines of code I could write and still have it be readable.
+
+Each of the steps is 1 line of code except for the for-loop being 1 more
+1. Import PySimpleGUI
+2. Make the Window
+3. Loop through the data
+4. Draw a Bar
+5. Draw a label above it with the value of the data point
+6. Wait for window to be closed by user
+
+
+
+<iframe src='https://trinket.io/embed/pygame/73aab03d9a?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
+
+
+
+## Drawing X and Y Axis
+
+This example is a copy of a chart produced using Matplotlib.  
+
+The chart data is contained in 3 lists.
+
+1.  The X-Axis labels for each bar
+2.  The color of each bar
+3.  The Y-Value for each bar
+  
+This example is rather specific as the number of data points was known ahead of time as was the maximum Y value.  A minumum amount of code enables you to see each component of the graph.
+
+
+<iframe src='https://trinket.io/embed/pygame/ada96fdf1b?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>
+
+
+
+
+## Another Example
+
+This chart updates every time you click the button.  The bar values are labeled as well with the label being at the top of each bar.  This is just the starting point for you to jump from and modify.
+
+
+
+<iframe src='https://trinket.io/embed/pygame/966cc03477?start=result' width='100%' height='660' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/graph-element-drag-a-square.md

@@ -0,0 +1,19 @@
+## Graph Element - Draw a square, drag it around
+
+This program is meant to show just how simple the Graph element can be to work with.  The code has been trimmed down to a base minimum. 
+
+The number of lines of code is 22 lines of actual program code, many of those are because of putting parameters on separate lines to make it easy for you to see them.  It's 16 lines of code if you're counting "statements".  The number isn't important.  The simplicity is.
+
+Like many Demo Programs, this was written to demonstrate a bug that was happening.  Testing new features or replicating bugs have been an excellent genesis for many of the Demo Programs.
+
+The high level summary of the code is:
+* Create the layout that is a single Graph Element of size 400 x 400 pixels
+* Make the window
+* Draw a square on the Graph Element
+* Event loop
+    * `window.read()`
+    * If the event is the Graph element's key, then it's a mouse click or drag event
+        * Move the center of the square to where the mouse is located
+
+
+<iframe src='https://trinket.io/embed/pygame/bef90956a6?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/graph-element-drawing-and-dragging.md

@@ -0,0 +1,15 @@
+Dragging Stuff Around
+
+This is where the Graph Element really begins to open up some powerful applications.  In this short drawing we're creating a paint program where you can drag with your mouse to create shapes and move them around on the Graph surface.
+
+Also demonstrated are the cursors that can be set.  When moving things, the dursor is changed into a movement cursor.  
+
+To run the program without the code on the screen, use this link to get a much larger view:
+https://pysimplegui.trinket.io/sites/graph-drawing-and-dragging
+
+Here's what it looks like on Windows
+
+![SNAG-0621.jpg](/api/files/5e02cf9942fe226a4ea7ae18/snag-0621.jpeg "SNAG-0621.jpg")
+
+
+<iframe src='https://trinket.io/embed/pygame/3dc5fee958?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/graph-element-line-graph-with-labels.md

@@ -0,0 +1,9 @@
+A line graph showing the values of the data points along the line.
+
+The original source to this program can be found in this repository:
+https://github.com/okajun35/practice_pySimpleGUI/tree/master/chart
+
+Thank you to the PySimpleGUI fans from "Start Python Club" for submitting.
+
+
+<iframe src='https://trinket.io/embed/pygame/32186f2ea5?start=result' width='100%' height='500' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/graph-element-sine-wave.md

@@ -0,0 +1,8 @@
+Using the Graph Element to make a line graph complete with X & Y axis labelled
+
+On Windows the program looks like this:
+
+![SNAG-0554.jpg](/api/files/5dcd849802f43da13f15ebce/snag-0554.jpeg "SNAG-0554.jpg")
+
+
+<iframe src='https://trinket.io/embed/pygame/ac825fc3a2?start=result' width='100%' height='650' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/utah-teapot.md

@@ -0,0 +1,18 @@
+## Utah Teapot - Using a `Graph` Element
+
+https://en.wikipedia.org/wiki/Utah_teapot
+
+To quote from the Wikipedia page:
+> The Utah teapot, or the Newell teapot, is a 3D test model that has become a 
+> standard reference object and an in-joke within the computer graphics community. 
+> "Using a teapot model is considered the 3D equivalent of a "Hello, World!" program"
+
+This PySimpleGUI program originated from GitHub user [EdwardChamberlain](https://github.com/EdwardChamberlain/) who has given permission for it to be used here in the PySimpleGUI eCookbook.  Thank you Edward!!
+
+This is a link to the GitHub repo where you'll find the latest version of the project:
+[PySimpleGUI-3D-Viewer](https://github.com/EdwardChamberlain/PySimpleGUI-3D-Viewer) 
+
+You can rotate the object using the top-most slider labelled "R" or you can use your mouse to rotate it by dragging your mouse (hold the left mouse button while dragging) in the Graph area.
+
+
+<iframe src='https://trinket.io/embed/pygame/5cb3229fe8?start=result' width='100%' height='600' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>

docs/eCookbook/graph-element/visualizing-sorts.md

@@ -0,0 +1,11 @@
+This demonstration shows how to use PySimpleGUI's Graph Element's drawing primitives to create a simple animation.
+
+In this case a Bubble Sort and an Insert Sort are shown. Other sorting algorithms can be easily added.  You can adjust the speed in realtime by using the slider.
+
+This is how it looks on Windows:
+
+![sorting faster.gif](/api/files/5de69342320e694563d5136a/sorting-faster.gif "sorting faster.gif")
+
+Here on Trinket the animation may not be as smooth 
+
+<iframe src='https://trinket.io/embed/pygame/91808cb432?start=result' width='100%' height='800' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen></iframe>