TK GUI having scrolling canvasCan we create a window in canvas, with relative positioning?
Or is there any way to place the object in canvas that could be binded with canvas for scrolling.
You can put windows into canvases such that they can be scrolled. To do this, you should create a window item:
canvas .c -borderwidth 0 -highlightthickness 0
button .c.btn
# Arbitrary coordinates
.c create window 20 20 -window .c.btn
If you're doing this, be aware that it's really advised to make the window being scrolled be a child of the canvas, and to disable (well, make zero width) any border or highlight ring of the canvas. Otherwise you'll get “interesting” graphical artefacts when the window goes over the edge or even out of the canvas entirely. Windows are only ever clipped by their parent widgets (up to the nearest toplevel).
Related
I am trying to write a simple GUI for editing key-value pairs in TCL+Tk. It is based on a vertical ttk::panedwindow widget containing an arbitrary number of horizontal ttk::panedwindow widgets, each with a ttk::entry on the left side and a text widget on the right side. Below the main ttk::panedwindow is a frame containing buttons to do things like saving and loading files and adding new rows. This works fine, with all widgets scaling as I expect them to, but when more rows are added they get squeezed together or stretch the window.
Trying to make the window vertically scrollable didn't work properly. Tk is unfortunately very picky about what it will let me attatch scrollbars to, so I couldn't just put one on the main ttk::panedwindow. I tried various hacks listed on wiki.tcl.tk, but most of them use a canvas widget and scroll in both directions. If I remove the horizontal scrollbar, it won't be there anymore but the widgets will still extend beyond the edge of the window or stop before the edge of the window.
I also tried BWidget, but I didn't understand the relationship between the ScrolledWindow and ScrollableFrame widgets that I was told to use together. When I followed the examples they had the same problem as the canvas version. I suspect that they actually use a canvas internally rather than implementing a true scrollable frame.
How can I make the main interface scale to the dimensions of the window while also allowing vertical scrolling? I'm using Linux, if that helps.
I made a GIF to show what I want:
dissapearing scrollbar is optional, it just happened like that. The changing scribbles represent the lines of text adjusting to the available space.
So… you want the content to be “natural” in the vertical direction, yet stretched in the horizontal direction? Tricksy.
Your basic approach is going to be to put a frame (or ttk::frame) inside a canvas, put your “interesting” content inside the frame and add a scrollbar to the canvas. However, that's not the tricky bit. The tricky part is that you need to notice changes to the dimensions of the canvas and to the dimensions of the frame; a change to the frame should cause the adjustment of the canvas's bounding box, and a change to the canvas should cause adjustment to the requested width of the frame.
To notice a change to the size of any widget, you bind to the <Configure> event sent to that widget and use the %w and %h to get the width and height that the widget is being set to. (Indeed, geometry managers like grid and pack work exactly like that internally, except they use C-level bindings and not script-level ones.)
bind $canvas <Configure> {adjustCanvasDimensions %W %w %h}
bind $frame <Configure {adjustFrameDimensions %W %w %h}
proc adjustCanvasDimensions {theCanvas width height} {
set theFrame $theCanvas.frame
set oldwidth [$theFrame cget -width]
if {$width != $oldwidth} {
$theFrame configure -width $width
}
# Consider adjusting the frame height if canvas height greater
}
proc adjustFrameDimensions {theFrame width height} {
set theCanvas [winfo parent $theFrame]
$theCanvas configure -bbox [list 0 0 $width $height]
}
Or something like that. This is untested code (and assumes you put the frame in the canvas, etc.) but ought to show you the way forward.
I need to put more than one (3) HTML5 Canvas side by side. Left and right will be 200px wide. Center will fill the rest of the space. All three need to fill the screen vertically.
What I'm doing is building a drawing program. Left and right will be drawing tools. Center will be the drawing area. I think I need a canvas specifically for the drawing area in order to zoom, pan, scroll the drawing without the image overlapping the tool windows. Essentially I'm using the center canvas as a clipping range. I don't know if this is the best way to do this or not.
What I've tried is putting 3 <canvas>es on the screen, but they just overlap. I put 3 in <div>s, but they just stack.
Thoughts?
As per the comments, <canvas> isn’t a void tag, so you need to write </canvas>.
You can also use that to provide helpful text in case somebody’s browsing in something not-quite-modern:
<canvas id="one">
Hey, your browser doesn’t support the Canvas API!
You should upgrade if you want to use this.
</canvas>
i cannot remember how i can "hide" a movieclip inside the bounds of its parent, so that i can use a scrollbar, and only see what is inside the container if i scroll down? My container is a small rectangle and contains different pictures, but we can see all the pictures even if they are outside the bounds of the parent movieclip.
Would you know how to do this? not the scroll system, just how to : only see what is inside the bounds of the container?
Thanks
That would be masking, which can be done through the timeline layers or through code.
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.
I have got a canvas tag in a page wrapped within a div.
In order to show the canvas in IE, I'm using the excanvas script from Google.
I'd like to be able to scroll the contents of the canvas, since it's supposed to be wider and taller than the viewport (the div).
I have defined the following styles:
The div overflow is scroll or auto
The canvas position is relative
In Firefox, I then get a scrolling viewport of the cancas, but in Internet Explorer (7), the canvas does not move.
Does anybody know whether it's possible to get a scrolling canvas in IE, and if yes how can it be done?
Thanks in advance.
You may want to set the scroll property on scroll only.
But not sure, could you put a bit of code for us to see it?