I try to implement an image in Titanium which can be rotated and scaled. I managed to make this work properly, but I want to be able to scroll the image around if it is bigger than the imageView. I tried several things including adding eventListeners and using the zIndex to bring the proper view to front but nothing helps. I also experimented with the bubbleParent function without any other result. I hope some of you got an idea how to achieve the desired behaviour.
XML:
<ScrollView id="imageScrollView">
<View id="pictureView">
<ImageView id="picture" ></ImageView>
</View>
</ScrollView>
TSS:
"#imageScrollView": {
top: "0",
left: "0",
height: "120",
width: "47%",
showHorizontalScrollIndicator: "true",
showVerticalScrollIndicator: "true",
maxZoomScale: "5",
minZoomScale: "1",
backgroundColor: "white",
scrollingEnabled: "true",
borderWidth: "1",
zIndex: "1050"
}
"#pictureView": {
top: "0",
left: "0",
height: "100%",
width: "100%",
bubbleParent: true
}
"#picture": {
top: "0",
left: "0",
height: "100%",
width: "100%",
borderWidth: "3",
borderColor: "red",
bubbleParent: true
}
And my js
$.imageScrollView.addEventListener("scroll", function(e) {
Ti.API.info("Triggered event");
});
$.pictureView.addEventListener("scroll", function(e) {
Ti.API.info("Triggered event");
});
After all I finally managed this to work by using this module: TiTouchImageView. If you have any problems importing / using it refer to my other question.
Related
I am working on this app that supposes to show a view on top of an image, the data I am receiving from the API looks like that
[{"coordinates": {"height": 55, "width": 75, "xmax": 285, "xmin": 210, "ymax": 579, "ymin": 524}, "data": "illy"}]
Now in their documentation there's no units and I cannot figure out what those values are, I supposes it's in pixels and the canvas size it's the original image dimensions
The image on this example is
height: 3024 px width: 3024 px
Here's my code
<ImageBackground
resizeMode="contain"
source={{ uri: img }}
style={{
height: 400,
backgroundColor: "red",
}}
>
{results.map((item) => {
return (
<View
key={item.coordinates.xmin}
style={{
fontSize: 22,
backgroundColor: "blue",
position: "absolute",
height: item.coordinates.height,
width: item.coordinates.width,
top: item.coordinates.xmin,
// left: item.coordinates.ymin,
}}
/>
);
})}
</ImageBackground>
What I have tried is to convert pixels to dp unit like so
const dp = (px: number) => {
return px / PixelRatio.get();
};
My goal would be to scale image on device but keep same ration as original pixel dimensions
I have a node js application that visualises a graph using Cytoscape JS. I wanted to use the new feature of taxi edge style in 3.5.2, but everytime I render the graph the page freezes and crashes after a while with version 3.5.2. Also the CPU usage spikes to ~100%. I use the Cytoscape instance as part of a class.
I have traced it back to the migration from Cytoscape JS 3.2.22 to 3.3.0. But that is all I could find. I examined the changelogs in the Cytoscape JS repo, but couldn't find anything that seemed relevant, except: https://github.com/cytoscape/cytoscape.js/issues/2311. This leads to #2295, the fix there didn't help either. So I guess that was not related either.
this.renderedGraph = Cytoscape({
container: $(`#${graphID}`),
style: Cytoscape.stylesheet()
.selector("node")
.css({
"content": "data(graphAbbrev)",
"text-wrap": "wrap",
"padding": "4px",
"width": "label",
"height": "label",
"text-valign": "center",
"text-halign": "center",
"shape": "roundrectangle",
"background-color": `mapData(weight, 0, ${
this.maxNodeWeight
}, #1cb5e0, #000046)`,
"color": "white"
})
.selector("edge")
.css({
"line-fill": "linear-gradient",
"text-margin-x": "20px",
"text-rotation": "autorotate",
"label": "data(weight)",
// "curve-style": "taxi",
// "taxi-direction": "downward",
// "taxi-turn": 20,
// "taxi-turn-min-distance": 5,
"target-arrow-shape": "triangle",
"target-arrow-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`,
"line-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`
}),
layout: {
name: "preset",
fit: true,
padding: 30
},
elements: {
nodes: this.nodes,
edges: this.edges
}
});
I would expect this to render the usual graph as it does in 3.2.22, but no luck with anything from 3.3.0 and above.
I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.
With the following code it renders something like this.
Here is my code :
var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
I'm new to styling in CSS and not all the properties are available in React-Native. So any help is appreciated, thanks :)
Ok, solved my problem, if anyone is passing by here is the answer:
Just had to add left: 0, and top: 0, to the styles, and yes, I'm tired.
position: 'absolute',
left: 0,
top: 0,
The first step would be to add
position: 'absolute',
then if you want the element full width, add
left: 0,
right: 0,
then, if you want to put the element in the bottom, add
bottom: 0,
// don't need set top: 0
if you want to position the element at the top, replace bottom: 0 by top: 0
This solution worked for me:
tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}
I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.
Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});
I am trying to replicate the www.winston.com homepage animation (that with the circles).
But so far I only managed to do THIS ( LINK HERE ) . How should I continue so when i`ll press now on those triangles, some text to appear and disappear according to the information.
I`d appreciate your help.
My jQuery code looks this way:
$("#green-circle").click(function () {
$("#green-circle").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "0"
}, 2000, "linear", function () {
$(this).after("");
}),
$("#blue-circle").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "5"
}, 2000, "linear", function () {
$(this).after("");
}),
$("#green-circle2").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "5"
}, 2000, "linear", function () {
$(this).after("");
});
});
HERE IS MY jsFiddle and HERE IS THE WEBSITE EXAMPLE
You need JQuery .one() function :
http://api.jquery.com/one/
This will allow a function to only be run once.
So what you can do is use the .one() function initially and add a new class or id to the elements, and then have a new function that will run off of the new class that was just added.
This will allow you to use 2 different functions, one for the start and then one afterwards.