# ====================================
# Demonstration of HTML output in GAP
# ====================================

# Version history
# May 2018:  Initial release
# Jul 2018:  Added HTMLGraphList function to demo

# A word on how to develop output like this:
#   I wrote most of this in a friendly html editor, and tested by
#   copying and pasting an html preview to TextEdit.
# To get into GAP, I ran it through an html minifier, with tr to
#  fix up strings for GAP format.  The command line for my minifier was
#    minify html_demo.html | tr \"\\n \'\

# A utility function to easily send an html string to output
WcHtmlOut:=function(str)
  return WindowCmd(["HTM", str]);
end;

# Code to create a 'graph' of a list (requires fig2dev)
HTMLGraphList:=function(L)
  local figstr, i;

  if not IsList(L) then
    Print("Argument must be a list");
    return fail;
  fi;

  figstr:= "#FIG 3.2  Produced GAP code\nLandscape\nCenter\nInches\nLetter  \n100.00\nSingle\n-2\n1200 2\n";
  for i in [1..Size(L)] do
    figstr:=Concatenation(figstr, "2 2 0 2 4 17 50 -1 20 0.000 0 0 -1 0 0 5\n\t");
    figstr:=Concatenation(figstr, " ", String(i*300), " ", String(0));
    figstr:=Concatenation(figstr, " ", String(i*300), " ", String(L[i]*400));
    figstr:=Concatenation(figstr, " ", String((i+1)*300), " ", String(L[i]*400));
    figstr:=Concatenation(figstr, " ", String((i+1)*300), " ", String(0));
    figstr:=Concatenation(figstr, " ", String(i*300), " ", String(0));
    figstr:=Concatenation(figstr, "\n");
  od;
  PrintTo("/tmp/gap_figgraph.fig", figstr);
  Exec("bash -l -c 'fig2dev -L png /tmp/gap_figgraph.fig /tmp/gap_figgraph.png'");
  WcHtmlOut("<fig><img src=file:///tmp/gap_figgraph.png alt='a graphic from my webpage'></fig><br>");
  RemoveFile("/tmp/gap_figgraph.fig");
  RemoveFile("/tmp/gap_figgraph.png");
end;

# code to pretty-print a matrix using html tables
HTMLPrintMatrix:=function(mat)
  local htmlstr, m, n, i, j;

  if not IsMatrix(mat) then
    return fail;
  fi;

  htmlstr:="<style>table.mf { margin-left: 1em; border-left: .1em solid black; border-right: .1em solid black;} .mf td { padding: 0 .5em; text-align: right; } </style>";

  Append(htmlstr, "<table class='mf'>");

  m:=DimensionsMat(mat)[1];
  n:=DimensionsMat(mat)[2];
  for i in [1..m] do
    Append(htmlstr, "<tr>");
    for j in [1..n] do
      Append(htmlstr, "<td>");
      Append(htmlstr, String(mat[i][j]));
      Append(htmlstr, "</td>");
    od;
    Append(htmlstr, "</tr>");
  od;
  Append(htmlstr, "</table>");
  WcHtmlOut(htmlstr);
  return htmlstr;
end;

BigBlueString:=function(text)
  WcHtmlOut(Concatenation("<h1 style=color:blue;margin:0;>", text, "</h1>"));
end;

# put a nicely styled header up
Demo_Html_Heading:=function(text)
  WcHtmlOut(Concatenation("<br><h3 style='margin-top:10px;background-color:slategray;color:yellow'>",text,"</h3>"));
end;

Demo_Html_Help:=function(helptext, moreinfourl)
  local htmlstr;

  # set up (partial) css as in GAPDoc
  htmlstr:="<style>div{background-color:linen} .func {background:#e0e0e0;margin:0} td.tdleft{text-align:left} td.tdright{text-align:right} var.Arg{color:#060} .example{background:#efefef;padding:0 1ex;overflow:auto} span.GAPprompt{color:#000097;font-weight:400} span.GAPbrkprompt{color:#970000;font-weight:400} span.GAPinput{color:#970000}</style><div>";

  Append(htmlstr, helptext);
  Append(htmlstr, "</div>");
  WcHtmlOut(htmlstr);

  # put out a "more info" link, with less styling
  WcHtmlOut(Concatenation("<p>Refer to the <a href='", moreinfourl, "'>Full GAP help</a> for more information.</p>"));
end;

# Output a nice header
# ========================
WcHtmlOut("<style>.header{width:100%;font-size:120%;font-weight:700;color:#fff;background-color:#2f4f4f;border-bottom:3px solid #4682b4;border-top:3px solid #4682b4}.header tr{padding:3px 0}</style> <br><table class=header><tr><td>A demonstration/test of HTML output for GAP<td style='text-align: right'>Russ Woodroofe</table><br>");

# Give an overview
# ========================
WcHtmlOut("<p>GAP currently uses <code>VT100</code> terminal commands to support some limited styling of output. The purpose of this demonstration is to propose using (a subset of) HTML as a more modern way to solve similar problems.<p>Essentially all modern operating systems support a control to display simple HTML. For example, Gap.app currently uses an <code>NSTextView</code> and <code>NSAttributedString</code>'s to display HTML. The subset of HTML and CSS supported is limited, but this demonstration will already show the potential for this. It would be also possible to use a WebKit view to display a richer HTML dialect.<p>Although the following examples are for now limited to recent versions of Gap.app, I envision that either Gap.app could be ported to Windows/Linux, or else that similar support could easily be given from another frontend.");

