Has anyone taken the time to extract the timeline widget from the Cesium app? I'm looking to use the timeline widget without the Dojo dependency. I was able to find a teaser saying that it's possible, but the timeline example isn't the easiest to reverse engineer. Does anyone have an idea of how I can extract the necessary libraries and remove the Dojo dependency?
google groups timeline discussion
cesium timeline demo
The timeline itself (outside of that demo app) does not use Dojo. Here's a sample of how this works. You can Run this demo on Sandcastle.
function onTimelineScrubfunction(e) {
var clock = e.clock;
clock.currentTime = e.timeJulian;
clock.shouldAnimate = false;
}
var timeControlsContainer = document.getElementById('timeControlsContainer');
var clock = new Cesium.Clock();
var clockViewModel = new Cesium.ClockViewModel(clock);
var animationContainer = document.createElement('div');
animationContainer.className = 'cesium-viewer-animationContainer';
timeControlsContainer.appendChild(animationContainer);
var animation = new Cesium.Animation(animationContainer, new Cesium.AnimationViewModel(clockViewModel));
var timelineContainer = document.createElement('div');
timelineContainer.className = 'cesium-viewer-timelineContainer';
timeControlsContainer.appendChild(timelineContainer);
var timeline = new Cesium.Timeline(timelineContainer, clock);
timeline.addEventListener('settime', onTimelineScrubfunction, false);
timeline.zoomTo(clock.startTime, clock.stopTime);
clockViewModel.shouldAnimate = true;
window.setInterval(function() {
clock.tick();
}, 32);
Related
I would like to be able to add shapes (for example a circle) on a new layer that I create beforehand.
My request is similar to this question:
Draw circle on a new layer in Photoshop using cep/Javascript but for InDesign.
I tried the code but it doesn't work, I think PathPointInfo (and probably some other stuff) is not in the API of InDesign.
I did a lot of research but couldn't find what I needed
Thank you in advance for your help !
var cr = app.activeDocument.pages[0].ovals.add(); //add a circle in active documents first page
cr.geometricBounds = [10,10,100,100]; //apply geometry to the circle
cr.strokeWeight = 0.1; //adding stroke weight
cr.strokeColor = app.activeDocument.swatches[3]; //choose color from active document's swatch
From here: https://community.adobe.com/t5/indesign-discussions/script-to-create-multiple-circles-in-specific-locations/td-p/10644580
I found a solution using the polygons :
var doc = app.activeDocument;
var page = doc.pages.item(0);
var pl = page.polygons.add();
var myArr = [
[258,583],
[255,583],
[255,582],
[254,582],
[253,580],
[250,579],
[249,578],
[248,576],
[248,575],
[248,574],
[246,573],
[246,571],
[246,570],
[246,566],
[246,565],
[246,564],
[249,562],
[250,561],
[252,561],
[253,561],
[255,561],
[257,561],
[258,561],
[262,561],
[263,561],
[264,560],
[264,561],
[264,562],
[264,564],
[264,565],
[264,566],
[264,567],
[264,570],
[264,571],
[264,573],
[264,574],
[264,575],
[264,576],
[263,576],
[262,578],
[262,579],
[261,579],
[259,579]
];
pl.paths.item(0).entirePath = myArr;
I'm using a C# library in which I'm unable to select path of a svg image.
I'm developing a hybrid mobile application, using the Xamarin.Forms platform where I have to display svg image and I have to highlight the selected parts. So, I have added SVG nuget package. The SVG image is working fine but, I am unable to find the selected parts. Can anyone please help me?
var svgPaths = new List<string>
{
"SampleApp.Images.sample1.svg",
};
var grid = new Grid
{
RowDefinitions = new RowDefinitionCollection(),
ColumnDefinitions = new ColumnDefinitionCollection()
};
var svgPath = svgPaths[0];
var svgImage = new SvgImage
{
SvgPath = svgPath,
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
HeightRequest = 400,
WidthRequest = 400,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
BackgroundColor = Color.White
};
grid.Children.Add(svgImage);
i am trying tp use a png as a mask in Cocos2d-JS
like so:
this.mask=cc.Sprite.create(cache.getSpriteFrame("bar_mask"));
this.maskedFill = cc.ClippingNode.create(this.mask);
this.maskedFill.setAlphaThreshold(0.5);
But it does not work ...
I found in other posts, that I have to enable the stencil buffer like
CCSetupDepthFormat: #GL_DEPTH24_STENCIL8_OES
But I have no idea how / where to do that in Cocos2d-JS
can anyone help?
Thanks!
It works for me without any additional depthFormat settings.
I'm using single-file engine cocos2d-js-v3.7.js
Here's the minimal code (hope it helps):
var game = cc.Layer.extend({
init:function () {
this._super();
backgroundLayer = cc.LayerColor.create(new cc.Color(40,40,40,255), 320, 480);
var target = cc.Sprite.create("resources/doge.png"); /*child to clip*/
var mask = cc.Sprite.create("resources/doge-mask.png"); /*mask*/
var maskedFill = new cc.ClippingNode(mask);
maskedFill.setAlphaThreshold(0.9);
maskedFill.addChild(target);
maskedFill.setPosition(144, 224);
backgroundLayer.addChild(maskedFill,0);
this.addChild(backgroundLayer);
}
});
I am creating a famo.us app in which header footer and content area is there. In content area different views are rendering using RenderController on action of each other and in each view different sub views are there. Events are communicating through java script using document.dispatchEvent() and addEventLiserner() method instead of famo.us events. I just want to ask that whether it is worth using this listener functions.
As I have tried through famous events like setInputHandler, setOnputHandler, emit , addListener, pipe given in famo.us documentation, But I cannot able to communicate using this.
The main question is the static app created by me is taking huge time when loaded from server and animations are running very slowly. Is there any solution for this.
Actually code is too long dummy example is below. I am creating an application having header footer and content view. In Content view I am rendering different views using renderController.
Content View
define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var LoginView = require('views/login/LoginView');
var AccountsView = require('views/login/AccountsView'); //need to call on login
function ContentView() {
View.apply(this, arguments);
var renderController = new RenderController({
inTransition: {curve: Easing.easeOut, duration: 1000},
outTransition: {curve: Easing.easeIn, duration: 1000},
overlap: true,
});
var loginview = new LoginView();
renderController.show(loginview); //rendered initially
this.add(renderController);
document.addEventListener("showAccountsView",function(){
var accoutsView = new AccountsView()
renderController.show(accoutsView);
}.bind(this));
}
});
Login View
define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var InputSurface = require("famous/surfaces/InputSurface");
function LoginView() {
View.apply(this, arguments);
var loginBoxContainer = new ContainerSurface({
classes:["backfaceVisibility"],
size:[undefined,295],
properties: {
overflow: 'hidden',
padding:'0 10px'
}
});
this.add(loginBoxContainer);
var userInput = new InputSurface({
size: [undefined, 45],
});
var userInputModifier = new StateModifier({
transform: Transform.translate(0,53,1)
});
var pwdInput = new InputSurface({
classes:["pwdInput"],
size: [undefined, 45],
});
var pwdInputModifier = new StateModifier({
transform: Transform.translate(0,100,1)
});
loginBoxContainer.add(userInputModifier).add(userInput);
loginBoxContainer.add(pwdInputModifier).add(pwdInput);
var submit = new Surface({
content:["Submit"],
size:[100,30],
});
submit.on("click",function(){
document.dispatchEvent(new Event("showAccountsView"));
});
loginBoxContainer.add(submit);
}
});
I have to render different view on clicking ligin submit button. I have used dispatchEvent and addEventListener of Javascript to make communication between two files. I want to use famous events. I have tried various ways using setInputHandler, setOnputHandler, emit , addListener, pipebut could not able to do that as data and listener functions cannot calling. Please explain..
Inside LoginView, replace this code:
submit.on("click",function(){
document.dispatchEvent(new Event("showAccountsView"));
});
with:
submit.on("click",function(){
this._eventOutput.emit('showAccountsView', { data: someValue });
});
In ContentView, replace:
document.addEventListener("showAccountsView",function(){
var accoutsView = new AccountsView()
renderController.show(accoutsView);
}.bind(this));
with:
loginView.on('showAccountsView', function(data){
var accoutsView = new AccountsView()
renderController.show(accoutsView);
}.bind(this));
Creating a new object on mouseclick as a way for users to create reference points (which I call 'crumbs') when reading large web documents. I've got this working with a new Image() function, however, that won't let me assign a tabindex to each new image created by mouseclick (posX, posY). 'crumbtoggle' simply acknowledges that the crumb dropping tool has been selected.
working new Image() function:
function draw_crumb()
{
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
var crumb = new Image();
crumb.src = "crumb.gif";
if(crumbtoggle.className == "on")
{
b_context.drawImage(crumb, posX-20, posY-20, 50, 75);
}
}
non-working new Object () function:
function draw_crumb()
{
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
var crumb = new Object();
crumb.type = "button";
crumb.src = "crumb.gif";
crumb.tabindex = 1;
if(crumbtoggle.className == "on")
{
b_context.drawObject(crumb, posX-20, posY-20, 50, 75);
}
}
I've looked in to applying focus to the new Image objects, but that doesn't seem to be a good alternative to tabindex attributes. Any ideas would be greatly appreciated.
An HTML5 Canvas is like a real-world canvas with instantly-drying paint. When you paint a rectangle or line or image on the canvas, it becomes part of the canvas. You cannot later re-order the items, or move them relative to each other. It is not a separate entity that can get focus.
Any sort of focus management integrated with the browser's handling of focus will have to be done through form inputs or anchors recognized by the browser.
It's not clear to me why you need a canvas, or if you need one at all.