How to format for mobile?

[corpr8]

Hi There,

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

Many thanks...

[Aricwithana]

https://github.com/Aricwithana/LCARS-SDK/wiki/$.viewport(%7B%7D);

The call will scale the container the UI is within at the aspect ratio of the container.

[corpr8]

Could you show me an example of this please? Thanks!

[Aricwithana]

This is from the main website, lcarssdk.org. Check it out in Inspector!

function initFunc(){
    $('.scaler').viewport('scale', {width:1100, height:980, max:true})
    window.onresize = function(event) {
       $('.scaler').viewport('scale', {width:1100, height:980, max:true}) 
    }
}

$('.scaler'), if you inspect the DOM, '.scaler' is the container the website UI is held within. The width/height is the value of the native size of your UI, the website being 1100x980. The arg 'max', because it is set to true, will not scale the UI beyond the 1100x980,

[corpr8]

Got it - so the viewport is always scaled to the same aspect ratio. In other words I need to build a seperate UI for smartphone as a desktop aspect ratio is always going to leave big holes around the edge when serving in portatrait mode on smartphone (top and bottom).

I seperated out the UI js then included this script to switch UI based on the devices UA:

/*

• Dynamically load the right UI based on the viewport UA */

function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) }

if(webviewInfo.type != 'mobile'){ loadjscssfile("lcarssdk/js/UILogicDesktopTablet.js", "js") //dynamically load and add this .js file } else { loadjscssfile("lcarssdk/js/UILogicMobile.js", "js") //dynamically load and add this .js file }

//Where UILogicDesktopTablet.js is the existent UI and UILogicMobile.js is the new form factor to be played with...

[Aricwithana]

Generally, yea. Ah yep that is how ive done it in the past, mobil uses a different ui definition and chooses which to load via the webview variable.

Remember to, if you edit core code, override the expression in your module and not lcarssdk.js so you can easily upgrade the library with new releases.

Give a shoutout once your done, ill throw a link on socials for others to find if ya want!

[corpr8]

I forked it here: https://github.com/corpr8/LCARS-SDK

The UX now switches based on UA and I used your website as a template - however, not great at your syntax so any help / examples in the Mobile viewport would be fantastic.

[Aricwithana]

Coo coo! The click/touch event binders use the same variable to decide which event mode to go with.

Which part of the syntax ya need help with?

[corpr8]

Whats flex versus flexC?

Another thought: you could extend the dynamic loading idea further and make it reload on device reorientation - that way, you could have a completely adaptive template which would always look good...

[Aricwithana]

flex is for the parent, flexC is for the children, pass 'h/v' for the needed orientation. Flex isn't perfect but decent enough atm for nice LCARS layouts when not simply scaling the parent viewport.

I'll take a futher look at the dynamic loading. The SDK isn't made specifically for any single implementation. I utilize it more in controlled webviews for applications. Others will use it different ways so with this being a collection of tools, if it works out nicely, we can add your code to the SDK as an addon module.

[corpr8]

Ok - the fork now supports device reorientation on smartphone! :-)

Also packaged it with a nodejs server.

Next up... Voice recognition maybe

[Aricwithana]

http://syl22-00.github.io/pocketsphinx.js/

Or if one uses an online connection there is the google speech web api.

Awesome on the screen rotation. With me using it for application UI and not web pages, Crosswalk is used and has the web api for it.

If you would like to chat via Skype or whatnot, hit up my gmail account and I'll pass ya the info! I also am providing basic forums for anyone developing using the SDK if they would like.

[corpr8]

Was thinking about going the Google Speech API route and then taking the translation streams and piping those back to the server over socket.io and then having the server recognise phrases etc.

Gotta do some work today so may start that this evening.

I'll drop you a line also, quite interested in the forums etc!

[Aricwithana]

Sounds awesome! Excited to hear from ya! I've got my own things the SDK is used for but the large goal is having others utilize it in their own projects!

[corpr8]

Ok - going to start on voice rec! :)

[corpr8]

Ok - so got voice rec to work - how do I dynamically insert new elements at runtime? (Other than the obvious JQuery route)

[corpr8]

Ok - so the latest version is up on github. It has voice recognition (on latest Chrome) and streams the commands via socket.io back to the node server

so, its basically Siri. Now to teach it how to control my Spark Core...

[Aricwithana]

Awesome! I'll take a look at it here. I do know I"ve been looking for a person who knows Node pretty well that would be able to edit/expand the Node-Webkit project. It is the only reason I've not done an 'app' for the SDK yet for desktop.

[corpr8]

Ah right sounds like fun. Is the project on git hub?

Sent from my Samsung Galaxy smartphone.

-------- Original message -------- From: Aric notifications@github.com Date:21/10/2014 16:05 (GMT+00:00) To: Aricwithana/LCARS-SDK LCARS-SDK@noreply.github.com Cc: Paul corpr8@hotmail.com Subject: Re: [LCARS-SDK] How to format for mobile? (#1)

Awesome! I'll take a look at it here. I do know I"ve been looking for a person who knows Node pretty well that would be able to edit/expand the Node-Webkit project. It is the only reason I've not done an 'app' for the SDK yet for desktop.

---

Reply to this email directly or view it on GitHub: https://github.com/Aricwithana/LCARS-SDK/issues/1#issuecomment-59941996

[Aricwithana]

Not yet, I've just got a basic Node-webkit branded viewer, nothing else extra for it. If we can talk privately I'd love to see what we could do together! I've got lots of project plans just lack of time and skill for the backend stuff since I'm mainly a front end dev/designer.

All I know is that Node-webkit can be used to create a LOT of things, even as a 'window manager'.

[corpr8]

Let's talk. I put my email on my git hub account...

Sent from my Samsung Galaxy smartphone.

-------- Original message -------- From: Aric notifications@github.com Date:21/10/2014 16:45 (GMT+00:00) To: Aricwithana/LCARS-SDK LCARS-SDK@noreply.github.com Cc: Paul corpr8@hotmail.com Subject: Re: [LCARS-SDK] How to format for mobile? (#1)

Not yet, I've just got a basic Node-webkit branded viewer, nothing else extra for it. If we can talk privately I'd love to see what we could do together! I've got lots of project plans just lack of time and skill for the backend stuff since I'm mainly a front end dev/designer.

All I know is that Node-webkit can be used to create a LOT of things, even as a 'window manager'.

---

Reply to this email directly or view it on GitHub: https://github.com/Aricwithana/LCARS-SDK/issues/1#issuecomment-59949053