I downloaded Cesiumjs-1.11 and ran the official Hello World tutorial.
I want to run the same example without relying on nodejs as a server. I tried taking the ./Build/Cesium and using it with the example in the same directory.
CesiumJS runs, but I get this error:
SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
Error: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
at Error (native)
at new p (file:://path/to/Cesium/Cesium.js:433:19773)
at et.createTexture2D (file:://path/to/Cesium/Cesium.js:449:19216)
at H.update (file:://path/to/Cesium/Cesium.js:434:9600)
at S.update (file:://path/to/Cesium/Cesium.js:452:1298)
at m.update (file:://path/to/Cesium/Cesium.js:455:27828)
at vt (file:://path/to/Cesium/Cesium.js:458:15322)
at Ct (file:://path/to/Cesium/Cesium.js:458:18817)
at bt.render (file://path/to/Cesium/Cesium.js:458:25057)
at P.render (file:://path/to/Cesium/Cesium.js:464:4108)
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="Cesium/Cesium.js"></script>
<style>
#import url(Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
What's wrong with this code ?
There's nothing technically wrong with your code and Cesium can work offline embedded into an application without any issues. The problem here is web browser security. If you're just opening the HTML file in a browser, you are still running inside of a sandbox that restricts access to local files, especially when it comes to things like web workers and WebGL. This is preventing required files from being loaded, resulting in an error. This is true in all browsers and you can verify it yourself by temporarily disabling browser security.
For example, in Chrome you can run with the --disable-web-security and the page will load without any errors. Note, in order for this to work you have to make sure no Chrome instance are already running. If you get a warning on startup, you know the option took. There are different options in other browsers (for example IE just prompts you to allow blocked content).
You will still have a problem of missing imagery because the default configuration is expected to run on a server. To fix that, you can explicit define an imagery provider. Here's a complete example that works when web security is disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
</script>
</body>
</html>
I assume you're ultimate goal is trying to use Cesium embedded in an application? If so, none of these security restrictions will apply. Many people are using Cesium in embedded browser controls with success.
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
I have a website which I used the meta name="viewport" content="width=device-width" in it . but the width of that is not match with the width of mobile devices (just mobiles ) . what should i do to match it with the mobiles screen ?
Try adding a style that sets the width dependent on the screen:
body {
width: auto;
}
If you're designing for only mobile devices the W3 site has good tutorials: W3.CSS
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>
<!-- Content here -->
</body>
</html>
Is there a way to add a google font into an internal css? Like for profile layouts?
I've tried embedding all three of these, but I can't get it to change the look of the font on my layout. Does google font work for internal css or only external?
<style>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
#import url(http://fonts.googleapis.com/css?family=Dancing+Script);
</style>
The Google Fonts link needs to be embedded in the head element of an HTML or XHTML document. The thing to understand is that Google Fonts are handled through a Content Delivery Network (CDN). That means that Google hosts the fonts for you.
Here is an example they give on their website:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
You can reference the Google Fonts in an external stylesheet instead of internally as shown here.
i have programmed a website, for a client and now im developing a smartphone template.
I used max-device-width as media query to separate smartphone and tablet.
Everythng is working fine, but iphone 4 zooms the website.
I dont know if i defined viewport wrong or is a bug?
Website is:http://mksgmbh.com
I used following Viewport
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi' name='viewport' />
<meta name="viewport" content="width=device-width" />
I tried to set initial-scale to 1 but it doesnt work too.
As I look at the site now you have mulitple viewport tags. Try removing them all and replacing them with either
<meta name="viewport" content="width=device-width, initial-scale=1.0">
or if you want to prevent user zooming:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
UPDATE
Also, in you media queries you use max-device-width, e.g.
#media only screen and (max-device-width: 760px) {
...
}
Unless you are trying to target specific devices, you could try just
#media only screen and (max-width: 760px) {
...
}
Device width and width aren't the same thing and for responsive design, width will usually get the results you want. This link has some more background info about the differences
Hope this helps!
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>