From 465210cbc95885779acf3dad7155492f910b1969 Mon Sep 17 00:00:00 2001 From: Alexandre Duret-Lutz Date: Fri, 17 Jan 2025 21:46:43 +0100 Subject: [PATCH] python: improve ACD's CSS Some colleagues complained that the highlighting of edges and nodes in the ACD display where not very readable, especially when sharing screen during some video call. This should improve it. * python/spot/__init__.py (acd): Fill the contents of the nodes when they are highlighted. Add some glowing effect the the highlighted edges. * tests/python/zlktree.ipynb: Adjust. --- python/spot/__init__.py | 6 +- tests/python/zlktree.ipynb | 276 +++++++++++++++++++------------------ 2 files changed, 148 insertions(+), 134 deletions(-) diff --git a/python/spot/__init__.py b/python/spot/__init__.py index 126d7e625..91b77c7e9 100644 --- a/python/spot/__init__.py +++ b/python/spot/__init__.py @@ -517,8 +517,10 @@ class acd: num = _acdnum _acdnum += 1 style = ''' -.acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;} -.acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;} +.acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);} +.acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);} +.acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);} +.acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);} .acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;} .acdrej polygon{fill:red;} .acdacc polygon{fill:green;} diff --git a/tests/python/zlktree.ipynb b/tests/python/zlktree.ipynb index 3eb6f013f..5cd797fc7 100644 --- a/tests/python/zlktree.ipynb +++ b/tests/python/zlktree.ipynb @@ -48,7 +48,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 2, @@ -640,7 +640,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d01decab0> >" + " *' at 0x7f718149d980> >" ] }, "execution_count": 10, @@ -1010,12 +1010,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -1411,12 +1411,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -1809,7 +1809,7 @@ "\n" ], "text/plain": [ - " *' at 0x7f2d01decd50> >" + " *' at 0x7f718149f750> >" ] }, "execution_count": 11, @@ -1876,7 +1876,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d01ded4d0> >" + " *' at 0x7f718149fc90> >" ] }, "execution_count": 13, @@ -2156,12 +2156,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -2579,12 +2579,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -2999,7 +2999,7 @@ "\n" ], "text/plain": [ - " *' at 0x7f2d01dedc50> >" + " *' at 0x7f71814bc870> >" ] }, "execution_count": 14, @@ -3082,7 +3082,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "metadata": {}, @@ -3728,7 +3728,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "metadata": {}, @@ -4374,7 +4374,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "metadata": {}, @@ -4530,7 +4530,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "metadata": {}, @@ -4736,7 +4736,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "metadata": {}, @@ -4796,7 +4796,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "metadata": {}, @@ -4911,7 +4911,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 18, @@ -5298,7 +5298,7 @@ "\n", "\n", - "\n", "\n", "\n", - ".acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;}\n", - ".acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;}\n", + ".acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);}\n", + ".acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);}\n", + ".acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);}\n", + ".acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);}\n", ".acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;}\n", ".acdrej polygon{fill:red;}\n", ".acdacc polygon{fill:green;}\n", "
\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "(FGp0 & ((XFp0 & F!p1) | F(Gp1 &\\nXG!p0))) | G(F!p0 &\\n(XFp0 | F!p1) & F(Gp1 | G!p0))\n", "\n", "(Fin(\n", @@ -6106,7 +6108,7 @@ "
\n", "\n", - "\n", "\n", "" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 20, @@ -6789,12 +6791,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -7388,12 +7390,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -7984,7 +7986,7 @@ "\n" ], "text/plain": [ - " *' at 0x7f2d005206c0> >" + " *' at 0x7f71814d4a80> >" ] }, "execution_count": 29, @@ -8047,12 +8049,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -8626,12 +8628,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -9202,7 +9204,7 @@ "\n" ], "text/plain": [ - " *' at 0x7f2d005207b0> >" + " *' at 0x7f71814d68b0> >" ] }, "execution_count": 31, @@ -9412,7 +9414,7 @@ "\n", "\n", - "\n", "\n", "\n", - ".acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;}\n", - ".acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;}\n", + ".acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);}\n", + ".acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);}\n", + ".acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);}\n", + ".acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);}\n", ".acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;}\n", ".acdrej polygon{fill:red;}\n", ".acdacc polygon{fill:green;}\n", "
\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "(FGp0 & ((XFp0 & F!p1) | F(Gp1 &\\nXG!p0))) | G(F!p0 &\\n(XFp0 | F!p1) & F(Gp1 | G!p0))\n", "\n", "(Fin(\n", @@ -10220,7 +10224,7 @@ "
\n", "\n", - "\n", "\n", "" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 40, @@ -10749,12 +10753,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -11540,12 +11544,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Fin(\n", "\n", @@ -12328,7 +12332,7 @@ "\n" ], "text/plain": [ - " *' at 0x7f2d00521bc0> >" + " *' at 0x7f71814e9b60> >" ] }, "execution_count": 45, @@ -12392,7 +12396,7 @@ "\n", "\n", - "\n", "\n", "\n", - ".acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;}\n", - ".acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;}\n", + ".acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);}\n", + ".acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);}\n", + ".acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);}\n", + ".acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);}\n", ".acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;}\n", ".acdrej polygon{fill:red;}\n", ".acdacc polygon{fill:green;}\n", "
\n", "\n", - "\n", "\n", "
\n", "\n", - "\n", "\n", "" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 47, @@ -12716,7 +12722,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d005214d0> >" + " *' at 0x7f71814ea370> >" ] }, "execution_count": 48, @@ -13123,7 +13129,7 @@ "\n", "\n", - "\n", "\n", "\n", - ".acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;}\n", - ".acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;}\n", + ".acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);}\n", + ".acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);}\n", + ".acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);}\n", + ".acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);}\n", ".acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;}\n", ".acdrej polygon{fill:red;}\n", ".acdacc polygon{fill:green;}\n", "
\n", "\n", - "\n", "\n", "
\n", "\n", - "\n", "\n", "" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 49, @@ -13442,7 +13450,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00522310> >" + " *' at 0x7f71814eac70> >" ] }, "execution_count": 50, @@ -13801,7 +13809,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00522970> >" + " *' at 0x7f71814ebba0> >" ] }, "execution_count": 51, @@ -14080,7 +14088,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 52, @@ -14243,7 +14251,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00522ac0> >" + " *' at 0x7f7180d08360> >" ] }, "execution_count": 53, @@ -14564,7 +14572,7 @@ "\n", "\n", - "\n", "\n", "\n", - ".acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;}\n", - ".acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;}\n", + ".acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);}\n", + ".acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);}\n", + ".acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);}\n", + ".acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);}\n", ".acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;}\n", ".acdrej polygon{fill:red;}\n", ".acdacc polygon{fill:green;}\n", "
\n", "\n", - "\n", "\n", "
\n", "\n", - "\n", "\n", "" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 55, @@ -14897,7 +14907,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00523150> >" + " *' at 0x7f71814ebd80> >" ] }, "execution_count": 57, @@ -15118,7 +15128,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00523240> >" + " *' at 0x7f7180d08ab0> >" ] }, "execution_count": 58, @@ -15411,7 +15421,7 @@ "\n", "\n", - "\n", "\n", "\n", - ".acdhigh ellipse,.acdacc ellipse,.acdacc path,.acdacc polygon{stroke:green;}\n", - ".acdhigh polygon,.acdrej ellipse,.acdrej path,.acdrej polygon{stroke:red;}\n", + ".acdhigh ellipse,.acdacc ellipse{stroke:green;fill:rgb(220,255,220);}\n", + ".acdhigh polygon,.acdrej ellipse{stroke:red;fill:rgb(255,220,220);}\n", + ".acdacc polygon,.acdacc path{stroke:green;filter:drop-shadow(green 0 0 2px);}\n", + ".acdrej polygon,.acdrej path{stroke:red;filter:drop-shadow(red 0 0 2px);}\n", ".acdbold ellipse,.acdbold polygon,.acdbold path{stroke-width:2;}\n", ".acdrej polygon{fill:red;}\n", ".acdacc polygon{fill:green;}\n", "
\n", "\n", - "\n", "\n", "
\n", "\n", - "\n", "\n", "" ], "text/plain": [ - " >" + " >" ] }, "execution_count": 60, @@ -15769,7 +15781,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d005239c0> >" + " *' at 0x7f7180d0a160> >" ] }, "execution_count": 61, @@ -15990,7 +16002,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d005238a0> >" + " *' at 0x7f7180d0a580> >" ] }, "execution_count": 62, @@ -16229,12 +16241,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Inf(\n", "\n", @@ -16488,12 +16500,12 @@ "\n", "\n", - "\n", "\n", "\n", - "\n", + "\n", "\n", "Inf(\n", "\n", @@ -16744,7 +16756,7 @@ "\n" ], "text/plain": [ - " *' at 0x7f2d00523720> >" + " *' at 0x7f7180d0aa60> >" ] }, "execution_count": 63, @@ -16778,7 +16790,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00523fc0> >" + " *' at 0x7f71814e94d0> >" ] }, "execution_count": 64, @@ -16959,7 +16971,7 @@ "\n", "\n", - "\n", "\n", "\n", "\n", - "\n", "\n", "\n" ], "text/plain": [ - " *' at 0x7f2d00550090> >" + " *' at 0x7f7180d0b720> >" ] }, "execution_count": 66, @@ -17126,7 +17138,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.11.8" + "version": "3.12.7" } }, "nbformat": 4,