purple-console

Javascript component that prints logs in a DIV layer. It can be useful when dealing with special hardware like Smart TVs or Set-Top Boxes that don't allow debugging.

Live example: http://subidote.com/purple-console/

1 Quick start

1.1 Download and Install purple-console

Yarn: yarn add purple-console
NPM: npm install purple-console
github: https://github.com/ajsoriar/purple-console

2 Include dependences

yarn add purple-console
# or
npm install purple-console

2.1 In your HTML

<script src="./node_modules/purple-console/src/purple-console.js"></script>

2.2 In your js code

<script>
    ajsrConsole.log("Hello world!");
</script>

2.3 Extra examples ready to copy and paste

<script>
    ajsrConsole.filterJSErrors();
    ajsrConsole.setLogAlias("debug");
    ajsrConsole.setBgColor("rgba(0,0,150,1)");
    ajsrConsole.setBorderColor("rgba(0,255,255,1)");
    ajsrConsole.setTextColor("rgba(255,255,255,1)");
    ajsrConsole.toggleOpacity();
    ajsrConsole.printTime();
    debug("CONSOLE");
    ajsrConsole.printTime(false);
    ajsrConsole.move("UP");
    ajsrConsole.move("LEFT");
    ajsrConsole.move("RIGHT");
    ajsrConsole.autoHeight();
    ajsrConsole.useColors();
    debug("CONSOLE color1", "yellow");
    ajsrConsole.printTime();
    ajsrConsole.useColors(false);
    debug("CONSOLE color2", "yellow");
    ajsrConsole.toggleOpacity();
    ajsrConsole.setSize(400,500);
    ajsrConsole.error("ERROR");
    ajsrConsole.success("SUCCESS");
    var myObj = {
        "1": "a-11",
        "2": "a-11",
        "3": {
            "b1": "b-11",
            "b2": "b-11",
            "b3": "b-11",
        }
    };
    debug.printObj(myObj);
</script>

3 Core functions

3.1 Printing on a div layer

By default all printing stuff will be done using one color

3.1 Printing text in color

ajsrConsole.usecolors();
ajsrConsole.debug("Message in color!", "yellow");

Some notes about colors

This console creates a div layer on every log operation when color mode is on. In some devices rendering more than 100 divs increases the response of the UI more and more til it becomes unmanageable. So you should reset the console from time to time.

ajsrConsole.cls(); //clear the console from time to time

Completely deactivate color

ajsrConsole.usecolors(false);

3.2 Change background color

ajsrConsole.setBgColor("rgba(0,0,150,1)");

3.3 Print JSON object

    var myObj = {
        "1": "a-11",
        "2": "a-11",
        "3": {
            "b1": "b-11",
            "b2": "b-11",
            "b3": "b-11",
        }
    };
    debug.printObj(myObj);

3.4 Set start points and LAPs

Used to do benchmarking and print the results in the console.

ajsrConsole.setLap("LAP TEXT!");

4 Complete list of available options

Methods	Default	Description
`init`	-	Resets the console to initila params.
`log`	-	Main functionality here.
`cls`	-	Clear the console.
`resetColors`	-	Go back to default colors.
`setLogAlias`	-	Use whatever instead of `ajsrConsole`.
`setBgColor`	-	Color of the background.
`setBorderColor`	-	Color of the border.
`setTextColor`	-	-
`move`	DOWN & LEFT	-
`moveNext`	-	-
`autoHeight`	-	Will toggle height from 33% and 66% of the available space.
`setSize`	number	-
`toggleOpacity`	-	Toggles opacity between 100% to 50%.
`useColors`	false	Allows the use of colors when doing `log`
`printTime`	false	-
`setParams`	-	-
`startTime`	-	-
`setLap`	-	-
`printLaps`	-	-
`filterJSErrors`	false	-
`printObj`	-	Prints a json object in a box. 1st param is a json. 2nd and 3rd (optional) are border and background colors.
`write`	-	-
`error`	-	-
`success`	-	-
`setMaxObjLength`	5	Increases the allowed print length.
`br`	-	Prints a blank line.
`setPrintStrategy`	timeout	1, 2 delayed by timestamp or 3 delayed by timeout
`hide`	-	Hides the console.
`show`	-	Shows the console.
`fontSize`	11	Sets the font size.
`preset`	-	Sets a group of configuration options useful in my day by day work.

5 Development

5.1 Install node

https://nodejs.org/es/

5.2 Install grunt globally

sudo npm install --unsafe-perm=true --allow-root
sudo npm install -g grunt-cli

5.3 Build

grunt build

6 License

purple-console is MIT licensed.

Free Software, Yeah!

purple-console
Release 1.2.7

Release 1.2.7

1.2.7

1.2.6

1.2.5

1.2.4

1.2.3

1.2.2

1.2.1

1.2.0

1.1.0

1.0.1

Documentation

purple-console

1 Quick start

1.1 Download and Install purple-console

2 Include dependences

2.1 In your HTML

2.2 In your js code

2.3 Extra examples ready to copy and paste

3 Core functions

3.1 Printing on a div layer

3.1 Printing text in color

Some notes about colors

3.2 Change background color

3.3 Print JSON object

3.4 Set start points and LAPs

4 Complete list of available options

5 Development

5.1 Install node

5.2 Install grunt globally

5.3 Build

6 License

Stats

Development practices

Releases

Contributors

purple-console Release 1.2.7

Release 1.2.7 Toggle Dropdown 1.2.7 1.2.6 1.2.5 1.2.4 1.2.3 1.2.2 1.2.1 1.2.0 1.1.0 1.0.1

Documentation

purple-console

1 Quick start

1.1 Download and Install purple-console

2 Include dependences

2.1 In your HTML

2.2 In your js code

2.3 Extra examples ready to copy and paste

3 Core functions

3.1 Printing on a div layer

3.1 Printing text in color

Some notes about colors

3.2 Change background color

3.3 Print JSON object

3.4 Set start points and LAPs

4 Complete list of available options

5 Development

5.1 Install node

5.2 Install grunt globally

5.3 Build

6 License

Stats

Development practices

Releases

Contributors

purple-console
Release 1.2.7

Release 1.2.7

1.2.7

1.2.6

1.2.5

1.2.4

1.2.3

1.2.2

1.2.1

1.2.0

1.1.0

1.0.1