Skip to content

Commit

Permalink
Add resizable top portion. Split rendering from conversion.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kwokcb
kwokcb committed Jan 23, 2025
1 parent 4be8fa9 commit 887c588
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 32 deletions.
2 changes: 1 addition & 1 deletion flask/converters/static/js/MaterialXConversionApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export class MaterialX_Conversion_Client extends WebSocketClient {
// Copy the content from CodeMirror back to the textarea
materialXTextArea.value = this.editor.getValue();
});
this.editor.setSize('auto', '300px');
this.editor.setSize('auto', '40em');

///////////////////////////////////////////////////////////////////////////////

Expand Down
214 changes: 183 additions & 31 deletions flask/converters/templates/MaterialXConversionApp.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -14,59 +15,119 @@

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/json/json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/json/json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>

<style>
.CodeMirror {
font-size: 11px;
border: solid thin lightskyblue;
height: 50em;
}
</style>

<style>
/* Parent container to hold columns and resizer */
.resizable-container {
display: flex;
width: 100%;
}

/* Left and right columns */
.resizable-column {
flex-grow: 0;
/* Disable flex-grow to allow explicit width */
flex-shrink: 0;
/* Prevent shrinking */
overflow: hidden;
padding: 10px;
border: 1px solid skyblue;
}

/* Resizer element */
.resizer {
width: 10px;
cursor: ew-resize;
background-color: #dbdbdb;
position: relative;
}

/* Vertical line in the resizer for better visibility */
.resizer::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: 1px solid #ccc;
}
</style>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!--StyleEnd-->
</head>

<body>
<!--Begin-->
<div class="container-fluid p-2">
<h2 id="title">MaterialX Conversion App</h2>

<p style="font-size: 12px">Sample application used to support glTF node graph / MaterialX / OpenUSD interop
testing and site deployment. OpenUSD conversion uses usd-core and
custom code to generate a simplified USD document (*). glTF Texture Procedural
conversion uses the library found <a href="https://github.com/KhronosGroup/glTF-MaterialX-Converter"
target="_blank">here</a>
<br>
<sub>(*) Note that synchronization of USD to MaterialX 1.39
is the target.</sub>
<!--Begin-->
<div class="container-fluid p-4">
<h2 id="title">MaterialX Server Rendering</h2>
<p style="font-size: 12px">
Sample showing rendering of the document using the C++ MaterialxView
core utility.
</p>
<div class="row p-2">
<div class="col-sm p-2 border">
<button id="getMTLXButton" class="btn btn-sm btn-primary">Load MaterialX</button>
<textarea id="mtlxOutput" rows="20" cols="100%"></textarea>
<div id="resizableTopContainer" class="resizable-container" style="display:none">
<div class="resizable-column" id="leftCol">
<button id="getMTLXButton_RS" class="btn btn-sm btn-primary">Load MaterialX</button>
<textarea id="mtlxOutput_RS" rows="100%" style="width: 100%;"></textarea>
</div>

<div class="resizer" id="resizer"></div>

<div class="resizable-column" id="rightCol" style="flex: 1 1 auto;">
<button id="renderMTLXButton_RS" class="btn btn-sm btn-primary">Render Reference Image</button>
<img src="" class="img-fluid" id="mtlxImage_RS" alt="MaterialX Image" width=100% style="display: none;">
</div>
</div>
<div class="row p-2">
<div class="col-sm p-2 border">
<button id="renderMTLXButton" class="btn btn-sm btn-primary">Render Reference Image</button>
<img src="" id="mtlxImage" alt="MaterialX Image" style="display:none; width: 100%">

<div id="nonResizableTopContainer" style="display:block">
<div class="row p-2">
<div class="col-sm p-2 border">
<button id="getMTLXButton_NR" class="btn btn-sm btn-primary">Load MaterialX</button>
<textarea id="mtlxOutput_NR" rows="20" cols="100%"></textarea>
</div>
<div class="col-sm p-2 border">
<button id="renderMTLXButton_NR" class="btn btn-sm btn-primary">Render Reference Image</button>
<img src="" id="mtlxImage_NR" alt="MaterialX Image" style="display:none; width: 100%">
</div>
</div>
</div>

