MaterialX_GPUOpen_Client Class Reference

Inheritance diagram for MaterialX_GPUOpen_Client:

Public Member Functions
	constructor (socketLibrary, server)
	findMaterialByName (name)
	updateStatusInput (message, force=false)
	handleMaterialXDownLoad (data)
	handleMaterialXExtract (data)
	extractMaterials ()
	downloadMaterials ()
	setupEventHandlers ()
	setupXML ()
	populateForm (data)
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 MaterialXGPUOpenClient.js.

Member Function Documentation

constructor()

MaterialX_GPUOpen_Client::constructor	(		socketLibrary,
			server )

Definition at line 5 of file MaterialXGPUOpenClient.js.

                                       {
        // Call parent to setup socket I/O.
        super(socketLibrary, server);
 
        this.editor = null;
        this.extractedEditor = null;
        this.materialsList = [];
        this.materialNames = [];
        this.materialCount = 0;
 
        // Bind class methods to `this`
        this.findMaterialByName = this.findMaterialByName.bind(this);
        this.populateForm = this.populateForm.bind(this);
        this.setupEventHandlers = this.setupEventHandlers.bind(this);
        this.setupXML = this.setupXML.bind(this);
 
        // Setup XML editors
        this.setupXML();
    }

downloadMaterials()

MaterialX_GPUOpen_Client::downloadMaterials

(

)

Definition at line 184 of file MaterialXGPUOpenClient.js.

                        {
        console.log("WEB: Emitting download_materialx event");
        this.emit('download_materialx', {});
    }

extractMaterials()

MaterialX_GPUOpen_Client::extractMaterials

(

)

Definition at line 176 of file MaterialXGPUOpenClient.js.

                       {
        const materialSelect = document.getElementById('materialSelect');
        const update_mtlx = document.getElementById('update_mtlx').checked;
        let selectedItem = materialSelect.options[materialSelect.selectedIndex].text;
        console.log("WEB: Emitting extract_material event");
        this.emit('extract_material', { expression: selectedItem, update_materialx: update_mtlx });
    }

findMaterialByName()

MaterialX_GPUOpen_Client::findMaterialByName

(

name

)

Definition at line 26 of file MaterialXGPUOpenClient.js.

                             {
        let foundMaterial = null;
 
        for (const element of this.materialsList) {
            let resultsArray = JSON.parse(element).results;
            if (resultsArray) {
                for (const result of resultsArray) {
                    if (result.title === name) {
                        foundMaterial = result;
                        //console.log('>>>>>>>>>> Found Material:', result.title);
                        this.populateForm(result);
                        return foundMaterial;
                    }
                }
            }
        }
        return null; // Return null if no match is found
    }

handleMaterialXDownLoad()

MaterialX_GPUOpen_Client::handleMaterialXDownLoad

(

data

)

Definition at line 56 of file MaterialXGPUOpenClient.js.

    {
        console.log('WEB: materialx downloaded event:', data);
        this.materialCount = data.materialCount;
        this.materialsList = data.materialsList;
        this.materialNames = data.materialNames;
 
        if (this.materialCount > 0) {
            let listString = '';
            for (const element of this.materialsList) {
                listString += element + '\n';
            }
            this.editor.setValue(listString);
 
            // Populate the material select dropdown
            const materialSelect = document.getElementById('materialSelect');
            materialSelect.innerHTML = ''; // Clear existing options
            this.materialNames.forEach((name, index) => {
                const option = document.createElement('option');
                option.value = index + 1;
                option.text = name;
                materialSelect.appendChild(option);
            });
 
            // Populate the form with the first material
            const firstMaterial = JSON.parse(this.materialsList[0]).results[0];
            if (firstMaterial) {
                this.populateForm(firstMaterial);
            }
        }        
    }

handleMaterialXExtract()

MaterialX_GPUOpen_Client::handleMaterialXExtract

(

data

)

Definition at line 88 of file MaterialXGPUOpenClient.js.

    {
        console.log('WEB: materialx extracted event:', data.extractedData);
        const extractedData = data.extractedData[0];
        const title = extractedData.title;
        console.log('Title:', title);
 
        const dataObj = extractedData.data;
        const imageDOM = document.getElementById('extracted_images');
        imageDOM.innerHTML = ''; // Clear existing images
 
        const mtlxDOM = document.getElementById('extracted_mtlx');
        this.extractedEditor.setValue('');
 
        // Extract MTLX and images out. 
        // Optionally save zip of data to file.
        let save_extracted = document.getElementById('save_extracted').checked;
        let zip = save_extracted ? new JSZip() : null;
        for (const key in dataObj) {
            if (key.endsWith('.mtlx')) {
                this.extractedEditor.setValue(dataObj[key]);
                // Add the extracted MaterialX file to the zip
                if (zip)
                    zip.file(key, dataObj[key]);
            } else {
                const base64String = dataObj[key];
                const binary = atob(base64String);
                const array = new Uint8Array(binary.length);
                for (let i = 0; i < binary.length; i++) {
                    array[i] = binary.charCodeAt(i);
                }
                const extension = key.split('.').pop();
                const blob = new Blob([array], { type: `image/${extension}` });
                const url = URL.createObjectURL(blob);
 
                // Create a container for the image and label
                const imageContainer = document.createElement('div');
                imageContainer.style.display = 'inline-block';
                imageContainer.style.margin = '10px';
                imageContainer.style.textAlign = 'center'; // Center the label under the image
                
                // Create the image element
                const img = document.createElement('img');
                img.src = url;
                img.width = 200;
                img.alt = key;
                
                // Add the key as a tooltip
                img.title = key; 
                
                // Create a label for the image
                const label = document.createElement('div');
                label.innerText = key;
                label.style.fontSize = '0.8rem'; 
                //label.style.color = '#FFF'; // 
                
                // Append the image and label to the container
                imageContainer.appendChild(img);
                imageContainer.appendChild(label);
                
                // Append the container to the image DOM
                imageDOM.appendChild(imageContainer);
 
                // Convert the blob to a file and add it to the zip
                if (zip)
                {
                    const imgFile = new File([blob], key, { type: 'image/${extension}' });
                    zip.file(key, imgFile);
                }
            }
        }
 
        // Create the zip file asynchronously
        if (zip)
        {
            zip.generateAsync({ type: 'blob' }).then(function(content) {
                // Create a download link for the zip file
                const link = document.createElement('a');
                link.href = URL.createObjectURL(content);
                link.download = title + '.zip'; // Set the name of the zip file
                link.click(); // Trigger the download
            })
            .catch(function(error) {
                console.error('Error creating zip file:', error);
            });           
        }        
    }

populateForm()

MaterialX_GPUOpen_Client::populateForm

(

data

)

Definition at line 240 of file MaterialXGPUOpenClient.js.

                       {
        document.getElementById('m_title').value = data.title || '';
        document.getElementById('author').value = data.author || '';
        const pdate = data.published_date || '';
        if (pdate) {
            const date = new Date(pdate);
            const offset = date.getTimezoneOffset();
            const localDate = new Date(date.getTime() - offset * 60 * 1000);
            const formattedDate = localDate.toISOString().slice(0, 16);
            document.getElementById('published_date').value = formattedDate;
        }
        document.getElementById('mtlx_filename').value = data.mtlx_filename || '';
        document.getElementById('category').value = data.category || '';
        document.getElementById('status').value = data.status || 'Unpublished';
        document.getElementById('tags').value = data.tags ? data.tags.join(', ') : '';
        document.getElementById('packages').value = data.packages ? data.packages.join(', ') : '';
        document.getElementById('renders').value = data.renders ? data.renders.join(', ') : '';
        document.getElementById('description').value = data.description || '';
    }

setupEventHandlers()

MaterialX_GPUOpen_Client::setupEventHandlers

(

)

Definition at line 189 of file MaterialXGPUOpenClient.js.

                         {
        // Setup clear status button
        document.getElementById('clear_status').addEventListener('click', () => {
            this.updateStatusInput('Status', true);
        });
 
        // Bind "Extract Material" button click
        document.getElementById('extract_material').addEventListener('click', () => {
            this.extractMaterials();
        });
 
        // Bind "Download MaterialX" button click
        document.getElementById('getMTLXButton').addEventListener('click', () => {
            this.downloadMaterials();
        });
 
        // Set up socket message event handlers
        this.webSocketWrapper = new WebSocketEventHandlers(this.socket, {
            materialx_status: (data) => { console.log('WEB: materialx status event:', data.message); this.updateStatusInput(data.message) },
            materialx_downloaded: (data) => { this.handleMaterialXDownLoad(data) },
            materialx_extracted: (data) => { this.handleMaterialXExtract(data) }
        });
 
        // Update material selection
        document.getElementById('materialSelect').addEventListener('change', () => {
            const materialSelect = document.getElementById('materialSelect');
            const selectedItem = materialSelect.options[materialSelect.selectedIndex].text;
            this.findMaterialByName(selectedItem);
        });
    }

setupXML()

MaterialX_GPUOpen_Client::setupXML

(

)

Definition at line 220 of file MaterialXGPUOpenClient.js.

               {
        // Initialize CodeMirror for MaterialX content
        const materialXTextArea = document.getElementById('mtlxOutput');
        this.editor = CodeMirror.fromTextArea(materialXTextArea, {
            mode: 'application/json',
            lineNumbers: true,
            theme: 'dracula',
        });
        this.editor.setSize('auto', '300px');
 
        // Initialize CodeMirror for extracted MaterialX content
        const materialXTextArea2 = document.getElementById('extracted_mtlx');
        this.extractedEditor = CodeMirror.fromTextArea(materialXTextArea2, {
            mode: 'application/xml',
            lineNumbers: true,
            theme: 'dracula',
        });
        this.extractedEditor.setSize('auto', '300px');
    }

updateStatusInput()

MaterialX_GPUOpen_Client::updateStatusInput	(		message,
			force = false )

Definition at line 45 of file MaterialXGPUOpenClient.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:

• MaterialXGPUOpenClient.js