Gauge development - nothing on the screen but changing colors

Hey folks,

I’m having a lot of fun trying to get into the SDK and modifying some of the gauges. I’m trying to override the AS3X and able to change the body color, reload it using this amazing package but can’t for the life of me get anything to render that should appear in the “body” of the screen. No text, nada. Any help would be greatly appreciated.

<!DOCTYPE html><html><head>
<title>Test SVG</title>

<script src="/JS/coherent.js"></script>
<script src="/JS/common.js"></script>
<script src="/JS/debug.js"></script>

<script>
    var body = document.getElementById('body');
    console.log('hereererere');
    console.log('omg', body);
</script>

<style>
    @font-face {
        font-family: "Roboto-Bold";
        src: url("/Fonts/RobotoMono-Bold.ttf") format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    body {
        background-color: pink;
        color:black;
        font-size:80px;
}
#■■■ {
    position:absolute;
    background-color:bisque;
    top:0;
    left:0;
    color:white;
    width:100px;
    height:100px;
    font-size:800px;
}
</style>
</head>

<body>
    <div id="■■■">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mauris odio, semper sed lectus eu, consequat tincidunt ante. Suspendisse ornare dictum luctus. Nunc sodales purus sed ipsum varius, quis feugiat libero sollicitudin. Phasellus tincidunt malesuada condimentum. Donec gravida volutpat velit ac congue. Sed dignissim dui diam, cursus pretium lorem efficitur at. Aliquam at vulputate dolor. Morbi finibus elit ut dolor hendrerit, a finibus massa dignissim. Vivamus dignissim quis ipsum vel tincidunt. Phasellus sapien libero, faucibus congue faucibus quis, condimentum sed sapien. Nunc tellus tellus, dictum sit amet venenatis sit amet, ultricies at est. Suspendisse elementum vel nulla ac viverra. Cras scelerisque nunc nec tincidunt rutrum.

    Proin ut iaculis ante. Nulla vel mi erat. Ut maximus porttitor cursus. Nullam sit amet dolor non sapien venenatis semper ac sit amet nulla. Vestibulum lacinia sapien lectus, in pharetra lacus iaculis non. In aliquam neque lacus, eget elementum tellus dapibus sodales. Nam non finibus eros. Nullam molestie, libero ut egestas tincidunt, ex mi luctus ligula, nec faucibus nulla eros at magna. Integer finibus magna sed justo tristique vulputate. Donec sed magna vel ligula tempus congue et nec nibh. Fusce pulvinar vitae magna vitae ultricies. Donec mattis quam sapien, vel tincidunt nisi pellentesque eu. Donec a ligula a tortor pulvinar porttitor elementum et risus. Proin hendrerit non augue non auctor.
    
    In in ullamcorper urna. In est ligula, posuere congue egestas eu, lacinia in dui. Morbi libero orci, vulputate eget lorem id, rhoncus auctor nunc. Phasellus vehicula sapien nec lectus fermentum facilisis sit amet consequat magna. Fusce ac ex feugiat, eleifend nunc at, sagittis enim. Cras consequat sollicitudin lacus id congue. Nulla at est urna. Ut est nibh, volutpat volutpat vulputate in, interdum ut quam. Fusce lectus nunc, ullamcorper non turpis ut, molestie tempus risus. Quisque ut molestie tortor. Nullam in vestibulum dolor, sit amet suscipit magna. Phasellus at tortor bibendum, sodales lorem lacinia, malesuada nisi. Ut eu nulla pellentesque, luctus nunc vitae, tristique ligula. Sed a dapibus urna. Interdum et malesuada fames ac ante ipsum primis in faucibus.
     </div>
</body>
</html>

It looks like it is completely covering the simulator (??)

What if you don’t do a body tag or body style at all ? :smiley_cat: have you tried remove them

To be honest, there are alot of questions about it, but I haven’t seen any working examples for HTML addins… when you want to do something with SDK and instruments, C++ SDK features work, I’ve tested the Gauges Aircraft example today… It has a very big API and it is more complicated, but there are things in there you would not dream of.