Created a graph using cytoscape.js. Need to add image as a label on edge.
After examination of
CanvasRenderer.drawElements in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-redraw.js#L406-L412
CanvasRenderer.drawEdgeText in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-label-text.js#L6-L31
CanvasRenderer.drawEdge in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js
it seems that image label on edge is not supported right now.
One candidate where this feature might be added seems to be the CanvasRenderer.drawEdgeText function. The implementation might examine the text contained in the edge's content and if it looks like reference to an image (e.g. url) then draw it as image...
https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/README.md
Contributing to Cytoscape.js
Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by contacting us.
If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).
I know this is a late answer. but this will help somebody who looks for an answer as like me.
We can use icon fonts or fontawesome for this.
set the edges data as
edges = {
data:
id: "3f5cb5c4-43aa-4f4d-b816-fb4f279585c7"
label: "1 A \uf023 \uf022" //this is the fontawesome unicode chars for lock and notes icons
source: "1"
sourceName: "shipping"
target: "4"
targetName: "twilio.com"
value: 2
}
next in your cytoscape style, mention the font as fontawesome
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate',
'font-size': '8px',
// 'color': '#000000',
'color': '#333333',
'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-margin-x':'5px',
'text-margin-y':'5px',
// 'source-text-margin-x':'5px',
// 'source-text-margin-y':'5px'
}
}
Now your cytoscape graph will show edges with images as like this
Related
I am working with the ShieldUI Grid control and have setup a pretty standard sample, similar to this sample.
As demonstrated in it, I have setup the datasource and standard options, however I would like to change the paper size and possibly orientation, since the layout is somewhat bulky. Any pointers in the right direction would be helpful.
Paper size and orientation can be changed using the
exportOptions.pdf.size and exportOptions.pdf.orientation properties.
For example:
exportOptions: {
pdf: {
size: "a4",
orientation: "portrait",
...
}
}
More information can be found in this documentation page.
Is there a code sample available that illustrates how to use a 2D transform (such as rotate and scale) with a JPG in a react-native application, perhaps with the code in the tutorial as a starting point?
If possible, it would be helpful to see code for two scenarios:
1) automatically apply a transform when the app is launched
2) apply a transform after different types of user gestures
At some point in the future it would be interesting to see how to create 3D transforms and animation effects.
Update: You can see the entire example in my sample app here: https://github.com/grgur/react-native-memory-game
Animation is now AnimationExperimental so we'll need to modify zvona's solution.
First, make sure RCTAnimationExperimental is a linked library
If not, then follow these steps:
Navigate to node_modules/react-native/Libraries/Animation/
Drag and drop RCTAnimationExperimental.xcodeproj to Libraries (should look like the image above)
Click on your project name (in the example above, my project name is Memory)
Switch to the Build Phases tab
Expand Libraries/RCTAnimationExperimental.xcodeproj/Products
Drag libRctAnimationExperimental.a to Link Binary With Libraries
Ok, the hardest part is now over. Head over to your JavaScript file. Animation is no longer part of the react-native package so we have to include it explicitly.
var React = require('react-native');
var AnimationExperimental = require('AnimationExperimental');
Alright, champ, you're ready to animate. Make sure you know what you're animating. The view you will be animating is referred to as node.
AnimationExperimental.startAnimation({
node: this.refs.image,
duration: 400,
easing: 'easeInQuad',
property: 'opacity',
toValue: 0.1,
});
And that's it!
At the moment of writing, available properties are: opacity, position, positionX, positionY, rotation, scaleXY
Currently, this is a bit more complex process and I'm planning to write a blog post about that. However, as a brief starter, I write something here.
First problem is that RCTAnimation / RCTAnimationManager is not present at all, if you've created your project with react-native init [ProjectName] (https://github.com/facebook/react-native/issues/226).
You need to add it in XCode from a plus sign in top left corner: "Add Files to [ProjectName]". Then you navigate to node_modules > Libraries > Animation > RCTAnimation.xcodeproj. After it's imported, you need to drag it under Libraries in your project.
Then you need to open tab Build Phases. There you have menu Link Binary With Libraries (x items). Drag from Products under RCTAnimation.xcodeproj file named libRCTAnimation.a to the menu.
Now, you can build your project to support animations. I'm not that familiar with XCode, so there could be a even more simple way of achieving this, but I got it sorted like this.
Second Problem is that not all the available (or planned) functionality is there. At least I ran through the jungle of trials and errors before I got anything on the screen.
Try e.g. this code at first to get fully proofed that animations are working:
var {
Animation,
AppRegistry,
StyleSheet,
Text,
View
} = React;
var styles = StyleSheet.create({
test: {
width: 400,
height: 400,
backgroundColor: 'blue',
opacity: 0
}
});
var AnimationTest = React.createClass({
componentDidMount () {
Animation.startAnimation(this.refs['this'], 400, 0, 'linear', {opacity: 1});
},
render () {
return (
<View ref='this' style={styles.test}>
<Text>Just an animation test</Text>
</View>
)
}
});
AppRegistry.registerComponent('AnimationTest', () => AnimationTest);
This should get you going. If you need any further assistance, please notify me.
If I ever succeed in writing a more complete instructions in a form of a blog article, I'll update it to this answer.
Check out the 2048 demo application for example usage of the RCTAnimation library:
https://github.com/facebook/react-native/tree/master/Examples/2048
It doesn't use any especially complex transforms, but does animate position, opacity, and scaleXY of various elements with code that looks like this:
Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
In the past I have incorporated some images that exist on the Rally server into my Apps-- for example I made a more generic "picker" menu that displays checkboxes, which of course rely on images for the checks and boxes.
Of course I would expect to have to check if any images I am using persist when the SDK version changes, but it never-the-less allows for some additional functionality and style you could not have without the images that exist on the server.
My question is: since there is no way to put our own images into Rally*, is there a way to find all the images possible that might be at our disposal on the server? I've used the "resources" tab in chrome and can find what is used by particular pages, but it is not complete, only what is used.
My specific need is that I'm trying to make a grid that shows metric, and I want a column that shows a green up/down arrow if the trend is good, and a red up/down arrow if the trend is bad.
*: Second answer below shows this is incorrect: you can put attachments into rally and then refer to them in apps
When I attach an image to a Rally artifact in my workspace it gives me a unique URL that I can use as follows:
var myPanel = Ext.create('Ext.panel.Panel',{
layout: 'hbox',
itemId: 'p',
items:[{
xtype: 'image',
autoRender: true,
src: 'https://rally1.rallydev.com/slm/attachment/12345678/pic.png',
width: 1000,
height: 200
}
]
});
An easy way to incorporate icons is to use the icon classes:
<span class="icon-NAME"></span>
You could customize the colors by changing the font color in the CSS:
<span class="icon-arrow-down" style="color:red"></span>
Here are the available icons I've been able to find:
icon-add
icon-add-column
icon-addTag
icon-admin
icon-archive
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-attachment
icon-back
icon-bars
icon-bell
icon-blocked
icon-board
icon-box
icon-calendar
icon-cancel
icon-change-set
icon-chat
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-children
icon-circle
icon-close
icon-collapse
icon-color
icon-comment
icon-cone
icon-cross
icon-dashboard
icon-defect
icon-defectSuite
icon-delete
icon-deploy
icon-donut
icon-dots
icon-down
icon-down_full
icon-down_hollow
icon-download
icon-drag
icon-dropdown
icon-edit
icon-embed
icon-empty
icon-enlarge
icon-expand
icon-export
icon-favorite
icon-feedback
icon-file
icon-filter
icon-fiveDots
icon-flag
icon-folder
icon-full-arrow-down
icon-full-arrow-left
icon-full-arrow-right
icon-full-arrow-up
icon-gear
icon-graph
icon-grid
icon-help
icon-hierarchy
icon-history
icon-home
icon-hourglass
icon-idea
icon-images
icon-infinity
icon-info
icon-info-circle
icon-leaf
icon-leave
icon-left
icon-line
icon-link
icon-lock
icon-lock-open
icon-mail
icon-minus
icon-more
icon-next
icon-none
icon-not-favorite
icon-ok
icon-partial
icon-pie
icon-plus
icon-popup
icon-portfolio
icon-post
icon-predecessor
icon-previous
icon-print
icon-program
icon-progress
icon-question
icon-ready
icon-recycle
icon-refresh
icon-reply-all
icon-right
icon-right_full
icon-right_hollow
icon-rss
icon-save
icon-scope-down
icon-scope-up
icon-scope-up-down
icon-search
icon-setup
icon-share
icon-shrink
icon-small-chevron-down
icon-small-chevron-left
icon-small-chevron-right
icon-small-chevron-up
icon-snapshot
icon-split
icon-square
icon-story
icon-successor
icon-tag
icon-task
icon-test
icon-test-run
icon-testCase
icon-testSet
icon-threeDots
icon-thumbs-down
icon-thumbs-up
icon-to-do
icon-triangle
icon-up
icon-upload
icon-user
icon-user-add
icon-users
icon-visible
icon-warning
icon-workspace
I have an object like this:
edge
...,{\"data\":{\"label\":\"test\",\"source\":\"1\",\"target\":\"19\",\"extra\":
{\"color\":\"#000000\",\"width\":\"#000000\"}}},{\"data\":
{\"label\":\"1~20\",\"source\":\"1\",\"target\":\"20\",\"extra\":
{\"color\":\"#FF0000\",\"width\":\"5\"}}},...
I am able to parse it, read it and display my nodes and edges into cytoscape.js, but I cannot figure out how to access the extra components to set color and width.
Here:
.selector("edge")
.css({
"width": "mapData(weight, 0, 100, 1, 4)",
"target-arrow-shape": "triangle",
"source-arrow-shape": "circle",
"line-color": "data.extra(color)"//data(color)
})
I know how to acess the color property if it's outside extra, but I would like to use it inside the extra component, as one can see in the JSON example.
Please, how should I access my extra components to set the css color?
Any help is appreciated.
If you build from the trunk, I've pushed a fix to allow data(extra.color) style syntax in mappers.
I want to create a local map for my city where people can cover area with polygons and get their latitude and longitude
For Example there is a world map and someone come and he wanted to cover us then he can simply cover it and get its latitude and longitude of corners or borders
Is there any way or example i searched about it on google and Site both but didn't get Anything
Sorry I've no Codes i want idea, code or something helpful.
A simple search yielded http://www.the-di-lab.com/polygon/ and you can find a lot more samples at http://code.google.com/apis/maps/documentation/javascript/demogallery.html.
Unfortunately the above demo is a minified js. But the essential part of drawing a polygon (area) on google maps is to
1. load the map
2. trap the click events and the position (lat/lon)
3. draw lines
4. Finally when a double click is received, close the polygon
I unfortunately do not have a ready made sample in hand.
The answers here are quite outdated.
Google Maps now have a drawing library, This library allows the user to insert markers, circles, polygons and other types as well.
You can find an example on it here. And the library reference here.
And the documentation here.
It seems there is a simpler solution now. From the same demo gallery link that Muthu shared earlier look for user editable shapes. Below is a sample code from this link that draws a rectangle and allows user to edit the shape further
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 44.5452, lng: -78.5389},
zoom: 9
});
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
Also here is an example on jsfiddle that extends above to generalized polygon and below is the code from the link
var editablePolygon = new google.maps.Polygon({
paths: coords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: true });
Attached is a screenshot (after dragging one midpoint node in the triangle)
I think you need to use GeoChart
https://developers.google.com/chart/interactive/docs/gallery/geochart?csw=1. It can cover certain regions or areas