-- Intended to put decorative labels (logos, etc.) on keyboard layouts.
-- They're basically just invisible keycaps; this works pretty well,
since there are already so many formatting options for text on keycaps,
and it saves us from having to manage a completely separate type of
thing.
-- Props to iandoug for the idea!
Also:
-- Disable x2,y2,width2,height2 on decals
-- Increase max keycap size to 18x18 (allows for really large decals)
-- Needed to escape the scrolling div, which wasn't possible with
hint.css.
-- Couldn't switch everywhere, unfortunately, because
angular-ui-bootstrap tooltips have some nasty bugs dealing with disabled
input fields where the tooltips wouldn't go away.
-- sizes & positions are swapped so that the overall shape of the key is
maintained, but the labels will shift positions since they are always
rendered on the primary rectangle.
-- Similar to the raw-data editor.
-- Styles are parsed, modified so that they can only affect keycaps,
then applied to the page.
-- Modified the VIC-20 sample to demonstrate; it now has a
FontAwesome-style stylesheet, for the C64ProMono font, and is using
those custom styles for all the PETSCII glyphs.
-- Generating HTML with a doT.js template function; hopefully easier to
maintain.
-- More of the parameters refactored into the JS code, rather than
relying on being in the CSS; benefit => those parameters are available
when I do SVG rendering.
-- Also, now using Stylus to compile & minify CSS, and auto-inline small
images (Sublime project describes how to compile).
-- New OEM profile (renders same as DCS)
-- SA tweaked to sit a bit higher than DSA
-- Now showing a homing nub on all profiles (other than SA/DSA)
-- DSA/SA deep-dish made (slightly) more visible
-- Switched from plain bootstrap to angular-ui-bootstrap (to fix some
interaction problems); this necessitated a number of markup changes for
the modals and dropdowns.
-- Can now "cancel" the options dialog.
-- Sprinkled the markup with ng-cloak to prevent early rendering
problems.
-- Fixed some copy/paste issues with previous form changes (labels were
incorrect)
-- Upgrading to the latest Bootstrap broke a bunch of stuff, so I had to
go in and fix it.
-- While I was at it, I switched all the form controls to make better
use of the Bootstrap classes, so they look and reflow a bit better now.
-- New color picker (angular-bootstrap-colorpicker)
-- Color picker placed beside each label field.
-- Can also drag & drop from palette to label fields (using
angular-dragdrop).
-- Load the Markdown files directly, parse them (with "marked") and put
the result in a model popup.
-- This way I don't need to maintain separate files for the website &
GitHub repo.
-- Each key has a rotation angle, and center of rotation; available in
the editor.
-- Displaying crosshairs in the editor for the center of rotation.
-- Keyboard shortcuts to move CoR, and change angle.
-- Keyboard height is correctly calculated.
TODO:
-- Serialization is still wonky.
-- Can't click on rotated keys to select them.
-- Now setting background-size & background-position properties on the
keycap foregrounds (which are the elements that have gradients applied).
-- Now, instead of each section getting its own gradient, they each get
the *same* gradient... so when they are laid on top of each other, the
gradients match.
-- This is just about perfect for DCS (cylindrical).
-- The effect is less convincing for DSA/SA caps; ideally we'd be able
to "blend" the two gradients together somehow, but CSS doesn't support
non-normal blend-modes, and I don't want to get into <canvas> rendering.
-- The palette swatch will have a glyph to indicate it's the current
foreground/background color.
-- We print the color name beside the foreground/background color editor
fields.
1. Instead of using the specified color for the top of the cap, and then
darkening the side, I use the specified color for the sides of the cap,
and then lighten the top.
-- All swatches were sampled from the smooth part of the color chips...
and the smooth is usually present on the *side* of the caps, not the
top.
-- The top of the caps usually has a matte-finish, which is visibly
lighter than the smooth finish.
2. Lighten the color in LAB-space, instead of in RGB-space.
-- results in better appearance for the light colors
3. Tweaked the gradients for DSA and DCS.
4. Updated existing sample layouts to use SP color values.
-- Deleted old/unloved sample layouts.
-- Darkened the Stealth-Black layout to match other changes.
5. Changed the default keycap color from #eeeeee --> #cccccc
-- Relative appearance is similar between old & new versions.
-- Somewhere along the line they got moved up... moved them back down.
-- Made the DSA version 1px smaller, so that it would fit in the
available space.
-- Line spacing was too big on the keycaps (I think it was picking up
the spacing from Bootstrap); fixed in CSS
-- DSA keys were showing the inner-border in the incorrect spot (wasn't
really noticable on the dark colors of Retro DSA); fixed in CSS
-- Replaced custom min/max functions with the correct Math.min, Math.max
functions.
-- The valiation for x/y offsets was too aggressive; for some
oddly-shaped keys, it didn't let you set values that were big enough.
-- Swapped the order of the keylabel tops for the primary & secondary
rectangles. This ensures that the label is in the same place whether
stepped or not, at the expense of maybe affecting old layouts.
