I am using a picturebox to draw a graticule scale. See the attachment.
What I have been asked to do is allow the user to click in the picturebox and be able to drag their mouse. As they drag their mouse the numeric scale would increase or decrease as they drag. an example is they click at sat 14200 and drag the mouse down the numbers at the top of the scale would increase as the numbers at the bottom of the scale would drop off the picturebox and the rest of the scale would move along with the drag.
As I said previously I am not really familiar with the picturebox control except some simple drawing. Is this possible what has been asked of me and if so can someone point me in the direction I need to go in..
dragging and auto-panning inside viewport and flickscrolling
Having an image that is larger than the picturebox
and allowing different parts of it to be shown (come into view)
is what I call: "viewporting".
I don't know of any sample or demo written in VB6
that specifically does what you describe
(viewporting using direct dragging).
There are basically two main ways to do to scroll a graphic
within a picturebox control.
Use the picturebox-inside-a-picturebox approach (and drag the inner picbox control).
There is example attached to this post that uses scrollbars
but could be modified to use mouse events dragging.
Or use a picturebox controls' mouse events (MouseDown, MouseMove, MouseUp),
in combination with PaintPicture or the Bitblt API
to re-position the graticule image.
It's basically the type of bitblt drag shown in this thread.
You may also benefit from becoming familiar with "flickscrolling"
Normally when a mouse drag stops then the picture movement stops
(except for maybe a "snapto" drop adjust).
However on a iPhone there is a little bit of "play" - the scrolling continues on
for a little bit even after the drag stops (the finger touch goes off the screen),
and then the graphic kind of slows and "settles back" into position.
It's a very sophisticated behavior
and only one thread has ever attempted such a thing using VB6.
You may want to go through and download all the attachments to that thread and see if any interest you.
Have you ever heard of "autopanning"?
It's where as the mouse gets close to the edge of a picturebox the image inside
auto scrolls to reveal the hidden portions of the image.
The attachments to posts #10 and #11 of this thread show how its done by detecting mouseover events
tied into using invisible (transparent) strategically positioned labels.
Quote:
Originally Posted by n2amg
The only thing is I am not using an image. I am drawing the scale on the picturebox directly.
Note: If you are creating the graphic through drawing at runtime, do it on
an offscreen picturebox (AutoRedraw set to True, and Visible property set to false).
Then you can use PaintPicture or the Bitblt API to transfer the part of the image you want to see into the viewport,
from the hidden (non-visible) picturebox
to the visible onscreen viewporting destination picturebox control.
The other way is to use a memory device context.
You draw on the memDC and transfer the drawn image to a picturebox.
The attachment to this post provides an example.
If you are drawing the graticule then it should be a simple matter of redrawing it as the user drags the mouse up and down.
To simplify this, I normally draw the scale a bit longer than the window it is in.
So, for instance, you're currently show about 14211 down to 14000, and have a bit of gap at the bottom.
If I'm going to move the scale up and down I don't want to see the gap moving, so with your example in the position it is in, I would probably be currently drawing 14220 down to 13960.
That is a total range of 260 units to be drawn.
So, I would plan on always drawing 260 units, and the top unit would always some multiple of 20, thus the last item on the bottom would also be a multiple of 20.
That should make the drawing part relatively simple, since you would alway print the number at the top and bottom and all the in-between position at intervals of 20.
The "trick" is to offset the top of your drawing based on the value of your scale at the top of the window.
So, for instance to recreate the scale you have, it is currently at 14211 at the top of the window.
The next interval value of 20 above that would be 14220, which we can calculate using the Mod function like this.
(14211 - (14211 Mod 20)) + 20
The Mod function gives you the integer remainder of a divide, so the remainder of 14211 \ 20 is 11.
14211 - 11 = 14200, which is the interval of 20 below 14211.
We then add 20 to that to that to give us the interval of 20 above 14211.
So, we know we want to draw our scale starting with 14220 at the top.
But since we want 14211 to be displayed at the top, we need to start drawing the 14220
9 scale units (14220 - 14211) above the window.
So, just offset your drawing vertically by that amount.
That is about all there is to it.
1. Determine the first visible value at the top of the window.
2. Determine the first major tick value above that value.
3. Determine how far above the first visible value to start drawing the scale.
4. Draw the scale.
Quick example code. Place a picturebox on a form in a new project and paste the code in.
The picturebox will be resized to show 240 units vertically (each unit will be 3 pixels tall, so that the space between lines will be clear and uniform).
Drag up and down in the picturebox and the scale should be redrawn following the mouse.
Code:
Option Explicit
Dim ScaleValueAtTop As Single
Private Sub Form_Load()
Picture1.BackColor = vbWhite
Picture1.AutoRedraw = True 'so we don't get flashing and contents are persistent
Me.ScaleMode = vbPixels
Picture1.ScaleMode = vbPixels
'Want our scale to be 240 units high, 3 pixels per unit for clarity and consistent pixel mapping)
Picture1.Height = Picture1.Height + ((3 * 240) - Picture1.ScaleHeight)
Picture1.Width = 180 'arbitrary
Picture1.ScaleHeight = 240 'Set Picture1's scale to be 240 logical units tall
ScaleValueAtTop = 14211 'initially put 14211 at the top
DrawScale
End Sub
Private Sub DrawScale()
Dim i As Long
Dim TickValue As Long
Dim Yoffset As Integer
Dim scaleRange As Long
scaleRange = 260 'we draw an extra 20 units (260 instead of 240) to account
'for the amount the scale slides from offscreen to onscreen
'so we don't have a moving gap at the bottom
Picture1.Cls
'Round the value at the top of the window down to the nearest 20 then
'add 20 to identify the first value at the top of the scale (drawn above top)
TickValue = (ScaleValueAtTop - (ScaleValueAtTop Mod 20)) + 20
'determine how manu units above the value at the top of the window
'we want to start drawing the scale.
'ie, if the value at the top is 14211 the first number at the top of the scale
'will be 14220, and we want to start drawing that 9 units above the top of the
'window, so that 14211 is at the top of the window.
' 14211 Mod 20 is equal to 11.
' 20 - 11 is equal to 9
'In addition, to center the text, we offset an additional 1/2 of the height
'of the text.
Yoffset = TickValue - ScaleValueAtTop + Picture1.TextHeight("X") / 2
'Draw numbers
For i = 0 To scaleRange Step 20 'every 20 units over our scale range
Picture1.CurrentY = (i - Yoffset)
Picture1.Print (TickValue)
TickValue = TickValue - 20
Next
'Take the Text Centering offset back out
Yoffset = Yoffset - Picture1.TextHeight("X") / 2
'Draw unit Ticks
For i = 0 To scaleRange Step 1
Picture1.Line (60, i - Yoffset)-Step(10, 0)
Next
'Draw fives Ticks
For i = 0 To scaleRange Step 5
Picture1.Line (55, i - Yoffset)-Step(10, 0)
Next
'Draw tens Ticks
For i = 0 To scaleRange Step 10
Picture1.Line (50, i - Yoffset)-Step(10, 0)
Next
'Draw 20 Ticks
For i = 0 To scaleRange Step 20
Picture1.Line (40, i - Yoffset)-Step(20, 0)
Next
End Sub
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Static ly As Single
If Button = vbLeftButton Then
ScaleValueAtTop = ScaleValueAtTop - ((ly - Y)) '2 pixels per unit
DrawScale
End If
ly = Y
End Sub
p.s. If you're using some versions of Internet Explorer, you may not be able to scroll the window to see all the code. If that is the case, drag on the web page to select the code box area, copy it, and paste it into an editor, like notepad. You can then remove any extra stuff picked up in front or behind the code pasted into the editor and then paste the clean code into your project.
The last Sub is the Mouse_Move, so if you see the End Sub at the end of that, you're seeing everything.
The
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
I do have one question. There are times that the scale needs to be zoomed as the data that gets written onto the scale is to much and the scale needs to be zoomed so the total number of indicators might only be say 100 or 50 units total. Would I just need to change the .ScaleHeight or the scale range to have the zooming in to take effect..
Here is an example of why I would need to zoom the scale. notice between 14070 and 14100 how bunched up the data becomes. by zooming it makes it easier to see exactly where the data is positioned.
Rick
Well, my example is setting the ScaleHeight of the picturebox to 240 in the Load event.
You could set that to 120 and you will see the scale expand to show only 120 units in the window.
You can change the ScaleHeight dynamically to scale up or down the drawing.
In the case of my example, I wouldn't go above 240 because the 3 pixel spacing for the units make the unit lines clear.
And, to keep the lines even I would add more logic when scaling to "bump" the value so that the unit scale was always an integer number of pixels.
That is, the default example sets the scales so each unit of the scale is 3 pixels.
As I expanded the scale I would calculate the scale so that each unit would be 4 pixels, then 5 pixels, then 6 etc....
This would keep the lines evenly spaced, but I'll leave that as an exercise.
For a quick example of simple dynamic scaling in my original example, change the MouseMove event to process RightButton dragging to change the scale.
Replacing the MouseMove event with the following code will do a simple scaling so that the scale will show 240 units max, and 20 units minimum.
No other change needs to be done to the original example to demonstrate scaling.
Code:
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Static ly As Single
If Button = vbLeftButton Then
ScaleValueAtTop = ScaleValueAtTop - ((ly - Y)) '2 pixels per unit
DrawScale
ElseIf Button = vbRightButton Then 'Change the scale
Picture1.ScaleHeight = Picture1.ScaleHeight + (ly - Y)
If Picture1.ScaleHeight > 240 Then
Picture1.ScaleHeight = 240
ElseIf Picture1.ScaleHeight < 20 Then
Picture1.ScaleHeight = 20
End If
DrawScale
End If
ly = Y
End Sub
p.s. Oh, down Binghamton way.
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
Thanks passel..
I was not sure if changing the scaleheight would also need to changethe scale range or not but your example works perfect. I will be using the Mouse Scroll to do the zooming in and out..
Technically, you could change the scale range as well to draw less when less is shown, but it would probably make little difference from the users perspective and just complicate the code.
So, always drawing 260 units worth of data, even if only 20 of it is showing in the window, is a good trade off.
Another approach to doing this is to actually change the ScaleTop property to your scale's top value.
The advantage to that is that you plot the scale vertically using the actual values of your scale.
In the case where your larger numbers are higher (toward the top) of the scale, which is the opposite of the Windows default ordering (0 at the top, increasing going down), you would set the ScaleHeight to a negative number (so you are starting with the ScaleTop value and decreasing as you go down).
The disadvantage to changing the scaletop (or any of the scale values) while dragging with the mouse, is that the mouse coordinates are based on the scale so you are changing your mouse coordinates (and your reference) at the same time you're trying to use them.
Since your current application probably wouldn't benefit by having the coordinate system match the scale directly, we won't go into the details now. I need to get to my paid work anyway.
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
an alternative to passel's right click drag scaling
It's probably just me but passel's right click drag scaling technique,
seems more "developer-oriented" than "end user oriented".
I'm mean how many other Windows programs / application do you know of
that uses a right click drag movement for adjusting things.
Granted, that would probably make it somewhat uniquely / special app --
however I think a separate scaling panel with an embedded
virtual control might provide a more "tangible" type of user
interface.
There is a virtual slider that uses a triangle pointer as a "thumb" attached to this post.
The original code (I believe) was rather hastily thrown together for that particular thread
and needed a little revision to add some end of picbox constraining code,
so I'll include the revision1 update I did
as well as the custom "mashup" type merger between that update
and my autopan sample with passel's scaling technique added.
Unlike the standard VB6 slider control the virtual slider is design to "shim"
against that which it is adjusting in a very slim-line, almost svelte manner,
so you could even leave it's visibility toggled on all the time
and I'm pretty sure any user can figure out
what needs to be done to scale the graticule
without needed a separate set of instructions, or standalone help file.
I believe that anything that saves end users having to go around digging in the help file
makes them (perhaps) a little happier,
and possibly generates fewer aggravated calls to tech support,
(which at many small companies means the programmer him/her self..)
You're guilty of taking the example code literally again.
The point is the ScaleHeight can be adjusted dynamically.
How you do it is up to you.
Dragging with the right button was a simple and minimal way to demonstate what happens when the ScaleHeight is adjusted.
n2amg stated that he plans on using the scroll wheel to adjust the scaling.
Also, a lot of programs do use dragging with the right button to scale.
Quote:
in Matplotlib:
The radius scale can be zoomed in and out using the right mouse button
in Electric VLSI Design:
... can also scale continuously by clicking the right button and dragging up and down
ArcGIS 3D Analyst:
Another way to scale features is to interactively resize them using the Edit Placement tool. Right-click and drag, while holding the SHIFT key, to interactively scale a feature directly in the 3D view.
MeshMixer:
You can also rotate the part by right-dragging and if you shift+right-drag,
you can scale the part.
Audacity 2.0.1:
For horizontal scale zooming right-click (CTRL + click on a Mac) the mouse at a point to zoom out, or right-click, drag and release to zoom in
etc....
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
Options are good and software I don't use but its interesting to find out about..
Quote:
Originally Posted by passel
The point is the ScaleHeight can be adjusted dynamically.
How you do it is up to you.
Yes options are good and I didn't mean to imply that n2amg shouldn't look at all available options and decide what suits his needs best.
Quote:
n2amg stated that he plans on using the scroll wheel to adjust the scaling.
That's the neat thing about virtual controls..
They can work with any events, and there's no reason the triangle slider thumb couldn't be coded to coordinate with a mouse wheel event.
I don't have one of those scroll wheel type mouses for testing though.
In regard to the software you mentioned:
Matplotlib: - Isn't that python based?
The only thing I recall playing around with that was python based was
Blender and the interface for that software proven too non-intuitive.
Electric VLSI Design - Isn't hat some kind of circuit design package software?
I've used OrCad and Tango (when I took some electrical engineering course in college),
and some of the free PCB design tools out, there but never used anything like that from Oracle.
ArcGIS 3D Analyst: It looks like, (from here), that the cost for a single user license is $2,500.00.
Most of the commercial software I buy is bought used at Goodwill for less than $10.00.
Haven't seen a used copy of ArcGIS show up at G.I.C.W. yet.
Audacity - Isn't that some kind of music or pod-casting software?
I don't deal with audio at all unless its in connection with doing non-linear video editing
where I use Final Cut Pro or Adobe Premiere.
However I have full (older, used) versions of Maya and 3D Studio Max and
they usually have enough plugins to export to just about any 3D format.
*******here's my abbreviated 3D software rant*******************
The trouble is that there is no real standard way to get full rigged character models
from one 3D package to another (with careful texture wrapping, bones and IK-based motioning intact).
Then the Google coders can spend all their time developing a "higher order" (level) of the Collada DAE standard.
that has fully realized interchange support for just about any 3D
modeling feature that's available out there (in any of the advanced commercial
3D character modeling software packages).
It's pretty depressing that the Trimble people haven't found a way
to develop Sketchup plugins in any other language than Ruby.
Maybe it's one of those Ruby Gem things that would mean Sketchup would have to be
re-written in one of the .Net languages to make's it's plugin implementation
flexible enough to script in many different languages.
I wish someone (or some open standards group) would develop
(or "coalesce") a true "3D scene management" standard
that could allow whole scenes to be exported from the UE4 IDE (links here).
****************************end rant***********************
Overall its interesting to hear what other people are using for software.
When passel recommended Oracle's VirtualBox here, I had never heard of it,
(having used mostly VMWare products for running hadoop).
However I found there was a virtualbox version of Cloudera's Hadoop Demo
and it worked great (for checking out the demo).
I also found out you can even use VirtualBox with Trayit (instructions here),
so I may play around some more (in the future) with different uses for virtualbox.
I guess everyone by now has Window8 running on/in a virtualbox..
There are some instances that I do need to change the scaleheight to something other than 240. The actual coverage in the one frequency range is a total of 350 hz so to cover the whole range I need to change the scale. But I need to experiment with this some more as with the scale set to 350 and the rang set to 370 I am still missing about 10 hz from covering the whole scale. as different frequency ranges are set the amount of range will change.
the dragging works perfect using the left mouse button and I have set zooming by using the scroll mouse using 50hz with each scroll.
Surfer I will look at your code in the next day or so at the moment I'm typing this while at the hospital waiting for a grand daughter to be born. So I will get back to coding in a day or so....
Say the top of the scale is set on 14200 or whenever number after scrolling the scale up or down. and say the bottom number is on say 14000. If the user resizes the form what calculation would I use to keep the 14000 at the bottom of the window as the form resizes??
What I have done is place the picture1.scaleheight=xxx in the form_resize event this allows the scale to be moved when the resize takes place. The only problem to that is as I make the form bigger the scale number at the bottom moves away from the bottom of the form and other graticule marks are shown. I'm trying to keep things at the same place as the form gets bigger..
I've been trying to figure this out but am not getting anyplace..
Do you want the scale to expand when you resize, so that the same amount of data is presented, or do you want to show more data, keeping the bottom of the scale the fixed point (showing more data at the top)?
I'll assume the second since for the first you would only need to keep resetting the scaleheight to its current value (one line of code) in the resize event to keep showing the same amount of data in the window (the unit size in pixels would expand), so the bottom value will remain the same as the scaleheight is unchanged.
The second case isn't too difficult either.
When you resize the window the scaleheight is automatically changed to keep the unit size the same (i.e. if you increase the window height, the scaleheight increases proportionately so your unit size remains the same).
So, to keep the same number at the bottom, you just have to add the change in scaleheight to the ScaleValueAtTop value.
Since I didn't have my previous example on this machine, I've copied the code from the posts above.
I added the variable, VisibleScale, to keep track of the height of the Visible area of the scale.
To demonstrate the two options, I added radio buttons to allow selection of either one of the two options.
In reality the code for the second option will work with the first option so doesn't need to be switched out.
That is, the second option requires adding the difference between the previous scaleheight and the new scaleheight when the form is resized to adjust the top.
If we reset the scaleheight for option 1, then the difference is 0, which won't modify the top value, which is what we want for option 1.
(A long winded explanation just trying to say there is no code looking at the state of the Option2 value).
The code in the resize event looks like this {edit: but I added some extra comments here that are not in the zipped code.
Bottom line, if you were satisfied with option1, you would only need the one line:
Picture1.ScaleHeight = VisibleScale
in the Resize event.
If you wanted option2, you would only need the code after the If Block. }
Code:
Private Sub Picture1_Resize()
If Option1.Value Then 'if we want the scale to expand to show the same amount of data
'Our one-liner. All that would be necessary to keep same number at top and bottom of scale.
'The code after the if block implements option2 (and this if block and one-liner would not be needed).
Picture1.ScaleHeight = VisibleScale 'just reset the scaleheight to the current visiblescale
End If
ScaleValueAtTop = ScaleValueAtTop + (Picture1.ScaleHeight - VisibleScale) 'will be adding 0 if option 1 selected
VisibleScale = Picture1.ScaleHeight 'If option1 not selected, scaleheight has changed, update VisibleScale to match
DrawScale
End Sub
In case I was unable to be clearly understood, rather than having you try to paste changes into my previous posts, I'll attach the test project I just put together on this machine.
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
Thanks for the showing both ways. I will have to look at my code and see what is causing what I am seeing. I am trying to stretch the scale. I have reset the the scale height in the resize event but what I am seeing unlike in your project is as I make the window bigger the bottom number moves further away from the bottom and other graticules appear. I am wondering if it is that I am using a different scale height than 240 for so I can fit more of the actual range in the window. The actual range goes from 14000 to 14350 so I am using a scale height of 370. I'll go experiment some more..
The scaleheight should not make any difference.
You obviously realize I left a unused line in the code,
LastResizeScale = 240
and removed it to run.
I originally used that variable to keep track of the previous scaleheight when resizing but realized that the new variable "VisibleScale" could also serve that purpose, so removed the declaration and all other references.
I obviously did this while in the running code, so didn't hit the load event and realize I left that one.
Although I know it shouldn't make any difference, I did test using 370 vs 240 in my test code by adding a "Const MaxScale = 370" and replaced all the 240 with that constant. and modified the scaleRange setting to:
scaleRange = MaxScale + 20
Since the ScaleHeight is modified when you resize, perhaps somewhere you are not keeping track of what it currently is, or capture it after it is already changed.
That is why I added the VisibleScale variable to hold the scaleheight independent of the actual property, otherwise I would "lose" the value during the resize.
Quote:
Originally Posted by n2amg
... The actual range goes from 14000 to 14350 so I am using a scale height of 370. ...
Don't confuse scaleheight with the range of the scale being drawn.
Assuming you have not stretched the scale a visible range of 14000 to 14350 should have a scaleheight of 350, but you draw 370 worth to allow covering the up to 20 units of gap that may show at the bottom as you slide the graticule up and down.
My code, as it stands, is drawing much more than it needs to when the scale is zoomed in. It always draws MaxScale + 20, even if it only needs to draw 20+ 20 (at the minimum (most zoomed in) scale.
That observation tells me that the amount of drawing could be dynamically reduced simply by doing:
scaleRange = VisibleScale+20
instead of
scaleRange = MaxScale+20
The example does show some anomalies when the scale is expanded because of the mixed use of float and integer type variables in the calculations.
The integer variables will cause parts of the scale to jump in unit increments which is obvious the more pixels per unit you have (when zoomed in).
Probably Float types (singles) should be used everywhere that position and drawing is calculated and rounded to integers where needed for display.
So, in the DrawScale sub, change the type of YOffset and scaleRange to Single, and all parts of the drawing will move together when zoomed in and the form is resized.
I added a label to display the current Visible range and the other changes mentioned above, and am attaching the new version.
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET. subscribe
Another picturebox question
Linear Mode
