Develop Reference

lightweight-charts - How to setup a chart background collor to black?

I am using the [lightweight-charts] javascript library to generate some charts. For this example I am using the Realtime emulation chart.
In this example the background color is white. I would like to set the background color to black. I am following the documentation but I can't achieve the goal.
Following is the code I am using but it is not working:
var chart = LightweightCharts.createChart(document.getElementById('chart'), {
width: 1200,
height: 800,
background: '#000000',
textColor: '#ffffff'
});
var candleSeries = chart.addCandlestickSeries();
var data = [...]
What am I missing?

You'll need to wrap both background & textColor within a layout property like
var chart = LightweightCharts.createChart(document.getElementById('chart'), {
width: 1200,
height: 800,
layout: {
background: {
color: '#000000'
},
textColor: '#ffffff'
}
});
as seen in this doc

Calculate how much text to render based on height and font styles

I am trying to render a novel and I want to add snap based navigation other then scroll.
This is a little tricky as the text should be rendered and fit the screen for each view. I have no idea how to calculate this.
I am using this in react-native and those need this in JavaScript.
Here is the fonts style I am using; this is based on user settings.
const htmlStyle = () => {
const item = {
lineHeight: nContext.state.novelReaderSettings.fontSize * 1.7,
fontSize: nContext.state.novelReaderSettings.fontSize,
fontFamily: (NovelReaderSettings.fontFamily as any)[nContext.state.novelReaderSettings.fontFamily],
backgroundColor: Background.getColor(nContext.state.novelReaderSettings.backGroundColor).backGroundColor,
color: Background.getColor(nContext.state.novelReaderSettings.backGroundColor).color,
zIndex: 9999999999,
paddingLeft: nContext.state.novelReaderSettings.marginLeft,
paddingRight: nContext.state.novelReaderSettings.marginRight,
paddingTop: nContext.state.viewPlayer || nContext.state.novelReaderSettings.navigation === "Swap" ? 0 : startPosition.withAds,
}
as any;
if (nContext.state.viewPlayer) {
item.minHeight = globalContext.windowDimension.height - 65;
item.textAlignVertical = "center";
}
return item;
}

Paste image from clipboard to fabric.js canvas?

I'm trying to create a function that pastes an image from the user's clipboard to the canvas as a new fabric.Image(). Any search result I find either describes cloning objects already on the canvas or pasting IText data. This SO question is related to what I'm asking about, but it's 4 years old and the function in the top answer doesn't work:
How to do Copy and paste the image from User system to Canvas using fabric.js
Here's the code I'm currently trying to use. I'm trying to set up a paste function I can call later:
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
// Fabric.js image function
function canvasImage(url) {
var img = new fabric.Image(url);
img.scale(0.75).center().setCoords();
canvas.add(img).renderAll();
}
//Loop through files
for(var i=0;i<items.length;i++){
var file = items.items[i],
type = file.type;
if (type.indexOf("image")!=-1) {
var imageData = file.getAsFile();
var imageURL=window.webkitURL.createObjectURL(imageData);
canvasImage(imageURL);
}
}
};
$wrapper.on('paste', pasteImage);
Here's a fiddle to see it in action (or inaction, I guess). This will eventually be part of a Photoshop plugin, so thankfully I only need to worry about this working in Chrome.

I couldn't get your paste event handler to trigger, because i'm not sure if div can natively take the past event unless you make it a contenteditable div, which in your use case i doubt you want to do.
I just recently implemented this in an app of my own, but i wasn't using fabric, just native canvas and js.
You're going to have to rework your code, but try changing
$wrapper.on('paste', pasteImage);
to
$(window).on('paste', pasteImage);
Regardless, I tinkered with your current code, and this is what I got to work, albeit it might not have your settings being triggered completely, but it is pasting the image in:
(function() {
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
txtStyles = {
top: 100,
left: 200,
padding: 6,
fill: '#d6d6d6',
fontFamily: 'sans-serif',
fontSize: '24',
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
imgAttrs = {
left: 200,
top: 200,
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
introTxt = new fabric.Text('Paste images here', txtStyles),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
//Loop through files
for(var i=0;i<items.length;i++){
if (items[i].type.indexOf('image')== -1) continue;
var file = items[i],
type = items[i].type;
var imageData = file.getAsFile();
var URLobj = window.URL || window.webkitURL;
var img = new Image();
img.src = URLobj.createObjectURL(imageData);
fabric.Image.fromURL(img.src, function(img){
canvas.add(img);
});
}
},
//Canvas starter text
introCanvas = function() {
canvas.add(introTxt);
};
introCanvas();
$(window).on('paste', pasteImage);
})();
fiddlers: https://jsfiddle.net/c0kw5dbu/3/

Android window - view animation

Hello I'm new to titanium studio I'm reading the docs 2 days now and trying to make a simple slide animation or even any animation of any kind except opening a modal window. but I can't make it work.Here is what I was trying now but fails:
var slide_it_left = Titanium.UI.createAnimation();
slide_it_left.left = 500;
slide_it_left.duration = 500;
var mainWinOpts = {
backgroundColor:'#fff',
fullscreen:true,
navBarHidden: true
}
var animWinOpts = {
navBarHidden: true,
backgroundColor:'#000',
top:0,
left:0,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
fullscreen:false,
animated:true
}
var mainWin = Ti.UI.createWindow(mainWinOpts);
var animWin = Ti.UI.createWindow(animWinOpts);
var labelOpts = {
text: 'click me!',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: {
fontFamily: 'monospace',
fontSize: 24
},
borderWidth: 1,
color: '#2e2e2e',
borderColor: '#2e2e2e',
backgroundColor: '#dedede',
top: 50,
left: 50,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
opacity: 1.00,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
};
var label = Ti.UI.createLabel(labelOpts);
label.addEventListener('click',function(){
animWin.open(slide_it_left);
})
mainWin.add(label);
mainWin.open();
This among other snippets I tried from their docs - forums isn't working.
Could someone please provide me some working samples or references for android window or view animation. Or point out what I'm doing wrong. Thank you in advance.

Please try changing your code to the following:
label.addEventListener('click',function(){
animWin.open();
animWin.animate(slide_it_left);
});
You cannot use the animation object as a parameter for open().
Have a look at the valid params here.
Moreover, the docs give an example for sliding in a window on Android, which is very likely what you are trying to achieve:
var win2 = Ti.UI.createWindow({fullscreen:false});
win2.open({
activityEnterAnimation: Ti.Android.R.anim.slide_in_left,
activityExitAnimation: Ti.Android.R.anim.slide_out_right
});
You can find the animations for the Android platform here.

Create elements and addEventListener with Loop in Titanium Appcelerator

Using Titanium Appcelerator I am trying to dynamically create elements and add event listeners to them using a loop. Here is my current code:
for(i=0;i<7;i++){
testLabels[i] = Titanium.UI.createLabel({
borderRadius: 35,
text:'hello',
textAlign:'center',
width:70,
height: 70,
top: '13%',
left:140,
touchEnabled: true
});
testLabels[i].addEventListener('click',function(e){
//do something
}
}
When I run this I get the following error:
Can't find variable: testLabels.
Its interesting to me that the variable it can't find isn't "testLabels1", which to me means the loop isn't firing... any ideas?
Thanks!
Titanium doesn't like it when I place "var" in front of the label declaration.

try this
var testLabels = [];
for(var i=0; i<7; i++ ) {
testLabels[i] = Titanium.UI.createLabel({
borderRadius: 35,
text:'hello',
textAlign:'center',
width:70,
height: 70,
top: '13%',
left:140,
touchEnabled: true
});
(function(label) {
label.addEventListener('click',function(e){
//do something
}
}(testLabels[i]));
}