LCARS

LCARS is a purely client-side CSS and HTML framework, similar to Bootstrap, Foundation, Topcoat, Brick, or Pure to create user interfaces similiar to a certain popular sci-fi franchise. Enjoy!

There are a few requirements in terms of HTML element nesting and corresponding CSS classes that are necessary for the styling to apply correctly. Looking directly at the source of this demonstration/documentation page should prove instructive. You might even use a copy of this page as a sort of a template; just delete and replace the parts you do not want.

Each of the following sections will specify a primary CSS class name (in blue colored text) to assign to an HTML element to apply the appropriate CSS styling rules to achieve the described effect. Many primary classes will also have a list of secondary modifier class names (in red colored text) that can be appended to the class list to give additional styling options. Note that CSS classes are cumulative and cascading; i.e., you can combine them and the styling effects will (mostly) be inherited by the descendent nested-within html elements.

Layout

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

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 layout 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

lcars-COLORNAME-color

lcars-COLORNAME-bg

Hyperlinks

:link :hover :focus :active :visited 

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

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

lcars-title

A title to use within a horizontal bar.

• right

  : align self to the right.

Text Box

lcars-text-box

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

• 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

• blink

  : attention demanding blinking text

Example

Element

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. The html "div" is typically the preferred tag to assign the lcars-element tag to.

• 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.

lcars-element-addition

Use within element. Adds an indicator to the element.

lcars-element-decorator

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

• right

  : adds the decorator to the right

Example

Elbow

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

Brackets

lcars-bracket

Decorative Brackets. Use to group elements.

• right

  : right bracket

• left

  : left bracket

• top

  : top bracket

• bottom

  : bottom bracket

Example

Inputs

Basic input controls other than buttons. Text inputs and range (slider) inputs, for example.

Note that these elements are somewhat outside of the atested UI elements. As far as arbitrary, free-form input, we can observe voice input, but we can only infer manual arbitrary input via stylus or some kind of configurable, temporarily displayed full alphanumeric tactile "keyboard". Nonetheless, here we have more reasonable defaults (than regular raw browswer defaults) to blend in a little better, should you need them. Beware though that it will be and will seem a bit inauthentic.

Text

lcars-text-input

A single-line text box and a multi-line text area that users may type into.

• decorated

  : add simple right and left borders to indicate text input area boundaries.

• left-rounded

  : rounds the left edge

• right-rounded

  : rounds the right edge

• rounded

  : rounds the all edges

Example

Single-line

Multi-line basic

INITIAL DATA

Multi-line with more decoration

Somewhat more complicated here; the width has to be specified at a higher position in the DOM tree, and then the height has to be specified at the textrea element itself. Also recommended: setting the min-height and max-height properties to avoid bad reflows or overlapping during resizing.

Range

lcars-range-input

Range inputs might also be called "slider bars". Note that these have some added complexity including multiple html elements inside a form element and some behavior-driving JavaScript, though this appears to be standard html5.

Example

Table

lcars-table

Simple, two-dimensional tabularly structured data display.

• standard-header

  : Underlined and bold header row. Requires thead and tbody tags in table tag structure.

• scanning

  : apply a simple cycling animation, highlighting row-by-row. This will not be noticeable if you select white text color.

• scanning-fast

  : apply a simple cycling animation, highlighting row-by-row, at a faster tempo. This will not be noticeable if you select white text color.

Example

Audio

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();
					

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

Example

By onclick attribute:

And again, by CSS class instead:

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.

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" />

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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).
6. 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!"); 
});