From b0b988a1e7adc9d4553feabfaecbeebbc85accdd Mon Sep 17 00:00:00 2001 From: Patrik Svensson Date: Wed, 25 Nov 2020 12:15:25 +0100 Subject: [PATCH] Add Canvas and CanvasImage docs --- docs/input/quick-start.md | 2 +- docs/input/widgets/calendar.md | 2 +- docs/input/widgets/canvas-image.md | 106 +++++++++++++++++++++++++++++ docs/input/widgets/canvas.md | 52 ++++++++++++++ docs/input/{ => widgets}/figlet.md | 3 +- docs/input/widgets/index.cshtml | 12 ++++ docs/input/widgets/index.md | 3 - docs/input/widgets/rule.md | 2 +- docs/input/widgets/table.md | 2 +- 9 files changed, 176 insertions(+), 8 deletions(-) create mode 100644 docs/input/widgets/canvas-image.md create mode 100644 docs/input/widgets/canvas.md rename docs/input/{ => widgets}/figlet.md (95%) create mode 100644 docs/input/widgets/index.cshtml delete mode 100644 docs/input/widgets/index.md diff --git a/docs/input/quick-start.md b/docs/input/quick-start.md index 751c976..73a0873 100644 --- a/docs/input/quick-start.md +++ b/docs/input/quick-start.md @@ -5,7 +5,7 @@ Order: 1 The fastest way of getting started using Spectre.Console is to install the NuGet package. -```shell +```text > dotnet add package Spectre.Console ``` diff --git a/docs/input/widgets/calendar.md b/docs/input/widgets/calendar.md index c59c0b0..3bf382c 100644 --- a/docs/input/widgets/calendar.md +++ b/docs/input/widgets/calendar.md @@ -1,5 +1,5 @@ Title: Calendar -Order: 4 +Order: 2 RedirectFrom: calendar --- diff --git a/docs/input/widgets/canvas-image.md b/docs/input/widgets/canvas-image.md new file mode 100644 index 0000000..f7964d7 --- /dev/null +++ b/docs/input/widgets/canvas-image.md @@ -0,0 +1,106 @@ +Title: Canvas Image +Order: 5 +--- + +To add [ImageSharp](https://github.com/SixLabors/ImageSharp) superpowers to +your console application to draw images, you will need to install +the [Spectre.Console.ImageSharp](https://www.nuget.org/packages/Spectre.Console.ImageSharp) NuGet package. + +```text +> dotnet add package Spectre.Console.ImageSharp +``` + +# Loading images + +Once you've added the `Spectre.Console.ImageSharp` NuGet package, +you can create a new instance of `CanvasImage` to draw images to the console. + +```csharp +// Load an image +var image = new CanvasImage("cake.png"); + +// Set the max width of the image. +// If no max width is set, the image will take +// up as much space as there is available. +image.MaxWidth(16); + +// Render the image to the console +AnsiConsole.Render(image); +``` + +## Result + +
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+
+ +# Manipulating images + +You can take full advantage of using [ImageSharp](https://github.com/SixLabors/ImageSharp) +and manipulate images directly via the [ImageSharp Processing API](https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Processing.html). + +```csharp +// Load an image +var image = new CanvasImage("cake.png"); +image.MaxWidth(32); + +// Set a sampler that will be used when scaling the image. +image.BilinearResampler(); + +// Mutate the image using ImageSharp +image.Mutate(ctx => ctx.Grayscale().Rotate(-45).EntropyCrop()); + +// Render the image to the console +AnsiConsole.Render(image); +``` + +# Result + +
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+                                                                
+
\ No newline at end of file diff --git a/docs/input/widgets/canvas.md b/docs/input/widgets/canvas.md new file mode 100644 index 0000000..fc8739f --- /dev/null +++ b/docs/input/widgets/canvas.md @@ -0,0 +1,52 @@ +Title: Canvas +Order: 4 +--- + +`Canvas` is a widget that allows you to render arbitrary "pixels" +(or _coxels_, as [Simon Cropp](https://twitter.com/SimonCropp/status/1331554791726534657?s=20) +suggested we should call them). + +# Drawing primitives + +```csharp +// Create a canvas +var canvas = new Canvas(16, 16); + +// Draw some shapes +for(var i = 0; i < canvas.Width; i++) +{ + // Cross + canvas.SetPixel(i, i, Color.White); + canvas.SetPixel(canvas.Width - i - 1, i, Color.White); + + // Border + canvas.SetPixel(i, 0, Color.Red); + canvas.SetPixel(0, i, Color.Green); + canvas.SetPixel(i, canvas.Height - 1, Color.Blue); + canvas.SetPixel(canvas.Width - 1, i, Color.Yellow); +} + +// Render the canvas +AnsiConsole.Render(canvas); +``` + +## Result + +
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+                                
+
\ No newline at end of file diff --git a/docs/input/figlet.md b/docs/input/widgets/figlet.md similarity index 95% rename from docs/input/figlet.md rename to docs/input/widgets/figlet.md index ca340ef..d6ecdeb 100644 --- a/docs/input/figlet.md +++ b/docs/input/widgets/figlet.md @@ -1,5 +1,6 @@ Title: Figlet -Order: 5 +Order: 3 +RedirectFrom: figlet --- Spectre.Console can render [FIGlet](http://www.figlet.org/) text by using the `FigletText` class. diff --git a/docs/input/widgets/index.cshtml b/docs/input/widgets/index.cshtml new file mode 100644 index 0000000..3274b88 --- /dev/null +++ b/docs/input/widgets/index.cshtml @@ -0,0 +1,12 @@ +Title: Widgets +Order: 9 +--- + +

Sections

+ + \ No newline at end of file diff --git a/docs/input/widgets/index.md b/docs/input/widgets/index.md deleted file mode 100644 index a0a0a68..0000000 --- a/docs/input/widgets/index.md +++ /dev/null @@ -1,3 +0,0 @@ -Title: Widgets -Order: 9 ---- \ No newline at end of file diff --git a/docs/input/widgets/rule.md b/docs/input/widgets/rule.md index faceef9..f2020cc 100644 --- a/docs/input/widgets/rule.md +++ b/docs/input/widgets/rule.md @@ -1,5 +1,5 @@ Title: Rule -Order: 5 +Order: 1 RedirectFrom: rule --- diff --git a/docs/input/widgets/table.md b/docs/input/widgets/table.md index d124287..b35e470 100644 --- a/docs/input/widgets/table.md +++ b/docs/input/widgets/table.md @@ -1,5 +1,5 @@ Title: Table -Order: 3 +Order: 0 RedirectFrom: tables ---