Reinventing Visio in 2023, A Blazor Project

on YouTube ↗56m

" summary

A Visio-like drawing system is implemented in Blazor using HTML5 canvas and threejs, with the ShapeSheet concept replaces the Visio ShapeSheet by a C# object model (inheritance, composition, functional closures) and a clear separation of presentation and business models. It supports glue for 1D/2D shapes, quad-tree hit testing, parametric geometry, menu-as-shape, tree layout, and a Boyds flocking stress test; 3D GLB models load and the demo sustains interactive frame rates (30–70fps) while Blazor and SignalR collaboration syncs live edits across clients.

AI-written summary · about

" chapters (50)

1. 0:00Intro
2. 2:14Blazor
3. 4:00Project Plan
4. 4:39Wiring
5. 5:43Legal Decision Management
6. 6:42SolidWorks Integration
7. 7:33Web Technologies
8. 8:16Learning Approach
9. 8:38Implementation Focused Learning
10. 9:35Current Visio Reinvention Challenge
11. 10:18Blazor Advantage
12. 11:40Demo
13. 15:27Montage
14. 17:55Geometry
15. 18:33Code
16. 19:33Drawing and Rendering
17. 22:46Glue
18. 23:57Stencils
19. 24:23PubSub
20. 24:45Rules of Rendering
21. 26:50The Ultimate Goal
22. 28:00Demos
23. 29:24Quad Tree in Action
24. 31:043D Modeling
25. 31:51Open Source Code
26. 32:44The 3D World
27. 33:20Bringing in GLB Models
28. 33:49Load 1500 Jet Fighters
29. 34:33Build 3D Shape
30. 35:21Boyds
31. 35:33Birds
32. 38:00Individual Voids
33. 39:29Menus
34. 40:01Menu API
35. 40:20Menu Demo
36. 41:52Tree Layout
37. 42:30Demo Demo
38. 45:45Recalculation
39. 46:55Glue Test
40. 47:25Coating Samples
41. 47:43Pattern Matching
42. 48:26Collaboration
43. 48:44Command Service
44. 50:14SignalHub
45. 50:27Marble Event Diagram
46. 51:06Second Layer Language
47. 51:28Collaboration Demo
48. 52:01Signal Heart Demo
49. 52:22Working with a Partner
50. 54:13Tug of War

" related talks

• 43mThe Internet of ShapesBrenna O'Brien · FITC Web Unleashed 2014
• 36mCreative Coding with React & SVGVarun Vachhar · FITC Toronto 2016
• 17mCreating Immersive 3D Solutions with Microsoft MeshRebecca Burke-Aguero, Megha Sharma · Microsoft Build 2024
• 31mMakepad - Rethinking Web UI's with WebGLRik Arends · AmsterdamJS Conference 2017
• 40mSketch-n-Sketch: Interactive SVG Programming with Direct ManipulationRavi Chugh · Strange Loop 2016
• 35mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · Framework Summit 2018
• 41mCreate stunning 3D web experiences with Babylon.jsDavid Catuhe · code.talks 2019
• 16mIntersection between art and technologyJuliet Brown · Decompress AU 2018