Intel XDK Crosswalk - Force Landscape - android-layout

I made an Android app in HTML5 and I compile it using Intel XDK + Crosswalk. Does anyone know how to force the app to open in landscape mode?

window.screen.lockOrientation("landscape"); will force landscape in Crosswalk builds.
here is sample code:
<!DOCTYPE html>
<html>
<head>
<title>Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
window.screen.lockOrientation("landscape");
</script>
</head>
<body>
<h1>Landscape</h1>
</body>
</html>

We have not yet added the build controls you need to force opening in landscape in a Crosswalk app. We are working on our Cordova build system, which includes such controls. When that system is working correctly we'll migrate it over to the Crosswalk build system. At that point you should be able to control that aspect of your application.

I just wanted to say that it is possible to set the orientation to landscape if you use Crosswalk. Only problem is you will have to install crosswalk on your own server so that you are able to edit the .py file and edit the part about the AndroidManifest.xml and set the orientation to landscape. So it's not possible yet with XDK but it is possbile on your own server.

You can add the property the manifest.json
you can add the property in file manifest.json
Example:
{
"name": "my app name",
"start_url": "index.html",
"orientation": "landscape"
}
With this you will force all app to use landscape orientation.
Reference:
For More information orientation: Orientation Documentation
For More information manifest: Manifest Documentation

Related

setting MaterialDesign desktop theme in JS from pre compiled theme.css

I used Angular 1 years ago but everything has changed....so I feele like an idiot. I'm using a material design implementation from "unpkg" in a simple desktop based javascript web application. without SCCS, React, etc.
Trying to activate a theme compiled using the theme builder at https://m3.material.io/theme-builder but there are no examples of how to put it into use.
In a simple single page app I have included the unpkg material components like so, following their readme, and a theme package created using the Material site's theme builder
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"** href="/xxxx/assets/css/theme.css"**>
<script type="text/javascript"
src="https://unpkg.com/material-components-web#latest/dist/material-components-web.js">
</script>
<script type="text/javascript"
src="https://unpkg.com/material-components-web#latest/dist/index.js">
</script>
<link type="text/javascript" src="/xxxxx/assets/app.js">
<html>
....
</html>
<script>mdc.autoInit()</script>
But I don't know how/where to put the compiled theme into action. I just get the default theme within the material components within the page. One issue is that while the theme builder explicitly says its for m3, I don't know what version of Material unpkg is giving me. The only example I can find is in back-end code in a c# application. This is an entirely front-end generated UI.
The theme compiled by the theme builder is not compatible with material-components-web. material-components-web is M2 implementation. At the moment there is no M3 web implementation, only work in progress - https://m3.material.io/develop/web

How do I fix a web page showing fine on PC but appearing tiny on mobile

If you look at my website at vrbluedog.com, you can see that the home page and venue pages appear fine on PC and mobile phones, but the navigation pages (which you can see by clicking the "Find VR Service") appear tiny on mobile phones.
Can someone please tell me what code I need to add to make the navigation pages appear readable on mobile phones?
Thanks a lot guys,
Ana
Make sure this html tag is inside your meta on all pages.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Here is an explanation on what this tag is, and why it is needed for mobile websites: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

My asp.net core app doesn't find favicon.ico when it's deployed to IIS

When I run my app in visual studio 2017 using IIS Express it is able to locate the favicon.ico in the wwwroot folder.
When it's deployed to IIS on a server then it can't find it.
I think it has to do with the url...
in development the url is https://localhost:44359
The favicon show up and if I manually type https://localhost:44359/favicon.ico then it returns it.
in production the url is https://localhost/reporting
The favicon doesn't show up and seems to be looking for it at https://localhost/favicon.ico (which returns a 404).
If I change that to http://localhost/reporting/favicon.ico then it returns the icon.
Can someone please suggest why it's not automatically looking for the icon under /reporting/ ??
I have a couple of routing issues as well, but other than that the app seems to work fine. I think the routing issues may have the same cause as the favicon.
Browsers only check example.com/favicon.ico - they don't check in subfolders.
If you're putting it somewhere non-standard (you are!), you'll need to point browsers to it. In the <head> of your pages:
<link rel="shortcut icon" href="/reporting/favicon.ico">
There is an issue with finding static resources for applications that are in subfolders of a website. However, in Razor pages, in the <head> you can use:
<link rel="shortcut icon" href='#Url.Content("~/favicon.ico")'>
where the ~ refers to your application's wwwroot folder.

Displaying html5 content in c++ WebBrowser control

I'm trying to load html5 (built with bootstrap) page in c++ app, using standart WebBrowser control, first few seconds it looks like in the normal browser, then it switch to look like ie8 mode.
FEATURE_BROWSER_EMULATION is set correct, doctype set correct too.
Using native ie9 browser, all looks fine.
How to make it to display content correct in WebBrowser component?
OS: Win7x32sp1, ie9, ms visual c++ 2008
To instruct the webbrowser control to render your page as HTML5 you need to add the tag at the beginning of your file as follows:
<!doctype html>
<html>
<!-- rest of the page content -->
</html>

Creating webpages for my Professor

I have to come up with some good looking webpages for my professor which will include pages for topics like research work, current students, alumni, paper published, etc.
Can someone please help me by leading me to some good tutorial in website development ? I have planned to use Adobe Dreamweaver for this ? Is this a good software to start with as i have no prior experience with website development or creating webpages.
DreamWeaver: Not bad!
Just stay away from 'template' feature (updating DW templates makes a big MESS).
DreamWeaver Kick Start
Here's some basic information about DreamWeaver : http://www.haverford.edu/acc/docs/software/dreamweaver/welcome.htm
Website Templates
You can even skip designing your website from scratch and find a pre-fabricated one that suits you, with sites like these : http://www.steves-templates.com/
Web Design Kick Start
In case you're still set on designing a website from scratch (a great idea! but more work), it's hard to give out just one link for web-design. I think webdesign has two components : knowing HTML/CSS/etc, and making it "work". Here's a webpage (ugh ads) full of good advice by example, rather than by novel.
http://www.webpagesthatsuck.com/
Dreamweaver will be hard to learn if you cannot pick up the tools properly, because if you are not using the tools within Dreamweaver you might as well use a different text editor with syntax highlighting :
Notepad (or Notepad++)
Vim/Emacs
Coda
Along with a ftp and a local server to test (XAMPP/IIS) your webpages before displaying it to the public.
University webpages are very simple and not very heavy on design (at least from what I have seen).
So you are really only going to need to know what the following mean
<html>
<body>
<head>
<meta>
<title>
<p>
<strong>
<a>
<img>
and focus on the content being served.
And this is a bare html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Please do not use w3schools. Use it for a quick reminder every once in a while as to what certain tags do but do not use it for practice.
So start off with Opera Web Standards Curriculum as said there:
This is a web standards course
comprised of several articles, aimed
at pretty much anyone who wants to
learn web standards–based web design
from scratch. It is intended to take
the reader from nothing more than a
basic familiarity with browsing the
web, to being competent with CSS and
HTML, and have basic knowledge of
JavaScript and how it fits in to the
puzzle.
If you still choose to go the Dreamweaver way here are some supporting articles
Getting Started with Dreamweaver CS3
Getting started with Dreamweaver CS4
Learn Dreamweaver CS5

Resources