console-gui-tools - npm Package Compare versions

Comparing version 1.1.11 to 1.1.12

docs/ConsoleGui.md

@@ -14,6 +14,9 @@ ## Classes
 </dd>
+<dt><a href="#logLocation">logLocation</a> : <code>number</code> | <code>&#x27;popup&#x27;</code></dt>
+<dd><p>Choose where the logs are displayed: number (0,1) - to pot them on one of the two layouts, string (&quot;popup&quot;) - to put them on a CustomPopup that can be displayed on the window.</p>
+</dd>
 <dt><a href="#stdOut">stdOut</a> : <code>PageBuilder</code></dt>
 <dd><p>The logs page</p>
 </dd>
-<dt><a href="#homePage">homePage</a> : <code>PageBuilder</code></dt>
+<dt><a href="#homePage">homePage</a> : <code>Array.&lt;PageBuilder&gt;</code></dt>
 <dd><p>The main application</p>
@@ -42,4 +45,7 @@ </dd>
     * [.unRegisterWidget(id)](#ConsoleManager+unRegisterWidget)
-    * [.setHomePage(page)](#ConsoleManager+setHomePage)
+    * ~~[.setHomePage(page)](#ConsoleManager+setHomePage)~~
+    * [.setPage(page, [pageNumber], [title])](#ConsoleManager+setPage)
+    * [.setPages(pages)](#ConsoleManager+setPages)
     * [.refresh()](#ConsoleManager+refresh)
+    * [.showLogPopup()](#ConsoleManager+showLogPopup) ⇒
     * [.log(message)](#ConsoleManager+log)
@@ -127,3 +133,5 @@ * [.error(message)](#ConsoleManager+error)
 
-### consoleManager.setHomePage(page)
+### ~~consoleManager.setHomePage(page)~~
+***Deprecated***
+
 This function is used to set the home page. It also refresh the screen.
@@ -141,2 +149,34 @@
 ```
+<a name="ConsoleManager+setPage"></a>
+
+### consoleManager.setPage(page, [pageNumber], [title])
+This function is used to set a page of layout. It also refresh the screen.
+
+**Kind**: instance method of [<code>ConsoleManager</code>](#ConsoleManager)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| page | <code>PageBuilder</code> |  | The page to set as home page. |
+| [pageNumber] | <code>number</code> | <code>0</code> | The page number to set. 0 is the first page, 1 is the second page. |
+| [title] | <code>string</code> | <code>null</code> | The title of the page to overwrite the default title. Default is null. |
+
+**Example**  
+```js
+CM.setPage(p, 0)
+```
+<a name="ConsoleManager+setPages"></a>
+
+### consoleManager.setPages(pages)
+This function is used to set both pages of layout. It also refresh the screen.
+
+**Kind**: instance method of [<code>ConsoleManager</code>](#ConsoleManager)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| pages | <code>Array.&lt;PageBuilder&gt;</code> | The page to set as home page. |
+
+**Example**  
+```js
+CM.setPages([p1, p2], 0)
+```
 <a name="ConsoleManager+refresh"></a>
@@ -152,2 +192,13 @@
 ```
+<a name="ConsoleManager+showLogPopup"></a>
+
+### consoleManager.showLogPopup() ⇒
+This function is used to show a popup containing all the stdOut of the console.
+
+**Kind**: instance method of [<code>ConsoleManager</code>](#ConsoleManager)  
+**Returns**: the instance of the generated popup.  
+**Example**  
+```js
+CM.showLogPopup()
+```
 <a name="ConsoleManager+log"></a>
@@ -247,2 +298,8 @@
 **Kind**: global constant  
+<a name="logLocation"></a>
+
+## logLocation : <code>number</code> \| <code>&#x27;popup&#x27;</code>
+Choose where the logs are displayed: number (0,1) - to pot them on one of the two layouts, string ("popup") - to put them on a CustomPopup that can be displayed on the window.
+
+**Kind**: global constant  
 <a name="stdOut"></a>
@@ -256,3 +313,3 @@
 
-## homePage : <code>PageBuilder</code>
+## homePage : <code>Array.&lt;PageBuilder&gt;</code>
 The main application
@@ -259,0 +316,0 @@

docs/DoubleLayout.md

@@ -17,3 +17,3 @@ ## Classes
 </dd>
-<dt><a href="#applicationTitle">applicationTitle</a> : <code>string</code></dt>
+<dt><a href="#page1Title">page1Title</a> : <code>string</code></dt>
 <dd><p>The application title.</p>
@@ -29,3 +29,3 @@ </dd>
 * [DoubleLayout](#DoubleLayout)
-    * [new DoubleLayout(page1, page2, border, selected)](#new_DoubleLayout_new)
+    * [new DoubleLayout(page1, page2, options, selected)](#new_DoubleLayout_new)
     * [.setPage1(page)](#DoubleLayout+setPage1)
@@ -42,3 +42,3 @@ * [.setPage2(page)](#DoubleLayout+setPage2)
 
-### new DoubleLayout(page1, page2, border, selected)
+### new DoubleLayout(page1, page2, options, selected)
 This class is a layout that has two pages.
@@ -51,3 +51,3 @@
 | page2 | <code>PageBuilder</code> | The second page. |
-| border | <code>boolean</code> | If the layout has a border. |
+| options | <code>boolean</code> | Layout options. |
 | selected | <code>number</code> | The selected page. |
@@ -150,7 +150,7 @@
 **Kind**: global constant  
-<a name="applicationTitle"></a>
+<a name="page1Title"></a>
 
-## applicationTitle : <code>string</code>
+## page1Title : <code>string</code>
 The application title.
 
 **Kind**: global constant  

package.json

 {
     "name": "console-gui-tools",
-    "version": "1.1.11",
+    "version": "1.1.12",
     "description": "A simple library to draw option menu, text popup or other widgets and layout on a Node.js console.",
@@ -5,0 +5,0 @@ "main": "src/ConsoleGui.js",

README.md

@@ -34,8 +34,21 @@ # console-gui-tools
 
-### options.changeLayoutKey
-The key that will be used to change the layout. (To switch between the two pages, logs and main page)
+### options.logLocation
+Choose where the logs are displayed: number (0,1) - to pot them on one of the two layouts, string ("popup") - to put them on a CustomPopup that can be displayed on the window.
 
-### options.layoutBorder
-To enable the border of the layout and the title.
+### options.showLogKey
+The key that will be used to show the logs popup if the logLocation is set to "popup".
 
+### options.layoutOptions
+The options that will be passed to the layout.
+```js
+const layoutOptions = {
+    boxed: true, // Set to true to enable boxed layout mode
+    showTitle: true, // Set to false to hide titles
+    changeFocusKey: 'ctrl+l', // The key or the combination that will change the focus between the two layouts
+    direction: 'vertical', // Set to 'horizontal' to enable horizontal layout
+    boxColor: 'yellow', // The color of the box
+    boxStyle: 'bold', // The style of the box (bold)
+}
+```
+
 Example of usage:
@@ -92,3 +105,3 @@ ```js
 
-    GUI.setHomePage(p)
+    GUI.setPage(p)
 }
@@ -233,6 +246,6 @@
 
-And so, we can add the PageBuilder to the home page
+And so, we can add the PageBuilder to the first page
 
 ```js
-GUI.setHomePage(p)
+GUI.setPage(p, 0)
 ```
@@ -239,0 +252,0 @@

src/components/layout/DoubleLayout.js

@@ -8,3 +8,3 @@ import { ConsoleManager } from "../../ConsoleGui.js"
  * @param {PageBuilder} page2 The second page.
- * @param {boolean} border If the layout has a border.
+ * @param {boolean} options Layout options.
  * @param {number} selected The selected page.
@@ -14,7 +14,7 @@ * @example const layout = new DoubleLayout(page1, page2, true, 0)
 export class DoubleLayout {
-    constructor(page1, page2, border = true, selected = 0) {
+    constructor(page1, page2, options = {}, selected = 0) {
         /** @const {ConsoleManager} CM the instance of ConsoleManager (singleton) */
         this.CM = new ConsoleManager()
 
-        this.border = border
+        this.options = options
         this.selected = selected
@@ -24,7 +24,10 @@ this.page1 = page1
 
+        this.boxBold = this.options.boxStyle === "bold" ? true : false
+        this.proportions = this.options.pageRatio || [0.7, 0.3]
+
         /** @const {string} page2Title The title of page2. */
-        this.page2Title = "─LOGS"
+        this.page2Title = this.options.page2Title || this.CM.logPageTitle
 
-        /** @const {string} applicationTitle The application title. */
-        this.applicationTitle = this.CM.applicationTitle
+        /** @const {string} page1Title The application title. */
+        this.page1Title = this.options.page1Title || this.CM.applicationTitle
     }
@@ -51,3 +54,3 @@
      */
-    setBorder(border) { this.border = border }
+    setBorder(border) { this.options.boxed = border }
 
@@ -90,34 +93,74 @@ /**
      */
-    drawLine(line, index) {
-        let unformattedLine = ""
-        let newLine = [...line]
-        line.forEach(element => {
-            unformattedLine += element.text
-        })
-        if (unformattedLine.length > this.CM.Screen.width - 2) { // Need to truncate
-            const offset = 2
-            newLine = JSON.parse(JSON.stringify(line)) // Shallow copy because I don't want to modify the values but not the original
-            let diff = unformattedLine.length - this.CM.Screen.width
-                // remove truncated text
-            for (let i = newLine.length - 1; i >= 0; i--) {
-                if (newLine[i].text.length > diff + offset) {
-                    newLine[i].text = this.CM.truncate(newLine[i].text, (newLine[i].text.length - diff) - offset, true)
-                    break
-                } else {
-                    diff -= newLine[i].text.length
-                    newLine.splice(i, 1)
+    drawLine(line, index = 0) {
+        const dir = !this.options.direction || this.options.direction === "vertical" ? "vertical" : "horizontal"
+        const bsize = this.options.boxed ? dir === "vertical" ? 2 : 3 : 0
+        let unformattedLine = [""]
+        let newLine = [
+            [...line]
+        ]
+        if (dir === "vertical") {
+            line.forEach(element => {
+                unformattedLine[0] += element.text
+            })
+        } else {
+            newLine = [
+                [...line[0]],
+                [...line[1]]
+            ]
+            unformattedLine.push("")
+            line[0].forEach(element => {
+                unformattedLine[0] += element.text
+            })
+            line[1].forEach(element => {
+                unformattedLine[1] += element.text
+            })
+        }
+        if (unformattedLine.filter((e, i) => e.length > this.realWidth[i] - bsize).length > 0) {
+            unformattedLine = unformattedLine.map((e, i) => {
+                if (e.length > this.realWidth[i] - bsize) { // Need to truncate
+                    const offset = 2
+                    if (dir === "vertical") {
+                        newLine[i] = [...JSON.parse(JSON.stringify(line))] // Shallow copy because I just want to modify the values but not the original
+                    } else {
+                        newLine[i] = JSON.parse(JSON.stringify(line[i]))
+                    }
+                    let diff = e.length - this.realWidth[i] + 1
+                        // remove truncated text
+                    for (let j = newLine[i].length - 1; j >= 0; j--) {
+                        if (newLine[i][j].text.length > diff + offset) {
+                            newLine[i][j].text = this.CM.truncate(newLine[i][j].text, (newLine[i][j].text.length - diff) - offset, true)
+                            break
+                        } else {
+                            diff -= newLine[i][j].text.length
+                            newLine[i].splice(j, 1)
+                        }
+                    }
+                    // Update unformatted line
+                    return newLine[i].map(element => element.text).join("")
                 }
-            }
-            // Update unformatted line
-            unformattedLine = ""
-            newLine.forEach(element => {
-                unformattedLine += element.text
+                return e
             })
         }
-        newLine.unshift({ text: "│", style: { color: this.selected === index ? "cyan" : "white" } })
-        if (unformattedLine.length <= this.CM.Screen.width - 2) {
-            newLine.push({ text: `${" ".repeat((this.CM.Screen.width - unformattedLine.length) - 2)}`, style: { color: "" } })
+        if (dir === "vertical") {
+            if (this.options.boxed) newLine[0].unshift({ text: "│", style: { color: this.selected === index ? this.options.boxColor : "white", bold: this.boxBold } })
+            if (unformattedLine[0].length <= this.CM.Screen.width - bsize) {
+                newLine[0].push({ text: `${" ".repeat((this.CM.Screen.width - unformattedLine[0].length) - bsize)}`, style: { color: "" } })
+            }
+            if (this.options.boxed) newLine[0].push({ text: "│", style: { color: this.selected === index ? this.options.boxColor : "white", bold: this.boxBold } })
+            this.CM.Screen.write(...newLine[0])
+        } else {
+            let ret = []
+            if (this.options.boxed) ret.push({ text: "│", style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } })
+            ret.push(...newLine[0])
+            if (unformattedLine[0].length <= this.realWidth[0] - bsize) {
+                ret.push({ text: `${" ".repeat((this.realWidth[0] - unformattedLine[0].length) - (bsize > 0 ? 2 : 0))}`, style: { color: "" } })
+            }
+            if (this.options.boxed) ret.push({ text: "│", style: { color: this.options.boxColor, bold: this.boxBold } })
+            ret.push(...newLine[1])
+            if (unformattedLine[1].length <= this.realWidth[1] - bsize) {
+                ret.push({ text: `${" ".repeat((this.realWidth[1] - unformattedLine[1].length) - (bsize > 0 ? 1 : 0))}`, style: { color: "" } })
+            }
+            if (this.options.boxed) ret.push({ text: "│", style: { color: this.selected === 1 ? this.options.boxColor : "white", bold: this.boxBold } })
+            this.CM.Screen.write(...ret)
         }
-        newLine.push({ text: "│", style: { color: this.selected === index ? "cyan" : "white" } })
-        this.CM.Screen.write(...newLine)
     }
@@ -132,19 +175,63 @@
     draw() { //TODO: Trim also the application title
-        if (this.border) { // Draw pages with borders
-            this.CM.Screen.write(this.selected === 0 ? { text: `┌─${this.applicationTitle}${"─".repeat(this.CM.Screen.width - this.applicationTitle.length - 3)}┐`, style: { color: 'cyan' } } : { text: `┌─${this.applicationTitle}${"─".repeat(this.CM.Screen.width - this.applicationTitle.length - 3)}┐`, style: { color: 'white' } })
-            this.page1.getContent().forEach(line => {
-                this.drawLine(line, 0)
-            })
-            this.CM.Screen.write({ text: `├${this.page2Title}${"─".repeat(this.CM.Screen.width - this.page2Title.length - 2)}┤`, style: { color: 'cyan' } })
-            this.page2.getContent().forEach(line => {
-                this.drawLine(line, 1)
-            })
-            this.CM.Screen.write(this.selected === 1 ? { text: `└${"─".repeat(this.CM.Screen.width - 2)}┘`, style: { color: 'cyan' } } : { text: `└${"─".repeat(this.CM.Screen.width - 2)}┘`, style: { color: 'white' } })
-        } else { // Draw pages without borders
-            this.page1.getContent().forEach(line => {
-                this.CM.Screen.write({ text: `${line}`, style: { color: 'white' } })
-            })
-            this.page2.getContent().forEach(line => {
-                this.CM.Screen.write({ text: `${line}`, style: { color: 'white' } })
-            })
+        this.isOdd = this.CM.Screen.width % 2 === 1
+        if (!this.options.direction || this.options.direction === "vertical") {
+            this.realWidth = [Math.round(this.CM.Screen.width * 1), Math.round(this.CM.Screen.width * 1)]
+            const trimmedTitle = [this.CM.truncate(this.page1Title, this.realWidth[0] - 4, false), this.CM.truncate(this.page2Title, this.realWidth[1] - 4, false)]
+            if (this.options.boxed) { // Draw pages with borders
+                if (this.options.showTitle) {
+                    this.CM.Screen.write({ text: `┌─${trimmedTitle[0]}${"─".repeat(this.CM.Screen.width - trimmedTitle[0].length - 3)}┐`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } })
+                } else {
+                    this.CM.Screen.write({ text: `┌─${"─".repeat(this.CM.Screen.width - 3)}┐`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } })
+                }
+                this.page1.getContent().forEach(line => {
+                    this.drawLine(line, 0)
+                })
+                if (this.options.showTitle) {
+                    this.CM.Screen.write({ text: `├─${trimmedTitle[1]}${"─".repeat(this.CM.Screen.width - trimmedTitle[1].length - 3)}┤`, style: { color: this.options.boxColor, bold: this.boxBold } })
+                } else {
+                    this.CM.Screen.write({ text: `├${"─".repeat(this.CM.Screen.width - 2)}┤`, style: { color: this.options.boxColor, bold: this.boxBold } })
+                }
+                this.page2.getContent().forEach(line => {
+                    this.drawLine(line, 1)
+                })
+                this.CM.Screen.write({ text: `└${"─".repeat(this.CM.Screen.width - 2)}┘`, style: { color: this.selected === 1 ? this.options.boxColor : "white", bold: this.boxBold } })
+            } else { // Draw pages without borders
+                if (this.options.showTitle) {
+                    this.CM.Screen.write({ text: `${trimmedTitle[0]}`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } })
+                }
+                this.page1.getContent().forEach(line => {
+                    this.drawLine(line, 0)
+                })
+                if (this.options.showTitle) {
+                    this.CM.Screen.write({ text: `${trimmedTitle[1]}`, style: { color: this.selected === 1 ? this.options.boxColor : "white", bold: this.boxBold } })
+                }
+                this.page2.getContent().forEach(line => {
+                    this.drawLine(line, 1)
+                })
+            }
+        } else { // Draw horizontally  
+            this.realWidth = [Math.round(this.CM.Screen.width * this.proportions[0]), Math.round(this.CM.Screen.width * this.proportions[1])]
+            const trimmedTitle = [this.CM.truncate(this.page1Title, this.realWidth[0] - 4, false), this.CM.truncate(this.page2Title, this.realWidth[1] - 3, false)]
+            const maxPageHeight = Math.max(this.page1.getPageHeight(), this.page2.getPageHeight())
+            const p1 = this.page1.getContent()
+            const p2 = this.page2.getContent()
+            if (this.options.boxed) { // Draw pages with borders
+                if (this.options.showTitle) {
+                    this.CM.Screen.write({ text: `┌─${trimmedTitle[0]}${"─".repeat(this.realWidth[0] - trimmedTitle[0].length - 3)}┬`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } }, { text: `─${trimmedTitle[1]}${"─".repeat(this.realWidth[1] - trimmedTitle[1].length - 2)}┐`, style: { color: this.selected === 1 ? this.options.boxColor : "white", bold: this.boxBold } })
+                } else {
+                    this.CM.Screen.write({ text: `┌─${"─".repeat(this.realWidth[0] - 3)}┬`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } }, { text: `─${"─".repeat(this.realWidth[1] - 2)}┐`, style: { color: this.selected === 1 ? this.options.boxColor : "white", bold: this.boxBold } })
+                }
+                for (let i = 0; i < maxPageHeight; i++) {
+                    this.drawLine([p1[i] || [{ text: "", style: { color: "" } }], p2[i] || [{ text: "", style: { color: "" } }]])
+                }
+                // Draw the bottom border
+                this.CM.Screen.write({ text: `└${"─".repeat(this.realWidth[0] - 2)}┴`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } }, { text: `${"─".repeat(this.realWidth[1] - 1)}┘`, style: { color: this.selected === 1 ? this.options.boxColor : "white", bold: this.boxBold } })
+            } else { // Draw pages without borders
+                if (this.options.showTitle) {
+                    this.CM.Screen.write({ text: `${trimmedTitle[0]}${" ".repeat(this.realWidth[0] - trimmedTitle[0].length)}${trimmedTitle[1]}`, style: { color: this.selected === 0 ? this.options.boxColor : "white", bold: this.boxBold } })
+                }
+                for (let i = 0; i < maxPageHeight; i++) {
+                    this.drawLine([p1[i] || [{ text: "", style: { color: "" } }], p2[i] || [{ text: "", style: { color: "" } }]])
+                }
+            }
         }
@@ -151,0 +238,0 @@ }

src/ConsoleGui.js

@@ -35,26 +35,50 @@ import { EventEmitter } from "events"
 
+            /** @const {number | 'popup'} logLocation - Choose where the logs are displayed: number (0,1) - to pot them on one of the two layouts, string ("popup") - to put them on a CustomPopup that can be displayed on the window. */
+            this.logLocation = 1;
+            this.logPageSize = 10;
+            this.logPageTitle = "LOGS";
+
             /** @const {PageBuilder} stdOut - The logs page */
             this.stdOut = new PageBuilder();
+            this.stdOut.setRowsPerPage(this.logPageSize);
 
-            /** @const {PageBuilder} homePage - The main application */
-            this.homePage = new PageBuilder()
+            /** @const {Array<PageBuilder>} homePage - The main application */
+            this.pages = [new PageBuilder(), new PageBuilder()];
 
-            this.layoutBorder = true;
+            this.layoutOptions = {
+                showTitle: true,
+                boxed: true,
+                boxColor: 'cyan',
+                boxStyle: 'bold',
+                changeFocusKey: 'ctrl+l',
+                direction: 'horizontal',
+            };
 
             /** @const {string} changeLayoutKey - The key or combination to switch the selected page */
-            this.changeLayoutKey = "ctrl+l";
+            this.changeLayoutKey = this.layoutOptions.changeFocusKey;
+            this.changeLayoutkeys = this.changeLayoutKey.split('+');
             this.applicationTitle = "";
-            this.changeLayoutkeys = this.changeLayoutKey.split('+');
-            this.logPageSize = 10;
 
             if (options) {
+                if (options.logLocation !== undefined) {
+                    if (typeof options.logLocation === 'number') {
+                        this.logLocation = options.logLocation > 0 ? options.logLocation : 0;
+                    } else {
+                        if (options.logLocation === 'popup') {
+                            this.logLocation = 'popup';
+                            this.showLogKey = options.showLogKey || 'o';
+                        } else {
+                            this.logLocation = 1;
+                        }
+                    }
+                }
                 if (options.logPageSize) {
                     this.logPageSize = options.logPageSize;
                 }
-                if (options.layoutBorder) {
-                    this.layoutBorder = options.layoutBorder;
+                if (typeof options.layoutOptions !== 'undefined') {
+                    this.layoutOptions = options.layoutOptions;
+                    if (options.layoutOptions.changeFocusKey) {
+                        this.changeLayoutKey = options.layoutOptions.changeFocusKey;
+                    }
                 }
-                if (options.changeLayoutKey) {
-                    this.changeLayoutKey = options.changeLayoutKey;
-                }
                 if (options.title) {
@@ -66,4 +90,19 @@ this.applicationTitle = options.title;
             /** @const {DoubleLayout} layout - The layout instance */
-            this.layout = new DoubleLayout(this.homePage, this.stdOut, this.layoutBorder, 0);
-            this.layout.page2.setRowsPerPage(this.logPageSize);
+            if (this.logLocation === 'popup') {
+                this.layout = new DoubleLayout(this.pages[0], this.pages[1], this.layoutOptions);
+            } else if (typeof this.logLocation === 'number') {
+                if (this.logLocation === 0) {
+                    this.layout = new DoubleLayout(this.stdOut, this.pages[0], this.layoutOptions);
+                    this.layout.page1Title = this.logPageTitle;
+                    this.layout.page2Title = this.applicationTitle;
+                } else {
+                    this.layout = new DoubleLayout(this.pages[0], this.stdOut, this.layoutOptions);
+                    this.layout.page1Title = this.applicationTitle;
+                    this.layout.page2Title = this.logPageTitle;
+                }
+            } else {
+                this.layout = new DoubleLayout(this.pages[0], this.stdOut, this.layoutOptions);
+                this.layout.page1Title = this.applicationTitle;
+                this.layout.page2Title = this.logPageTitle;
+            }
             this.addGenericListeners();
@@ -112,2 +151,6 @@
 
+            if (this.showLogKey && key.name === this.showLogKey) {
+                this.showLogPopup()
+            }
+
             if (change) {
@@ -123,12 +166,18 @@ this.layout.changeLayout()
                 if (Object.keys(this.widgetsCollection).length === 0) {
-                    if (this.layout.getSelected() === 1) {
-                        if (key.name === 'down') {
+                    if (key.name === 'down') {
+                        if (this.layout.getSelected() === 0) {
+                            this.layout.page1.decreaseScrollIndex()
+                        } else {
                             this.layout.page2.decreaseScrollIndex()
-                            this.refresh()
-                            return
-                        } else if (key.name === 'up') {
+                        }
+                        this.refresh()
+                        return
+                    } else if (key.name === 'up') {
+                        if (this.layout.getSelected() === 0) {
+                            this.layout.page1.increaseScrollIndex()
+                        } else {
                             this.layout.page2.increaseScrollIndex()
-                            this.refresh()
-                            return
                         }
+                        this.refresh()
+                        return
                     }
@@ -189,6 +238,17 @@ this.emit("keypressed", key)
      * @example CM.setHomePage(p)
+     * @deprecated since version 1.1.12 - Use setPage or setPages instead
      */
     setHomePage(page) {
-        this.homePage = page
-        this.layout.setPage1(this.homePage)
+        this.pages[0] = page
+        if (this.logLocation === 'popup') {
+            this.layout.setPage1(page)
+        } else if (typeof this.logLocation === 'number') {
+            if (this.logLocation === 0) {
+                this.layout.setPage2(page)
+            } else {
+                this.layout.setPage1(page)
+            }
+        } else {
+            this.layout.setPage1(page)
+        }
         this.refresh()
@@ -198,2 +258,64 @@ }
     /**
+     * @description This function is used to set a page of layout. It also refresh the screen.
+     * @param {PageBuilder} page - The page to set as home page.
+     * @param {number} [pageNumber] - The page number to set. 0 is the first page, 1 is the second page.
+     * @param {string} [title] - The title of the page to overwrite the default title. Default is null.
+     * @memberof ConsoleManager
+     * @example CM.setPage(p, 0)
+     */
+    setPage(page, pageNumber = 0, title = null) {
+        this.pages[pageNumber] = page
+        if (this.logLocation === 'popup') {
+            if (pageNumber === 0) {
+                this.layout.setPage1(this.pages[pageNumber])
+                if (title) this.layout.page1Title = title
+            } else {
+                this.layout.setPage2(this.pages[pageNumber])
+                if (title) this.layout.page2Title = title
+            }
+        } else if (typeof this.logLocation === 'number') {
+            if (this.logLocation === 0) {
+                this.layout.setPage2(this.pages[pageNumber])
+                if (title) this.layout.page2Title = title
+            } else {
+                this.layout.setPage1(this.pages[pageNumber])
+                if (title) this.layout.page1Title = title
+            }
+        } else {
+            if (pageNumber === 0) {
+                this.layout.setPage1(this.pages[pageNumber])
+                if (title) this.layout.page1Title = title
+            } else {
+                this.layout.setPage2(this.pages[pageNumber])
+                if (title) this.layout.page2Title = title
+            }
+        }
+        this.refresh()
+    }
+
+    /**
+     * @description This function is used to set both pages of layout. It also refresh the screen.
+     * @param {Array<PageBuilder>} pages - The page to set as home page.
+     * @memberof ConsoleManager
+     * @example CM.setPages([p1, p2], 0)
+     */
+    setPages(pages) {
+        this.pages = pages
+        if (this.logLocation === 'popup') {
+            this.layout.setPage1(this.pages[0])
+            this.layout.setPage2(this.pages[1])
+        } else if (typeof this.logLocation === 'number') {
+            if (this.logLocation === 0) {
+                this.layout.setPage2(this.pages[0])
+            } else {
+                this.layout.setPage1(this.pages[0])
+            }
+        } else {
+            this.layout.setPage1(this.pages[0])
+            this.layout.setPage2(this.pages[1])
+        }
+        this.refresh()
+    }
+
+    /**
      * @description This function is used to refresh the screen. It do the following sequence: Clear the screen, draw layout, draw widgets and finally print the screen to the stdOut.
@@ -214,2 +336,12 @@ * @memberof ConsoleManager
     /**
+     * @description This function is used to show a popup containing all the stdOut of the console.
+     * @memberof ConsoleManager
+     * @returns the instance of the generated popup.
+     * @example CM.showLogPopup()
+     */
+    showLogPopup() {
+        return new CustomPopup("logPopup", "Application Logs", this.stdOut, this.Screen.width - 12).show();
+    }
+
+    /**
      * @description This function is used to log a message. It is used to log messages in the log page. Don't add colors to the message.
@@ -265,3 +397,3 @@ * @param {string} message - The message to log.
         if (resetCursor) {
-            this.layout.page2.setScrollIndex(0)
+            this.stdOut.setScrollIndex(0)
         }
@@ -268,0 +400,0 @@ this.refresh()

No alert changes

Improved metrics

Total package byte prevSize

195660

8.84%

Lines of code

2617

9.36%

Number of lines in readme file

426

3.15%

No dependency changes