function loadExperimentFromJson($fileName)
{
if (isset($fileName)) {
$JsonPath = "experiments/" . $fileName;
$pagesJson = file_get_contents($JsonPath);
$pagesArray = json_decode($pagesJson, true);
echo "<h2>Edit Experiment '" . $fileName . "' </h2>\n <ul class='nav nav-tabs' id='tabAdd'>";
foreach ($pagesArray as $pageNum => $jsonString) {
if ($pageNum == 'slideInterval') {
} elseif ($pageNum == 1) {
echo "<li class='active' ><a data-toggle='tab' href='#page" . $pageNum . "'>Page " . $pageNum . " <button class='close' type='button' title='Remove this page'><span class='glyphicon glyphicon-trash'></span></button></a></li>";
} else {
//echo "<li><a data-toggle='tab' href='#page" . $pageNum . "'>Page " . $pageNum . " <button class='close' type='button' title='Remove this page'><span class='glyphicon glyphicon-trash'></span></button></a></li>";
addTab($pageNum);
}
}
echo " </ul><div class='tab-content' id='pages'>";
foreach ($pagesArray as $pageNum => $jsonString) {
if ($pageNum == 'slideInterval') {
} else {
addNewEditSlide($pageNum, $jsonString);
}
}
echo "</div><script>\n \$(document).ready(function(){\n var editCanvasNum = document.getElementsByTagName('canvas').length;\n canvasNum = (editCanvasNum/2);\n pageNum = (editCanvasNum/2);\n });\n </script>";
} else {
echo "<h2>Create New Experiment </h2><ul class='nav nav-tabs' id='tabAdd'>";
echo "<li class='active' ><a data-toggle='tab' href='#page1'>Page 1 <button class='close' type='button' title='Remove this page'><span class='glyphicon glyphicon-trash'></span></button></a></li>";
echo " </ul><div class='tab-content' id='pages'>";
addNewEditSlide(1, null);
echo "</div><script>\n \$(document).ready(function(){\n var editCanvasNum = document.getElementsByTagName('canvas').length;\n canvasNum = (editCanvasNum/2);\n pageNum = (editCanvasNum/2);\n });\n </script>";
}
}
<?php
if (isset($_POST['pageNum'])) {
echo addNewEditSlide($_POST['pageNum'], null);
}
?>
<?php
function addNewEditSlide($pageNum, $canvasJsonString)
{
if (!isset($canvasJsonString)) {
$canvasJsonString = '{"objects":[],"background":""}';
}
if ($pageNum == 1) {
echo "<div id='page" . $pageNum . "' class='tab-pane fade in active'>";
} else {
echo "<div id='page" . $pageNum . "' class='tab-pane fade'>";
}
echo "<div class='form-group' hidden>\n <label for='imgLoader" . $pageNum . "'>Add an Image</label>\n <input class='btn btn-default' id='imgLoader" . $pageNum . "' type='file' >\n </div>\n <canvas id='canvasPage" . $pageNum . "' width='1100' height='600'></canvas>\n </div>\n <script>\n canvas" . $pageNum . " = new fabric.Canvas('canvasPage" . $pageNum . "');\n\t\t\tvar JsonStr =" . $canvasJsonString . ";\n\t\t\tcanvas" . $pageNum . ".loadFromJSON(JsonStr);\t\t\n canvas" . $pageNum . ".setBackgroundColor('#ffffff', canvas" . $pageNum . ".renderAll.bind(canvas" . $pageNum . "));\n document.getElementById('imgLoader" . $pageNum . "').onchange = function handleImage(e) {\n var reader = new FileReader();\n reader.onload = function (event) { \n var imgObj = new Image();\n imgObj.src = event.target.result;\n imgObj.onload = function () {\n \n var image = new fabric.Image(imgObj);\n image.set({\n left: 250,\n top: 250,\n angle: 0,\n padding: 10,\n cornersize: 10\n });\n \n canvas" . $pageNum . ".add(image);\n canvas" . $pageNum . ".calcOffset();\n\n\n \n }\n \n }\n reader.readAsDataURL(e.target.files[0]);\n\n\n\n\n}\ncanvas" . $pageNum . ".onmouseover = function () {\n console.log('hovered');\n canvas" . $pageNum . ".calcOffset();\n\n };\n </script>";
}