NET MVC Core and I am trying to use Particles.js. I have already tried referencing a few tutorials, but am unable to solve this issue. This is how it normally looks like. https://vincentgarreau.com/particles.js/#default
I got this however, with big and super laggy buttons and also it does not occupy full screen nor does it have the hover action (whereby the circle moves away as the mouse approaches). The onclick circle works though. And the configuration shouldn't be wrong, as I downloaded the default one.
Update: Just before posting I managed to make it full screen. However, the big buttons and lagginess remains.
The following is my codes so far. I tried to search the id or class but due to the lack of documentation it is quite hard to find. Hope someone who knows it can help! Thank you very much :)
#{
ViewData["Title"] = "Home Page";
}
<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(""); background-size: cover; background-repeat: no-repeat; ba">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: 0.4
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: false,
});
//var count_particles, stats, update;
//stats = new Stats;
//stats.setMode(0);
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.left = '0px';
//stats.domElement.style.top = '0px';
//document.body.appendChild(stats.domElement);
//count_particles = document.querySelector('.js-count-particles');
//update = function () {
// stats.begin();
// stats.end();
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
// }
// requestAnimationFrame(update);
//};
//requestAnimationFrame(update);;
</script>
Update: I finally found the answer. To facilitate people who working on this in the future, make sure to use the download from the sidebar and not the one in the center.
Not this (the download in the center):
But this (the one at the bottom right side, "Download current config(json)"):
I want to create an ER (entity relationship diagram) with JavaScript and GoJS. I also want when mouse hoovers above a node to show a text with some Info about each node. I tried to use this example and here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
function diagramInfo(model) {
return "A returned text for dispaly";
}
// provide a tooltip for the background of the Diagram, when not over any Part
myDiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the diagram model
new go.Binding("text", "", diagramInfo))
);
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
})
);
// define several shared Brushes
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });
// the template for each attribute in a node's array of item data
var itemTempl =
$(go.Panel, "Horizontal",
$(go.Shape,
{ desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
$(go.TextBlock,
{ stroke: "#333333",
font: "bold 14px sans-serif" },
new go.Binding("text", "name"))
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(go.Panel, "Table",
{ margin: 8, stretch: go.GraphObject.Fill },
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px sans-serif"
},
new go.Binding("text", "key")),
// the collapse/expand button
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),
// the list of Panels, each showing an attribute
$(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
,{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 50 },
new go.Binding("text", "color"))
) // end of Adornment
}
) // end Table Panel
);
// define the Link template, representing a relationship
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
selectionAdorned: true,
layerName: "Foreground",
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver
},
$(go.Shape, // the link shape
{ stroke: "#303B45", strokeWidth: 2.5 }),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);
// create the model for the E-R diagram
var nodeDataArray = [
{ key: "tabA",
items: [ { name: "TabA Key", iskey: true, figure: "Decision", color: 'pink' } ] },
{ key: "tabB",
items: [ { name: "TabB Key", iskey: true, figure: "Decision", color: 'pink' },
{ name: "TabB attribute", iskey: true, figure: "Decision", color: 'lightblue' } ] },
{ key: "tabC",
items: [ { name: "TabC Key", iskey: true, figure: "Decision", color: 'pink' }] }
];
//Options [BpmnEventTimer,BpmnEventConditional,MagneticData,Cube1,Decision,TriangleUp]
var linkDataArray = [
{ from: "tabA", to: "tabB", text: "1", toText: "1" },
{ from: "tabB", to: "tabC", text: "1", toText: "2" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 50%; height: 600px;"></div>
</div>
</body>
</html>
As you can see It generates a text box on mouse hoover over a node but it does not display any text. Can anyone help on how to generate text and specifically different text for each node? I want to display a different (predetermined) description for each node in that text.
Thanks in advance for any answer.
Yes, you should be using tooltips as the standard mechanism for showing something upon a mouse hover: https://gojs.net/latest/intro/tooltips.html.
In your node template it appears that you have assigned a tooltip to a panel inside your node. That means it is data bound to the same data that the node is bound to.
However, your binding of new go.Binding("text", "color") would imply that there be a "color" property on your node data. When I look at the node data in the model, there does not seem to be any "color" property on the node. So the binding is not evaluated. Since you hadn't assigned an initial value to the TextBlock.text property, there's no string to be rendered.
There is such a property on the individual item data, but you didn't assign the tooltip in the itemTemplate.
After the suggestion of Walter Northwoods I added the tooltip in item template and here is the code where each node item has each own descriptive toolip
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
function diagramInfo(model) {
return "A returned text for dispaly";
}
// provide a tooltip for the background of the Diagram, when not over any Part
myDiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the diagram model
new go.Binding("text", "", diagramInfo))
);
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
})
);
// define several shared Brushes
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });
// the template for each attribute in a node's array of item data
var itemTempl =
$(go.Panel, "Horizontal",
$(go.Shape,
{ desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
$(go.TextBlock,
{ stroke: "#333333",
font: "bold 14px sans-serif" },
new go.Binding("text", "name")),
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 10 },
new go.Binding("text", "desc"))
) // end of Adornment
}
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(go.Panel, "Table",
{ margin: 8, stretch: go.GraphObject.Fill },
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px sans-serif"
},
new go.Binding("text", "key")),
// the collapse/expand button
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),
// the list of Panels, each showing an attribute
$(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
) // end Table Panel
);
// define the Link template, representing a relationship
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
selectionAdorned: true,
layerName: "Foreground",
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver
},
$(go.Shape, // the link shape
{ stroke: "#303B45", strokeWidth: 2.5 }),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);
// create the model for the E-R diagram
var nodeDataArray = [
{ key: "tabA",
items: [ { name: "TabA Key", iskey: true, figure: "Decision", color: 'pink' , desc: "Tab A Key is tab A key" } ],
nodedesc: "Tab A desc" },
{ key: "tabB",
items: [ { name: "TabB Key", iskey: true, figure: "Decision", color: 'pink', desc: "Tab B Key is tab B key" },
{ name: "TabB attribute", iskey: true, figure: "Decision", color: 'lightblue', desc: "Tab B Attribute is tab B attr" } ],
nodedesc: "Tab B desc" },
{ key: "tabC",
items: [ { name: "TabC Key", iskey: true, figure: "Decision", color: 'pink' , desc: "Tab C Key is tab C key" } ],
nodedesc : "Tab C desc" }
];
//Options [BpmnEventTimer,BpmnEventConditional,MagneticData,Cube1,Decision,TriangleUp]
var linkDataArray = [
{ from: "tabA", to: "tabB", text: "1", toText: "1" },
{ from: "tabB", to: "tabC", text: "1", toText: "2" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 50%; height: 600px;"></div>
</div>
</body>
</html>
to simplify the answer - you need to add tooltip property to your nodeTemplate and bind data ( in this example im binding to nodeDataArray.key ), analogically to this:
yourDiagram.nodeTemplate = go.GraphObject.make(go.Node, 'Spot',
{
toolTip:
go.GraphObject.make(go.Adornment, "Spot",
{
background: "transparent"
},
go.GraphObject.make(go.Placeholder, {
padding: 5
}),
go.GraphObject.make(go.TextBlock,
{
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Bottom,
stroke: "#0f1b54",
editable: true
},
new go.Binding("text", "key", function (tooltip_key) {
return tooltip_key
})),
)
},
I am using the free version of Flowplayer and within that I am trying to incorporate the Youtube style resolution picker. I am getting the error mentioned below, when I hit play.
200, Stream not found, NetStream.Play.StreamNotFound, clip: '[Clip] 'video-800-old_1080'
New to this so cant really figure out what is wrong. Somehow I believe it has something to do with the URL as all the videos mentioned in the bitrate array are present on my local machine.
Below is my code for trying to do stream with different bitrates
<html>
<head>
<style type="text/css">
.container{
margin: 0 auto;
width: 700px;
height: 450px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../flowplayer-3.2.12.min.js"></script>
<!-- some minimal styling, can be removed -->
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div class="container">
<a
href="http://localhost/shivam/admin/uploads/videos/video-800-old_1080.mp4"
style="display:block;width:100%;height:100%;"
id="player">
<img src="flow_eye.jpg" width="100%" height="100%" alt="Search engine friendly content" />
</a>
<script>
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
autoPlay: true,
provider: 'rtmp',
// urlResolvers is needed here to point to the bitrate select plugin
urlResolvers: 'brselect',
bitrates: [
{ url: "mp4:video-800-old_1080", bitrate: 1080, isDefault: true,label: "1080 k"},
{ url: "mp4:video-800-old_420", bitrate: 420, label: "420 k" },
{ url: "mp4:video-800-old_320", bitrate: 320, label: "320 k" }
]
},
plugins: {
menu: {
url: "http://releases.flowplayer.org/swf/flowplayer.menu-3.2.12.swf",
items: [
// you can have an optional label as the first item
// the bitrate specific items are filled here based on the clip's bitrates
{ label: "select bitrate:", enabled: false }
]
},
brselect: {
url: "http://releases.flowplayer.org/swf/flowplayer.bitrateselect-3.2.13.swf",
// enable the bitrate menu
menu: true,
},
// RTMP streaming plugin
rtmp: {
url: "http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.12.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
// a content box so that we can see the selected bitrate. (for demonstation
// purposes only)
content: {
url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.swf",
top: 0,
left: 0,
width: 400,
height: 150,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
},
controls: {
tooltips: { buttons: true }
}
}
});
</script>
</div>
</body>
</html>
First, you getting error because you dont have RTMP Server, try using lighttpd.
Try the below code,
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
autoPlay: true,
provider: 'lighttpd',
// urlResolvers is needed here to point to the bitrate select plugin
urlResolvers: 'brselect',
bitrates: [
{ url: "http://localhost/flowplayer/example/gangnam.flv", bitrate: 885, isDefault: true,label: "1080 k"},
{ url: "http://localhost/flowplayer/example/gangnam_1080.flv", bitrate: 885, label: "320 k" }
]
},
plugins: {
menu: {
url: "http://releases.flowplayer.org/swf/flowplayer.menu-3.2.12.swf",
items: [
{ label: "select bitrate:", enabled: false }
]
},
brselect: {
url: "http://releases.flowplayer.org/swf/flowplayer.bitrateselect-3.2.13.swf",
menu: true,
},
lighttpd: {
url: "flowplayer.pseudostreaming-3.2.12.swf"
},
content: {
url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.swf",
top: 0,
left: 0,
width: 400,
height: 150,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
},
controls: {
tooltips: { buttons: true }
}
}
});
When you give the URL of file, use proper bitrates else when you'll switch the resolution the video will start playing again.
Good luck!!!