aricwithana / lcars-sdk Goto Github PK

Hi There,

Is there a built in way to scale the viewport for a mobile device?

Many thanks...

Some servers, such as Apache on Linux, are case-sensitive by default. In the interfaces/visual-guide/index.html both the directory and filename "scrollButton" is used, while the actual file and directory is "scrollbutton." Either rename the file & directory, or change the case in the index.html (what I just did).

Btw, nice looking library. I'm contemplating setting it up with my home automation system.

Also, just in case you haven't already noticed, your main site (lcarssdk.org) is currently offline. It crashed somewhere around 6 or 7PM EST from what I can tell (I was looking at your Voyager demo one minute, and an error message the next).

Let me start by complimenting you on this breathtaking API. LCARS was one of the reasons I stayed so passionate with software engineering--specifically UI and layout engineering.

So, I've been happily trying to understand and deconstruct your approach. It's fabulous! However, I did find one small, but significant detail that I commonly question with LCARS implementations: the Elbow. From my research, the inner and outer radii share a commonality with the content of the inner pane, or the margin. Specifically, this is what I have observed (taken from a screenshot of Star Trek: Nemesis):

Essentially, the radius of the outer border works harmoniously with the radius of the inner border. I'm not sure in this instance what the inner border's formula is.

Now, if I take the same radii measurements from /interfaces/color-generator/index.html, I notice that the outer radius is only dependant on the largest side's main axis (in this case, the left width):

Take into account the relationship between the inner and outer radius:

The difference side by side:

Luminance-overlayed:

All in all, I know it might seem a bit nit-picky, but I've always been fascinated by the subtleties that Okuda used to convey relationships between sets of data. I just thought I would throw this in here for discussion.

For what it's worth, this is a great article about shared border radii... a quick and lovely read: http://joshnh.com/weblog/getting-inner-border-radius-just-right/

This is what I get from the latest release:

Should there be a font bundled with the release & referenced in the CSS?

for example ... this doesn't work ...
var nemesisUI = {type:'wrapper', id:'wpr_viewport', version:'row', class:'scale red-alert', flex:'h' ...

but this does ...
var nemesisUI = {type:'wrapper', id:'wpr_viewport', version:'row scale red-alert', flex:'h' ...

I registered a few buttons with custom handlers using the "click" attribute. This works fine from my desktop, but fails on the phone (Android Chrome).

After a few false leads (I also see warnings of "target-densitydpi is not supported" and "touchstart input event was delayed ... Consider markign event handler as passive"), I've found and tentatively fixed the issue.

In lcarssdk.js, the click handler (around line 248) registration is conditional on '"webviewInfo.input !== "touch"' If I comment out this condition, then everything works as expected.

The same check exists in several other handlers as well and looks to be part of larger touchscreen support that I suspect is deprecated by recent jquery library versions (the 'click' event works for taps/touches, whether it's from a phone or touchscreen laptop, and is still distinct from other touch gestures).

any objections to creating a archived section on the wiki? to document the older versions (3.xx)?
I'm willing to collect the old pages and assemble them into a single page that could be added to the wiki?

I understand that the button active states are rem'ed out by default and are commented to be optional ... but the active to inactive transitions on the elbows are staggered and uneven (giving a weird glitching fade) ... here's my fix ... but is there another way to fix this without giving up the delay?

  [class*="bg-"], 
  [class*="bg-"] > *:not([class*="bg-"]){
-	transition:background-color .25s linear, border .25s linear;       // Change this ...
+  	transition:background-color linear, border linear;                 // to this  ...
  }

Since $.createObject({}) has been eliminated how do we get things started? Do we use the LCARS.create() API on every element ... or does LCARS.create() now handle things like createObject() did?

From:

var exampleUI = {type:'wrapper', id:'wpr_viewport', version:'row', flex:'h', arrive:function(){$(this).viewport('zoom', {width:1920, height:1080});}, children:[
......
$(document).on('ready', function(){
	$(exampleUI).createObject({appendTo:'body'});
});

To:

var exampleUI = {type:'???', id:'wpr_viewport', version:'row', flex:'h', arrive:function(){$(this).viewport('zoom', {width:1920, height:1080});}, children:[
......
$(document).on('ready', function(){
        $('body').append( LCARS.create($(exampleUI)).dom );
});

I'm trying to implement viewportZoom. I'm using the example give on the wiki ... but i get the error ...
Uncaught TypeError: Cannot read property 'css' of undefined at Object.viewportZoom
here is the code where it's being setup ... in my module.js file

{type:'wrapper', id:'wpr_viewport', version:'row', flex:'h', 
	arrive:function(){LCARS.helper.viewportZoom(this.dom, {width:1440, height:1080}); 
		window.addEventListener("resize", function(){LCARS.helper.viewportZoom(this.dom, {width:1440, height:1080});});},

	children:[

and the line(s) in the sdk ...

        viewportZoom:function(object, oArgs){
.......
            object.css('zoom', zoomLevel);

the error(s) only occur during the resize eventListener call ... it works fine when called from the arrive call ... seems this.dom behaves differently depending on who calls it ... a promise or event ...

The provided template example in the wiki is missing a javascript file (module.js)

Hi,
I've seen that you are using Adobe Illustrator files for mockup and CSS extraction.
Which version are you using, cause CS2 says it was made with an higher version?

Thanks,

sg-x

I changed my default-bracket.css file back to the way the css selector was setup in v3.11 ... and it's working for me ... but I'm assuming there was a intent to using the animated class ...

//.sdk.default-bracket .animated { position:absolute; max-width:100%; min-width:100%; -webkit-animation: bracketAnimation 5s linear infinite !important; animation: bracketAnimation 5s linear infinite !important;}
//.sdk.default-bracket .animated{ position:absolute; max-width:100%; min-width:100%; -webkit-animation: bracketAnimationR 5s linear infinite !important; animation: bracketAnimationR 5s linear infinite !important;}

.sdk.default-bracket > .column .bar .bar{ position:absolute; max-width:100%;min-width:100%;  -webkit-animation: bracketAnimation 5s linear infinite !important; animation: bracketAnimation 5s linear infinite !important;}
.sdk.default-bracket > .column ~ .column .bar .bar{ position:absolute;  max-width:100%; min-width:100%; -webkit-animation: bracketAnimationR 5s linear infinite !important; animation: bracketAnimationR 5s linear infinite !important; }