I am trying to display images in a view but the images are not getting rendered according to the x and y coordinates provided.
The var all_dim[i] is a string of the form X_coord,Y_coord, Height, Width
public styles = StyleSheet.create({
scroll_layouts: {
height: 100,
zIndex: 40,
backgroundColor: "#fff",
},
Lay_view: {
width: 100,
height: 200,
transform: [
{ translateX: 0},
{ translateY: 0},
]
}
});
public displayLayout()
{
if(this.props.index == 2)
{
var to_disp = [];
var all_layouts = this.props.data_string.split('&');
for(var j = 0;j < all_layouts.length - 1;j++)
{
var all_dim = all_layouts[j].split(";");
var xyz=[];
var images_arr = this.props.arr_img;
for(var i = 0;i < all_dim.length - 1;i++)
{
var image_fill = images_arr[i].uri;
var indivi_elems = all_dim[i].split(',');
var h = parseFloat(indivi_elems[2]);
var w = parseFloat(indivi_elems[3]);
var xc = parseFloat(indivi_elems[0]);
var yc = parseFloat(indivi_elems[1]);
xyz.push(<Image key = {i} source = {{uri: image_fill}} style = {{height: h, width: w,transform: [{ translateX: xc},{ translateY: yc},{scaleX:1},{scaleY:1}]}}/>);
}
var hjk = <View key = {j} style = {this.styles.Lay_view}>{xyz}</View>;
to_disp.push(hjk);
}
return (
<ScrollView horizontal = {true} style = {this.styles.scroll_layouts}>
{to_disp}
</ScrollView>)
}
}
I expect the images to be displayed according to the coordinates provided and not one below the other.
Expected layout of images in output
Output rendered
The children of the view should have their position prop set to 'absolute'
Related
I'm doing an animation, where a thumbnail blows up to take up the whole screen. The first step is to get the element, change it's position to absolute and assign explicitly the dimensions and position that it's currently occupying, using a style object. Then I do my animation.
Most of the time it works nicely, but I seem to be getting DOM renders that catch my element in an intermediate state, it's position changed to absolute but the dimensions not set. In Vue, is there a way of grouping into a single batch a bunch of updates to an element?
var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
var rect = outer.getBoundingClientRect();
this.elStyle.height = rect.bottom - rect.top;
this.elStyle.width = rect.right - rect.left;
this.elStyle.top = rect.top;
this.elStyle.left = rect.left;
this.elStyle.zIndex = 100;
this.elStyle.position = 'absolute';
this.elStyle.transition = 'all 0.5s ease-in-out';
setTimeout(function () {
this.elStyle.top = this.vueStore.contentRect.top;
this.elStyle.left = this.vueStore.contentRect.left;
this.elStyle.height = this.vueStore.contentRect.bottom;
this.elStyle.width = this.vueStore.contentRect.right;
}, 300);
} else {...
You should assign elStyle in 1 time
var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
var rect = outer.getBoundingClientRect();
me.elStyle = Object.assign({}, me.elStyle, {
height: rect.bottom - rect.top,
width: rect.right - rect.left,
top: rect.top,
left: rect.left,
zIndex: 100,
position: absolute
})
setTimeout(function () {
me.elStyle = Object.assign({}, me.elStyle, {
height: me.vueStore.contentRect.bottom - 50;,
width: me.vueStore.contentRect.right,
top: me.vueStore.contentRect.top,
left: me.vueStore.contentRect.left,
})
}, 300);
}
The default titanium slider only allows you to have one pin on it.
How could you modify it, so that it accepts a range of values. Such as age range?
Cheers.
UPDATE (after installing module):
// Double Slider example
var tidoubleslider = require('com.semanticpress.tidoubleslider');
var dSlider = tidoubleslider.createSlider({
top: 40,
height: 50,
width: 280,
leftTrackImage:'left2.png',
highlightedLeftTrackImage:'highlightedLeft2.png',
disabledLeftTrackImage:'disabledLeft2.png',
centerTrackImage:'center2.png',
highlightedCenterTrackImage:'highlightedCenter2.png',
disabledCenterTrackImage:'disabledCenter2.png',
rightTrackImage:'right2.png',
highlightedRightTrackImage:'highlightedRight2.png',
disabledRightTrackImage:'disabledRight2.png',
leftThumbImage:'thumb.png',
highlightedLeftThumbImage:'highlightedThumb.png',
disabledLeftThumbImage:'disabledThumb.png',
rightThumbImage:'thumb.png',
highlightedRightThumbImage:'highlightedThumb.png',
disabledRightThumbImage:'disabledThumb.png',
min:0,
max:50,
leftValue:25,
rightValue:50,
enabled: true
});
$.ageSliderView.add(dSlider);
var leftLabel = Ti.UI.createLabel({
top:30,
left:20,
width:100,
height: 20,
color:'black',
text:dSlider.leftValue
});
$.ageSliderView.add(leftLabel);
var rightLabel = Ti.UI.createLabel({
top:30,
right:20,
width:100,
height: 20,
color:'black',
text:dSlider.rightValue,
textAlign:'right'
});
$.ageSliderView.add(rightLabel);
dSlider.addEventListener('touchstart', function(e) {
if (typeof e.value !== 'undefined') {
if (e.thumbIndex === 0) {
leftLabel.text = e.value.toFixed(1);
leftLabel.color = 'red';
}
else {
rightLabel.text = e.value.toFixed(1);
rightLabel.color = 'red';
}
}
else {
leftLabel.color = 'gray';
rightLabel.color = 'gray';
}
});
dSlider.addEventListener('change', function(e) {
if (e.thumbIndex === 0) {
leftLabel.text = e.value.toFixed(1);
}
else {
rightLabel.text = e.value.toFixed(1);
}
});
dSlider.addEventListener('touchend', function(e) {
if (typeof e.value !== 'undefined') {
if (e.thumbIndex === 0) {
leftLabel.text = e.value.toFixed(1);
leftLabel.color = 'black';
}
else {
rightLabel.text = e.value.toFixed(1);
rightLabel.color = 'black';
}
}
else {
leftLabel.color = 'black';
rightLabel.color = 'black';
}
});
The slider does not appear on the screen. I guess it is because the slider images are missing?
Here you go.The slider With raning option in titanium
https://github.com/tzmartin/Ti-Double-Slider/tree/master/dist
Thanks
I'm trying to create a layout (using famous.js) similar to the BBC News native app; a vertical ScrollView, within which are numerous horizontal ScrollViews. I've got both 'working' to the extent that everything renders and the horizontal scrollers work perfectly. My issue is that the vertical scroll event won't fire if the user swipes a surface within a horizontal ScrollView. If i touch an area outside the horizontal scrollers, the vertical scroller will do its job and scroll... vertically
Does anyone know what i'm missing? I have a feeling that a RenderNode may be needed, but have had no luck so far. I'm just getting to grips with Famous. What i've seen so far is amazing, but not being able to figure this out is really getting to me...
Uber thanks in advance if anyone can help...
/*globals define*/
define(function(require, exports, module) {
// import dependencies
var Modifier = require('famous/core/Modifier');
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
var Scrollview = require('famous/views/Scrollview');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var mainContext = Engine.createContext();
var layout = new HeaderFooterLayout({
headerSize: 50,
footerSize: 50
});
// create app header and add to layout
var appHeader = new ContainerSurface({
size: [undefined, 50],
classes: ['app-header']
});
appHeader.add(new Surface({
size: [undefined, 50],
content: 'Site Name',
classes: ['app-header__title'],
properties: {
lineHeight: '50px',
textAlign: 'center'
}
}));
layout.header.add(appHeader);
// create page container surface
var page = new ContainerSurface({
properties: {
top: '0'
}
});
// returns a horizontal ScrollView containing
function createCategory() {
var categoryScroll = new Scrollview({
direction: 0,
});
var surfaces = [];
categoryScroll.sequenceFrom(surfaces);
for (var i = 0, temp; i < 7; i++) {
var temp = new Surface({
size: [128, 128],
content: 'surface' + (i + 1),
properties: {
backgroundColor: '#fff',
borderColor: '#303030',
borderStyle: 'solid',
borderWidth: '0px',
borderRightWidth: '4px',
borderLeftWidth: '4px'
}
});
temp.pipe(categoryScroll);
surfaces.push(temp);
}
return categoryScroll;
}
// returns a vertical page scroll
function createPageScroll() {
// create array of horizontal ScrollViews
categories = [];
for (var i = 0; i < 7; i++) {
categories.push(createCategory());
};
var pageScroll = new Scrollview();
var surfaces = [];
for (var i = 0; i < 7; i++) {
temp = new ContainerSurface({
size: [window.innerWidth, 136],
});
temp.add(categories[i]);
surfaces.push(temp);
pageScroll.sequenceFrom(surfaces);
temp.pipe(pageScroll);
};
return pageScroll;
}
layout.content.add(createPageScroll());
mainContext.add(layout);
});
I see you figured it out, but I thought I would post a clean working example for anyone that needed a starting point.. So here it is..
To answer the question, Yes, you needed to pipe your events from the surfaces to each of the scrollviews
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var context = Engine.createContext();
var surfaces1 = [];
var surfaces2 = [];
var scrollers = [];
scroll_v_cont = new ContainerSurface({
size:[300,300],
properties: { overflow: 'hidden' }
});
var scroll_v = new Scrollview({ direction: 1 });
scroll_v.sequenceFrom(scrollers);
scroll_v_cont.add(scroll_v);
var scroll_h1_cont = new ContainerSurface({
size:[300,300],
properties: {overflow: 'hidden'}
});
var scroll_h1 = new Scrollview({ direction: 0});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
var scroll_h2_cont = new ContainerSurface({
size:[300,300],
properties: { overflow: 'hidden'}
})
var scroll_h2 = new Scrollview({ direction: 0})
scroll_h2.sequenceFrom(surfaces2);
scroll_h2_cont.add(scroll_h2);
scrollers.push(scroll_h1_cont);
scrollers.push(scroll_h2_cont);
for (var i = 0; i < 4; i++) {
var surface1 = new Surface({
content: "Surface: " + (i + 1),
size: [300, 300],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface1.pipe(scroll_v);
surface1.pipe(scroll_h1);
surfaces1.push(surface1);
var surface2 = new Surface({
content: "Surface: " + (i + 1),
size: [300, 300],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8 + (360 / 8)*4) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface2.pipe(scroll_v);
surface2.pipe(scroll_h2);
surfaces2.push(surface2);
};
context.add(scroll_v_cont);
the famous-flex FlexScrollView supports vertical & horizontal scrolling restrictions when embedding one scrollview in another. It is described in more detail at the bottom of the FlexScrollView tutorial:
https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md
Im trying to resize everything on window resize.
I have this function but only seems to resize one layer ( graphLayer.add(drawGraph);)
I thought the code below should resize everything??
function onResize(){
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
stage.setWidth((window.innerWidth) -yPadding);
stage.setHeight((window.innerHeight) -xPadding);
stage.draw();
}
here is a the basics of my code
$(window).resize(onResize);
var graph;
var graphLayer = new Kinetic.Layer();
var BubbleLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
var stage = new Kinetic.Stage({
container: 'graph',
width: widowWidth, // width - the padding
height: widowHeight, // Height - the padding
});
var tooltip = new Kinetic.Label({
opacity: 0.75,
visible: false,
listening: false
});
tooltip.add(new Kinetic.Tag({
.........
}));
tooltip.add(new Kinetic.Text({
.........
}));
var drawGraph = new Kinetic.Shape ({
sceneFunc: function(ctx){
.........
}
ctx.fillStrokeShape(this);
},
stroke: 'black',
strokeWidth: 1
});
var drawGraphquarter = new Kinetic.Shape ({
sceneFunc: function(ctx){
.........
}
},
stroke: 'red',
strokeWidth: 3
});
// build data
$.getJSON( "bubble_data.json", function( data ) {
$.each( data.projects, function(i) {
var bubbleData = [];
.........
bubbleData.push({
.........
});
.........
for(var n = 0; n < bubbleData.length; n++) {
addBubble(bubbleData[n], BubbleLayer);
stage.add(BubbleLayer);
}
});
graphLayer.add(drawGraph);
graphLayer.add(drawGraphquarter);
stage.add(BubbleLayer);
stage.add(graphLayer);
graphLayer.moveToBottom();
tooltipLayer.add(tooltip);
stage.add(tooltipLayer);
});
});
// add bubles to layer
function addBubble(obj, BubbleLayer) {
var bubble = new Kinetic.Shape({
sceneFunc: function(ctx) {
.........
});
BubbleLayer.add(bubble);
}
// calendar quarter
function getQuarter(d) {
.........
}
function onResize(){
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
stage.setWidth((window.innerWidth) -yPadding);
stage.setHeight((window.innerHeight) -xPadding);
stage.draw();
}
Updated my code to this.
var graph;
var xPadding = 10;
var yPadding = 10;
var graphLayer = new Kinetic.Layer();
var graphLayerQuater = new Kinetic.Layer();
var BubbleLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var widowWidth = (window.innerWidth) -yPadding; // width - the padding
var widowHeight = (window.innerHeight) -xPadding; // Height - the padding
var stage = new Kinetic.Stage({
container: 'graph',
width: widowWidth,
height: widowHeight,
});
var initialScale = stage.scale(); //returns {x: 1, y: 1}
var initialWidth = (window.innerWidth) -yPadding; // width - the padding
var initialHeight = (window.innerHeight) -xPadding; // Height - the padding
onresize function
window.onresize = function(event) {
var width = (window.innerWidth) -yPadding;
var height =(window.innerHeight) -xPadding;
var xScale = (width / initialWidth) * initialScale.x;
var yScale = (height / initialHeight) * initialScale.y;
var newScale = {x: xScale, y: yScale};
stage.setAttr('width', width);
stage.setAttr('height', height);
stage.setAttr('scale', newScale );
stage.draw();
}
As I am new to KineticJs so, I have tried implementing the functionality using Kinectic js for drawing the multiple image on different- different x and y. Now I wanted to resize the stage layer or canvas. I have done that by using the code given below
window.onresize = function (event) {
stage.setWidth(($('#tab' + tabId).innerWidth() / 100) * 80);
var _images = layer.getChildren();
for (var i = 0; i < _images.length; i++) {
if (typeof _images[i].getId() != 'undefined') {
//alert(stage.getScale().x);
_images[i].setX(_images[i].getX() * stage.getScale().x);
layer.draw();
}
}
}
but now the problem is the are being defined and now if browser resize than stage is resized but the images on the prev x and y are fixed . I would like to keep them fixed on the position on resizing of stage layer or canvas.Here are the link of the image before resize and after resizing.beforeresize and afterResize .
Here is my entire code given below:-
$("#tabs li").each(function () {
$(this).live("click", function () {
clearInterval(_timer);
var tabname = $(this).find("a").attr('name');
tabname = $.trim(tabname.replace("#tab", ""));
var tabId = $(this).find("a").attr('href');
tabId = $.trim(tabId.replace("#", ""));
$.ajax({
url: "/Home/GetTabsDetail",
dataType: 'json',
type: 'GET',
data: { tabId: tabId },
cache: false,
success: function (data) {
var bayStatus = [];
var i = 0;
var image_array = [];
var BayExist = false;
var BayCondition;
var imgSrc;
var CanvasBacgroundImage;
var _X;
var _bayNumber;
var _Y;
var _ZoneName;
$(data).each(function (i, val) {
i = i + 1;
if (!BayExist) {
bayStatus = val.BayStatus;
CanvasBacgroundImage = val.TabImageLocation;
BayExist = true;
}
$.each(val, function (k, v) {
if (k == "BayNumber") {
BayCondition = bayStatus[v];
_bayNumber = v;
if (BayCondition == "O")
imgSrc = "../../images/Parking/OccupiedCar.gif"
else if (BayCondition == "N")
imgSrc = "../../images/Parking/OpenCar.gif";
}
if (k == "BayX")
_X = v;
if (k == "BayY")
_Y = v;
if (k == "ZoneName")
_ZoneName = v;
});
image_array.push({ img: imgSrc, xAxis: _X, yAxis: _Y, toolTip: _bayNumber, ZoneName: _ZoneName });
});
var imageUrl = CanvasBacgroundImage;
if ($('#tab' + tabId).length) {
// $('#tab' + tabId).css('background-image', 'url("../../images/Parking/' + imageUrl + '")');
var stage = new Kinetic.Stage({
container: 'tab' + tabId,
width: ($('#tab' + tabId).innerWidth() / 100) * 80, // 80% width of the window.
height: 308
});
window.onresize = function (event) {
stage.setWidth(($('#tab' + tabId).innerWidth() / 100) * 80);
}
$('#tab' + tabId).find('.kineticjs-content').css({ 'background-image': 'url("../../images/Parking/' + imageUrl + '")', 'background-repeat': ' no-repeat', 'background-size': '100% 100%' });
var layer = new Kinetic.Layer();
var planetOverlay;
function writeMessage(message, _x, _y) {
text.setX(_x + 20);
text.setY(_y + 1);
text.setText(message);
layer.draw();
}
var text = new Kinetic.Text({
fontFamily: 'Arial',
fontSize: 14,
text: '',
fill: '#000',
width: 200,
height: 60,
align: 'center'
});
var opentooltip = new Opentip(
"div#tab" + tabId, //target element
"dummy", // will be replaced
"", // title
{
showOn: null // I'll manually manage the showOn effect
});
Opentip.styles.win = {
borderColor: "black",
shadow: false,
background: "#EAEAEA"
};
Opentip.defaultStyle = "win";
// _timer = setInterval(function () {
for (i = 0; i < image_array.length; i++) {
img = new Image();
img.src = image_array[i].img;
planetOverlay = new Kinetic.Image({
x: image_array[i].xAxis,
y: image_array[i].yAxis,
image: img,
height: 18,
width: 18,
id: image_array[i].toolTip,
name: image_array[i].ZoneName
});
planetOverlay.on('mouseover', function () {
opentooltip.setContent("<span style='color:#87898C;'><b>Bay:</b></span> <span style='color:#25A0D3;'>" + this.getId() + "</span><br> <span style='color:#87898C;'><b>Zone:</b></span><span style='color:#25A0D3;'>" + this.getName() + "</span>");
//writeMessage("Bay: " + this.getId() + " , Zone: " + this.getName(), this.getX(), this.getY());//other way of showing tooltip
opentooltip.show();
$("#opentip-1").offset({ left: this.getX(), top: this.getY() });
});
planetOverlay.on('mouseout', function () {
opentooltip.hide();
// writeMessage('');
});
planetOverlay.createImageHitRegion(function () {
layer.draw();
});
layer.add(planetOverlay);
layer.add(text);
stage.add(layer);
}
// clearInterval(_timer);
//$("#tab3 .kineticjs-content").find("canvas").css('background-image', 'url("' + imageUrl + '")');
// },
// 500)
}
}
,
error: function (result) {
alert('error');
}
});
});
});
I want to keep the icons on the position where they were before resizing. I have tried but could not get the right solution to get this done.
How can How can I update x,y position for the images . Any suggestions would be appreciated.
Thanks is advance.
In window.resize, you're changing the stage width by a scaling factor.
Save that scaling factor.
Then multiply the 'x' coordinate of your images by that scaling factor.
You can reset the 'x' position of your image like this:
yourImage.setX( yourImage.getX() * scalingFactor );
layer.draw();
In the above mentioned code for window.onresize. The code has been modified which as follow:-
window.onresize = function (event) {
_orignalWidth = stage.getWidth();
var _orignalHeight = stage.getHeight();
// alert(_orignalWidth);
// alert($('#tab' + tabId).outerHeight());
stage.setWidth(($('#tab' + tabId).innerWidth() / 100) * 80);
//stage.setHeight(($('#tab' + tabId).outerHeight() / 100) * 80);
_resizedWidth = stage.getWidth();
_resizedHeight = stage.getHeight();
// alert(_resizedWidth);
_scaleFactorX = _resizedWidth / _orignalWidth;
var _scaleFactorY = _resizedHeight / _orignalHeight;
//alert(_scaleFactor);
var _images = layer.getChildren();
for (var i = 0; i < _images.length; i++) {
if (typeof _images[i].getId() != 'undefined') {
//alert(stage.getScale().x);
_images[i].setX(_images[i].getX() * _scaleFactorX);
//_images[i].setY(_images[i].getY() * _scaleFactorY);
layer.draw();
}
}
}