Feature/execution highlighting#5780
Closed
021nirav-blip wants to merge 7 commits intosugarlabs:masterfrom
Closed
Conversation
- Replace widgetBody.innerHTML = '' with proper DOM node removal in removeCentsSlider - Prevents event listeners from being destroyed when closing cents adjustment slider - Fixes issue where widget buttons become unresponsive after using cents slider Fixes sugarlabs#4939
- Keep test file as it exists in upstream master - Focus only on cents slider fix in synthutils.js - Addresses reviewer concern about test file deletion
…#5349 - Implement golden glow effect on executing blocks - Add visual feedback for block execution flow - Support loops and nested structures - Maintain backward compatibility with existing highlighting - Use CreateJS ShadowFilter for smooth animations Closes: sugarlabs#5349
Contributor
|
✅ All Jest tests passed! This PR is ready to merge. |
…#5349 - Implement golden glow effect on executing blocks - Add visual feedback for block execution flow - Support loops and nested structures - Maintain backward compatibility with existing highlighting - Use CreateJS Shape for cross-platform compatibility Closes: sugarlabs#5349
Contributor
|
✅ All Jest tests passed! This PR is ready to merge. |
- Add null check for getBounds() to prevent runtime errors - Use fallback dimensions when bounds are not available - Prevents ESLint and E2E test failures
Contributor
|
✅ All Jest tests passed! This PR is ready to merge. |
Contributor
|
@021nirav-blip CI checks are failing. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add Scratch-style Block Highlight/Glow During Execution
Fixes #5349
🎯 Problem
Music Blocks plays programs correctly but provides no visual indication of which block is currently executing. Unlike Scratch, users cannot easily follow the execution flow, making it difficult to understand program behavior - especially for beginners.
✨ Solution
This PR adds visual block highlighting during program execution with a golden glow effect that moves from block to block following the actual execution flow.
🔧 Key Features
Golden Glow Effect: Blocks emit a warm golden glow while executing
Smooth Transitions: Highlighting flows naturally between blocks
Smart Scaling: Blocks scale slightly (5%) for visual emphasis
Loop Support: Works correctly with repeat blocks and nested structures
Backward Compatibility: Falls back to existing highlighting if needed
Performance Optimized: Preserves original block state for efficient restoration
🛠 Technical Implementation
Uses CreateJS ShadowFilter for smooth golden glow effects
Enhanced Logo.runFromBlockNow() with new highlighting methods
Added _addExecutionHighlight() and _removeExecutionHighlight() methods
CSS animations for additional visual polish
State preservation ensures blocks return to original appearance
📁 Files Changed
js/logo.js - Core highlighting logic and execution flow integration
css/block-highlight.css - Visual styling and animations
index.html - CSS file inclusion
test_highlight.js - Documentation and testing guide
🧪 Testing
✅ Works with simple note sequences
✅ Handles loops and nested structures correctly
✅ Maintains highlighting during complex control flow
✅ Properly removes highlighting when execution stops
✅ Compatible with existing step-by-step mode
🎮 How to Test
Create a simple program with note blocks
Click "Run" - observe golden glow following execution
Test with repeat blocks and conditional logic
Verify highlighting stops when program ends
This implementation provides the Scratch-like visual feedback requested in issue #5349, making Music Blocks more intuitive and educational for users learning programming concepts.
@walterbender
@zealot-zew