How do I embed multiple svg images (using svg & donut classes)

[truegold]

Hi Vincent,

I hope I have explained this clearly.

App: SVG-with-Classes Classes; svg; chart Method: Code Sample

Note: I will rename the “chart” class to “donut” class as it’s a particular kind of chart component the way I will be using it.

I’m recreating a complex drawing of different svg objects placed at various positions. Let’s say we have a form which has a picture variable. The picture variable corresponds to a page (could be portrait or landscape). The page is really just a picture variable that will contain many svg images/objects within it.

A chart consists of various components like circles and lines and “donuts” and other symbols. So, for example, I need to use a donut as part of a parent chart which is placed in an absolute location x/y on a page (svg document -> picture). The other svg images will be placed in different locations on the page.

A page might consist of objects like:

Single chart (including 1-4 donuts at various radii) Info table (text columns in svg) Grid (each cell will display an svg symbol) Ruler/Slider with svg symbols built using svg … and so on

Each are distinct svg images/objects embedded into an overall svg/picture variable. Of course, they will render on a form so will need to manage within a Form object.

Using the svg, donut and other classes (to be created) how do I add these to a single svg object which is then passed back into a picture object for display?

I’ve been working this way using the SVG Component for many years. I'm not sure what is the optimal approach using the svg class. It’s a whole different mindset.

I’m sure this is easy, and it’s in the docs, but I haven't been able to “see” it yet. And thus my efforts have failed.

How would you approach embedding multiple svg images?

Thanks, John...

[vdelachaux]

Hi John,

Here's my suggestion: declare each graphic as a symbol. Then decide on the position of each in the main document.

var $ref : Text
var $chart : cs.chart

$chart:=cs.chart.new()

$chart.donut("1st"; 200; 200; 120).stroke("lightgray")

// Keep the chart reference
$ref:=$chart.latest

// Draws the wedges
$chart.wedge("1st"; 25).fill("lemonchiffon")
$chart.wedge("1st"; 12).fill("thistle")
$chart.wedge("1st"; 25).fill("palegreen")
$chart.wedge("1st"; 40).fill("lightcyan")

// Making it a symbol
$chart.symbol("donut"; $ref)

// Place the graphic where you want it
$chart.use("donut"; $chart.root).position(50; 50)

$chart.preview()

HTH Vincent

[vdelachaux]

I've just added HDI_symbol and made a few corrections to get it working properly.

[truegold]

Hi Vincent,

Ah yes I see. In 4D classic SVG I have a routine that loads a series of custom svg images into the SVG document. When I need them I use SVG_Use for better positioning. So this is a similar concept.

I had not thought about creating a complex SVG image this way. I have been using svg group for purposes of easier management.

So this makes sense, and looking at the xml source, in your HDI, it’s a bit easier to read as well.

As to the page object placements - it will be based on a template where the end user creates a page and places domain related objects onto it.

One more question please?

I would like to keep the SVG class pure and in sync as it’s updated. So now I am thinking of renaming the “donut” class to “pageObjects” and then adding new objects to it. So “donut” or “pie" are one of many page objects created. Does that make sense or would it be better to make each page object it’s own class?

Appreciate, John…

On Sep 5, 2023, at 1:40 AM, Vincent de Lachaux @.***> wrote:

I've just added HDI_symbol

Here's my suggestion: declare each graphic as a symbol. Then decide on the position of each in the main document. var $ref : Text var $chart : cs.chart

$chart:=cs.chart.new()

$chart.donut("1st"; 200; 200; 120).stroke("lightgray")

// Keep the chart reference $ref:=$chart.latest

// Draws the wedges $chart.wedge("1st"; 25).fill("lemonchiffon") $chart.wedge("1st"; 12).fill("thistle") $chart.wedge("1st"; 25).fill("palegreen") $chart.wedge("1st"; 40).fill("lightcyan")

// Making it a symbol $chart.symbol("donut"; $ref)

// Place the graphic where you want it $chart.use("donut"; $chart.root).position(50; 50)

$chart.preview() HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1706189184, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC47FRBPLDDVP6DDZ63XY3QORANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

Hi Hohn,

As I understand things, there are 2 solutions:

• Make a pageObjects class with functions common to all objects and a class for each object type, all of which inherit from the pageObjects class.

//donut
class extend pageObjects

