Debugging into the app

315

Sometimes you just do not want to fight, do not want to think about new frameworks, new libraries, new standards or specifications of code. All you want is to be consistent and continue working on the basis that you know.

You debug an application on the Smart TV becomes very simple with tools like jsconsole, console.re or weinre, but if this is a problem in your organization there is a little more direct, though less robust and less elegant alternative. We will print results on the same interface of your application. We want to create something similar (visually) to the aforementioned tools console.

Let’s start with a blank web application for Smart TV, I already have prepared a sample application:

Debugging-Smarttv-into-app-BlankApp

To create the visual part of our “console” in an HTML file of your application writes the following tags:

In a CSS stylesheet writes the following rules:

.logger {
 position: absolute;
 top: 40px;
 left: 40px;
 width: 1200px;
 height: 640px;
 z-index: 5;
 background-color: rgba(25, 25, 25, 0.93);
 color: white;
 overflow: hidden;
}

.logger > div {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 1200px;
 height: 640px;
 padding: 0px15px;
 box-sizing: border-box;
}

.logger > div span {
 font-family: Consolas;
 color: white;
 display: block;
}

.logger > div span::before {
 content: ". ";
}

Launch your application for Smart TV, you should see something like this:

Debugging-Smarttv-into-app-ConsoleLikeTool

 

It is more or less the look you want to achieve. Not your HTML and can edit CSS code until the appearance of your console to your liking.

Now let’s create some functions in JavaScript to manipulate our “console”. To print on it we will create the printOnLog function that contains the following code fragment:

functionprintOnLog (string) { 
 // We create a span node and append it to our logger
    varlogger = document.querySelector(".logger > div");
    varspan = document.createElement("span");
    span.innerHTML = string;
    logger.appendChild(span);
    console.log(string);
}

Use the function somewhere in your application, I’ll print something in the onload event and when pressing keys on the TV:

Main.onLoad = function() {
 // Bind Keys to anchor events.
 document.getElementById("anchor").focus();
 widgetAPI.sendReadyEvent();
 printOnLog("Hello World!");
};

Main.keyDown = function() {
 varkeyCode = event.keyCode;
 printOnLog("Key pressed: "+ keyCode);
 switch(keyCode) {
 casetvKey.KEY_LEFT:
 printOnLog("You just pressed LEFT");
 break;
 casetvKey.KEY_RIGHT:
 printOnLog("You just pressed RIGHT");
 break;
 }
};

When you open our app we get something like this:

Debugging-Smarttv-into-app-PrintingOnAppExample

Play with your application and continues to print text on the screen in my case will press the LEFT and RIGHT keys:

Debugging-Smarttv-into-app-Console_Example

We can see that our method is working printOnLog, however if you printed a lot of text (as I did above) you will notice a small detail, the text is out of the container and can not display it.

Through transitions in CSS we can make our container perform a sweep down, as this action will perform at runtime need a place to put these rules, we will begin creating a new label styles in the application:

var styleSheet;

Main.onLoad = function() {
 // Bind Keys to anchor events.
 document.getElementById("anchor").focus();
 widgetAPI.sendReadyEvent();

// Create style element via Javascript
 varstyleNode = document.createElement("style");
 document.head.appendChild(styleNode);
 styleSheet = styleNode.sheet;
};

Now when using the instruction styleSheet.insertRule can insert new CSS rules to modify tags in the markup. One of the CSS rules that we use is -webkit-transform: translateY to sweep down.

Now we just need the function to sweep:

functionscrollDownLogContent () {
 varlogger = document.querySelector(".logger > div");

// We calculate our logger height
 varloggerHeight = logger.offsetHeight;
 
 // We calculate our logger content height
 varspans = logger.getElementsByTagName("span");
 varspanHeight = spans[0].offsetHeight;
 varspansHeight = spans.length * spanHeight;

vartranslation = loggerHeight - spansHeight;
 
 // If the logger content is bigger than itself, we make an horizontal translation
 if(spansHeight > loggerHeight) {
 if(styleSheet.cssRules.length > 0) {
 styleSheet.deleteRule(styleSheet.cssRules.length - 1);
 }
 styleSheet.insertRule(".logger > div { -webkit-transform: translateY("+ translation +"px); }", styleSheet.cssRules.length);
 }
}

 

ScrollDownLogContent calculates the length of our container relative to throughout the content, if the content is greater insert our rule css to make the sweep. You have to add this feature to printOnLog to check forever swept:

function printOnLog (string) {
 // If needed, we scrolldown our log content
 scrollDownLogContent();
 
 // We create a span node and append it to our logger
 var logger = document.querySelector(".logger > div");
 var span = document.createElement("span");
 span.innerHTML = string;
 logger.appendChild(span);
 console.log(string);
}

Test your application again to check that the scanning function, if so’ll notice how the text is walking up whenever the container is filled.

Let’s add a final touch, not always going to want to see our “console” so we will add a feature to show and hide. First, in our CSS code let’s modify a bit the rule .logger removing the visibility of the container:

.logger {
 position: absolute;
 top: 40px;
 left: 40px;
 width: 1200px;
 height: 640px;
 z-index: 5;
 background-color: rgba(25, 25, 25, 0.93);
 color: white;
 overflow: hidden;
 visibility: hidden;
}

Let’s add a new rule that allows us to make visible again .logger:

.logger.visible{
 visibility: visible;
}

If you launch the app now will notice that our console no longer displays on screen, this is because the visibility was marked as hidden, we need to add visible class to our label logger to see her again, I would like to control this function with the remote control of the TV so I’ll do a function for this:

And I’ll add my function keys to control:

Main.keyDown = function() {
 varkeyCode = event.keyCode;
 printOnLog("Key pressed: "+ keyCode);


 switch(keyCode) {
 casetvKey.KEY_LEFT:
 printOnLog("You just pressed LEFT");
 break;
 casetvKey.KEY_RIGHT:
 printOnLog("You just pressed RIGHT");
 break;
 casetvKey.KEY_RED:
 printOnLog("You just pressed RED");
 toggleLog();
 }
}

Now launch the application to see how it is possible to show and hide the console by simply pressing a button.

NOTICE: Although this is a way to print information on the screen to debug applications, it is certainly not the only or the best way to do it. The code presented is only sample code, most likely will work, but it can be improved in many ways: by encapsulating functions to reduce global, reducing the number of operations markup, adding functionality, etc. Again, we recommend use tools for this purpose.

jsconsole, console.re, weinre; but if this works for you, is an option to your repertoire of tools.

NO COMMENTS

LEAVE A REPLY

17 − seven =