A little magnifying glass

<!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>A little magnifying glass</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/A+little+magnifying+glass?A=1'>Comment</a></li> <li><a rel='nofollow' hidden='true' href='/_edit/A+little+magnifying+glass'>Edit</a></li> <li><a rel='nofollow' href='/_upload/A+little+magnifying+glass'>Upload</a></li> <li><a rel='nofollow' href='/ref/A+little+magnifying+glass'>References</a></li> <li><a rel='nofollow' href='/history/A+little+magnifying+glass'>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/A+little+magnifying+glass'>References</a></li> <li><a rel='nofollow' href='/history/A+little+magnifying+glass'>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>A little magnifying glass</h2> </div> </div> <div class='row'> <div class='col-xs-12'> <p class='mkup_p'><a class='mkup_a mkup_known' href='/page/KBK'>KBK</a> (19 July 2003) - A questioner in one of the newsgroups asked about how to create a widget that functions as a magifying glass, showing the content of another widget enlarged. The window capture facility of the <a class='mkup_a mkup_known' href='/page/Img'>Img</a> extension, now available with <a class='mkup_a mkup_known' href='/page/ActiveTcl'>ActiveTcl</a>, combined with Tk's ability to do <a class='mkup_a mkup_known' href='/page/Image+scaling'>image scaling</a>, can be combined readily to give this capability.</p><p class='mkup_p'><img class='mkup_img' alt='WikiDbImage magnify.jpg' src='/image/WikiDbImage+magnify%2Ejpg'></p><hr class='mkup_hr'><div class='sh_sourceCode'><button class='copybtn btn pull-right' data-clipboard-target='#mkup_code_0' title='Click to copy code snippet to clipboard'><span class='glyphicon glyphicon-copy' aria-hidden='true'></span></button><pre id='mkup_code_0' class='sh_tcl sh_sourceCode'># Let's begin by building a trivial GUI package require Tk package require Img wm geom . +0+0 grid [text .t -width 20 -height 10 -cursor tcross -font {Courier 12}] .t insert end { this widget contains several lines of text to demonstrate how to magnify a widget's content in another widget. } # We create an image to serve as the magnifier set mag [image create photo -width 192 -height 192] # And we display the magnifier in another toplevel toplevel .mag wm title .mag Magnifier grid [label .mag.l -image $mag] wm geom .mag +400+0 # We establish a binding to make the magnifying glass update when the mouse moves bind .t <Motion> {magnify %W %x %y} # And the 'magnify' procedure does all the work. proc magnify { w x y } { variable mag set wid [winfo width $w] set ht [winfo height $w] if { $x < 12 } { set x 12 } if { $x > $wid - 13 } { set x [expr { $wid - 13 }] } if { $y < 12 } { set y 12 } if { $y > $ht - 13 } { set y [expr { $ht - 13 }] } set from [image create photo -format window -data $w] $mag copy $from \ -from [expr { $x - 12 }] [expr { $y - 12 }] \ [expr { $x + 12 }] [expr { $y + 12 }] \ -to 0 0 191 191 \ -zoom 8 rename $from {} }</pre></div><hr class='mkup_hr'><p class='mkup_p'>Note that this procedure will work only for a single widget. If you need multiple widgets under your magnifier, another page discusses how to <a class='mkup_a mkup_known' href='/page/Capture+a+window+into+an+image'>capture a window into an image</a>.</p><hr><div class='mkup_centered'><table class='mkup_categories'><tr><td class='mkup_td'><a class='mkup_a' href='/page/Category+Graphics'>Category Graphics</a></td><td class='mkup_td'><a class='mkup_a' href='/page/Category+GUI'>Category GUI</a></td></tr></table></div> </div> </div> <div class='row'> <div class='col-xs-12'> <div class='Footer'>Updated 2012-11-09 22:07: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

A little magnifying glass