16098.3

EH: Updated assorted core CSS settings. Largest update was to the Elbows, complex buttons. RM: Assorted files as content was seperated into their own files and new file structure created. EH: Added End Cap elements for large bar framing controls. EH: Added style setting to directly apply CSS settings to an elements definition object. EH: Additional coler generation call for grouped color rendering. CO: Provided USS Not Affiliated theme updated. EH: Radio/Checkbox are now standard buttons. The state of the element is handled via a simple JS with function passthrough. These elements are not input elements. CO: Multiple elements have their settings updated to utilize new options. CO: Complex buttons using large text utilize a text element instead of the old nbValue setting. CO: Elements are not long position absolute by default.
Aricwithana · Apr 10, 2016 · 125bcf1 · 125bcf1
1 parent 0a7775a
commit 125bcf1
Show file tree

Hide file tree

Showing 36 changed files with 3,768 additions and 1,338 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,8 +1,8 @@
-LCARS SDK License 15088.21 (v2.1.0)
+LCARS SDK License 16098.3 (v3.0.0)
 Author: Aric McGriff
 Email: [email protected]
 Website: http://www.lcarssdk.org
-Date:2-25-2015
+Date:04-09-216
 
 Original Intellectual Property Ownership.
 THE LCARS SDK IS MADE IN GOOD FAITH THAT THE ENVIRONMENT DOES NOT INFRINGE ON THE INTELLECTUAL PROPERTY OWNED BY PARAMOUNT/CBS TO WHOM STAR TREK AND RELATED MATERIALS ARE TRADEMARKED AND OWNED BY. ALL RELATED LCARS MATERIAL IS FOR THE JOY OF THE FANS AND TO HELP PROMOTE A QUALITY AND FUNCTIONAL LCARS ENVIRONMENT FOR THE STAR TREK FAN COMMUNITY.
@@ -51,7 +51,7 @@ Addons Included: Scroll Button (scrollbutton.css/scrollbutton.js)
 
 Module: A derivative work utilizing the LCARS SDK. Contains project specific code and generally extended features usability. A module is dependant upon the Code core not the other way around.
 
-Viewscreen: Provided application environment.
+LCARS-NV: Provided application environment.
 
 TERMS AND CONDITIONS
 1. For-Profit use is prohibited. The LCARS SDK is for Non-Profit use only.
@@ -64,7 +64,7 @@ TERMS AND CONDITIONS
 4. The LCARS SDK, its Author/Project Lead or any other associated relationships are not responsible or liable for any custom Addons or Modules created by a third party not included directly included in the LCARS SDK umbrella environment.
 
 5. The LCARS SDK source code is available to allow the greatest control over its implementation use. By chance that a 3rd Party is negatively impacting the LCARS SDK environment or violating any other term and conditions concerning the LCARS SDK or related materials, at the discretion of the Author/Project Lead, the 3rd Party will be served a Cease & Desist, in writing. Take-down is immediate upon receiving the Cease & Desist.
-5.a The Viewscreen application is a node-webkit based project.  This application is provided as-is.  For more information: https://github.com/rogerwang/node-webkit
+5.a The LCARS-NV Project is a webview desktop and system bootable based project.  This appliction and operating system is provided as-is.
 
 6. Included font provided by Jens. The .ttf file is directly from his site. Additional file types provided via the Font Squirrel service upon font authors permission.
 6.a http://www.gtjlcars.de/LCARSindex/LCARSFONTS.htm

diff --git a/README.md b/README.md
@@ -1,16 +1,15 @@
-LCARS SDK 15088.21
+LCARS SDK 16098.3
 ============
 
 The LCARS SDK is a development kit and environment umbrella designed specifically for generating canon quality and functional LCARS interfaces within a webview.  Utilizing a webview the LCARS SDK can be applied to cross-modern internet browsers and both mobile and desktop applications.  Anywhere a webview is in place the SDK could be used.
 
-While the Code core could be written without a library, to make it more accessible the $.(); syntax is used via the Zepto.js library.  jQuery may be used as a drop-in replacement preference.
+While the Code core could be written without a library, to make it more accessible the $.(); syntax is used via the jQuery library.  Zepto may be used as a drop-in replacement preference.
 
 Included in the current version of the SDK is the Code core, addon(s) and base templating vector file(s).
 
 For more information:
 
 http://www.lcarssdk.org/ <br>
 https://www.facebook.com/LCARSSDK <br>
-https://twitter.com/LCARSSDK <br>
 
 To learn how to use the LCARS SDK read through the attached wiki.
diff --git a/index.html b/index.html
diff --git a/interfaces/color-generator/index.html b/interfaces/color-generator/index.html
@@ -0,0 +1,44 @@
+<!-- LCARS SDK 16098.3
+- This file is a part of the LCARS SDK.
+- https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
+- For more information please go to http://www.lcarssdk.org.
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
+
+    <title>Color Pattern Generator | LCARS SDK</title>
+
+    <!--<base href="/">-->
+    <script type="text/javascript" src="../../lcarssdk/js/jquery.js"></script>
+	<script type="text/javascript" src="../../lcarssdk/js/webviewinfo.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/js/arrive.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/js/lcarssdk.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/addons/scrollButton/scrollButton.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/addons/levelBar/levelBar.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/bracket/bracket.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/dialog/dialog.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/framing/framing.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/button/button.js"></script>
+
+    <script type="text/javascript" src="module.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/css/lcarssdk.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/addons/scrollButton/scrollButton.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/addons/levelBar/levelBar.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/bracket/bracket.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/dialog/dialog.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/framing/framing.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/button/button.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/themes/theme_ussNotAffiliated.css">
+
+    <link rel="stylesheet" type="text/css" href="module.css"></head>
+
+</head>
+
+<body ontouchstart="" onload=""></body>
+</html>
diff --git a/interfaces/color-generator/module.css b/interfaces/color-generator/module.css
@@ -0,0 +1,66 @@
+
+#wpr_viewport{width:100%; height:100%; padding:10px; text-align:right;}
+
+#wpr_viewport > .column:first-child{width:305px; margin-right:5px;}
+#wpr_viewport > .column:first-child .button-wrap:last-child{margin-top:195px;}
+
+.bracket{width:305px; height:255px; margin-bottom:5px;} 
+
+.button-wrap{flex-wrap:wrap; width:100%;}
+.button-wrap .button{margin-bottom:5px; margin-left:5px;}
+
+.button-wrap .button:first-child:nth-last-child(2),
+.button-wrap .button:first-child:nth-last-child(2) ~ .button{margin-bottom:0px;}
+
+.button-wrap .button:nth-child(odd){margin-left:0px !important;}
+
+
+
+#wpr_mainView{margin-left:10px;}
+#wpr_mainView > .header{height:320px;}
+#wpr_mainView > .header .column{width:150px; overflow:visible;}
+#wpr_mainView > .header .column .elbow .bar{width:209px; right:-204px;}
+.header .row.frame{padding-left:204px;}
+
+
+.main .column{left:0px; top:0px; bottom:0px; width:150px;  overflow:visible;}
+.main .column:first-child .elbow .bar{width:209px;}
+.main .row.frame{padding-left:209px;}
+
+.main .content{padding-top:35px; padding-left:35px;}
+
+.frame .bar:nth-child(2){
+	width:100%; 
+	max-width:150px;
+}
+
+.frame .bar:nth-child(5){
+	width:100%; 
+	max-width:305px;
+}	
+
+.frame .bar:nth-child(6){
+	width:100%; 
+	max-width:110px;
+}	
+
+.frame .bar:nth-child(7){
+	width:100%; 
+	max-width:35px;
+}	
+
+.header .button-wrap{position:absolute; bottom:35px; right:0px; width:460px;}
+.header .button-wrap .button{margin-left:5px !important;}
+.header .button-wrap .button:first-child:nth-last-child(2),
+.header .button-wrap .button:first-child:nth-last-child(2) ~ .button{margin-bottom:0px;}
+.header .button-wrap .button:nth-child(3n+1),
+.header .button-wrap .button:first-child{margin-left:0px !important;}
+
+
+/* Static Pattern Heights */
+.step-two{height:125px;}
+.step-three{height:190px;}
+.step-four{height:255px;}
+
+
+
diff --git a/interfaces/color-generator/module.js b/interfaces/color-generator/module.js
@@ -0,0 +1,166 @@
+var uiColors = ['bg-blue-1', 'bg-blue-2','bg-blue-3','bg-blue-4','bg-green-1','bg-green-2','bg-green-3','bg-green-4'];
+
+//Classic Bracket - Needs to be done, it can be done without classes now, I'll update the CSS for the next version release.    
+var bracket = {type:'wrapper', class:'sdk bracket typeA', children:[
+		{type:'wrapper', class:'content'},
+		{type:'elbow', version:'top-left', size:'small', color:LCARS.colorGen(uiColors), children:[{type:'bar'}], noEvent:true},	
+		{type:'elbow', version:'top-right', size:'small', color:LCARS.colorGen(uiColors), children:[{type:'bar'}], noEvent:true},	
+		{type:'elbow', version:'bottom-left', size:'small', color:LCARS.colorGen(uiColors), children:[{type:'bar'}], noEvent:true},	
+		{type:'elbow', version:'bottom-right', size:'small', color:LCARS.colorGen(uiColors), children:[{type:'bar'}], noEvent:true},        
+		{type:'column', flex:'v', children:[
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors), children:[{type:'bar', color:'bg-white'}]},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)}                     
+		]},
+		{type:'column', flex:'v', children:[
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)}                     
+		]},
+		{type:'column', flex:'v', children:[
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors), children:[{type:'bar', color:'bg-white'}]},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)}                    
+		]},
+		{type:'column', flex:'v', children:[
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)},
+			{type:'bar', flexC:'v', color:LCARS.colorGen(uiColors)}                     
+		]}
+	]
+};  
+
+//UI Framing.  Uses the Arrive event to trigger the Viewport scaling.
+var nemesisUI = {type:'wrapper', id:'wpr_viewport', version:'row', flex:'h', arrive:function(){$(this).viewport('zoom', {width:1920, height:1080});}, children:[
+
+    //Left Column Wrapper
+    {type:'column', flex:'v', children:[
+        {type:'wrapper', children:[
+
+			//Bracket
+            {type:'bracket', template:bracket},
+
+			//Top Button Group
+            {type:'wrapper', flex:'h', version:'button-wrap', children:[
+                {type:'button', color:LCARS.colorGen(uiColors), version:'left'},
+                {type:'button', color:LCARS.colorGen(uiColors)},
+                {type:'button', color:LCARS.colorGen(uiColors), version:'left'},
+                {type:'button', color:LCARS.colorGen(uiColors)},
+                {type:'button', color:LCARS.colorGen(uiColors), version:'left'},
+                {type:'button', color:LCARS.colorGen(uiColors)}            
+            ]},
+
+			//Bottom Button Group
+            {type:'wrapper', flex:'h', version:'button-wrap', children:[
+                {type:'button', color:LCARS.colorGen(uiColors), version:'left'},
+                {type:'button', color:LCARS.colorGen(uiColors)},
+                {type:'button', color:LCARS.colorGen(uiColors), version:'left'},
+                {type:'button', color:LCARS.colorGen(uiColors)},
+                {type:'button', color:LCARS.colorGen(uiColors), version:'left', state:'ra_g1'},
+                {type:'button', color:LCARS.colorGen(uiColors)}            
+            ]}
+        ]},
+
+		{type:'column', style:'justify-content: flex-end;', flexC:'v', flex:'v', children:[
+			{type:'complexButton', text:'55', template:LCARS.templates.sdk.buttons.complexText.typeG, colors:LCARS.colorGroupGen(uiColors, 3)}
+		]}
+
+    ]},
+
+	//Column Buttons
+	{type:'wrapper', version:'column', style:'width:150px;', flex:'v', children:[
+		{type:'button', color:LCARS.colorGen(uiColors)},
+		{type:'button', color:LCARS.colorGen(uiColors)},
+		{type:'button', color:LCARS.colorGen(uiColors), size:'step-two'},
+		{type:'button', color:LCARS.colorGen(uiColors), size:'step-three'},
+		{type:'button', color:LCARS.colorGen(uiColors), size:'step-three'},
+		{type:'button', color:LCARS.colorGen(uiColors)},
+		{type:'button', color:LCARS.colorGen(uiColors)},
+		{type:'button', color:LCARS.colorGen(uiColors)},
+		{type:'button', color:LCARS.colorGen(uiColors), flexC:'v'}
+	]} ,        
+
+	//Main Area
+    {type:'wrapper', version:'column', id:'wpr_mainView', flex:'v', flexC:'h', children:[   
+
+		//Header
+        {type:'row', version:'header', flex:'h', children:[
+
+			//Elbow & Button
+            {type:'column', flex:'v', children:[
+                {type:'button', color:LCARS.colorGen(uiColors), size:'step-two'},
+                {type:'elbow', version:'bottom-left', color:LCARS.colorGen(uiColors), flexC:'v'}
+            ]},
+
+			{type:'wrapper', flexC:'h', flex:'v', children:[
+
+				//Header Content Area
+				{type:'wrapper', version:'content', flexC:'v', children:[
+
+					//Header Title
+					{type:'title', text:'LCARS Color Pattern Generator'},
+
+					//Header Pill Button Group
+					{type:'wrapper', flex:'h', class:'button-wrap', children:[
+						{type:'button', color:LCARS.colorGen(uiColors), version:'pill'},
+						{type:'button', color:LCARS.colorGen(uiColors), version:'pill'},
+						{type:'button', color:LCARS.colorGen(uiColors), version:'pill'},
+						{type:'button', color:LCARS.colorGen(uiColors), version:'pill'},
+						{type:'button', color:LCARS.colorGen(uiColors), version:'pill'},
+						{type:'button', color:LCARS.colorGen(uiColors), version:'pill', label:'Docs', state:'blink', href:'https://github.com/Aricwithana/LCARS-SDK/wiki'}           
+					]},
+				]},
+
+				//Header Bottom Bars
+				{type:'row', version:'frame', flex:'h', children:[
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors), flexC:'h'},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors)}
+				]}
+
+			]}
+
+        ]},
+
+		//Main Content Area
+        {type:'wrapper', class:'main', flex:'h', flexC:'v', children:[
+
+			//Left Columns & Elbow
+            {type:'wrapper', version:'column', flex:'v', children:[
+                {type:'elbow', version:'top-left', color:LCARS.colorGen(uiColors), class:'step-two'},
+                {type:'button', color:LCARS.colorGen(uiColors)},
+                {type:'button', color:LCARS.colorGen(uiColors), size:'step-two'},
+                {type:'button', color:LCARS.colorGen(uiColors)},
+                {type:'button', color:LCARS.colorGen(uiColors), size:'step-two'},
+                {type:'button', color:LCARS.colorGen(uiColors), flexC:'v'}
+            ]},
+
+			{type:'column', flexC:'h', flex:'v', children:[
+				//Top Bars Group
+				{type:'row', flex:'h', class:'frame', children:[
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors), version:'small'},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors), flexC:'h'},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors)},
+					{type:'bar', color:LCARS.colorGen(uiColors)}
+				]},
+
+				//Main Content Wrapper
+				{type:'wrapper', class:'content', flexC:'v', style:' overflow:auto;', children:[
+
+				]}
+        	]}
+		]}
+    ]}
+]}; 
+
+$(document).on('ready', function(){
+	$(nemesisUI).createObject({appendTo:'body'});
+});
+
diff --git a/interfaces/color-rotation/index.html b/interfaces/color-rotation/index.html
@@ -0,0 +1,46 @@
+<!-- LCARS SDK 16098.3
+- This file is a part of the LCARS SDK.
+- https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
+- For more information please go to http://www.lcarssdk.org.
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
+
+    <title>Alert Colors & Hue Rotation | LCARS SDK</title>
+
+    <!--<base href="/">-->
+
+    <script type="text/javascript" src="../../lcarssdk/js/jquery.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/js/jquery.js"></script>
+	<script type="text/javascript" src="../../lcarssdk/js/webviewinfo.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/js/arrive.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/js/lcarssdk.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/addons/scrollButton/scrollButton.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/addons/levelBar/levelBar.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/bracket/bracket.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/dialog/dialog.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/framing/framing.js"></script>
+    <script type="text/javascript" src="../../lcarssdk/templates/button/button.js"></script>
+
+    <script type="text/javascript" src="module.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/css/lcarssdk.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/addons/scrollButton/scrollButton.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/addons/levelBar/levelBar.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/bracket/bracket.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/dialog/dialog.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/framing/framing.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/templates/button/button.css">
+    <link rel="stylesheet" type="text/css" href="../../lcarssdk/themes/theme_ussNotAffiliated.css">
+
+    <link rel="stylesheet" type="text/css" href="module.css"></head>
+
+</head>
+
+<body ontouchstart="" onload=""></body>
+</html>