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));
Related
After my dashboard initializes and is fully loaded, I need to get the window height of the embed inside the iframe. Ideally, I'd like to get innerHeight inside of onFirstInteractive, but am unable to do so.
function initViz() {
var containerDiv = document.getElementById("vizContainer");
var url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms";
var options = {
onFirstInteractive: function() {
// How do I get the height of the rendered contents?
}
};
var viz = new tableau.Viz(containerDiv, url, options);
}
Subscribe to the VIZ_RESIZE event, it provides the new dimensions of the iframe on initialization and resize:
viz.addEventListener(tableau.TableauEventName.VIZ_RESIZE, function(event) {
console.log(event.getAvailableSize());
});
Which gives the following:
When the iframe appears like this:
If you absolutely want to retrieve the information in onFirstInteractive, you can do this:
onFirstInteractive: function(viz) {
const iframeStyle = viz.$1._impl.$1h.style;
const { height, width } = iframeStyle;
console.log({ height, width });
}
But it's a little bit hacky because this solution uses properties that are not supposed to be public, so this kind of code may break on future Tableau JS library updates.
An inherited project has been implemented using old deprecated methods.
A button loads a new page like so:
main.js
var thisWindow = Ti.UI.currentWindow;
var nav = Titanium.UI.iOS.createNavigationWindow({
window: thisWindow
});
nav.open();
myButton.addEventListener('click', function(evt) {
var detailWindow = Ti.UI.createWindow({
backgroundColor: '#333333',
exhibitLat: latitude,
exhibitLon: longitude,
url: 'mapPage.js'
});
thisWindow.nav = nav;
nav.openWindow(detailWindow, {
animated: true
});
};
On mapPage.js it refers to Ti.UI.currentWindow() to use data from main.js like so:
mapPage.js
var window = Ti.UI.currentWindow;
var Latitude = window.latitude;
var Longitude = window.longitude;
How can I reproduce this method to successfully pass parameters to mapPage.js with require?
Been scratching my head on this for a while - so some help (with code examples 😀 ) would be most welcome! Thanks
The url property is indeed very outdated. Instead you should create the window inside mapPage and return that.
mapPage.js:
exports.createWindow = function(latitude, longitude){
var detailWindow = Ti.UI.createWindow({
backgroundColor: '#333333',
exhibitLat: latitude,
exhibitLon: longitude,
url: 'mapPage.js'
});
return detailWindow
}
Then your main.js will look like this:
var nav = Titanium.UI.iOS.createNavigationWindow({
window: thisWindow
});
nav.open();
myButton.addEventListener('click', function(evt) {
thisWindow.nav = nav;
var detailWindow = require('mapPage').createWindow(latitude, longitude);
nav.openWindow(detailWindow, {
animated: true
});
};
I also stripped out the thisWindow section. If that gets its "currentWindow" the same way mapPage.js got it, you need to replace it with something similar as displayed here.
I am using PptxGenJS.js in my project which consists of graphs across various dashboards(pages/views),
I have a specific requirement where once the user adds a graph(SVG image) as a slide to the PptxGenJS object it should be maintained throughout the application till the user clicks on export ppt.
Please go through the below explanation for better understanding.
I initialise the PptxGenJS object in the layout.cshtml which is common for all the views.
var thispptx = new PptxGenJS();
And now in each view, there are multiple graphs, When the user clicks on Add To PPT button as shown below,
The slide gets added to the PPT
The SVG file gets added to the previously created PptxGenJS object.
i.e.
$('#Chart1PPTId').click(function ()
{
var pptslide1 = CreateSlide("#barChartz1", "bar",thispptx,CustomlabeltextForPPT);
});
function CreateSlide(divId, ChartType,pptx,SearchCriteria) {
var slide = pptx.addNewSlide()
var svg;
if (ChartType != "guage") {
svg = EntryPoint.getChartsvg(divId);
}
else {
svg = EntryPoint.getGuageChartsvg(divId);
}
var DOMURL = window.URL || window.webkitURL || window;
var svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svgBlob);
slide.addImage({ path: url, x: 0.5, y: 0.5, w: 9.0, h: 4.5});
slide.addText('Search Criteria : ' + SearchCriteria, { x: 0.1, y: 5.2, font_size: 12, color: '363636' });
return slide
}
Now after adding several slides to the PptxGenJS object the user will click on Export to PPT button which will export it as a PowerPoint Presentation.
So my problem is that all of this works fine within the current page/view.
But my requirement is to maintain the same PptxGenJS object across all the views, which is not currently possible as I have initialised the PptxGenJS object in the layout which loads for every page/view (so a new PptxGenJS object is created for every view/page)
Is there a better way to handle this situation of mine?
I have an electron app that runs in the menubar.
Code is currently heavily based on an existing pomodoro app (https://github.com/G07cha/pomodoro)
When the timer hits a certain point, it opens up a message box:
ipc.on('end-timer', function() {
$('.timer').circleProgress('value', 1);
var isRelaxTime = remote.getGlobal('isRelaxTime');
dialog.showMessageBox({
type: 'info',
title: 'Pomodoro',
message: (isRelaxTime) ? 'Timer ended it\'s time to relax' : 'Back to work',
buttons: ['OK'],
noLink: true
}, function() {
if(isRelaxTime) {
$('.timer').circleProgress({fill: { gradient: ["blue", "skyblue"]}});
} else {
$('#counter').text(remote.getGlobal('pomodoroCount'));
$('.timer').circleProgress({fill: { gradient: ["orange", "yellow"]}});
}
ipc.send('start-timer');
});
});
Is it possible to open a new window instead of the message box, and make it full screen?
Basically, making sure the user sees it and it fills the screen when the timer is up and allowing customization of the page that comes up with css and such.
It depends if you want to fire a new renderer from an existing renderer or if you want to spin it up from the Main Process.
Either way its as easy as creating a new BrowserWindow instance and loading a URL to an HTMl file you want to load.
If you want to spin up a renderer from an existing renderer you will need to require the remote module first. Here is an example:
const remote = require('remote');
// create a new BrowserWindow and pass it an object of options
var msgWindow = new remote.BrowserWindow({
// full width & height of monitor without going into kiosk mode
width: remote.screen.getPrimaryDisplay().size.width,
height: remote.screen.getPrimaryDisplay().size.height
//, other options
});
// load your message file into new browserwindow
msgWindow.loadURL('file://' + __dirname + '/index.html');
// set variable to null when window is closed to clean it up
msgWindow.on('close', () => {
msgWindow = null;
});
If you did this from the the Main Process, then replace const remote = require('remote'); with:
const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;
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);