Example #1
0
    public function __construct()
    {
        $l1modellen = Model::geefL1modellen();
        $l2cases = Model::geefL2cases();
        $urlpad = rtrim($_SERVER['REQUEST_URI'], '/');
        $this->inhoud .= '<h2 id="practices">Practices (L1)</h2><ul>';
        if (isset($l1modellen)) {
            foreach ($l1modellen as $l1uri => $l1beschrijving) {
                $this->inhoud .= '<li><a href="' . $urlpad . '/toon/' . Uri::stripSMWuriPadEnPrefixes($l1uri) . '">' . $l1beschrijving . '</a></li>';
            }
        } else {
            $this->inhoud .= '<li>Geen modellen gevonden.</li>';
        }
        $this->inhoud .= '</ul><h2 id="experiences">Experiences (L2, cases)</h2><ul>';
        if (isset($l2cases)) {
            foreach ($l2cases as $l2uri => $l2beschrijving) {
                $this->inhoud .= '<li><a href="' . $urlpad . '/toon/' . Uri::stripSMWuriPadEnPrefixes($l2uri) . '">' . $l2beschrijving . '</a></li>';
            }
        } else {
            $this->inhoud .= '<li>Geen cases gevonden.</li>';
        }
        $this->inhoud .= '
		</ul>
		<h2>Nieuwe experience aanmaken</h2>';
        if (isset($l1modellen)) {
            $this->inhoud .= '<p>Het aanmaken van een nieuwe experience kan enkele minuten in beslag nemen.</p>
			<form method="post">
				<table>
					<tr><td style="width: 150px;">Gebaseerd op:</td><td>
				<select style="width:350px;" name="l1model">';
            foreach ($l1modellen as $l1uri => $l1beschrijving) {
                $this->inhoud .= '<option value="' . $l1uri . '">' . $l1beschrijving . '</option>';
            }
            $this->inhoud .= '
				</select></td></tr>
				<tr><td>Naam:</td><td><input style="width:342px;" type="text" name="titel" /></td></tr>
				<tr><td colspan="100%"><input type="submit" value="Aanmaken" /></td></tr>
				</table>
			</form>';
        } else {
            $this->inhoud .= '<p>Geen modellen gevonden.</p>';
        }
    }
