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" : {
"Bamboo" : "bg/wood/bamboo.jpg",
"Bamboo dark" : "bg/wood/bamboo-dark.jpg",
"Birch" : "bg/wood/birch.jpg",
"Birch European white" : "bg/wood/birch-european-white.jpg",
"Birch yellow" : "bg/wood/birch-yellow.jpg",
"Cherry" : "bg/wood/cherry.jpg",
"Chestnut American" : "bg/wood/chestnut-american.jpg",
"Ebony Macassar" : "bg/wood/ebony-macassar.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",
"Mahogany Red" : "bg/wood/Red_Mahogany_Wood.jpg",
"Moringa" : "bg/wood/moringa.jpg",
"Oak" : "bg/wood/oak.jpg",
"Pine Oregon" : "bg/wood/pine-oregon.jpg",
"Sandalwood African" : "bg/wood/sandalwood-african.jpg",
"Teak African" : "bg/wood/teak-african.jpg",
"Teak golden" : "bg/wood/teak-golden.jpg",
"Walnut" : "bg/wood/walnut.jpg"
},
"metal" : {
"Aluminium brushed" : "bg/metal/aluminum_texture1642.jpg",
"Aluminium brushed black" : "bg/metal/aluminum_texture1644.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",
"Aluminium diagonal dark" : "bg/metal/aluminum_texture1784.jpg",
"Steel brushed light" : "bg/metal/iron_texture1744.jpg",
"Steel brushed dark" : "bg/metal/iron_texture1745.jpg",
"Steel brushed wavy" : "bg/metal/iron_texture61.jpg",
"Steel brushed horizontal" : "bg/metal/iron_texture66.jpg",
"Titanium wavy" : "bg/metal/titanium_texture1752.jpg"
},
"leather" : {
"Black" : "bg/leather/black.jpg",
"Black storm" : "bg/leather/leather_texture1051.jpg",
"Camel" : "bg/leather/leather_texture4327.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",
"Navy" : "bg/leather/leather_texture4326.jpg",
"Orange" : "bg/leather/leather_texture4329.jpg",
"Red fire" : "bg/leather/leather_texture394.jpg",
"White" : "bg/leather/leather_texture4378.jpg"
},
"carbonfibre" : {
"Carbon fibre 3" : "bg/carbonfibre/carbon_texture1869.png",
"Carbon fibre 4" : "bg/carbonfibre/carbon_texture1873.png",
"Carbon fibre 2" : "bg/carbonfibre/carbon_texture1874.png",
"Carbon fibre 5" : "bg/carbonfibre/carbon_texture1876.jpg",
"Carbon fibre 7" : "bg/carbonfibre/carbon_texture1877.jpg",
"Carbon fibre 1" : "bg/carbonfibre/carbon_texture1879.png",
"Carbon fibre 6" : "bg/carbonfibre/carbon_texture1882.jpg"
},
"marble" : {
"Marble beige" : "bg/marble/marble_texture4653.jpg",
"Marble black" : "bg/marble/marble_texture4510.jpg",
"Marble brown" : "bg/marble/marble_texture4512.jpg",
"Marble green" : "bg/marble/marble_texture1809.jpg",
"Marble grey" : "bg/marble/marble_texture4515.jpg",
"Marble navy" : "bg/marble/marble_texture4511.jpg",
"Marble rose" : "bg/marble/marble_texture1820.jpg",
"Marble Prussian blue" : "bg/marble/marble_texture4509.jpg",
"Marble red deep" : "bg/marble/marble_texture4496.jpg",
"Marble violet" : "bg/marble/marble_texture4617.jpg"
},
"plasticPBTbrown_black" : {
"PBT Black" : "bg/plastic/pbt-black.png",
"PBT UP" : "bg/plastic/pbt-up.png",
"PBT TGJ" : "bg/plastic/pbt-tgj.png",
"PBT TT" : "bg/plastic/pbt-tt.png"
},
"plasticPBTwhite" : {
"PBT WAN" : "bg/plastic/pbt-wan.png",
"PBT WAS" : "bg/plastic/pbt-was.png",
"PBT WAT" : "bg/plastic/pbt-wat.png",
"PBT WBK" : "bg/plastic/pbt-wbk.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",
"PBT WDG" : "bg/plastic/pbt-wdg.png",
"PBT WFJ" : "bg/plastic/pbt-wfj.png",
"PBT WFN" : "bg/plastic/pbt-wfn.png"
},
"plasticABSwhite" : {
"ABS WA" : "bg/plastic/abs-wa.jpg",
"ABS WAR" : "bg/plastic/abs-war.jpg",
"ABS WBO" : "bg/plastic/abs-wbo.jpg",
"ABS WCK" : "bg/plastic/abs-wck.jpg",
"ABS WEA" : "bg/plastic/abs-wea.jpg",
"ABS WFK" : "bg/plastic/abs-wfk.jpg",
"ABS WFM" : "bg/plastic/abs-wfm.jpg",
"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": "Carbon fibre", "style" : "background: url('/bg/carbonfibre/carbon-slice.jpg'); color: #fff;",
"content" : [
{ "name": "Carbon fibre 1", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1879.png');" },
{ "name": "Carbon fibre 2", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1874.png');" },
{ "name": "Carbon fibre 3", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1869.png');" },
{ "name": "Carbon fibre 4", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1873.png');" },
{ "name": "Carbon fibre 5", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1876.jpg');" },
{ "name": "Carbon fibre 6", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1882.jpg');" },
{ "name": "Carbon fibre 7", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1877.jpg');" }
]
},
{
"category": "Leather", "style" : "background: url('/bg/leather/leather-slice.jpg'); color: #fff;",
"content" : [
{ "name": "Black", "style" : "background-image: url('/bg/leather/black.jpg');" },
{ "name": "Black storm", "style" : "background-image: url('/bg/leather/leather_texture1051.jpg');" },
{ "name": "Camel", "style" : "background-image: url('/bg/leather/leather_texture4327.jpg');" },
{ "name": "Brown", "style" : "background-image: url('/bg/leather/brown.jpg');" },
{ "name": "Brown oxblood", "style" : "background-image: url('/bg/leather/leather_texture4337.jpg');" },
{ "name": "Brown shiny", "style" : "background-image: url('/bg/leather/leather_texture404.jpg');" },
{ "name": "Brown suede", "style" : "background-image: url('/bg/leather/leather_texture4315.jpg');" },
{ "name": "Navy", "style" : "background-image: url('/bg/leather/leather_texture4326.jpg');" },
{ "name": "Orange", "style" : "background-image: url('/bg/leather/leather_texture4329.jpg');" },
{ "name": "Red fire", "style" : "background-image: url('/bg/leather/leather_texture394.jpg');" },
{ "name": "White", "style" : "background-image: url('/bg/leather/leather_texture4378.jpg');" }
]
},
{
"category": "Marble", "style" : "background: url('/bg/marble/marble-slice.jpg'); color: #fff;",
"content" : [
{ "name": "Marble beige", "style" : "background-image: url('/bg/marble/marble_texture4653.jpg');" },
{ "name": "Marble black", "style" : "background-image: url('/bg/marble/marble_texture4510.jpg');" },
{ "name": "Marble brown", "style" : "background-image: url('/bg/marble/marble_texture4512.jpg');" },
{ "name": "Marble green", "style" : "background-image: url('/bg/marble/marble_texture1809.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');" },
{ "name": "Marble rose", "style" : "background-image: url('/bg/marble/marble_texture1820.jpg');" },
{ "name": "Marble Prussian blue", "style" : "background-image: url('/bg/marble/marble_texture4509.jpg');" },
{ "name": "Marble red deep", "style" : "background-image: url('/bg/marble/marble_texture4496.jpg');" },
{ "name": "Marble violet", "style" : "background-image: url('/bg/marble/marble_texture4617.jpg');" }
]
},
{
"category": "Metal", "style" : "background: url('/bg/metal/metal-slice.jpg'); color: #fff;",
"content" : [
{ "name": "Aluminium brushed", "style" : "background-image: url('/bg/metal/aluminum_texture1642.jpg');" },
{ "name": "Aluminium brushed black", "style" : "background-image: url('/bg/metal/aluminum_texture1644.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');" },
{ "name": "Aluminium brushed wavy", "style" : "background-image: url('/bg/metal/aluminum_texture1738.jpg');" },
{ "name": "Aluminium diagonal dark", "style" : "background-image: url('/bg/metal/aluminum_texture1784.jpg');" },
{ "name": "Steel brushed light", "style" : "background-image: url('/bg/metal/iron_texture1744.jpg');" },
{ "name": "Steel brushed dark", "style" : "background-image: url('/bg/metal/iron_texture1745.jpg');" },
{ "name": "Steel brushed wavy", "style" : "background-image: url('/bg/metal/iron_texture61.jpg');" },
{ "name": "Steel brushed horizontal", "style" : "background-image: url('/bg/metal/iron_texture66.jpg');" },
{ "name": "Titanium wavy", "style" : "background-image: url('/bg/metal/titanium_texture1752.jpg');" }
]
},
{
"category": "Plastic ABS (whites)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;",
"content" : [
{ "name": "ABS WA", "style" : "background-image: url('/bg/plastic/abs-wa.jpg');" },
{ "name": "ABS WAR", "style" : "background-image: url('/bg/plastic/abs-war.jpg');" },
{ "name": "ABS WBO", "style" : "background-image: url('/bg/plastic/abs-wbo.jpg');" },
{ "name": "ABS WCK", "style" : "background-image: url('/bg/plastic/abs-wck.jpg');" },
{ "name": "ABS WEA", "style" : "background-image: url('/bg/plastic/abs-wea.jpg');" },
{ "name": "ABS WFK", "style" : "background-image: url('/bg/plastic/abs-wfk.jpg');" },
{ "name": "ABS WFM", "style" : "background-image: url('/bg/plastic/abs-wfm.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');" },
{ "name": "ABS WV", "style" : "background-image: url('/bg/plastic/abs-wv.jpg');" },
{ "name": "ABS WW", "style" : "background-image: url('/bg/plastic/abs-ww.jpg');" }
]
},
{
"category": "Plastic PBT (browns & blacks)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;",
"content" : [
{ "name": "PBT Black", "style" : "background-image: url('/bg/plastic/pbt-black.png');" },
{ "name": "PBT UP", "style" : "background-image: url('/bg/plastic/pbt-up.png');" },
{ "name": "PBT TGJ", "style" : "background-image: url('/bg/plastic/pbt-tgj.png');" },
{ "name": "PBT TT", "style" : "background-image: url('/bg/plastic/pbt-tt.png');" }
]
},
{
"category": "Plastic PBT (whites)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;",
"content" : [
{ "name": "PBT WAN", "style" : "background-image: url('/bg/plastic/pbt-wan.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');" },
{ "name": "PBT WBK", "style" : "background-image: url('/bg/plastic/pbt-wbk.png');" },
{ "name": "PBT WBR", "style" : "background-image: url('/bg/plastic/pbt-wbr.png');" },
{ "name": "PBT WCS", "style" : "background-image: url('/bg/plastic/pbt-wcs.png');" },
{ "name": "PBT WCV", "style" : "background-image: url('/bg/plastic/pbt-wcv.png');" },
{ "name": "PBT WCX", "style" : "background-image: url('/bg/plastic/pbt-wcx.png');" },
{ "name": "PBT WDG", "style" : "background-image: url('/bg/plastic/pbt-wdg.png');" },
{ "name": "PBT WFJ", "style" : "background-image: url('/bg/plastic/pbt-wfj.png');" },
{ "name": "PBT WFN", "style" : "background-image: url('/bg/plastic/pbt-wfn.png');" }
]
},
{
"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 */
#keyboard {
padding: 9px;
position: relative;
padding: 4px;
border-radius: 3px;
margin-top: 10px;
margin-bottom: 10px;
border: dashed 1px #ddd;
}
#keyboard #keyboard-bg {
position: inherit;
border: solid 1px #ddd;
padding: 9px;
box-sizing: content-box;
border-radius: 6px;
background-color: #eee;
min-width: 56px;
min-height: 56px;
box-sizing: content-box;
margin-top: 10px;
margin-bottom: 10px;
}
#keyboard div {
#keyboard-bg div {
position: absolute;
border-color: black;
box-sizing: border-box;
@ -270,39 +275,32 @@ for i in (1..9) {
max-height: 1.25em;
}
/* make the background dropdown list headers stand out a bit */
.bg-dropdown-header {
background-color: #ccc;
font-size: 1.618em;
text-align: center;
/* nested dropdown menu lists; see bootstrap.css */
.dropdown-menu ul {
list-style: none;
margin: 2px 0 0;
padding: 5px 0;
}
.bg-dropdown-header-wood {
background: url('../bg/wood/wood-slice.jpg');
color: #000;
}
.bg-dropdown-header-metal {
background: url('../bg/metal/metal-slice.jpg');
color: #fff;
}
.bg-dropdown-header-marble {
background: url('../bg/marble/marble-slice.jpg');
color: #fff;
.dropdown-menu ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.bg-dropdown-header-plastic {
background: url('../bg/plastic/plastic-slice.jpg');
color: #000;
.dropdown-menu ul > li > a:hover,
.dropdown-menu ul > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.bg-dropdown-header-leather {
background: url('../bg/leather/leather-slice.jpg');
color: #fff;
/* button size between sm & xs; meant for inline forms */
.btn-sm-form,
.btn-group-sm-form > .btn {
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
************************************************-->
<div id="keyboard" ng-cloak
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 }"
<div id="keyboard" ng-cloak tabindex="0"
ui-keydown="{ left:'moveKeys(-moveStep,0,$event)',
right:'moveKeys(moveStep,0,$event)',
up:'moveKeys(0,-moveStep,$event)',
@ -218,17 +215,19 @@ Nav Bar / Header
ng-mousedown="selectClick($event)"
ngf-drop="true" ngf-change="uploadJson($files, $event)" ngf-drag-over-class="drag-over">
<div ng-repeat="key in keys()"
class="key {{key.profile}}"
ng-mouseover="hoveredKey=key"
ng-mouseleave="hoveredKey=null"
ng-class="{hover: hoveredKey==key, selected: selectedKeys.indexOf(key)>=0, HOMING:key.nub}"
ng-bind-html="key.html">
<div id='keyboard-bg'
style="height:{{kbHeight}}px; width:{{kbWidth}}px; background-color:{{keyboard.meta.backcolor}}; border-radius: {{keyboard.meta.backgroundradii}}; {{keyboard.meta.background.style}}">
<div ng-repeat="key in keys()"
class="key {{key.profile}}"
ng-mouseover="hoveredKey=key"
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 style="position:relative;line-height:1.2;" ng-style="{top:(kbHeight-26)+'px'}"
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>
<div style="line-height:1.2em; padding:3px 5px;" 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>
</div>
<div style='clear:both'></div>
{{calcKbHeight()}}
@ -517,8 +516,8 @@ Nav Bar / Header
</ul>
</div>
<div class="col-md-12 col-lg-12" style="padding:4px 0px;">
<input id="picker-html" class="form-control input-sm" type='text'
ng-model="pickerSelection.html" placeholder="No glyph selected"
<input id="picker-html" class="form-control input-sm" type='text'
ng-model="pickerSelection.html" placeholder="No glyph selected"
onClick="this.select();" readonly>
</div>
<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}">
<form class="form-horizontal col-sm-12 col-md-12 col-lg-12">
<!-- Keyboard Color -->
<!-- Keyboard Background -->
<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="form-inline">
<!-- Color -->
<kbd-color-picker picker-id="kbdcoloreditor"
ng-model="meta.backcolor"
ng-change="updateMeta('backcolor')"
ng-blur="validateMeta('backcolor')"
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"
data-hint="Specify the background image for this keyboard layout.">
<select id="kbdbackgroundimageeditor" class="form-control input-sm dropdown"
ng-model="meta.backgroundimage"
ng-change="updateMeta('backgroundimage')"
ng-blur="validateMeta('backgroundimage')">
<option value="">None</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-carbon">Carbon fibre</option>
<option ng-repeat="(k,v) in backgrounds.carbonfibre" value="{{v}}">{{k}}</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-leather">Leather</option>
<option ng-repeat="(k,v) in backgrounds.leather" value="{{v}}">{{k}}</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-marble">Marble</option>
<option ng-repeat="(k,v) in backgrounds.marble" value="{{v}}">{{k}}</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-metal">Metal</option>
<option ng-repeat="(k,v) in backgrounds.metal" value="{{v}}">{{k}}</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-plastic">Plastic ABS 'white'</option>
<option ng-repeat="(k,v) in backgrounds.plasticABSwhite" value="{{v}}">{{k}}</option>
<option value="" class="bg-dropdown-header bg-dropdown-header-plastic">Plastic PBT 'brown_black'</option>
<option ng-repeat="(k,v) in backgrounds.plasticPBTbrown_black" value="{{v}}">{{k}}</option>
<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>
<!-- Background image-->
<div class="form-group form-group-sm">
<div class="input-group input-group-sm hint--top hint--rounded" data-hint="Specify the background texture for the keyboard.">
<div class="btn-group btn-group-sm-form" dropdown>
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>{{meta.background ? meta.background.name : 'No Texture'}} <b class="caret"></b></button>
<ul class="dropdown-menu" role="menu" style="max-height:40vh;overflow-y:scroll;">
<li><a ng-click='setBackground(null)'>None</a></li>
<li class="divider"></li>
<li ng-repeat="category in backgrounds">
<div class="dropdown-header" style="{{category.style}}">{{category.category}}:</div>
<ul class="menu">
<li ng-repeat="bg in category.content"><a ng-click='setBackground(bg)'>{{bg.name}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Keyboard background image width-->
<div class="form-group form-group-sm">
<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"
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-change="updateMeta('backgroundimagewidth')"
ng-blur="validateMeta('backgroundimagewidth')">
@ -608,7 +591,7 @@ Nav Bar / Header
<input id="kbdbackgroundradiieditor" class="form-control input-sm" type='text'
ng-model="meta.backgroundradii"
ng-change="updateMeta('backgroundradii')"
ng-blur="validateMeta('backgroundradii')">
ng-blur="validateMeta('backgroundradii')">
</div>
</div>
@ -1067,41 +1050,41 @@ DOT.js Templates
{{?}}>
<!-- Outer Border -->
<rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}"
width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}"
<rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}"
width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}" class="outer border"/>
{{? parms.jShaped }}
<rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}"
width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}"
<rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}"
width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}" class="outer border"/>
{{?}}
<!-- Outer Fill -->
<rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}"
width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}"
<rect x="{{=parms.capx+sizes.strokeWidth}}" y="{{=parms.capy+sizes.strokeWidth}}"
width="{{=parms.capwidth-sizes.strokeWidth*2}}" height="{{=parms.capheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}"/>
{{? parms.jShaped }}
<rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}"
width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}"
<rect x="{{=parms.capx2+sizes.strokeWidth}}" y="{{=parms.capy2+sizes.strokeWidth}}"
width="{{=parms.capwidth2-sizes.strokeWidth*2}}" height="{{=parms.capheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.darkColor}}"/>
{{?}}
{{? !key.ghost }}
<!-- Inner Border -->
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}" class="inner border"/>
{{? parms.jShaped && !key.stepped }}
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}" class="inner border"/>
{{?}}
<!-- Inner Fill -->
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
{{? parms.jShaped && !key.stepped }}
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
{{?}}
{{? sizes.profile !== "" }}
@ -1110,7 +1093,7 @@ DOT.js Templates
{{
/*much harder to do j-shaped keys in SVG*/
theProfile = '_fill'+parms.index;
var rect = {
var rect = {
left: Math.min(parms.innercapx, parms.innercapx2),
top: Math.min(parms.innercapy, parms.innercapy2),
right: Math.min(parms.innercapx+parms.innercapwidth, parms.innercapx2+parms.innercapwidth2),
@ -1119,24 +1102,24 @@ DOT.js Templates
}}
{{? sizes.profile==="SA" || sizes.profile==="DSA" }}
<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)}}"/>
{{??}}
<linearGradient id="{{=theProfile}}" xlink:href="#{{=sizes.profile}}" gradientUnits="userSpaceOnUse"
x1="{{=rect.left}}" y1="{{=rect.top}}" x2="{{=rect.right}}" y2="{{=rect.top}}"/>
{{?}}
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx2+sizes.strokeWidth}}" y="{{=parms.innercapy2+sizes.strokeWidth}}"
width="{{=parms.innercapwidth2-sizes.strokeWidth*2}}" height="{{=parms.innercapheight2-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="url(#{{=theProfile}})"/>
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="{{=parms.lightColor}}"/>
{{?}}
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
<rect x="{{=parms.innercapx+sizes.strokeWidth}}" y="{{=parms.innercapy+sizes.strokeWidth}}"
width="{{=parms.innercapwidth-sizes.strokeWidth*2}}" height="{{=parms.innercapheight-sizes.strokeWidth*2}}"
rx="{{=sizes.roundOuter}}" fill="url(#{{=theProfile}})"/>
{{?}}
{{?}}
@ -1144,10 +1127,10 @@ DOT.js Templates
</script>
<script type="text/ng-template" id="keyboard_svg">
<svg width='{{=parms.width+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}}'
xmlns='http://www.w3.org/2000/svg'
<svg width='{{=parms.width+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}}'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type='text/css'>

22
kb.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save