diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css index a76036070..38cb4e4d0 100644 --- a/Client/WebServer/css/docs.css +++ b/Client/WebServer/css/docs.css @@ -6,4 +6,83 @@ border-color: #1b998b; border-radius: 8px; background-color: #fdfdfd; + } + + .docs-definitionTable { + background-color: #f3f3f3; + border-top-color: #a6e1ec; + padding: 15px; + margin: 20px 0; + border: solid 0px; + vertical-align: middle; + min-width: 100px; + width: 100%; + } + + .docs-image-container { + padding: 5px 15px 5px 5px; + border: solid 0px; + margin-left: auto; + margin-right: auto; + width: 100%; + } + + .docs-font-bold-small { + font:bold normal normal 14px/1 "segoeui"; + font-size:inherit; + text-rendering:auto; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + line-height: 150% + } + + /* Tooltip container */ + .docs-tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ + } + + /* Tooltip text */ + .docs-tooltip .docs-tooltiptext { + visibility: hidden; + width: 240px; + background-color: #0295aa; + color: #fff; + font-weight: normal; + font-size: 92%; + line-height: 130%; + text-align: center; + padding: 15px; + border-radius: 6px; + + /* Position the docs-tooltip text */ + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -120px; + + + /* Fade in docs-tooltip */ + opacity: 0; + transition: opacity 0.3s; + } + + /* Tooltip arrow */ + .docs-tooltip .docs-tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #0295aa transparent transparent transparent; + } + + /* Show the tooltip text when you mouse over the tooltip container */ + .docs-tooltip:hover .docs-tooltiptext { + visibility: visible; + opacity: 1; } \ No newline at end of file diff --git a/Client/WebServer/css/tutorial.css b/Client/WebServer/css/tutorial.css index ccdd543a4..2f01b7c5f 100644 --- a/Client/WebServer/css/tutorial.css +++ b/Client/WebServer/css/tutorial.css @@ -242,7 +242,7 @@ } /* Tooltip text */ - .tutorial-tooltip .tooltiptext { + .tutorial-tooltip .tutorial-tooltiptext { visibility: hidden; width: 240px; background-color: #0295aa; @@ -268,7 +268,7 @@ } /* Tooltip arrow */ - .tutorial-tooltip .tooltiptext::after { + .tutorial-tooltip .tutorial-tooltiptext::after { content: ""; position: absolute; top: 100%; @@ -280,7 +280,7 @@ } /* Show the tooltip text when you mouse over the tooltip container */ - .tutorial-tooltip:hover .tooltiptext { + .tutorial-tooltip:hover .tutorial-tooltiptext { visibility: visible; opacity: 1; } diff --git a/Client/WebServer/test.html b/Client/WebServer/test.html new file mode 100644 index 000000000..7128eb361 --- /dev/null +++ b/Client/WebServer/test.html @@ -0,0 +1,38 @@ + + + + + +
+
+
A network node represents a machine running Superalgos within a
ShapesThe shapes node contains definitions of + polygons and styles to be rendered on a per-period basis over the charts.
,on which + processes run and data is stored. Do not confuse this with a Template XXXStructure which is similar to a + XXXTask Manager but it is not one.
+ + + +
+

That's Me On the Right!

