Can cesium in a scene to display multiple angles of the camera screen? And hope that the camera's picture with the rotation of the model synchronization changes.thanks.
I don't think you can have two cameras in a scene, however you could have two viewer instances thus having multi-cameras.
I used two viewers to indicate the world map along with an object that was moving. The 2nd viewer showed the point of view of the moving object.
You'd need to handle the viewers entities separately.
var v1 = new Cesium.Viewer('cesiumContainer1');
var v2 = new Cesium.Viewer('cesiumContainer2', {
sceneMode : Cesium.SceneMode.SCENE2D
});
var redEllipse = {
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
name : 'Red ellipse on surface',
ellipse : {
semiMinorAxis : 250000.0,
semiMajorAxis : 400000.0,
material : Cesium.Color.RED.withAlpha(0.5)
}
};
v1.entities.add(redEllipse);
v2.entities.add(redEllipse);
Hope it helps.
The above solution works if you modify the "html body & css" part as follows:
<style>
#import url(../templates/bucket.css);
</style>
<div id="cesiumContainer1" style="position:absolute; top:0; right:50%; bottom:0; left:0;"></div>
<div id="cesiumContainer2" style="position:absolute; top:0; left:50%; bottom:0; right:0;"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
Related
EDIT: I would like to implement it with Jekyll, which (as far as I know) does not have PHP, jQuery, and so on...
I have a simple problem with CSS; it must have a simple solution but I just don't find it.
Suppose one has multiple divs with some classes:
<div class="cat">
<div class="dog">
<div class="bird">
<div class="snake">
...
and in a .css we want to style these 'pet' divs; the style is very similar from class to class (for instance we have some photos cat.jpg, dog.jpg... and want to show them). Can this be achieved by a somewhat symbolic method? Something like
div.pet{
width: 50px;
height: 50px;
background: url("/pictures/pet.jpg") no-repeat 0 0;
...
(but there is no class="pet" nor pet.jpg)
I would use sass:
div {
$list: "cat", "dog", "frog";
// generate classes for list elements
#each $element in $list {
&.#{$element} {
background-image: url('images/#{$element}.jpg');
}
}
}
That's not something you can do with CSS. CSS can only style objects and can't make other changes/additions/deletions of DOM objects.
But it is definitely something you can do with jQuery! If you know that you always have a class name class="cat" that is the same as the file name cat.jpg, you can do something like this:
$("div").each(function(){
var petClass = this.attr('class');
var petImg = petClass + ".jpg";
this.append("<img src='"+petImg+"' ... >");
});
Im not sure what your asking But as far as I understand you want to have some global setting for div elements and change the background image:
https://jsfiddle.net/shtjab2k/
Css
#pets > div
{
width:100px;
height:40px;
border:2px solid black;
float:left;
}
.cat
{
background-image: url("https://i.vimeocdn.com/portrait/58832_300x300.jpg");
}
.bird
{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/2000px-Solid_blue.svg.png");
}
html
<div id="pets">
<div class="cat "></div>
<div class="dog "></div>
<div class="bird "></div>
<div class="snake "></div>
</div>
The simplest, pure-css way to do this is this:
.dog, .cat, .bird, .snake {
width: 50px;
height: 50px;
background: url("/pictures/pet.jpg") no-repeat 0 0;
}
It doesn't matter that the background we provide doesn't exist, we'll replace it in the css for individual pet types:
.dog {
background-image: url("/pictures/dog.jpg");
}
It seems like you're looking for a way to do this in a single ruleset, which, unfortunately, is not possible. For that, you'd have to look into using Javascript or a CSS superset (see other answers on this post).
Otherwise, you can just write a couple more lines of css and set the background image for each pet type. =P
It isn't possible to add different images sources to the image tags with pure CSS. You may need to use JS, JQuery, PHP , etc.
You may do this using JavaScript/JQuery as follows :
Store all the image names in an array and then run a loop on-load(of page) to get images by using those array element(values).
Using jQuery, you may set img source like this:
$("img:nth-child(i)").attr('src', <new path from array[i th element]>);
The nth-child(i) means ith image.
Using Js, you may do this:
var images = [
'path/to/image1.png',
'path/to/image2.png',
'path/to/image3.png',
'path/to/image4.png',
'path/to/image5.png'
];
function loadImages(imgArr, targetId){
for(var i=0; i< imgArr.length; i++) {
console.log(imgArr[i]);
var img = new Image();
img.src = imgArr[i];
document.getElementById('output').appendChild(img);
}
}
loadImages(images);
You can also invode the loadImage() function from yout button:
<button onclick="loadImages(images)">Start</button>
Refer : JavaScript load Images in an Array
In the Javascript portion of The Complete Web Developer Course on Udemy, Rob (the teacher) makes a div randomly become either a circle or square based on a simple if-then statement. But how would I create a square with a completely random border radius?
function getRadius() {
var radius=Math.random();
radius = radius * 100;
}
function makeBox() {
var time=Math.random();
time=time*2000;
setTimeout(function() {
document.getElementById("box").style.borderRadius="50px";
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.display="block";
createdTime=Date.now();
}, time);
}
The program works when I have just have an integer with px after like in the example, but I can't seem to figure out how to change the 50 to the function getRadius, if that makes sense. Nothing appears with
html:
<div id="box" onclick="change();">
<p>click me</p>
<div>
css:
#box{
height:100px;
width:100px;
background-color:red;
}
js:
function change(){
var num = Math.floor(Math.random() * 100);
box.style.borderRadius= num+'px';
};
I need to create a custom marker for Google Map that i am using for my website. I don't want to use an image or polygons for marker, but code the marker in html and add it on the map. Please suggest possible ways to implement it.
Go to this demo-purpose website: http://easysublease.org/mapcoverjs/
It shows how one developer can just write HTML template and CSS, then specify JavaScript Event handlers to create fully customized, Fully HTML specified markers on map.
If you need more, you can go to its Github see readme.md:
https://github.com/bovetliu/mapcover
-------detailed way explaining how it works--------------
First. to be prepared, you need one HTML block to specify how you markers would be like,
such as: (which is an Underscore template, you can choose whatever template, or if you don't need any dynamic thing in your marker, just supply pure HTML, but still needs turn it into compiled template function)
<div class="mc-static2mapcanvas customized-marker">
<div class="content"><%= displayedText %></div>
<div class="text-center remove-background">
<span aria-hidden="true" class="glyphicon glyphicon-triangle-bottom">
</span>
</div>
</div>
Then you need CSS/Less to style it, right? just like styling one common dom on page:
.customized-marker{
background-color: rgba(0, 255, 255, 0);
.content{
background-color: #FF5A5F;
color: #fff;
padding:0px 5px;
font-size: 14px;
}
.remove-background{
padding: 0px;
margin: 0px;
margin-top: -4px;
color:#FF5A5F;
background-color: rgba(255, 255, 255, 0);
}
}
.customized-marker.customized-marker-hover{
.content{
background-color: #252525;
}
.remove-background{
color:#252525;
}
}
Then you can import Mapcover.js and its dependencies to your page containing map.
Please refer the index.html shown at its Github.
Before creating your custom marker, you need one object specify where is the marker, and its event handlers, possibly, like this:
var custom_marker_option = {
anchor: null,
datacontent:{"displayedText":"This Marker1"},
latLng: new google.maps.LatLng(-34.397, 150.644),
map: mapcover.model.get("map"),
mouseover:function(container_node){
console.log("marker heard mouseover");
// console.log(event.latLng);
// console.log(container_node);
var dom = container_node.childNodes[0];
dom.classList.add("customized-marker-hover");
},
mouseout:function(container_node){
console.log("marker heard mouseout");
// console.log(event.latLng);
// console.log(container_node);
var dom = container_node.childNodes[0];
dom.classList.remove("customized-marker-hover");
},
click:function(container_node){
console.log("you clicked me");
}
};
Then you initiate one Class inheriting "CustomMarker" Class provided by mapcover.js like this:
mapcover.initCustomMarker( "CustomMarker1" , _.template( $('#customMarkerTemplate').html() ));
Please be aware of that, $('#customMarkerTemplate').html() is given at beginning of this answer.
and _.template is just one template function provided by Underscore.js. You can choose whatever template compiling function you like.
Now comes the final exciting marker creating
var temp_marker_controller = mapcover.addCustomMarker("CustomMarker1" ,custom_marker_option );
Now, you have created one customized marker specified by HTML template and CSS, and you have also added event handlers to it!
You will need to use a custom Overlay object.
Over here is good tutorial that show how it can be done.
I couldn't find answers for html5 canvas. Can I change the coordinates of the origin, so that my grafics will move altogether to the right for 15px (just an example). Given the following html and css?
<canvas id="g" width="auto" height="auto">Your browser doesnt support canvas tag</canvas>
css:
canvas, section {
display: block;
}
#g {
position: absolute;
width:100%;
height:100%;
overflow:hidden;
}
Sounds like you need a translate transform. Depending on what else you're doing with the context, you may also need to call save() and restore().
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.save();
ctx.translate(15, 0);
// ... do stuff with the transformed origin
ctx.restore();
// ... do stuff with the canvas restored to its original state (if necessary)
I was working on a JavaScript dialog with a transparent background overlay when I ran into a problem on large pages.
If the page was large, the transparent overlay would be a solid colour (i.e. no longer transparent). I did some testing and found this only happened in the overlay was greater than 4096 pixels high (hmmm, suspicious, that's 2^12).
Can anyone verify this issue? Have you seen a work-around?
Here's my test code (I'm using Prototype):
<style>
.overlayA {
position:absolute;
z-index:10;
width:100%;
height:4095px;
top:0px;
left:0px;
zoom: 1;
background-color:#000;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity:0.1;
}
.overlayB {
position:absolute;
z-index:10;
width:100%;
height:4097px;
top:0px;
left:0px;
zoom: 1;
background-color:#000;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity:0.1;
}
</style>
<div style="width:550px;height:5000px;border:1px solid #808080">
Display A = 4096h
<br />Display B = 4097h
</div>
<div id="overlayA" onclick="Element.hide(this)" class="overlayA" style="display:none"></div>
<div id="overlayB" onclick="Element.hide(this)" class="overlayB" style="display:none"></div>
Since you have an opacity filter on the CSS I believe you are indirectly using DirectShow under the covers for alpha blending and image composition. DirectShow uses DirectX textures, which have a 4096x4096 pixel limit for DX9, which would explain this erratic behavior.
How about making the overlay the size of the window instead of the size of the page, and moving it up or down on scroll.
You are operating at the edge already (that's huge...) so I don't know that MS would classify it as a bug or 'fix' it even if it was.
You might need to break it up into smaller overlay DIVs.
Why wouldn't you postion the overlay fixed?
That way it wouldn't have to be as big as the whole page content.
Simply doing:
#Overlay{
position:fixed;
left:0px;
top:0px;
height:100%;
width:100%;
rest of declarations
}
Just make sure it's parent is the document and the document has a width and height of 100%. That way you should be good with a much smaller overlay.
THe posotion:fixed will make sure the overlay is positioned relative to the viewport. Thus its always displayed in the top left corner.
The position:fixed solution is a spotty solution..It is not well supported in IE.
The best thing is to automatically create and append additional transparent elements (with a max height of 2048px to cover XP DX8 which has this issue as well).
Here's the code I used, assuming you already have a floating div solution.
if(document.getElementById('document_body').scrollHeight > 2048)
{
document.getElementById('float_bg').style.height = "2048px";
document.getElementById('float_bg').style.zIndex = -1;
count=1;
total_height=2048;
while(total_height < document.getElementById('document_body').scrollHeight)
{
clone = document.getElementById('float_bg').cloneNode(true);
clone.id = 'float_bg_'+count;
clone.style.zIndex = -1;
//clone.style.backgroundColor='red';
clone.style.top = (count*2048)+"px";
document.getElementById('float_el').insertBefore(clone,document.getElementById('float_bg'));
count++;
this_add = 2048;
if((total_height + 2048) > document.body.scrollHeight)
{
clone.style.height = (document.body.scrollHeight - total_height);
}
total_height += this_add;
}
}
else
{
document.getElementById('float_bg').style.height = document.body.scrollHeight + "px";
}