I'd like to have the ability to load and save files to Cloud storage, (or a local ftp server).

The reason is that if I'm working on a design and go away, I can't shut the computer down. It has to go onto standby.

After working on Microsoft Teams and 365, they force you to get used to using a Cloud. So unfortunately, the openjscad.xyz system feels a bit clunky in comparison.

Please consider at some point adding Cloud Load/Save if there is enough user interest.

Here's a discussion about a Javascript code snippet where something similar is implemented.

@hrgdavor Thanks. I will definitely try it and report back.

I'm wondering if you could clarify "Why do we need this and why should we care?" Meaning who is it directed at particularly and what reasons about this piece of software compel them to use it instead of choosing other software.

I personally can think of my own reasons but think about presenting your own story.

@z3dev said in Click to item for Callback/Event functionality:

the focus of JSCAD is still 3D printing

Yes, that aligns with what I am doing.

The reason that I was querying this capability is that in the above picture of a drill-tray example, made from a photo-scan, I want to put in different options for the hinge and lid made by clicking on the parts in the jscad ui.

It's no big deal if it's not easy to achieve (as explained by @hrgdavor) in jscad at this point in time. I can resolve this some other way. I just thought it might be easy*

Interestingly, I was able to find that there is a component that does what I need for gltf but I haven't been able to locate an Open-Source equivalent just yet. https://iconscout.com/gltf-3d-editor provides a simple click+transform+rotate component for their platform that does what I was looking for.

@hrgdavor said in Click to item for Callback/Event functionality:

I need to ask @z3dev to confirm this is not something in scope of jscad

No problem. It's 'obvious now that it would be a huge upgrade.

https://www.youtube.com/watch?v=y0MPVDRaP8E

However, from the research I've just done on this in the last week it seems that Solidworks has had the Click-Item and Animation capabilities for years.

I've just worked out for my own project that I do "need" these capabilities for "Sales" related reasons.

I also found another framework that has a JS animations API where a bit of work has gone into it: https://docs.metroui.org.ua/m4q-animation.html

They've gone through and thought out how to simplify the movement of objects from in the API with methods.

var el = $("#demo-cube-2");
var startPos = parseInt(el.style("left"));
var maxLeft = startPos === 0 ? el.parent().width() - 62 : 0;

btn.disabled = true;

$.animate(el, {
    left: maxLeft
}, 3000, function(){
    btn.disabled = false;
});

From my point of view, my use case would be to be able to click on a top-level entity, and then inside the callback fire off the animation routine and display the items moving.

My own practical use is that I have some boxes, and I'd like the lids to open. And other movements related to that.

Since it's Javascript and they already support Events and animations anyway, I'm hoping that the functionality wouldn't be out of place.

@hrgdavor said in Click to item for Callback/Event functionality:

Said like that it is not too hard but it opens a pandora box and a can of worms.

You call them worms, somebody else calls it Pasta.

who receives the callback,

The name of the callback-function would be passed into the dictionary. So specifically, it has to be supplied by the Creator.

Eg:

return [
  [colorize([0.65, 0.25, 0.8], outer),{'onclick':outerclick}], 
  colorize([0.7, 0.7, 0.1], inner),
]

do you need also moseover event

Probably. Somebody is going to ask for it. It might look like this:
[ [colorize([0.7, 0.7, 0.1], inner],{'mouseover':'innerhover'}]),

how do you highlight the selected element ?

The caller can do it in the callback. For example with the built in method 'colorise'. A reference to the object is passed to the callback.

what types of highlights would you need

Only existing JSCAD CSG (modelling) methods such as Transform (make it bigger), colorize (change color) etc.

what would you do with the selected item afterwards

Nothing - leave the object changed. Konva is another 2D JS framework and they have all the events worked out. If the item needs to be deselected if another item is clicked, that can be done in the callback code.

index is fragile, objects should have a unique id for callback

Most callbacks (for eg on Konva) give a pointer/reference to the object for the callback. ie

function outerclick(obj) { 
  return(colorize([0.15, 0.35, 0.33], obj))
}

script is in the worker, renderer is on main thread

ok

how to send granular updates instead of re-render whole script (exponentional complication)

Just update the single object, and then do a refresh. On Konva for example, you have to update the Frame-Buffer yourself to see the change. But their use case is complex.

function outerclick(ref) {
return(colorize([0.15, 0.35, 0.33], ref))
}

@z3dev said in Click to item for Callback/Event functionality:

@DavidLyon66 The design is assembled via a call to main(), which can accept a single dictionary of parameters (This is what happens for the parameters). The interactive parameters are converted to a dictionary.

That makes it easier to specify the name of a callback function. Just add it to the dictionary.

It might be worth looking at the Solidworks Animator. I was shown it by a CAD Operator at a place that I worked at once where they used it to show a machine design to a client to help motivate them to pay for the job.

https://www.youtube.com/watch?v=CwklwnqzbVU

Adding a Timeline isn't as hard as it seems. I'm not asking for it. I'm only mentioning it as this is the complete use-case. To be able to watch some sort of CAD Design in operation or action. Which is often what the client wants.

i don't need the animation in my use case.

@hrgdavor wrote:

it would take me at least a year

Thanks for the response. I wouldn't ask that you do that.

I will look for a workaround in this case.

I'm surprised that there isn't some sort API call available deep down inside the original code to accomplish this. Obviously I haven't checked it myself.

Using an example:

const jscad = require('@jscad/modeling')
const { intersect, subtract } = jscad.booleans
const { colorize } = jscad.colors
const { cube, sphere } = jscad.primitives

function main() {
  const outer = subtract(
    cube({ size: 10 }),
    sphere({ radius: 6.8 })
  )
  const inner = intersect(
    sphere({ radius: 4 }),
    cube({ size: 7 })
  )
  return [
    colorize([0.65, 0.25, 0.8], outer),
    colorize([0.7, 0.7, 0.1], inner),
  ]
}

module.exports = { main

The above has two objects being returned:

return [
  colorize([0.65, 0.25, 0.8], outer),
  colorize([0.7, 0.7, 0.1], inner),
]

I would have thought that a callback with an index for the item on selection might not have been that hard.

Thanks for the reply. At least I can proceed on the assumption that Callback-Events might not be available for the next few months

@hrgdavor I'm not sure that it's a huge amount of work.

I believe that it is only a matter of tweaking the existing code. Since 'everyone else has done it'. It's in everything from Blender to Ultimaker Cura where you can select top-level meshes, split, then move them around for printing in different places.

Here is a practical example of it being used elsewhere in an example: https://aframe.io/examples/showcase/responsiveui/

The idea is that you can select an object from the top level and have some simple level of control for it.

I have been enjoying JSCAD so far.

One function that would be very useful is to be able to click on an object and receive a js callback to the object in code.

I have just taken a screenshot of the example app for reference.

The JSCAD app creates a number of solids that are fed back to the viewer and the viewer renders them.

What would be very handy is to have the ability to select on of these top level objects and then be able to in code be able to do modifications to that selected object.

The level of interaction can be coursely-grained. No edge or face selection needs to be provided initially.

Typically, the use case might be to click on a particular object and then in code in a callback change the colour, position, scale or other properties.

@Nathan-Apter ok, I upgraded by still not working.

@Nathan-Apter

The latest update reports some sort of error and is unable to run.