</div>

<div class="container-fluid p-4">
<h2 id="title">MaterialX Conversion</h2>

<p style="font-size: 12px">Sample showing support for glTF Texture Procedural, MaterialX, and OpenUSD interop
OpenUSD conversion uses the <code>usd-core</code> Python package with
custom code to generate a simplified USD document (*). glTF Texture Procedural
conversion uses the Python library found <a href="https://github.com/KhronosGroup/glTF-MaterialX-Converter"
target="_blank">here</a>
<br>
<sub>(*) Note that synchronization of USD to MaterialX 1.39
is the target.</sub>
</p>

<div class="row p-2">
<div class="col-sm p-2 border">
<button id="convertToUsd" class="btn btn-sm btn-primary">Convert to USD</button>
<textarea id="usdOutput" rows="20" cols="80"></textarea>
</div>
</div>
<div class="row p-2">
<div class="col-sm p-2 border">
<div class="col-sm p-2 border">
<button id="convertToglTF" class="btn btn-sm btn-primary">Convert to glTF Texture Procedural</button>
<textarea id="glTFOutput" rows="20" cols="80"></textarea>
<textarea id="glTFOutput" rows="20" cols="80"></textarea>
</div>
</div>
</div>
</div>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script> -->
Expand All @@ -82,8 +143,99 @@ <h2 id="title">MaterialX Conversion App</h2>
// Setup text formatting
client.setupXML();
};
</script>

<script>
// Function to initialize resizer
function initializeResizer() {
const resizer = document.getElementById('resizer');
const leftCol = document.getElementById('leftCol');
const rightCol = document.getElementById('rightCol');

let x = 0;
let leftWidth = 0;

const mouseDownHandler = function (e) {
x = e.clientX;
leftWidth = leftCol.getBoundingClientRect().width;

document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const newLeftWidth = leftWidth + dx;

// Calculate the new width of the right column
const newRightWidth = window.innerWidth - newLeftWidth - resizer.offsetWidth;

// Prevent resizing if the right column would be smaller than the minimum width
if (newRightWidth >= 200) {
// Set minimum and maximum width for left column
if (newLeftWidth > 100 && newLeftWidth < window.innerWidth - 100) {
leftCol.style.width = `${newLeftWidth}px`;
}
}
};

const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};

resizer.addEventListener('mousedown', mouseDownHandler);
}

// Function to toggle between resizable and non-resizable modes
function toggleResizableMode(isResizable) {
const resizableContainer = document.getElementById("resizableTopContainer");
const nonResizableContainer = document.getElementById("nonResizableTopContainer");

if (isResizable) {
// Show resizable container and hide non-resizable container
resizableContainer.style.display = 'flex';
nonResizableContainer.style.display = 'none';

// Find all elements with an ID that ends with "_RS"
const resizableElements = resizableContainer.querySelectorAll('[id$="_RS"]');
resizableElements.forEach(element => {
element.id = element.id.replace('_RS', '');
console.log('RS element.id', element.id);
});


// Initialize the resizer
initializeResizer();
} else {
console.log('>>>>>>>>>>>>>>>>> Non resizable mode');

// Find all elements with an ID that ends with "Resizable"
const resizableElements = nonResizableContainer.querySelectorAll('[id$="_NR"]');
resizableElements.forEach(element => {
element.id = element.id.replace('_NR', '');
console.log('NR element.id', element.id);
});

// Show non-resizable container and hide resizable container
resizableContainer.style.display = 'none';
nonResizableContainer.style.display = 'block';
}
}

// Check if there is an argument on the url for ?resizable=true
const urlParams = new URLSearchParams(window.location.search);
const resizable = urlParams.get('resizable');

console.log('-------- Use resizable UI', resizable);
if (resizable=='true' || resizable=='1') {
toggleResizableMode(true);
} else {
toggleResizableMode(false);
}
</script>
<!--End-->

<!--End-->
</body>
</html>

</html>
Binary file added flask/gpuopen/data/Motley Patchwork Rug.zip
View file
Binary file not shown.

0 comments on commit 887c588

Please sign in to comment.