Export to canvas initial version added
Project: http://git-wip-us.apache.org/repos/asf/stratos/repo Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/8df36000 Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/8df36000 Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/8df36000 Branch: refs/heads/master Commit: 8df360002b98e708cd86c1b3c4dc979e195dc751 Parents: e014d0a Author: Dakshika Jayathilaka <[email protected]> Authored: Thu Jan 29 16:49:33 2015 +0530 Committer: Dakshika Jayathilaka <[email protected]> Committed: Thu Jan 29 16:49:33 2015 +0530 ---------------------------------------------------------------------- .../themes/theme0/css/custom/topology.css | 4 ++- .../theme0/helpers/applications_topology.js | 2 +- .../theme0/partials/applications_topology.hbs | 28 ++++++++++++++++++++ 3 files changed, 32 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/stratos/blob/8df36000/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css index a779ccf..3bd34ea 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/topology.css @@ -42,4 +42,6 @@ .popover.top>.arrow { left: 60%; -} \ No newline at end of file +} + +#export{margin-right: 5px;} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/stratos/blob/8df36000/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js b/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js index dc73200..584a829 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/helpers/applications_topology.js @@ -1,7 +1,7 @@ var resources = function (page, meta) { return { js: ['JSONEditor-0.7.12/jsoneditor-0.7.12.js','bootstrap-switch-3.0.2/bootstrap-switch.min.js', 'custom/script.js', 'd3js-v3/d3.v3.min.js' , - 'custom/applications_topology.js'], + 'canvg/rgbcolor.js', 'canvg/canvg.js','custom/applications_topology.js'], css: ['bootstrap-switch-3.0.2/bootstrap-switch.min.css', 'custom/style.css', 'custom/topology.css'] }; }; http://git-wip-us.apache.org/repos/asf/stratos/blob/8df36000/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs index ec58a12..719e216 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/partials/applications_topology.hbs @@ -14,6 +14,7 @@ </div> <div class='col-md-11'> <button class='btn btn-info btn-lg pull-right' type='button' id='refresh' data-form=''>Refresh </button> + <a class='btn btn-info btn-lg pull-right' type='button' id='export' data-form=''>Export As PNG </a> </div> </div> </div> @@ -36,6 +37,7 @@ <div class="application-topology"> </div> + <canvas id="canvasOriginal" height="190" width="190" style="display:none"></canvas> </div> </div> @@ -64,11 +66,37 @@ $(document).ready(function () { } else { $(".application-topology").html(''); update(genTree(data)); + //call canvas update event + canvg('canvasOriginal', new XMLSerializer().serializeToString(svg)); } } }) }); + //make svg to canvas + var svg = $('svg')[0]; + var canvasOriginal = $('#canvasOriginal')[0]; + var ctxOriginal = canvasOriginal.getContext('2d'); + // this saves the inline svg to canvas without external css + canvg('canvasOriginal', new XMLSerializer().serializeToString(svg)); + /** + * This is the function that will take care of image extracting and + * setting proper filename for the download. + * IMPORTANT: Call it from within a onclick event. + */ + function downloadCanvas(link, canvasId, filename) { + link.href = document.getElementById(canvasId).toDataURL(); + link.download = filename; + } + + /** + * The event handler for the link's onclick event. We give THIS as a + * parameter (=the link element), ID of the canvas and a filename. + */ + $('#export').click(function() { + downloadCanvas(this, 'canvasOriginal', '{{{appName}}}.png'); + }); + }); </script> \ No newline at end of file