Example #2
0
 static function geefL1modelVanCase($l2_uri)
 {
     if (!self::modelIsExperience($l2_uri)) {
         return null;
     }
     $query = 'SELECT ?model WHERE { % property:Part_of ?model}';
     $connectie = new SPARQLConnection();
     $result = $connectie->escapedQuery($query, array($l2_uri));
     return 'wiki:' . Uri::stripSMWuriPadEnPrefixes($result['results']['bindings'][0]['model']['value']);
 }
    public function __construct($model_uri)
    {
        if (!$model_uri) {
            $model_uri = 'wiki:Building_with_Nature-2Dinterventies_op_het_systeem_practice';
        }
        $url = explode('?', rtrim($_SERVER['REQUEST_URI'], '/'));
        $hoofdvisualisatie_id = 'visualisatie-' . Uri::stripSMWuriPadEnPrefixes($model_uri);
        if ($_POST) {
            $type = $_GET['type'];
            $actie = $_GET['actie'];
            if ($type == 'context') {
                if ($actie == 'extrasupercontext') {
                    $context = $_POST['context'];
                    $supercontext = $_POST['supercontext'];
                    if ($context != $supercontext) {
                        Model::extraSupercontext($context, $supercontext);
                    }
                } elseif ($actie == 'supercontextverwijderen') {
                    list($context, $supercontext) = explode('|', $_POST['verwijder-supercontexten']);
                    Model::supercontextVerwijderen($context, $supercontext);
                }
            } elseif ($type == 'ie') {
                if ($actie == 'contexttoevoegen') {
                    $ie = $_POST['ie'];
                    $context = $_POST['context'];
                    Model::contextToevoegenAanIE($ie, $context);
                } elseif ($actie == 'verwijderverband') {
                    $waardes = explode('|', $_POST['verwijder-verband']);
                    Model::verwijderVerband($waardes[0], $waardes[2], $waardes[1]);
                }
            }
        }
        $this->inhoud .= sprintf('
			<p>U kunt elementen verslepen om het overzicht te verbeteren. Dubbelklik op een element om de wikipagina ervan weer te geven.</p>

			<button title="Terug naar modellenoverzicht" onclick="window.location=\'%1$s/../../\'">⮤</button>
			<button title="Herladen" onclick="window.location=\'%1$s\';">⟳</button>
			<button title="Naar hoofdcontext scrollen" onclick="adjustScrollbars(visualisatieId,true,0);">⯐</button>', $url[0]);
        if (Model::modelIsExperience($model_uri)) {
            $this->inhoud .= ' <button title="Nieuw Intentional Element" onclick="toggleL1modelDiv(true);">➕ IE</button>';
            $this->inhoud .= ' <button title="Nieuwe Context" onclick="nieuweContextPopup();">➕ Context</button>';
        }
        $this->inhoud .= sprintf('
		<div id="visualisatiepaginacontainer">
			<div id="div-%1$s"></div>
		</div>
			<script type="text/javascript">

				$("#visualisatiepaginacontainer").height($("#mw-content-text").width()*0.75);

				var domeinprefix = "%2$s";

				var contextUri = "%3$s";
				var visualisatieId = "%1$s";

				startVisualisatie(visualisatieId, contextUri);
			</script>', $hoofdvisualisatie_id, Uri::geefDomeinPrefix(), Model::geefContextVanModel($model_uri));
        if (Model::modelIsExperience($model_uri)) {
            $l1model = Model::geefL1modelVanCase($model_uri);
            $l1hoofdcontext = Model::geefContextVanModel($l1model);
            $context_uri = Model::geefContextVanModel($model_uri);
            $contexten = Model::geefUrisVanContextEnSubcontexten($context_uri);
            $contextenlijst = '';
            foreach ($contexten as $context) {
                $contextenlijst .= '<option value="' . $context . '">' . Uri::SMWuriNaarLeesbareTitel($context) . '</option>';
            }
            $data = Model::geefElementenUitContextEnSubcontexten($context_uri);
            $ie_lijst = '';
            $verbandenlijst = array();
            $ie_contexten = array();
            foreach ($data['@graph'] as $item) {
                if ($item['@id']) {
                    $ie_lijst .= '<option value="' . $item['@id'] . '">' . $item['label'] . '</option>';
                    $elementen = Model::elementenNaarArrays(Model::geefArtikelTekst($item['@id']));
                    foreach ($elementen as $element) {
                        if ($element['Element link']) {
                            $verbandenlijst[] = array('van' => $item['label'], 'type' => $element['type'], 'naar' => $element['Element link']);
                        } elseif ($element['type'] == 'Intentional Element links' || $element['type'] == 'Activity links') {
                            $linksverbanden = array();
                            if ($element['Part of']) {
                                $linksverbanden = explode(',', $element['Part of']);
                                foreach ($linksverbanden as $linksverband) {
                                    if (trim($linksverband)) {
                                        $verbandenlijst[] = array('van' => $item['label'], 'type' => 'Part of', 'naar' => trim($linksverband));
                                    }
                                }
                            }
                            if ($element['Consumes']) {
                                $linksverbanden = explode(',', $element['Consumes']);
                                foreach ($linksverbanden as $linksverband) {
                                    if (trim($linksverband)) {
                                        $verbandenlijst[] = array('van' => $item['label'], 'type' => 'Consumes', 'naar' => trim($linksverband));
                                    }
                                }
                            }
                            if ($element['Produces']) {
                                $linksverbanden = explode(',', $element['Produces']);
                                foreach ($linksverbanden as $linksverband) {
                                    if (trim($linksverband)) {
                                        $verbandenlijst[] = array('van' => $item['label'], 'type' => 'Produces', 'naar' => trim($linksverband));
                                    }
                                }
                            }
                        }
                    }
                    if ($item['Eigenschap-3AContext']) {
                        if (is_array($item['Eigenschap-3AContext'])) {
                            foreach ($item['Eigenschap-3AContext'] as $ie_context) {
                                $ie_contexten[$item['@id']][] = $ie_context;
                            }
                        } else {
                            $ie_contexten[$item['@id']][] = $item['Eigenschap-3AContext'];
                        }
                    }
                }
            }
            $sec_visualisatie_id = 'visualisatie-' . Uri::stripSMWuriPadEnPrefixes($l1model);
            ////
            $this->inhoud .= '<h2>Verband verwijderen</h2>';
            $this->inhoud .= '<form method="post" action="?actie=verwijderverband&amp;type=ie"><table>';
            foreach ($verbandenlijst as $verband) {
                $this->inhoud .= '<tr><td><input type="radio" name="verwijder-verband" value="' . $verband['van'] . '|' . $verband['type'] . '|' . $verband['naar'] . '"/>&nbsp;</td><td>' . $verband['van'] . '&nbsp;</td><td>' . $verband['type'] . '&nbsp;</td><td>' . $verband['naar'] . '</td></tr>';
            }
            $this->inhoud .= '</table><input type="submit" value="Verwijderen"></form>';
            ////
            $this->inhoud .= '<h2>Supercontext toevoegen aan context</h2>';
            $this->inhoud .= '<form method="post" action="?actie=extrasupercontext&amp;type=context">';
            $this->inhoud .= 'Context: <select name="context">' . $contextenlijst . '</select><br />';
            $this->inhoud .= 'Supercontext: <select name="supercontext">' . $contextenlijst . '</select><br />';
            $this->inhoud .= '<input type="submit" value="Toevoegen"></form>';
            ////
            $this->inhoud .= '<h2>Supercontext verwijderen van context</h2>';
            $this->inhoud .= '<form method="post" action="?actie=supercontextverwijderen&amp;type=context"><table><tr><th></th><th>Context</th><th>Supercontext</th></tr>';
            foreach ($contexten as $context) {
                $supercontexten = Model::zoekSupercontexten($context);
                foreach ($supercontexten as $supercontext) {
                    $this->inhoud .= '<tr><td><input type="radio" name="verwijder-supercontexten" value="' . $context . '|' . $supercontext . '">&nbsp;</td><td>' . Uri::SMWuriNaarLeesbareTitel($context) . '&nbsp;</td><td>' . Uri::SMWuriNaarLeesbareTitel($supercontext) . '</td></tr>';
                }
            }
            $this->inhoud .= '</table><input type="submit" value="Verwijderen" /></form>';
            ////
            $this->inhoud .= '<h2>Context aan Intentional Element toevoegen</h2>';
            $this->inhoud .= '<form method="post" action="?actie=contexttoevoegen&amp;type=ie">';
            $this->inhoud .= '<table><tr><td>Intentional Element</td><td><select name="ie">';
            $this->inhoud .= $ie_lijst;
            $this->inhoud .= '</select></td></tr><tr><td>Context</td><td><select name="context">';
            $this->inhoud .= $contextenlijst;
            $this->inhoud .= '</select></td></tr></table><input type="submit" value="Toevoegen" /></form>';
            ////
            $this->inhoud .= '<h2>Context van Intentional Element verwijderen</h2>';
            ////
            $this->inhoud .= '<h2>Context van Intentional Element vervangen</h2>';
            $this->inhoud .= '<table>';
            $this->inhoud .= '<tr><th>IE</th><th>Context</th><th>Vervangen door</th></tr>';
            foreach ($ie_contexten as $ie => $contextlijst) {
                foreach ($contextlijst as $context) {
                    $this->inhoud .= '<form method="post" action="?actie=contextvervangen&amp;type=ie&amp;ie=' . $ie . '&amp;context=' . $context . '">';
                    $this->inhoud .= '<tr><td>' . Uri::SMWuriNaarLeesbareTitel($ie) . '</td><td>' . Uri::SMWuriNaarLeesbareTitel($context) . '</td><td><select name="nieuwecontext">';
                    foreach ($contexten as $beschikbarecontext) {
                        if ($beschikbarecontext != $context) {
                            $this->inhoud .= '<option value="' . $beschikbarecontext . '">' . Uri::SMWuriNaarLeesbareTitel($beschikbarecontext) . '</option>';
                        }
                    }
                    $this->inhoud .= '</select></td><td><input type="submit" value="Vervangen"/></td></tr></form>';
                }
            }
            $this->inhoud .= '</table>';
            $this->inhoud .= '
				<script type="text/javascript">
					var secContextUri = "' . Model::geefContextVanModel($l1model) . '";
					var secVisualisatieId = "' . $sec_visualisatie_id . '";

					createL1hoverPopup(secVisualisatieId);
					startVisualisatie(secVisualisatieId, secContextUri);
				</script>
				<div id="popupOverlay"></div>';
        }
    }
Example #4
0
    public function __construct($model_uri)
    {
        //TODO NA: als ResourceLoader-modules toevoegen
        $this->inhoud .= '<script type="text/javascript" src="/mediawiki/extensions/EMontVisualisator/includes/js/d3.v3.js"></script>';
        $this->inhoud .= '<script type="text/javascript" src="/mediawiki/extensions/EMontVisualisator/includes/js/cola.v3.min.js"></script>';
        $this->inhoud .= '<link rel="stylesheet" type="text/css" href="/mediawiki/extensions/EMontVisualisator/includes/css/visualisatie.css"></style>';
        //$domeinprefix='http://195.93.238.49/wiki/deltaexpertise/wiki/index.php/';
        $domeinprefix = 'http://127.0.0.1/mediawiki/index.php/';
        $context_uri = Model::geefContextVanModel($model_uri);
        $svgheight = 2280;
        $nodeheight = 30;
        $nodewidth = 100;
        $visualisatie_id = 'visualisatie-' . Uri::stripSMWuriPadEnPrefixes($model_uri);
        $this->inhoud .= '
		<svg id="' . $visualisatie_id . '" width="100%" height="' . $svgheight . '">
			<defs>
				<marker id="standaard" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="5" markerHeight="5" orient="auto">
		        	<path d="M0,-5L10,0L0,5"></path>
		    	</marker>
			</defs>
		</svg>
		<script type="text/javascript">

		function openInNewTab(url) {
			var win = window.open(url, \'_blank\');
			win.focus();
		}

		var graph;
		var width = $("#' . $visualisatie_id . '").width();
		var	height = $("#' . $visualisatie_id . '").height();

		// Haal de gegevens op
		$.ajax({
			type : "POST",
			cache : false,
			url : "/mediawiki/extensions/EMontVisualisator/includes/php/php-emont/VisualisationJSON.php",
			async : true,
			dataType: \'json\',
			data:{ context_uri: "' . $context_uri . '"},
			success: function(result) {
				graph=result;
				tekenDiagram();
			}
		});

		function tekenDiagram()
		{
			// Selecteer de visualisatie-container
		    var svg = d3.select(\'#' . $visualisatie_id . '\');

			console.log(width);
			console.log(height);

			var force = cola.d3adaptor()
		    	.linkDistance(120)
		    	.avoidOverlaps(true)
				.size([width, height])
		        .handleDisconnected(false)
		        .symmetricDiffLinkLengths(30)
		    	.nodes(graph.nodes)
		    	.links(graph.links)
		    	.constraints(graph.constraints)
		    	.groups(graph.groups);
		    var margin = 5, pad = 10;

			// Teken de pijlen
			force.on("tick", function () {
				node.each(function (d) {
		                d.innerBounds = d.bounds.inflate(- margin);
		            });
		        link.each(function (d) {
		                cola.vpsc.makeEdgeBetween(d, d.source.innerBounds, d.target.innerBounds, 0);
		            });

		        link.attr("x1", function (d) { return d.sourceIntersection.x; })
		            .attr("y1", function (d) { return d.sourceIntersection.y; })
		            .attr("x2", function (d) { return d.arrowStart.x; })
		            .attr("y2", function (d) { return d.arrowStart.y; });

		        linktooltip.each(function (d) {
		                cola.vpsc.makeEdgeBetween(d, d.source.innerBounds, d.target.innerBounds, 0);
		            });

		        linktooltip.attr("x1", function (d) { return d.sourceIntersection.x; })
		            .attr("y1", function (d) { return d.sourceIntersection.y; })
		            .attr("x2", function (d) { return d.arrowStart.x; })
		            .attr("y2", function (d) { return d.arrowStart.y; });

		        label.each(function (d) {
		            var b = this.getBBox();
		            d.width = b.width + 2 * pad;
		            d.height = b.height + 2 * pad;
		        });

				group.each(function (d) {
		            d.padding=25;
		        });

		        node.attr("x", function (d) { return d.innerBounds.x; })
		            .attr("y", function (d) { return d.innerBounds.y; })
		            .attr("width", function (d) { return d.innerBounds.width(); })
		            .attr("height", function (d) { return d.innerBounds.height(); });

		        group.attr("x", function (d) { return d.bounds.x+margin; })
		             .attr("y", function (d) { return d.bounds.y+margin; })
		            .attr("width", function (d) { return d.bounds.width()-pad;})
		            .attr("height", function (d) { return d.bounds.height()-pad;});

		        grouplabelrect.attr("x", function (d) { return d.bounds.x+margin; })
		             .attr("y", function (d) { return d.bounds.y+margin; })
		            .attr("width", function (d) { return d.bounds.width()-(2*margin);})
		            .attr("height", 50);

		        label.attr("transform", function (d) {
		            return "translate(" + (d.x - pad/2) + "," + (d.y + pad/1.5 - d.height/2) + ")";
		        });

		        grouplabel.attr("transform", function (d) {
		            return "translate(" + (d.bounds.x+pad) + "," + (d.bounds.y+(margin*4)) + ")";
		        });

		        grouplabelcliprect.attr("x",function (d) {return d.bounds.x+margin;})
		        				.attr("y",function (d) {return d.bounds.y;})
		        				.attr("width",function (d) { return d.bounds.width()-(2*margin);})
		        				.attr("height", 25);
			});

			// De force layout zet alles automatisch op zijn plek

			// Deze manier van aanroepen zorgt voor een oneindige lus bij kleine modellen (van bijv. 1 of 2 IE\'s), vandaar deze if-constructie.
			if(graph.nodes.length>10)
				force.start(80,160,100000);
			else
				force.start();

		    var group = svg.selectAll(".group")
		        .data(graph.groups)
		       .enter().append("rect")
		        .attr("rx", 10).attr("ry", 10)
		        .attr("class", "group")
		         .attr(\'width\',' . ($nodewidth + 20) . ')
			    .attr(\'height\',' . ($nodeheight + 20) . ');

		    var link = svg.selectAll(".link")
		        .data(graph.links)
		       .enter().append("line")
		        .attr("class", "link")
		        .attr("marker-end", "url(#standaard)");

		    var linktooltip = svg.selectAll(".linktooltip")
		        .data(graph.links)
		       .enter().append("line")
		        .attr("class","linktooltip")
		        .attr("title", function (d) { var title=d.type; if(d.extraInfo!=null){title=title+d.extraInfo}if(d.note!=null){title=title+"\\n"+d.note}return title;});

		    var node = svg.selectAll(".node")
		         .data(graph.nodes)
		       .enter().append("rect")
		         .attr("class", function (d) {return "node node"+d.type})
		           .attr("rx", function (d) { if (d.type=="Condition" || d.type=="Goal" || d.type=="Belief") {return 40;}else{return 10;} })
		           .attr("ry", 10)
		           .attr(\'width\',' . $nodewidth . ')
			       .attr(\'height\',' . $nodeheight . ')
		         .call(force.drag);

			// Titels
		    var label = svg.selectAll(".label")
		        .data(graph.nodes)
		        .enter().append("text")
		         .attr("class", function (d) {return "label label"+d.type})
		         .text(function (d) { return d.name; })
		         .attr("title", function (d) { return d.heading;})
		         .on(\'dblclick\', function (d) { openInNewTab(\'' . $domeinprefix . '\'+d.name+\' VN\');})
			     .call(force.drag);

			// Groeptitels
		    var grouplabel = svg.selectAll(".grouplabel")
		        .data(graph.groups)
		        .enter().append("g")
		        .attr("class", function (d) {return "grouplabel";})
		        .attr("style",function (d,i){return "clip-path: url(#clip"+i+");"})
		        .call(force.drag)
		        .append("text")
		         .attr("class", function (d) {return "grouplabeltext";})
		         .text(function (d) { return d.bijschrift; })
				 .attr("title", function (d) {return d.langbijschrift;});

		    var grouplabelrect = svg.selectAll(\'grouplabelrect\')
		    	.data(graph.groups)
		    	.enter().append("rect")
		         .attr("class", function (d) {return "grouplabelrect";})
		         .attr("style",function (d,i){return "clip-path: url(#clip"+i+");"})
		         .attr("rx", 10).attr("ry", 10)
				 .attr("title", function (d) {return d.langbijschrift;})
		         .call(force.drag);

			var grouplabelclip = svg.selectAll(\'.grouplabelclip\')
				.data(graph.groups)
				.enter().append("clipPath")
				 .attr("class", "grouplabelclip")
				 .attr("id",function (d,i) {return "clip"+i})
				 .attr("title", function (d) {return d.langbijschrift;})
				 .call(force.drag);

			var grouplabelcliprect = grouplabelclip.append("rect")
				 .attr("class","grouplabelcliprect")
				 .attr("title", function (d) {return d.langbijschrift;})
		         .attr("rx", 10).attr("ry", 10);

		    node.append("title")
		        .text(function (d) { return d.heading; });

		    var insertLinebreaks = function (d) {
		        var el = d3.select(this);
		        var words = d.name.split(\' \');
		        el.text(\'\');

				var rows=[\'\'];
				var row_number = 0;
		        for (var i = 0; i < words.length; i++) {
		        	if (rows[row_number].length>20)
		        	{
		        		rows.push(\'\');
		        		row_number++;
		        	}
		        	rows[row_number]=rows[row_number]+\' \'+words[i];
				}

				for (var i = 0; i < rows.length; i++) {
		            var tspan = el.append(\'tspan\').text(rows[i]);
		            tspan.attr(\'x\', margin).attr(\'dy\', 15)
		                 .attr("font-size", "12")
		                 .attr("style","fill:inherit;");
		        }
		    };
			label.each(insertLinebreaks);
		}
		</script>';
    }