Showcase

<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <meta name='description' content='Tclers wiki'> <meta name='author' content=''> <link rel='icon' href='/img/favicon.ico'> <title>Showcase</title>  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel='stylesheet' href='/css/nikit.css' type='text/css'> <link rel='stylesheet' href='/css/sh_style.css' type='text/css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.bootstrap_3.min.css' type='text/css'> <script src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js'></script> </head> <body onload='sh_highlightDocument(); nikitUser();'> <nav class='navbar navbar-fixed-top navbar-inverse'> <div class='container'> <div class='navbar-header'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#myNavbar'> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </button> <ul class='nav navbar-nav'> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'> Tcler's Wiki<span class='caret'></span></a> <ul class='dropdown-menu scrollable-menu' role='menu'><li><a href='/welcome'>Home</a></li> <li><a rel='nofollow' href='/recent'>Changes</a></li> <li><a rel='nofollow' href='/_random'>Random page</a></li> <li><a rel='nofollow' href='/_new'>New page</a></li> </ul> </li> </ul> </div> <div class='collapse navbar-collapse' id='myNavbar'> <ul class='nav navbar-nav'> <li class='dropdown' id='li_idPageEdit' style='display:none'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'><span id=name_idPageEdit>Page</span><span class='caret'></span></a> <ul class='dropdown-menu scrollable-menu' role='menu'><li><a rel='nofollow' href='/_edit/Showcase?A=1'>Comment</a></li> <li><a rel='nofollow' hidden='true' href='/_edit/Showcase'>Edit</a></li> <li><a rel='nofollow' href='/_upload/Showcase'>Upload</a></li> <li><a rel='nofollow' href='/ref/Showcase'>References</a></li> <li><a rel='nofollow' href='/history/Showcase'>History</a></li> </ul> </li> <li class='dropdown' id='li_idPageNoEdit' style='display:none'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'><span id=name_idPageNoEdit>Page</span><span class='caret'></span></a> <ul class='dropdown-menu scrollable-menu' role='menu'><li><a rel='nofollow' href='/ref/Showcase'>References</a></li> <li><a rel='nofollow' href='/history/Showcase'>History</a></li> </ul> </li> <li><a href="/page/Showcase">Showcase</a></li> <li><a href="/page/Tcl+Tutorial+Lesson+0">Tutorial</a></li> <li><a href="/page/Articles">Articles</a></li> <li><a href="/page/Tcl+Playground">Playground</a></li> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'> Help<span class='caret'></span></a> <ul class='dropdown-menu scrollable-menu' role='menu'><li><a rel='nofollow' href='/page/Help'>Page Markup</a></li> <li><a rel='nofollow' href='/page/How+do+Wiki+Categories+work'>Wiki Categories</a></li> <li><a rel='nofollow' href='/page/Contents'>Topics</a></li> <li><a rel='nofollow' target='_blank' href='https://chiselapp.com/user/stevel/repository/nikit/ticket'>Report Problems</a></li> <li><a rel='nofollow' href='/privacy'>Privacy</a></li> <li><a rel='nofollow' href='/license'>License</a></li> </ul> </li> </ul> <ul class='nav navbar-nav navbar-right'> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'><span id=name_SMenu>User</span><span class='caret'></span></a> <ul class='dropdown-menu' id='ul_SMenu'> </ul> </li> </ul> <form class='navbar-form navbar-right' method='post' action='/search' id='searchform'> <input name='Q' type='text' class='form-control' placeholder='Search...'/> <input type="hidden" name="sites" value="wiki.tcl-lang.org"/> </form> </div> </div> </nav> <div class='container'> <div class='row'> <div class='col-xs-12'> <h2>Showcase</h2> </div> </div> <div class='row'> <div class='col-xs-12'> <p class='mkup_p'>By clicking on the image, an interactive demonstration of the Tcl/Tk application is launched using <a class='mkup_a mkup_known' href='/page/CloudTk'>CloudTk</a>. Over 100 Tcl/Tk applications listed from this wiki are <a rel='nofollow' class='mkup_a' href='https://wiki.tcl-lang.org/search?Q="Below%20is%20an%20online%20demo%20using%20CloudTk"'>demonstrated here <span class='glyphicon glyphicon-globe' aria-hidden='true'></span></a>. To view the Tcl/Tk Widget Demonstration, go to the "Playground" from the menu above and then select "Demos" in the "Tcl-Playground" - Console menu.</p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Thumbnail Gallery</title> <style> /* Reset default margin and padding */ html, body { margin: 0; padding: 0; } /* Style for the web page content */ .content { /* Add some content styles as needed */ padding: 20px; } /* Style for the thumbnail container */ .thumbnail-container { display: flex; /* Use flexbox to display thumbnails side by side */ margin-top: 20px; /* Adjust the margin to control the vertical separation */ } /* Style for the iframe container */ .iframe-container { display: none; /* Initially hide the iframe container */ position: fixed; /* Fixed positioning to appear on top */ top: 50px; /* Adjust the top position as needed */ left: 50px; /* Adjust the left position as needed */ z-index: 9999; /* Set a high z-index to ensure it appears on top */ border: 2px solid #ccc; /* Add a border for styling */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a box shadow for depth */ } /* Style for the iframe */ iframe { width: 100%; height: 100%; } /* Style for the close button */ .close-button { position: absolute; top: 10px; right: 10px; background-color: #f44336; color: white; border: none; border-radius: 50%; padding: 10px 15px; cursor: pointer; } /* Style for the overlay to disable parent page links */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ z-index: 9998; /* Below the iframe container */ } /* Style for thumbnail images */ .thumbnail { width: 200px; /* Adjust thumbnail size as needed */ margin: 10px; cursor: pointer; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Add a shadow around the image */ } /* Style for thumbnail links */ .thumbnail a { text-decoration: none; text-align: center; color: #00bff; display: block; /* Make the entire thumbnail clickable */ } /* Style for the thumbnail labels */ .thumbnail-label { text-align: center; } </style> </head> <body> <div class="content">  <div class="thumbnail-container"> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/WikiDbImage+spirograph.png" alt="SpiroGraph" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=SpiroGraph', 650, 650)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/SpiroGraph">SpiroGraph wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/3D-polyhedra-with-simple-tk-canvas-3display.jpg" alt="3D polyhedra with simple tk canvas" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=3D-polyhedra-with-simple-tk-canvas', 500, 620)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/3D+polyhedra+with+simple+tk+canvas">3D polyhedra with simple tk canvas wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/tkengine11" alt="tkEngine" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=tkEngine', 500, 400)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/tkEngine">tkEngine wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/Pave-sort-of-geometry-manager-test2t.png" alt="Pave, sort of geometry manager" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=Pave-sort-of-geometry-manager', 800, 700)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/Pave%2C+sort+of+geometry+manager">Pave, sort of geometry manager wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/Zen+Loops+screenshot" alt="Zen Loops" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=Zen-Loops', 600, 600)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/Zen+Loops">Zen Loops wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/WikiDbImage+trains.jpg" alt="Trains3" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=trains3-tcl', 1075, 450)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/trains3.tcl">trains3.tcl wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/TkPool.gif" alt="TkPool" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=TkPool', 600, 650)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/TkPool">TkPool wiki page</a> </div>  </div>  <div class="thumbnail-container"> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/a" alt="Canvas3d" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=Canvas3d', 800, 700)"> <p class="thumbnail-label">Canvas3d</p> </p> <a href="https://wiki.tcl-lang.org/page/Canvas3d">Canvas3d wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/1010!+screenshot2" alt="1010!" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=1010', 480, 710)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/1010%21">1010! wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/dgw::hyperhelp-image" alt="hyperhelp-package" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=hyperhelp-package', 900, 600)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/hyperhelp-package">hyperhelp-package wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/vetter_TriPeaks_feltAndCards_screenshot_741x416.jpg" alt="TriPeaks Solitaire" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=TriPeaks-Solitaire', 750, 450)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/TriPeaks+Solitaire">TriPeaks Solitaire wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/HP-15+Simulation-HP-15C.png" alt="HP-15 Simulation" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=HP-15-Simulation', 600, 400)"> <p class="thumbnail-label">HP-15 Simulation</p> </p> <a href="https://wiki.tcl-lang.org/page/HP-15+Simulation"> HP-15 Simulation wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/GRIDPLUS2-gpexample6-2.gif" alt="GRIDPLUS2" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=gridplus-example6', 790, 500)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/GRIDPLUS2"> GRIDPLUS2 wiki page</a> </div> <div class="thumbnail"> <img src="https://wiki.tcl-lang.org/image/WikiDbImage+trianglemadness.jpg" alt="Triangle Madness" onclick="openIframe('https://cloudtk-app.tcl-lang.org/cloudtk/VNC?session=new&Tk=Triangle-Madness', 750, 600)"> <p class="thumbnail-label"><img src='https://wiki.tcl-lang.org/image/Tcl9powered' width='80' height='45'/></p> </p> <a href="https://wiki.tcl-lang.org/page/Triangle+Madness">Triangle Madness wiki page</a> </div> </div> <div class="iframe-container" id="iframeContainer"> <button class="close-button" onclick="closeIframe()">X</button> <iframe src="" frameborder="0" allowfullscreen></iframe> </div> <div class="overlay" id="overlay"></div> <script> // JavaScript function to open the iframe centered on the screen function openIframe(src, width, height) { var iframeContainer = document.getElementById('iframeContainer'); var overlay = document.getElementById('overlay'); var iframe = iframeContainer.querySelector('iframe'); var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; // Calculate the position to center the iframe var left = (screenWidth - width) / 2; var top = (screenHeight - height) / 2; // Set the iframe position and size iframe.style.width = width + 'px'; iframe.style.height = height + 'px'; iframeContainer.style.left = left + 'px'; iframeContainer.style.top = top + 'px'; // Disable parent page links by showing the overlay overlay.style.display = 'block'; iframe.src = src; iframeContainer.style.display = 'block'; } // JavaScript function to close the iframe and enable parent page links function closeIframe() { var iframeContainer = document.getElementById('iframeContainer'); var overlay = document.getElementById('overlay'); var iframe = iframeContainer.querySelector('iframe'); // Clear the src attribute to unload the content and reset the iframe iframe.src = ''; // Enable parent page links by hiding the overlay overlay.style.display = 'none'; iframeContainer.style.display = 'none'; } </script> </body> </html> </div> </div> <div class='row'> <div class='col-xs-12'> <div class='Footer'>Updated 2025-03-11 17:53:57</div> </div> </div> </div>  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.combined.js'></script>  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> <script type='text/javascript' src='/scripts/nikit.js'></script> <script type='text/javascript' src='/scripts/sh_main.js'></script> <script type='text/javascript' src='/scripts/sh_tcl.js'></script> <script type='text/javascript' src='/scripts/sh_c.js'></script> <script type='text/javascript' src='/scripts/sh_cpp.js'></script>  <script src='https://hcaptcha.com/1/api.js'></script> <script>var clipboard = new ClipboardJS('.copybtn', { text: function(trigger) { return document.querySelector(trigger.getAttribute('data-clipboard-target')).textContent + '\n'; } }); sort_tables(); </script> </body> </html>

CINXE.COM

Showcase