From 05e761abca3ff42dbba371af0560b82707dfe7c0 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Fri, 28 Oct 2016 13:31:36 -0700 Subject: updated vis --- .../examples/network/nodeStyles/HTMLInNodes.html | 86 +++++++++ .../network/nodeStyles/circularImages.html | 102 +++++++++++ .../vis/examples/network/nodeStyles/colors.html | 67 +++++++ .../examples/network/nodeStyles/customGroups.html | 132 ++++++++++++++ .../vis/examples/network/nodeStyles/groups.html | 119 +++++++++++++ www/lib/vis/examples/network/nodeStyles/icons.html | 196 +++++++++++++++++++++ .../vis/examples/network/nodeStyles/images.html | 82 +++++++++ .../network/nodeStyles/imagesWithBorders.html | 105 +++++++++++ .../vis/examples/network/nodeStyles/shadows.html | 119 +++++++++++++ .../vis/examples/network/nodeStyles/shapes.html | 72 ++++++++ .../nodeStyles/shapesWithDashedBorders.html | 61 +++++++ 11 files changed, 1141 insertions(+) create mode 100644 www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html create mode 100644 www/lib/vis/examples/network/nodeStyles/circularImages.html create mode 100644 www/lib/vis/examples/network/nodeStyles/colors.html create mode 100644 www/lib/vis/examples/network/nodeStyles/customGroups.html create mode 100644 www/lib/vis/examples/network/nodeStyles/groups.html create mode 100644 www/lib/vis/examples/network/nodeStyles/icons.html create mode 100644 www/lib/vis/examples/network/nodeStyles/images.html create mode 100644 www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html create mode 100644 www/lib/vis/examples/network/nodeStyles/shadows.html create mode 100644 www/lib/vis/examples/network/nodeStyles/shapes.html create mode 100644 www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html (limited to 'www/lib/vis/examples/network/nodeStyles') diff --git a/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html new file mode 100644 index 00000000..4eca8191 --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html @@ -0,0 +1,86 @@ + + + + Network | HTML in nodex + + + + + + + + + + + +

+ This example demonstrates showing custom HTML in Nodes, by using an SVG image. +

+

+ WARNING: this is currently not supported by all browsers. +

+
+ + diff --git a/www/lib/vis/examples/network/nodeStyles/circularImages.html b/www/lib/vis/examples/network/nodeStyles/circularImages.html new file mode 100644 index 00000000..46cf898e --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/circularImages.html @@ -0,0 +1,102 @@ + + + + Network | Circular images + + + + + + + + + + + + +
+ + diff --git a/www/lib/vis/examples/network/nodeStyles/colors.html b/www/lib/vis/examples/network/nodeStyles/colors.html new file mode 100644 index 00000000..900ab3bf --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/colors.html @@ -0,0 +1,67 @@ + + + + Network | Basic usage + + + + + + + + +

+ Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors. + When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors. +

+ +
+ + + + + + diff --git a/www/lib/vis/examples/network/nodeStyles/customGroups.html b/www/lib/vis/examples/network/nodeStyles/customGroups.html new file mode 100644 index 00000000..bf810bcc --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/customGroups.html @@ -0,0 +1,132 @@ + + + + Network | Custom Groups + + + + + + + + + + + + We use an icon once in the DOM so the CSS for fontAwesome is loaded. +
+ + + diff --git a/www/lib/vis/examples/network/nodeStyles/groups.html b/www/lib/vis/examples/network/nodeStyles/groups.html new file mode 100644 index 00000000..03778330 --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/groups.html @@ -0,0 +1,119 @@ + + + + Network | Groups + + + + + + + + + + + +
+ + + diff --git a/www/lib/vis/examples/network/nodeStyles/icons.html b/www/lib/vis/examples/network/nodeStyles/icons.html new file mode 100644 index 00000000..0b27fbcb --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/icons.html @@ -0,0 +1,196 @@ + + + + + + Network | node as icon + + + + + + + + + + + + + +

+Icons can be used for nodes as well. This example shows Icons from fontAwesome and Ionicons but it should work with similar packages as well. + It uses unicode and css to define the icons.

Remember! Unicode in javascript is done like this: \uf274 for the unicode f274. +
If a node is shown as a rectangle, it means the css is not loaded (or not yet loaded). A redraw will fix that. + +

+ +

+ Use FontAwesome-icons for nodes

+
+

+ Use Ionicons-icons for nodes

+
+ + + + diff --git a/www/lib/vis/examples/network/nodeStyles/images.html b/www/lib/vis/examples/network/nodeStyles/images.html new file mode 100644 index 00000000..a64689d5 --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/images.html @@ -0,0 +1,82 @@ + + + + Network | Images + + + + + + + + + + + +

+ Display nodes as images. +

+
+ + + diff --git a/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html new file mode 100644 index 00000000..fdfe4abf --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html @@ -0,0 +1,105 @@ + + + + Network | Images With Borders + + + + + + + + + + + + +
+ + diff --git a/www/lib/vis/examples/network/nodeStyles/shadows.html b/www/lib/vis/examples/network/nodeStyles/shadows.html new file mode 100644 index 00000000..bfa7b86a --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/shadows.html @@ -0,0 +1,119 @@ + + + + Network | Groups + + + + + + + + + + + +
+ + + diff --git a/www/lib/vis/examples/network/nodeStyles/shapes.html b/www/lib/vis/examples/network/nodeStyles/shapes.html new file mode 100644 index 00000000..1f4b92ba --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/shapes.html @@ -0,0 +1,72 @@ + + + + Network | Shapes + + + + + + + + + + + +

+ Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size. +

+
+ +
+ + diff --git a/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html new file mode 100644 index 00000000..9ba68e86 --- /dev/null +++ b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html @@ -0,0 +1,61 @@ + + + + Network | Shapes + + + + + + + + + + + +

+ Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size. +

+
+ +
+ + -- cgit v1.2.3