Gif and Pngs implemented

Client/WebServer/css/docs.css

@@ -439,4 +439,20 @@ border-top: 1px solid #dedede;
 
 .docs-info-table-alt-bg td {
 background-color: #f9f9f9;
-}
+}
+
+/* Gif Image */
+.docs-gif {
+max-width: 100%;
+width: 100%;
+border: 1px solid #dedede;
+border-spacing: 1px;
+}
+
+/* PNG Image */
+.docs-png {
+max-width: 100%;
+width: 100%;
+border: 1px solid #dedede;
+border-spacing: 1px;
+}

Client/WebServer/index.html

@@ -122,6 +122,7 @@
         <li class="menu-item" onClick="window.contextMenu.toJson()">JSON Code Style</li>
         <li class="menu-item" onClick="window.contextMenu.toTable()">Table Style</li>
         <li class="menu-item" onClick="window.contextMenu.toGif()">Gif Style</li>
+        <li class="menu-item" onClick="window.contextMenu.toPng()">Png Style</li>
     </ul>
 
 </body>

Client/httpInterface.js

@@ -356,9 +356,30 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE
                 }
                 break
 
-            case 'Gifs': // This means the Gifs folder under Projects.
+            case 'GIFs': // This means the GIFs folder under Projects.
                 {
-                    let path = global.env.PATH_TO_PROJECTS + '/' + requestParameters[2] + '/Gifs'
+                    let path = global.env.PATH_TO_PROJECTS + '/' + requestParameters[2] + '/GIFs'
+
+                    if (requestParameters[3] !== undefined) {
+                        path = path + '/' + requestParameters[3]
+                    }
+
+                    if (requestParameters[4] !== undefined) {
+                        path = path + '/' + requestParameters[4]
+                    }
+
+                    if (requestParameters[5] !== undefined) {
+                        path = path + '/' + requestParameters[5]
+                    }
+
+                    path = unescape(path)
+                    respondWithImage(path, httpResponse)
+                }
+                break
+
+            case 'PNGs': // This means the PNGs folder under Projects.
+                {
+                    let path = global.env.PATH_TO_PROJECTS + '/' + requestParameters[2] + '/PNGs'
 
                     if (requestParameters[3] !== undefined) {
                         path = path + '/' + requestParameters[3]
@@ -896,7 +917,7 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE
                     let fileList = fs.readdirSync(filePath + '/Docs-Nodes')
                     for (let k = 0; k < fileList.length; k++) {
                         let name = fileList[k]
-                        let fileContent = fs.readFileSync(filePath + '/Docs-Nodes/' + name ) 
+                        let fileContent = fs.readFileSync(filePath + '/Docs-Nodes/' + name)
                         let nodeDefinition = JSON.parse(fileContent)
                         schemaArray.push(nodeDefinition)
                     }

Projects/Superalgos/Schemas/Docs-Nodes/data-dependency.json

@@ -12,7 +12,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/indicators-process-dependencies-02.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/indicators-process-dependencies-02.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/execution-finished-event.json

@@ -12,7 +12,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/indicators-process-execution-started-finished-events-01.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/indicators-process-execution-started-finished-events-01.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/fee-structure.json

@@ -24,7 +24,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/trading-simulation-fees-fails.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/trading-simulation-fees-fails.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/output-dataset.json

@@ -16,7 +16,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/indicators-process-output-01.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/indicators-process-output-01.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/plotter-module.json

@@ -12,7 +12,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/plotter-module-01.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/plotter-module-01.gif"
         },
         {
             "style": "Important",
@@ -20,7 +20,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/plotter-module-02-product-link.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/plotter-module-02-product-link.gif"
         },
         {
             "style": "Title",
@@ -75,28 +75,28 @@
             "text": "| :---: | :---: |"
         },
         {
-            "style": "Text",
-            "text": "| default | <img src=\"Projects/Superalgos/Icons/default-banner.png\"></img> |"
+            "style": "Png",
+            "text": "| default | PNGs/Superalgos/Docs/inner-foder/default-banner.png |"
         },
         {
-            "style": "Text",
-            "text": "| histogram | <img src=\"Projects/Superalgos/Icons/histogram-banner.png\"></img> |"
+            "style": "Png",
+            "text": "| histogram | PNGs/Superalgos/Docs/inner-foder/histogram-banner.png |"
         },
         {
-            "style": "Text",
-            "text": "| band | <img src=\"Projects/Superalgos/Icons/bands-banner.png\"></img> |"
+            "style": "Png",
+            "text": "| band | PNGs/Superalgos/Docs/inner-foder/bands-banner.png |"
         },
         {
-            "style": "Text",
-            "text": "| moving-average | <img src=\"Projects/Superalgos/Icons/moving-average-banner.png\"></img> |"
+            "style": "Png",
+            "text": "| moving-average | PNGs/Superalgos/Docs/inner-foder/moving-average-banner.png |"
         },
         {
-            "style": "Text",
-            "text": "| oscillator | <img src=\"Projects/Superalgos/Icons/oscillator-banner.png\"></img> |"
+            "style": "Png",
+            "text": "| oscillator | PNGs/Superalgos/Docs/inner-foder/oscillator-banner.png |"
         },
         {
-            "style": "Text",
-            "text": "| trend | <img src=\"Projects/Superalgos/Icons/trends-banner.png\"></img> |"
+            "style": "Png",
+            "text": "| trend | PNGs/Superalgos/Docs/inner-foder/trends-banner.png |"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/polygon-vertex.json

@@ -12,7 +12,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/vertex-01-add-and-link.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/vertex-01-add-and-link.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/record-property.json

@@ -64,7 +64,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/indicators-record-definitions-01.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/indicators-record-definitions-01.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/Schemas/Docs-Nodes/shapes.json

@@ -12,7 +12,7 @@
         },
         {
             "style": "Gif",
-            "text": "Projects/Superalgos/Docs-Gifs/shapes-01-show-off.gif"
+            "text": "GIFs/Superalgos/Docs/inner-foder/shapes-01-show-off.gif"
         },
         {
             "style": "Text",

Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js

@@ -67,7 +67,8 @@ function newSuperalgosDocSpace() {
                 toSuccess: toSuccess,
                 toList: toList,
                 toTable: toTable,
-                toGif: toGif
+                toGif: toGif,
+                toPng: toPng
             }
 
             function editParagraph() {
@@ -204,6 +205,13 @@ function newSuperalgosDocSpace() {
                 contextMenuForceOutClick()
                 renderPage()
             }
+
+            function toPng() {
+                let docSchemaParagraph = docSchemaParagraphMap.get(selectedParagraph.id)
+                docSchemaParagraph.style = 'Png'
+                contextMenuForceOutClick()
+                renderPage()
+            }
         }
 
         function setUpMenuItemsMap() {
@@ -440,7 +448,10 @@ function newSuperalgosDocSpace() {
             selectedParagraphData = reverseParseTable(paragraphNode.innerHTML)
         }
         if (paragraphNode.id.indexOf('-gif') >= 0) {
-            selectedParagraphData = reverseParseGif(paragraphNode.innerHTML)
+            selectedParagraphData = reverseParseGIF(paragraphNode.innerHTML)
+        }
+        if (paragraphNode.id.indexOf('-png') >= 0) {
+            selectedParagraphData = reverseParsePNG(paragraphNode.innerHTML)
         }
         if (paragraphNode.id.indexOf('-javascript') >= 0) {
             selectedParagraphData = paragraphNode.innerText.substring(1, paragraphNode.innerText.length - 1)
@@ -451,6 +462,7 @@ function newSuperalgosDocSpace() {
 
         selectedParagraph = paragraphNode
         selectedParagraphHeight = paragraphNode.getClientRects()[0].height
+        if (selectedParagraphHeight < 30) {selectedParagraphHeight = 30}
         return true
     }
 
@@ -1353,7 +1365,18 @@ function newSuperalgosDocSpace() {
                         sufix = ''
                         role = ''
                         key = key + '-gif'
-                        innerHTML = parseGif(paragraph.text)
+                        innerHTML = parseGIF(paragraph.text)
+                        innerHTML = addItalics(innerHTML)
+                        innerHTML = addToolTips(innerHTML)
+                        break
+                    }
+                    case 'Png': {
+                        styleClass = ''
+                        prefix = ''
+                        sufix = ''
+                        role = ''
+                        key = key + '-png'
+                        innerHTML = parsePNG(paragraph.text)
                         innerHTML = addItalics(innerHTML)
                         innerHTML = addToolTips(innerHTML)
                         break
@@ -1424,14 +1447,25 @@ function newSuperalgosDocSpace() {
         }
     }
 
-    function parseGif(text) {
-        return '<img src="' + text + '"></img>'
+    function parseGIF(text) {
+        return '<img class="docs-gif" src="' + text + '">'
     }
 
-    function reverseParseGif(HTML) {
+    function reverseParseGIF(HTML) {
         let result = HTML
-        result = result.replace('<img src="', '')
-        result = result.replace('"></img>', '')
+        result = result.replace(' <img class="docs-gif" src="', '')
+        result = result.replace('">  ', '')
+        return result
+    }
+
+    function parsePNG(text) {
+        return '<img class="docs-png" src="' + text + '">'
+    }
+
+    function reverseParsePNG(HTML) {
+        let result = HTML
+        result = result.replace(' <img class="docs-png" src="', '')
+        result = result.replace('">  ', '')
         return result
     }
 

Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js

@@ -228,7 +228,7 @@ function newSuperalgosTutorialSpace() {
 
             if (currentGifName === newGifName) { return }
             currentGifName = newGifName
-            htmlGif.src = 'Gifs/' + currentNode.project + '/' + currentGifName + '.gif'
+            htmlGif.src = 'GIFs/' + currentNode.project + '/Tutorials/' + currentGifName + '.gif'
             htmlGif.width = "400"
             htmlGif.height = "580"
         }