Results 1 to 4 of 4

Thread: Just to seed some ideas: IPOD-like interface for a touchscreen

  1. #1
    Newbie
    Join Date
    Apr 2008
    Location
    Baghdad, Iraq/Fort Bragg, NC/Saginaw, MI
    Posts
    27

    Just to seed some ideas: IPOD-like interface for a touchscreen

    First off, I'd like to state, that I hate Ipods with a passion, and would like nothing more than to run every ipod in the world through a woodchipper.

    Now, with that aside, I do however, like the interface, and spent a few hours writing some mock-up code to simulate one. This should give you a rather simplistic design, with 5 buttons (play/pause, next, prev, mute, and (the middle) select)...

    I added a "debug" mode that custom paints a crappy interface for troubleshooting, but this should prolly be skinned with a decent picture.

    Also, this code is far from perfect, but I wouldn't mind seeing a similar interface i carpc's in the future.


    Logic:
    click once, under 200ms: it clicks the selected button
    hold the mouse down over 200ms, and move the cursor, it inc's or dec's the "scrollpos" variable appropriately.

    The rest should be self explanitory.



    (written in VB.NET 2008)

    1) Create a windows forms project (Visual Basic 2008/.NET 3.5.. might work with .net 2.0, not sure)
    2) slap a 300x300 PictureBox in it, with a name of PictureBox1
    3) add 2 labels, named Label4 and Label5
    (label4 will give ya the current scoll position, label5 will give you the last button clicked)
    4) paste this in Form1.vb:

    Code:
    Public Class Form1
    
        Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
            Dim gp As Point = Me.PointToClient(MousePosition) - PictureBox1.Location
            intscroll = Math.Atan2((gp.X - 150), (gp.Y - 150))
            intclick = My.Computer.Clock.TickCount
        End Sub
    
        Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
            If My.Computer.Clock.TickCount - intclick < 200 Then
                'we have a less than 200ms click!
                'now lets find out what the fudge was clicked!
                Dim gp As Point = Me.PointToClient(MousePosition) - PictureBox1.Location
                Dim dist As Integer = Math.Sqrt(Math.Pow((150 - gp.X), 2) + Math.Pow((150 - gp.Y), 2))
                Dim angle As Double = Math.Atan2((gp.X - 150), (gp.Y - 150))
                If dist <= centerrad / 2 Then
                    'middle button
                    Label5.Text = "Select"
                Else
                    'it was not the center button, lets find out which quadrent it falls in
                    Dim quad As Integer = ((angle + Math.PI) / (Math.PI * 2)) * 4
                    If quad = 4 Then quad = 0
                    Select Case quad
                        Case "0"
                            Label5.Text = "Play/Pause"
                            'insert play/pause code here
                        Case "1"
                            Label5.Text = "Prev"
                            scrollpos -= 1
                        Case "2"
                            Label5.Text = "Mute"
                            'insert mute code here
                        Case "3"
                            Label5.Text = "Next"
                            scrollpos += 1
                    End Select
                    If scrollpos > scrollmax Then scrollpos = scrollmax
                    If scrollpos < scrollmin Then scrollpos = scrollmin
                    Label4.Text = scrollpos
                End If
            End If
        End Sub
    
        Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
            If Not MouseButtons = Windows.Forms.MouseButtons.Left Then Return
            Dim gp As Point = Me.PointToClient(MousePosition) - PictureBox1.Location
            If My.Computer.Clock.TickCount - intclick > 200 Then
                If intscrolling = False Then intscroll = Math.Atan2((gp.X - 150), (gp.Y - 150))
                intscrolling = True
            Else : intscrolling = False
            End If
    
            If intscrolling Then
                Label5.Text = "Scrolling"
                Dim dist As Integer = Math.Sqrt(Math.Pow((150 - gp.X), 2) + Math.Pow((150 - gp.Y), 2))
                Dim angle As Double = Math.Atan2((gp.X - 150), (gp.Y - 150))
                Dim nop As Point = New Point(150 + (Math.Sin(angle) * 100), 150 + (Math.Cos(angle) * 100))
                Dim intdiff As Double = intscroll - angle
                If Math.Abs(intdiff) > (Math.PI / 8) Then
                    If Math.Abs(intdiff) > Math.PI Then
                        'we have a rounder!
                        If intdiff < 0 Then
                            scrollpos += 1
                        Else
                            scrollpos -= 1
                        End If
                    Else
                        scrollpos += Math.Round(intdiff / (Math.PI / 8), 0)
                    End If
                    intscroll = angle
    
                    If scrollpos > scrollmax Then scrollpos = scrollmax
                    If scrollpos < scrollmin Then scrollpos = scrollmin
                End If
    
    
                Label4.Text = scrollpos
    
            Else
                'smile.
            End If
            PictureBox1.Invalidate()
        End Sub
    
        Public scrollpos As Integer = 1
        Public scrollmin As Integer = 0
        Public scrollmax As Integer = 300
    
        'width of the center button in pixels
        Public centerrad As Integer = 30
    
        'draw default graphics?
        Public debug As Boolean = True
    
        Private intclick As Integer = My.Computer.Clock.TickCount
        Private intscroll As Double = 0
        Private intscrolling As Boolean = False
    
    
    
        Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
            If debug Then
                Dim g As Graphics = e.Graphics
                Dim gp As Point = Me.PointToClient(MousePosition) - PictureBox1.Location
                Dim angle As Double = Math.Atan2((gp.X - 150), (gp.Y - 150))
                Dim nop As Point = New Point(150 + (Math.Sin(angle) * 100), 150 + (Math.Cos(angle) * 100))
                'draw yellow circle background
                g.DrawArc(New Pen(Color.Yellow, 100), 100, 100, 100, 100, 0, 360)
    
                'draw line
                g.DrawLine(New Pen(Color.Red, 4), 150, 150, nop.X, nop.Y)
    
                'draw center button
                Dim cr2 As Integer = centerrad / 2
                Dim tmppoint As Integer = (PictureBox1.Width / 2) - (cr2 / 2)
                g.DrawArc(New Pen(Color.Black, centerrad / 2), tmppoint, tmppoint, cr2, cr2, 0, 360)
    
                g.DrawArc(New Pen(Color.Black, 5), 50, 50, 200, 200, 0, 360)
    
                g.DrawString("Play/Pause", Me.Font, Brushes.Black, 120, 80)
                g.DrawString("Mute", Me.Font, Brushes.Black, 135, 210)
                g.DrawString("Prev", Me.Font, Brushes.Black, 70, 143)
                g.DrawString("Next", Me.Font, Brushes.Black, 200, 143)
            End If
        End Sub
    End Class
    I plan on using this on a personal project, but since it was such a headache to write, and get working properly, I figured I'd seed some ideas with other people =)


    peace
    Mike

  2. #2
    Newbie
    Join Date
    Jun 2008
    Posts
    6
    That's actually a nice peice of code. Not only could it be used for an iPod interface, but you could also use it for volume nobs, navigation wheels, etc.

    Would you mind if I used a modified version of your code in the future?

    -Ray

  3. #3
    Newbie
    Join Date
    Sep 2005
    Posts
    37
    I actually wrote something like this for a small frontend I put together a while back... If you look back in my posts you can find it. Use reflection to get the source code.

    I might have used the same scroll velocity calculation you used to slow the scroll down after you throw it.

    I hate ipods as well (mostly because of Apple) but I love their interface..

  4. #4
    Newbie
    Join Date
    Apr 2008
    Location
    Baghdad, Iraq/Fort Bragg, NC/Saginaw, MI
    Posts
    27
    PC_Cruiser- not at all; that's why I posted it

    peace
    Mike

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •