| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <title>A Colorful Table</title> |
| <link rel="stylesheet" href="../templates/wondrous/styles.css" type="text/css" /> |
| </head> |
| |
| <body> |
| <div id="container"> |
| <div id="header"> |
| <h1><a href="../index.html">Rivet</a></h1> |
| <h2 id="slogan">Webscripting for Tcl'ers</h2> |
| <div class="clear"></div> |
| </div> |
| <div id="body"> |
| <div id="content"> |
| <h2>A Colorful Table</h2> |
| <div class="example"> |
| <!-- p class="title"><b>Example 2. A Shaded Table</b></p--> |
| <div class="example-contents"> |
| <p style="width: 90%">In another simple example, we dynamically generate a table selecting a |
| different background color for each cell.:</p> |
| <pre class="programlisting">puts "<html><head>" |
| puts "<style>\n td { font-size: 12px; }" |
| puts "td.bright { color: #eee; }" |
| puts "td.dark { color: #222; }\n </style>" |
| puts "</head><body>" |
| puts "<table>" |
| |
| # we create a 8x8 table selecting a different background for each cell |
| |
| for {set i 0} { $i < 9 } {incr i} { |
| puts "<tr>" |
| for {set j 0} {$j < 9} {incr j} { |
| |
| set r [expr int(255 * ($i + $j) / 16)] |
| set g [expr int(255 * (8 - $i + $j) / 16)] |
| set b [expr int(255 * ($i + 8 - $j) / 16)] |
| |
| # determining the background luminosity (YIQ space of NTSC) and choosing |
| # the foreground color accordingly in order maintain maximum contrast |
| |
| if { [expr ($r*0.29894)+($g*0.58704)+($b*0.11402)] > 128} { |
| set cssclass "dark" |
| } else { |
| set cssclass "bright" |
| } |
| |
| puts [format "<td bgcolor=\"%02x%02x%02x\" class=\"%s\">$r $g $b</td>" $r $g $b $cssclass] |
| } |
| puts "</tr>" |
| } |
| puts "</table>" |
| puts "</body></html>"</pre> |
| <p style="width:90%"> |
| The text color is determined through a simple CSS rule we put within a |
| HTML <style> element. |
| Create a file (e.g. color-table.tcl) and put the following code in it. |
| If you read the code, you can see that this is pure Tcl. We |
| could take the same code, run it outside of Rivet, and it |
| would generate the same HTML! |
| </p> |
| <p style="width:90%">The result should look something like this:</p> |
| <p> |
| <img src="../picts/color-table.png"/> |
| </p> |
| </div> |
| </div> |
| |
| |
| |
| <div class="contentbottom"> |
| <div id="last_modified">Last Modified: 04-11-2020 00:10:39 UTC</div> |
| </div> |
| </div> |
| |
| <div class="sidebar"> |
| <ul> |
| <li id="tclstuff"> |
| <h4>Rivet & Tcl</h4> |
| <ul class="blocklist"> |
| <li class="navitem"> |
| <a class="navitem" title="The Rivet development team" href="about.html">About Us - Contact</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="Home of Apache Tcl related stuff" target="asf" href="http://tcl.apache.org/">Apache Tcl Home</a> |
| </li> |
| <li class="navitem"> |
| <a class="extern" title="The Tcl Developer Xchange" target="tclxchange" href="http://www.tcl.tk/">The Tcl/Tk Language</a> |
| </li> |
| <li class="navitem"> |
| <a class="extern" title="Tcl community wiki site" target="tclwiki" href="http://wiki.tcl.tk/">Tcl'ers Wiki</a> |
| </li> |
| </ul> |
| </li> |
| <li id="rivetstuff"> |
| <h4>Getting Rivet to Work</h4> |
| <ul class="blocklist"> |
| <li class="navitem"> |
| <a class="navitem" title="Getting Rivet" href="download.html">Getting Rivet</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="Release Notes" href="release%2dnotes.html">Release Notes</a> |
| </li> |
| <li class="navitem"> |
| <a class="extern" title="Apache Rivet Bugzilla" href="https://issues.apache.org/bugzilla/buglist.cgi?quicksearch=Rivet">Bug Reports</a> |
| </li> |
| </ul> |
| </li> |
| <li id="documentation"> |
| <h4>Documentation</h4> |
| <ul class="blocklist"> |
| <li class="navitem"> |
| <a class="navitem" title="Examples" href="hello%5fworld.html">Examples</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="Manuals" href="manuals.html">Manuals</a> |
| </li> |
| </ul> |
| </li> |
| |
| </ul> |
| <ul> |
| <li id="rivetexamples"> |
| <h4>Examples</h4> |
| <ul class="blocklist"> |
| <li class="navitem"> |
| <a class="navitem" title="Hello world!" href="hello%5fworld.html">Hello world!</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="A colorful table" href="colorful%5ftable.html">A colorful table</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="Variable Access" href="var%5faccess.html">Variable Access</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="File Upload" href="file%5fupload.html">File Upload</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="File Download" href="file%5fdownload.html">File Download</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="XML and Ajax" href="ajax.html">XML and Ajax</a> |
| </li> |
| <li class="navitem"> |
| <a class="navitem" title="Calendar" href="calendar.html">Calendar</a> |
| </li> |
| </ul> |
| </li> |
| |
| </ul> |
| <ul> |
| |
| </ul> |
| </div> |
| <div class="clear"></div> |
| </div> |
| </div> |
| <div id="footer"> |
| <div class="footer-content"> |
| <p><a href="http://www.apache.org/">Apache Software Foundation</a> | Design by <a href="http://www.spyka.net">Free CSS Templates</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a></p> |
| </div> |
| </div> |
| <div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body> |
| </html> |
| |