MaterialXOCIOClient Class Reference

Inheritance diagram for MaterialXOCIOClient:

Public Member Functions
	constructor (socketLibrary, server)
	convertTableToBootstrapRowCol (container)
	updateConfigInfo (message)
	updateMaterialXInfo (data)
	updateStatus (message, force=false)
	emitGetConfigInfo ()
	getMaterialXInfo ()
	handleServerConfigInfo (data)
	handleServerMaterialXInfo (data)
	handleServerVersionInfo (data)
	setupEventHandlers ()
	setupXML ()
Public Member Functions inherited from WebSocketClient
	constructor (socketLibrary, server)
async	initialize (socketLibrary, server)
	setupEventHandlers ()
	emit (message, data)
	constructor (socketLibrary, server)
async	initialize (socketLibrary, server)
	setupEventHandlers ()
	emit (message, data)
	constructor (socketLibrary, server)
async	initialize (socketLibrary, server)
	setupEventHandlers ()
	emit (message, data)

Detailed Description

Definition at line 3 of file materialx_ocio_app.js.

Member Function Documentation

constructor()

MaterialXOCIOClient::constructor	(		socketLibrary,
			server )

Definition at line 4 of file materialx_ocio_app.js.

                                       {
        // Call parent to setup socket I/O.
        super(socketLibrary, server);
 
        // Do other setup
        this.materialXEditor = null;
        this.materialXEditor_impl = null;
        this.materialXEditor_source = null;
    }

convertTableToBootstrapRowCol()

MaterialXOCIOClient::convertTableToBootstrapRowCol

(

container

)

Definition at line 14 of file materialx_ocio_app.js.

                                             {
        // Modify the table to make it scrollable using Bootstrap classes
        const tables = container.querySelectorAll('table');
        tables.forEach(table => {
            // Add Bootstrap table classes
            table.classList.add('table', 'table-dark', 'table-bordered', 'table-hover', 'table-striped');
 
            // Wrap the table in a div with Bootstrap's 'overflow-auto' class
            const wrapperDiv = document.createElement('div');
            wrapperDiv.classList.add('overflow-auto');
            wrapperDiv.style.maxWidth = '100%';
            wrapperDiv.style.maxHeight = '300px';
 
            // Move the table inside the wrapper div
            table.parentNode.insertBefore(wrapperDiv, table);
            wrapperDiv.appendChild(table);
 
            // Add a Bootstrap color class to the table header
            const thead = table.querySelector('thead');
            const headerColorClass = 'table-primary'; 
            if (thead) {
                thead.classList.add(headerColorClass);
            } else {
                const firstRow = table.querySelector('tr');
                if (firstRow) {
                    firstRow.classList.add(headerColorClass); 
                }
            }
        });
    }

emitGetConfigInfo()

MaterialXOCIOClient::emitGetConfigInfo

(

)

Definition at line 106 of file materialx_ocio_app.js.

                        {
        this.updateStatus("Emit client_event_get_config_info event");
        this.emit('client_event_get_config_info', { message: "event 1" });
    }

getMaterialXInfo()

MaterialXOCIOClient::getMaterialXInfo

(

)

Definition at line 111 of file materialx_ocio_app.js.

                       {
        this.updateStatus("Emit client_event_get_materialx_info event");
        let checkbox_nodegraphs = document.getElementById('checkbox_nodegraphs').checked
        this.emit('client_event_get_materialx_info', 
            { 
                nodegraphs: checkbox_nodegraphs 
            }
        );
    }

handleServerConfigInfo()

MaterialXOCIOClient::handleServerConfigInfo

(

data

)

Definition at line 121 of file materialx_ocio_app.js.

                                 {
        this.updateStatus("Received server config info");
        this.updateConfigInfo(data.message);
    }

handleServerMaterialXInfo()

MaterialXOCIOClient::handleServerMaterialXInfo

(

data

)

Definition at line 126 of file materialx_ocio_app.js.

                                    {
        this.updateStatus("Received server materialx info");
        this.updateMaterialXInfo(data);
    }

handleServerVersionInfo()

MaterialXOCIOClient::handleServerVersionInfo

(

data

)

Definition at line 131 of file materialx_ocio_app.js.

                                  {
        this.updateStatus("Received server version info");
 
        const ocio_version = document.getElementById('ocio_version');
        const ocio_image = '<img src="https://opencolorio.org/images/ocio_m2x.png" width="48px"></img>';
        ocio_version.innerHTML = ocio_image + ' version: ' + data.ocio_version;
 
        const materialx_version = document.getElementById('materialx_version');
        const mtlx_image = '<img src="https://materialx.org/LogoImages/MaterialXLogo2K.png" width="48px">';
        materialx_version.innerHTML = mtlx_image + ' version: ' + data.materialx_version;
    }   

