Experimental widgets for canvas

[vovchik]

Dear basica,

Thanks for your comments - I did have to do a bit of work to create that charset, and it did, for a while, take its toll on my cognitive abilities. What is nice is that we have the char_width included as a dummy var, which is blithely ignored by svg parsers, but we can put it to good use to determine where the next character will start (i.e. proportional spacing, something technosaurus's charset does not have). So, in creating a string of paths, we simply advance the next charpath by the cumulative char_widths of the previous char_paths. And, after the processing loop, we have the total xsize in pixels of the chars in our original string. And that entire string of char_paths can be scaled in both directions (preserveAspectRatio='none') and otherwise manipulated. Some work to do still, but I think this might be a useful little routine. Feel free to fiddle with it and to make improvements.

With kind regards,
vovchik

[vovchik]

Dear all,

Here is a little routine that will resize the bounding box to take into account rotation. It should now be possible to get the rotation bits in Nano SVG Text working properly. Or so I hope.


' ------------------
FUNCTION RECT_FIT(double rw, double rh, double degrees, int mode) TYPE double
' ------------------
' mode 0 = x_max, mode 1 = y_max
LOCAL radians, x1, x2, x3, x4, y1, y2, y3, y4 TYPE double
LOCAL x11, x21, x31, x41, y11, y21, y31, y41 TYPE double
LOCAL x_min, x_max, y_min, y_max TYPE double
radians = RAD(degrees)
x1 = -rw / 2.0
x2 = rw / 2.0
x3 = rw / 2.0
x4 = -rw / 2.0
y1 = rh / 2.0
y2 = rh / 2.0
y3 = -rh / 2.0
y4 = -rh / 2.0
x11 = x1 * COS(radians) + y1 * SIN(radians)
y11 = -x1 * SIN(radians) + y1 * COS(radians)
x21 = x2 * COS(radians) + y2 * SIN(radians)
y21 = -x2 * SIN(radians) + y2 * COS(radians)
x31 = x3 * COS(radians) + y3 * SIN(radians)
y31 = -x3 * SIN(radians) + y3 * COS(radians)
x41 = x4 * COS(radians) + y4 * SIN(radians)
y41 = -x4 * SIN(radians) + y4 * COS(radians)
x_min = MIN(MIN(MIN(x11, x21), x31), x41)
x_max = MAX(MAX(MAX(x11, x21), x31), x41)
y_min = MIN(MIN(MIN(y11, y21), y31), y41)
y_max = MAX(MAX(MAX(y11, y21), y31), y41)
SELECT mode
CASE 0
RETURN x_max - x_min
CASE 1
RETURN y_max - y_min
DEFAULT
RETURN 0
END SELECT
END FUNCTION


With kind regards,
vovchik

[vovchik]

Dear all,

No proper rotation yet, but I am getting closer. The box size is now right for horizontal text.

With kind regards,
vovchik

Attachments:

nano_text-test-unisans-fix-ascii.tar.gz (92.79 KB)

[basica]

vovchik,


"nano_text-test-unisans-fix-ascii.tar.gz"  nailed it and even tried out the new Min/Max functions. Nice going.

Everything compiles and looks great.

Regards,
basica

[vovchik]

Dear basica,

Thanks. I am working on rotation, now that we have the RECT_FIT bit done. If you have any ideas on how to do the rotate(angle, x, y) translate(x, y) properly, please share them. The bounding box is now correct for a given angle and original size, but the trick is in the x,y numbers in rotate and translate, so that the text is positioned in the middle of the bounding box.

With kind regards,
vovchik

PS. TXT2SVG might also be a useful standalone CLI prog for generating svgs.

[basica]

vovchik,

Would there be the possibility to gather  the chars into a group and then render an entire word(s) rotated.

Sort of -

<g transform="rotate(45 50 50)">

H-E-L-L-O

</g>

TXT2SVG could be even nicer, with a front end FONT2TXT

Regards,
basica

[vovchik]

Dear basica,

Thanks. That is what I am trying to do. The problem is that if we make the viewBox equal to '0 0 word_width word_width' and then use WWW and HHH in the top svg bit for global scaling/sizing purposes, we still have to calculate the proper x and y within the rotate(angle x y) that is within the <g></g>. Simply using word_width/2.0 does not work, and we have to give that calculation some thought.


<svg width='300' height='300' viewBox='0 0 144 144'
 opacity='1' preserveAspectRatio='none'
 transform='translate(0,230) scale(1,-1)'>
<!-- Text to display: 'AA' -->
<linearGradient id='lg1' x1='50%'
    x2='50%' y1='0%' y2='100%'>
 <stop offset='0%' stop-color='pink' />
 <stop offset='46.447%' stop-color='red' />
 <stop offset='100%' stop-color='pink' />
</linearGradient>
<g stroke='none' stroke-width='1' fill='url(#lg1)' transform='rotate(90, 60, 30)' >
<path transform='translate(0,0)' ch_name='A'  ch_width='71' d='m70.020 0.000
C66.382 0.000 59.106 0.000 55.469 0.000 C53.979 3.857 51.001 11.572
49.512 15.430 C42.383 15.430 28.125 15.430 20.996 15.430 C19.629
11.572 16.895 3.857 15.527 0.000 C11.890 0.000 4.614 0.000 0.977
0.000 C7.764 18.042 21.338 54.126 28.125 72.168 C31.836 72.168
39.258 72.168 42.969 72.168 C49.731 54.126 63.257 18.042 70.020
0.000 zM45.312 26.855 C42.871 34.155 37.988 48.755 35.547 56.055
C32.959 48.755 27.783 34.155 25.195 26.855 C30.225 26.855 40.283
26.855 45.312 26.855 z' />
<path transform='translate(71,0)' ch_name='A'  ch_width='71'
d='m70.020 0.000 C66.382 0.000 59.106 0.000 55.469 0.000 C53.979
3.857 51.001 11.572 49.512 15.430 C42.383 15.430 28.125 15.430
20.996 15.430 C19.629 11.572 16.895 3.857 15.527 0.000 C11.890 0.000
4.614 0.000 0.977 0.000 C7.764 18.042 21.338 54.126 28.125 72.168
C31.836 72.168 39.258 72.168 42.969 72.168 C49.731 54.126 63.257
18.042 70.020 0.000 zM45.312 26.855 C42.871 34.155 37.988 48.755
35.547 56.055 C32.959 48.755 27.783 34.155 25.195 26.855 C30.225
26.855 40.283 26.855 45.312 26.855 z' />
</g>
</svg>


With kind regards,
vovchik

[vovchik]

Dear all,

Just a temporary diversion from the SVG text work - a maze generator. I used a new, modified unisans_bd_ttf.h file. The original I made from the ttf was 161k and this one, containing chars up to '~' (low ASCII), is only 60k! I hope it works for you without weird crashes.

With kind regards,
vovchik

Attachments:

maze-rrect-skinned.tar.gz (55.31 KB)

[basica]

vovchik,

I think my fiddling capabilities are now exhausted for rotated text in this context.

Originally, I thought that the words could be just like a rectangle and then rotated. Since a group can't have an x,y location and if the words are enclosed in a rectangle, a nested group can't be affected by a transform, this doesn't work.

You've done such great work on this and it's always the last bit that causes the most trouble.

Downloading the "maze" now, so I can enjoy your diversion.
EDIT: Just plain "amazing" - compiled, no crashes and lots of turns Thanks.

Regards,
basica

 

[alexfish]

Hi Vovchik

Rotate::

can only suggest embeding with Xlink

and or svg embed rather tha group <g>, have mentioned embed before
IE
<svg>
<svg>
</svg>
</svg>

can also test directional offset IE

x='0' y='0' dx='20' dy='20'

Not sure if the Nutty Scientist Page will help
basic-converter.proboards.com/thread/349/rad-tool-demo?page=8
BR
Alex

[vovchik]

Dear Alex and basica,

Thanks for testing the smaller unisans header. I'm glad that it seems to be working. As for SVG_TEXT, I think we need to try Alex's suggestion of svg within svg. That might do the trick, together with the RECT_FIT sub I posted a few days ago. The RECT_FIT would be for the viewBox of the outer svg. The inner SVG will have to be played with to get rotation and skewing (another nice effect) to work. Aligning the text along a bezier curve would also be great.

With kind regards,
vovchik

[alexfish]

Hi Vovchik

taking a closer look at the demo code for AA , that is so close , only thing I tested was
the <g> bit

<g stroke='none' stroke-width='1' fill='url(#lg1)' transform='rotate( 30,50,30)' >

think if work on the angles in the first argument , then should be able to calculate the x and y in second and third arg

BR
Alex

[vovchik]

Dear Alex,

Thanks for having a look. I also think we should be able to calculate the mid-x and mid-y, with proper offsets. And the <g> but should take care inheritance for the paths contained therein. Once we get rotate to work, we can look at skew.

With kind regards,
vovchik

@ basica: We will get something working...too early to give up. And you are right. It is always the last bit that gives most trouble.

PS. Just so we are working with the same code, this is my latest.

Attachments:

nano_text-test-unisans-fix-ascii-show.bac.tar.gz (77.75 KB)

[alexfish]

Hi Vovchik

had a look at the original embed svg Radio's

It may not sink in at first , but here most aligning is done after the rotate

working on premise that 566 = hypot(400,400)
and looking at rotation values in 10 deg steps , hoping to keep things within bounds. with one line at the main svg
IE::
so at line and try these:: think with U'r math skills , may arrive at a reasonable algo

<svg width="566" height="566" transform='rotate( 30,250,250)' version="1.1"
<svg width="566" height="566" transform='rotate( 20,300,300)' version="1.1"
<svg width="566" height="566" transform='rotate( 10,350,350)' version="1.1"

also notice the Rect offsets IE can play with these as well .

     <rect x='150' y='150' width='50%' height='50%'
           ry='0' fill='white' fill-opacity='1' stroke='black'  stroke-width='1' style='display:1 ' />

 <rect x="150" y="150" width="50%" height="50%"



<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="566" height="566" transform='rotate( 10,350,350)'  version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
   <linearGradient id='brown_button_off' gradientUnits='objectBoundingBox'  x1='1' x2='1' y1='0' y2='1'>
       <stop stop-color='#EFEFEF' offset='.1'/> <stop stop-color='brown' offset='1'/>
   </linearGradient>
   </defs>

   <defs>
   <pattern id='radio_group' width='75' height='30'  patternUnits='userSpaceOnUse'>
        <rect x='2' y='2'  rx='3' ry='3' width='71' height='26'  fill='url(#brown_button_off)' stroke='black' stroke-width='1'/>
       <circle cx='12' cy='15'  r='5' fill='#FFFFFF' stroke='red' stroke-width='3'/>
   </pattern>
   </defs>
     <rect x='150' y='150' width='50%' height='50%'
           ry='0' fill='white' fill-opacity='1' stroke='black'  stroke-width='1' style='display:1 ' />

 <rect x="150" y="150" width="50%" height="50%"
 style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
       <desc>vertical radio group </desc>
       <svg id='radio_group_1' x='154' y='154' width='226' height='90'>
            <rect id='radio_group_1' fill='url(#radio_group)'  stroke='black' stroke-width='1' width='226'  height='90'/>
           <circle cx='12' cy='15'  r='4' fill='#000000'/>
           <text x="0" y="0" dx='20' dy='20' fill="black" >Radio 99</text>
           <text x="0" y="0" dx='20' dy='50' fill="black" >Radio 2</text>
           <text x="0" y="0" dx='20' dy='80' fill="black" >Radio 3</text>
           <text x="0" y="0" dx='20' dy='110' fill="black" >Radio 4</text>
       </svg>
</svg>

BR
Alex

Screen-shot from image magick

Attachments:

[alexfish]

Hi Vovchik

Sort of compared the two methods , the embed does not play well with the AA demo,

Looks like U'r choosen method = Possible Best Method. esp when dealing with the paths and opting for the <g> to control the
bits + can see now how the ViewBox working as well.

BR
Alex