Archives
/
keyboard-layout-editor
mirror of https://github.com/ijprest/keyboard-layout-editor
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rejiggered the background-image dropdown & data

Browse Source 
-- Also auto-calculating the keyboard width
pull/110/head
Ian Prest 9 years ago
parent 54fda446cd
commit 354377f559
4 changed files with 246 additions and 238 deletions
Show Stats Download Patch File Download Diff File

233
backgrounds.json
Unescape Escape View File

@ -1,107 +1,128 @@
{"backgrounds" : [
{ {
"wood" : { "category": "Carbon fibre", "style" : "background: url('/bg/carbonfibre/carbon-slice.jpg'); color: #fff;",
"Bamboo" : "bg/wood/bamboo.jpg", "content" : [
"Bamboo dark" : "bg/wood/bamboo-dark.jpg", { "name": "Carbon fibre 1", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1879.png');" },
"Birch" : "bg/wood/birch.jpg", { "name": "Carbon fibre 2", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1874.png');" },
"Birch European white" : "bg/wood/birch-european-white.jpg", { "name": "Carbon fibre 3", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1869.png');" },
"Birch yellow" : "bg/wood/birch-yellow.jpg", { "name": "Carbon fibre 4", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1873.png');" },
"Cherry" : "bg/wood/cherry.jpg", { "name": "Carbon fibre 5", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1876.jpg');" },
"Chestnut American" : "bg/wood/chestnut-american.jpg", { "name": "Carbon fibre 6", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1882.jpg');" },
"Ebony Macassar" : "bg/wood/ebony-macassar.jpg", { "name": "Carbon fibre 7", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1877.jpg');" }
"Fir white" : "bg/wood/fir-white.jpg", ]
"Maple orange" : "bg/wood/maple-orange.jpg", },
"Maple yellow" : "bg/wood/maple-yellow.jpg", {
"Mahogany African" : "bg/wood/mahogany-african.jpg", "category": "Leather", "style" : "background: url('/bg/leather/leather-slice.jpg'); color: #fff;",
"Mahogany Red" : "bg/wood/Red_Mahogany_Wood.jpg", "content" : [
"Moringa" : "bg/wood/moringa.jpg", { "name": "Black", "style" : "background-image: url('/bg/leather/black.jpg');" },
"Oak" : "bg/wood/oak.jpg", { "name": "Black storm", "style" : "background-image: url('/bg/leather/leather_texture1051.jpg');" },
"Pine Oregon" : "bg/wood/pine-oregon.jpg", { "name": "Camel", "style" : "background-image: url('/bg/leather/leather_texture4327.jpg');" },
"Sandalwood African" : "bg/wood/sandalwood-african.jpg", { "name": "Brown", "style" : "background-image: url('/bg/leather/brown.jpg');" },
"Teak African" : "bg/wood/teak-african.jpg", { "name": "Brown oxblood", "style" : "background-image: url('/bg/leather/leather_texture4337.jpg');" },
"Teak golden" : "bg/wood/teak-golden.jpg", { "name": "Brown shiny", "style" : "background-image: url('/bg/leather/leather_texture404.jpg');" },
"Walnut" : "bg/wood/walnut.jpg" { "name": "Brown suede", "style" : "background-image: url('/bg/leather/leather_texture4315.jpg');" },
}, { "name": "Navy", "style" : "background-image: url('/bg/leather/leather_texture4326.jpg');" },
"metal" : { { "name": "Orange", "style" : "background-image: url('/bg/leather/leather_texture4329.jpg');" },
"Aluminium brushed" : "bg/metal/aluminum_texture1642.jpg", { "name": "Red fire", "style" : "background-image: url('/bg/leather/leather_texture394.jpg');" },
"Aluminium brushed black" : "bg/metal/aluminum_texture1644.jpg", { "name": "White", "style" : "background-image: url('/bg/leather/leather_texture4378.jpg');" }
"Aluminium diagonal light" : "bg/metal/aluminum_texture1645.jpg", ]
"Aluminium brassed" : "bg/metal/aluminum_texture1649.jpg", },
"Aluminium pattern" : "bg/metal/aluminum_texture1735.jpg", {
"Aluminium brushed wavy" : "bg/metal/aluminum_texture1738.jpg", "category": "Marble", "style" : "background: url('/bg/marble/marble-slice.jpg'); color: #fff;",
"Aluminium diagonal dark" : "bg/metal/aluminum_texture1784.jpg", "content" : [
"Steel brushed light" : "bg/metal/iron_texture1744.jpg", { "name": "Marble beige", "style" : "background-image: url('/bg/marble/marble_texture4653.jpg');" },
"Steel brushed dark" : "bg/metal/iron_texture1745.jpg", { "name": "Marble black", "style" : "background-image: url('/bg/marble/marble_texture4510.jpg');" },
"Steel brushed wavy" : "bg/metal/iron_texture61.jpg", { "name": "Marble brown", "style" : "background-image: url('/bg/marble/marble_texture4512.jpg');" },
"Steel brushed horizontal" : "bg/metal/iron_texture66.jpg", { "name": "Marble green", "style" : "background-image: url('/bg/marble/marble_texture1809.jpg');" },
"Titanium wavy" : "bg/metal/titanium_texture1752.jpg" { "name": "Marble grey", "style" : "background-image: url('/bg/marble/marble_texture4515.jpg');" },
}, { "name": "Marble navy", "style" : "background-image: url('/bg/marble/marble_texture4511.jpg');" },
"leather" : { { "name": "Marble rose", "style" : "background-image: url('/bg/marble/marble_texture1820.jpg');" },
"Black" : "bg/leather/black.jpg", { "name": "Marble Prussian blue", "style" : "background-image: url('/bg/marble/marble_texture4509.jpg');" },
"Black storm" : "bg/leather/leather_texture1051.jpg", { "name": "Marble red deep", "style" : "background-image: url('/bg/marble/marble_texture4496.jpg');" },
"Camel" : "bg/leather/leather_texture4327.jpg", { "name": "Marble violet", "style" : "background-image: url('/bg/marble/marble_texture4617.jpg');" }
"Brown" : "bg/leather/brown.jpg", ]
"Brown oxblood" : "bg/leather/leather_texture4337.jpg", },
"Brown shiny" : "bg/leather/leather_texture404.jpg", {
"Brown suede" : "bg/leather/leather_texture4315.jpg", "category": "Metal", "style" : "background: url('/bg/metal/metal-slice.jpg'); color: #fff;",
"Navy" : "bg/leather/leather_texture4326.jpg", "content" : [
"Orange" : "bg/leather/leather_texture4329.jpg", { "name": "Aluminium brushed", "style" : "background-image: url('/bg/metal/aluminum_texture1642.jpg');" },
"Red fire" : "bg/leather/leather_texture394.jpg", { "name": "Aluminium brushed black", "style" : "background-image: url('/bg/metal/aluminum_texture1644.jpg');" },
"White" : "bg/leather/leather_texture4378.jpg" { "name": "Aluminium diagonal light", "style" : "background-image: url('/bg/metal/aluminum_texture1645.jpg');" },
{ "name": "Aluminium brassed", "style" : "background-image: url('/bg/metal/aluminum_texture1649.jpg');" },
}, { "name": "Aluminium pattern", "style" : "background-image: url('/bg/metal/aluminum_texture1735.jpg');" },
"carbonfibre" : { { "name": "Aluminium brushed wavy", "style" : "background-image: url('/bg/metal/aluminum_texture1738.jpg');" },
"Carbon fibre 3" : "bg/carbonfibre/carbon_texture1869.png", { "name": "Aluminium diagonal dark", "style" : "background-image: url('/bg/metal/aluminum_texture1784.jpg');" },
"Carbon fibre 4" : "bg/carbonfibre/carbon_texture1873.png", { "name": "Steel brushed light", "style" : "background-image: url('/bg/metal/iron_texture1744.jpg');" },
"Carbon fibre 2" : "bg/carbonfibre/carbon_texture1874.png", { "name": "Steel brushed dark", "style" : "background-image: url('/bg/metal/iron_texture1745.jpg');" },
"Carbon fibre 5" : "bg/carbonfibre/carbon_texture1876.jpg", { "name": "Steel brushed wavy", "style" : "background-image: url('/bg/metal/iron_texture61.jpg');" },
"Carbon fibre 7" : "bg/carbonfibre/carbon_texture1877.jpg", { "name": "Steel brushed horizontal", "style" : "background-image: url('/bg/metal/iron_texture66.jpg');" },
"Carbon fibre 1" : "bg/carbonfibre/carbon_texture1879.png", { "name": "Titanium wavy", "style" : "background-image: url('/bg/metal/titanium_texture1752.jpg');" }
"Carbon fibre 6" : "bg/carbonfibre/carbon_texture1882.jpg" ]
}, },
"marble" : { {
"Marble beige" : "bg/marble/marble_texture4653.jpg", "category": "Plastic ABS (whites)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;",
"Marble black" : "bg/marble/marble_texture4510.jpg", "content" : [
"Marble brown" : "bg/marble/marble_texture4512.jpg", { "name": "ABS WA", "style" : "background-image: url('/bg/plastic/abs-wa.jpg');" },
"Marble green" : "bg/marble/marble_texture1809.jpg", { "name": "ABS WAR", "style" : "background-image: url('/bg/plastic/abs-war.jpg');" },
"Marble grey" : "bg/marble/marble_texture4515.jpg", { "name": "ABS WBO", "style" : "background-image: url('/bg/plastic/abs-wbo.jpg');" },
"Marble navy" : "bg/marble/marble_texture4511.jpg", { "name": "ABS WCK", "style" : "background-image: url('/bg/plastic/abs-wck.jpg');" },
"Marble rose" : "bg/marble/marble_texture1820.jpg", { "name": "ABS WEA", "style" : "background-image: url('/bg/plastic/abs-wea.jpg');" },
"Marble Prussian blue" : "bg/marble/marble_texture4509.jpg", { "name": "ABS WFK", "style" : "background-image: url('/bg/plastic/abs-wfk.jpg');" },
"Marble red deep" : "bg/marble/marble_texture4496.jpg", { "name": "ABS WFM", "style" : "background-image: url('/bg/plastic/abs-wfm.jpg');" },
"Marble violet" : "bg/marble/marble_texture4617.jpg" { "name": "ABS WFO", "style" : "background-image: url('/bg/plastic/abs-wfo.jpg');" },
}, { "name": "ABS WQ", "style" : "background-image: url('/bg/plastic/abs-wq.jpg');" },
"plasticPBTbrown_black" : { { "name": "ABS WV", "style" : "background-image: url('/bg/plastic/abs-wv.jpg');" },
"PBT Black" : "bg/plastic/pbt-black.png", { "name": "ABS WW", "style" : "background-image: url('/bg/plastic/abs-ww.jpg');" }
"PBT UP" : "bg/plastic/pbt-up.png", ]
"PBT TGJ" : "bg/plastic/pbt-tgj.png", },
"PBT TT" : "bg/plastic/pbt-tt.png" {
}, "category": "Plastic PBT (browns & blacks)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;",
"plasticPBTwhite" : { "content" : [
"PBT WAN" : "bg/plastic/pbt-wan.png", { "name": "PBT Black", "style" : "background-image: url('/bg/plastic/pbt-black.png');" },
"PBT WAS" : "bg/plastic/pbt-was.png", { "name": "PBT UP", "style" : "background-image: url('/bg/plastic/pbt-up.png');" },
"PBT WAT" : "bg/plastic/pbt-wat.png", { "name": "PBT TGJ", "style" : "background-image: url('/bg/plastic/pbt-tgj.png');" },
"PBT WBK" : "bg/plastic/pbt-wbk.png", { "name": "PBT TT", "style" : "background-image: url('/bg/plastic/pbt-tt.png');" }
"PBT WBR" : "bg/plastic/pbt-wbr.png", ]
"PBT WCS" : "bg/plastic/pbt-wcs.png", },
"PBT WCV" : "bg/plastic/pbt-wcv.png", {
"PBT WCX" : "bg/plastic/pbt-wcx.png", "category": "Plastic PBT (whites)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;",
"PBT WDG" : "bg/plastic/pbt-wdg.png", "content" : [
"PBT WFJ" : "bg/plastic/pbt-wfj.png", { "name": "PBT WAN", "style" : "background-image: url('/bg/plastic/pbt-wan.png');" },
"PBT WFN" : "bg/plastic/pbt-wfn.png" { "name": "PBT WAS", "style" : "background-image: url('/bg/plastic/pbt-was.png');" },
}, { "name": "PBT WAT", "style" : "background-image: url('/bg/plastic/pbt-wat.png');" },
"plasticABSwhite" : { { "name": "PBT WBK", "style" : "background-image: url('/bg/plastic/pbt-wbk.png');" },
"ABS WA" : "bg/plastic/abs-wa.jpg", { "name": "PBT WBR", "style" : "background-image: url('/bg/plastic/pbt-wbr.png');" },
"ABS WAR" : "bg/plastic/abs-war.jpg", { "name": "PBT WCS", "style" : "background-image: url('/bg/plastic/pbt-wcs.png');" },
"ABS WBO" : "bg/plastic/abs-wbo.jpg", { "name": "PBT WCV", "style" : "background-image: url('/bg/plastic/pbt-wcv.png');" },
"ABS WCK" : "bg/plastic/abs-wck.jpg", { "name": "PBT WCX", "style" : "background-image: url('/bg/plastic/pbt-wcx.png');" },
"ABS WEA" : "bg/plastic/abs-wea.jpg", { "name": "PBT WDG", "style" : "background-image: url('/bg/plastic/pbt-wdg.png');" },
"ABS WFK" : "bg/plastic/abs-wfk.jpg", { "name": "PBT WFJ", "style" : "background-image: url('/bg/plastic/pbt-wfj.png');" },
"ABS WFM" : "bg/plastic/abs-wfm.jpg", { "name": "PBT WFN", "style" : "background-image: url('/bg/plastic/pbt-wfn.png');" }
"ABS WFO" : "bg/plastic/abs-wfo.jpg", ]
"ABS WQ" : "bg/plastic/abs-wq.jpg", },
"ABS WV" : "bg/plastic/abs-wv.jpg", {
"ABS WW" : "bg/plastic/abs-ww.jpg" "category": "Wood", "style": "background-image: url('/bg/wood/wood-slice.jpg'); color: #000;",
} "content" : [
{ "name": "Bamboo", "style" : "background-image: url('/bg/wood/bamboo.jpg');" },
{ "name": "Bamboo dark", "style" : "background-image: url('/bg/wood/bamboo-dark.jpg');" },
{ "name": "Birch", "style" : "background-image: url('/bg/wood/birch.jpg');" },
{ "name": "Birch European white", "style" : "background-image: url('/bg/wood/birch-european-white.jpg');" },
{ "name": "Birch yellow", "style" : "background-image: url('/bg/wood/birch-yellow.jpg');" },
{ "name": "Cherry", "style" : "background-image: url('/bg/wood/cherry.jpg');" },
{ "name": "Chestnut American", "style" : "background-image: url('/bg/wood/chestnut-american.jpg');" },
{ "name": "Ebony Macassar", "style" : "background-image: url('/bg/wood/ebony-macassar.jpg');" },
{ "name": "Fir white", "style" : "background-image: url('/bg/wood/fir-white.jpg');" },
{ "name": "Maple orange", "style" : "background-image: url('/bg/wood/maple-orange.jpg');" },
{ "name": "Maple yellow", "style" : "background-image: url('/bg/wood/maple-yellow.jpg');" },
{ "name": "Mahogany African", "style" : "background-image: url('/bg/wood/mahogany-african.jpg');" },
{ "name": "Mahogany Red", "style" : "background-image: url('/bg/wood/Red_Mahogany_Wood.jpg');" },
{ "name": "Moringa", "style" : "background-image: url('/bg/wood/moringa.jpg');" },
{ "name": "Oak", "style" : "background-image: url('/bg/wood/oak.jpg');" },
{ "name": "Pine Oregon", "style" : "background-image: url('/bg/wood/pine-oregon.jpg');" },
{ "name": "Sandalwood African", "style" : "background-image: url('/bg/wood/sandalwood-african.jpg');" },
{ "name": "Teak African", "style" : "background-image: url('/bg/wood/teak-african.jpg');" },
{ "name": "Teak golden", "style" : "background-image: url('/bg/wood/teak-golden.jpg');" },
{ "name": "Walnut", "style" : "background-image: url('/bg/wood/walnut.jpg');" }
]
} }
} ]

76
kb.css
Unescape Escape View File

@ -46,17 +46,22 @@ html, body {
/* The keyboard background */ /* The keyboard background */
#keyboard { #keyboard {
padding: 9px; padding: 4px;
position: relative; border-radius: 3px;
margin-top: 10px;
margin-bottom: 10px;
border: dashed 1px #ddd;
}
#keyboard #keyboard-bg {
position: inherit;
border: solid 1px #ddd; border: solid 1px #ddd;
padding: 9px;
box-sizing: content-box;
border-radius: 6px; border-radius: 6px;
background-color: #eee; min-width: 56px;
min-height: 56px; min-height: 56px;
box-sizing: content-box;
margin-top: 10px;
margin-bottom: 10px;
} }
#keyboard div { #keyboard-bg div {
position: absolute; position: absolute;
border-color: black; border-color: black;
box-sizing: border-box; box-sizing: border-box;
@ -270,39 +275,32 @@ for i in (1..9) {
max-height: 1.25em; max-height: 1.25em;
} }
/* make the background dropdown list headers stand out a bit */ /* nested dropdown menu lists; see bootstrap.css */
.bg-dropdown-header { .dropdown-menu ul {
background-color: #ccc; list-style: none;
font-size: 1.618em; margin: 2px 0 0;
text-align: center; padding: 5px 0;
} }
.dropdown-menu ul > li > a {
.bg-dropdown-header-wood { display: block;
background: url('../bg/wood/wood-slice.jpg'); padding: 3px 20px;
color: #000; clear: both;
} font-weight: normal;
line-height: 1.42857143;
.bg-dropdown-header-metal { color: #333;
background: url('../bg/metal/metal-slice.jpg'); white-space: nowrap;
color: #fff;
}
.bg-dropdown-header-marble {
background: url('../bg/marble/marble-slice.jpg');
color: #fff;
} }
.dropdown-menu ul > li > a:hover,
.bg-dropdown-header-plastic { .dropdown-menu ul > li > a:focus {
background: url('../bg/plastic/plastic-slice.jpg'); color: #262626;
color: #000; text-decoration: none;
background-color: #f5f5f5;
} }
/* button size between sm & xs; meant for inline forms */
.bg-dropdown-header-leather { .btn-sm-form,
background: url('../bg/leather/leather-slice.jpg'); .btn-group-sm-form > .btn {
color: #fff; padding: 3px 8px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
} }
.bg-dropdown-header-carbon {
background: url('../bg/carbonfibre/carbon-slice.jpg');
color: #fff;
}

153
kb.html
Unescape Escape View File

@ -182,10 +182,7 @@ Nav Bar / Header
<!--*********************************************** <!--***********************************************
Main Keyboard Preview/Editor area Main Keyboard Preview/Editor area
************************************************--> ************************************************-->
<div id="keyboard" ng-cloak <div id="keyboard" ng-cloak tabindex="0"
tabindex="0"
ng-style="{height: kbHeight + 'px', 'background-color': keyboard.meta.backcolor, 'background-image':'url(' + keyboard.meta.backgroundimage + ')','width': keyboard.meta.backgroundimagewidth + 'px',
'border-radius': keyboard.meta.backgroundradii }"
ui-keydown="{ left:'moveKeys(-moveStep,0,$event)', ui-keydown="{ left:'moveKeys(-moveStep,0,$event)',
right:'moveKeys(moveStep,0,$event)', right:'moveKeys(moveStep,0,$event)',
up:'moveKeys(0,-moveStep,$event)', up:'moveKeys(0,-moveStep,$event)',
@ -218,17 +215,19 @@ Nav Bar / Header
ng-mousedown="selectClick($event)" ng-mousedown="selectClick($event)"
ngf-drop="true" ngf-change="uploadJson($files, $event)" ngf-drag-over-class="drag-over"> ngf-drop="true" ngf-change="uploadJson($files, $event)" ngf-drag-over-class="drag-over">
<div ng-repeat="key in keys()" <div id='keyboard-bg'
class="key {{key.profile}}" style="height:{{kbHeight}}px; width:{{kbWidth}}px; background-color:{{keyboard.meta.backcolor}}; border-radius: {{keyboard.meta.backgroundradii}}; {{keyboard.meta.background.style}}">
ng-mouseover="hoveredKey=key" <div ng-repeat="key in keys()"
ng-mouseleave="hoveredKey=null" class="key {{key.profile}}"
ng-class="{hover: hoveredKey==key, selected: selectedKeys.indexOf(key)>=0, HOMING:key.nub}" ng-mouseover="hoveredKey=key"
ng-bind-html="key.html"> ng-mouseleave="hoveredKey=null"
ng-class="{hover: hoveredKey==key, selected: selectedKeys.indexOf(key)>=0, HOMING:key.nub}"
ng-bind-html="key.html">
</div>
</div> </div>
<div style="position:relative;line-height:1.2;" ng-style="{top:(kbHeight-26)+'px'}" <div style="line-height:1.2em; padding:3px 5px;" ng-hide="!keyboard.meta.name &amp;&amp; !keyboard.meta.author">
ng-hide="!keyboard.meta.name &amp;&amp; !keyboard.meta.author"> <a href="#" ng-click="previewNotes()">{{keyboard.meta.name}}<br/><i>{{keyboard.meta.author}}</i></a>
<a href="#" ng-click="previewNotes()">{{keyboard.meta.name}}<br/><i>{{keyboard.meta.author}}</i></a>
</div> </div>
<div style='clear:both'></div> <div style='clear:both'></div>
{{calcKbHeight()}} {{calcKbHeight()}}
@ -517,8 +516,8 @@ Nav Bar / Header
</ul> </ul>
</div> </div>
<div class="col-md-12 col-lg-12" style="padding:4px 0px;"> <div class="col-md-12 col-lg-12" style="padding:4px 0px;">
<input id="picker-html" class="form-control input-sm" type='text' <input id="picker-html" class="form-control input-sm" type='text'
ng-model="pickerSelection.html" placeholder="No glyph selected" ng-model="pickerSelection.html" placeholder="No glyph selected"
onClick="this.select();" readonly> onClick="this.select();" readonly>
</div> </div>
<alert type="warning" style="margin-top:40px;" ng-hide="pickerAlertHidden" close="pickerAlertHidden = true"> <alert type="warning" style="margin-top:40px;" ng-hide="pickerAlertHidden" close="pickerAlertHidden = true">
@ -531,63 +530,47 @@ Nav Bar / Header
<div id="kbdproperties" ng-class="{hidden:selTab!=1}"> <div id="kbdproperties" ng-class="{hidden:selTab!=1}">
<form class="form-horizontal col-sm-12 col-md-12 col-lg-12"> <form class="form-horizontal col-sm-12 col-md-12 col-lg-12">
<!-- Keyboard Color --> <!-- Keyboard Background -->
<div class="form-group form-group-sm"> <div class="form-group form-group-sm">
<label class="control-label col-md-2 col-lg-1 text-nowrap" for="kbdcoloreditor">Keyboard Color:</label> <label class="control-label col-md-2 col-lg-1 text-nowrap" for="kbdcoloreditor">Case Background:</label>
<div class="col-md-10 col-lg-11"> <div class="col-md-10 col-lg-11">
<div class="form-inline"> <div class="form-inline">
<!-- Color -->
<kbd-color-picker picker-id="kbdcoloreditor" <kbd-color-picker picker-id="kbdcoloreditor"
ng-model="meta.backcolor" ng-model="meta.backcolor"
ng-change="updateMeta('backcolor')" ng-change="updateMeta('backcolor')"
ng-blur="validateMeta('backcolor')" ng-blur="validateMeta('backcolor')"
hint-text="Specify the background color for the keyboard."></kbd-color-picker> hint-text="Specify the background color for the keyboard."></kbd-color-picker>
</div>
</div>
</div>
<!-- Keyboard background image src-->
<div class="form-group form-group-sm">
<label class="control-label col-md-2 col-lg-1 text-nowrap" for="kbdbackgroundimageeditor">Case Image:</label>
<div class="col-md-1 col-lg-1 form-outdent hint--top hint--rounded" <!-- Background image-->
data-hint="Specify the background image for this keyboard layout."> <div class="form-group form-group-sm">
<select id="kbdbackgroundimageeditor" class="form-control input-sm dropdown" <div class="input-group input-group-sm hint--top hint--rounded" data-hint="Specify the background texture for the keyboard.">
ng-model="meta.backgroundimage" <div class="btn-group btn-group-sm-form" dropdown>
ng-change="updateMeta('backgroundimage')" <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>{{meta.background ? meta.background.name : 'No Texture'}} <b class="caret"></b></button>
ng-blur="validateMeta('backgroundimage')"> <ul class="dropdown-menu" role="menu" style="max-height:40vh;overflow-y:scroll;">
<option value="">None</option> <li><a ng-click='setBackground(null)'>None</a></li>
<option value="" class="bg-dropdown-header bg-dropdown-header-carbon">Carbon fibre</option> <li class="divider"></li>
<option ng-repeat="(k,v) in backgrounds.carbonfibre" value="{{v}}">{{k}}</option> <li ng-repeat="category in backgrounds">
<option value="" class="bg-dropdown-header bg-dropdown-header-leather">Leather</option> <div class="dropdown-header" style="{{category.style}}">{{category.category}}:</div>
<option ng-repeat="(k,v) in backgrounds.leather" value="{{v}}">{{k}}</option> <ul class="menu">
<option value="" class="bg-dropdown-header bg-dropdown-header-marble">Marble</option> <li ng-repeat="bg in category.content"><a ng-click='setBackground(bg)'>{{bg.name}}</a></li>
<option ng-repeat="(k,v) in backgrounds.marble" value="{{v}}">{{k}}</option> </ul>
<option value="" class="bg-dropdown-header bg-dropdown-header-metal">Metal</option> </li>
<option ng-repeat="(k,v) in backgrounds.metal" value="{{v}}">{{k}}</option> </ul>
<option value="" class="bg-dropdown-header bg-dropdown-header-plastic">Plastic ABS 'white'</option> </div>
<option ng-repeat="(k,v) in backgrounds.plasticABSwhite" value="{{v}}">{{k}}</option> </div>
<option value="" class="bg-dropdown-header bg-dropdown-header-plastic">Plastic PBT 'brown_black'</option> </div>
<option ng-repeat="(k,v) in backgrounds.plasticPBTbrown_black" value="{{v}}">{{k}}</option> </div>
<option value="" class="bg-dropdown-header bg-dropdown-header-plastic">Plastic PBT 'white'</option>
<option ng-repeat="(k,v) in backgrounds.plasticPBTwhite" value="{{v}}">{{k}}</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-wood">Wood</option>
<option ng-repeat="(k,v) in backgrounds.wood" value="{{v}}">{{k}}</option>
</select>
</div> </div>
</div> </div>
<!-- Keyboard background image width--> <!-- Keyboard background image width-->
<div class="form-group form-group-sm"> <div class="form-group form-group-sm">
<label class="control-label col-md-2 col-lg-1 text-nowrap" for="kbdbackgroundimagewidtheditor">Case Width:</label> <label class="control-label col-md-2 col-lg-1 text-nowrap" for="kbdbackgroundimagewidtheditor">Case Width:</label>
<div class="col-md-1 col-lg-1 form-outdent hint--top hint--rounded" <div class="col-md-1 col-lg-1 form-outdent hint--top hint--rounded"
data-hint="Specify the width for the background image for this keyboard layout."> data-hint="Specify the width for the background image for this keyboard layout.">
<input id="kbdbackgroundimagewidtheditor" class="form-control input-sm" type='number' min="1" max="2000" step="1" <input id="kbdbackgroundimagewidtheditor" class="form-control input-sm" type='number' min="1" max="2000" step="1"
ng-model="meta.backgroundimagewidth" ng-model="meta.backgroundimagewidth"
ng-change="updateMeta('backgroundimagewidth')" ng-change="updateMeta('backgroundimagewidth')"
ng-blur="validateMeta('backgroundimagewidth')"> ng-blur="validateMeta('backgroundimagewidth')">
@ -608,7 +591,7 @@ Nav Bar / Header
<input id="kbdbackgroundradiieditor" class="form-control input-sm" type='text' <input id="kbdbackgroundradiieditor" class="form-control input-sm" type='text'
ng-model="meta.backgroundradii" ng-model="meta.backgroundradii"
ng-change="updateMeta('backgroundradii')" ng-change="updateMeta('backgroundradii')"
ng-blur="validateMeta('backgroundradii')"> ng-blur="validateMeta('backgroundradii')">
</div> </div>
</div> </div>
@ -1067,41 +1050,41 @@ DOT.js Templates
{{?}}> {{?}}>
<!-- Outer Border --> <!-- Outer Border -->
<rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}" <rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}"
width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}" width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}" class="outer border"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}" class="outer border"/>
{{? parms.jShaped }} {{? parms.jShaped }}
<rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}" <rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}"
width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}" width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}" class="outer border"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}" class="outer border"/>
{{?}} {{?}}
<!-- Outer Fill --> <!-- Outer Fill -->
<rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}" <rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}"
width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}" width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}"/>
{{? parms.jShaped }} {{? parms.jShaped }}
<rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}" <rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}"
width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}" width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}"/>
{{?}} {{?}}
{{? !key.ghost }} {{? !key.ghost }}
<!-- Inner Border --> <!-- Inner Border -->
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}" <rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}" class="inner border"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}" class="inner border"/>
{{? parms.jShaped && !key.stepped }} {{? parms.jShaped && !key.stepped }}
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}" <rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}" class="inner border"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}" class="inner border"/>
{{?}} {{?}}
<!-- Inner Fill --> <!-- Inner Fill -->
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}" <rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
{{? parms.jShaped && !key.stepped }} {{? parms.jShaped && !key.stepped }}
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}" <rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
{{?}} {{?}}
{{? sizes.profile !== "" }} {{? sizes.profile !== "" }}
@ -1110,7 +1093,7 @@ DOT.js Templates
{{ {{
/*much harder to do j-shaped keys in SVG*/ /*much harder to do j-shaped keys in SVG*/
theProfile = '_fill'+parms.index; theProfile = '_fill'+parms.index;
var rect = { var rect = {
left: Math.min(parms.innercapx, parms.innercapx2), left: Math.min(parms.innercapx, parms.innercapx2),
top: Math.min(parms.innercapy, parms.innercapy2), top: Math.min(parms.innercapy, parms.innercapy2),
right: Math.min(parms.innercapx+parms.innercapwidth, parms.innercapx2+parms.innercapwidth2), right: Math.min(parms.innercapx+parms.innercapwidth, parms.innercapx2+parms.innercapwidth2),
@ -1119,24 +1102,24 @@ DOT.js Templates
}} }}
{{? sizes.profile==="SA" || sizes.profile==="DSA" }} {{? sizes.profile==="SA" || sizes.profile==="DSA" }}
<radialGradient id="{{=theProfile}}" xlink:href="#{{=sizes.profile}}" gradientUnits="userSpaceOnUse" <radialGradient id="{{=theProfile}}" xlink:href="#{{=sizes.profile}}" gradientUnits="userSpaceOnUse"
cx="{{=(rect.left+rect.right)/2}}" cy="{{=(rect.top+rect.bottom)/2}}" cx="{{=(rect.left+rect.right)/2}}" cy="{{=(rect.top+rect.bottom)/2}}"
r="{{=Math.min(rect.right-rect.left, rect.bottom-rect.top)}}"/> r="{{=Math.min(rect.right-rect.left, rect.bottom-rect.top)}}"/>
{{??}} {{??}}
<linearGradient id="{{=theProfile}}" xlink:href="#{{=sizes.profile}}" gradientUnits="userSpaceOnUse" <linearGradient id="{{=theProfile}}" xlink:href="#{{=sizes.profile}}" gradientUnits="userSpaceOnUse"
x1="{{=rect.left}}" y1="{{=rect.top}}" x2="{{=rect.right}}" y2="{{=rect.top}}"/> x1="{{=rect.left}}" y1="{{=rect.top}}" x2="{{=rect.right}}" y2="{{=rect.top}}"/>
{{?}} {{?}}
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}" <rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}" <rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="url(#{{=theProfile}})"/> rx="{{=sizes.roundOuter}}" fill="url(#{{=theProfile}})"/>
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}" <rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/> rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
{{?}} {{?}}
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}" <rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}" width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="url(#{{=theProfile}})"/> rx="{{=sizes.roundOuter}}" fill="url(#{{=theProfile}})"/>
{{?}} {{?}}
{{?}} {{?}}
@ -1144,10 +1127,10 @@ DOT.js Templates
</script> </script>
<script type="text/ng-template" id="keyboard_svg"> <script type="text/ng-template" id="keyboard_svg">
<svg width='{{=parms.width+parms.margin*2+parms.padding*2}}{{=parms.units}}' <svg width='{{=parms.width+parms.margin*2+parms.padding*2}}{{=parms.units}}'
height='{{=parms.height+parms.margin*2+parms.padding*2}}{{=parms.units}}' height='{{=parms.height+parms.margin*2+parms.padding*2}}{{=parms.units}}'
viewBox='0 0 {{=parms.width+parms.margin*2+parms.padding*2}} {{=parms.height+parms.margin*2+parms.padding*2}}' viewBox='0 0 {{=parms.width+parms.margin*2+parms.padding*2}} {{=parms.height+parms.margin*2+parms.padding*2}}'
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
<style type='text/css'> <style type='text/css'>

