diff --git a/samples/misc/NodeServicesExamples/Controllers/HomeController.cs b/samples/misc/NodeServicesExamples/Controllers/HomeController.cs index 34ce07c..7a4f804 100755 --- a/samples/misc/NodeServicesExamples/Controllers/HomeController.cs +++ b/samples/misc/NodeServicesExamples/Controllers/HomeController.cs @@ -1,5 +1,6 @@ using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.NodeServices; namespace NodeServicesExamples.Controllers { @@ -15,8 +16,21 @@ namespace NodeServicesExamples.Controllers return View(); } - public IActionResult ImageResizing() + public async Task Chart([FromServices] INodeServices nodeServices) { + var options = new { width = 400, height = 200, showArea = true, showPoint = true, fullWidth = true }; + var data = new + { + labels = new[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }, + series = new[] { + new[] { 1, 5, 2, 5, 4, 3 }, + new[] { 2, 3, 4, 8, 1, 2 }, + new[] { 5, 4, 3, 2, 1, 0 } + } + }; + + ViewData["ChartMarkup"] = await nodeServices.InvokeAsync("./Node/renderChart", "line", options, data); + return View(); } diff --git a/samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs b/samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs deleted file mode 100644 index 43f45df..0000000 --- a/samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs +++ /dev/null @@ -1,64 +0,0 @@ -using System; -using System.IO; -using System.Threading.Tasks; -using Microsoft.AspNetCore.Hosting; -using Microsoft.AspNetCore.Mvc; -using Microsoft.AspNetCore.NodeServices; -using Microsoft.AspNetCore.StaticFiles; - -namespace NodeServicesExamples.Controllers -{ - public class ResizeImageController : Controller - { - private const int MaxDimension = 1000; - private static string[] AllowedMimeTypes = new[] { "image/jpeg", "image/png", "image/gif" }; - - private IHostingEnvironment _environment; - private INodeServices _nodeServices; - - public ResizeImageController(IHostingEnvironment environment, INodeServices nodeServices) - { - _environment = environment; - _nodeServices = nodeServices; - } - - [Route("resize/{*imagePath}")] - public async Task Index(string imagePath, int maxWidth, int maxHeight) - { - // Validate incoming params - if (maxWidth < 0 || maxHeight < 0 || maxWidth > MaxDimension || maxHeight > MaxDimension - || (maxWidth + maxHeight) == 0) - { - return BadRequest("Invalid dimensions"); - } - - var mimeType = GetContentType(imagePath); - if (Array.IndexOf(AllowedMimeTypes, mimeType) < 0) - { - return BadRequest("Disallowed image format"); - } - - // Locate source image on disk - var fileInfo = _environment.WebRootFileProvider.GetFileInfo(imagePath); - if (!fileInfo.Exists) - { - return NotFound(); - } - - // Invoke Node and pipe the result to the response - var imageStream = await _nodeServices.InvokeAsync( - "./Node/resizeImage", - fileInfo.PhysicalPath, - mimeType, - maxWidth, - maxHeight); - return File(imageStream, mimeType); - } - - private string GetContentType(string path) - { - string result; - return new FileExtensionContentTypeProvider().TryGetContentType(path, out result) ? result : null; - } - } -} diff --git a/samples/misc/NodeServicesExamples/Node/renderChart.js b/samples/misc/NodeServicesExamples/Node/renderChart.js new file mode 100644 index 0000000..370df76 --- /dev/null +++ b/samples/misc/NodeServicesExamples/Node/renderChart.js @@ -0,0 +1,8 @@ +var generate = require('node-chartist'); + +module.exports = function (callback, type, options, data) { + generate(type, options, data).then( + result => callback(null, result), // Success case + error => callback(error) // Error case + ); +}; diff --git a/samples/misc/NodeServicesExamples/Node/resizeImage.js b/samples/misc/NodeServicesExamples/Node/resizeImage.js deleted file mode 100644 index 207b149..0000000 --- a/samples/misc/NodeServicesExamples/Node/resizeImage.js +++ /dev/null @@ -1,8 +0,0 @@ -var sharp = require('sharp'); - -module.exports = function(result, physicalPath, mimeType, maxWidth, maxHeight) { - // Invoke the 'sharp' NPM module, and have it pipe the resulting image data back to .NET - sharp(physicalPath) - .resize(maxWidth || null, maxHeight || null) - .pipe(result.stream); -} diff --git a/samples/misc/NodeServicesExamples/Views/Home/Chart.cshtml b/samples/misc/NodeServicesExamples/Views/Home/Chart.cshtml new file mode 100644 index 0000000..2775261 --- /dev/null +++ b/samples/misc/NodeServicesExamples/Views/Home/Chart.cshtml @@ -0,0 +1,12 @@ +

Server-rendered chart

+ +

+ This sample demonstrates how arbitrary NPM modules can be invoked from .NET code. +

+

+ In this case, we use node-chartist to render the following chart on the server. The output is + identical to what you'd get if you used chartist.js + on the client, except that in this example, we're not executing any client-side code at all. +

+ +@Html.Raw(ViewData["ChartMarkup"]) diff --git a/samples/misc/NodeServicesExamples/Views/Home/ImageResizing.cshtml b/samples/misc/NodeServicesExamples/Views/Home/ImageResizing.cshtml deleted file mode 100644 index ff1ae6b..0000000 --- a/samples/misc/NodeServicesExamples/Views/Home/ImageResizing.cshtml +++ /dev/null @@ -1,34 +0,0 @@ -

Image Resizing

- -

- This sample shows how the NPM module sharp - can be used for dynamic image resizing from within an ASP.NET Core application. There is one copy of the - following image on disk, but we can set up an MVC action method that returns it resized to fit within an - arbitrary width and height. -

- -

- Dependencies: On Windows and Linux, there are no native dependencies. Just running - npm install is enough. On OS X, however, you need to have libvips installed, - which you can get through Homebrew by running - brew install homebrew/science/vips. -

- -

100px wide [open]

- - -

200px wide [open]

- - -

400px wide [open]

- - -

800px wide [open]

- - -

- Credit: - Parrot - by D Coetzee - is dedicated to the public domain (CC0) -

diff --git a/samples/misc/NodeServicesExamples/Views/Home/Index.cshtml b/samples/misc/NodeServicesExamples/Views/Home/Index.cshtml index 50d388c..0b13844 100644 --- a/samples/misc/NodeServicesExamples/Views/Home/Index.cshtml +++ b/samples/misc/NodeServicesExamples/Views/Home/Index.cshtml @@ -7,7 +7,6 @@

diff --git a/samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml b/samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml index 23ebe30..9331431 100755 --- a/samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml +++ b/samples/misc/NodeServicesExamples/Views/Shared/_Layout.cshtml @@ -1,8 +1,9 @@ - + NodeServices Examples + @RenderBody() diff --git a/samples/misc/NodeServicesExamples/package.json b/samples/misc/NodeServicesExamples/package.json index 6f6640d..58b8a32 100644 --- a/samples/misc/NodeServicesExamples/package.json +++ b/samples/misc/NodeServicesExamples/package.json @@ -4,6 +4,6 @@ "dependencies": { "babel-core": "^6.7.4", "babel-preset-es2015": "^6.6.0", - "sharp": "^0.15.0" + "node-chartist": "^1.0.2" } } diff --git a/samples/misc/NodeServicesExamples/wwwroot/css/chartist.min.css b/samples/misc/NodeServicesExamples/wwwroot/css/chartist.min.css new file mode 100644 index 0000000..9f9b908 --- /dev/null +++ b/samples/misc/NodeServicesExamples/wwwroot/css/chartist.min.css @@ -0,0 +1 @@ +.ct-double-octave:after,.ct-major-eleventh:after,.ct-major-second:after,.ct-major-seventh:after,.ct-major-sixth:after,.ct-major-tenth:after,.ct-major-third:after,.ct-major-twelfth:after,.ct-minor-second:after,.ct-minor-seventh:after,.ct-minor-sixth:after,.ct-minor-third:after,.ct-octave:after,.ct-perfect-fifth:after,.ct-perfect-fourth:after,.ct-square:after{content:"";clear:both}.ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-grid-background,.ct-line{fill:none}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ct-chart-donut .ct-label,.ct-chart-pie .ct-label{dominant-baseline:central}.ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{stroke-width:4px}.ct-area{stroke:none;fill-opacity:.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#59922b}.ct-series-f .ct-area,.ct-series-f .ct-slice-pie{fill:#59922b}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#0544d3}.ct-series-g .ct-area,.ct-series-g .ct-slice-pie{fill:#0544d3}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#6b0392}.ct-series-h .ct-area,.ct-series-h .ct-slice-pie{fill:#6b0392}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#f05b4f}.ct-series-i .ct-area,.ct-series-i .ct-slice-pie{fill:#f05b4f}.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut{stroke:#dda458}.ct-series-j .ct-area,.ct-series-j .ct-slice-pie{fill:#dda458}.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut{stroke:#eacf7d}.ct-series-k .ct-area,.ct-series-k .ct-slice-pie{fill:#eacf7d}.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut{stroke:#86797d}.ct-series-l .ct-area,.ct-series-l .ct-slice-pie{fill:#86797d}.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut{stroke:#b2c326}.ct-series-m .ct-area,.ct-series-m .ct-slice-pie{fill:#b2c326}.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut{stroke:#6188e2}.ct-series-n .ct-area,.ct-series-n .ct-slice-pie{fill:#6188e2}.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut{stroke:#a748ca}.ct-series-o .ct-area,.ct-series-o .ct-slice-pie{fill:#a748ca}.ct-square{display:block;position:relative;width:100%}.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-square:after{display:table}.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-minor-second{display:block;position:relative;width:100%}.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-minor-second:after{display:table}.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-major-second{display:block;position:relative;width:100%}.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-major-second:after{display:table}.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-minor-third{display:block;position:relative;width:100%}.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-minor-third:after{display:table}.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-major-third{display:block;position:relative;width:100%}.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-major-third:after{display:table}.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-perfect-fourth:after{display:table}.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-perfect-fifth:after{display:table}.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-sixth{display:block;position:relative;width:100%}.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-minor-sixth:after{display:table}.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-golden-section{display:block;position:relative;width:100%}.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-golden-section:after{content:"";display:table;clear:both}.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-major-sixth{display:block;position:relative;width:100%}.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-major-sixth:after{display:table}.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-seventh{display:block;position:relative;width:100%}.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-minor-seventh:after{display:table}.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-seventh{display:block;position:relative;width:100%}.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-major-seventh:after{display:table}.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-octave{display:block;position:relative;width:100%}.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-octave:after{display:table}.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-major-tenth{display:block;position:relative;width:100%}.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-major-tenth:after{display:table}.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-major-eleventh{display:block;position:relative;width:100%}.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-major-eleventh:after{display:table}.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-twelfth{display:block;position:relative;width:100%}.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-major-twelfth:after{display:table}.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-double-octave{display:block;position:relative;width:100%}.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-double-octave:after{display:table}.ct-double-octave>svg{display:block;position:absolute;top:0;left:0} \ No newline at end of file diff --git a/samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg b/samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg deleted file mode 100644 index 828a55b..0000000 Binary files a/samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg and /dev/null differ