class constructor 

super()

• Make a pageObjects class containing delegates to each object class.

//pageObjects

class constructor 

//Delegates
This.donut:=cs.donut
This.pie:=cs.pie

function donut(…)

This.donut.new(…)

Having tried the 2 solutions, the second is clearly preferable in terms of maintenance and evolution, as it's easy to add new objects.

Vincent

[truegold]

Hi Vincent,

Thank you for sharing your thoughts. You are way ahead of me in terms of these OOP patterns. I will have to wrap my head around them through some research and study.

• Make a pageObjects class containing delegates to each object class… preferable in terms of maintenance and evolution, as it's easy to add new objects.

I just took a look at your UI class. I think there is a lot of similarity to what I am doing:

Your class => my class form => page formobject => pageObject thermometer => modulusBar and so on…

Does this project use delegation? Is it a good project to study to understand how class delegation is implemented?

Or is there a better project to learn from?

Appreciate, John…

On Sep 6, 2023, at 1:04 AM, Vincent de Lachaux @.***> wrote:

Hi Hohn,

As I understand things, there are 2 solutions:

• Make a pageObjects class with functions common to all objects and a class for each object type, all of which inherit from the pageObjects class. //donut

class extend pageObjects

class constructor

super ()

• Make a pageObjects class containing delegates to each object class. //pageObjects

class constructor

//Delegates This.donut:=cs.donut This.pie:=cs.pie

function donut (…)

This.donut.new (…)

Having tried the 2 solutions, the second is clearly preferable in terms of maintenance and evolution, as it's easy to add new objects.

Vincent

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[vdelachaux]

Hi John,

If you've seen the user interface classes in this repository, this is a first approach that corresponds to solution No 1.

You can find a version that uses delegates in the 4DPop Git repository (solution No 2).

The formDelegate class is used in all _XXXX_Controller classes:

Class constructor
...
// MARK:-Delegates 📦
This.form:=cs.formDelegate.new(This)

The formDelegate class itself uses delegates for the various form object types:

// MARK:Delegates 📦
This.static:=cs.staticDelegate  
This.button:=cs.buttonDelegate  
This.comboBox:=cs.comboBoxDelegate
This.dropDown:=cs.dropDownDelegate
This.group:=cs.groupDelegate
This.hList:=cs.hListDelegate
This.input:=cs.inputDelegate
This.listbox:=cs.listboxDelegate
This.picture:=cs.pictureDelegate
This.selector:=cs.selectorDelegate
This.stepper:=cs.stepperDelegate
This.subform:=cs.subformDelegate
This.thermometer:=cs.thermometerDelegate
This.widget:=cs.widgetDelegate

This.window:=cs.windowDelegate.new(This)

So, in the _XXXX_Controller class, I can write the following during form initialisation:

This.myButton:=This.form.button.new("myButton")

And further on, during an update for example:

This.myButton.disable()

HTH Vincent

[truegold]

Hi Vincent,

OK, I have both to compare and study.

Boy does this take a new mindset. Understanding the basics of OOP, seems simple enough, is not enough. I guess it takes a lot of time working with these new concepts to develop the mental framework and familiarity.

Anyway…

Appreciate, as always, John...

On Sep 6, 2023, at 10:17 AM, Vincent de Lachaux @.***> wrote:

Hi John,

If you've seen the user interface classes in this repository https://github.com/vdelachaux/UI-with-Classes, this is a first approach that corresponds to solution No 1.

You can find a version that uses delegates in the 4DPop Git repository (solution No 2).

The formDelegate class is used in all _XXXX_Controller classes:

Class constructor ... // MARK:-Delegates 📦 This.form:=cs.formDelegate.new(This) The formDelegate class itself uses delegates for the various form object types:

// MARK:Delegates 📦 This.static:=cs.staticDelegate
This.button:=cs.buttonDelegate
This.comboBox:=cs.comboBoxDelegate This.dropDown:=cs.dropDownDelegate This.group:=cs.groupDelegate This.hList:=cs.hListDelegate This.input:=cs.inputDelegate This.listbox:=cs.listboxDelegate This.picture:=cs.pictureDelegate This.selector:=cs.selectorDelegate This.stepper:=cs.stepperDelegate This.subform:=cs.subformDelegate This.thermometer:=cs.thermometerDelegate This.widget:=cs.widgetDelegate

