LCARS

LCARS is a CSS framework like Bootstrap to create user interfaces similiar as in a popular sci-fi franchise. Enjoy!

Layout

Class:

lcars-row

Creates a row layout.

```
fill
```
: fill available space in column or row
```
centered
```
: center content horizontally
```
full-centered
```
: center content horizontally and vertically
```
right
```
: align content to the right
```
right-centered
```
: align content to the right and center vertically
```
right-bottom
```
: align content to the bottom and to the right

Class:

lcars-column

Creates a column layout.

```
fill
```
: fill available space in column or row
```
centered
```
: center content vertically
```
full-centered
```
: center content horizontally and vertically
```
centered-right
```
: align content to the right and center vertically
```
bottom
```
: align content to the bottom
```
bottom-centered
```
: align content to the bottom and center horizontally
```
left-menu
```
: add margin to right to align in left elbow
```
right-menu
```
: add margin to left to align in right elbow

Grid

LCARS has a strict grid system. Item sizes are set in multiples of unit size.

The
```
lcars-u-X
```
class sets the width to X * unit width (X = 0..16)
The
```
lcars-vu-X
```
class sets the height to X * unit height (X = 0..16)
The
```
lcars-u-X-Y
```
class sets the width to X * unit width and the height to Y times the unit height (X,Y = 0..16)

Colors

Colors can be set by adding the classes:

lcars-COLORNAME-color

: Sets the text color to COLORNAME

lcars-COLORNAME-bg

: Sets the background color to COLORNAME

This are the available colors:

pale-canary

golden-tanoi

neon-carrot

eggplant

anakiwa

mariner

bahama-blue

red-alert

white

blue-bell

melrose

lilac

hopbush

chestnut-rose

orange-peel

atomic-tangerine

gray

danub

indigo

lavender-purple

cosmic

red-damask

medium-carmine

bourbon

sandy-brown

periwinkle

dodger-blue

dodger-blue-alt

blue

navy-blue

husk

rust

tamarillo

Hyperlinks

Class:

:link :hover :focus :active :visited

(but note that these are pseudo-classes, automatically applied by the web browser)

Hyperlinks are highlighted with an energetic color, and not bluish. Hyperlinks without an href attribute are a little different: they will highlight only when you hover. Emphasis but subtlety.

Bar

Class:

lcars-bar

Used to fill spaces and to create top or bottom horizontal bars.

```
spacer
```
: sets the width and height to base-spacing and background transparent. Use to create custom spacing eg between bars
```
double-spacer
```
: sames as spacer, but double the size
```
left-space
```
: add extra margin of base spacing to the left
```
left-double-space
```
: add extra margin of double the base spacing to the left
```
right-space
```
: add extra margin of base spacing to the right
```
right-double-space
```
: add extra margin of double the base spacing to the right
```
horizontal
```
: set the height to 1/3 of unitsize. Use it as top or bottom bars and with elbows.
```
left-end
```
: sets the height and the width to 1/3 of the unit height and rounds the left edges. Use ate the edges of horizontal bars.
- ```
decorated
```
  : adds a decorative stripe.

right-end

: sets the height and the width to 1/3 of the unit height and rounds the left right. Use ate the edges of horizontal bars.

```
decorated
```
: adds a decorative stripe.

```
fill
```
: fill available space in column or row
```
bottom
```
: align self to the bottom

Class:

lcars-title

A title to use within a horizontal bar.

```
right
```
: align self to the right.

Text Box

Class:

lcars-text-box

A text box with pre-defined font sizes. Use to fit headers and indicators, but not for large texts.

```
big
```
: font-size 150%
```
large
```
: font-size 200%
```
huge
```
: font-size 400%
```
huge
```
: font-size 400%
```
centered
```
: center content horizontally
```
full-centered
```
: center content horizontally and vertically
```
right
```
: align content to the right
```
centered-right
```
: align content to the right and center vertically
```
bottom
```
: align content to the bottom
```
bottom-centered
```
: align content to the bottom and center horizontally
```
bottom-right
```
: align content to the bottom and to the right

Element

Class:

lcars-element

Elements are the basic blocks of LCARS. They can be used as buttons and indicators. Use the grid classes to set the size.

```
left-rounded
```
: rounds the left edge
```
right-rounded
```
: rounds the right edge
```
rounded
```
: rounds the all edges
```
button
```
: Add button behaviour. Optionally can include automatic Audible effect.

Class:

lcars-element-addition

Use within element. Adds an indicator to the element.

Class:

lcars-element-decorator

Use within element. Adds a decorator to the left of the element.

```
right
```
: adds the decorator to the right

Example

Simple

Button

Coloured

left round

right round

round

tall

double

with

addition

Elbow

Class:

lcars-elbow

The iconic elbow.

```
right-top
```
: elbows faces to the top right.
```
left-top
```
: elbows faces to the top left.
```
right-bottom
```
: elbows faces to the bottom right.
```
left-bottom
```
: elbows faces to the bottom left.

Example

right-top

left-top

right-bottom

left-bottom

BRACKETS

Class:

lcars-bracket

Decorative Brackets. Use to group elements.

```
right
```
: right bracket
```
left
```
: left bracket
```
top
```
: top bracket
```
bottom
```
: bottom bracket

Example

Audio

Class:

button

The button class will also automatically receive a sound-effect event if you include the following at the bottom of the page:

special dummy audio element for automatic file format support detection
js/lcars_audio.js script reference

  <audio id="audDummy"/><!--Just leave this here, just needed to enable automatic query canplay in the initialization code to load compatible media types -->
  <script src="js/lcars_audio.js"></script>

