[Feature] HTML Debug Layer

[msqaddura]

Hello,
I am working on a project where I ended up needing some kind of a debug layer to display some information on top of my DisplayObjects. console.log and break points do help in this case, but it is time consuming and as well have to keep trace on everything (filtering the logs, and using conditional breakpoints). Hence it made a lot of sense to create HTML div on top of my DisplayObjects with the information displayed inside. Of course it can be done using PIXI.Text but that would require to create a new Text object and make sure it has highest z order.

The simplest and straightforward solution was to use Accessibility as follows (steps 2 & 3 just in case someone wanted to try quickly) :

1. change the CSS to display the text of the title as shown below

button{
      background: rgba(40, 185, 230, 0.671)!important;
}

button::after{
      content: attr(title); /*take the content from the title*/
      color:white;
 }

2. I did what is needed for accessibility in my code

this.interactive = true; // otherwise accessibility manager would skip this
this.accessible = true;
this.accessibleTitle=`I:${this.i}  J:${this.j}`;

3. hit the Tab button anytime to enable accessibility

Achieved result is shown below:

This is a badass trick and it really helped me where needed. However, from an ethical and legal perspective, accessibility doesnt seem fair to be used as a debugging tool. Hence, I would say it might make sense to have a HTML debug layer for that purpose. + developers can always change CSS as per need.

[themoonrat]

I don't see the problem in using AccessibilityManager in creative ways. If it supplies what you need, then great!

[msqaddura]

Thanks for your reply,
Do you think it is worth making it a seperate feature? at least so we dont need to add interactive=true or shall it remain as is? from a rather subjective point of view, i would say it might be helpful for developers. or otherwise to spread it out we can add it to the gotchas page https://github.com/pixijs/pixi.js/wiki/v4-Gotchas
In order to propagate to other developers

[themoonrat]

Lemme know the exact wording for what you think we should add to the wiki and I'll add it. It'd be nice to come from you because you came here looking for an answer... so if the wording in the gotchas would have appealed to you and got you thinking, then that's what we want for other devs also coming to pixi thinking the same thing :)

The reason I'm ok with using AccessibilityManager as you are is because, in general, the less code to maintain, the better; so if you can have 1 thing that does what you want but it's named slightly wrong, i'd rather that then 2 things with twice the code that pretty much do the same thing

[msqaddura]

I understand the AccessibiltyManager part, and I do agree and happy with that.
As per the gotchas, I am sure developers would want at some point to use my approach, and apparently the only way to do so is to reference this thread in the gotchas. we did same thing with this :
https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#theres-no-anchor-on-non-sprite-objects
that references :
#3272 (comment)

Of course i can write this trick with accessibilitymanager on some forum/blog/post but the point is to help others not to get credit

[themoonrat]

Added! Thanks again :)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.