Rotating text

[MaxV]

Hello,
I created this simple stack ( http://tinyurl.com/mhj5t9l ) to show a way to have a rotatable text interactive. Just move the image, rotate it, and click on it to change its text.


I would like to make a more interactive image, at this point clicking on the image just pop-up and disappear a normal field.
What do you think? Is there a way to focus on the image and intercept the keyboard, sending them to the field in order to get the image?

[FourthWorld]

Nicely done, Max.

It seems to be in v7 format. Runs nicely in that version, but would you consider saving it in an earlier version so folks using the latest shipping version of LiveCode could run this?

[MaxV]

OK, here it is: http://www.maxvessi.net/livecode/public ... 6.livecode

[dunbarx]

Hi.

Nicely done as Richard said.

Your question raises interesting issues. If I have it right, you want the user to be able to click into the rotating image, type there, and have that new text appear in the image. Currently you have a field that pops up over the image where the user can type, and then that field is "exported" via a snapshot to "populate" the image with the new text. You dislike that field insinuating itself onto your image.

The issues I see, and I have only played a little, is that an image cannot receive "keyDown" messages. If it did, you could "send" the key parameter to the hidden field, and export as before. I also tried to place an overlying transparent field. This works, but in order to handle key presses, that field must be focusable, and therefore the the cursor and text shows in the field, which looks horrible. So we need to trap keydown messages within the rect of the image somehow, pass the data to the hidden field, and export. I will fool around when I get a chance. Someone else will likely beat me to it.

Craig Newman

[[-hh]]

. .

[MaxV]

Hi [-hh],
tried your code, but isn't it too long and complex?
I think that you cold obtain the your effect also this way:
########CODE#######

on aggiorna
export snapshot from rect (the rect of field ingresso) of this card to image uscita
set the angle of me to the tAngle of me
show me
end aggiorna

on MouseUp
hide me
set the tAngle of me to the angle of me
set the loc of field ingresso to the loc of me
set the visible of field ingresso to true
set the screenmouseloc to the globalLoc of the loc of me
focus on field ingresso
end MouseUp

#####END OF CODE#####

Isn't it?

[[-hh]]

It is not. Watch the insertion cursor with my script. You get it at the clickloc, as if you had clicked on an unrotated field.

I was asked to repost the script (and added some hints from a friend, marked as new, to avoid interference with the field's mouseLeave and avoid slight moving of the loc by the truncation).

It is a 2D-rotation of the clickloc at the rotated image in order to select appropriately the unrotated field:

Code: Select all

-- Translating the clickloc at a rotated image to a correct, "unrotated" clickloc
on mouseUp
  lock screen; lock messages
  set the tAngle of me to the angle of me
  put item 1 of the loc of me into x0
  put item 2 of the loc of me into y0
  put item 1 of the clickloc into cx
  put item 2 of the clickloc into cy
  set the loc of field "ingresso" to (x0,y0)
  show field "ingresso"; hide me
  put (pi*the angle of me/180) into phi
  put sin(phi) into s; put cos(phi) into c
  put (cx - x0) into x; put (cy - y0) into y
  put (trunc(x*c - y*s) + x0 , trunc(x*s + y*c) + y0 ) into p2
  set screenmouseloc to the globalLoc of p2
  send "selectMyFld p2" to me in 1 tick
  unlock screen; unlock messages
end mouseUp

on selectMyFld p
  lock messages #<--new, avoid interfering with mouseLeave of the field
  click at p
  unlock messages # <--
end selectMyFld

on aggiorna
  lock screen; lock messages
  focus on nothing
  put the loc of me into tLoc # <-- new, avoid movements
  export snapshot from field "ingresso" to me
  set the angle of me to the tAngle of me
  set the loc of me to tLoc  # <-- new, avoid movements
  show me
  unlock screen; unlock messages
end aggiorna

[dunbarx]

Hermann, Max.

Unless I am misunderstanding, the issue, or rather the challenge, is to be able to edit text into an already rotated "field" without having an ordinary field (set, of course, if we want to think of it that way, at 0°) pop up over that image.

Now this may be impossible. After all, how would one make a cursor that would track the image and modify the text if it was set at, say, 45°? There is no native rotating editable field. Of course, if there was, Max would not have needed an image at all. Do I have this right? MaxV, is that not what you originally wanted to implement?

Craig

[[-hh]]

Hi all,

that's what I said in my first post (now deleted, so here again): "As a first step" ...

With my script you have already the correct insertion point and selection for the field. That's needed, in any way, isn't it?
(I didn't go further because for me it is from physical reasons too difficult to edit a text that is 180 degrees rotated, or even vertically and/or horizontally mirrored?)

Now, as you ask, next steps could be:
Keep the field hidden and catch rawkeydown in card script. This enables to type into the field (hidden or lock screen). Then the insertion cursor is also visible in the snapshot, simply remove the "focus on nothing" line in handler "aggiorna". The trigger for the snapshot could be a "textchanged" handler in the field's script.
(And a screenshot timed short enough to see the blinking cursor in its "on"-state
OR, to avoid overload,
show a self made cursor at the selectedLoc before the screenshot).

Hermann

[Edit. Explained, why I have a different opinion about editing rotated texts.]

[dunbarx]

Hermann.

I was thinking on much the same lines, a small graphic line, rotated the same as the image, that flashed in just the right location to simulate a cursor in the "correct" position in that rotated image text. The line would shift as the "text" was modified by the user. I already had the card script trapping "keydown" messages, since, even though an image will not respond to key presses, there is no reason not to let them pass through the image to the card script.

You have framed the process that would be needed at that point perfectly.

I cannot think of anyone more qualified to map the rotated calculations better than you. This would be a labor of love, though. Anyone think it is worth it, beyond the joy of playing with LC? Is this a gadget that others might find useful?

Craig

[[-hh]]

Craig,

Max had the idea and he is *certainly* able to do this in this way or another one. I've seen more difficult solutions from him. (He simply ignored to handle the "edit"-click at the rotated "fieldImage" until now.)

I'm no longer interested in making stacks, because these are all throw-away articles: No version > 6.5 is really stable, memory leaks from LC over and over. I have to restart my Mac every other three hours. My LC crash logs are giant. I, myself -- nobody else, can't maltreat others with crashing (crashing slowly but crashing) beta software.

Everybody is speaking of LC 8. With great words. So let's wait. (And I use other IDE's until that paradise.)

Hermann

To simulate a (blinking) "rotated" cursor is a nice idea. One has simply to rotate the image, that the cursor is using and rotate also the hotspot, if it's not at loc of cursor's image. One can make this on the fly. I attached a transparent strawberry insertion cursor (16x16 px). Import the image, make it invisible and set its hotspot to "8,8".

Code: Select all

-- add this to the script of img "uscita"
-- [one could also try to solve this by setting the defaultCursor]
on mouseEnter
  lock cursor
   set angle of img "strawberry" to the angle of me
  set cursor to (the short id of img "strawberry")
end mouseEnter

on mouseLeave
  unlock cursor
end mouseLeave
-- then adjust angle after mouseclick or fieldEnter and so on ...

[Edit. Added script for first trials. Attaching picture wasn't possible: "bord quota reached", so let's code it, see next post.]

[[-hh]]

May be it is of its own interest:
This is a *very* simple way to create a cursor image "on the fly". LC is (mostly) fast! Use it as base for a rotating cursor.

Here is the code for creating the cursor image (use a new button):

Code: Select all

-- creates a strawberry-colored insertion cursor
-- image 16x16, hidden, transparent
on mouseUp
  put "strawberry" into i
  if there is no img i then
    lock screen; lock messages
    create img i
    set rect of img i to (0,0,16,16)
    set alwaysbuffer of img i to true
    put line 33 to 48 of the script of me into s ## <-- adjust
    put numToByte(0) into c0
    put numToByte(128) into c1
    put numToByte(255) into c2
    put c0 & c2 & c0 & c1 into sc --> strawberry
    put c0 & c0 & c0 & c0 into bc --> black
    repeat for each line L in s
      repeat for each char c in L
        if c is "0" then
          put bc after iData; put c0 after alpha
        else
          put sc after iData; put c2 after alpha
        end if
      end repeat
    end repeat
    set alphadata of img i to alpha
    set imageData of img i to iData
    set hotspot of img i to (8,8)
    hide img i
    unlock screen; unlock messages
  end if
end mouseUp

0000000000000000
0000110001100000
0000011011000000
0000001110000000
0000001110000000
0000000100000000
0000000100000000
0000111011100000
0000000100000000
0000000100000000
0000000100000000
0000001110000000
0000001110000000
0000011011000000
0000110001100000
0000000000000000

You can change the cursor simply by using a fixed width font in script editor and insert at the script's bottom "1" for colored opaque pixels, and "0" for transparent pixels. You can also change the color "sc" of the opaque pixels.

[[-hh]]

Hi all,
this works for the "rotated blinking cursor". Not this beautiful, but it works :

Attached is an img "blinker.gif". Simply add this to the stack of Max and try with the following scripts.

Code: Select all

-- Script of sb "scrollbar"
on scrollbardrag
  send "updateAngle (the thumbpos of me)" to img "uscita"
end scrollbardrag

-- Script of fld "ingresso"
on mouseLeave
   send "aggiorna" to image "uscita"
   set the visible of me to false
end mouseLeave

-- Script of image "uscita"
on mouseUp
  lock screen; lock messages
  set the tAngle of me to the angle of me
  set the loc of fld "ingresso" to the loc of me
  show fld "ingresso"; hide me
  put rotatedPoint(the clickloc,the loc of me,the angle of me) into p2
  set screenmouseloc to the globalLoc of p2
  send "selectMyFld p2" to me in 1 tick
  unlock screen; unlock messages
end mouseUp

on selectMyFld p
  lock messages; select empty
  set angle of img "strawberry" to 0
  hide img "blinker.gif"
  click at p
  unlock messages
end selectMyFld

on aggiorna
  lock screen; lock messages
  get the selectedLoc
  add .75*the textsize of fld "ingresso" to item 2 of it
  add .02*the textsize of fld "ingresso" to item 1 of it
  set tBlinker of me to it
  focus on nothing
  put the loc of me into tLoc # <-- avoids unwanted movements
  export snapshot from field "ingresso" to me
  set the angle of me to the tAngle of me
  set the loc of me to tLoc
  show me; mouseEnter
  unlock screen; unlock messages
end aggiorna

on mouseEnter
  put the angle of me into phi
  get rotatedPoint(the tBlinker of me,the loc of me,-phi)
  put "blinker.gif" into i
  set loc of img i to it
  set angle of img i to phi
  show img i; set layer of img i to top
  set angle of img "strawberry" to phi
  set defaultcursor to (the short id of img "strawberry")
end mouseEnter

on mouseLeave
  set defaultcursor to arrow
end mouseLeave

function rotatedPoint p1, p0, aa
  -- p1 point, p0 rotation origin, aa angle
  put item 1 of p0 into x0; put item 2 of p0 into y0
  put item 1 of p1 into x1; put item 2 of p1 into y1
  put (pi*aa/180) into phi
  put sin(phi) into s; put cos(phi) into c
  put (x1 - x0) into x; put (y1 - y0) into y
  return (trunc(x*c - y*s) + x0 , trunc(x*s + y*c) + y0)
end rotatedPoint

on updateAngle aa
  put trunc(aa) into aa
  set tangle of img "uscita" to aa
  set angle of img "uscita" to aa
  set angle of img "blinker.gif" to aa
  set loc of img "blinker.gif" to \
        rotatedPoint(the tBlinker of me,the loc of me,-aa)
end updateAngle

It looks a bit better, if the field's style is bold only, no italic. The "italic correction" of the cursor's angle is another possible 'fine-tuning'.

Max, this is now a proposal to answer your original question, halfway.
The "blindtyping" into the (hidden) field is still to do ...

Hermann

[[-hh]]

Kind of that is currently also in discussion on the uselist.
So here my previous script (working but unfinished) embedded in MaxV's initial stack. Just to comfort readers.

[MaxV]

The SVGText widget make all more simpler: