Skip to content

Instantly share code, notes, and snippets.

@ErnWong

ErnWong/gui-library-considerations.md

Last active March 22, 2023 07:35
Show Gist options
  • Save ErnWong/9ecee267fa15a05e985e7c0d56898aaa to your computer and use it in GitHub Desktop.
Save ErnWong/9ecee267fa15a05e985e7c0d56898aaa to your computer and use it in GitHub Desktop.
Download ZIP
GUI library considerations
Raw
gui-library-considerations.md
  • Drawing:
    • Coordinate System: Pixels, logical pixels, dpi scaling, device-independent pixels, inches, logical inches, dpi logical dpi, points, zoom,
    • Color:
      • rgb, hsv, hsl, etc
      • Colorspaces: Device independent (e.g. sRGB), Deviced dependent (monitor specific)
      • Gamma, linear colorspace
      • High dynamic range, tone-mapping
    • Blending:
    • Paths: Points, lines, arcs, ellipses, bezier, cubic, splines
    • Gradients: Linear, radial, dithering
    • Strokes, dashing/dotting, terminators (arrows/ arrow tips), joints (mitres, rounded, butt).
    • Repeating pattern along path. Curve text on path.
    • Fill. Fill modes (even/odd vs nonzero vs winding direction)
    • Anti-aliasing
    • Clipping
    • Damage tracking
    • Filters
    • Blurs. Fast, guassian, bokeh
    • Shadows. Drop shadows, inner shadows,
    • Cameras, Scene compositions
    • Soft masks
  • Text: layout, shaping, ligature, encoding, justification, wrapping, sub-pixel antialiasing, vertical, stem darkening https://freetype.org/freetype2/docs/hinting/text-rendering-general.html#experimental-stem-darkening-for-the-auto-hinter
  • Layout: flutter protocol, flex, row, column, grid, absolute, relative
  • Layoring: z-index, blending/opactiy, context menus, multi-window
  • Accessibility. see accesskit
  • Events
    • Event propagation
    • Event capturing
    • Keyboard, keyboard layout,
      • Keyboard shortcuts, "actions", hotkeys, modifier handling, keyboard focus
    • Mouse, touch, pointer, gestures
      • Non rectangular mouse areas
    • Other hardware sensors: accelerometers, thermometers, etc.
  • Global focus and focus scope mechanism
  • Enabling/disabling mechanism
  • Virtualization (i.e. virtual lists)
  • Animation:
    • Timelines
    • Keyframes
    • Tweening, easing functions, interpolators
    • Springs
    • Transitions
  • Styling and theming and theme switching.
    • Ability to provide own domain-specific styling abstractions.
    • A more generalised idea of "disabled state" propagation and style sheets? Contexts? While keeping benefits of functional and staying predictable?
  • Debugging tools:
    • inspecting,
    • profiling,
    • hot reloading,
    • remote
    • Color blindness simulation
    • Device simulation
    • Update/redraw/damage visualization
    • explain layout
  • Streams: audio stream, video stream, data stream (plotting or visualization).
  • Assets: images etc
  • Optimizations: Tree diffing, stable IDs, memoization.

Inspirations:

Platform / hardware:

Fun ideas for a fun, over-the-top demo app:

  • Thicc bubbly colourful title font with outline, highlights and shadows
  • purple background animated with text moving diagonally like that in the Beetle Ju menu screen
  • bubbly ripple effect buttons
  • highlight from cursor position simulating reflection
  • tooltips with blurred backgrounds and drop shadows and animated entry/exit transitions (opacity and geometry warping)
  • eye catching text animations: e.g. momentarily enlarge number text when it changes like in games, and animate an alternating/flashing colour animation with glow/bloom during tour modes.
  • over the top page transitions that manipulate all the geometry, like gravity, etc.
  • Showcase momentum scrolling, gestures, etc.

Learning exercise task list:

  1. Fill solid background colour
  2. Fill single triangle without antialiasing using scanline, no tiling.
  3. Fill single triangle with exact-area antialiasing, no tiling
  4. Extend to two triangles using hidden surface removal
  5. Extend to semi-transparency
  6. Extend to N triangles
  7. Add blur convolution - gaussian and bokeh
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment