Curved text with Browserwidget

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Tue Jun 26, 2012 7:07 pm

Curved text with Browserwidget

Post by williamdesmet » Wed May 18, 2022 9:24 am

Hi there,

I was in the need for curved text so I asked here on the forum and userlist.
One of the suggestions was to use the browser widget with some online scripts and the use of CSS. So I made a quick and dirty example.
The online scripts are now all located in text fields and a html file is exported and imported in the browser widget.
The only online scrips so far is stille a Google font because I wanted an outline with my font.

But what goes wrong?
Adding transparency gives an strange effect when adding a circle to the browser snapshot.
What is a better way to get transparency to the snapshot with circle.
I found the transparency code somewhere on the forum.


greetings,

William
Attachments
Schermafbeelding 2022-05-18 om 10.21.15.png
Browserwidget - curved text.livecode.zip
(66.94 KiB) Downloaded 26 times

Verymuch
Posts: 6
Joined: Sat Oct 30, 2021 1:33 pm

Re: Curved text with Browserwidget

Post by Verymuch » Wed May 18, 2022 12:22 pm

Hi William,

The data in the maskData property makes pixels either fully transparent or fully opaque.

If you want the transparency to blend in smoothly around the edges, you're going to have to manipulate the alphaData property instead of the maskData property.

Regards

Gert

williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Tue Jun 26, 2012 7:07 pm

Re: Curved text with Browserwidget

Post by williamdesmet » Wed May 18, 2022 4:31 pm

@Gert: thanks for replying.
I will try to figure out how the alphaData property works.

Verymuch
Posts: 6
Joined: Sat Oct 30, 2021 1:33 pm

Re: Curved text with Browserwidget

Post by Verymuch » Wed May 18, 2022 5:13 pm

williamdesmet wrote:
Wed May 18, 2022 4:31 pm
@Gert: thanks for replying.
I will try to figure out how the alphaData property works.
It works exactly like the maskData property except that each byte represents the pixel's transparency level, ranging between 0 and 255.

Verymuch
Posts: 6
Joined: Sat Oct 30, 2021 1:33 pm

Re: Curved text with Browserwidget

Post by Verymuch » Wed May 18, 2022 5:33 pm

Here's a modified version of the makeMask command to illustrate how you might do it:

Code: Select all

command makeMask pObj
   local tAData
   get the imageData of img "snapshot" -- 4 bytes, 0,r,g,b white = 255, black = 0
   put the number of bytes in it into X
   repeat with i=1 to X step 4
      if i > X then exit repeat
      put byte (i+1) of it into r
      put byte (i+2) of it into g
      put byte (i+3) of it into b
      put byteToNum(r) into rV
      put byteToNum(g) into gV
      put byteToNum(b) into bV
      if rV=gV and gV=bV then -- if the pixel color is black or white or any shade of gray in between
         -- change its color to black
         put numToByte(0) into byte (i+1) of it
         put numToByte(0) into byte (i+2) of it
         put numToByte(0) into byte (i+3) of it
         -- and make its transparency level the inverse of its original shade
         put numToByte(255 - rV) after tAData
      else
         put numToByte(0) after tAData -- otherwise make it fully opaque
      end if
   end repeat
   set the imageData of img "snapshot" to it
   set the alphaData of img "snapshot" to tAData
end makeMask 

Post Reply

Return to “HTML5”