This.window:=cs.windowDelegate.new(This) So, in the _XXXX_Controller class, I can write the following during form initialisation:

This.myButton:=This.form.button.new("myButton") And further on, during an update for example:

This.myButton.disable() HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1708794688, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHCZEFG4LSYCBIYXKJM3XZCV3NANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[truegold]

Hi Vincent,

I Don’t have github setup so there’s no way to run and trace through the code.

I can see that ‘formDelegate’ class has a collection of all the delegate classes within it. Each ‘xxxxxDelegate’ class is instantiated. And it looks like the three _XXXX_Controller classes instantiate the ‘This.form:=formDelegate...’ class in the constructor. But I can’t test it any further...

Is there anyway you could set up a small example project - one that could be traced through - using the Delegate pattern? How it’s called and use after constructed?

Appreciate, John…

On Sep 6, 2023, at 10:42 AM, John J Foster @.***> wrote:

Hi Vincent,

OK, I have both to compare and study.

Boy does this take a new mindset. Understanding the basics of OOP, seems simple enough, is not enough. I guess it takes a lot of time working with these new concepts to develop the mental framework and familiarity.

Anyway…

Appreciate, as always, John...

On Sep 6, 2023, at 10:17 AM, Vincent de Lachaux @. @.>> wrote:

Hi John,

If you've seen the user interface classes in this repository https://github.com/vdelachaux/UI-with-Classes, this is a first approach that corresponds to solution No 1.

You can find a version that uses delegates in the 4DPop Git repository (solution No 2).

The formDelegate class is used in all _XXXX_Controller classes:

Class constructor ... // MARK:-Delegates 📦 This.form:=cs.formDelegate.new(This) The formDelegate class itself uses delegates for the various form object types:

// MARK:Delegates 📦 This.static:=cs.staticDelegate
This.button:=cs.buttonDelegate
This.comboBox:=cs.comboBoxDelegate This.dropDown:=cs.dropDownDelegate This.group:=cs.groupDelegate This.hList:=cs.hListDelegate This.input:=cs.inputDelegate This.listbox:=cs.listboxDelegate This.picture:=cs.pictureDelegate This.selector:=cs.selectorDelegate This.stepper:=cs.stepperDelegate This.subform:=cs.subformDelegate This.thermometer:=cs.thermometerDelegate This.widget:=cs.widgetDelegate

This.window:=cs.windowDelegate.new(This) So, in the _XXXX_Controller class, I can write the following during form initialisation:

This.myButton:=This.form.button.new("myButton") And further on, during an update for example:

This.myButton.disable() HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1708794688, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHCZEFG4LSYCBIYXKJM3XZCV3NANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

Hi John, Yes I keep a collection of delegates for other purposes, it's not necessary. If you can't run 4DPop Git code, the same concept is use in 4DPop XLIFF Pro. I plan to make a demo in a sample project, but it's a bit of work that I haven't had time to do yet... Vincent

[truegold]

Hi Vincent,

I plan to make a demo in a sample project, but it's a bit of work that I haven't had time to do yet...

Yes, I understand.

I’ll see how far I can get with “4DPop XLIFF Pro”. The challenge with the GIT is that it seems like it freezes on opening the editor. It’s in some sort of loop. Then when the debugger is activated it results in a series of errors and eventually a crash. So I can never get to the part where I can inspect the delegates.

Appreciate, John…

On Sep 7, 2023, at 12:59 AM, Vincent de Lachaux @.***> wrote:

Hi John, Yes I keep a collection of delegates for other purposes, it's not necessary. If you can't run 4DPop Git code, the same concept is use in 4DPop XLIFF Pro. I plan to make a demo in a sample project, but it's a bit of work that I haven't had time to do yet... Vincent

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[truegold]

Hi Vincent,

It looks like there’s a similar issue with the “XLIFF Pro”. But…

If I don't add the “This” object to the debugger and open the disclosure triangle to inspect it’s contents then I can make it through without crashing.

It’s seem like the Asserts to check subforms is where the “This" object runs into the error state that eventually leads to a crash.

It’s not an issue (nor a bug, per se) unless you want to inspect the “This” object.

I am able to add “This.DELEGATE” to the debugger and watch it build.

