├── .classpath ├── .gitignore ├── .project ├── .settings └── org.eclipse.jdt.core.prefs ├── README.md ├── data ├── README ├── img │ ├── AnimatedSprite.png │ ├── DEBUGGER_BUTTON.png │ ├── PDE.png │ ├── animate_ellipse.png │ ├── animatedsprite.gif │ ├── circle.png │ ├── debugger_enabled.png │ ├── draw_ellipse.png │ ├── ellipse.gif │ ├── ellipse_reference.png │ ├── enable_debugger.png │ ├── errors.png │ ├── errors_tab.png │ ├── example_code.png │ ├── file_examples.png │ ├── github.png │ ├── javapython2.gif │ ├── libraries.png │ ├── new_sketch.png │ ├── path_to_sketchbooks.png │ ├── processing-forum.png │ ├── processing3-logo.png │ ├── reference.png │ ├── save.png │ ├── save_as.png │ ├── sketchbook.png │ ├── sketchbook_access.png │ ├── tool.png │ └── variables.png └── static │ ├── 0.html │ ├── 1.html │ ├── 10.html │ ├── 11.html │ ├── 12.html │ ├── 13.html │ ├── 14.html │ ├── 15.html │ ├── 2.html │ ├── 3.html │ ├── 4.html │ ├── 5.html │ ├── 6.html │ ├── 7.html │ ├── 8.html │ └── 9.html ├── examples └── README ├── lib └── README ├── license.txt ├── readme_images ├── image1.jpeg ├── image2.jpeg └── image3.jpeg ├── resources ├── README.md ├── build.properties ├── build.xml ├── code │ ├── ExampleTaglet.class │ ├── ExampleTaglet.java │ ├── ant-contrib-1.0b3.jar │ └── doc.sh ├── stylesheet.css └── tool.properties ├── src └── jwh │ └── gettingstarted │ ├── GettingStarted.java │ └── WFrame.java └── web ├── index.html └── stylesheet.css /.classpath: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | processing-tool-template-3.0.2/.DS_Store 3 | processing-tool-template-3.0.2/data/.DS_Store 4 | processing-tool-template-3.0.2/src/.DS_Store 5 | processing-tool-template-3.0.2/src/template/.DS_Store 6 | -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | GettingStarted 4 | 5 | 6 | 7 | 8 | 9 | org.eclipse.jdt.core.javabuilder 10 | 11 | 12 | 13 | 14 | 15 | org.eclipse.jdt.core.javanature 16 | 17 | 18 | -------------------------------------------------------------------------------- /.settings/org.eclipse.jdt.core.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled 3 | org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8 4 | org.eclipse.jdt.core.compiler.codegen.unusedLocal=preserve 5 | org.eclipse.jdt.core.compiler.compliance=1.8 6 | org.eclipse.jdt.core.compiler.debug.lineNumber=generate 7 | org.eclipse.jdt.core.compiler.debug.localVariable=generate 8 | org.eclipse.jdt.core.compiler.debug.sourceFile=generate 9 | org.eclipse.jdt.core.compiler.problem.assertIdentifier=error 10 | org.eclipse.jdt.core.compiler.problem.enumIdentifier=error 11 | org.eclipse.jdt.core.compiler.source=1.8 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Getting Started 2 | [![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) 3 | 4 | Getting Started is a tool that hopes to provide a short introduction to the PDE for new/beginner users. Much of the information is derived from the [**Getting Started Tutorial**](https://processing.org/tutorials/gettingstarted/) from the Processing website. 5 | 6 | Users can flip through the frames using the **Previous** and **Next** buttons and can try examples in their own editors by using the **"Try It!"** button. 7 | 8 | ### Installation 9 | You can install the Getting Started tool via the Contribution Manager in the PDE. 10 | 1. Tools > Add Tool... 11 | 2. Select "Getting Started" and press "Install" 12 | 13 | Screenshots of current frames: 14 | ![screenshot1](readme_images/image1.jpeg) 15 | ![screenshot2](readme_images/image2.jpeg) 16 | ![screenshot3](readme_images/image3.jpeg) 17 | -------------------------------------------------------------------------------- /data/README: -------------------------------------------------------------------------------- 1 | The data folder: 2 | If your tool is using files like images, sound files, any data file, etc., 3 | put them into the data folder. When writing your tool you can use the 4 | following methods as a starting point to load or get files from the data folder, 5 | these are suggestions amongst many other solutions. 6 | 7 | When using an Object which extends PApplet inside your tool, PApplet's internal 8 | methods such as loadImage, loadStrings, etc. will use your tool's data folder to find 9 | files to be loaded. 10 | 11 | 12 | 13 | 14 | 15 | /** 16 | * load an image from the data folder or an absolute path. This 17 | * java.awt.Image can be displayed within a JFrame for example. 18 | * 19 | * @param theFilename 20 | * @return 21 | */ 22 | public Image loadImage(String theFilename) { 23 | if (theFilename.startsWith(File.separator)) { 24 | return new ImageIcon(theFilename).getImage(); 25 | } else { 26 | URL img = this.getClass().getResource(getPath(theFilename)); 27 | return new ImageIcon(img).getImage(); 28 | } 29 | } 30 | 31 | 32 | /** 33 | * load an image from the data folder or an absolute path as a PImage. 34 | * 35 | * @param theFilename 36 | * @return 37 | */ 38 | public PImage loadPImage(String theFilename) { 39 | return new PImage(loadImage(theFilename)); 40 | } 41 | 42 | 43 | /** 44 | * load a text file from the data folder or an absolute path. 45 | * 46 | * @param theFilename 47 | * @return 48 | */ 49 | public String loadString(String theFilename) { 50 | InputStream is = null; 51 | if (theFilename.startsWith(File.separator)) { 52 | try { 53 | is = new FileInputStream(loadFile(theFilename)); 54 | } catch (FileNotFoundException e) { 55 | System.err.println("ERROR @ loadString() " + e); 56 | } 57 | } else { 58 | is = getClass().getResourceAsStream(getPath(theFilename)); 59 | } 60 | InputStreamReader isr = new InputStreamReader(is); 61 | BufferedReader br = new BufferedReader(isr); 62 | int buffer; 63 | String result = ""; 64 | try { 65 | while ((buffer = br.read()) != -1) { 66 | result += (char) buffer; 67 | } 68 | } catch (Exception e) { 69 | System.err.println("ERROR @ loadString() " + e); 70 | } 71 | return result; 72 | } 73 | 74 | 75 | /** 76 | * getPath will return the path to a file or folder inside the data folder 77 | * of the tool or an absolute path. 78 | * 79 | * @param theFilename 80 | * @return 81 | */ 82 | public String getPath(String theFilename) { 83 | if (theFilename.startsWith("/")) { 84 | return theFilename; 85 | } 86 | return File.separator + "data" + File.separator + theFilename; 87 | } 88 | 89 | 90 | /** 91 | * load a file from the data folder or an absolute path. 92 | * 93 | * @param theFilename 94 | * @return 95 | */ 96 | public File loadFile(String theFilename) { 97 | if (theFilename.startsWith(File.separator)) { 98 | return new File(theFilename); 99 | } 100 | String path = getClass().getResource(getPath(theFilename)).getPath(); 101 | return new File(path); 102 | } 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /data/img/AnimatedSprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/AnimatedSprite.png -------------------------------------------------------------------------------- /data/img/DEBUGGER_BUTTON.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/DEBUGGER_BUTTON.png -------------------------------------------------------------------------------- /data/img/PDE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/PDE.png -------------------------------------------------------------------------------- /data/img/animate_ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/animate_ellipse.png -------------------------------------------------------------------------------- /data/img/animatedsprite.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/animatedsprite.gif -------------------------------------------------------------------------------- /data/img/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/circle.png -------------------------------------------------------------------------------- /data/img/debugger_enabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/debugger_enabled.png -------------------------------------------------------------------------------- /data/img/draw_ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/draw_ellipse.png -------------------------------------------------------------------------------- /data/img/ellipse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/ellipse.gif -------------------------------------------------------------------------------- /data/img/ellipse_reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/ellipse_reference.png -------------------------------------------------------------------------------- /data/img/enable_debugger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/enable_debugger.png -------------------------------------------------------------------------------- /data/img/errors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/errors.png -------------------------------------------------------------------------------- /data/img/errors_tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/errors_tab.png -------------------------------------------------------------------------------- /data/img/example_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/example_code.png -------------------------------------------------------------------------------- /data/img/file_examples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/file_examples.png -------------------------------------------------------------------------------- /data/img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/github.png -------------------------------------------------------------------------------- /data/img/javapython2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/javapython2.gif -------------------------------------------------------------------------------- /data/img/libraries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/libraries.png -------------------------------------------------------------------------------- /data/img/new_sketch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/new_sketch.png -------------------------------------------------------------------------------- /data/img/path_to_sketchbooks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/path_to_sketchbooks.png -------------------------------------------------------------------------------- /data/img/processing-forum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/processing-forum.png -------------------------------------------------------------------------------- /data/img/processing3-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/processing3-logo.png -------------------------------------------------------------------------------- /data/img/reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/reference.png -------------------------------------------------------------------------------- /data/img/save.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/save.png -------------------------------------------------------------------------------- /data/img/save_as.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/save_as.png -------------------------------------------------------------------------------- /data/img/sketchbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/sketchbook.png -------------------------------------------------------------------------------- /data/img/sketchbook_access.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/sketchbook_access.png -------------------------------------------------------------------------------- /data/img/tool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/tool.png -------------------------------------------------------------------------------- /data/img/variables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/data/img/variables.png -------------------------------------------------------------------------------- /data/static/0.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Welcome to Processing 3!

11 |

Let us give you a short tour before we get started.

12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 |
 
23 |

The Processing Development Environment

24 | 25 | 26 | -------------------------------------------------------------------------------- /data/static/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Your First Sketch

11 |

Let's begin by drawing an ellipse. Type the following:

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
 
20 | 21 | 22 | -------------------------------------------------------------------------------- /data/static/10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Identifying Errors

11 |

Let's take a look at this program with a couple of errors.
12 | The latest error is displayed in the red area of the console.

13 | 14 | 15 | 16 | 17 | 18 | 19 |
 
20 | 21 | 22 | -------------------------------------------------------------------------------- /data/static/11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Errors Tab

11 |

Inside the Errors tab, you will be able to see 12 | all the errors
listed individually, with the tab name and line number
where they occur.

13 | 14 | 15 | 16 | 17 | 18 | 19 |
 
20 | 21 | 22 | -------------------------------------------------------------------------------- /data/static/12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Processing Modes

9 |

10 | There are different programming modes that make it possible 11 |
to program in different ways. The Java mode is the default. 12 |
Other modes can be downloaded by selecting "Add Mode..." 13 |
from the menu in the upper-right corner of the PDE. 14 |

15 |

For example, in the Python mode, even the previous 16 |
AnimatedSprite example is written in Python. 17 |

18 | 19 | 20 | 21 | 22 | 23 |
 
24 | 25 | 26 | -------------------------------------------------------------------------------- /data/static/13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Processing Libraries

9 |

10 | Libraries make it possible for sketches to do things beyond 11 | the core Processing code.

12 |

13 | They can enable new things like playing 14 | sounds, doing computer vision, and working with advanced 3D geometry. 15 | Contributed libraries can be installed via 16 |
Sketch > Import Library > Add Libraries... 17 |

18 | 19 | 20 | 21 | 22 | 23 |
 
24 |

Processing Tools

25 |

26 | Tools extend the PDE to help make creating sketches easier 27 | by providing interfaces for tasks like selecting colors. 28 | Contributed tools can be installed via Tools > Add Tool... 29 |

30 | 31 | 32 | 33 | 34 | 35 |
 
36 |

*Try out the Reference Tool to easily search for any references!*

37 | 38 | 39 | -------------------------------------------------------------------------------- /data/static/14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Debugger - *ADVANCED*

11 |

Still can't figure out what is going wrong in your code?
12 | Try the Processing 3 Debugger tool!

13 |

There are two ways to enable the Debugger:

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
 OR
22 |

Once the Debugger has been enabled, you should see:

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
 
 
33 |

Watch the Debugger video to learn how to use it.

34 | 35 | 36 | -------------------------------------------------------------------------------- /data/static/15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Helpful Links

11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
  Processing: Welcome to Processing 3 16 |
       Introduction to the PDE
  Github: All of Processing 3 code is located in the
     Github repository.
  Forum: Meet the Processing community, ask
     questions, and discuss about Processing.
29 |

Do you have any feedback? 30 | 31 | 32 | -------------------------------------------------------------------------------- /data/static/2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Resulting Ellipse

11 |

Once you click the RUN button in the Tool Bar, you should
12 | see an ellipse like the one below.

13 | 14 | 15 | 16 | 17 | 18 | 19 |
 
20 |

The ellipse has a width and height of 80 pixels and is
located with 21 | its center 50 pixels from the left and 50 pixels
from the top.

22 | 23 | 24 | -------------------------------------------------------------------------------- /data/static/3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Your Second Sketch

11 |

Delete the text from the last example, and try this:

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
 
20 | 21 | 22 | -------------------------------------------------------------------------------- /data/static/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Animating the Ellipse

11 |

Click the RUN button in the Tool Bar and...Voilà!

12 |

If you move your mouse over the pop-up screen,you
should be able to animate the ellipse like below.

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
 
21 |

This program creates a window that is 480 px wide and
22 | 120 px high. It draws white circles at the position of
23 | the mouse and when a mouse button is pressed, the circle
color changes to black.

24 |

Click on the STOP button in the Tool Bar to halt the sketch.

25 |

Interested in more tutorials?
Check out the official Processing Tutorials page.

26 | 27 | 28 | -------------------------------------------------------------------------------- /data/static/5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Example Sketches and Animations

11 |

You can find some example codes and animations under
File > Examples...

12 | 13 | 14 | 15 | 16 | 17 |
 
18 |

Let's look at the AnimatedSprite example in the Animation folder.

19 | 20 | 21 | 22 | 23 | 24 |
 
25 | 26 | 27 | -------------------------------------------------------------------------------- /data/static/6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

Running an Example

11 |

When the sketch for AnimatedSprite opens up, press the
RUN button in the Tool Bar.

12 | 13 | 14 | 15 | 16 | 17 | 18 |
 
19 |

You can see how it reacts to the location of your mouse.

20 |

Check out more of the examples!

21 | 22 | -------------------------------------------------------------------------------- /data/static/7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

11 | References 12 |

13 |

14 | You can find references for certain functions and syntax
used in Processing.

15 |

Let's look up the reference for ellipse().

16 |

1. Highlight what you would like to look up.

17 | 18 | 19 | 20 | 21 | 22 |
 
23 |

2A. Click Help > Find in Reference

24 | 25 | 26 | 27 | 28 | 29 |
 
30 |

2B. Right-click on highlighted text > Find in Reference

31 |

32 | You can find more references here. 33 |

34 | 35 | 36 | -------------------------------------------------------------------------------- /data/static/8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 |

11 | How to Save Your Sketch 12 |

13 |

14 | By default, your programs are saved to the "sketchbook," 15 |
a folder that collects your programs for easy access. 16 |

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
  Your sketches can be saved
under File > Save
 If you want to save your sketches as a different name,
choose the Save As option.
31 |

32 | It's always good practice to save your sketches often!
33 |

34 | 35 | 36 | -------------------------------------------------------------------------------- /data/static/9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Location of Your Sketchbooks

9 | 10 | 11 | 12 | 13 | 14 |
 Under Processing > Preferences:
15 |

How to Access a List of Your Sketchbooks in the PDE

16 | 17 | 18 | 19 | 20 | 21 | 22 |
 
23 |

Making New Sketches

24 | 25 |   26 |   27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/README: -------------------------------------------------------------------------------- 1 | add examples for your tool here. -------------------------------------------------------------------------------- /lib/README: -------------------------------------------------------------------------------- 1 | The lib folder: 2 | In case your tool requires 3rd party libraries, which need to be 3 | added to the distribution, put them into the lib folder. 4 | These 3rd party libraries will be added to your distribution and are 5 | located next to your tool's jar file. 6 | 7 | This does not apply to .jar files that are considered core processing libraries. -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | A code template to build tools for the Processing programming environment. 2 | 3 | Part of the Processing project - http://processing.org 4 | 5 | Copyright (c) 2011-2015 Elie Zananiri 6 | Copyright (c) 2008-2011 Andreas Schlegel 7 | 8 | This program is free software; you can redistribute it and/or 9 | modify it under the terms of the GNU General Public License 10 | as published by the Free Software Foundation; either version 2 11 | of the License, or (at your option) any later version. 12 | 13 | This program is distributed in the hope that it will be useful, 14 | but WITHOUT ANY WARRANTY; without even the implied warranty of 15 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 16 | GNU General Public License for more details. 17 | 18 | You should have received a copy of the GNU General Public License 19 | along with this program; if not, write to the Free Software 20 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. -------------------------------------------------------------------------------- /readme_images/image1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/readme_images/image1.jpeg -------------------------------------------------------------------------------- /readme_images/image2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/readme_images/image2.jpeg -------------------------------------------------------------------------------- /readme_images/image3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/readme_images/image3.jpeg -------------------------------------------------------------------------------- /resources/README.md: -------------------------------------------------------------------------------- 1 | ## How to install ##tool.name## 2 | 3 | 4 | ### Install with the Contribution Manager 5 | 6 | Add contributed tools by selecting the menu item _Tools_ → _Add Tool..._ This will open the Contribution Manager, where you can browse for ##tool.name##, or any other tool you want to install. 7 | 8 | Not all available tools have been converted to show up in this menu. If a tool isn't there, it will need to be installed manually by following the instructions below. 9 | 10 | ### Manual Install 11 | 12 | Contributed tools may be downloaded separately and manually placed within the `tools` folder of your Processing sketchbook. To find (and change) the Processing sketchbook location on your computer, open the Preferences window from the Processing application (PDE) and look for the "Sketchbook location" item at the top. 13 | 14 | By default the following locations are used for your sketchbook folder: 15 | * For Mac users, the sketchbook folder is located inside `~/Documents/Processing` 16 | * For Windows users, the sketchbook folder is located inside `My Documents/Processing` 17 | 18 | Download ##tool.name## from ##tool.url## 19 | 20 | Unzip and copy the contributed tool's folder into the `tools` folder in the Processing sketchbook. You will need to create this `tools` folder if it does not exist. 21 | 22 | The folder structure for tool ##tool.name## should be as follows: 23 | 24 | ``` 25 | Processing 26 | tools 27 | ##tool.name## 28 | examples 29 | tool 30 | ##tool.name##.jar 31 | reference 32 | src 33 | ``` 34 | 35 | Some folders like `examples` or `src` might be missing. After tool ##tool.name## has been successfully installed, restart the Processing application. 36 | 37 | ### Troubleshooting 38 | 39 | If you're having trouble, try contacting the author [##author.name##](##author.url##). 40 | -------------------------------------------------------------------------------- /resources/build.properties: -------------------------------------------------------------------------------- 1 | # Create a Tool for the Processing open source programming language and 2 | # environment (http://www.processing.org) 3 | # 4 | # Customize the build properties to make the ant-build-process work for your 5 | # environment. How? Please read the comments below. 6 | # 7 | # The default properties are set for OS X. Please refer to comments for Windows 8 | # settings. 9 | 10 | 11 | # Where is your Processing sketchbook located? 12 | # If you are not sure, check the sketchbook location in your Processing 13 | # application preferences. 14 | # ${user.home} points the compiler to your home directory. 15 | # For windows the default path to your sketchbook would be 16 | # ${user.home}/My Documents/Processing (make adjustments below). 17 | 18 | #sketchbook.location=${user.home}/My Documents/Processing 19 | sketchbook.location=${user.home}/Documents/Processing 20 | 21 | # Where are the jar files located that are required for compiling your Tool such 22 | # as e.g. core.jar? 23 | # By default the local classpath location points to folder libs inside Eclipse's 24 | # workspace (by default found in your home directory). 25 | # For Windows, the default path would be 26 | # ${user.home}/Documents/workspace/libs (make adjustments below) 27 | # For OS X,the following path will direct you into Processing's application 28 | # package, in case you put Processing inside your Applications folder. 29 | 30 | #classpath.local.location=${user.home}/Documents/workspace/libs 31 | classpath.local.location=/Applications/Processing.app/Contents/Java 32 | 33 | 34 | # Add all jar files that are required for compiling your project to the local 35 | # and project classpath. Use a comma as delimiter. These jar files must be 36 | # inside your classpath.local.location folder. 37 | # For creating a Tool, both pde.jar and core.jar are required. 38 | 39 | classpath.local.include=core.jar,pde.jar 40 | 41 | 42 | # Add Processing's libraries folder to the classpath. 43 | # If you don't need to include the libraries folder to your classpath, comment 44 | # out the following line. 45 | 46 | classpath.libraries.location=${user.home}/Documents/Processing/libraries 47 | 48 | 49 | # Set the java version that should be used to compile your Tool. 50 | 51 | java.target.version=1.7 52 | 53 | 54 | # Set the description of the Ant build.xml file. 55 | 56 | ant.description=Processing Tool Ant build file. 57 | 58 | 59 | # Give your Tool a name. The name must not contain spaces or special characters. 60 | # When creating a tool, the name of the main class which implements Tool must be 61 | # the same as the value defined for project.name in your build.properties. 62 | 63 | project.name=GettingStarted 64 | 65 | 66 | # The name as the user will see it. This can contain spaces and special 67 | # characters. 68 | 69 | project.prettyName=Getting Started 70 | 71 | 72 | # Use 'normal' or 'fast' as value for project.compile. 73 | # 'fast' will only compile the project into your sketchbook. 74 | # 'normal' will compile the distribution including the javadoc-reference and all 75 | # web-files (the compile process here takes longer). 76 | # All files compiled with project.compile=normal are stored 77 | # in the distribution folder. 78 | 79 | project.compile=normal 80 | 81 | 82 | # Set your name and URL, used for the web page and properties file. 83 | 84 | author.name=Jae Hyun 85 | author.url=http://www.jaewonhyun.com 86 | 87 | 88 | # Set the web page for your Tool. 89 | # This is NOT a direct link to where to download it. 90 | 91 | tool.url=http://www.github.com/jaewhyun/GettingStarted 92 | 93 | 94 | # Set the category (or categories) of your Tool from the following list: 95 | # "3D" "Animation" "Compilations" "Data" 96 | # "Fabrication" "Geometry" "GUI" "Hardware" 97 | # "I/O" "Language" "Math" "Simulation" 98 | # "Sound" "Utilities" "Typography" "Video & Vision" 99 | # 100 | # If a value other than those listed is used, your library will listed as 101 | # "Other". Many categories must be comma-separated. 102 | 103 | tool.categories=Other 104 | 105 | 106 | # A short sentence (or fragment) to summarize the Tool's function. This will be 107 | # shown from inside the PDE when the Tool is being installed. Avoid repeating 108 | # the name of your Tool here. Also, avoid saying anything redundant like 109 | # mentioning that it's a Tool. This should start with a capitalized letter, and 110 | # end with a period. 111 | 112 | tool.sentence=A Tool that provides a quick introduction to the PDE for new/beginner users. 113 | 114 | 115 | # Additional information suitable for the Processing website. The value of 116 | # 'sentence' always will be prepended, so you should start by writing the 117 | # second sentence here. If your Tool only works on certain operating systems, 118 | # mention it here. 119 | 120 | tool.paragraph= 121 | 122 | 123 | # Set the source code repository for your project. 124 | # We recommend Bitbucket (https://bitbucket.org) or GitHub (https://github.com). 125 | 126 | source.host=GitHub 127 | source.url=https://github.com/jaewhyun/GettingStarted 128 | source.repository=https://github.com/jaewhyun/GettingStarted 129 | 130 | 131 | # The current version of your Tool. 132 | # This number must be parsable as an int. It increments once with each release. 133 | # This is used to compare different versions of the same Tool, and check if an 134 | # update is available. 135 | 136 | tool.version=1 137 | 138 | 139 | # The version as the user will see it. 140 | 141 | tool.prettyVersion=1.1.0 142 | 143 | 144 | # The min and max revision of Processing compatible with your Tool. 145 | # Note that these fields use the revision and not the version of Processing, 146 | # parsable as an int. For example, the revision number for 2.2.1 is 227. 147 | # You can find the revision numbers in the change log: https://raw.githubusercontent.com/processing/processing/master/build/shared/revisions.txt 148 | # Only use maxRevision (or minRevision), when your Tool is known to break in a 149 | # later (or earlier) release. Otherwise, use the default value 0. 150 | 151 | compatible.minRevision=228 152 | compatible.maxRevision=0 153 | 154 | 155 | # The platforms and Processing version that the Tool has been tested 156 | # against. This information is only used in the generated webpage. 157 | 158 | tested.platform=osx,windows 159 | tested.processingVersion=3.0 160 | 161 | 162 | # Additional information for the generated webpage. 163 | 164 | tool.copyright=(c) 2018 165 | tool.dependencies=? 166 | tool.keywords=? 167 | 168 | 169 | # Include javadoc references into your project's javadocs. 170 | 171 | javadoc.java.href=http://docs.oracle.com/javase/7/docs/api/ 172 | javadoc.processing.href=http://processing.org/reference/javadoc/everything/ 173 | -------------------------------------------------------------------------------- /resources/build.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ${ant.description} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | ${line} 82 | Building the Processing Tool, ${project.name} ${tool.version} 83 | ${line} 84 | src path ${project.src} 85 | img path ${project.img} 86 | bin path ${project.bin} 87 | classpath.local ${classpath.local.location} 88 | sketchbook ${sketchbook.location} 89 | java version ${java.target.version} 90 | ${line} 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | ${exampleDir} 344 | 350 | 351 | 357 | 358 | 359 | 360 | 361 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | ${line} 380 | Name ${project.name} 381 | Version ${tool.prettyVersion} (${tool.version}) 382 | Compiled ${project.compile} 383 | Sketchbook ${sketchbook.location} 384 | ${line} 385 | done, finished. 386 | ${line} 387 | 388 | 389 | 390 | 391 | 392 | -------------------------------------------------------------------------------- /resources/code/ExampleTaglet.class: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/resources/code/ExampleTaglet.class -------------------------------------------------------------------------------- /resources/code/ExampleTaglet.java: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2002 Sun Microsystems, Inc. All Rights Reserved. 3 | * 4 | * Redistribution and use in source and binary forms, with or 5 | * without modification, are permitted provided that the following 6 | * conditions are met: 7 | * 8 | * -Redistributions of source code must retain the above copyright 9 | * notice, this list of conditions and the following disclaimer. 10 | * 11 | * -Redistribution in binary form must reproduce the above copyright 12 | * notice, this list of conditions and the following disclaimer in 13 | * the documentation and/or other materials provided with the 14 | * distribution. 15 | * 16 | * Neither the name of Sun Microsystems, Inc. or the names of 17 | * contributors may be used to endorse or promote products derived 18 | * from this software without specific prior written permission. 19 | * 20 | * This software is provided "AS IS," without a warranty of any 21 | * kind. ALL EXPRESS OR IMPLIED CONDITIONS, REPRESENTATIONS AND 22 | * WARRANTIES, INCLUDING ANY IMPLIED WARRANTY OF MERCHANTABILITY, 23 | * FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, ARE HEREBY 24 | * EXCLUDED. SUN AND ITS LICENSORS SHALL NOT BE LIABLE FOR ANY 25 | * DAMAGES OR LIABILITIES SUFFERED BY LICENSEE AS A RESULT OF OR 26 | * RELATING TO USE, MODIFICATION OR DISTRIBUTION OF THE SOFTWARE OR 27 | * ITS DERIVATIVES. IN NO EVENT WILL SUN OR ITS LICENSORS BE LIABLE 28 | * FOR ANY LOST REVENUE, PROFIT OR DATA, OR FOR DIRECT, INDIRECT, 29 | * SPECIAL, CONSEQUENTIAL, INCIDENTAL OR PUNITIVE DAMAGES, HOWEVER 30 | * CAUSED AND REGARDLESS OF THE THEORY OF LIABILITY, ARISING OUT OF 31 | * THE USE OF OR INABILITY TO USE SOFTWARE, EVEN IF SUN HAS BEEN 32 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 33 | * 34 | * You acknowledge that Software is not designed, licensed or 35 | * intended for use in the design, construction, operation or 36 | * maintenance of any nuclear facility. 37 | */ 38 | 39 | import com.sun.tools.doclets.Taglet; 40 | import com.sun.javadoc.*; 41 | import java.util.Map; 42 | import java.io.*; 43 | /** 44 | * A sample Taglet representing @example. This tag can be used in any kind of 45 | * {@link com.sun.javadoc.Doc}. It is not an inline tag. The text is displayed 46 | * in yellow to remind the developer to perform a task. For 47 | * example, "@example Hello" would be shown as: 48 | *
49 | *
50 | * To Do: 51 | *
Fix this! 52 | *
53 | *
54 | * 55 | * @author Jamie Ho 56 | * @since 1.4 57 | */ 58 | 59 | public class ExampleTaglet implements Taglet { 60 | 61 | private static final String NAME = "example"; 62 | private static final String HEADER = "example To Do:"; 63 | 64 | /** 65 | * Return the name of this custom tag. 66 | */ 67 | public String getName() { 68 | return NAME; 69 | } 70 | 71 | /** 72 | * Will return true since @example 73 | * can be used in field documentation. 74 | * @return true since @example 75 | * can be used in field documentation and false 76 | * otherwise. 77 | */ 78 | public boolean inField() { 79 | return true; 80 | } 81 | 82 | /** 83 | * Will return true since @example 84 | * can be used in constructor documentation. 85 | * @return true since @example 86 | * can be used in constructor documentation and false 87 | * otherwise. 88 | */ 89 | public boolean inConstructor() { 90 | return true; 91 | } 92 | 93 | /** 94 | * Will return true since @example 95 | * can be used in method documentation. 96 | * @return true since @example 97 | * can be used in method documentation and false 98 | * otherwise. 99 | */ 100 | public boolean inMethod() { 101 | return true; 102 | } 103 | 104 | /** 105 | * Will return true since @example 106 | * can be used in method documentation. 107 | * @return true since @example 108 | * can be used in overview documentation and false 109 | * otherwise. 110 | */ 111 | public boolean inOverview() { 112 | return true; 113 | } 114 | 115 | /** 116 | * Will return true since @example 117 | * can be used in package documentation. 118 | * @return true since @example 119 | * can be used in package documentation and false 120 | * otherwise. 121 | */ 122 | public boolean inPackage() { 123 | return true; 124 | } 125 | 126 | /** 127 | * Will return true since @example 128 | * can be used in type documentation (classes or interfaces). 129 | * @return true since @example 130 | * can be used in type documentation and false 131 | * otherwise. 132 | */ 133 | public boolean inType() { 134 | return true; 135 | } 136 | 137 | /** 138 | * Will return false since @example 139 | * is not an inline tag. 140 | * @return false since @example 141 | * is not an inline tag. 142 | */ 143 | 144 | public boolean isInlineTag() { 145 | return false; 146 | } 147 | 148 | /** 149 | * Register this Taglet. 150 | * @param tagletMap the map to register this tag to. 151 | */ 152 | public static void register(Map tagletMap) { 153 | ExampleTaglet tag = new ExampleTaglet(); 154 | Taglet t = (Taglet) tagletMap.get(tag.getName()); 155 | if (t != null) { 156 | tagletMap.remove(tag.getName()); 157 | } 158 | tagletMap.put(tag.getName(), tag); 159 | } 160 | 161 | /** 162 | * Given the Tag representation of this custom 163 | * tag, return its string representation. 164 | * @param tag the Tag representation of this custom tag. 165 | */ 166 | public String toString(Tag tag) { 167 | return createHTML(readFile(tag.text())); 168 | } 169 | 170 | 171 | /** 172 | * Given an array of Tags representing this custom 173 | * tag, return its string representation. 174 | * @param tags the array of Tags representing of this custom tag. 175 | */ 176 | public String toString(Tag[] tags) { 177 | if (tags.length == 0) { 178 | return null; 179 | } 180 | return createHTML(readFile(tags[0].text())); 181 | } 182 | 183 | 184 | 185 | String createHTML(String theString) { 186 | if(theString!=null) { 187 | String dd = ""; 193 | 194 | return dd+"\n
" + 195 | "
+Example
" + 196 | "
"+theString+"
" + 197 | "
"; 198 | } 199 | return ""; 200 | } 201 | 202 | 203 | /** 204 | * check if the examples directory exists and return the example as given in the tag. 205 | * @param theExample the name of the example 206 | */ 207 | String readFile(String theExample) { 208 | String record = ""; 209 | String myResult = ""; 210 | int recCount = 0; 211 | String myDir = "../examples"; 212 | File file=new File(myDir); 213 | if(file.exists()==false) { 214 | myDir = "./examples"; 215 | } 216 | try { 217 | FileReader fr = new FileReader(myDir+"/"+theExample+"/"+theExample+".pde"); 218 | BufferedReader br = new BufferedReader(fr); 219 | record = new String(); 220 | while ((record = br.readLine()) != null) { 221 | myResult += record+"\n"; 222 | } 223 | } catch (IOException e) { 224 | System.out.println(e); 225 | return null; 226 | } 227 | return myResult; 228 | } 229 | } 230 | 231 | 232 | -------------------------------------------------------------------------------- /resources/code/ant-contrib-1.0b3.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaewhyun/GettingStarted/1f5f2589cee3ac43f9ec8919b24ccf4ff388071a/resources/code/ant-contrib-1.0b3.jar -------------------------------------------------------------------------------- /resources/code/doc.sh: -------------------------------------------------------------------------------- 1 | # a shell script to create a java documentation 2 | # for a processing library. 3 | # 4 | # make changes to the variables below so they 5 | # fit the structure of your library 6 | 7 | # the package name of your library 8 | package=template; 9 | 10 | # source folder location 11 | src=../src; 12 | 13 | # the destination folder of your documentation 14 | dest=../documentation; 15 | 16 | 17 | # compile the java documentation 18 | javadoc -d $dest -stylesheetfile ./stylesheet.css -sourcepath ${src} ${package} 19 | -------------------------------------------------------------------------------- /resources/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* Javadoc style sheet */ 2 | /* Define colors, fonts and other style attributes here to override the defaults */ 3 | /* processingLibs style by andreas schlegel, sojamo */ 4 | 5 | 6 | body { 7 | margin : 0; 8 | padding : 0; 9 | padding-left : 10px; 10 | padding-right : 8px; 11 | background-color : #FFFFFF; 12 | font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 13 | font-size : 100%; 14 | font-size : 0.7em; 15 | font-weight : normal; 16 | line-height : normal; 17 | margin-bottom:30px; 18 | } 19 | 20 | 21 | 22 | 23 | /* Headings */ 24 | h1, h2, h3, h4, h5, th { 25 | font-family :Arial, Helvetica, sans-serif; 26 | font-size:1.2em; 27 | } 28 | 29 | 30 | p { 31 | font-size : 1em; 32 | width:80%; 33 | } 34 | 35 | pre, code { 36 | font-family : "Courier New", Courier, monospace; 37 | font-size : 12px; 38 | line-height : normal; 39 | } 40 | 41 | 42 | 43 | table { 44 | border:0; 45 | margin-bottom:10px; 46 | margin-top:10px; 47 | } 48 | 49 | 50 | tr, td { 51 | border-top: 0px solid; 52 | border-left: 0px solid; 53 | padding-top:8px; 54 | padding-bottom:8px; 55 | } 56 | 57 | 58 | 59 | hr { 60 | border:0; 61 | height:1px; 62 | padding:0; 63 | margin:0; 64 | margin-bottom:4px; 65 | 66 | } 67 | 68 | 69 | 70 | dd, th, td, font { 71 | font-size:1.0em; 72 | line-height:1.0em; 73 | } 74 | 75 | 76 | 77 | dt { 78 | margin-bottom:0px; 79 | } 80 | 81 | 82 | 83 | dd { 84 | margin-top:2px; 85 | margin-bottom:4px; 86 | } 87 | 88 | 89 | 90 | a { 91 | text-decoration: underline; 92 | font-weight: normal; 93 | } 94 | 95 | a:hover, 96 | a:active { 97 | text-decoration: underline; 98 | font-weight: normal; 99 | } 100 | 101 | a:visited, 102 | a:link:visited { 103 | text-decoration: underline; 104 | font-weight: normal; 105 | } 106 | 107 | 108 | img { 109 | border: 0px solid #000000; 110 | } 111 | 112 | 113 | 114 | /* Navigation bar fonts */ 115 | .NavBarCell1 { 116 | border:0; 117 | } 118 | 119 | .NavBarCell1Rev { 120 | border:0; 121 | } 122 | 123 | .NavBarFont1 { 124 | font-family: Arial, Helvetica, sans-serif; 125 | font-size:1.1em; 126 | } 127 | 128 | 129 | .NavBarFont1 b { 130 | font-weight:normal; 131 | } 132 | 133 | 134 | 135 | .NavBarFont1:after, .NavBarFont1Rev:after { 136 | font-weight:normal; 137 | content: " \\"; 138 | } 139 | 140 | 141 | .NavBarFont1Rev { 142 | font-family: Arial, Helvetica, sans-serif; 143 | font-size:1.1em; 144 | } 145 | 146 | .NavBarFont1Rev b { 147 | font-family: Arial, Helvetica, sans-serif; 148 | font-size:1.1em; 149 | font-weight:normal; 150 | } 151 | 152 | .NavBarCell2 { 153 | font-family: Arial, Helvetica, sans-serif; 154 | } 155 | 156 | .NavBarCell3 { 157 | font-family: Arial, Helvetica, sans-serif; 158 | } 159 | 160 | 161 | 162 | font.FrameItemFont { 163 | font-family: Helvetica, Arial, sans-serif; 164 | font-size:1.1em; 165 | line-height:1.1em; 166 | } 167 | 168 | font.FrameHeadingFont { 169 | font-family: Helvetica, Arial, sans-serif; 170 | line-height:32px; 171 | } 172 | 173 | /* Font used in left-hand frame lists */ 174 | .FrameTitleFont { 175 | font-family: Helvetica, Arial, sans-serif 176 | } 177 | 178 | 179 | .toggleList { 180 | padding:0; 181 | margin:0; 182 | margin-top:12px; 183 | } 184 | 185 | .toggleList dt { 186 | font-weight:bold; 187 | font-size:12px; 188 | font-family:arial,sans-serif; 189 | padding:0px; 190 | margin:10px 0px 10px 0px; 191 | } 192 | 193 | .toggleList dt span { 194 | font-family: monospace; 195 | padding:0; 196 | margin:0; 197 | } 198 | 199 | 200 | .toggleList dd { 201 | margin:0; 202 | padding:0; 203 | } 204 | 205 | html.isjs .toggleList dd { 206 | display: none; 207 | } 208 | 209 | .toggleList pre { 210 | padding: 4px 4px 4px 4px; 211 | } 212 | 213 | 214 | 215 | 216 | 217 | /* COLORS */ 218 | 219 | pre, code { 220 | color: #000000; 221 | } 222 | 223 | 224 | body { 225 | color : #333333; 226 | background-color :#FFFFFF; 227 | } 228 | 229 | 230 | h1, h2, h3, h4, h5, h6 { 231 | color:#555; 232 | } 233 | 234 | a, 235 | .toggleList dt { 236 | color: #1a7eb0; 237 | } 238 | 239 | a:hover, 240 | a:active { 241 | color: #1a7eb0; 242 | } 243 | 244 | a:visited, 245 | a:link:visited { 246 | color: #1a7eb0; 247 | } 248 | 249 | td,tr { 250 | border-color: #999999; 251 | } 252 | 253 | hr { 254 | color:#999999; 255 | background:#999999; 256 | } 257 | 258 | 259 | .TableHeadingColor { 260 | background: #dcdcdc; 261 | color: #555; 262 | } 263 | 264 | 265 | .TableSubHeadingColor { 266 | background: #EEEEFF 267 | } 268 | 269 | .TableRowColor { 270 | background: #FFFFFF 271 | } 272 | 273 | 274 | .NavBarCell1 { 275 | background-color:#dcdcdc; 276 | color:#000; 277 | } 278 | 279 | .NavBarCell1 a { 280 | color:#333; 281 | } 282 | 283 | 284 | .NavBarCell1Rev { 285 | background-color:transparent; 286 | } 287 | 288 | .NavBarFont1 { 289 | color:#333; 290 | } 291 | 292 | 293 | .NavBarFont1Rev { 294 | color:#fff; 295 | } 296 | 297 | .NavBarCell2 { 298 | background-color:#999; 299 | } 300 | 301 | .NavBarCell2 a { 302 | color:#fff; 303 | } 304 | 305 | 306 | 307 | .NavBarCell3 { 308 | background-color:#dcdcdc; 309 | } 310 | 311 | -------------------------------------------------------------------------------- /resources/tool.properties: -------------------------------------------------------------------------------- 1 | # More on this file here: https://github.com/processing/processing/wiki/Tool-Basics 2 | # UTF-8 supported. 3 | 4 | # The name of your tool as you want it formatted. 5 | name = Getting Started 6 | 7 | # List of authors. Links can be provided using the syntax [author name](url). 8 | authors = [Jae Hyun](http://www.github.com/jaewhyun) 9 | 10 | # A web page for your tool, NOT a direct link to where to download it. 11 | url = http://www.github.com/jaewhyun/GettingStarted 12 | 13 | # The category (or categories) of your tool, must be from the following list: 14 | # "3D" "Animation" "Compilations" "Data" 15 | # "Fabrication" "Geometry" "GUI" "Hardware" 16 | # "I/O" "Language" "Math" "Simulation" 17 | # "Sound" "Utilities" "Typography" "Video & Vision" 18 | # 19 | # If a value other than those listed is used, your library will listed as 20 | # "Other". Many categories must be comma-separated. 21 | categories = Other 22 | 23 | # A short sentence (or fragment) to summarize the tool's function. This will be 24 | # shown from inside the PDE when the tool is being installed. Avoid repeating 25 | # the name of your tool here. Also, avoid saying anything redundant like 26 | # mentioning that it's a tool. This should start with a capitalized letter, and 27 | # end with a period. 28 | sentence = A Tool that provides a quick introduction to the PDE for new/beginner users. 29 | 30 | # Additional information suitable for the Processing website. The value of 31 | # 'sentence' always will be prepended, so you should start by writing the 32 | # second sentence here. If your tool only works on certain operating systems, 33 | # mention it here. 34 | paragraph = ##tool.paragraph## 35 | 36 | # Links in the 'sentence' and 'paragraph' attributes can be inserted using the 37 | # same syntax as for authors. 38 | # That is, [here is a link to Processing](http://processing.org/) 39 | 40 | # A version number that increments once with each release. This is used to 41 | # compare different versions of the same tool, and check if an update is 42 | # available. You should think of it as a counter, counting the total number of 43 | # releases you've had. 44 | version = 1 45 | 46 | # The version as the user will see it. If blank, the version attribute will be 47 | # used here. This should be a single word, with no spaces. 48 | prettyVersion = 1.1.0 49 | 50 | # The min and max revision of Processing compatible with your tool. 51 | # Note that these fields use the revision and not the version of Processing, 52 | # parsable as an int. For example, the revision number for 2.2.1 is 227. 53 | # You can find the revision numbers in the change log: https://raw.githubusercontent.com/processing/processing/master/build/shared/revisions.txt 54 | # Only use maxRevision (or minRevision), when your tool is known to break in a 55 | # later (or earlier) release. Otherwise, use the default value 0. 56 | minRevision = 228 57 | maxRevision = 0 58 | -------------------------------------------------------------------------------- /src/jwh/gettingstarted/GettingStarted.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Getting Started Tool for PDE 3 | * 4 | * Copyright (c) 2018 Jae Won Hyun 5 | * 6 | * This library is free software; you can redistribute it and/or 7 | * modify it under the terms of the GNU Lesser General Public 8 | * License as published by the Free Software Foundation; either 9 | * version 2.1 of the License, or (at your option) any later version. 10 | * 11 | * This library is distributed in the hope that it will be useful, 12 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 13 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 14 | * Lesser General Public License for more details. 15 | * 16 | * You should have received a copy of the GNU Lesser General 17 | * Public License along with this library; if not, write to the 18 | * Free Software Foundation, Inc., 59 Temple Place, Suite 330, 19 | * Boston, MA 02111-1307 USA 20 | * 21 | * @author Jae Won Hyun 22 | * @modified 06/04/2018 23 | * @version 1.0.0 24 | */ 25 | 26 | package jwh.gettingstarted; 27 | 28 | import java.awt.Dimension; 29 | import java.awt.event.ActionEvent; 30 | import java.awt.event.ActionListener; 31 | import java.awt.Dimension; 32 | import java.io.File; 33 | 34 | import java.awt.Color; 35 | import javax.swing.JFrame; 36 | import javax.swing.JLabel; 37 | import javax.swing.JPanel; 38 | import javax.swing.BorderFactory; 39 | import javax.swing.Box; 40 | import javax.swing.BoxLayout; 41 | import javax.swing.JButton; 42 | import javax.swing.JComponent; 43 | import javax.swing.JEditorPane; 44 | import java.net.URL; 45 | 46 | import javax.swing.text.html.HTMLEditorKit; 47 | 48 | import processing.app.Base; 49 | import processing.app.Sketch; 50 | import processing.app.tools.Tool; 51 | import processing.app.ui.Editor; 52 | import processing.app.ui.WebFrame; 53 | 54 | import java.io.*; 55 | import java.util.*; 56 | 57 | public class GettingStarted implements Tool, ActionListener { 58 | Base base; 59 | WFrame currentFrame; 60 | JButton tryitButton; 61 | JButton previousButton; 62 | JButton nextButton; 63 | 64 | // variable to indicate whether a new editor has been opened before 65 | boolean open = false; 66 | int openLocation = 0; 67 | 68 | int pos = 0; 69 | String[] htmlArray = new String[] { 70 | "/data/static/0.html", 71 | "/data/static/1.html", 72 | "/data/static/2.html", 73 | "/data/static/3.html", 74 | "/data/static/4.html", 75 | "/data/static/5.html", 76 | "/data/static/6.html", 77 | "/data/static/7.html", 78 | "/data/static/8.html", 79 | "/data/static/9.html", 80 | "/data/static/10.html", 81 | "/data/static/11.html", 82 | "/data/static/12.html", 83 | "/data/static/13.html", 84 | "/data/static/14.html", 85 | "/data/static/15.html"}; 86 | HashMap tutorialCode = new HashMap(); 87 | 88 | public String getMenuTitle() { 89 | return "Getting Started"; 90 | } 91 | 92 | 93 | public void init(Base base) { 94 | this.base = base; 95 | } 96 | 97 | 98 | public void run() { 99 | createWalkthrough(); 100 | System.out.println("Getting Started 1.1.0 by Jae Hyun"); 101 | } 102 | 103 | /* 104 | * Adding buttons to the frame 105 | */ 106 | public void createWalkthrough() { 107 | // if the frame had been opened before 108 | if(currentFrame != null) { 109 | displayhtml(0); 110 | pos = 0; 111 | currentFrame.setVisible(true); 112 | return; 113 | } 114 | 115 | JComponent panel = Box.createHorizontalBox(); 116 | panel.setBackground(new Color(245, 245, 245)); 117 | 118 | // adding Try It button to populate tutorial code into a new editor 119 | tryitButton = new JButton("Try It!"); 120 | tryitButton.addActionListener(this); 121 | tryitButton.setActionCommand("Try It!"); 122 | tryitButton.setEnabled(false); 123 | 124 | // adding Previous button to return to the previous frame 125 | previousButton = new JButton("Previous"); 126 | previousButton.addActionListener(this); 127 | previousButton.setActionCommand("Previous"); 128 | 129 | // adding Next button to flip to the next frame 130 | nextButton = new JButton("Next"); 131 | nextButton.addActionListener(this); 132 | nextButton.setActionCommand("Next"); 133 | 134 | JPanel panelButtons = new JPanel(); 135 | panelButtons.setLayout(new BoxLayout(panelButtons, BoxLayout.LINE_AXIS)); 136 | panelButtons.setBorder(BorderFactory.createEmptyBorder(0, 10, 10, 10)); 137 | panelButtons.add(Box.createRigidArea(new Dimension(10, 0))); 138 | panelButtons.add(tryitButton); 139 | panelButtons.add(Box.createHorizontalGlue()); 140 | panelButtons.add(previousButton); 141 | panelButtons.add(nextButton); 142 | // panelButtons.setBackground(Color.WHITE); 143 | 144 | panel.add(panelButtons); 145 | 146 | try { 147 | currentFrame = new WFrame(439, 570, panel); 148 | currentFrame.setVisible(true); 149 | currentFrame.requestFocusInWindow(); 150 | setTutorialCode(); 151 | displayhtml(pos); 152 | previousButton.setEnabled(false); 153 | } catch(IOException e) { 154 | e.printStackTrace(); 155 | } 156 | 157 | } 158 | 159 | /* 160 | * Retrieving html file 161 | */ 162 | public URL getIndexFile(int index) { 163 | String filename = htmlArray[index]; 164 | java.net.URL htmlURL = getClass().getResource(filename); 165 | 166 | return htmlURL; 167 | } 168 | 169 | /* 170 | * displying the html file 171 | */ 172 | public void displayhtml(int index) { 173 | URL htmlfile = getIndexFile(index); 174 | currentFrame.setFile(htmlfile); 175 | } 176 | 177 | /* 178 | * Setting Try It codes 179 | */ 180 | public void setCode(Editor editorInput) { 181 | if(tutorialCode.containsKey(pos)) { 182 | editorInput.setText(tutorialCode.get(pos)); 183 | } 184 | } 185 | 186 | /* 187 | * Saving Tutorial Code into Map 188 | */ 189 | public void setTutorialCode() { 190 | String drawEllipse = "ellipse(50, 50, 80, 80);"; 191 | tutorialCode.put(1, drawEllipse); 192 | String aniEllipse = "void setup() {"+"\n"+ 193 | " size(480, 120);\n"+ 194 | "}\n"+ 195 | "\n"+ 196 | "void draw() {"+"\n"+ 197 | " if(mousePressed) {"+"\n"+ 198 | " fill(0);\n"+ 199 | " } else {\n" + 200 | " fill(255);\n"+ 201 | " }\n"+ 202 | " ellipse(mouseX, mouseY, 80, 80);\n"+ 203 | "}\n"; 204 | tutorialCode.put(3, aniEllipse); 205 | String idErrors = "void setup() {"+"\n"+ 206 | " size(200, 200);\n"+ 207 | "}\n"+ 208 | "\n"+ 209 | "void draw() {"+"\n"+ 210 | " int x = 50\n"+ 211 | " ellipse(300, 200, 50, 50;\n"+ 212 | "}\n"; 213 | tutorialCode.put(10, idErrors); 214 | } 215 | 216 | @Override 217 | public void actionPerformed(ActionEvent e) { 218 | if(base == null) { 219 | return; 220 | } 221 | 222 | String selected = e.getActionCommand(); 223 | 224 | if(selected.equals("Try It!")) { 225 | if(open == false) { 226 | base.handleNew(); 227 | openLocation = base.getEditors().size() - 1; 228 | } 229 | // indicates that a new editor is now open 230 | open = true; 231 | 232 | Editor editor; 233 | // if the the editor number is lower than the actual number of editors open rn, 234 | // then retrieve that editor to populate the example text 235 | if(openLocation < base.getEditors().size()) { 236 | editor = base.getEditors().get(openLocation); 237 | 238 | // if the editor number is higher than the actual number of editors open rn, 239 | // then open a new editor to populate the example text and remember that location instead 240 | } else { 241 | base.handleNew(); 242 | openLocation = base.getEditors().size() - 1; 243 | editor = base.getEditors().get(openLocation); 244 | } 245 | 246 | setCode(editor); 247 | editor.requestFocus(); 248 | } 249 | 250 | // enabling and abling buttons 251 | if(selected.equals("Previous")) { 252 | pos = pos - 1; 253 | nextButton.setEnabled(true); 254 | 255 | if(pos == 1 || pos == 3 || pos == 10) { 256 | tryitButton.setEnabled(true); 257 | } else { 258 | tryitButton.setEnabled(false); 259 | } 260 | 261 | if(pos < 0 || pos == 0) { 262 | pos = 0; 263 | previousButton.setEnabled(false); 264 | } 265 | 266 | displayhtml(pos); 267 | } else if(selected.equals("Next")) { 268 | pos = pos + 1; 269 | if(pos == htmlArray.length - 1) { 270 | nextButton.setEnabled(false); 271 | } 272 | 273 | if(pos == 1 || pos == 3 || pos == 10) { 274 | tryitButton.setEnabled(true); 275 | } else { 276 | tryitButton.setEnabled(false); 277 | } 278 | 279 | previousButton.setEnabled(true); 280 | 281 | if(pos >= htmlArray.length) { 282 | pos = htmlArray.length - 1; 283 | } 284 | 285 | displayhtml(pos); 286 | } 287 | } 288 | } 289 | -------------------------------------------------------------------------------- /src/jwh/gettingstarted/WFrame.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Getting Started Tool for PDE 3 | * 4 | * Copyright (c) 2018 Jae Won Hyun 5 | * 6 | * This library is free software; you can redistribute it and/or 7 | * modify it under the terms of the GNU Lesser General Public 8 | * License as published by the Free Software Foundation; either 9 | * version 2.1 of the License, or (at your option) any later version. 10 | * 11 | * This library is distributed in the hope that it will be useful, 12 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 13 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 14 | * Lesser General Public License for more details. 15 | * 16 | * You should have received a copy of the GNU Lesser General 17 | * Public License along with this library; if not, write to the 18 | * Free Software Foundation, Inc., 59 Temple Place, Suite 330, 19 | * Boston, MA 02111-1307 USA 20 | * 21 | * @author Jae Won Hyun 22 | * @modified 06/04/2018 23 | * @version 1.0.0 24 | */ 25 | 26 | /** 27 | * 28 | * Referenced: WebFrame.java from the Processing repository. 29 | * 30 | */ 31 | 32 | package jwh.gettingstarted; 33 | 34 | import java.awt.Color; 35 | import java.awt.Container; 36 | import java.awt.Dimension; 37 | import java.awt.Font; 38 | import java.awt.GraphicsEnvironment; 39 | import java.awt.event.ActionEvent; 40 | import java.awt.event.ActionListener; 41 | import java.awt.Desktop; 42 | import java.io.File; 43 | import java.io.IOException; 44 | import java.net.URL; 45 | import java.net.URI; 46 | 47 | import javax.swing.*; 48 | import javax.swing.event.*; 49 | import javax.swing.text.html.*; 50 | 51 | import processing.app.Platform; 52 | import processing.app.ui.Toolkit; 53 | 54 | public class WFrame extends JFrame { 55 | JEditorPane editorPane; 56 | HTMLEditorKit editorkit; 57 | StyleSheet css; 58 | Font font; 59 | 60 | public WFrame(int width, int height, Container panel) throws IOException { 61 | setSize(width, height); 62 | super.setResizable(false); 63 | super.setTitle("Getting Started"); 64 | 65 | editorPane = new JEditorPane(); 66 | editorPane.setEditable(false); 67 | 68 | editorPane.setPreferredSize(new Dimension(width, height)); 69 | 70 | font = Toolkit.getSansFont(10, Font.PLAIN); 71 | 72 | editorPane.setFont(font); 73 | 74 | Container containerPanel = getContentPane(); 75 | containerPanel.setFont(font); 76 | containerPanel.setLayout(new BoxLayout(containerPanel, BoxLayout.PAGE_AXIS)); 77 | containerPanel.add(editorPane); 78 | if(panel != null) 79 | containerPanel.add(panel); 80 | 81 | Toolkit.registerWindowCloseKeys(getRootPane(), new ActionListener() { 82 | @Override 83 | public void actionPerformed(ActionEvent e) { 84 | handleClose(); 85 | } 86 | }); 87 | 88 | Toolkit.setIcon(this); 89 | 90 | editorPane.setContentType("text/html"); 91 | 92 | editorkit = new HTMLEditorKit(); 93 | editorkit.setAutoFormSubmission(false); 94 | editorPane.setEditorKit(editorkit); 95 | css = editorkit.getStyleSheet(); 96 | css.addRule("body {font-family: ProcessingSansPro-Regular; font-size: 10px; background-color:#EEEEEE}"); 97 | css.addRule("p {padding-left: 15px; padding-right: 15px;}"); 98 | 99 | editorPane.addHyperlinkListener(new HyperlinkListener() { 100 | @Override 101 | public void hyperlinkUpdate(HyperlinkEvent e) { 102 | if(e.getEventType() == HyperlinkEvent.EventType.ACTIVATED) { 103 | handleLink(e.getURL().toExternalForm()); 104 | } 105 | } 106 | }); 107 | } 108 | 109 | public void setFile(URL urllink) { 110 | try { 111 | editorPane.setPage(urllink); 112 | } catch (IOException e) { 113 | e.printStackTrace(); 114 | } 115 | 116 | } 117 | 118 | public void handleLink(String link){ 119 | try { 120 | openthislink(link); 121 | } catch(Exception e) { 122 | e.printStackTrace(); 123 | } 124 | } 125 | 126 | public void openthislink(String url) throws Exception { 127 | Desktop.getDesktop().browse(new URI(url)); 128 | } 129 | 130 | public void handleClose() { 131 | dispose(); 132 | } 133 | } -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | ##tool.name## 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 25 | 26 | 38 | 39 |
40 | 41 |
42 |

##tool.name##

43 |

44 | A tool by ##author.name## for the Processing programming environment.
45 | Last update, ##date##. 46 |

47 |

48 | ##tool.sentence##
49 | ##tool.paragraph##
50 | Feel free to replace this paragraph with a description of the tool.
51 | Contributed libraries are developed, documented, and maintained by members of the Processing community. Further directions are included with each tool. For feedback and support, please post to the Discourse. We strongly encourage all libraries to be open source, but not all of them are. 52 |

53 |
54 | 55 | 56 | 57 |
58 |

Download

59 |

60 | Download ##tool.name## version ##tool.prettyVersion## (##tool.version##) in 61 | .zip format. 62 |

63 |

Installation

64 |

65 | Unzip and put the extracted ##project.name## folder into the tools folder of your Processing sketches. Reference and examples are included in the ##project.name## folder. 66 |

67 |
68 | 69 | 70 |
71 |

Keywords. ##tool.keywords##

72 |

Reference. Have a look at the javadoc reference here. A copy of the reference is included in the .zip as well.

73 |

Source. The source code of ##tool.name## is available at ##source.host##, and its repository can be browsed here.

74 |
75 | 76 | 77 |
78 |

Examples

79 |

Find a list of examples in the current distribution of ##tool.name##, or have a look at them by following the links below.

80 |
    81 | ##examples## 82 |
83 |
84 | 85 | 86 |
87 |

Tested

88 |

89 | 90 | Platform ##tested.platform## 91 | 92 | 93 |
Processing ##tested.processingVersion## 94 | 95 | 96 |
Dependencies ##tool.dependencies## 97 |

98 |
99 | 100 | 101 | 102 | 114 | 115 | 116 | 121 | 122 | 123 | 127 | 128 | 129 |
130 |
131 | 132 | 135 |
136 | 137 | -------------------------------------------------------------------------------- /web/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* processingLibs style by andreas schlegel, sojamo. */ 2 | 3 | 4 | * { 5 | margin:0; 6 | padding:0; 7 | border:0; 8 | } 9 | 10 | 11 | body { 12 | font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 13 | font-size : 100%; 14 | font-size : 0.70em; 15 | font-weight : normal; 16 | line-height : normal; 17 | } 18 | 19 | 20 | 21 | #container { 22 | margin-left:64px; 23 | background-color:#fff; 24 | } 25 | 26 | #header { 27 | float:left; 28 | padding-top:24px; 29 | padding-bottom:48px; 30 | } 31 | 32 | #menu { 33 | margin-top:16px; 34 | float:left; 35 | margin-bottom:64px; 36 | } 37 | 38 | 39 | #about, 40 | #download, 41 | #examples, 42 | #demos, 43 | #misc { 44 | width:480px; 45 | float:left; 46 | margin-right:24px; 47 | } 48 | 49 | 50 | #resources, #info { 51 | width:320px; 52 | float:left; 53 | } 54 | 55 | 56 | .clear { 57 | clear:both; 58 | } 59 | 60 | #footer { 61 | margin-top:300px; 62 | height:20px; 63 | margin-bottom:32px; 64 | } 65 | 66 | 67 | ul { 68 | list-style:none; 69 | padding:0; 70 | margin:0; 71 | } 72 | 73 | 74 | #menu ul li, #subMenu ul li { 75 | float:left; 76 | padding-right:6px; 77 | } 78 | 79 | 80 | 81 | 82 | 83 | 84 | /* Headings */ 85 | 86 | h1 { 87 | font-size:2em; 88 | font-weight:normal; 89 | } 90 | 91 | 92 | h2, h3, h4, h5, th { 93 | font-size:1.3em; 94 | font-weight:normal; 95 | margin-bottom:4px; 96 | } 97 | 98 | 99 | 100 | p { 101 | font-size:1em; 102 | width:90%; 103 | margin-bottom:32px; 104 | } 105 | 106 | 107 | pre, code { 108 | font-family:"Courier New", Courier, monospace; 109 | font-size:1em; 110 | line-height:normal; 111 | } 112 | 113 | 114 | 115 | 116 | hr { 117 | border:0; 118 | height:1px; 119 | margin-bottom:24px; 120 | } 121 | 122 | 123 | a { 124 | text-decoration: underline; 125 | font-weight: normal; 126 | } 127 | 128 | 129 | a:hover, 130 | a:active { 131 | text-decoration: underline; 132 | font-weight: normal; 133 | } 134 | 135 | 136 | a:visited, 137 | a:link:visited { 138 | text-decoration: underline; 139 | font-weight: normal; 140 | } 141 | 142 | 143 | 144 | img { 145 | border: 0px solid #000000; 146 | } 147 | 148 | 149 | 150 | 151 | 152 | /* COLORS */ 153 | 154 | 155 | body { 156 | color : #333; 157 | background-color :#fff; 158 | } 159 | 160 | 161 | #header { 162 | background-color:#fff; 163 | color:#333; 164 | } 165 | 166 | 167 | 168 | h1, h2, h3, h4, h5, h6 { 169 | color:#666; 170 | } 171 | 172 | 173 | pre, code { 174 | color: #000000; 175 | } 176 | 177 | 178 | a,strong { 179 | color: #333; 180 | } 181 | 182 | 183 | a:hover, 184 | a:active { 185 | color: #333; 186 | } 187 | 188 | 189 | a:visited, 190 | a:link:visited { 191 | color: #333; 192 | } 193 | 194 | 195 | #footer, #menu { 196 | background-color:#fff; 197 | color:#333; 198 | } 199 | 200 | 201 | #footer a, #menu a { 202 | color:#333; 203 | } 204 | --------------------------------------------------------------------------------