+ + + + + +
+
+
Tutorials are defined within the system, so you may create more + of us if you wish! But we'll discuss that God-like power later on... let's focus on the basics + first!
+
Superalgos is inherently a visual tool. The system represents information in + hierarchical structures of interconnected nodes, represented by icons. What you see on your right is one of + these hierarchies—in particular, a
TutorialThe tutorial hierarchy features a free arrangement of tutorial topic and + tutorial step nodes that make up a tutorial. Each node in the hierarchy, including the parent tutorial + node, represents a HTML page that is overlaid on top of both the design space and the charting space. +
hierarchy with a label reading Welcome to Superalgos!
+
Hover your mouse pointer over the Tutorial node and see what + happens!
+
Wow! Cool right? That's a lot of buttons!
+
\ No newline at end of file diff --git a/Projects/Superalgos/Schemas/DocSchema.json b/Projects/Superalgos/Schemas/DocSchema.json index 137937712..5ad82aea2 100644 --- a/Projects/Superalgos/Schemas/DocSchema.json +++ b/Projects/Superalgos/Schemas/DocSchema.json @@ -754,7 +754,7 @@ }, { "type": "Network Node", - "definition": "A network node represents a machine running Superalgos, on which processes run and data is stored.", + "definition": "A network node represents a machine running Superalgos within a Shapes, on which processes run and data is stored. Do not confuse this with a Template Structure which is similar to a Task Manager but it is not one.", "content": [ "By default, processes are set up to run locally in a network node representing your local machine. However, the system is prepared to run distributed on a network of nodes, or what we call a trading farm.", "You may create unlimited network nodes and map them with different machines on a network. Each machine in the network runs an instance of the Superalgos backend, and you may control the whole network operation from a single machine, or—in general—from any machine in the network running the Superalgos frontend. To learn more about distributed setups, check the trading farms pages.", diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js index d409a1cce..e086c1ac3 100644 --- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js +++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js @@ -57,19 +57,121 @@ function newSuperalgosDocSpace() { function navigateTo(node) { + let nodeAppDefinition = SCHEMAS_BY_PROJECT.get(node.project).map.appSchema.get(node.type) + let nodeDocsDefinition = SCHEMAS_BY_PROJECT.get(node.project).map.docSchema.get(node.type) + + if (nodeDocsDefinition === undefined) { + node.payload.uiObject.setErrorMessage('This node in undefined at the DOC_SCHEMA. ') + return + } buildNodeHtmlPage() function buildNodeHtmlPage() { - let HTML = node.type + let HTML = '' + console.log(HTML) + //HTML = HTML + '

Thats Me On the Right!

Tutorials are defined within the system, so you may create more of us if you wish! But well discuss that God - like power later on...lets focus on the basics first!
Superalgos is inherently a visual tool. The system represents information in hierarchical structures of interconnected nodes, represented by icons. What you see on your right is one of these hierarchies—in particular, a
TutorialThe tutorial hierarchy features a free arrangement of tutorial topic and tutorial step nodes that make up a tutorial. Each node in the hierarchy, including the parent tutorial node, represents a HTML page that is overlaid on top of both the design space and the charting space.
hierarchy with a label reading Welcome to Superalgos!
Hover your mouse pointer over the Tutorial node and see what happens!
Wow! Cool right? Thats a lot of buttons!
' + HTML = HTML + '' + HTML = HTML + '' + HTML = HTML + '' + HTML = HTML + '' + HTML = HTML + '' + HTML = HTML + '
' + HTML = HTML + '
' + HTML = HTML + '
' + HTML = HTML + '' + addToolTips(node, nodeDocsDefinition.definition) + '' + HTML = HTML + '
' let docsAppDiv = document.getElementById('docsDiv') docsAppDiv.innerHTML = HTML } - thisObject.sidePanelTab.open() } + function addToolTips(node, text) { + const TOOL_TIP_HTML = '
NODE_TYPENODE_DEFINITION
' + let resultingText = '' + text = tagNodeTypes(text, node.project, node.type) + let splittedText = text.split('->') + + for (let i = 0; i < splittedText.length; i = i + 2) { + let firstPart = splittedText[i] + let nodeType = splittedText[i + 1] + if (nodeType === undefined) { + return resultingText + firstPart + } + let splittedNodeType = nodeType.split('/') + let project + let type + if (splittedNodeType.length > 1) { + project = splittedNodeType[0] + type = splittedNodeType[1] + } else { + project = 'Superalgos' + type = splittedNodeType[0] + } + let definitionNode = SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(type) + if (definitionNode === undefined) { + definitionNode = SCHEMAS_BY_PROJECT.get(project).map.conceptSchema.get(type) + if (definitionNode === undefined) { + node.payload.uiObject.setErrorMessage(type + ' not found at Doc Schema or Concept Schema.') + return + } + } + let definition = definitionNode.definition + if (definition === undefined || definition === "") { + resultingText = resultingText + firstPart + type + } else { + let tooltip = TOOL_TIP_HTML.replace('NODE_TYPE', type).replace('NODE_DEFINITION', definition) + resultingText = resultingText + firstPart + tooltip + } + } + return resultingText + } + + function tagNodeTypes(text, project, excludeNodeType) { + let words = text.split(' ') + let taggedText = '' + for (let i = 0; i < words.length; i++) { + let phrase1 = words[i] + let phrase2 = words[i] + ' ' + words[i + 1] + let phrase3 = words[i] + ' ' + words[i + 1] + ' ' + words[i + 2] + let phrase4 = words[i] + ' ' + words[i + 1] + ' ' + words[i + 2] + ' ' + words[i + 3] + + let cleanPhrase1 = cleanPhrase(phrase1) + let cleanPhrase2 = cleanPhrase(phrase2) + let cleanPhrase3 = cleanPhrase(phrase3) + let cleanPhrase4 = cleanPhrase(phrase4) + + if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase4) !== undefined && cleanPhrase4 !== excludeNodeType) { + taggedText = taggedText + phrase4.replace(cleanPhrase4, '->' + cleanPhrase4 + '->') + ' ' + i = i + 3 + continue + } + if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase3) !== undefined && cleanPhrase3 !== excludeNodeType) { + taggedText = taggedText + phrase3.replace(cleanPhrase3, '->' + cleanPhrase3 + '->') + ' ' + i = i + 2 + continue + } + if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase2) !== undefined && cleanPhrase2 !== excludeNodeType) { + taggedText = taggedText + phrase2.replace(cleanPhrase2, '->' + cleanPhrase2 + '->') + ' ' + i = i + 1 + continue + } + if (SCHEMAS_BY_PROJECT.get(project).map.docSchema.get(cleanPhrase1) !== undefined && cleanPhrase1 !== excludeNodeType) { + taggedText = taggedText + phrase1.replace(cleanPhrase1, '->' + cleanPhrase1 + '->') + ' ' + continue + } + + taggedText = taggedText + phrase1 + ' ' + + function cleanPhrase(phrase) { + return phrase.replace(',', '').replace(';', '').replace('(', '').replace(')', '').replace('-', '').replace('_', '') + } + } + return taggedText + } + function resize() { thisObject.container.frame.width = 1200 thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT diff --git a/Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js b/Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js index 58e09e694..be74f0aa4 100644 --- a/Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js +++ b/Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js @@ -1183,7 +1183,7 @@ function newSuperalgosTutorialSpace() { tutorialDiv.innerHTML = html function addToolTips(text) { - const TOOL_TIP_HTML = '
NODE_TYPENODE_DEFINITION
' + const TOOL_TIP_HTML = '
NODE_TYPENODE_DEFINITION
' let resultingText = '' let splittedText = text.split('->') diff --git a/UI/PostLoader.js b/UI/PostLoader.js deleted file mode 100644 index db12ac1be..000000000 --- a/UI/PostLoader.js +++ /dev/null @@ -1,147 +0,0 @@ - - -function newAppPostLoader() { - const MODULE_NAME = 'Post Loader' - const ERROR_LOG = true - const logger = newWebDebugLog() - - - let thisObject = { - start: start - } - - return thisObject - - function start() { - try { - /* Moving PROJECTS_ARRAY to the global variable */ - PROJECTS_ARRAY = window.PROJECTS - window.PROJECTS = undefined - - setBrowserEvents() - setupProjectsSchema() - - function setupProjectsSchema() { - httpRequest(undefined, 'ProjectsSchema', onResponse) - - function onResponse(err, file) { - PROJECTS_SCHEMA = JSON.parse(file) - setupSchemas() - } - } - - function setupSchemas() { - - let totalWebServerCalls = 0 - let webServerResponses = 0 - - for (let i = 0; i < PROJECTS_ARRAY.length; i++) { - let project = PROJECTS_ARRAY[i] - let schemas = { - array: { - appSchema: [], - docSchema: [], - conceptSchema: [] - }, - map: { - appSchema: new Map(), - docSchema: new Map(), - conceptSchema: new Map() - } - } - SCHEMAS_BY_PROJECT.set(project, schemas) - - totalWebServerCalls++ - httpRequest(undefined, 'Schema/' + project + '/AppSchema', onResponseAppSchema) - - function onResponseAppSchema(err, schema) { - try { - schemas.array.appSchema = JSON.parse(schema) - - for (let j = 0; j < schemas.array.appSchema.length; j++) { - let nodeDefinition = schemas.array.appSchema[j] - let key = nodeDefinition.type - schemas.map.appSchema.set(key, nodeDefinition) - } - } catch (err) { - console.log(err.stack) - } - - webServerResponses++ - if (webServerResponses === totalWebServerCalls) { startCanvas() } - } - - totalWebServerCalls++ - httpRequest(undefined, 'Schema/' + project + '/DocSchema', onResponseDocSchema) - - function onResponseDocSchema(err, schema) { - try { - schemas.array.docSchema = JSON.parse(schema) - - for (let j = 0; j < schemas.array.docSchema.length; j++) { - let nodeDefinition = schemas.array.docSchema[j] - let key = nodeDefinition.type - schemas.map.docSchema.set(key, nodeDefinition) - } - } catch (err) { - console.log(err.stack) - } - - webServerResponses++ - if (webServerResponses === totalWebServerCalls) { startCanvas() } - } - - totalWebServerCalls++ - httpRequest(undefined, 'Schema/' + project + '/ConceptSchema', onResponseConceptSchema) - - function onResponseConceptSchema(err, schema) { - try { - schemas.array.conceptSchema = JSON.parse(schema) - - for (let j = 0; j < schemas.array.conceptSchema.length; j++) { - let nodeDefinition = schemas.array.conceptSchema[j] - let key = nodeDefinition.type - schemas.map.conceptSchema.set(key, nodeDefinition) - } - } catch (err) { - console.log(err.stack) - } - - webServerResponses++ - if (webServerResponses === totalWebServerCalls) { startCanvas() } - } - } - } - - function startCanvas() { - /* If this method is executed for a second time, it should finalize the current execution structure */ - if (canvas !== undefined) { canvas.finalize() } - - canvas = newCanvas() - canvas.initialize() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) } - } - } - - function setBrowserEvents() { - window.onbeforeunload = saveWorkspace - - /* handles backspace and refresh(F5) from keyboard */ - window.manageBackRefresh = function (event) { - var tag = event.target.tagName.toLowerCase() - if (event.keyCode === 8 && tag !== 'input' && tag !== 'textarea') { // Backbutton pressed - saveWorkspace() - } else if (event.keyCode === 116) { // F5 pressed - saveWorkspace() - } - } - - window.addEventListener('keydown', window.manageBackRefresh) - - function saveWorkspace() { - UI.projects.superalgos.spaces.designSpace.workspace.save() - } - } -}