setupEventHandlers()

MaterialXOCIOClient::setupEventHandlers

(

)

Definition at line 143 of file materialx_ocio_app.js.

                         {
        // Setup clear status button
        document.getElementById('clear_status').addEventListener('click', () => {
            this.updateStatus('Status', true);
        });
 
        document.getElementById('button_event_get_config').addEventListener('click', () => {
            this.emitGetConfigInfo();
        });
 
        document.getElementById('button_event_get_materialx').addEventListener('click', () => {
            this.getMaterialXInfo();
        });
 
 
        // Set up socket message event handlers
        this.webSocketWrapper = new WebSocketEventHandlers(this.socket, {
            status_message: (data) => { console.log('WEB: status event:', data.message); this.updateStatus(data.message) },
            server_message_get_config_info: (data) => { this.handleServerConfigInfo(data) },
            server_message_get_mtlx_info: (data) => { this.handleServerMaterialXInfo(data) },
            server_message_version_info: (data) => { this.handleServerVersionInfo(data) }
        });
 
        this.emit('client_event_get_version_info');
    }

setupXML()

MaterialXOCIOClient::setupXML

(

)

Definition at line 169 of file materialx_ocio_app.js.

               {
        // Initialize CodeMirror for MaterialX content
        const materialX_nodedef = document.getElementById('materialX_nodedef');
        this.materialXEditor = CodeMirror.fromTextArea(materialX_nodedef, {
            mode: 'application/xml',
            lineNumbers: true,
            theme: 'dracula',
        });
        this.materialXEditor.setSize('auto', '300px');
 
        /*
        const materialX_impl = document.getElementById('materialX_nodedef');
        this.materialXEditor_impl = CodeMirror.fromTextArea(materialX_impl, {
            mode: 'application/xml',
            lineNumbers: true,
            theme: 'dracula',
        });
        this.materialXEditor_impl.setSize('auto', '100px');
        //this.materialXEditor_impl.setDisplay('none')
 
        const materialx_source = document.getElementById('materialx_source');
        this.materialXEditor_source = CodeMirror.fromTextArea(materialx_source, {
            mode: 'application/xml',
            lineNumbers: true,
            theme: 'dracula',
        });
        this.materialXEditor_source.setSize('auto', '100px');
        //this.materialXEditor_source.setDisplay('none')
        */
    }

updateConfigInfo()

MaterialXOCIOClient::updateConfigInfo

(

message

)

Definition at line 45 of file materialx_ocio_app.js.

                              {
        const html = marked.parse(message);
        const configDOM = document.getElementById('config_info')
        configDOM.innerHTML = html;
        this.convertTableToBootstrapRowCol(configDOM);
    }

updateMaterialXInfo()

MaterialXOCIOClient::updateMaterialXInfo

(

data

)

Definition at line 52 of file materialx_ocio_app.js.

                              {
        console.log('Nodedef:\n',
            data.nodedef_string, "\nImpl: ",
            data.impl_string, "\nSource: ",
            data.source_string
        );
 
        this.materialXEditor.setValue(data.nodedef_string);
 
        let elem = document.getElementById('materialX_impl');
        let content = data.impl_string;
        if (content)
        {
            content = content.replace(/^\s*[\r\n]+|[\r\n]+\s*$/g, '');
            elem.style.display = 'block'
            elem.value = content;
            const lines = content.split(/\r?\n/);
            if (lines.length < 30)
                elem.rows = lines.length;
            else
                elem.rows = 30;
        }
        else {
            elem.style.display = 'none'
        }
 
        elem = document.getElementById('materialX_source')
        content = data.source_string;
        if (content)
        {
            content = content.replace(/^\s*[\r\n]+|[\r\n]+\s*$/g, '');
            elem.style.display = 'block'
            elem.value = content;
            const lines = content.split(/\r?\n/);
            if (lines.length < 10)
                elem.rows = lines.length;
            else
                elem.rows = 10;
        }
        else {
            elem.style.display = 'none'
        }
    }

updateStatus()

MaterialXOCIOClient::updateStatus	(		message,
			force = false )

Definition at line 96 of file materialx_ocio_app.js.

                                         {
        const inputDOM = document.getElementById('status_message');
        if (inputDOM.value == 'Status' || force)
            inputDOM.value = message
        else
            inputDOM.value += '\n' + message
        // Scroll to the bottom of the textarea
        inputDOM.scrollTop = inputDOM.scrollHeight;
    }

---

The documentation for this class was generated from the following file:

• materialx_ocio_app.js