I think conceptually I prefer this approach. Seems like being able to have all the needed classes available from a single class makes it simpler to manage the code. Not to mention it still keeps each class independent from a code library standpoint.

But I’m at the beginning of understanding this approach so…

Appreciate, John…

On Sep 7, 2023, at 6:11 AM, John J Foster @.***> wrote:

Hi Vincent,

I plan to make a demo in a sample project, but it's a bit of work that I haven't had time to do yet...

Yes, I understand.

I’ll see how far I can get with “4DPop XLIFF Pro”. The challenge with the GIT is that it seems like it freezes on opening the editor. It’s in some sort of loop. Then when the debugger is activated it results in a series of errors and eventually a crash. So I can never get to the part where I can inspect the delegates.

Appreciate, John…

On Sep 7, 2023, at 12:59 AM, Vincent de Lachaux @.***> wrote:

Hi John, Yes I keep a collection of delegates for other purposes, it's not necessary. If you can't run 4DPop Git code, the same concept is use in 4DPop XLIFF Pro. I plan to make a demo in a sample project, but it's a bit of work that I haven't had time to do yet... Vincent

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[vdelachaux]

Hi John,

I created a branch with 2 demos: https://github.com/vdelachaux/UI-with-classes/tree/delegates HTH Vincent

[truegold]

Hi Vincent,

Thank you!

I’ve spent a bit off time researching/reading “theoretical” patterns and almost all the examples have to do with a hierarchical Tree or a file system or events. And of course, even the javascript examples are not quite like “4D” way.

Your UI project is a very comprehensive solution. It has a complete architecture that requires a bit of time to deconstruct and understand. So isolating into a simple form should be most helpful

Appreciate your investment of time and skill, John…

On Sep 7, 2023, at 12:40 PM, Vincent de Lachaux @.***> wrote:

Hi John,

I created a branch with 2 demos: https://github.com/vdelachaux/UI-with-classes/tree/delegates https://github.com/vdelachaux/UI-with-classes/tree/delegates HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1710678401, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHCYQQ4HVIKSYWQT536TXZIPLDANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[truegold]

Hey Vincent,

Trying to direct the code so, to start, I can simplify and map for my use.

What would the purpose of ‘This.form.DELEGATES’ collection be for?

It doesn’t appear to be used anywhere. Is it just for viewing purposes to see what delegates have been made available?

Thanks, John…

On Sep 7, 2023, at 1:01 PM, John J Foster @.***> wrote:

Hi Vincent,

Thank you!

I’ve spent a bit off time researching/reading “theoretical” patterns and almost all the examples have to do with a hierarchical Tree or a file system or events. And of course, even the javascript examples are not quite like “4D” way.

Your UI project is a very comprehensive solution. It has a complete architecture that requires a bit of time to deconstruct and understand. So isolating into a simple form should be most helpful

Appreciate your investment of time and skill, John…

On Sep 7, 2023, at 12:40 PM, Vincent de Lachaux @. @.>> wrote:

Hi John,

I created a branch with 2 demos: https://github.com/vdelachaux/UI-with-classes/tree/delegates https://github.com/vdelachaux/UI-with-classes/tree/delegates HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1710678401, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHCYQQ4HVIKSYWQT536TXZIPLDANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

Yes, you're right for the moment, __DELEGATES__ is not used ;-) but useful for debugging. I had other ideas when I set up this collection, but it's not used yet. Vincent

[truegold]

Hi Vincent,

OK.

I continue to analyze, trying to simplify to understand, and it seems that the classes are organized in a class hierarchy. And then the delegate piece comes into play.

I’m studying the Password dialog example you posted...

There are debugger challenges. If “This.DIALOG.form" is added to the debugger and disclosure triangle expanded (can’t see expanded because of error):

Then these kinds of errors happen which makes it difficult to trace line by line:

These loops continues unless it’s aborted. So I am still not sure how and when a delegate is used.

Is there a way to turn off these “asserted” checks so I can follow a path to and from a delegate class?

Appreciate, John…

On Sep 11, 2023, at 6:17 AM, Vincent de Lachaux @.***> wrote:

Yes, you're right for the moment, DELEGATES is not used ;-) but useful for debugging. I had other ideas when I set up this collection, but it's not used yet. Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1713863057, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC4GR2MH4ONCALA2A2DXZ4FPHANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

Is there a way to turn off these “asserted” checks so I can follow a path to and from a delegate class?

