improve tiling display in VSCode (#25)

Author: simeonschaub

Project.toml

@@ -5,15 +5,24 @@ version = "0.2.4"
 
 [deps]
 Adapt = "79e6a3ab-5dfb-504d-930d-738a2a938a0e"
+Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"
 ImageIO = "82e4d734-157c-48bb-816b-45c225c6df19"
 ImageShow = "4e3cecfd-b093-5904-9786-8bbb286a6a31"
 KernelAbstractions = "63c18a36-062a-441e-b654-da1e3ab1ce7c"
 OffsetArrays = "6fe1bfb0-de20-5000-8ca7-80f57d26f881"
 Transducers = "28d57a85-8fef-5791-bfe6-a80928e7c999"
 
+[weakdeps]
+GeometryBasics = "5c1252a2-5f33-56bf-86c9-59e7332b4326"
+Makie = "ee78f7c6-11fb-53f2-987a-cfe4a2b5a57a"
+
+[extensions]
+MakieExtension = ["Makie", "GeometryBasics"]
+
 [compat]
 Adapt = "4"
+Base64 = "1"
 Colors = "0.12"
 GeometryBasics = "0.4"
 ImageIO = "0.6"
@@ -23,10 +32,3 @@ Makie = "0.21"
 OffsetArrays = "1"
 Transducers = "0.4"
 julia = "1.9"
-
-[extensions]
-MakieExtension = ["Makie", "GeometryBasics"]
-
-[weakdeps]
-GeometryBasics = "5c1252a2-5f33-56bf-86c9-59e7332b4326"
-Makie = "ee78f7c6-11fb-53f2-987a-cfe4a2b5a57a"

README.md

@@ -12,7 +12,7 @@ A package for generating and analyzing [Aztec diamonds](https://en.wikipedia.org
 
 To generate an order-n Aztec diamond, simply call `diamond(n)`
 
-```julia
+```julia-repl
 julia> D = diamond(10)
 10-order Tiling{Matrix{AztecDiamonds.Edge}}
                   🬇🬋🬋🬃
@@ -37,9 +37,9 @@ julia> D = diamond(10)
                   🬇🬋🬋🬃
 ```
 
-It is recommended that you use an interactive enviroment like Pluto, VS Code or IJulia to be able to view the generated diamonds in all their glory. Alternatively, you can also view them in a separate window using the [ImageView](https://github.com/JuliaImages/ImageView.jl) package as follows:
+It is recommended that you use an interactive enviroment like Pluto, VS Code or IJulia to be able to view larger diamond tilings in all their glory. Alternatively, you can also view them in a separate window using the [ImageView](https://github.com/JuliaImages/ImageView.jl) package as follows:
 
-```julia
+```julia-repl
 julia> using ImageView
 
 julia> imshow(AztecDiamonds.to_img(D))
@@ -48,7 +48,7 @@ julia> imshow(AztecDiamonds.to_img(D))
 
 It is possible to take advantage of GPU acceleration via [KernelAbstractions.jl](https://github.com/JuliaGPU/KernelAbstractions.jl) on supported backends, e.g. CUDA:
 
-```julia
+```julia-repl
 julia> using CUDA
 
 julia> ka_diamond(200, CuArray)
@@ -57,7 +57,7 @@ julia> ka_diamond(200, CuArray)
 
 You can extract the DR-path separating the northern arctic region from the rest of the diamond using the `dr_path` function.
 
-```julia
+```julia-repl
 julia> dr_path(D)
 21-element OffsetArray(::Vector{Float64}, -10:10) with eltype Float64 with indices -10:10:
  -0.5
@@ -82,3 +82,5 @@ julia> dr_path(D)
   0.5
  -0.5
 ```
+
+To get the other DR-paths the tiling can be rotated first using the functions `rotr90`, `rotl90` or `rot180`.

src/show.jl

@@ -1,5 +1,6 @@
 using Colors
 import ImageShow
+using Base64: Base64EncodePipe
 
 Base.summary(io::IO, t::Tiling) = print(io, t.N, "-order ", typeof(t))
 
@@ -29,8 +30,14 @@ end
 function Base.show(io::IO, ::MIME"text/plain", t::Tiling)
     summary(io, t)
     (; N) = t
-    displaysize(io)[2] ≥ 4N || return print(io, "\n  Output too large to fit terminal. Use \
-        `using ImageView; imshow(AztecDiamonds.to_img(D))` to display as an image instead.")
+    if displaysize(io)[2] < 4N
+        printstyled(
+            io, "\n  Output too large to fit terminal. \
+            Use `using ImageView; imshow(AztecDiamonds.to_img(D))` to display as an image instead.";
+            color = :black,
+        )
+        return nothing
+    end
     t = adapt(Array, t)
     foreach(Iterators.product(inds(N)...)) do (j, i)
         j == 1 - N && println(io)
@@ -76,3 +83,14 @@ function Base.show(io::IO, ::MIME"image/png", t::Tiling; kw...)
     img = to_img(adapt(Array, t))
     show(io, MIME("image/png"), img; kw...)
 end
+
+Base.showable(::MIME"juliavscode/html", (; N)::Tiling) = N > 0
+
+function Base.show(io::IO, ::MIME"juliavscode/html", t::Tiling; kw...)
+    img = to_img(adapt(Array, t))
+    print(io, "<img src='data:image/gif;base64,")
+    b64_io = IOContext(Base64EncodePipe(io), :full_fidelity => true)
+    show(b64_io, MIME("image/png"), img; kw...)
+    close(b64_io)
+    print(io, "' style='width: 100%; max-height: 500px; object-fit: contain; image-rendering: pixelated' />")
+end

test/Project.toml

@@ -1,6 +1,8 @@
 [deps]
 Adapt = "79e6a3ab-5dfb-504d-930d-738a2a938a0e"
 AztecDiamonds = "8762d9c5-fcab-4007-8fd1-c6de73397726"
+Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
+Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"
 CUDA = "052768ef-5323-5732-b1bb-66c8b64840ba"
 CairoMakie = "13f3f980-e62b-5c42-98c6-ff1f3baf88f0"
 Images = "916415d5-f1e6-5110-898d-aaa5f9f070e0"

test/show.jl

@@ -22,6 +22,9 @@ end
     @test length(r) > 2(2N)^2
     r_color = repr(MIME("text/plain"), D; context = :color => true)
     @test length(r_color) == length(r) + 10length(AztecDiamonds.faces(D))
+
+    r = repr(MIME("text/plain"), D; context = :displaysize => (10, 10))
+    @test contains(r, "Output too large to fit terminal")
 end
 
 @testitem "printing of malformed tilings" begin
@@ -58,3 +61,13 @@ end
     )
     @test repr(MIME("text/plain"), t) == expected
 end
+
+@testitem "VSCode show" begin
+    using Base64
+
+    D = diamond(20)
+    @test Base.showable("juliavscode/html", D)
+    html = String(repr("juliavscode/html", D))
+    b64_png = stringmime("image/png", D)
+    @test contains(html, b64_png)
+end