Time Ruler...

Question

Is there a way to create a ruler made with simple lines and number and controlled by lingo and a text field in a way that it reacts accornding to the time in the text field?
Let's say I have in the text field 04:59 then the script organizes the lines with four higher lines indicating the four minutes and three smaller ones between the higher indicating 15 seconds each.
I don't have a idle idea how to make this. Is it possble?
Thanks
Brian

Answer 1

Hi Brian - I had a try at this and cooked up the following behavior. Copy and paste it into a script member and make sure it's typed appropriately before dragging it onto a bitmap sprite (the one you want to display your timeline graphic). It needs to be sent the message to draw this graphic. For example, if the graphic sprite (with this behavior attached) is sprite number 5, and you want it to draw a timeline of 4:33, you would call it with
sprite(5).mMakeTimeline("04:33")
property spriteNum
property my
property myMember
property myImage
property myWidth
property myHeight
property myBackgroundColour
property myTextColour
property myLineColour
property myShortLineHeight
property myMediumLineHeight
property myLongLineHeight
property myQuarterFontSize
property myMinuteFontSize
property myFont
on isOKToAttach(me, sType, sNum)
  if ( sType = #graphic ) then return ( sprite(sNum).member.type = #bitmap )
  return FALSE
end
on getPropertyDescriptionList
  pdl = [:]
  pdl[#myWidth] = [#comment: "Width of image to create:", #format: #integer, #default: 1286] -- #default: sprite(the currentSpriteNum).member.width
  pdl[#myHeight] = [#comment: "Height of image to create:", #format: #integer, #default: 94] -- #default: sprite(the currentSpriteNum).member.height
  -- this used to display a colour chip in the resulting dialog
  -- I don't know what's changed between  D7/8 and now...
  pdl[#myBackgroundColour] = [#comment: "Colour of image to create:", #format: #color, #default: rgb( 196, 186, 180 )]
  pdl[#myTextColour] = [#comment: "Colour of text to draw:", #format: #color, #default: rgb( 0, 0, 0 )]
  pdl[#myLineColour] = [#comment: "Colour of lines to draw:", #format: #color, #default: rgb( 0, 0, 0 )]
  pdl[#myShortLineHeight] = [#comment: "Height of 5 second interval lines to draw:", #format: #integer, #default: 24]
  pdl[#myMediumLineHeight] = [#comment: "Height of 15 second interval lines to draw:", #format: #integer, #default: 35]
  pdl[#myLongLineHeight] = [#comment: "Height of minute interval lines to draw:", #format: #integer, #default: 46]
  pdl[#myQuarterFontSize] = [#comment: "Font size of 15 second interval text:", #format: #integer, #default: 10]
  pdl[#myMinuteFontSize] = [#comment: "Font size of minute interval text:", #format: #integer, #default: 14]
  pdl[#myFont] = [#comment: "Text font:", #format: #font, #default: "Arial"]
  return pdl
end
on beginSprite me
  my = sprite(spriteNum)
  myMember = my.member
  myImage = duplicate(myMember.image)
end
on endSprite me
  myMember.image = myImage
end
on mMakeTimeLine me, sTime
  -- sTime should be a string and formatted as "mm:ss"
  if stringP(sTime) = 0 then return
  -- how many seconds were provided
  tSeconds = _movie.HMStoFrames(sTime, 1, 0, 0)
  -- if this evaluates to an invalid input then bail out
  if ( tSeconds = -2147483648 ) OR ( tSeconds = 0 ) then exit
  -- long marker at 0 then short one every n pixels (representing 5 seconds) with longer
  -- one at 15, 30 and 45 seconds intervals and longest (thicker) line at minute intervals
  tInterval = 5.0 * myWidth/tSeconds
  -- create image and fill with BG colour
  tImage = image(myWidth, myHeight, 32)
  -- fill image with BG colour
  OK = tImage.fill( rect(0, 0, myWidth, myHeight), [#shapeType: #rect, #color: myBackgroundColour] )
  -- make images for 15, 30 and 45s intervals:
  tTextMember = _movie.newMember(#text)
  tTextMember.font = myFont
  tTextMember.fontSize = myQuarterFontSize
  tTextMember.antiAliasType = #AutoAlias
  tTextMember.hinting = #TVMode
  tTextMember.wordWrap = FALSE
  tTextMember.text = "15s"
  tWidth = tTextMember.charPosToLoc(4)[1]
  tTextMember.width = tWidth
  image15alpha = duplicate(tTextMember.image.extractAlpha())
  image15 = image(image15alpha.width, image15alpha.height, 32)
  image15.fill( rect(0, 0, image15.width, image15.height), [#shapeType: #rect, #color: myTextColour] )
  tTextMember.text = "30s"
  tWidth = tTextMember.charPosToLoc(4)[1]
  tTextMember.width = tWidth
  image30alpha = duplicate(tTextMember.image.extractAlpha())
  image30 = image(image30alpha.width, image30alpha.height, 32)
  image30.fill( rect(0, 0, image30.width, image30.height), [#shapeType: #rect, #color: myTextColour] )
  tTextMember.text = "45s"
  tWidth = tTextMember.charPosToLoc(4)[1]
  tTextMember.width = tWidth
  image45alpha = duplicate(tTextMember.image.extractAlpha())
  image45 = image(image45alpha.width, image45alpha.height, 32)
  image45.fill( rect(0, 0, image45.width, image45.height), [#shapeType: #rect, #color: myTextColour] )
  -- finished creating images for seconds so set fontSize of text member for creating minute intervals
  tTextMember.fontSize = myMinuteFontSize
  tTextMember.width = 500
  -- draw long line at zero
  OK = tImage.fill( rect(0, myHeight - myLongLineHeight, 1, myHeight), [#shapeType: #rect, #color: myLineColour] )
  -- monitor start point and number of lines drawn
  tStart = 0.0
  tDrawIndex = 0
  repeat while TRUE
    -- add pixel width corresponding to 5 seconds to current draw position (x)
    tStart = tStart + tInterval
    -- make this an integer (pixels are integer values, not floats) - not strictly necessary as they will be auto-converted
    tX = integer(tStart)
    -- if this line will be drawn outside the full width then we're done, bail out of drawing routine
    if tX > myWidth then exit repeat
    -- increment the draw index
    tDrawIndex = tDrawIndex + 1
    -- set default height and width of lines drawn (over-ridden below if necessary - 15, 30, 45 and minute intervals)
    tHeight = myShortLineHeight
    tLineWidth = 1
    -- if the draw index divides evenly by 3 then it should be a longer line, with some text drawn above it
    if tDrawIndex mod 3 = 0 then
      -- override line height set above
      tHeight = myMediumLineHeight
      -- set height of text above line
      tStandOff = 2
      -- which second interval should be drawn above THIS line
      textIndex = tDrawIndex mod 4
      case textIndex of
        3: -- 15s
          tTextImage = image15
          tAlpha = image15alpha
        2: -- 30s
          tTextImage = image30
          tAlpha = image30alpha
        1: -- 45s
          tTextImage = image45
          tAlpha = image45alpha
      end case
      -- if the draw index divides by 12 then it should be a minute interval
      if tDrawIndex mod 12 = 0 then
        -- override height and width of line drawn
        tHeight = myLongLineHeight
        --        tLineWidth = 2
        -- set height of text above line
        tStandOff = 4
        -- create minute text image:
        tTextMember.width = 100
        tTextMember.text = string(tDrawIndex/12) & "m"
        tWidth = tTextMember.charPosToLoc(tTextMember.char.count + 1)[1]
        tTextMember.width = tWidth
        tAlpha = tTextMember.image.extractAlpha()
        tTextImage = image(tAlpha.width, tAlpha.height, 32)
        tTextImage.fill( rect(0, 0, tTextImage.width, tTextImage.height), [#shapeType: #rect, #color: myTextColour] )
      end if
      tLeft = tX - (tTextImage.width/2)
      dRect = rect(tLeft, myHeight - tHeight - tTextImage.height - tStandOff, tLeft + tTextImage.width, myHeight - tHeight - tStandOff)
      OK = tImage.copyPixels(tTextImage, dRect, tTextImage.rect, [#maskImage: tAlpha])
      --      put OK
    end if
    OK = tImage.fill( rect(tX, myHeight - tHeight, tX + tLineWidth, myHeight), [#shapeType: #rect, #color: myLineColour] )
  end repeat
  tTextMember.erase()
  myMember.image = tImage
end