Dragging puzzle block sliders for real-time scene updates

This topic has 3 replies, 2 voices, and was last updated 1 year, 1 month ago by kdv.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2023-10-21 at 12:06 pm #67771
aqiang
Customer
As we all know, many three.js scene demos come with dat.gui panels where you can drag numeric sliders to observe scene changes in real-time. I’ve also implemented this functionality in the UI panels generated through puzzle plugins. These puzzle blocks with real-time updates are also present in V3D’s post-processing applications. My issue is how to define puzzle blocks with sliders that can achieve the same functionality. After multiple attempts, the generated puzzle blocks have partially achieved this, but there are two main issues that remain unresolved. One is that in the ‘onchange’ event, ‘app’ is reported as undefined, meaning that the scene hasn’t been initialized yet. The second issue is that the puzzle block ID in the event is dynamic and cannot be accurately obtained， any suggestions，Thanks
```
<script>
    function template(block) {
        block.setColor('#cc66cc');
        block.setPreviousStatement(true);
        block.setNextStatement(true);
        block.appendValueInput('SLIDENUM').appendField('print slidernumber');
        block.setOnChange(function (changeEvent) {
            if (changeEvent.type === Blockly.Events.BLOCK_CHANGE) {
                // if (changeEvent.blockId === block.id) {
                console.log('New value:', changeEvent.newValue);
                appInstance.enablePostprocessing([{
                    type: 'brightnessContrast',
                    brightness: changeEvent.newValue,
                }]);
                // }
            }
        });
    }
    function code(block) {
        var slidenumber = Blockly.JavaScript.valueToCode(block, 'SLIDENUM', Blockly.JavaScript.ORDER_NONE);
        return 
```
console.log(‘New value:’, ${slidenumber});
appInstance.enablePostprocessing([{
type: ‘brightnessContrast’,
brightness: ${slidenumber},
}]);`;
}
</script>

Attachments:
You must be logged in to view attached files.
2023-10-21 at 2:03 pm #67774
kdv
Participant
```
block.setOnChange(function (event) {
    if (event.type == 'change') {
      const inputBlock = block.getInputTargetBlock('SLIDENUM');//<--
      if (inputBlock && inputBlock.id == event.blockId) {//<--
        console.log('New value:', event.newValue);
      }
    }
});
```
Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2023-10-22 at 2:12 am #67791
aqiang
Customer
Thank you! kdv. The second problem has been perfectly resolved . The first issue of creating the “createLivePreview” block doesn’t seem to be an easy task.
- This reply was modified 1 year, 1 month ago by aqiang.
2023-10-22 at 3:50 am #67794

kdv
Participant

Plugins don’t have access to appInstance initialized in the puzzles editor.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
Author

Posts