module Viewer using Blink using Colors export ConstructionViewer, display! # === Blink utilities === append_to_head!(w, type, content) = @js w begin @var element = document.createElement($type) element.appendChild(document.createTextNode($content)) document.head.appendChild(element) end style!(w, stylesheet) = append_to_head!(w, "style", stylesheet) script!(w, code) = append_to_head!(w, "script", code) # === construction viewer === mutable struct ConstructionViewer win::Window function ConstructionViewer() # create window and open developer console win = Window() opentools(win) # set stylesheet style!(win, """ /* needed to keep Ganja canvas from blowing up */ canvas { min-width: 600px; max-width: 600px; min-height: 600px; max-height: 600px; } """) # load Ganja.js loadjs!(win, "https://unpkg.com/ganja.js") # create global functions and variables script!(win, """ // create algebra var CGA3 = Algebra(4, 1); // initialize element list and palette var elements = []; var palette = []; // declare visualization handle var graph; // create scene function function scene() { commands = []; for (let n = 0; n < elements.length; ++n) { commands.push(palette[n], elements[n]); } return commands; } """) # create view @js win begin graph = CGA3.graph( scene, Dict( "conformal" => true, "gl" => true, "grid" => true ) ) document.body.replaceChildren(graph) end new(win) end end function display!(viewer::ConstructionViewer, elements::Matrix) # load elements elements_full = [ [0; elt; fill(0, 26)] for elt in eachcol(elements) ] @js viewer.win elements = $elements_full.map((elt) -> @new CGA3(elt)) # generate palette. this is Gadfly's `default_discrete_colors` palette, # available under the MIT license palette = distinguishable_colors( length(elements_full), [LCHab(70, 60, 240)], transform = c -> deuteranopic(c, 0.5), lchoices = Float64[65, 70, 75, 80], cchoices = Float64[0, 50, 60, 70], hchoices = range(0, stop=330, length=24) ) palette_packed = [RGB24(c).color for c in palette] @js viewer.win palette = $palette_packed # update view @js viewer.win requestAnimationFrame(graph.update.bind(graph, scene)); end end # ~~~ sandbox setup ~~~ # in the default view, e4 + e5 is the point at infinity elements = sqrt(0.5) * BigFloat[ 1 1 -1 -1 0; 1 -1 1 -1 0; 1 -1 -1 1 0; 0 0 0 0 -sqrt(6); 1 1 1 1 2 ] # show construction viewer = Viewer.ConstructionViewer() Viewer.display!(viewer, elements)