Yes, when the error dialog box appears, click on the "Continue" button while holding down the option (macOS) / Alt (Windows) key. This will be ignored during the session.

HTH Vincent

[truegold]

Hi Vincent,

That work!

Is your use of the Delegate pattern derived from any other language? Or is it your own evolutionary implementation?

I’m looking for other relevant explanations of the patten.

Appreciate, John…

On Sep 12, 2023, at 4:32 AM, Vincent de Lachaux @.***> wrote:

Is there a way to turn off these “asserted” checks so I can follow a path to and from a delegate class?

Yes, when the error dialog box appears, click on the "Continue" button while holding down the option (macOS) / Alt (Windows) key. This will be ignored during the session.

HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1715551688, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC3WHGNUWQ2JZXAU7BTX2BB37ANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

When I spoke to Laurent Esnault about the difficulties I was having maintaining class inheritance (it's easy to make the mistake of creating a function or attribute that hides an inherited function without warning, for example) he said "use delegation". I searched the web and found some relevant information from which I made this implementation. With delegates, you're sure not to break the main class. And I find that the code is much clearer. A reference I've worked with: https://dev.to/kalashin1/inheritance-vs-delegation-1mjo voilà Vincent

[truegold]

Hi Vincent,

Thank you for sharing that. Interesting that I found lots of different articles but not that one.

In studying your approach:

I see that the class hierarchy is still created as though it would be used without delegates. Is that correct?

It looms like you name the class with Delegate to show that they will be used as delegates.

Now I need to understand how the Delegate class is being called from the, I guess, controller class?

Still a bit mystifying at the moment.

Appreciate, John…

On Sep 12, 2023, at 11:13 AM, Vincent de Lachaux @.***> wrote:

When I spoke to Laurent Esnault about the difficulties I was having maintaining class inheritance (it's easy to make the mistake of creating a function or attribute that hides an inherited function without warning, for example) he said "use delegation". I searched the web and found some relevant information from which I made this implementation. With delegates, you're sure not to break the main class. And I find that the code is much clearer. A reference I've worked with: https://dev.to/kalashin1/inheritance-vs-delegation-1mjo https://dev.to/kalashin1/inheritance-vs-delegation-1mjo voilà Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1716202303, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC7MDOBP7PVPWDQA6MDX2CQ4BANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

I've started the documentation for formDelegate, there are some explanations that might be useful. I've also removed the assert when the form element is deployed in the debugger. HTH Vincent

[truegold]

Hi Vincent,

Thank you. No doubt will be helpful!

I am beginning to think that this similar to, in some sense, to a challenge I was having. I have organized a few classes in a class hierarchy Each time I needed behavior from a class in the class hierarchy I would have to instantiate an object of that class. I realized that it would be easier to instantiate these classes when I open the main form object as they would be available. So I played with that idea. However, I thought I was violating some principle.

Then I wondered if this is what folks were wrestling with when they were trying to create a singleton with all these classes? Instantiate once and refuse as needed.

It looks to me, using your technique, that any and all behavior that a form may require is available from the start. The technique to implement it is named the delegate pattern. Looks like pre-loading classes which can then be called, aka, delegated to that object to perform required behavior.

Does that make sense or am I still out in left field, as we say?

Appreciate, John…

On Sep 13, 2023, at 10:11 AM, Vincent de Lachaux @.***> wrote:

I've started the documentation for formDelegate, there are some explanations that might be useful. I've also removed the assert when the form element is deployed in the debugger. HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1718012127, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC55TQD5SI4XGWYQCHLX2HSLPANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.

[vdelachaux]

Hi John I've merged temporary jobs into the main branch and updated the readme to explain some basics. HTH Vincent

[truegold]

Hi Vincent,

Thanks again for your inspiring efforts.

Appreciate, John…

On Sep 17, 2023, at 4:33 AM, Vincent de Lachaux @.***> wrote:

Hi John I've merged temporary jobs into the main branch https://github.com/vdelachaux/UI-with-Classes and updated the readme https://github.com/vdelachaux/UI-with-Classes#readme to explain some basics. HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/7#issuecomment-1722456767, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHCZMWLZ3QBTLWT7MOX3X23NZJANCNFSM6AAAAAA4KZL4O4. You are receiving this because you authored the thread.