search

ijprest / keyboard-layout-editor

Web application to enable the design & editing of keyboard layouts
http://www.keyboard-layout-editor.com/
Other
1.3k stars 241 forks source link

how to add LED circles? #328

Closed River-Mochi closed 1 year ago

River-Mochi commented 1 year ago

Sorry for asking in here, there is no Discussions activated for this github.

  1. Is there a way I could add LED lights like this person did in this image? This is for Viendi 8L keyboard

image

My layout is here I have no idea how they added those LED lights and it's nice since they do exist.

  1. is there a way to add a Knob as a lot of keyboards have a knob now. the viendi 8L I'm working on has a knob in the numpad area.
ijprest commented 1 year ago

To achieve that effect, add a new key, give it a legend and color---<i class='fa fa-circle'></i>, from the Font Awesome character picker works well for the legend of an LED---then click the 'decal' checkbox at the bottom.

ijprest commented 1 year ago

A 'knob' can be done the same way (with decals)... you'd just need something different for the legend. You can put arbitrary HTML in the legend field, so if you can't find anything in the character picker(s) you like, you could maybe reference an externally-hosted image.

River-Mochi commented 1 year ago

A 'knob' can be done the same way (with decals).

thanks @ijprest

I got it now. Can I use any fontawesome or only the ones that are here? when I tried to use a different Fontawesome from main website it did not work. but ones from your section worked. image

ijprest commented 1 year ago

The glyphs in the character-picker are the only ones the editor provides; specifically, it uses an older version of FA.

However, you could probably load a newer version of FA (to get access to new FA glyphs) using some of the custom CSS stuff documented here: https://github.com/ijprest/keyboard-layout-editor/wiki/Custom-Styles

The VIC-20 sample shows the canonical way to add custom glyphs (see the 'custom styles' tab for the gory details).