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>';
}
}
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&type=ie"><table>';
foreach ($verbandenlijst as $verband) {
$this->inhoud .= '<tr><td><input type="radio" name="verwijder-verband" value="' . $verband['van'] . '|' . $verband['type'] . '|' . $verband['naar'] . '"/> </td><td>' . $verband['van'] . ' </td><td>' . $verband['type'] . ' </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&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&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 . '"> </td><td>' . Uri::SMWuriNaarLeesbareTitel($context) . ' </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&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&type=ie&ie=' . $ie . '&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>';
}
}
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>';
}