22
kb.js
Unescape Escape View File

@ -274,11 +274,10 @@
}); });
// Known backgrounds // Known backgrounds
$scope.backgrounds = {}; //???? $scope.backgrounds = {};
$http.get('backgrounds.json').success(function(data) { $http.get('backgrounds.json').success(function(data) {
$scope.backgrounds = data.backgrounds; $scope.backgrounds = data;
}); });
// The currently selected palette & character-picker // The currently selected palette & character-picker
$scope.palette = {}; $scope.palette = {};
@ -311,13 +310,16 @@
// Helper to calculate the height of the keyboard layout; cached to improve performance. // Helper to calculate the height of the keyboard layout; cached to improve performance.
$scope.kbHeight = 0; $scope.kbHeight = 0;
$scope.calcKbHeight = function() { $scope.calcKbHeight = function() {
var bottom = 0; var right = 0, bottom = 0;
$scope.keys().forEach(function(key) { $scope.keys().forEach(function(key) {
right = Math.max(right, key.bbox.x2);
bottom = Math.max(bottom, key.bbox.y2); bottom = Math.max(bottom, key.bbox.y2);
}); });
if($scope.keyboard.meta.name || $scope.keyboard.meta.author) $scope.kbWidth = right;
bottom += 32;
$scope.kbHeight = bottom; $scope.kbHeight = bottom;
$scope.kbFullHeight = bottom;
if($scope.keyboard.meta.name || $scope.keyboard.meta.author)
$scope.kbFullHeight += 32;
}; };
function updateFromCss(css) { function updateFromCss(css) {
@ -608,6 +610,10 @@
}; };
$scope.validateMeta = function(prop) { $scope.validateMeta = function(prop) {
}; };
$scope.setBackground = function(bg) {
$scope.meta.background = bg;
$scope.updateMeta('background');
};
updateSerialized(); updateSerialized();
@ -1004,7 +1010,7 @@
doingMarqueeSelect = false; doingMarqueeSelect = false;
// Calculate the offset between #keyboard and the mouse-coordinates // Calculate the offset between #keyboard and the mouse-coordinates
var kbElem = $("#keyboard"); var kbElem = $("#keyboard-bg");
var kbPos = kbElem.position(); var kbPos = kbElem.position();
var offsetx = kbPos.left + parseInt(kbElem.css('padding-left'),10) + parseInt(kbElem.css('margin-left'),10); var offsetx = kbPos.left + parseInt(kbElem.css('padding-left'),10) + parseInt(kbElem.css('margin-left'),10);
var offsety = kbPos.top + parseInt(kbElem.css('padding-top'),10) + parseInt(kbElem.css('margin-top'),10); var offsety = kbPos.top + parseInt(kbElem.css('padding-top'),10) + parseInt(kbElem.css('margin-top'),10);

Write Preview
Loading…
Cancel
Save