Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Download lifesize (PNG) #136

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Download lifesize (PNG) #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2974adf
Merge branch 'master' of https://github.com/ijprest/keyboard-layout-e…
iandoug Sep 10, 2015
fcfd1ca
Create HiRes download
iandoug Sep 10, 2015
186a75a
Merge branch 'master' of https://github.com/ijprest/keyboard-layout-e…
iandoug Sep 15, 2015
bdb8723
Changed 'Download 300DPI' to 'Download lifesize'
iandoug Sep 16, 2015
5d1d3a2
Added down-left and down-right arrows.
iandoug Sep 16, 2015
3c342ab
Modified arrows on Align Legends tool to use kb-webfont glyphs so tha…
iandoug Sep 16, 2015
451e088
Switched to static scaling ratio of 1.33333 == 96/72
iandoug Sep 22, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions font-src/kbd-webfont.pe
View file
Open in desktop
Expand Up @@ -144,6 +144,8 @@ Select(0uE86D); Import("font-src/kbd-webfont/Multimedia-Down.svg",0,16);
Select(0uE86E); Import("font-src/kbd-webfont/Multimedia-Pause.svg",0,16);
Select(0uE86F); Import("font-src/kbd-webfont/Multimedia-Stop.svg",0,16);
Select(0uE870); Import("font-src/kbd-webfont/Multimedia-Record.svg",0,16);
Select(0uE871); Import("font-src/kbd-webfont/Arrows-Down-Left.svg",0,16);
Select(0uE872); Import("font-src/kbd-webfont/Arrows-Down-Right.svg",0,16);
Select(0uE8A0); Import("font-src/kbd-webfont/Symbol-Ankh.svg",0,16);
Select(0uE8A1); Import("font-src/kbd-webfont/Symbol-Peace.svg",0,16);
Select(0uE8A2); Import("font-src/kbd-webfont/Symbol-Alien.svg",0,16);
Expand Down
37 changes: 37 additions & 0 deletions font-src/kbd-webfont/Arrows-Down-Left.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions font-src/kbd-webfont/Arrows-Down-Right.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions kb.html
View file
Open in desktop
Expand Up @@ -188,6 +188,7 @@
<li><a ng-click="downloadPng()">Download PNG (Experimental)</a></li>
<li><a ng-click="downloadJpg()">Download JPG (Experimental)</a></li>
<li><a ng-click="downloadThumb()">Download Thumbnail (PNG) (Experimental)</a></li>
<li><a ng-click="downloadLifeSize()">Download Lifesize (PNG) (Experimental)</a></li>
<li class="divider"></li>
<li><a ng-click="downloadJson()">Download JSON</a></li>
</ul>
Expand Down Expand Up @@ -837,6 +838,7 @@
</div>
</div>

<!-- TOOLS -->
<div id="tools" ng-class="{hidden:selTab!=5}">

<div class="col-md-4 col-lg-4 row">
Expand Down Expand Up @@ -1403,6 +1405,7 @@ <h4 class="modal-title">{{params.starred ? 'Starred Layouts' : 'Saved Layouts'}}
</svg>
</script>
</div>
<div id='oneinchsquare' style='width: 1in; height: 1in; left: -100%; top: -100%; position: absolute;'></div> <!-- just a 1 inch div to measure DPI, borrowed from http://www.infobyip.com/detectmonitordpi.php -->
<div id='summary_print'></div><!-- just a div to make the summary print work -->
</body>
</html>
41 changes: 32 additions & 9 deletions kb.js
View file
Open in desktop
Expand Up @@ -245,6 +245,29 @@
})
};

$scope.downloadLifeSize = function() { // some code adapted from http://www.infobyip.com/detectmonitordpi.php
//var devicePixelRatio = window.devicePixelRatio || 1;
//var dpi_x = document.getElementById('oneinchsquare').offsetWidth * devicePixelRatio;alert(dpi_x);
//var dpi_y = document.getElementById('oneinchsquare').offsetHeight * devicePixelRatio;
//var devicePixels = dpi_x + " x " + dpi_y; alert(devicePixels);

html2canvas($("#keyboard-bg"), {
useCORS: true,
onrendered: function(canvas) {
//var px = dpi_x / 72; // typically 96/72 == 1.3333333 ... this seems to work.
//var py = dpi_x / 72; // typically 96/72 == 1.3333333 ... this seems to work.
var px = 96 / 72; // typically 96/72 == 1.3333333 ... this seems to work.
var py = 96 / 72; // typically 96/72 == 1.3333333 ... this seems to work.
var thmwidth = canvas.width * px;
var thmheight = canvas.height * py;
var thm = getResizedCanvas(canvas,thmwidth,thmheight,'');
thm.toBlob(function(blob) {
saveAs(blob, "keyboard-lifesize.png");
});
}
})
};

$scope.downloadJson = function() {
var data = angular.toJson($serial.serialize($scope.keyboard), true /*pretty*/);
var blob = new Blob([data], {type:"application/json"});
Expand Down Expand Up @@ -366,15 +389,15 @@

var align = { hmask:0x0f, hcenter:0x00, left:0x01, right:0x02, vmask:0xf0, vcenter:0x00, top:0x10, bottom:0x20, center:0x00, };
$scope.alignLegendsButtons = [
{ label: "&#8598;", flags: align.left | align.top },
{ label: "&#8593;", flags: align.hcenter | align.top },
{ label: "&#8599;", flags: align.right | align.top },
{ label: "&#8592;", flags: align.left | align.vcenter },
{ label: "&#9679;", flags: align.hcenter | align.vcenter },
{ label: "&#8594;", flags: align.right | align.vcenter },
{ label: "&#8601;", flags: align.left | align.bottom },
{ label: "&#8595;", flags: align.hcenter | align.bottom },
{ label: "&#8600;", flags: align.right | align.bottom },
{ label: "<i class='kb kb-Arrows-Up-Left'></i>", flags: align.left | align.top },
{ label: "<i class='kb kb-Arrows-Up'></i>", flags: align.right | align.top },
{ label: "<i class='kb kb-Arrows-Up-Right'></i>", flags: align.right | align.top },
{ label: "<i class='kb kb-Arrows-Left'></i>", flags: align.left | align.vcenter },
{ label: "<i class='kb kb-Multimedia-Record'></i>", flags: align.hcenter | align.vcenter },
{ label: "<i class='kb kb-Arrows-Right'></i>", flags: align.right | align.vcenter },
{ label: "<i class='kb kb-Arrows-Down-Left'></i>", flags: align.left | align.bottom },
{ label: "<i class='kb kb-Arrows-Down'></i>", flags: align.right | align.bottom },
{ label: "<i class='kb kb-Arrows-Down-Right'></i>", flags: align.right | align.bottom },
];

function moveLabel(key, from, to) {
Expand Down
8 changes: 8 additions & 0 deletions kbd-webfont.css
View file
Open in desktop
Expand Up @@ -613,6 +613,14 @@
content: "\e850";
}

.kb-Arrows-Down-Left:before {
content: "\e871";
}

.kb-Arrows-Down-Right:before {
content: "\e872";
}

.kb-Arrows-Up-Left:before {
content: "\e851";
}
Expand Down