From f66f0912ec522d7148ed61798dae42eb6f912d78 Mon Sep 17 00:00:00 2001 From: ozFri Date: Sat, 12 Sep 2020 20:40:50 +0300 Subject: [PATCH 01/16] moved code into body of page to comply with standards --- html/dpt3d.html | 349 ++++++++++++++++++++++-------------------------- 1 file changed, 157 insertions(+), 192 deletions(-) diff --git a/html/dpt3d.html b/html/dpt3d.html index ba8b2bd2..944145ed 100644 --- a/html/dpt3d.html +++ b/html/dpt3d.html @@ -171,198 +171,163 @@
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - -
- -
- -
- -
-
-

How to use DPT

-

Choose a topic

-

- Write your opinion -
- start opinion -

-

Click an opinion
to request a dialog

-
-
- -
- -
- - -
    -
  • -
  • -
  • -
  • -
- - -
-
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From f1b6f6a7297829859f1b31b97bdb5bd5c6ef3f58 Mon Sep 17 00:00:00 2001 From: ozFri Date: Sat, 12 Sep 2020 22:32:12 +0300 Subject: [PATCH 02/16] added driver.js style --- html/dpt3d.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/html/dpt3d.html b/html/dpt3d.html index 944145ed..fac23425 100644 --- a/html/dpt3d.html +++ b/html/dpt3d.html @@ -49,6 +49,11 @@ + From 40ca47fcfed6c2c133870e0106e334e6bfca7e92 Mon Sep 17 00:00:00 2001 From: ozFri Date: Sun, 13 Sep 2020 01:54:48 +0300 Subject: [PATCH 03/16] Removed unused code --- html/babylon-main.js | 45 ------------------------ html/babylon-misc.js | 78 ------------------------------------------ html/babylon-topics.js | 24 ++----------- 3 files changed, 2 insertions(+), 145 deletions(-) diff --git a/html/babylon-main.js b/html/babylon-main.js index b5f0d313..840aac76 100644 --- a/html/babylon-main.js +++ b/html/babylon-main.js @@ -75,7 +75,6 @@ function getCollisionBox() { var mat = new BABYLON.StandardMaterial("mat", currentScene); mat.diffuseColor = new BABYLON.Color3(10 / 255, 80 / 255, 119 / 255); mat.specularColor = new BABYLON.Color3(10 / 255, 80 / 255, 119 / 255); - //mat.Color = new BABYLON.Color3(10 / 255, 80 / 255, 119 / 255); mat.emissiveColor = new BABYLON.Color3(10 / 255, 80 / 255, 119 / 255); mat.alpha = 0.45; @@ -328,55 +327,11 @@ var createGenericScene = function(dptMode) { powerSave = false; switch (kbInfo.type) { case BABYLON.KeyboardEventTypes.KEYDOWN: - /* - console.log("KEY DOWN: ", kbInfo.event.key); - var speed = camera._computeLocalCameraSpeed() * 20; - if(kbInfo.event.key == 'PageUp') { - camera._localDirection.copyFromFloats(0, 0, speed); - camera.position.z += speed; - console.log('fuck: '+speed); - } - */ break; case BABYLON.KeyboardEventTypes.KEYUP: - //console.log("KEY UP: ", kbInfo.event.keyCode); - /* - switch(kbInfo.event.code) { - case "KeyF": - requestSearch(); - break; - case "KeyH": - switchToTopics(); - break; - case "KeyL": - toggleDialogList(); - break; - case "KeyO": - if(currentScene.name == "opinionScene") { - jQuery('#form').remove(); - dpt.opinionPostAllowed(currentTopic); - } - break; - case "KeyT": - if(currentScene.name == "topicScene") { - jQuery('#form').remove(); - topicForm(); - } - break; - } - */ } }); - - //var gl = new BABYLON.GlowLayer("glow", currentScene); - - //currentScene.autoClear = false; // Color buffer - //currentScene.autoClearDepthAndStencil = false; // Depth and stencil, obviously - //currentScene.getAnimationRatio(); - //currentScene.clearCachedVertexData(); - //currentScene.cleanCachedTextureBuffer(); - return currentScene; } diff --git a/html/babylon-misc.js b/html/babylon-misc.js index 16a10f50..1e0cc0a2 100644 --- a/html/babylon-misc.js +++ b/html/babylon-misc.js @@ -21,67 +21,6 @@ function circleText(ctx, text, x, y, radius, angle) { ctx.restore(); } -function circleTextPlane(x, y, z, name, text) { - //Set width an height for plane - var planeWidth = 12; - var planeHeight = 12; //10; - - //Create plane - var plane = BABYLON.MeshBuilder.CreatePlane( - name, { - width: planeWidth, - height: planeHeight - }, currentScene); - plane.dpt = JSON.parse('{"context": "topicCircle"}'); - - //Set width and height for dynamic texture using same multiplier - var DTWidth = planeWidth * 100; //64; - var DTHeight = planeHeight * 100; //64 - - var dynamicTexture = new BABYLON.DynamicTexture( - "DynamicTexture", - { - width: DTWidth, - height: DTHeight - }, currentScene); - - //Check width of text for given font type at any size of font - var ctx = dynamicTexture.getContext(); - - dynamicTexture.hasAlpha = true; - ctx.fillStyle = 'transparent'; - - textureContext = dynamicTexture.getContext(); - textureContext.font = "28px DPTFont"; - textureContext.save(); - textureContext.fillStyle = "#00ccff"; - - circleText(textureContext, text, 600, 600, 550, -Math.PI / 3) - // textureContext.scale(3, 3); - textureContext.restore(); - - dynamicTexture.update(); - - //create material - var mat = new BABYLON.StandardMaterial("mat", currentScene); - mat.diffuseTexture = dynamicTexture; - mat.emissiveColor = new BABYLON.Color3(1, 1, 1); - - //apply material - plane.material = mat; - //mat.freeze(); - - // set the position - plane.position.x = x + 2; - plane.position.y = y; - plane.position.z = z; - - plane.scaling.x *= 1.5; - plane.scaling.y *= 1.5; - //plane.doNotSyncBoundingInfo = true - //plane.freezeWorldMatrix(); - return (plane); -} function circlePoints(points, radius, center) { var slice = 2 * Math.PI / points; @@ -95,23 +34,6 @@ function circlePoints(points, radius, center) { var newX = center.X + radius * Math.cos(angle); var newY = center.Y + radius * Math.sin(angle); nodes.push({ x: newX, y: newY }); - /* - var box = new BABYLON.MeshBuilder.CreateBox("box", { - width: 0.1, - height: 0.1, - depth: 0.1, - sideOrientation: 1 - }, currentScene); - box.position = new BABYLON.Vector3(newX, newY, -1); - //create material - var mat = new BABYLON.StandardMaterial("mat", currentScene); - mat.diffuseColor = new BABYLON.Color3(1,.5,0); - mat.emissiveColor = new BABYLON.Color3(1,.5,0); - - //apply material - box.material = mat; - mat.freeze(); - */ } return (nodes); } diff --git a/html/babylon-topics.js b/html/babylon-topics.js index ddbcd687..a7587820 100644 --- a/html/babylon-topics.js +++ b/html/babylon-topics.js @@ -17,28 +17,8 @@ function loadTopics(restObj) { x = xstart; y = ystart; for(var i in restObj.data) { -/* - if(i % cols == 0) { - x = xstart; - y -= 3.2; - } else { - x += 4.8; - } - var l = len - 1 - i; - var plane = textBlock( - x, y, -2, - JSON.stringify({ - "name": "texttexture", - "context": "topicScene", - "topicId": restObj.data[l]._id, - "content": restObj.data[l].content, - "topic": restObj.data[l].content, - "canEdit": (restObj.data[l].user == 'mine') ? true : false, - }), - `${restObj.data[l].content} [${restObj.data[l].opinions.length}]`, - ); -*/ - var plane = textBlock( + + textBlock( restObj.data[i].position.x, restObj.data[i].position.y, restObj.data[i].position.z, From 0c51766e74a4cc4343bbebfa1b07ca2ae72d2d13 Mon Sep 17 00:00:00 2001 From: ozFri Date: Sun, 13 Sep 2020 02:08:37 +0300 Subject: [PATCH 04/16] add hover effect to Babylon.js text items, tested calling driver.js on hover --- html/babylon-misc.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/html/babylon-misc.js b/html/babylon-misc.js index 1e0cc0a2..d60ce062 100644 --- a/html/babylon-misc.js +++ b/html/babylon-misc.js @@ -188,6 +188,26 @@ function textBlock(x, y, z, name, text, options) { }, currentScene); plane.dpt = dpt; + //plane actionManager to handle hover effect + plane.actionManager = new BABYLON.ActionManager(currentScene); + + // bold ON MOUSE ENTER + plane.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, + function(ev) { + // var driver = new Driver() + // driver.highlight(".btn-bar-icon") + var meshLocal = ev.meshUnderPointer; + canvas.style.cursor = "move"; + }, false)); + + // normal ON MOUSE EXIT + plane.actionManager.registerAction( + new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, + function(ev) { + var meshLocal = ev.meshUnderPointer; + canvas.style.cursor = "default"; + }, false)); // var pngBase64 = textureContext.canvas.toDataURL("image/png", 0.99); plane.bjs = { From 3890ecdc704e19f74bda9b15eab1564ffaad7470 Mon Sep 17 00:00:00 2001 From: ozFri Date: Sun, 20 Sep 2020 15:20:27 +0300 Subject: [PATCH 05/16] Added Shepherd.js and DOM anchors for babylon.js Square div elements are added on top of text boxes and tubes. These follow the babylon elements spatial movement, and can be used by Shepherd.js to highlight babylon items. --- html/babylon-main.js | 2 +- html/babylon-opinions.js | 91 +++++++++-- html/babylon-topics.js | 50 ++++++- html/dpt3d.js | 316 ++++++++++++++++++++++----------------- 4 files changed, 305 insertions(+), 154 deletions(-) diff --git a/html/babylon-main.js b/html/babylon-main.js index 840aac76..582c5f13 100644 --- a/html/babylon-main.js +++ b/html/babylon-main.js @@ -88,7 +88,7 @@ function getCollisionBox() { return(box); } -function getCamera(rotate) { +function getCamera() { var camera = new BABYLON.ArcRotateCamera( "Camera", diff --git a/html/babylon-opinions.js b/html/babylon-opinions.js index 4056d15a..76b767c6 100644 --- a/html/babylon-opinions.js +++ b/html/babylon-opinions.js @@ -227,13 +227,14 @@ function createBiColorTube(initiatorOpinion, recipientOpinion, opinionDialogConn if(0) { makePlanesDragable(initiatorOpinion.opinionId, recipientOpinion.opinionId, tube); } + return tube; } - function dialogRelations(opinionDialogConnections) { var initiatorOpinion = {}; var i; var recipientOpinion = {}; + tubes = []; for(var h in opinionDialogConnections) { var odc = opinionDialogConnections[h]; for(i in odc) { @@ -320,13 +321,25 @@ function dialogRelations(opinionDialogConnections) { if('position' in initiatorOpinion && 'position' in recipientOpinion) { - createBiColorTube(initiatorOpinion, recipientOpinion, odc[i]); + var tube = createBiColorTube(initiatorOpinion, recipientOpinion, odc[i]); } + + var htmlDiv = document.createElement("div"); + htmlDiv.className = "textBox"; + document.querySelector("#renderCanvas").insertAdjacentElement("afterend", htmlDiv); + var defStyle = `background: #f0f0; + pointer-events:none; + width:50px; height:50px; + z-index: 1; position: absolute; + transform: translate(-50%, -50%);`; + htmlDiv.style = defStyle; + + tubes.push(tube); + divs.push(htmlDiv); } } } - function loadOpinions(restObj) { var canInvite = false; @@ -336,6 +349,7 @@ function loadOpinions(restObj) { console.log("dispose: "+currentScene.meshes[i].dpt.context); currentScene.meshes[i].dispose(); } + document.querySelectorAll(".textBox").forEach(function(e){e.remove()}); } } else { return; @@ -352,7 +366,9 @@ function loadOpinions(restObj) { } } - //var nodes = circlePoints(restObj.data.length, 5, { X: 4, Y: 0 }); + planes = []; + divs = []; + for(var i = 0; i < restObj.data.length; i++) { // check, if the opinion owner already lead a discussion with the other opinion @@ -390,16 +406,65 @@ function loadOpinions(restObj) { `${restObj.data[i].content}` ); - /* - var minion0 = BABYLON.MeshBuilder.CreateSphere("minion0", {diameter: 0.5}, currentScene); - minion0.position = new BABYLON.Vector3(1,1,1); - plane.onUpdateTextPos.add(function(value) { - minion0.position.x = value.x; - minion0.position.y = value.y; - }) - */ + camera = currentScene.cameras[0]; + var htmlDiv = document.createElement("div"); + htmlDiv.className = "textBox"; + document.querySelector("#renderCanvas").insertAdjacentElement("afterend", htmlDiv); + var needsUpdate = true; + var defStyle = `background: #f0f0; + pointer-events:none; + width:50px; height:50px; + z-index: 1; position: absolute; + transform: translate(-50%, -50%);`; + htmlDiv.style = defStyle; + + planes.push(plane); + divs.push(htmlDiv); } + camera.onProjectionMatrixChangedObservable.add(() => { + needsUpdate = true; + }); + + camera.onViewMatrixChangedObservable.add(() => { + needsUpdate = true; + }); + currentScene.registerAfterRender(() => { + if (needsUpdate) { + planes.forEach(function (plane, i){ + + // update text node position + const pos = BABYLON.Vector3.Project( + plane.getAbsolutePosition(), + BABYLON.Matrix.IdentityReadOnly, + currentScene.getTransformMatrix(), + camera.viewport.toGlobal( + engine.getRenderWidth(), + engine.getRenderHeight(), + ), + ); + divs[i].style = `${defStyle} left: ${pos.x}px; top: ${pos.y}px;`; + + } + ); + + tubes.forEach(function (tube, i){ + + // update text node position + const pos = BABYLON.Vector3.Project( + tube.getBoundingInfo().boundingSphere.center, + BABYLON.Matrix.IdentityReadOnly, + currentScene.getTransformMatrix(), + camera.viewport.toGlobal( + engine.getRenderWidth(), + engine.getRenderHeight(), + ), + ); + divs[planes.length + i].style = `${defStyle} left: ${pos.x}px; top: ${pos.y}px;`; + + needsUpdate = false; + }) + }}); // paint the topic var plane = textBlock( @@ -423,4 +488,4 @@ function calculateDialogColor(opinionDialogConnection) { return 'green-green'; } return 'blue-blue'; -} \ No newline at end of file +} diff --git a/html/babylon-topics.js b/html/babylon-topics.js index a7587820..8d1102f8 100644 --- a/html/babylon-topics.js +++ b/html/babylon-topics.js @@ -12,13 +12,18 @@ function loadTopics(restObj) { && currentScene.meshes[i].dpt.context == 'topicScene') { currentScene.meshes[i].dispose(); } + document.querySelectorAll(".textBox").forEach(function(e){e.remove()}); } } x = xstart; y = ystart; + + var planes = []; + var divs = []; + for(var i in restObj.data) { - textBlock( + var plane = textBlock( restObj.data[i].position.x, restObj.data[i].position.y, restObj.data[i].position.z, @@ -32,7 +37,48 @@ function loadTopics(restObj) { }), `${restObj.data[i].content} [${restObj.data[i].opinions.length}]`, ); + camera = currentScene.cameras[0]; + var htmlDiv = document.createElement("div"); + htmlDiv.className = "textBox"; + document.querySelector("#renderCanvas").insertAdjacentElement("afterend", htmlDiv); + var needsUpdate = true; + var defStyle = `background: #f0f0; + pointer-events:none; + width:50px; height:50px; + z-index: 1; position: absolute; + transform: translate(-50%, -50%);`; + htmlDiv.style = defStyle; + + planes.push(plane); + divs.push(htmlDiv); } + camera.onProjectionMatrixChangedObservable.add(() => { + needsUpdate = true; + }); + + camera.onViewMatrixChangedObservable.add(() => { + needsUpdate = true; + }); + currentScene.registerAfterRender(() => { + if (needsUpdate) { + planes.forEach(function (plane, i){ + + // update text node position + const pos = BABYLON.Vector3.Project( + plane.getAbsolutePosition(), + BABYLON.Matrix.IdentityReadOnly, + currentScene.getTransformMatrix(), + camera.viewport.toGlobal( + engine.getRenderWidth(), + engine.getRenderHeight(), + ), + ); + divs[i].style = `${defStyle} left: ${pos.x}px; top: ${pos.y}px;`; + + needsUpdate = false; + } + )} + }); } function searchResultTopics(restObj) { @@ -44,7 +90,7 @@ function searchResultTopics(restObj) { if(currentScene.name == 'topicScene') { for(var i = currentScene.meshes.length - 1; i >= 0; i--) { if('dpt' in currentScene.meshes[i] - && currentScene.meshes[i].dpt.context == 'topicScene') { + && currentScene.meshes[i].dpt.context == 'topicScene') { currentScene.meshes[i].dispose(); } } diff --git a/html/dpt3d.js b/html/dpt3d.js index 2fa7e641..88008a8b 100644 --- a/html/dpt3d.js +++ b/html/dpt3d.js @@ -43,156 +43,156 @@ var DPTGlobal = { }; // Script Guided Tour -function startGuidedTour() { - - jQuery('#animCircle').css('visibility', 'visible'); - - console.log(isMobile); - - const guidePosition = [{ - // welcome to tour - top: "auto", - left: "0px", - bottom: "0px", - right: "auto", - topMark: document.getElementById('guideNextBtn').getBoundingClientRect().top + "px", - leftMark: document.getElementById('guideNextBtn').getBoundingClientRect().left + "px", - buttonLeftName: "CLOSE TOUR", - buttonRightName: "START TOUR" - }, { - // Choose a topic - top: "auto", - left: "0px", - bottom: "0px", - right: "auto", - topMark: document.getElementById('new-topic-btn').getBoundingClientRect().top + "px", - leftMark: document.getElementById('new-topic-btn').getBoundingClientRect().left + "px", - buttonLeftName: "BACK", - buttonRightName: "NEXT" - }, { - // start opinion - top: "auto", - left: "0px", - bottom: "0px", - right: "auto", - buttonLeftName: "BACK", - buttonRightName: "NEXT" - }, { - // Click an opinion to request a dialog - top: "auto", - left: "0px", - bottom: "0px", - right: "auto", - topMark: "55%", - leftMark: "50%", - topMark: "40%", - leftMark: "50%", - buttonLeftName: "BACK", - buttonRightName: "FINISH" - } - ]; +// function startGuidedTour() { + +// jQuery('#animCircle').css('visibility', 'visible'); + +// console.log(isMobile); + +// const guidePosition = [{ +// // welcome to tour +// top: "auto", +// left: "0px", +// bottom: "0px", +// right: "auto", +// topMark: document.getElementById('guideNextBtn').getBoundingClientRect().top + "px", +// leftMark: document.getElementById('guideNextBtn').getBoundingClientRect().left + "px", +// buttonLeftName: "CLOSE TOUR", +// buttonRightName: "START TOUR" +// }, { +// // Choose a topic +// top: "auto", +// left: "0px", +// bottom: "0px", +// right: "auto", +// topMark: document.getElementById('new-topic-btn').getBoundingClientRect().top + "px", +// leftMark: document.getElementById('new-topic-btn').getBoundingClientRect().left + "px", +// buttonLeftName: "BACK", +// buttonRightName: "NEXT" +// }, { +// // start opinion +// top: "auto", +// left: "0px", +// bottom: "0px", +// right: "auto", +// buttonLeftName: "BACK", +// buttonRightName: "NEXT" +// }, { +// // Click an opinion to request a dialog +// top: "auto", +// left: "0px", +// bottom: "0px", +// right: "auto", +// topMark: "55%", +// leftMark: "50%", +// topMark: "40%", +// leftMark: "50%", +// buttonLeftName: "BACK", +// buttonRightName: "FINISH" +// } +// ]; - const bodyTextEle = document.getElementById('guideBodyText'); - const contentEle = document.getElementById('guideContent'); - const contentEle2 = document.getElementById('animCircle'); - const stepLiEle = document.getElementsByClassName('dot'); - const buttonLeft = document.getElementById('guidePrevBtn'); - const buttonRight = document.getElementById('guideNextBtn'); - const guideTitle = document.getElementById('guideTitle'); +// const bodyTextEle = document.getElementById('guideBodyText'); +// const contentEle = document.getElementById('guideContent'); +// const contentEle2 = document.getElementById('animCircle'); +// const stepLiEle = document.getElementsByClassName('dot'); +// const buttonLeft = document.getElementById('guidePrevBtn'); +// const buttonRight = document.getElementById('guideNextBtn'); +// const guideTitle = document.getElementById('guideTitle'); - let currentStepIndex = -1; - const stepLength = guidePosition.length; - changeStep(); - document.getElementById("guideNextBtn").addEventListener('click', () => { - changeStep('next'); - - }, false); - document.getElementById("guidePrevBtn").addEventListener('click', () => { - changeStep('prev'); - }, false); - document.getElementById('closeBtn').addEventListener('click', () => { - // schliessen aktion - jQuery("#tutorialBorder").css("display","none"); - document.getElementById("guideContent").remove(); - document.getElementById("animCircle").remove(); - }, false); +// let currentStepIndex = -1; +// const stepLength = guidePosition.length; +// changeStep(); +// document.getElementById("guideNextBtn").addEventListener('click', () => { +// changeStep('next'); + +// }, false); +// document.getElementById("guidePrevBtn").addEventListener('click', () => { +// changeStep('prev'); +// }, false); +// document.getElementById('closeBtn').addEventListener('click', () => { +// // schliessen aktion +// jQuery("#tutorialBorder").css("display","none"); +// document.getElementById("guideContent").remove(); +// document.getElementById("animCircle").remove(); +// }, false); - jQuery("#disableGuidedTour").change(function() { - if(this.checked) { - whoami.user.preferences.guidedTour = false; - dpt.userUpdate(whoami.dptUUID, { preferences: { "guidedTour": false}}); - } else { - whoami.user.preferences.guidedTour = true; - dpt.userUpdate(whoami.dptUUID, { preferences: { "guidedTour": true}}); - } - }); - - function changeStep(direction) { - - if ((direction === 'prev' && currentStepIndex === 0) || (direction === 'next' && currentStepIndex === stepLength - 1)) { - document.getElementById("guideContent").remove(); - } else { - let eraseDotIndex; - if (direction === 'prev') { - currentStepIndex = currentStepIndex - 1; - eraseDotIndex = currentStepIndex === stepLength - 1 ? 0 : currentStepIndex + 1; - stepLiEle[eraseDotIndex].classList.remove('active'); // remove dot active - - } else { - currentStepIndex = currentStepIndex + 1; - eraseDotIndex = currentStepIndex === 0 ? stepLength - 1 : currentStepIndex - 1; - } - bodyTextEle.style.marginLeft = `${-340 * currentStepIndex}px`; // margin-left - // bodyTextEle.style.left = `${-360*currentStepIndex}px`; // relative+left - //stepLiEle[eraseDotIndex].setAttribute('data-step', ''); // erase number - //stepLiEle[currentStepIndex].setAttribute('data-step', currentStepIndex + 1); // add number - //stepLiEle[eraseDotIndex].classList.remove('active'); // remove dot active - stepLiEle[currentStepIndex].classList.add('active'); // add dot active - - contentEle.style.top = guidePosition[currentStepIndex].top; - contentEle.style.left = guidePosition[currentStepIndex].left; - contentEle.style.bottom = guidePosition[currentStepIndex].bottom; - contentEle.style.right = guidePosition[currentStepIndex].right; - - contentEle2.style.top = "-220px"; //make arrow outside - contentEle2.style.left = guidePosition[currentStepIndex].leftMark; - buttonLeft.innerText = guidePosition[currentStepIndex].buttonLeftName; - buttonRight.innerText = guidePosition[currentStepIndex].buttonRightName; +// jQuery("#disableGuidedTour").change(function() { +// if(this.checked) { +// whoami.user.preferences.guidedTour = false; +// dpt.userUpdate(whoami.dptUUID, { preferences: { "guidedTour": false}}); +// } else { +// whoami.user.preferences.guidedTour = true; +// dpt.userUpdate(whoami.dptUUID, { preferences: { "guidedTour": true}}); +// } +// }); + +// function changeStep(direction) { + +// if ((direction === 'prev' && currentStepIndex === 0) || (direction === 'next' && currentStepIndex === stepLength - 1)) { +// document.getElementById("guideContent").remove(); +// } else { +// let eraseDotIndex; +// if (direction === 'prev') { +// currentStepIndex = currentStepIndex - 1; +// eraseDotIndex = currentStepIndex === stepLength - 1 ? 0 : currentStepIndex + 1; +// stepLiEle[eraseDotIndex].classList.remove('active'); // remove dot active + +// } else { +// currentStepIndex = currentStepIndex + 1; +// eraseDotIndex = currentStepIndex === 0 ? stepLength - 1 : currentStepIndex - 1; +// } +// bodyTextEle.style.marginLeft = `${-340 * currentStepIndex}px`; // margin-left +// // bodyTextEle.style.left = `${-360*currentStepIndex}px`; // relative+left +// //stepLiEle[eraseDotIndex].setAttribute('data-step', ''); // erase number +// //stepLiEle[currentStepIndex].setAttribute('data-step', currentStepIndex + 1); // add number +// //stepLiEle[eraseDotIndex].classList.remove('active'); // remove dot active +// stepLiEle[currentStepIndex].classList.add('active'); // add dot active + +// contentEle.style.top = guidePosition[currentStepIndex].top; +// contentEle.style.left = guidePosition[currentStepIndex].left; +// contentEle.style.bottom = guidePosition[currentStepIndex].bottom; +// contentEle.style.right = guidePosition[currentStepIndex].right; + +// contentEle2.style.top = "-220px"; //make arrow outside +// contentEle2.style.left = guidePosition[currentStepIndex].leftMark; +// buttonLeft.innerText = guidePosition[currentStepIndex].buttonLeftName; +// buttonRight.innerText = guidePosition[currentStepIndex].buttonRightName; - if (currentStepIndex < 1) { - jQuery("#text").css("display","block"); - jQuery(".closeButtonTutorial").css("display","none"); - jQuery(".closeButtonTutorial2").css("display","block"); +// if (currentStepIndex < 1) { +// jQuery("#text").css("display","block"); +// jQuery(".closeButtonTutorial").css("display","none"); +// jQuery(".closeButtonTutorial2").css("display","block"); - } else { - jQuery("#text").css("display","none"); - jQuery(".closeButtonTutorial").css("display","block"); - jQuery(".closeButtonTutorial2").css("display","none"); +// } else { +// jQuery("#text").css("display","none"); +// jQuery(".closeButtonTutorial").css("display","block"); +// jQuery(".closeButtonTutorial2").css("display","none"); - } +// } - if (currentStepIndex == 0) { - jQuery("#steps").css("visibility","hidden"); - } else { - jQuery("#steps").css("visibility","visible"); - } +// if (currentStepIndex == 0) { +// jQuery("#steps").css("visibility","hidden"); +// } else { +// jQuery("#steps").css("visibility","visible"); +// } - /* - if (currentStepIndex == 3) { - jQuery("#tutorialBorder").css("display","block"); - } else { - jQuery("#tutorialBorder").css("display","none"); - } - */ - } - } +// /* +// if (currentStepIndex == 3) { +// jQuery("#tutorialBorder").css("display","block"); +// } else { +// jQuery("#tutorialBorder").css("display","none"); +// } +// */ +// } +// } -} // End Script Guided Tour +// } // End Script Guided Tour // from https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f @@ -448,7 +448,7 @@ function main() { dpt.getDialogList(); if(whoami.user.preferences.guidedTour) { - startGuidedTour(); + //startGuidedTour(); } else { jQuery('.tutorialBorder').remove(); jQuery('.animated-circle').remove(); @@ -510,10 +510,50 @@ function main() { // get 3D. startBabylonEngine(); + } + +const tour = new Shepherd.Tour({ + defaultStepOptions: { + classes: 'shadow-md bg-purple-dark', + scrollTo: true + }} +); +tour.addStep({ + id: 'example-step', + text: 'This step is attached to the bottom of the .example-css-selector element.', + attachTo: { + element: '.textBox', + on: 'bottom' + }, + classes: 'example-step-extra-class', + buttons: [ + { + text: 'Next', + action: tour.next + } + ] +}); +tour.addStep({ + id: 'example-step', + text: 'This step is attached to the bottom of the .example-css-selector element.', + attachTo: { + element: '#search-btn', + on: 'bottom' + }, + classes: 'example-step-extra-class', + buttons: [ + { + text: 'Next', + action: tour.next + } + ] +}); + // hooray! we start our javascript in main(). -document.addEventListener("DOMContentLoaded", function(event) { +document.addEventListener("DOMContentLoaded", function() { main(); + tour.start(); }); From 74c787f49aca949706982942fbe11db973ce8449 Mon Sep 17 00:00:00 2001 From: ozFri Date: Sun, 20 Sep 2020 21:49:37 +0300 Subject: [PATCH 06/16] changes to indentation and line breaks --- html/dpt3d.html | 325 ++++++++++++++++++++++++------------------------ 1 file changed, 162 insertions(+), 163 deletions(-) diff --git a/html/dpt3d.html b/html/dpt3d.html index fac23425..036b0ad0 100644 --- a/html/dpt3d.html +++ b/html/dpt3d.html @@ -1,181 +1,180 @@ - - - - - - Digital Peace Talks - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + Digital Peace Talks + - - + "https://fonts.googleapis.com/css?family=Markazi+Text"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- -
- -
-
- - -
- - - - +
+
+
+
+ +
+ -
+
-
- -
-
- Rotate View -
-
- Move View -
-
- Zoom -
+
+ +
+
+ Rotate View +
+
+ Move View +
+
+ Zoom +
-
- Mouse -
-
- -
-
- -
-
- -
+
+ Mouse +
+
+
+
-
- Touch -
-
- -
-
- -
-
- -
+
+ Touch +
+
+ +
+
+
+ +
-
-
-
- Rotate View - -
-
- Move View - -
-
- Zoom - -
+
+
+
+ Rotate View +
+
Move + View
+
+ Zoom
- -
digital peace talks
-
-
-
+
+
+ + +
+
+
+
-