Skip to content

Display axis bar including digital value. #10

@NorioFujii

Description

@NorioFujii

Thank you awesome example program.
I have changed axis bar too convinient.

To display Axis bar including digital number value, add CSS.

.axis::before {
min-height: 14px;
content: attr(num);
color: red;
vertical-align: text-top;
font-size: x-small;
font-weight: bold;
margin-left: 3px;
}

And rewrite part of addgamepad function for "num" attribute,

var b = $("<div class='buttons'>");
for (var i=0; i<gamepad.buttons.length; i++) {
var e = $("<span class='button'>"+i+"</span>");
b.append(e);
}
d.append(b);
var a = $("<div class='axes'>");
for (i=0; i<gamepad.axes.length; i++) {
e = $("<progress class='axis'>",{"max":"2","value":"1","num":"ax"+i});
a.append(e);
}
d.append(a);
document.body.appendChild(d[0]);
rAF(updateStatus);

And updatestatus function too,
var a = axes[i];
a.setAttribute("max", "2");
a.setAttribute("num", "ax"+i+ ": " + controller.axes[i].toFixed(4));
a.setAttribute("value", controller.axes[i] + 1);

Thank you.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions