Re: SVG scale

[Tom DeMeo via 4D_Tech]

Hi Ortwin,



> On Sep 20, 2017, at 3:00 PM, 4d_tech-requ...@lists.4d.com wrote:
> 
>> 
>> SVG is a whole lot easier to manage in JavaScript.
> 
> I'm wondering about modern myths …


Perhaps you’ve primarily used SVG to render fixed images, or if the images do 
change, the triggers come from events in 4D, not on the SVG area. In that case, 
you probably don’t notice much difference. But the SVG spec creates objects 
just like HTML does, and just like HTML, you can bind events and attributes to 
those objects, and can do some very useful interactive stuff

The 4D SVG component and the 4D language don’t have any direct way to apply 
events to individual objects in an SVG area. With Javascript, this is easy. It 
is object oriented. Each SVG object can contain its own event handlers and 
attribute data. Objects can inherit prototype traits. Objects can nest inside 
each other. The language is built for this stuff.

An example of the difference would be in an implementation of drag and drop in 
SVG. You can do it with 4D, but it takes quite a few lines of code. Its pretty 
awkward, especially if there are a lot of objects. The same problem in 
javascript is simple and elegant and fast.



Tom DeMeo
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[David Adams via 4D_Tech]

> Regarding SVG scaling, I haven’t specifically used D3, but I’m sure it
makes scaling issues easier. However, scaling in SVG is still something
> that requires you to think through the relationships of your objects. It
isn’t magic, and it can’t guess what you have in mind.

Well said. Also, I should have made the point more clearly that you can get
the scaling library from D3 _without_ the rest of D3. No need to buy the
whole pig if you just want a pork chop.



On Wed, Sep 20, 2017 at 11:55 PM, Tom DeMeo via 4D_Tech <
4d_tech@lists.4d.com> wrote:

> Hi,
>
>
> > SVG is a whole lot easier to manage in JavaScript. If for no other
> reason,
> > you've got access to the D3 libraries.
>
> I would strongly concur with David Adams point that you want to manage SVG
> with javaScript instead of the 4D language. This is an object oriented
> scheme, and its pretty difficult to work with if you don’t have an object
> oriented language to work with it. The D3 libraries or some other library
> are important too, but the language itself is truly important.
>
>
> > * He's also pretty into that freight-car-function style from jQuery
> which I
> > hated on sight. But it does make it easier to set a ton of properties
> > legibly in a compact space. Virtually everything in D3 is set to return
> in
> > a way that supports this syntax so, yeah, be aware of that.
>
>
> This style is really just accepting a single hierarchical object of
> parameters. You can write code that defines attributes in objects in a lot
> of different ways in javaScript. I’d recommend to anyone that they spend
> some time considering a coding style that appeals to them and always try to
> do it the same way. The syntax the library’s examples shows you is not
> mandatory. Its just a javascript object, and as long as you respect the
> underlying architecture of that object, you can use whatever syntax you
> prefer.
>
>
> Regarding SVG scaling, I haven’t specifically used D3, but I’m sure it
> makes scaling issues easier. However, scaling in SVG is still something
> that requires you to think through the relationships of your objects. It
> isn’t magic, and it can’t guess what you have in mind.
>
> Consider the scheme on a 4D form. In 4D, the form itself and the objects
> have sizing parameters (none/move/grow). Splitters can provide additional
> control. Its a nice, simple scheme. However, if you don’t bother to set
> these parameters, you don’t get the scaling you want.
>
> A few years ago, I worked out an HTML layout scheme using a different
> javascript library, Raphael. I wrote a code library so that I could set
> move/grow parameters just like 4D provides in its forms, which I think is a
> pretty smart scheme. I haven’t done anything with it for quite a while, but
> I’m still hosting a demo, so you can check it out:
>
> http://www.svglayout.com/svglayout/index.html <http://www.svglayout.com/
> svglayout/index.html>
>
> When you get there, click on the SL widget in the upper right corner to
> activate the editor. You will see object outlines and handles and can drag
> objects around. You can also double click on an object to see the sizing
> and scaling attribute dialog. The whole site you see is built using an SVG
> based layout scheme. Traditional HTML layout strategies are not used.
>
>
>
> Tom DeMeo
>
>
>
>
>
>
>
> > --
> >
> > Message: 5
> > Date: Wed, 20 Sep 2017 09:02:08 +1000
> > From: David Adams 
> > To: 4D iNug Technical <4d_tech@lists.4d.com>
> > Subject: Re: SVG Scale
> > Message-ID:
> >gmail.com>
> > Content-Type: text/plain; charset="UTF-8"
> >
> > SVG is a whole lot easier to manage in JavaScript. If for no other
> reason,
> > you've got access to the D3 libraries. In V4, Mike Bostock wen to a lot
> of
> > effort to break bits out into stand-alone libraries to make reuse easier
> > without the whole D3 environment, and to encourage contributions from
> other
> > people. One of the core features of D3 is the scale:
> >
> > https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
> >
> > And a couple of examples from Mr. Bostock:
> >
> > Quantile, Quantize, Threshold Scales
> > http://bl.ocks.org/syntagmatic/29bccce80df0f253c97e
> >
> > Linear & Ordinal Scales
> > https://bl.ocks.org/pstuffa/c37d059efa1501d33913d63ffe3585db
> >
> > It's super powerful. Like most things D3, you define an object that is
> > implemented using JavaScript's (very nice) closures.So, you end up with
> an
> > object that can perform scaling operations. The

Re: SVG Scale

[David Adams via 4D_Tech]

> SVG is a whole lot easier to manage in JavaScript.

> I'm wondering about modern myths …

Hey Ortwin, you may not have had the same experience as me, but I find JS
easier for dealing with SVG. Just having foreach is a help, at a start. And
D3 is lightyears ahead, if you want to get that far into the weeds. To be
fair, I can't comment on the component as I haven't used it. I started out
doing SVG by hand to learn about SVG itself, From there I tried automating
it with 4D (hard) and then moved right into D3 (amazing.) But from the
comments and limits I see people running into, yeah, if you're planning on
doing a lot of work with SVG where you need the *full* feature set of SVG,
head to JavaScript.
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[Tom DeMeo via 4D_Tech]

Hi,


> SVG is a whole lot easier to manage in JavaScript. If for no other reason,
> you've got access to the D3 libraries. 

I would strongly concur with David Adams point that you want to manage SVG with 
javaScript instead of the 4D language. This is an object oriented scheme, and 
its pretty difficult to work with if you don’t have an object oriented language 
to work with it. The D3 libraries or some other library are important too, but 
the language itself is truly important.


> * He's also pretty into that freight-car-function style from jQuery which I
> hated on sight. But it does make it easier to set a ton of properties
> legibly in a compact space. Virtually everything in D3 is set to return in
> a way that supports this syntax so, yeah, be aware of that.


This style is really just accepting a single hierarchical object of parameters. 
You can write code that defines attributes in objects in a lot of different 
ways in javaScript. I’d recommend to anyone that they spend some time 
considering a coding style that appeals to them and always try to do it the 
same way. The syntax the library’s examples shows you is not mandatory. Its 
just a javascript object, and as long as you respect the underlying 
architecture of that object, you can use whatever syntax you prefer. 


Regarding SVG scaling, I haven’t specifically used D3, but I’m sure it makes 
scaling issues easier. However, scaling in SVG is still something that requires 
you to think through the relationships of your objects. It isn’t magic, and it 
can’t guess what you have in mind.

Consider the scheme on a 4D form. In 4D, the form itself and the objects have 
sizing parameters (none/move/grow). Splitters can provide additional control. 
Its a nice, simple scheme. However, if you don’t bother to set these 
parameters, you don’t get the scaling you want.

A few years ago, I worked out an HTML layout scheme using a different 
javascript library, Raphael. I wrote a code library so that I could set 
move/grow parameters just like 4D provides in its forms, which I think is a 
pretty smart scheme. I haven’t done anything with it for quite a while, but I’m 
still hosting a demo, so you can check it out:

http://www.svglayout.com/svglayout/index.html 
<http://www.svglayout.com/svglayout/index.html>

When you get there, click on the SL widget in the upper right corner to 
activate the editor. You will see object outlines and handles and can drag 
objects around. You can also double click on an object to see the sizing and 
scaling attribute dialog. The whole site you see is built using an SVG based 
layout scheme. Traditional HTML layout strategies are not used.



Tom DeMeo







> --
> 
> Message: 5
> Date: Wed, 20 Sep 2017 09:02:08 +1000
> From: David Adams 
> To: 4D iNug Technical <4d_tech@lists.4d.com>
> Subject: Re: SVG Scale
> Message-ID:
>   
> Content-Type: text/plain; charset="UTF-8"
> 
> SVG is a whole lot easier to manage in JavaScript. If for no other reason,
> you've got access to the D3 libraries. In V4, Mike Bostock wen to a lot of
> effort to break bits out into stand-alone libraries to make reuse easier
> without the whole D3 environment, and to encourage contributions from other
> people. One of the core features of D3 is the scale:
> 
> https://github.com/d3/d3/blob/master/API.md#scales-d3-scale
> 
> And a couple of examples from Mr. Bostock:
> 
> Quantile, Quantize, Threshold Scales
> http://bl.ocks.org/syntagmatic/29bccce80df0f253c97e
> 
> Linear & Ordinal Scales
> https://bl.ocks.org/pstuffa/c37d059efa1501d33913d63ffe3585db
> 
> It's super powerful. Like most things D3, you define an object that is
> implemented using JavaScript's (very nice) closures.So, you end up with an
> object that can perform scaling operations. The object can be passed around
> as a parameter and it can be invoked as such. What's nice about the closure
> in this case is that you can manufacture a whole bunch of different scales
> - you set the values when you build your scaling object. Then you pass the
> pre-defined scale object, as needed. The object caries the scaling function
> internally. It's very tidy and very powerful. There's nothing remotely
> similar in the 4D language, so there's no way to make a meaningful metaphor
> for this sort of structure.
> 
> Scales in D3 can be of all sorts of different types, including ordinal,
> continuous, and sequential. If you need animations, I think that the
> interpolation features lock in here too. It takes a bit of time to get your
> head around D3 scales, or at least it did for me when I was using D3
> heavily, but after that, they're a snap. No more hassles.  Super powerful
> and super easy, once you've got the hang of it.
> 
>

Re: SVG Scale

[Ortwin Zillgen via 4D_Tech]

> SVG is a whole lot easier to manage in JavaScript.

I'm wondering about modern myths …

There is a wonderful component in every copy of 4D, which is called 4D SVG.

This is a gem of a component and makes working with SVGs in 4D so much easier. 
I see the diehards still trying to do the xml-plumbing themselves.

For my own convenience and sometimes to better understand how it's done I check 
the source of a 4D SVG-command

and then fix my code


Regards
O r t w i n  Z i l l g e n
-
   
 
member of developer-network 

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[David Adams via 4D_Tech]

SVG is a whole lot easier to manage in JavaScript. If for no other reason,
you've got access to the D3 libraries. In V4, Mike Bostock wen to a lot of
effort to break bits out into stand-alone libraries to make reuse easier
without the whole D3 environment, and to encourage contributions from other
people. One of the core features of D3 is the scale:

https://github.com/d3/d3/blob/master/API.md#scales-d3-scale

And a couple of examples from Mr. Bostock:

Quantile, Quantize, Threshold Scales
http://bl.ocks.org/syntagmatic/29bccce80df0f253c97e

Linear & Ordinal Scales
https://bl.ocks.org/pstuffa/c37d059efa1501d33913d63ffe3585db

It's super powerful. Like most things D3, you define an object that is
implemented using JavaScript's (very nice) closures.So, you end up with an
object that can perform scaling operations. The object can be passed around
as a parameter and it can be invoked as such. What's nice about the closure
in this case is that you can manufacture a whole bunch of different scales
- you set the values when you build your scaling object. Then you pass the
pre-defined scale object, as needed. The object caries the scaling function
internally. It's very tidy and very powerful. There's nothing remotely
similar in the 4D language, so there's no way to make a meaningful metaphor
for this sort of structure.

Scales in D3 can be of all sorts of different types, including ordinal,
continuous, and sequential. If you need animations, I think that the
interpolation features lock in here too. It takes a bit of time to get your
head around D3 scales, or at least it did for me when I was using D3
heavily, but after that, they're a snap. No more hassles.  Super powerful
and super easy, once you've got the hang of it.

Notes:
* Mike Bostock's JavaScript relies heavily on anonymous functions. I don't
really get it why JS people love them so much. But M. Bostock is way
smarter than likely anyone I've met, so I figure roll with it.

* He's also pretty into that freight-car-function style from jQuery which I
hated on sight. But it does make it easier to set a ton of properties
legibly in a compact space. Virtually everything in D3 is set to return in
a way that supports this syntax so, yeah, be aware of that.
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[Tom DeMeo via 4D_Tech]

Hi Jim,


It’s a common misperception that scaling in SVG is easy. You can apply a 
transform to get one specific scaling scheme, but there are a number of 
possible rules you might need for how you might want an object to scale. How an 
object might scale using a simple transform is baked in. If you want full 
programmatic control over the anchor points and how an object scales relative 
to the canvas and other objects, you need to write code to recalc coordinates 
yourself. 

Sorry it isn’t easier.


Tom DeMeo
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[Jim Dorrance via 4D_Tech]

Thanks Kieth, I'm sure you have set me on the right path!

On Tue, Sep 19, 2017 at 6:58 PM, Keith Culotta via 4D_Tech <
4d_tech@lists.4d.com> wrote:

> Sorry, there is also this: SVG_SCALING_CENTERED ( svgObject ; scale {; x ;
> y} )
> http://doc.4d.com/4Dv16/4D/16/SVG-SCALING-CENTERED.301-3202422.en.html
>
> Keith - CDI
>
> > On Sep 19, 2017, at 11:03 AM, Jim Dorrance via 4D_Tech <
> 4d_tech@lists.4d.com> wrote:
> >
> > Hi,
> >
> > I am looking for a very quick way to scale a SVG object (circle, rect
> etc.)
> > but not move the center of the object.
> >
> > I use:
> >
> > *DOM SET XML ATTRIBUTE*($tObjectRef;"transform";"scale(2)")
> >
> >
> > And of course, the object is  moved xy*2
> >
> >
> > Any ideas how to scale on object but not its position on the cancas.
> >
> >
> > Thanks
> >
> > Jim
> >
> > --
> > Jim Dorrance
> > jim.dorra...@gmail.com
> > 4...@dorrance.eu
> > www.4d.dorrance.eu
> >
> > PS: If you know of anyone that needs an experienced 4D programmer to add
> > energy and experience to their team, please let me know. I have
> > experience in many areas. Reasonable rates. Remote or Paris only.
> > **
> > 4D Internet Users Group (4D iNUG)
> > FAQ:  http://lists.4d.com/faqnug.html
> > Archive:  http://lists.4d.com/archives.html
> > Options: http://lists.4d.com/mailman/options/4d_tech
> > Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
> > **
>
> **
> 4D Internet Users Group (4D iNUG)
> FAQ:  http://lists.4d.com/faqnug.html
> Archive:  http://lists.4d.com/archives.html
> Options: http://lists.4d.com/mailman/options/4d_tech
> Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
> **
>



-- 
Jim Dorrance
jim.dorra...@gmail.com
4...@dorrance.eu
www.4d.dorrance.eu

PS: If you know of anyone that needs an experienced 4D programmer to add
energy and experience to their team, please let me know. I have
experience in many areas. Reasonable rates. Remote or Paris only.
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[Keith Culotta via 4D_Tech]

Sorry, there is also this: SVG_SCALING_CENTERED ( svgObject ; scale {; x ; y} ) 
 