To arbitrarily assign sound effects, use your preferred element selector method and call these simple functions from the lcarsAudio javascript module as the callback event handler:

  lcarsAudio.TactileInputAcknowledge();
  lcarsAudio.TactileInputNegativeAcknowledge();
  lcarsAudio.Alert();

For quick and dirty specific assignments, you can also just assign the funcation call directly to the onClick attribute of any html element like so:

  <dev id="special_button" onclick="lcarsAduio.TactileInputAcknowledge();">SP BTN</div>

Example

By onclick attribute:

SP BTN

INACTV

And again, by CSS class instead:

SP BTN

DISABLD

LCARS clearly has a "grammar" for the audio signals. As with any fictional canon, there will be contradictions, gaps, and incorrect assumptions on the part of amateurs. Hopefully users will find the audio framework easily modifiable to suit, but also fairly usable as is.

A couple of simple place-holder sound effects are included for demonstration purposes, but to gain the full benefit of an authentic sounding LCARS interface, audio samples that match each of the semantic descriptions could be downloaded from elsewhere on the web (STdimension media library is an excellent resource) and renamed to match the Audio Filename Base column shown below, then transcoded to other audio file formats to provide mult-platform support (i.e., the major browser vendors do not all agree on what audio file formats should be supported by web browsers, but html5 standards provide fall-back mechanisms to help overcome this). A trinity of m4a/aac, ogg/vorbis, and webm seems to give excellent platform coverage and should be handled by ffmpeg nicely.

JS lcarsAudio Module Play Function	Element Subclass	Audio Filename Base	Semantic Description
TactileInputAcknowledge()	lcars-tactinput-acknowledge-audio (or button)	tactinput_acknowledge	Smallest unit of input acknowledgement, a single "keypress" received and understood. the Basic Button Beep.
TactileInputAlternateAcknowledge()	lcars-tactinput-alt-acknowledge-audio	tactinput_alt_acknowledge	Input "punctuation", delimitation, or compositing/packaging of input acknowledgement. Perhaps analagous to the "hitting the enter key". Basic Button Beep 2, alternate (lower) tone.
TactileInputNegativeAcknowledge()	lcars-tactinput-neg-acknowledge-audio	tactinput_neg_acknowledge	Keypress failure/low-level access denied/nonresponse. The antithesis to Ack.
Alert()	lcars-alert-audio	alert	Hard failure/access denied/warning level 1. Distinct from RedAlert.
RedAlert()	lcars-red-alert-audio	red_alert	Emergency condition, highest level of alert.
Ready()	lcars-ready-audio	ready	Interface initialized, ready for input from user.

SVG Special Elements

Some particularly complex geometry such as the classic circular x/y control can be more easily achieved with special prepackaged SVG images. A limited number of particularly recognizable special elements are included. They are totally optional and may be deleted if your project will not utilize them.

These special elements may be inserted with traditional img tags:

<img id="xy_control_element" src="img/lcars_xy_circle_widget_optimized.svg" />

When using SVG files through img tags, CSS becomes less centralized. The SVG file will have to embed a copy of the CSS coloring class definitions directly into the SVG file source in under a style tag within a defs tag. View the source of img/lcars_xy_circle_widget_optimized_and_classes.svg for example. The set of color definitions are availble for easy copying in css/lcars.svg.colors.fragment.css

Or, Inline SVG can be used for increased interactivity and customization within the element. SVG embedded like this can make use of standard element id and class attributes for css and DOM node selectors. This method is currently necessary for automatic audio support to apply to the SVG element.

There are several features built-in to Inkscape, the opensource SVG editor, that could be helpful in building some web-browser based behavior. While that should work fine, to keep this framework simple and consistent, a more basic process used to create the special elements was used:

Create master edition of the "special element" as a new SVG drawing file, with document sizing to match real world dimensions. This edition of the SVG file will be filled with guides and references, and saved in Inkscape extended SVG. This way, later on, you can more easily modify and regenerate new editions.
While creating all the geometry, prefer closed paths instead of a variety of specific shape types for consistency in source layout giving maximum flexibility for editing geometry in the future, as well as query selector consistency when integrating the SVG source.
Create an intermediate "publishing" copy of the the SVG drawing:
- Delete all guides.
- Move all geometry to one layer, delete any photo reference layers.
- Break up any groups where any sub-shape needs to be individually clickable.
- Unlink all object clones (which may require some re-transformation and translation).
- Assign IDs and matching labels in the "Object Properties" palette (these will translate to Selector-compatible html element IDs), but do not end IDs with digits, padd with some kind of letter if necessary.
Save as "Optimized SVG" with these options:
- Uncheck shorten color values.
- Uncheck convert css attributes to XML attibutes.
- Enable pretty printing format with line breaks, but use tab indentation.
- Enable remove unused IDs, but preserve mannually created IDs not ending with digits.
Finally, manually edit the XML code of the SVG file to apply class="button" to each important shape/path element that needs to be clickable. These should be easily identifiable as the elements with custom ID attribute values that you populated in Inkscape. It would also be ideal to replace fill properties in style="" attributes with the corresponding lcars-COLORNAME-bg CSS class membership (just add that name in after button, separated by a space).
When inserting the SVG XML code directly into an html5 document, exclude the XML doctype declaration from the SVG file.

To add custom behavior, just use element IDs in selector expressions like any other html5 element; e.g.,

document.querySelector("#xy_ctl_up").addEventListener("click", function(){ 
	yourCustomFunctionHere();
	console.log("part of the svg element was clicked!"); 
});