# Demonstrate graphics
# ========================
Demo_Html_Heading("Use case: graphics");
WcHtmlOut("<p>One obvious use case is that it is easy to use HTML to insert graphical elements into a GAP command session. For example, GAP code could call GraphViz to display a graph, and insert the output inline into the output.</p><p>The following example figure is loaded from my <a href='http://osebje.famnit.upr.si/~russ.woodroofe/'>webpage</a> (requires internet).</p>");
WcHtmlOut("<fig><img src=https://osebje.famnit.upr.si/~russ.woodroofe/torus.png alt='a graphic from my webpage'></fig><br>");
WcHtmlOut("<br><p>The following example is generated with the <br><code>HTMLGraphList([3,1,2]);</code><br>command (requires fig2dev to be installed, which should come with xfig)</p>");
HTMLGraphList([3,1,2]);
WcHtmlOut("<br><p>Try it yourself!  For example: </p><p><code>HTMLGraphList(RandomMat(1,6,Integers)[1]);</code></p>");

# Demonstrate html math notation
# ========================
Demo_Html_Heading("Use case: mathematical notation and equations");
WcHtmlOut("<p>Although basic HTML is certainly short of LaTeX or MathJax, it is already possible to express a rich subset of mathematical notations (superscripts, subscripts, italics, greek letters, special symbols, etc). Some examples follow:</p>");
WcHtmlOut("<style>.math i{color:blue}</style><div class=math><p>&nbsp;&nbsp;<i>S</i><sub><i>n</i></sub>&nbsp;= &langle; <i>g</i>,&nbsp;<i>h </i>&rangle;<p>&nbsp;&nbsp;&forall; <i>&epsilon;</i> &exist; <i>&delta;</i>&nbsp;&ni;&nbsp;|<i>x </i>- <i>x</i><sub>0</sub>|&nbsp;&lt; <i>&delta;</i> &rArr; |<i>f</i>(<i>x</i>)&nbsp;- <i>f</i>(<i>x</i><sub>0</sub>)|&nbsp;&lt; <i>&epsilon;</i></div>");

# Demonstrate inline-help
# ========================
Demo_Html_Heading("Use case: inline help");
WcHtmlOut("<p>It would require only limited support from GAPDoc for Gap.app to be able to output the results of a help search inline to the GAP command session, with a link to the full article in GAP help.<p>An example follows. The links are set to point to gap-system.org to avoid file location problems, but could also easily refer to a location on the local disk.</p>");
# The html help is taken straight from the GAP documentation files, with
#  the only adjustment being adjusting the URLs to point to a universal location,
#  and some minification
Demo_Html_Help("<h5>50.1-10 <span class=Heading>SymmetricGroup</span></h5><div class=func><table class=func width=100%><tr><td class=tdleft><code class=func>&#8227; SymmetricGroup</code>( [<var class=Arg>filt</var>, ]<var class=Arg>deg</var> )<td class=tdright>(&nbsp;function&nbsp;)</table></div><div class=func><table class=func width=100%><tr><td class=tdleft><code class=func>&#8227; SymmetricGroup</code>( [<var class=Arg>filt</var>, ]<var class=Arg>dom</var> )<td class=tdright>(&nbsp;function&nbsp;)</table></div><p>constructs the symmetric group of degree <var class=Arg>deg</var> in the category given by the filter <var class=Arg>filt</var>. If <var class=Arg>filt</var> is not given it defaults to <code class=func>IsPermGroup</code> (<a href=https://www.gap-system.org/Manuals/doc/ref/chap43.html#X7879877482F59676><span class=RefLink>43.1-1</span></a>). For more information on possible values of <var class=Arg>filt</var> see section (<a href=https://www.gap-system.org/Manuals/doc/ref/chap50.html#X839981CC7D9B671B><span class=RefLink>50.1</span></a>). In the second version, the function constructs the symmetric group on the points given in the set <var class=Arg>dom</var> which must be a set of positive integers.<div class=example><pre> <span class=GAPprompt>gap&gt;</span> <span class=GAPinput>SymmetricGroup(10);</span> Sym( [ 1 .. 10 ] ) </pre></div><p>Note that permutation groups provide special treatment of symmetric and alternating groups, see <a href=https://www.gap-system.org/Manuals/doc/ref/chap43.html#X834208CD7C2956A3><span class=RefLink>43.4</span></a>.", "https://www.gap-system.org/Manuals/doc/ref/chap50.html#X858666F97BD85ABB");

# Demonstrate matrices
# ========================
Demo_Html_Heading("Use case: display of matrices");
WcHtmlOut("<p>It is simple to output pretty matrices using HTML tables with a little CSS styling.</p>");
HTMLPrintMatrix(IdentityMat(3,Integers));
WcHtmlOut("<br><p>The demonstration has installed a function <code>HTMLPrintMatrix</code>, which will pretty-print an arbitrary matrix in a similar manner. For example, the following command will pretty-print a random 4x5 matrix:</p> <p><code>HTMLPrintMatrix(RandomMat(4,5,Integers));;</code></p>");