http://doc.4d.com/4Dv16/4D/16/SVG-SCALING-CENTERED.301-3202422.en.html

Keith - CDI

> On Sep 19, 2017, at 11:03 AM, Jim Dorrance via 4D_Tech <4d_tech@lists.4d.com> 
> wrote:
> 
> Hi,
> 
> I am looking for a very quick way to scale a SVG object (circle, rect etc.)
> but not move the center of the object.
> 
> I use:
> 
> *DOM SET XML ATTRIBUTE*($tObjectRef;"transform";"scale(2)")
> 
> 
> And of course, the object is  moved xy*2
> 
> 
> Any ideas how to scale on object but not its position on the cancas.
> 
> 
> Thanks
> 
> Jim
> 
> -- 
> Jim Dorrance
> jim.dorra...@gmail.com
> 4...@dorrance.eu
> www.4d.dorrance.eu
> 
> PS: If you know of anyone that needs an experienced 4D programmer to add
> energy and experience to their team, please let me know. I have
> experience in many areas. Reasonable rates. Remote or Paris only.
> **
> 4D Internet Users Group (4D iNUG)
> FAQ:  http://lists.4d.com/faqnug.html
> Archive:  http://lists.4d.com/archives.html
> Options: http://lists.4d.com/mailman/options/4d_tech
> Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
> **

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

Re: SVG Scale

[Keith Culotta via 4D_Tech]

Here is a sample with the attributes hard coded: 100 and 2.  Comment out (and 
in) the middle section to see the effect.

$svg:=SVG_New 
$ref:=SVG_New_circle ($svg;100;100;20)

SVG_SET_TRANSFORM_SCALE ($ref;2;2)
SVG_SET_ATTRIBUTES ($ref;"cx";String(100/2);"cy";String(100/2))

vPic:=SVG_Export_to_picture ($svg)
SVG_CLEAR ($svg)

Keith - CDI

> On Sep 19, 2017, at 11:03 AM, Jim Dorrance via 4D_Tech <4d_tech@lists.4d.com> 
> wrote:
> 
> Hi,
> 
> I am looking for a very quick way to scale a SVG object (circle, rect etc.)
> but not move the center of the object.
> 
> I use:
> 
> *DOM SET XML ATTRIBUTE*($tObjectRef;"transform";"scale(2)")
> 
> 
> And of course, the object is  moved xy*2
> 
> 
> Any ideas how to scale on object but not its position on the cancas.
> 
> 
> Thanks
> 
> Jim
> 
> -- 
> Jim Dorrance
> jim.dorra...@gmail.com
> 4...@dorrance.eu
> www.4d.dorrance.eu
> 
> PS: If you know of anyone that needs an experienced 4D programmer to add
> energy and experience to their team, please let me know. I have
> experience in many areas. Reasonable rates. Remote or Paris only.
> **
> 4D Internet Users Group (4D iNUG)
> FAQ:  http://lists.4d.com/faqnug.html
> Archive:  http://lists.4d.com/archives.html
> Options: http://lists.4d.com/mailman/options/4d_tech
> Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
> **

**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**

SVG Scale

[Jim Dorrance via 4D_Tech]

Hi,

I am looking for a very quick way to scale a SVG object (circle, rect etc.)
but not move the center of the object.

I use:

*DOM SET XML ATTRIBUTE*($tObjectRef;"transform";"scale(2)")


And of course, the object is  moved xy*2


Any ideas how to scale on object but not its position on the cancas.


Thanks

Jim

-- 
Jim Dorrance
jim.dorra...@gmail.com
4...@dorrance.eu
www.4d.dorrance.eu

PS: If you know of anyone that needs an experienced 4D programmer to add
energy and experience to their team, please let me know. I have
experience in many areas. Reasonable rates. Remote or Paris only.
**
4D Internet Users Group (4D iNUG)
FAQ:  http://lists.4d.com/faqnug.html
Archive:  http://lists.4d.com/archives.html
Options: http://lists.4d.com/mailman/options/4d_tech
Unsub:  mailto:4d_tech-unsubscr...@lists.4d.com
**