I wanted to visualize some 3d data points in Cesium but didn't want to set up a server. I downloaded the Cesium-1.34.zip and just unzipped it in my desktop. I then made an .html file that also sits on my desktop and pulls resources from the Cesium-1.34 unzipped folder. I included some example code from http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PolylineVolume.html&label=Geometries to test it out. The entirety of my code is below:
<!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="Cesium-1.34/Build/Cesium/Cesium.js"></script>
<style>
#import url(Cesium-1.34/Apps/Sandcastle/templates/bucket.css);
#import url(Cesium-1.34/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div class="fullSize" id="cesiumContainer"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net',
key : 'al3lvBftgu3T17GnraSB~sDScxf9wA4dopWEvK2swfA~AlwqHWs4LzhiC2oOHAFYe9dZMVQtYCQHRGyC8Y6Hyq9-109ibBI9suhwFj0RoRAp'
})
});
var greenBox1 = viewer.entities.add({
name : 'Green box with beveled corners and outline',
polylineVolume : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
-90.0, 36.0, 100000.0,
-94.0, 36.0, 0.0]),
shape :[new Cesium.Cartesian2(-50000, -50000),
new Cesium.Cartesian2(50000, -50000),
new Cesium.Cartesian2(50000, 50000),
new Cesium.Cartesian2(-50000, 50000)],
cornerType : Cesium.CornerType.BEVELED,
material : Cesium.Color.GREEN.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
The problem is that the green box that should be appearing on the globe is not there. I don't get any errors from the Developer Tools window. I do get some warnings and messages though:
Warning: DOM7011: The code on this page disabled back and forward caching.
Message: HTML1300: Navigation occurred.
Message: WEBGL11258: Temporarily switching to software rendering to display WebGL content. This application is using Cesium's default Bing Maps key. Please create a new key for the application as soon as possible...
The message about the key is weird because I'm definitely using my own key in the code, though I don't think that would interfere with the entity not appearing with no errors at all. I'm pretty stumped at this point, I would think if an entity can't be displayed there would be an error, but I got nothing. It might be because it really does need to run on a server. Any hints on what I'm missing or how to draw entities on CesiumJS with just a local configuration?
The Bing key error message is still showing up because you have the Geocoder widget visible (by default) on your viewer, and Geocoder uses the Bing API to do its geocoding. You can fix it by specifying the key up front, before you construct a Cesium.Viewer, like this:
Cesium.BingMapsApi.defaultKey = 'your_key_here';
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.BingMapsImageryProvider({
url : 'http://dev.virtualearth.net'
})
});
Also, running Cesium directly from the file:// protocol is not supported, because Cesium relies heavily on assets like textures, web worker scripts, JSON files, and so on. A typical browser prevents JavaScript from a file from accessing other files. So instead, Cesium ships with a small server.js file that you can run with NodeJS to get a small development server going locally to host a copy of Cesium. For more details, see Cesium Up and Running.
After following this advice, the "green box" code from your original question should run just fine.
Related
Sorry for the long post, I've tried to include as much relevant information as possible.
I'm trying to display a card's ID in a card-back-section but it isn't working correctly. I can get the card-back-section to display with static text but I cannot get any variables out of it. When I look at the console (Chrome), there are at least a dozen errors but the one which I think is affecting me is:
section.html:20 Uncaught TypeError: Cannot read properties of undefined (reading 'iframe') at section.html:20:30
What I think is happening is that Trello can't load the t variable for me to get the t.card('id') out of it.
My project in Glitch is extremely simple. It's just these four files:
public/index.html
public/section.html
public/js/client.js
public/js/section.js
index.html contains:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://p.trellocdn.com/power-up.min.js"></script>
<script src="/js/client.js"></script>
</body>
</html>
client.js contains:
var BLACK_ROCKET_ICON = 'https://cdn.glitch.com/1b42d7fe-bda8-4af8-a6c8-eff0cea9e08a%2Frocket-`ship.png?1494946700421';
TrelloPowerUp.initialize({
'card-back-section': function(t, options){
return {
title: 'Parts List',
icon: BLACK_ROCKET_ICON, // Must be a gray icon, colored icons not allowed.
content: {
type: 'iframe',
url: t.signUrl('./section.html'),
height: 150, // Max height is 1500.
};
};
},
'card-buttons': function(t, options) {
return[{
icon: BLACK_ROCKET_ICON,
text: 'Card ID',
callback: function(t){
return t.card('id').then(card=>alert(card.id))
}
}];
};
});
A section called Parts List is indeed displayed on the card which displays the content from section.html. Right now it looks like this:
Parts List:
Line above ID
Line below ID
(The card-button function exists for the sole purpose of testing to see if I could get the t.card('id') that way, and it does work.)
section.html contains:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- This is for visual reference only -->
<div>Line above card ID</div><br>
<div id="card_id"></div><br>
<!-- This is for visual reference only -->
<div>Line below ID</div>
<script src="/js/section.js"></script>
</body>
</html>
section.js contains:
/* global TrelloPowerUp */
var t=window.TrelloPowerUp.iframe();
// you can access arguments passed to your iframe like so
// unlike logic that lives inside t.render() this will only
// be passed once, so don't rely on this for information that
// could change, for example what attachments you want to show
// in this section
var arg=t.arg('arg');
var getCardId=function(t) {
return t.card('id') .get('id') .then(function(cardID) {
console.log('The card\'s ID is: ' + cardID); //Display in the console
document.getElementById("card_id").innerHTML=cardID; // Display in section.html
}
);
}
;
The Iframe connector URL points to the root of my Glitch project.
card-back-section and card-buttons capabilities are turned on in Trello Power-Ups & Integrations admin page.
trelloAPIKey and token are both filled out in the .env section in Glitch, however I don't think I'm using them for anything yet.
I've tried moving the var t = window.TrelloPowerUp.iframe(); to each of the different files in the project with no success. Sometimes I get an "undefined" error for t.card(id) depending on which file it's located inside.
My two questions at this point are:
Why is my browser complaining about the iframe?
Is that the problem I'm having trying to pass/display the t.card(id) variable in section.html?
I create a dynamic web project use JSP file. When I click CTRL + SPACE, the notification is:
No JavaScript Proposals
JSP file:
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="bootstrap450/js/bootstrap.js">
/* HERE, When I click `CTRL + SPACE`, the notification is `No JavaScript Proposals`. */
</script>
</head>
.....
.....
I've clicked Enable auto activation in the JavaScript section in preferences:
Environment : MAC OS and Eclipse JEE Photon.
Here the reference related this, but not solve my issue.
Is it possible to make Eclipse JEE to show javascript content assist in <script> tag?
Project Structure:
|-myproject
|-Deployment Descriptor: myproject
|-JAX-WS Web Services
|-Java Resources
|-JavaScript Resources
|-build
|-WebContent
|-bootstrap450
|-css
|-js
|-bootstrap.min.js
|-META-INF
|-WEB-INF
|-lib
|-web.xml
|-index.jsp
How can I fix it?
The current solutions I know of for displaying JSCad Designs:
https://www.openjscad.org/
https://danmarshall.github.io/jscad-gallery/
https://risacher.org/OpenJsCad
https://johnwebbcole.gitlab.io/vesa-shelf/
https://joostn.github.io/OpenJsCad/
https://github.com/jscad/OpenJSCAD.org/blob/V2/packages/web/demo.html
all need quite some infrastructure to work.
https://www.openjscad.org/
is based on node The Userguide
https://www.openjscad.org/dokuwiki/doku.php?id=user_guide_website
states
The website can be integrated into an existing website.
But does not say how.
https://danmarshall.github.io/jscad-gallery/
Has it's sources at https://github.com/danmarshall/jscad-gallery. These were last modified in 2017 (some 2 years ago as of this post).
It use some dozen javascript files and jekyll to fulfill it's purpose.
Example: https://danmarshall.github.io/jscad-gallery/s-hook
The source code of a page is quite small:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSCAD Gallery s-hook</title>
<link rel="stylesheet" type="text/css" href="/jscad-gallery/site.css"/>
<script src='/jscad-gallery/browser_modules/#jscad/csg/0.3.7.js' type="text/javascript"></script>
<script src='/jscad-gallery/js/jscad-viewer.js' type="text/javascript"></script>
<script src='/jscad-gallery/js/ui.js' type="text/javascript"></script></head>
<body>
<h1>s-hook</h1>
<p>a simple S-hook design</p>
<div id="detail-viewer"></div>
<div id="inputs"></div>
<button onclick="detailView.export('stl', document.getElementById('download'))">Generate STL</button>
<div id="download"></div>
<script>
var design = {
title: "s-hook",
updated: null,
author: "Joost Nieuwenhuijse",
version: "1.0.0",
dependencies: [{"#jscad/scad-api":"^0.4.2"}],
image: "/browser_modules/s-hook/thumbnail.png",
camera: {"angle":{"x":-60,"y":0,"z":-45},"position":{"x":0,"y":0,"z":116}}
};
var detailView = new JscadGallery.DesignView();
detailView.load(document.getElementById('detail-viewer'), design, document.getElementById('inputs'));
</script>
<footer>
Jscad-gallery on GitHub
</footer>
</body>
</html>
I am looking for a (hopefully) simple solution that can be embedded in Mediawiki. For a start a plain html page with a bit of javascript would do for me.
see also:
https://openjscad.nodebb.com/topic/98/displaying-jscad-designs-in-media-wiki-or-plain-html-for-a-start
For a start I created http://wiki.bitplan.com/index.php/ParametricLampShade by simply copying the html from https://risacher.org/OpenJsCad/lampshadedemo.html.
I put the files:
csg.js
lightgl.js
openjscad.js
into the folder extensions/OpenJsCad.
With this simplistic approach i get the error:
Error in line 466: NetworkError: Failed to load worker script at http://wiki.bitplan.com/index.php/csg.js (nsresult = 0x804b001d)
The reasons seems to be in openjscad.js:
// callback: should be function(error, csg)
OpenJsCad.parseJsCadScriptASync = function(script, mainParameters, options, callback) {
var baselibraries = [
"csg.js",
"openjscad.js"
];
var baseurl = document.location.href.replace(/\?.*$/, '');
var openjscadurl = baseurl;
if (options['openJsCadPath'] != null) {
openjscadurl = OpenJsCad.makeAbsoluteUrl( options['openJsCadPath'], baseurl );
}
var libraries = [];
if (options['libraries'] != null) {
libraries = options['libraries'];
}
...
}
the openjscadurl is taken from the basepath which for Mediawiki is ../index.php.
How could I fix this?
What is the minimum set of javascript files needed and would be the proper versions of these files?
Changing the baseurl calculation to:
//alert(document.location);
var baseurl = document.location.href.replace(/index.php\/.*$/, 'extensions/OpenJsCad/');
//alert(baseurl);
fixed the issue.
See http://wiki.bitplan.com/index.php/ParametricLampShade for the result.
As a proof of concept
http://wiki.bitplan.com/index.php/Template:Jscad now has a Mediawiki Template.
I'd still like to learn about the javascript files and versions that should be used. Since the current approach use some outdated javascript files and can't even render the OpenJSCAD logo code from http://openjscad.org
The 1.10.0 version of https://www.npmjs.com/package/#jscad/web allows you to host a JsCad file with a single package. https://github.com/jscad/OpenJSCAD.org/pull/413
While this doesn't directly help you, I have a Vue component that allows you to show a JsCad file at https://gitlab.com/johnwebbcole/vue-openjscad
You may be able to use that to update your Mediawiki plugin.
J
I'm using Here maps Javascript API for the first time. I am working through the HERE user Guide. I have also accessed some online tutorials I have found, which have basically the same code.
(My skill level: I have html, CSS, Python and GIS skills, and have recently done some basic Google maps javascript API).
The first map (using Here User Guide Quick Start chapter) will not load a map. The code is all in the HTML page, as shown in the Guide. (Code is attached below).
* The Here maps page loads presumably - you can see the HERE logo and copyright.
* The example map (Berlin loads).
* The Map only loads if the given settings are retained (zoom=10, LatLong is as given (Berlin)).
* If I move the Lat Long centroid just slightly, only half the map loads. Move to a new location, nothing loads.
* If I try to load a base map, the Berlin eg map also fails to load. (see Code)
* My app_Id and app_Code are included, but the Berlin (eg map) loads without them anyway.
* I signed on for the app_ID yesterday, and my Account page shows my Status as ‘Active’.
I am thinking that:
i) my app_ID and app_Code are failing?
ii) The Berlin eg map is supplied by Here so as not to require app_ID.
Any help to get me past this first hurdle would be appreciated, thanks. Apologies if I've made a glaringly simple error!
Steve
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<font class="tthdg_italic_1">HERE Maps Javascript API</font>
<!-- Map Container -->
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script>
// Initialize the platform object - app_ID and app_Code are included - I just removed for this post
var platform = new H.service.Platform({
'app_id': '{removed}',
'app_code': '{removed}'
});
// Obtain the default map types from the platform object
var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.normal.map,
{
zoom: 10,
center: { lat: 52.5, lng: 13.4 }
});
// ADDITIONAL Code, also stops map from loading
// Change the map base layer to the satellite map with traffic information:
//map.setBaseLayer(defaultLayers.satellite.traffic); // FAILS !!
</script>
</body>
</html>
Your code is correct and should work. This is definitely an issue with your credentials. Please re-check that they are correct and part of an active plan (e.g., that your trial hasn't expired). Also, please remember that the curly brackets are not part of the credentials. If you believe that there is a problem with your account or plan, please contact the HERE account team.
While this is not the cause of your problems, please note that
map.setBaseLayer(defaultLayers.satellite.traffic);
won't work, because you have initialized the default layers under the variable name "maptypes", so this should be changed to:
map.setBaseLayer(maptypes.satellite.traffic);
I have a really simple Delphi XE7 program. It is basically just a TWebBrowser component embedded in a form with no extra code attached, other than a button that fires off the Browser.Navigate method. My understanding is that TWebBrowser is just an ActiveX wrapper for IE.
I am trying to use this to display a very simple page that references the D3 Javascript library (but so far doesn't do anything with it), and the web pages are served from a localhost webserver that is running on my PC using WAMPSERVER.
The web pages run just fine in Chrome or IE 11 (I have Windows 7, 64 bit). But when I try to view them within the Delphi/TWebBrowser program I get the IE error message "An error has occurred on the script on this page" (see image attached). The error seems to occur when trying to access the d3.js javascript library in the d3test/d3 folder on the local host. I have verified that the d3.js file does exist in this folder and this seems to be borne out by the fact that the page runs and displays just fine in both Chrome and IE.
Perhaps there is an issue with having an embedded web browser access locally hosted pages? Additional background -I have also cleared the IE cache, reset the Internet options on the Windows Control Panel, set IE security settings to the minimum level and temporarily disable my Norton Firewall/Virus scanner.
Does anyone have any thoughts on this? I'm really hoping to be able to get some D3 charts embedded in my Windows-based program.
Here also is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3\d3.js"></script>
</head>
<body>
Hello World
</body>
</html>
I added answer from your comments below the question so its may
helpful to others
add this meta tag into your web page
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
In this case you should add this class to your code:
type TBrowserEmulationAdjuster = class
private
class function GetExeName(): String; inline;
public const
// Quelle: https://msdn.microsoft.com/library/ee330730.aspx, Stand: 2017-04-26
IE11_default = 11000;
IE11_Quirks = 11001;
IE10_force = 10001;
IE10_default = 10000;
IE9_Quirks = 9999;
IE9_default = 9000;
/// <summary>
/// Webpages containing standards-based !DOCTYPE directives are displayed in IE7
/// Standards mode. Default value for applications hosting the WebBrowser Control.
/// </summary>
IE7_embedded = 7000;
public
class procedure SetBrowserEmulationDWORD(const value: DWORD);
end platform;
class function TBrowserEmulationAdjuster.GetExeName(): String;
begin
Result := TPath.GetFileName( ParamStr(0) );
end;
class procedure TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(const value: DWORD);
const registryPath = 'Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION';
var
registry: TRegistry;
exeName: String;
begin
exeName := GetExeName();
registry := TRegistry.Create(KEY_SET_VALUE);
try
registry.RootKey := HKEY_CURRENT_USER;
Win32Check( registry.OpenKey(registryPath, True) );
registry.WriteInteger(exeName, value)
finally
registry.Destroy();
end;
end;
Finaly add to your OnCreate of the Form:
TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(TBrowserEmulationAdjuster.IE11_Quirks);
This should solve your problem