Exchange in MemoDraw

You can exchange and visualize data format of memodraw graph.

- Import
- Export
- Integrate
- JSON Format

Import

Permit tu use a local file and visualize then directly!
On desktop, via drag & drop of JSON file in www.memodraw.com windows
On mobil, open JSON by a app, and share it on memodraw app [todo]

Export

Permit to obtain a local file description of the curent graph on use!
Via bottom menu / "share" / tool tip / export JSON

Integrate

sample: basic / moutarde

Use memodraw as a "player" in your web site!
Via tag iframe & memodraw-exchange.js

Need somme HTML & JS:

<html>
  <head>
    <!-- Memodraw, below line is important on mobile: preserve tooltip size & button up size -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <script src="/api/memodraw-exchange.js"></script>
  </head>
  <body>
    <iframe 
      src="https://www.memodraw.com" title="Memodraw menu" name="iframe_memodraw" 
      style="border:none;" width="100%" height="40%">
    </iframe>
    <script>
      memodraw.exchange.init();
      memodraw.exchange.useAnimationAnchor(true); // [optional] can animate anchor on item clicked
	  
      function iframeConfig() {
        let json = {
          request: {
            status: "ok",
            ask: {
              // [...]
            }
          },
          nodesDefault: {
            // [...]
          },
          nodes: [				
            // [...]
          ],
          edgesDefault: {
            // [...]
          },
          edges: [		
            // [...]
          ]
        };
        memodraw.exchange.config("iframe_memodraw", json);
      }

      onload = (event) => {
        iframeConfig();
      }		
    </script>
  <!-- [...] -->
  </body>
</html>


 For using as menu navigation:


use node "href" values
add request/ask params: 
	
	showTitle: false // no need top ui with: memodraw logo, title & clear button
	showOptions: false // no need bottom menu
	skinBackground: "grey" // back ground choices
	useWheel: false // no mouse wheel for zooming because change usual interaction scolling
	usePinch: false // no need pinch for zoom because break scoll on object
	useMenuTheme: false // normaly not need this menu on this context
	useMenuEmpty: false // normaly not need this menu on this context
	

(see all possible params on resquest)





 JSON format
essential / preporcessor / complete



Essential JSON:
This is the minimal/classical JSON file need to describe a complete graph

