I need help to understand the jsplumb.connect concept. I am trying to create endpoints from xml file and trying to connect the endpoints. But i am able to generate the endpoint but not the connections.
XML file
<?xml version="1.0" encoding="utf-8" ?>
<apps>
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source>
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target>
</apps>
html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i=0;
var nodeName, nodeVal,nodeStyle,nodeRadius;
$.get('data1.xml', function(d){
$(d).find('apps').each(function(){
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }];
while($(this).children()[i].nodeName!=null)
{
nodeName = $(this).children()[i].nodeName;
nodeVal = $(this).find($(this).children()[i].nodeName).text();
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle');
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius');
var nodeName = jsPlumb.addEndpoint( nodeName, {
overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],
paintStyle: { fillStyle: nodeVal},
endpoint: [nodeStyle , { radius: nodeRadius }]
});
i++;
}
jsPlumb.bind("ready", function () {
jsPlumb.connect({
source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
connector: "Straight",
detachable: false,
overlays: [
["Label", {
fillStyle: "rgba(100,100,100,80)",
color: "white",
font: "12px sans-serif",
borderStyle: "black",
borderWidth: 2
}],
["Arrow", { location: 0.5}]
]
})
});
});
});
});
</script>
</head>
<body>
<div id="source" style="position: absolute; left: 100px; top: 250px;">
</div>
<div id="target" style="position: absolute; left: 600px; top: 250px;">
</div>
</body>
</html>
This can be accomplished programatically by first setting the uuid parameter of each endpoint like so:
jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true});
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});
And then connecting them as such
jsPlumb.connect({ uuids:["ep0_0","ep1_0"] });
//With more options looks like...
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });
The html:
<div id="0" class="window"></div>
<div id="1" class="window"></div>
Bare bone js:
jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });
Related
I am new to charts
I have index.jsp page.In that page contains CSS ,JAVASCRIPT also.I want to display BAR CHART in that jsp page..
I am getting this type of error::Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
Thanks in Advance
index.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Line Charts</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
</style>
<script type="text/javascript">
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
</script>
</head>
<body>
<h1 style="color:red" align="center">WELCOME TO LINE CHARTS</h1>
<div id="container" name="container"></div>
</body>
</html>
This means you need to move the <div id="container" name="container"></div> before you call the Highcharts.chart
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1 style="color:red" align="center">WELCOME TO LINE CHARTS</h1>
<div id="container" name="container"></div>
It is working fine if i hard code markers lat long where as when it is built using function, it does not plot. In below code, only two markers are coming up where as it should be 3.
I have tried with complete vue browser script, as a static marker objects it is working fine but not with dynamic markers
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="root">
<gmap-map ref="mymap" :center="startLocation" :zoom="14" style="width: 100%; height: 300px">
<gmap-info-window :options="infoOptions" :position="infoPosition" :opened="infoOpened" #closeclick="infoOpened=false">
{{infoContent}}
</gmap-info-window>
<gmap-marker v-for="(item, key) in coordinates" :key="key" :position="getPosition(item)" :clickable="true" #click="toggleInfo(item, key)" />
</gmap-map>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="vue-google-maps.js"></script>
<script>
var jsondata = {
0: {
full_name: 'Erich Kunze',
lat: '20.31',
lng: '83.89'
},
1: {
full_name: 'Delmer Olson',
lat: '20.32',
lng: '83.89'
}
}
$(function () {
testdata();
;//= testdata();
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw'
},
});
new Vue({
el: '#root',
data: {
startLocation: {
lat: 20.3157,
lng: 83.8854
},
coordinates: jsondata,
<!-- { -->
<!-- 0: { -->
<!-- full_name: 'Erich Kunze', -->
<!-- lat: '20.31', -->
<!-- lng: '83.89' -->
<!-- }, -->
<!-- 1: { -->
<!-- full_name: 'Delmer Olson', -->
<!-- lat: '20.32', -->
<!-- lng: '83.89' -->
<!-- } -->
<!-- }, -->
infoPosition: null,
infoContent: null,
infoOpened: false,
infoCurrentKey: null,
infoOptions: {
pixelOffset: {
width: 0,
height: -35
}
},
},
methods: {
getPosition: function(marker) {
return {
lat: parseFloat(marker.lat),
lng: parseFloat(marker.lng)
}
},
toggleInfo: function(marker, key) {
this.infoPosition = this.getPosition(marker);
this.infoContent = marker.full_name;
if (this.infoCurrentKey == key) {
this.infoOpened = !this.infoOpened;
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
}
}
}
});
});
function testdata(){
alert('chk');
jsondata[2] = {
full_name : 'chk',
lat:20.33,
lng:83.89
}
console.log(jsondata);
}
</script>
</html>
It should plot all the markers two static and one dynamic.
There is no problem with the code, Now the same code is working fine, it shows all the markers.It is working like a charm.
Thanks
Trying to setup Multiple Mutually Exclusive JWPlayers v8.1. I keep getting the 1st video listed and it takes up almost the whole page. As can be seen in the code I'm trying to set the video height to 200 and the width to 300.
Here is the code I'm using:
Edit: Trying to have these appear on the page beside each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org /TR/html4/strict.dtd">
<html>
<head>
<script src="https://content.jwplatform.com/players/oytB1cN5-9X6UI8lV.js"></script>
<title>Multiple Mutually Exclusive JWPlayers</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: [jwplayer oytB1cN5
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: [jwplayer 2kd1G7dT
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: [jwplayer GuoewKQp-Qz7uhmTV
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>
You will want to use a style tag inside each div and set the width there using CSS.
Is it possible to have a single layer visible on the map in this ESRI tutorial LayerList widget ?
Each time you click on a layer, the previous one should deactivate. So you always have only one layer on the map.
Michelle
Updated answer with version 4 of the API.
It is possible to add the functionality at creating the widget using 2 features.
The listItemCreatedFunction function-
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCreatedFunction
According to the api:
Specifies a function that accesses each ListItem. Each list item can be modified according to its modifiable properties. Actions can be added to list items using the actionsSections property of the ListItem.
and the operationalItems property-
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#operationalItems
According to the api:
A collection of ListItems representing operational layers.
var LayerListWidget = new LayerList({
listItemCreatedFunction: (event) => {
var itemView = event.item; // layer-view of selection
itemView.watch("visible", (event) => {
LayerListWidget.operationalItems.forEach((layerView) => {
if (layerView.layer.id != itemView.layer.id) {
layerView.visible = false;
}
});
});
},
view: view,
});
I managed to write a code for you . Check it and let me know :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script language="javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };var busy=false;</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.on("toggle",function(evt){
if(busy) return;
selectedLayerSubIndex = evt.subLayerIndex;
if(selectedLayerSubIndex) return;
selectedLayerIndex = evt.layerIndex;
visibility = evt.visible;
elm = $("#layerListPane input[type=checkbox][data-layer-index="+selectedLayerIndex+"]:not([data-sublayer-index])");
otherCheckedElems = $("#layerListPane input[type=checkbox][data-layer-index!="+selectedLayerIndex+"]:not([data-sublayer-index]):checked");
if(visibility){
busy=true;
otherCheckedElems.each(function () {
$(this).click();
});
busy=false;
}
else{
checkedLength = otherCheckedElems.length
if(checkedLength==0) setTimeout("elm.click();", 100);
}
})
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Here is my scenario. I have 3 separate json objects. I want to have all the 3 object values to be displayed in a single div. i.e (first values of imageList, headingList and priceList in first div and similarly second). I am trying to use ng-repeat like the one shown below. But it shows an error. Is there any other way I can achieve this?
<div ng-controller="bannerController">
<div ng-repeat="image in imageList, heading in headingList, price in priceList">
<div style="background-image: url({{image.url}}); width: 1000px; height: 320px;">
<h1>{{heading.title}}</h1>
<p>{{price.price}}</p>
</div>
</div>
Below are the index.html and script.js
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="script.js"></script>
<title>Angular Test</title>
</head>
<body>
<div ng-controller="bannerController">
<div ng-repeat="image in imageList">
<div style="background-image: url({{image.url}}); width: 1000px; height: 320px;">
<h1>{{heading.title}}</h1>
</div>
</div>
</div>
</body>
</html>
script.js
var myApp = angular.module('myApp', []);
myApp.controller('bannerController', function ($scope) {
$scope.imageList = [{
url: 'some Url 1'
}, {
url: 'some url 2'
}];
$scope.headingList = [{
title: 'Title',
subtitle: 'Subtitle'
}, {
title: 'Title',
subtitle: 'Subtitle'
}];
$scope.priceList = [{
price: 2
}, {
price: 3
}];
});
You can get values by using $index property of ng-repeat.
plunker link