Granim Console

granim-console.markdown

Granim Console

This is a demonstration of how to visualize the contents of console.log inside an HTML tag (including JavaScript errors).

Using the Granim.js gradient animation library, I was able to create an infinite loop of data logged to the console every 5 seconds using callbacks available from the API... then displayed with a little flair.

A Pen by Mark Hillard on CodePen.

License.

index.html

<canvas id="canvas"></canvas>
<p><a id="clear" href="#">&times;</a></p>
<div id="log"></div>

script.js

// visualize log
function consoleLog() {
    var origin = console.log;
    console.log = function (msg) {
        origin(msg);
        $('#log').append('<p>' + msg + '</p>');
        $('#log p:not(".loaded")').hide().addClass('loaded').fadeIn(200);
    }
    window.onerror = function (message, url, linenumber) {
        console.log(message + ' on line ' + linenumber + ' from ' + url);
    }
}

// clear log
function clearLog() {
    $('#clear').on('click', function (e) {
        e.preventDefault();
        $('#log p').remove();
    });
}

$(document).ready(function () {
    // logging functionality
    consoleLog();
    clearLog();
    
    // run granim.js
    var granimInstance = new Granim({
        element: '#canvas',
        name: 'granim',
        elToSetClassOn: 'body',
        direction: 'diagonal',
        isPausedWhenNotInView: true,
        opacity: [1, 1],
        stateTransitionSpeed: 1000,
        states: {
            'default-state': {
                gradients: [
                    ['#834d9b', '#d04ed6'],
                    ['#1cd8d2', '#93edc7']
                ],
                transitionSpeed: 5000,
                loop: true
            },
            'next-state': {
                gradients: [
                    ['#757f9a', '#d7dde8'],
                    ['#5c258d', '#4389a2']
                ],
                transitionSpeed: 5000,
                loop: true
            }
        },
        onStart: function () {
            console.log('Granim: onStart');
            console.log('&middot;&middot;&middot;');
        },
        onGradientChange: function (colorDetails) {
            console.log('Granim: onGradientChange');
            console.log('Colors From: ' + colorDetails.colorsFrom);
            console.log('Colors To: ' + colorDetails.colorsTo);
            console.log('&middot;&middot;&middot;');
        },
        onEnd: function () {
            console.log('Granim: onEnd');
            console.log('&middot;&middot;&middot;');
        }
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/1.0.6/granim.min.js"></script>

style.css

/* General */

@import url("//fonts.googleapis.com/css?family=Source+Code+Pro:200,700");

html,body {
background-color:#000;
color:#fff;
font-family:"Source Code Pro", monospace;
height:100%;
line-height:1.15;
overflow:auto;
}

*,::before,::after {
box-sizing:border-box;
}

:focus {
outline:none;
}


/* Console Log */

#canvas {
bottom:0;
display:block;
height:100%;
left:0;
position:absolute;
right:0;
top:0;
width:100%;
}

#log {
display:block;
padding:2rem;
position:relative;
}

#log p {
font-size:1.653rem;
}

#clear {
background-color:#fff;
border-radius:2px;
box-shadow:1px 2px 2px rgba(0,0,0,.2);
color:#666;
cursor:pointer;
display:inline-block;
font-size:2rem;
font-weight:700;
margin:2rem 0 0 2rem;
padding:.25rem .9rem;
position:relative;
text-decoration:none;
transition:color 200ms ease-in-out;
z-index:1;
}

#clear:hover {
color:#000;
}

#clear:active {
box-shadow:1px 1px 1px rgba(0,0,0,.2);
top:1px;
}