Bonjour, j'ai du mal à recréer quelque chose comme les interfaces glisser-déposer utilisées dans (JMP Pro) les diagrammes de blocs SEM et de fiabilité.
L'idée est d'avoir une palette de « boîtes » sur le côté gauche de l'écran. Je veux pouvoir sélectionner une boîte, la faire glisser au centre de l'écran, la déposer, puis sélectionner une autre boîte, la faire glisser et la déposer, et ainsi de suite.
J'ai essayé plusieurs méthodes, notamment des poignées et des pièges à souris. J'arrive à un certain point, mais pas à aller jusqu'au bout.
Voici mon code le plus récent, utilisant Mousetrap. Je peux sélectionner le rectangle en haut à gauche du GraphBox, le déplacer sur l'écran et le déposer où je le souhaite (il devient noir une fois déposé). Cependant, je ne peux ensuite pas sélectionner un autre rectangle. Je peux uniquement déplacer celui que je viens de déposer. Il m'est impossible d'en ajouter un autre.
Je suis en train de développer ceci sous forme d'application, mais je suis prêt à changer cela si cela peut aider.
Le script ci-dessous illustre le code que j'ai créé dans Application Builder. Le fichier joint contient l'application complète.
J'ai bien peur de ne pas maîtriser certains aspects de Mousetrap, GraphBoxes et Add Graphics Scripts. Quelqu'un pourrait-il m'aider ?
// This script is executed when a new module instance is
// created. The pre-defined object "thisModuleInstance" refers
// to the instance object, but other objects such as boxes and
// scripts have not yet been created. Variables declared here are
// scoped to the ModuleInstance namespace.
// This special function will receive parameters passed to CreateInstance()
OnModuleLoad({},
);
thisModuleInstance << Create Objects;
// After this point your module instance objects have been created
// and can be referred to by name (for example, "Button1").
x0=5;
y0=95;
winref = (this module instance << Get Box);
// set graph box scales
winref[framebox(1)] << xaxis(0,100);
winref[framebox(1)] << yaxis(0,100);
// draw box in upper left corner.
pen color("Green");
winref[framebox(1)] << add graphics script(
pen color("Green");
Line({0,90}, {10,90},{10,100}, {0,100},{0,90}));
winref[framebox(1)] << Add Graphics Script(
Mousetrap(
// drag script (mouse down)
(
// if mouse location is within box in upper left corner, then OK to drag.
if(
and(
x>=x0-5,
y>=y0-5,
x<=x0+5,
y<=y0+5
),
(
// set x0 and y0 if that were true
x0 = x;
y0 = y;
// redraw the box at current mouse location while mouse button is down
winref[framebox(1)] << add graphics script(
"Front",
pen color("Green");
Line({x0-5, y0-5}, {x0+5, y0-5}, {x0+5, y0+5}, {x0-5, y0+5}, {x0-5, y0-5}));
)
);
),
(
// mouse up script
// draw a polygon centered at the current mouse location
winref[framebox(1)] << add graphics script(
polygon({x0-5,y0-5},{x0+5,y0-5},{x0+5,y0+5},{x0-5,y0+5},{x0-5,y0-5})
);
// at this point I want to manually reposition the mouse over the original box in the
// upper left, and grab another box.
// Instead, all I can do is grab the box I just created and drag it somewhere else.
)
);
);
Il est déconseillé d'ajouter constamment de nouveaux scripts graphiques, car cela finira par écraser votre condition « if() » et « saturer » la fenêtre d'affichage.
Vous pouvez le construire de bien meilleure façon, mais voici un exemple de ce que vous pourriez faire.
Names Default To Here(1);
rects = {};
x0 = 5;
y0 = 95;
x = .;
y = .;
nw = New Window("Example",
Graph Box(
Frame Size(200, 200),
Mousetrap(
x0 = x;
y0 = y;
,
p = EvalExpr(Polygon(
{Expr(x0+5), Expr(y0-5)},
{Expr(x0+5), Expr(y0+5)},
{Expr(x0-5), Expr(y0+5)},
{Expr(x0-5), Expr(y0-5)}
));
Insert Into(rects, Name Expr(p));
);
Pen color("Green");
Line({0,90}, {10,90},{10,100}, {0,100},{0,90});
If(x >= x0 - 5 & y >= y0 - 5 & x <= x0 + 5 & y <= y0 + 5,
Pen color("Green");
Line({x0-5, y0-5}, {x0+5, y0-5}, {x0+5, y0+5}, {x0-5, y0+5}, {x0-5, y0-5});
);
For(i = 1, i <= N Items(rects), i++,
Pen Color("Black");
Eval(rects[i]);
);
);
);
</CODE></P>
<P><SPAN class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="jthi_1-1766523967638.png" style="width: 400px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><span class="lia-inline-image-display-wrapper" image-alt="jthi_1-1766523967638.png" style="width: 260px;"><img src="https://us.v-cdn.net/6038925/uploads/images/89563i0F98FCB07A4441BC/jthi_1-1766523967638.png" role="button" title="jthi_1-1766523967638.png" alt="jthi_1-1766523967638.png" /></span></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></P>
<BR />
<P>Édit : Ajout de l'initialisation pour x et y</P>
</LINGO-BODY>
<LINGO-SUB id="lingo-sub-921160" slang="en-US" mode="UPDATE" translate="no">Re: Création d'un script glisser-déposer</LINGO-SUB>
<LINGO-BODY id="lingo-body-921160" slang="en-US" mode="UPDATE">
<P>Je reçois :</P>
<P><FONT face="courier new,courier">DisplayBox[EvalContextBox]</FONT><BR /><FONT face="courier new,courier">Nom non résolu : x lors de l'accès ou de l'évaluation de 'x', x/*###*/</FONT></P>
<P><FONT face="courier new,courier">à la ligne 26</FONT><BR /><BR /></P>
<P>x et y persistent-ils à l'extérieur du piège à souris ?</P>
<P><SPAN class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="hogi_0-1766525524905.png" style="width: 999px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="hogi_0-1766525524905.png" style="width: 784px;"><span class="lia-inline-image-display-wrapper" image-alt="hogi_0-1766525524905.png" style="width: 784px;"><img src="https://us.v-cdn.net/6038925/uploads/images/89564iE967B41113B5D41E/hogi_0-1766525524905.png" role="button" title="hogi_0-1766525524905.png" alt="hogi_0-1766525524905.png" /></span></SPAN></SPAN></P>
<P><STRONG>modifier</STRONG> :<BR /> Ils « persistent en dehors de la Souricière »<BR /> — mais pas définitivement. Il semblerait qu'elles se réinitialisent lorsque l'on relâche le bouton de la souris.<BR /> <A href="https://community.jmp.com/t5/Discussions/Can-JMP-graphics-have-this-effect/m-p/921213/highlight/true#M107999" target="_blank">https://community.jmp.com/t5/Discussions/Can-JMP-graphics-have-this-effect/mp/921213/highlight/true#M107999</A></P>
<BR />
<P>Super ! Avec le rectangle vert, l'illusion de « glisser » est très convaincante ; )<BR /> Sans le rectangle vert, on a plutôt l'impression d'ajouter un rectangle noir à chaque clic de souris.</P>
<P></P>
<iframe src="https://players.brightcove.net/6058004218001/default_default/index.html?videoId=6386912122112" width="280" height="280" allowfullscreen allow="encrypted-media"></iframe>
<P></P>
</LINGO-BODY>
<LINGO-SUB id="lingo-sub-921187" slang="en-US" mode="CREATE" translate="no">Re: Création d'un script glisser-déposer</LINGO-SUB>
<LINGO-BODY id="lingo-body-921187" slang="en-US" mode="CREATE">
<P>Il est fort probable que mes variables x et y n'aient pas été initialisées en mémoire, ce qui expliquait le dysfonctionnement. J'ai donc mis à jour le script en y ajoutant l'initialisation de x et y, et maintenant cela semble fonctionner dans une nouvelle session JMP.</P>
</LINGO-BODY>
<LINGO-SUB id="lingo-sub-921211" slang="en-US" mode="CREATE" translate="no">Re: Création d'un script glisser-déposer</LINGO-SUB>
<LINGO-BODY id="lingo-body-921211" slang="en-US" mode="CREATE">
<P>Merci <A href="https://community.jmp.com/t5/user/viewprofilepage/user-id/14366" target="_blank">@jthi</A> (et à <A href="https://community.jmp.com/t5/user/viewprofilepage/user-id/26800" target="_blank">@hogi</A> pour ta contribution) ! Je devrais pouvoir l'adapter à mes besoins. J'ai aussi appris des choses sur Mousetrap, Add Graphics Script et Name Expr.</P>
<P>La communauté JMP ne cesse de m'impressionner par sa réactivité et ses connaissances. Un grand merci !</P>
</LINGO-BODY>
<LINGO-SUB id="lingo-sub-921219" slang="en-US" mode="UPDATE" translate="no">Re: Création d'un script glisser-déposer</LINGO-SUB>
<LINGO-BODY id="lingo-body-921219" slang="en-US" mode="UPDATE">
<P>Il s'agit d'une version avancée du script de <A href="https://community.jmp.com/t5/user/viewprofilepage/user-id/14366" target="_blank">@jthi</A> :</P>
<P>- Les cases existantes peuvent être déplacées.</P>
<P>- Aucune boîte n'est créée ni déplacée lorsque l'utilisateur clique sur une zone sans boîte.</P>
<P>- La boîte initiale en haut sert de réservoir infini de boîtes.</P>
<P></P>
<iframe src="https://players.brightcove.net/6058004218001/default_default/index.html?videoId=6386914707112" width="276" height="280" allowfullscreen allow="encrypted-media"></iframe>
<P></P>
<BR />
<PRE><CODE class=" language-jsl">Names Default To Here( 1 );
squares = {{5, 95}};
x = .;
y = .;
mouseDown = 1;
foundOne = 0;
nw = New Window( "Example",
Graph Box(
Frame Size( 200, 200 ),
Mousetrap(
// find a neighboring square
If( mouseDown,
x0 = x;
y0 = y;
If( N Items( squares ),
kt = KDTable( Matrix( squares ) );
{row, dist} = kt << K nearest rows( {1, 10}, Matrix( {x0, y0} ) );
If( N Items( row ) & dist[1] < 10,
If( row > 1, // keep the one at the top corner
Remove From( squares, row[1] )
);
foundOne = 1;
);
);
);
mouseDown = 0;,
// mouse relesed -> save the square
If( foundOne,
Insert Into( squares, Eval List( {Eval List( {x, y} )} ) )
);
//reset
mouseDown = 1;
foundOne = 0;
);
Pen Color( "Green" );
Line( {0, 90}, {10, 90}, {10, 100}, {0, 100}, {0, 90} ); // 1st square to start with
// dragged square
If( Not( Is Missing( x ) ) & foundOne,
Line( {x - 5, y - 5}, {x + 5, y - 5}, {x + 5, y + 5}, {x - 5, y + 5}, {x - 5, y - 5} )
);
For( i = 1, i <= N Items( squares ), i++,
Pen Color( "Black" );
Eval(
{x0, y0} = squares[i];
Polygon( {x0 + 5, y0 - 5}, {x0 + 5, y0 + 5}, {x0 - 5, y0 + 5}, {x0 - 5, y0 - 5} );
);
);
)
);
