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

✨ Add "pretty" style and "colored border" option #269

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

✨ Add "pretty" style and "colored border" option #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83d8a3d
Add pretty style and colored border option
optozorax Sep 28, 2019
e71e1ba
Add coloredBorder to saving
optozorax Sep 28, 2019
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
17 changes: 14 additions & 3 deletions kb.html
View file
Open in desktop
Expand Up @@ -541,6 +541,7 @@
<kbd-multi-check field="stepped" kbd-disable="multi.decal" hint-text="Specify whether the selected keys are 'stepped', i.e., part of the key is at a lower height than the rest. The secondary 'width' indicates the width of the stepped part.">Stepped</kbd-multi-check>
<kbd-multi-check field="nub" kbd-disable="multi.decal" hint-text="Specifies that the selected keys are 'homing' keys, which help the user find the home-row by touch alone.">Homing</kbd-multi-check>
<kbd-multi-check field="decal" hint-text="Specifies that the selected keys are to be treated as 'decals', i.e., purely decorative additions to the layout.">Decal</kbd-multi-check>
<kbd-multi-check field="coloredBorder" hint-text="With this option color of border calculated from color of keycap.">Colored Border</kbd-multi-check>
</div>
</div>
</div>
Expand Down Expand Up @@ -1213,12 +1214,18 @@ <h4 class="modal-title">{{params.starred ? 'Starred Layouts' : 'Saved Layouts'}}
<div style="left: {{=parms.outercapx}}px; top: {{=parms.outercapy}}px;
width: {{=parms.outercapwidth}}px; height: {{=parms.outercapheight}}px;
border-width: {{=sizes.strokeWidth}}px; border-radius: {{=sizes.roundOuter}}px;
{{? key.coloredBorder }}
border-color: {{=parms.borderColor}};
{{?}}
background-color: {{=parms.darkColor}};"
class="keyborder"></div>
{{? parms.jShaped}}
<div style="left: {{=parms.outercapx2}}px; top: {{=parms.outercapy2}}px;
width: {{=parms.outercapwidth2}}px; height: {{=parms.outercapheight2}}px;
border-width: {{=sizes.strokeWidth}}px; border-radius: {{=sizes.roundOuter}}px;
border-width: {{=sizes.strokeWidth}}px; border-radius: {{=sizes.roundOuter}}px;
{{? key.coloredBorder }}
border-color: {{=parms.borderColor}};
{{?}}
background-color: {{=parms.darkColor}};"
class="keyborder"></div>
<div style="left: {{=parms.outercapx + sizes.strokeWidth}}px; top: {{=parms.outercapy + sizes.strokeWidth}}px;
Expand All @@ -1232,14 +1239,18 @@ <h4 class="modal-title">{{params.starred ? 'Starred Layouts' : 'Saved Layouts'}}
{{? !key.decal}}
<div style="left: {{=parms.innercapx}}px; top: {{=parms.innercapy}}px;
width: {{=parms.innercapwidth}}px; height: {{=parms.innercapheight}}px;
border-style: solid; border-width: {{=sizes.strokeWidth}}px; border-color: rgba(0,0,0,0.1);
{{? !parms.disableKeytopBorder }}
border-style: solid; border-width: {{=sizes.strokeWidth}}px; border-color: rgba(0,0,0,0.1);
{{?}}
background-color: {{=parms.lightColor}};
border-radius: {{=sizes.roundInner}}px;"
class="keytop"></div>
{{? parms.jShaped && !key.stepped }}
<div style="left: {{=parms.innercapx2}}px; top: {{=parms.innercapy2}}px;
width: {{=parms.innercapwidth2}}px; height: {{=parms.innercapheight2}}px;
border-style: solid; border-width: {{=sizes.strokeWidth}}px; border-color: rgba(0,0,0,0.1); border-radius: {{=sizes.roundInner}}px;
{{? !parms.disableKeytopBorder }}
border-style: solid; border-width: {{=sizes.strokeWidth}}px; border-color: rgba(0,0,0,0.1); border-radius: {{=sizes.roundInner}}px;
{{?}}
background-color: {{=parms.lightColor}};
background-position: {{=Math.min(parms.innercapx-parms.innercapx2,0)}}px {{=Math.min(parms.innercapy-parms.innercapy2,0)}}px;
background-size: {{=Math.max(parms.innercapwidth,parms.innercapwidth2)}}px {{=Math.max(parms.innercapheight,parms.innercapheight2)}}px;"
Expand Down
1 change: 1 addition & 0 deletions kb.js
View file
Open in desktop
Expand Up @@ -844,6 +844,7 @@
},
nub : function() { if(!key.decal) key[prop] = value; },
ghost : function() { if(!key.decal) key[prop] = value; },
coloredBorder : function() { key[prop] = value; },
decal : function() { key[prop] = value; key.x2 = key.y2 = 0; key.width2 = key.width; key.height2 = key.height; key.nub = key.stepped = key.ghost = false; },
rotation_angle : function() { key.rotation_angle = value; key.rotation_x = $scope.multi.rotation_x; key.rotation_y = $scope.multi.rotation_y; },
sm : function() { if(value===$scope.meta.switchMount) value=''; if(value != key.sm) { key.sm = value; key.sb = key.st = ''; } },
Expand Down
24 changes: 15 additions & 9 deletions render.js
View file
Open in desktop
Expand Up @@ -9,16 +9,19 @@ var $renderKey = (typeof(exports) !== 'undefined') ? exports : {};
// - padding == distance between text & edge of keycap
// - strokeWidth == thickness of the outline strokes
// - roundInner/roundOuter == corner roundness for inner/outer borders
// - colorCoef == coefficient of color lightning between .keycap and .keytop
// - disableKeytopBorder == if defined and true, then keytop has no border
var unitSizes = {
px : {
unit : 54,
strokeWidth: 1,
"" : { profile: "" , keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3 },
"DCS" : { profile: "DCS", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3 },
"DSA" : { profile: "DSA", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 0, bevelOffsetBottom: 0, padding: 3, roundOuter: 5, roundInner: 8 },
"SA" : { profile: "SA", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 2, bevelOffsetBottom: 2, padding: 3, roundOuter: 5, roundInner: 5 },
"CHICKLET" : { profile: "CHICKLET", keySpacing: 3, bevelMargin: 1, bevelOffsetTop: 0, bevelOffsetBottom: 2, padding: 4, roundOuter: 4, roundInner: 4 },
"FLAT" : { profile: "FLAT" , keySpacing: 1, bevelMargin: 1, bevelOffsetTop: 0, bevelOffsetBottom: 0, padding: 4, roundOuter: 5, roundInner: 3 },
"" : { profile: "" , keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3, colorCoef: 1.2 },
"DCS" : { profile: "DCS", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3, colorCoef: 1.2 },
"DSA" : { profile: "DSA", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 0, bevelOffsetBottom: 0, padding: 3, roundOuter: 5, roundInner: 8, colorCoef: 1.2 },
"SA" : { profile: "SA", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 2, bevelOffsetBottom: 2, padding: 3, roundOuter: 5, roundInner: 5, colorCoef: 1.2 },
"CHICKLET" : { profile: "CHICKLET", keySpacing: 3, bevelMargin: 1, bevelOffsetTop: 0, bevelOffsetBottom: 2, padding: 4, roundOuter: 4, roundInner: 4, colorCoef: 1.2 },
"FLAT" : { profile: "FLAT" , keySpacing: 1, bevelMargin: 1, bevelOffsetTop: 0, bevelOffsetBottom: 0, padding: 4, roundOuter: 5, roundInner: 3, colorCoef: 1.2 },
"PRETTY" : { profile: "PRETTY" , keySpacing: 0, bevelMargin: 5, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3, colorCoef: 1.15, disableKeytopBorder: true },
},
mm : {
unit: 19.05,
Expand All @@ -29,10 +32,11 @@ var $renderKey = (typeof(exports) !== 'undefined') ? exports : {};
"SA" : { profile: "SA", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
"CHICKLET" : { profile: "CHICKLET", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
"FLAT" : { profile: "FLAT" , keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
"PRETTY" : { profile: "PRETTY" , keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
}
};
["px","mm"].forEach(function(unit) {
["","DCS","DSA","SA","CHICKLET","FLAT"].forEach(function(profile) {
["","DCS","DSA","SA","CHICKLET","FLAT","PRETTY"].forEach(function(profile) {
unitSizes[unit][profile].unit = unitSizes[unit].unit;
unitSizes[unit][profile].strokeWidth = unitSizes[unit].strokeWidth;
});
Expand All @@ -47,7 +51,7 @@ var $renderKey = (typeof(exports) !== 'undefined') ? exports : {};
}

function getProfile(key) {
return (/\b(SA|DSA|DCS|OEM|CHICKLET|FLAT)\b/.exec(key.profile) || [""])[0];
return (/\b(SA|DSA|DCS|OEM|CHICKLET|FLAT|PRETTY)\b/.exec(key.profile) || [""])[0];
}

function getRenderParms(key, sizes) {
Expand Down Expand Up @@ -98,7 +102,9 @@ var $renderKey = (typeof(exports) !== 'undefined') ? exports : {};
parms.textcapy = parms.innercapy + sizes.padding;

parms.darkColor = key.color;
parms.lightColor = lightenColor($color.hex(key.color), 1.2).hex();
parms.lightColor = lightenColor($color.hex(key.color), sizes.colorCoef).hex();
parms.borderColor = lightenColor($color.hex(key.color), 0.90).hex();
parms.disableKeytopBorder = sizes.disableKeytopBorder === true;

// Rotation matrix about the origin
parms.origin_x = sizes.unit * key.rotation_x;
Expand Down
3 changes: 3 additions & 0 deletions serial.js
View file
Open in desktop
Expand Up @@ -107,6 +107,7 @@ var $serial = (typeof(exports) !== 'undefined') ? exports : {};
default: { textColor: "#000000", textSize: 3 }, // label defaults
color: "#cccccc", profile: "", nub: false, // cap appearance
ghost: false, stepped: false, decal: false, // miscellaneous options
coloredBorder: false, // miscellaneous options
sm: "", sb:"", st:"" // switch
};

Expand Down Expand Up @@ -233,6 +234,7 @@ var $serial = (typeof(exports) !== 'undefined') ? exports : {};
}
current.textColor = serializeProp(props, "t", ordered.textColor.join("\n").trimEnd(), current.textColor);
current.ghost = serializeProp(props, "g", key.ghost, current.ghost);
current.coloredBorder = serializeProp(props, "cb", key.coloredBorder, current.coloredBorder);
current.profile = serializeProp(props, "p", key.profile, current.profile);
current.sm = serializeProp(props, "sm", key.sm, current.sm);
current.sb = serializeProp(props, "sb", key.sb, current.sb);
Expand Down Expand Up @@ -355,6 +357,7 @@ var $serial = (typeof(exports) !== 'undefined') ? exports : {};
if(key.l) { current.stepped = key.l; }
if(key.d) { current.decal = key.d; }
if(key.g != null) { current.ghost = key.g; }
if(key.cb != null) { current.coloredBorder = key.cb; }
if(key.sm) { current.sm = key.sm; }
if(key.sb) { current.sb = key.sb; }
if(key.st) { current.st = key.st; }
Expand Down