Toplo, Bloc & Spec - A Graphic Layer for the Present and Future
- 1. Pablo Tesone & Martín Dias - ESUG 2025 - Gdansk Toplo, Bloc & Spec A Graphic Layer for the Present and Future Consortium 1
- 2. Pablo Tesone Pharo Consortium Engineer In this presentation: @tesonep Martín Dias Pharo Consortium Engineer @tinchodias Just in the presentation e ff ort… a lot of development behind 2
- 3. 3 A low-level UI infrastructure & framework for Pharo geometry (polygon) element background border transformation (a matrix with skew and translation) What is Bloc?
- 4. 4 What is Toplo? A widget library on top of Bloc • No New Revolutionary Concepts • Keep it Simple • Bloc has many of the features • Bloc + Element States and Skins • + 25 Widgets ready to use • Collaboration with
- 5. What about Spec? The power of Toplo, the ease of Spec 5 • Toplo backend for Spec • Switch backend transparently • Full support
- 6. An Application Stack for Everyone 6 harfbuzz.dll Alexandrie SDL2.dll OSWindow Bloc cairo.dll freetype.dll Toplo FFI Spec - Toplo Spec Part Toplo Part Bloc Part
- 7. An Application Stack for Everyone 7 harfbuzz.dll Alexandrie SDL2.dll OSWindow Bloc cairo.dll freetype.dll Toplo FFI Spec - Toplo Spec Part Toplo Part Bloc Part Use what you need when you need it
- 8. Why Cairo and SDL2 / SDL3? Simple FFI bindings to C libraries • Works on all Pharo's platforms • GPU acceleration (and especially in SDL3) • Active game-development community • Stable with active development. Support by gnome community (it's the way to draw custom widgets in GTK 3 and GTK 4). • Not GPU-optimized but we can use bu ff ering, layer composition and other techniques to mitigate. 8
- 9. Releases New Versions Available • Bloc v2.5.0 • Toplo v0.6.0 • Spec-Toplo v0.6.0 • Alexandrie v2.5.0 • Album v0.6.0 9 Release policy: ~ every 2 months
- 10. Bloc 10
- 11. Damaged Areas - Bounds Optimizations 11 Overlays where not performant, we were drawing all
- 12. Damaged Areas - Bounds Optimizations 12 • Overlay benchmarks ~ 15x faster • Heavy drawing benchmarks ~ 30% improvement • Other benchmarks ~ 15% improvement 10k elements in the space, handling the mouse over ~ 25x faster
- 13. Benchmarks & Metrics 13 • 55 Benchmarks • Running in All platforms • Automated Execution • Covering most of the functionalities • Realtime Measuring Tools
- 14. Optimized Shadows Use gradients to emulate shadows 14
- 15. More Geometries Histogram, Stadium and Sigmoid 15
- 16. New Demos Color Picker + Paint & Gradients 16
- 17. New Demos: Drag & Drop game 17 @Enzo-Demeulenaere
- 19. Other Improvements in Bloc • Clean ups & Simpli fi cations • Documentation and Comments • Better Scaling in HDPI Screens • Better naming conventions • Bug- fi xing • Saving / Restoring image keeps open spaces • Improvements in Animations, Texts • Fix Text Styler • Fix Set Cursor • More Tests 19 +500 Commits 12 Contributors
- 21. Better Menus and Tooltips 21
- 22. Anchor Layout & Floats 22
- 23. Tree 23
- 25. Accordion 25
- 26. Other Toplo Improvements • Cleaning • Bug fi xing • Progress Bar • Improving Performance in Lists • Tag Element • Tree • Improvements in Selection Modes • Improvements in Skins • Overlays 26 ~1000 Commits 7 Contributors
- 27. Spec-Toplo 27
- 28. • Tree • Toolbar • Menus • Password text fi eld • Dropbox icons More Widgets in Spec-Toplo 28
- 29. Pharo Tools in Toplo We can eat our own food 29
- 30. We can eat our own food 30 Directly from the same Spec App Pharo Tools in Toplo
- 31. More and More…. • SDL2 • Updated to latest version • Contributing / Bug- fi xing • SDL3 • New Bindings (thanks CIG) • Future Backend • Documentation Booklet 31 https://github.com/SquareBracketAssociates/Booklet-Graphics
- 32. Future We keep the same objectives • Faster & More Stable Bloc • More Widgets in Toplo • Full Implementation of Spec-Toplo • More Pharo Tools in Spec-Toplo • Tests & Documentation 32
- 33. Mailing-list: [email protected] (subscribe at: http://sympa.inria.fr) Discord: Pharo server / #bloc channel Bloc: https://github.com/pharo-graphics/Bloc Toplo: https://github.com/pharo-graphics/Toplo Spec-Toplo: https://github.com/pharo-graphics/Spec-Toplo 33 STAY TUNED! Consortium Check Released Versions!!!