Use CoreGraphics to draw instead of SwifTUI

[rbdr/patterns] / README.md

diff --git a/README.md b/README.md
index 3cce40f97bc367ae37bb1315318d92dbef057bbd..900c4b22340adc2f3900b05ba2e2953345dda983 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,3 +1,112 @@
 # Patterns
 
-SwiftUI tiling black and white patterns
+SwiftUI tiling black and white patterns.
+
+This project contains `PatternView`, which is built out of `Tiles` with a given
+`TileDesign`.
+
+It also includes a `TilePicker` that can be used to control the selected
+design.
+
+## Available Tile Designs
+
+The `TileDesign` enum contains the following patterns (shown in the image from
+top left to bottom right)
+
+![Image showing the included patterns](./doc/images/patterns.png)
+
+* `.grid`
+* `.dottedGrid`
+* `.stitch`
+* `.curvedTile`
+* `.brick`
+* `.tile`
+* `.shadowGrid`
+* `.circles`
+* `.trees`
+* `.shingles`
+* `.wicker`
+* `.rhombus`
+* `.balls`
+
+## Usage
+
+The `PatternView` view will tile the selected design in its frame. It has the
+following properties:
+
+* `design: Binding<TileDesign>`: **required**, which design to use to tile the
+  frame.
+* `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
+* `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color.
+* `backgroundColor: Color`: **defaults to `Color.white`**, the background color.
+
+```
+// PatternView using default settings
+PatternView(design: .constant(TileDesign.shadowGrid))
+
+// PatternView using overrides
+PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
+```
+
+### Screenshots of the Patterns
+
+![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png)
+
+## Using the PatternPicker
+
+The pattern picker view is intended to be used when you want to allow users to
+change the design of the pattern.
+
+* `selectedDesign: Binding<TileDesign>`: **required**, the current selected
+  tile design.
+* `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the
+  border around the selected tile design.
+
+It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the
+same effect as `Pattern` mentioned above
+
+
+```
+@State var design: TileDesign = .brick
+@State var shouldShowPatternPicker = false
+
+...
+
+PatternView(design: $design)
+  .frame(width: 32.0).border(.black)
+  .onTapGesture {
+    shouldShowPatternPicker = !shouldShowPatternPicker;
+  }
+  .popover(isPresented: $shouldShowPatternPicker) {
+    PatternPicker(selectedDesign: $design)
+  }
+  .onChange(of: design) { _ in
+    shouldShowPatternPicker = false;
+  }
+```
+
+### Screenshots of the Pattern Picker
+
+![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png)
+
+## Supported Platforms
+
+* macOS 12+
+* iOS 15+
+* tvOS ?+
+* watchOS 8+
+* catalyst 15+
+
+## The TileImage struct
+
+If you'd like to do other things with the individual tiles, we also provide the
+TileImage struct, which generates a CGImage.
+
+The tiles support similar properties as `PatternView` with the exception that
+
+* `design: TileDesign`: **required**, which design to use to tile the frame.
+* `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
+* `foregroundColor: CGColor`: **defaults to black**, the foreground color.
+* `backgroundColor: CGColor`: **defaults to white**, the background color.
+
+![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)