{
JDX
}
JS
DOM
Index


PIXY Browser renders web page view by converting HTML code into bitmap image. JDX is prototype of a system where display units, connected to controller PC through USB ports, present simultaneous cast of dynamic, interactive web content without employ of a video card.



The framework is under development and this site is frequently updated.




Loading..

How it works



Launch JDX instance

new JDX({
    callback: JS function,         // called after async loading
    container: DOM element,        // container element
    template: url path,            // HTML file
    pixy: {                        // when specified the template
                                   // is rendered in PIXY emulator
                                   // otherwise in user browser
        height: H,                 // PIXY width in pixels
        width: W,                  // height
        type: "matrix* | canvas",  // matrix of DIV elements
                                   // or HTML CANVAS
        zoom: Z                    // floating point zoom setting
    }
})
        


Example

index.html

<!-- index.html - URL of navigated web page -->

<BODY>
    DEMO:
    <DIV id="demo">
    </DIV>
</BODY>

<SCRIPT>
// parameter "pixy" not specified
// renders client.html in user browser

new JDX({
    container: document.getElementById('demo'),
    template: './client.html',
})
</SCRIPT>

client.html

<!-- displayed in user browser -->

<!-- controller class .js -->
<SCRIPT src="./client.js"></SCRIPT>

PIXY Browser:
<DIV id="pixy"></DIV>
<DIV onclick="reset()">Reset zoom</DIV>

client.js

// controller class of client.html
// event handlers of elements in user browser

class CTRL {

    constructor () {

        container = document.getElementById('pixy')

        // logs "true"
        console.log(container === this.elements.pixy)

        this.pixy = new JDX({
            container: container,
            pixy: {
                height: 240,
                width: 320
            },
            template: './pixy.html'
        })

    }

    reset = () {

        this.pixy.zoom = 1

    }

}

pixy.html

<!-- displayed in embedded PIXY Browser emulator -->

<SCRIPT src="./pixy.js"></SCRIPT>

<BODY>
    View of HTML rendered as image bitmap
    <DIV id="test"></DIV>
    <DIV onclick="test()">Click<DIV>
</BODY>

pixy.js

// controller class of pixy.html
// event handlers of elements in PIXY browser

class CTRL {

    test = () {

        // getElementById is not available in PIXY emulator

        this.elements.test.innerHTML = 'Hello World'

    }

}


PIXY Bitmap

// RGB0 .. RGBl - color set, l = number of colors
// Y0 .. Ym     - horizontal lines, m = height
// X0 .. Xn     - vertical lines, n = width

{
    '#RGB0': {
        Y0: [X0,.. Xn],..
        Ym: [..]
    },..
    '#RGBl': {..}
}


External publication: High Scalability




Last update: Jan 2020

© sergei.sheinin@gmail.com