(ie. https://memodraw.com/?source=Cat&target=Dog)


{
	"request": {	// original request 
		"ask": {			// original params 
			"search": "tree",	// can be: tree / path / completion / resume / ...
			"source": "coucou",	// source name
			"entry": "fr.wiki",	// entry format "lang.site"		
			"showOptions": false,// need or not the options UI (at bottom)
			"showTitle": false,	// need or not the title UI (at top)
			"skinBackground": "grey", // back ground choices
			"useWheel": false, // no mouse wheel for zooming because change usual interaction scolling
			"usePinch": false, // no need pinch for zoom because break scoll on object
			"useMenuTheme": false, // normaly not need this menu on this context
			"useMenuEmpty": false // normaly not need this menu on this context
		}
	},
	"nodes": [	// list of nodes
		{	// [0]
			"text": "Dog",	// name (but unique)
			"description": "domestic animal", // desription, [no need carriage return, it's done automaticaly if need by the viewer]
			"image": "https://www.memodraw.com/images/dog.jpg", // [optional] picture url if any (not need > 200x200 pixels)
			"width": 200,	// [optional] width of image if any
			"height": 148,	// [optional] height of image if any
			"href": "https://www.myWebSite.com/menu_dog.html" // [optional] url on click (so circle menu is hiden)
		},
		{	// [1]
			"text": "Cat",
			"description": "domesticated feline", 
			"image": "https://www.memodraw.com/images/cat.jpg", 
			"width": 200,	
			"height": 148	
			"href": "#cat" // [optional] can be tag url too
		},
		{	// [2]
			"text": "Coyote",
			"description": "species of canine", 
			"image": "https://www.memodraw.com/images/coyote.jpg", 
			"width": 200,	
			"height": 180	
		},
		{	// [3]
			"text": "Pet",
			"description": "animal kept for companionship and a person's enjoyment" 
		}
	],
	"edges": [	// list of connections of nodes
		{
			"from": 1,		// rank of source concerned node (here: "Cat")
			"to": 0,		// rank of destination concerned node (here: "Dog")
			"context", "Hearing|Sociability|Fighting" // contexts list (with '|' separator)
			"href": "#dog2cat"
		},
		{
			"from": 1,		// cat
			"to": 2,		// coyote
			"context": "Hunting and feeding"
		},
		{
			"from": 2,		// coyote
			"to": 0,		// dog
			"context": "Evolution|DNA evidence"
		},

		{
			"from": 1,		// cat
			"to": 3,		// pet
			"context": "Feral cats"
		},
		{
			"from": 3,		// pet
			"to": 1,		// dog
			"context": "Mammals"
		}
	]
}



Preporcessor JSON:
It's tricks to simplify JSON writing


nodesDefault: define rules applying to every nodes
edgesDefault: define rules applying to every edge
field substitution: permit subtitutions with systax as: "${field}"

(with special ${from.text} & ${to.text} to not retrieve id but text concerned)


{
	"nodesDefault": {	// default fields & template for every nodes
		"site": "https://www.myWebSite.com", // define a "path" variable (can be use as "${path}")
		"path": "https://www.myWebSite.com/images",
		"href": "#${text}",	// define a href logic on on every node
		"image": "https://www.myWebSite.com/images/${text}.jpg"
	},
	"nodes": [	// list of nodes
		{	
			"text": "first",	// name (have to be unique if used edges.fromTo)
			"href": "${site}/first.html" // if used, is priority again nodesDefault.href 
		}, {	
			"text": "second"
		}, {	
			"text": "third"
		}
	],
	"edgesDefault": { // default fields & template for every edges
		"href": "#${from.text}_${to.text}",
		"weight": 1,
		"lod": 0,
		"width": 200,
		"height": 100
	},
	"edges": [	// list of connections of nodes
		{ "fromTo": "first->second" },		// generate { from: rank, to: rank }
		{ "fromTo": "second->third" },
		{ "fromTo": "first->third" }
	]
}

gererate this:
{
	"nodes": [
		{	
			"text": "first",
			"href": "https://www.myWebSite.com/first.html",
			"image": "https://www.myWebSite.com/images/first.jpg",
			"width": 200,
			"height": 100
		}, {	
			"text": "second",
			"href": "#second",
			"image": "https://www.myWebSite.com/images/second.jpg",
			"width": 200,
			"height": 100
		}, {	
			"text": "third",
			"href": "#third",
			"image": "https://www.myWebSite.com/images/third.jpg",
			"width": 200,
			"height": 100
		}
	],
	"edges": [	// list of connections of nodes
		{ 
			"from": 0, 
			"to": 1,
			"href": "#first_second",
			"weight": 1,
			"log": 0
		}, { 
			"from": 1, 
			"to": 2,
			"href": "#second_third",
			"weight": 1,
			"log": 0
		}, { 
			"from": 0, 
			"to": 2,
			"href": "#first_third",
			"weight": 1,
			"log": 0
		}
	]
}




Complete JSON:
This is the complete JSON file need to describe a complete graph


optional nodes:

	"request" [only usefull for server & integrity request, except 'ask']
	"lods" [Level Of Detail, if usefull]
	"clusters" [groups of nodes, if usefull]


{
	"request": {	// original request & report states
		"status": "ok",			// [optional] ok / ko: error description
		"ask": {			// original params
			"search": "tree",	// can be: tree / path / completion / resume / ...
			"source": "coucou",	// source name
			"target": "toi",	// [on search=path only] target name 
			"levelIn": 0,		// [on search=tree only]
			"levelOut": 2,		// [on search=tree only]
			"distMax": -1,		// [on search=path only] path finding distance max limitation (-1: infinit)
			"stepMax": -1		// [on search=path only] path finding step max limitation (-1: infinit)
			"weightMax": -1,
			"nodeDegree": 5,	// [on search=tree only]
			"useTerminal": 0,
			"clusterSubset": 0,	// [not used yet] true/false 
			"method": "embed",	// can be: score / force / step / embed
			"entry": "fr.wikt"	// entry format "lang.site"
		},
		"solvedTime": "188.5ms",// [optional] time resolution of the solver server
		"overflow": false		// [optional] result size overflow the limitation ?
	},
	"lods": [	// [optional] Level Of Details: list of zoom factor & quantity of links visible
		{
			"lod": 1.8871,		// for a zoom of 1.8871x
			"links": 11			// they are new 11 links 
		},
		{
			"lod": 2.29717,		// for a zoom of 2.29717x
			"links": 10			// they are new 20 links (so it's a total of 31 links)
		}		
	],
	"clusters": {	// [optional] groups of nodes
		"4308": {	// cluster ID
			"name": "Dé",	// names
			"coor": "246.335,-1620.89,450.745,123.427,269.972,471.155,873.103,609.854,346.389", // [optional] 9d coordinate
			"used": 22		// nb times of nodes that use this cluster on the complete graph 
		},
		"4309": {
			"name": "Lac",
			"coor": "176.191,-1515.58,330.908,-18.2949,331.11,124.042,596.005,669.288,342.233",
			"used": 20
		}
	},
	"nodes": [	// list of nodes
		{
			"text": "fr.wiki:Rat",	// name, can be "entity:article" or free format (but unique)
			"description": "nom ambigu de rongeurs", // desription, [no need carriage return, it's done automaticaly if need by the viewer]
			"dist": 1.38462,		// [optional] distance from source request position
			"image": "https://www.memodraw.com/images/Ratvxd.jpg", // [optional] picture url if any (not need > 200x200 pixels)
			"cluster": 4308,		// [optional] cluster ID 
			"coor": "-291.608,538.132,445.294,-7912.62,6203.71,13456.9,-6476.7,13136.2,-110.908", // [optional]
			"width": 200,	// [optional] width of image if any
			"height": 148	// [optional] height of image if any
		},
		{
			"text": "fr.wiki:Souris",
			"description": "nom vernaculaire pour les animaux du genre Mus",
			"dist": 1.84011,
			"image": "https://www.memodraw.com/images/Mouse-19-Dec-2004.jpg",
			"cluster": 4308,
			"coor": "511.162,-94.2752,1821.52,-1572.86,9461.31,14135,-7891.57,16634.5,-4569",
			"width": 200,
			"height": 133
		}
	],
	"edges": [	// list of connections of nodes
		{
			"from": 0,		// rank of source concerned node (here: "fr.wiki:Rat")
			"to": 1,		// rank of destination concerned node (here: "fr.wiki:Souris")
			"weight": 0.455492,	// [optional] weight distance of the connexion (>0)
			"context": "Étymologie et histoire du mot/Évolution du terme|Physiologie, comportement et écologie/Caractéristiques communes|Rats et humains/Considérés comme nuisibles|Rats et humains/Aspects culturels/En Occident|Voir aussi/Articles connexes", // contexts list (with '|' separator)
			"lod": 0		// [optional] considering LODS
		},
		{
			"from": 2,
			"to": 0,
			"weight": 1.38462,
			"context": "Histoire/Domestication|Histoire/Littérature/Fiction/Contes, fables et poésie",
			"lod": 0
		}
	]
}