Skip to content

Commit bda9b19

Browse files
luc-githubluc-github
committed
more changes
1 parent d140bea commit bda9b19

File tree

19 files changed

+3656
-294
lines changed

19 files changed

+3656
-294
lines changed

‎.claude/settings.json‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,18 @@
3131
"Bash(grep -r \"extra.*scan\\\\|extra=.*scan\" /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/src --include=*.js --include=*.jsx)",
3232
"Bash(grep -r \"ssid_sta\\\\|extra.*scan\" /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/src --include=*.json --include=*.js)",
3333
"Bash(xargs grep:*)",
34-
"Bash(grep -r ssid_sta /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/config --include=*.json)"
34+
"Bash(grep -r ssid_sta /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/config --include=*.json)",
35+
"Bash(grep -r extruderdistance /c/Users/luc/Documents/GitHub/ESP3D-WEBUI --include=*.json --include=*.js)",
36+
"Bash(grep -r efeedrate /c/Users/luc/Documents/GitHub/ESP3D-WEBUI --include=*.json --include=*.js)",
37+
"Bash(for f:*)",
38+
"Bash(sed -i '/{ \"\"id\"\": \"\"Extruders\"\", \"\"name\"\": \"\"extruders\"\" },/d' \"$f\")",
39+
"Bash(echo \"done: $f\")",
40+
"Bash(sed -i 's/import { PositionsPanelElement } from \"\"..\\\\/..\\\\/..\\\\/components\\\\/Panels\\\\/Positions\"\"/import { PositionsPanelElement } from \"\"..\\\\/..\\\\/..\\\\/components\\\\/Panels\\\\/Positions\"\"\\\\nimport { ExtrudersPanelElement } from \"\"..\\\\/..\\\\/..\\\\/components\\\\/Panels\\\\/Extruders\"\"/' \"$f\")",
41+
"Bash(sed -i 's/ PositionsPanelElement,$/ PositionsPanelElement,\\\\n ExtrudersPanelElement,/' \"$f\")"
42+
],
43+
"additionalDirectories": [
44+
"C:\\Users\\luc\\Documents\\GitHub\\ESP3D-WEBUI",
45+
"c:\\Users\\luc\\.claude\\projects\\c--Users-luc-Documents-GitHub-ESP3D-WEBUI\\memory"
3546
]
3647
}
3748
}

‎css_transition/jog-commandes.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
useEffect(() => {
2+
// Nettoyage précédent si nécessaire
3+
const cleanup = () => {
4+
// On peut laisser vide ou ajouter removeEventListener si tu veux être très propre
5+
};
6+
7+
const attach = (id, handlers) => {
8+
const el = document.getElementById(id);
9+
if (!el) return;
10+
11+
if (handlers.down) el.addEventListener('mousedown', handlers.down);
12+
if (handlers.up) el.addEventListener('mouseup', handlers.up);
13+
if (handlers.out) el.addEventListener('mouseout', handlers.out);
14+
if (handlers.over) el.addEventListener('mouseover', handlers.over);
15+
};
16+
17+
// === Home buttons ===
18+
attach("HomeAll", {
19+
down: () => onMouseDown("HomeAll"),
20+
up: () => sendHomeCommand("", "HomeAll"),
21+
out: () => onOut("HomeAll")
22+
});
23+
24+
attach("HomeX", {
25+
down: () => onMouseDown("HomeX"),
26+
up: () => sendHomeCommand("X", "HomeX"),
27+
out: () => onOut("HomeX")
28+
});
29+
30+
attach("HomeY", {
31+
down: () => onMouseDown("HomeY"),
32+
up: () => sendHomeCommand("Y", "HomeY"),
33+
out: () => onOut("HomeY")
34+
});
35+
36+
attach("HomeZ", {
37+
down: () => onMouseDown("HomeZ"),
38+
up: () => sendHomeCommand("Z", "HomeZ"),
39+
out: () => onOut("HomeZ")
40+
});
41+
42+
// === Jog circles (factorisé) ===
43+
const jogSizes = ['100', '10', '1', '0_1'];
44+
const directions = [
45+
{ prefix: 'V_top', axis: V_axis, dist: (s) => V_axis_top_dir + s.replace('_', '.') },
46+
{ prefix: 'H_right', axis: H_axis, dist: (s) => H_axis_right_dir + s.replace('_', '.') },
47+
{ prefix: 'V_bottom', axis: V_axis, dist: (s) => V_axis_bottom_dir + s.replace('_', '.') },
48+
{ prefix: 'H_left', axis: H_axis, dist: (s) => H_axis_left_dir + s.replace('_', '.') },
49+
];
50+
51+
jogSizes.forEach(size => {
52+
directions.forEach(dir => {
53+
const btnId = `${dir.prefix}_${size}`;
54+
const labelId = size === '0_1' ? 'label_circle_0_1' : `label_circle_${size}`;
55+
56+
attach(btnId, {
57+
down: () => onMouseDown(btnId),
58+
up: () => sendJogCommand(dir.axis, btnId, dir.dist(size)),
59+
out: () => onOutJog(labelId, btnId),
60+
over: () => onHoverJog(labelId)
61+
});
62+
});
63+
});
64+
65+
// === Z Bar buttons ===
66+
const zDirections = [
67+
{ id: 'Z_top_100', dist: Z_axis_top_dir + '100' },
68+
{ id: 'Z_top_10', dist: Z_axis_top_dir + '10' },
69+
{ id: 'Z_top_1', dist: Z_axis_top_dir + '1' },
70+
{ id: 'Z_top_0_1', dist: Z_axis_top_dir + '0.1' },
71+
{ id: 'Z_bottom_0_1', dist: Z_axis_bottom_dir + '0.1' },
72+
{ id: 'Z_bottom_1', dist: Z_axis_bottom_dir + '1' },
73+
{ id: 'Z_bottom_10', dist: Z_axis_bottom_dir + '10' },
74+
{ id: 'Z_bottom_100', dist: Z_axis_bottom_dir + '100' },
75+
];
76+
77+
zDirections.forEach(z => {
78+
const labelId = z.id.includes('100') ? 'z100' :
79+
z.id.includes('10') ? 'z10' :
80+
z.id.includes('1') && !z.id.includes('0_1') ? 'z1' : 'z0_1';
81+
82+
attach(z.id, {
83+
down: () => onMouseDown(z.id),
84+
up: () => sendJogCommand(Z_axis, z.id, z.dist),
85+
out: () => onOutJog(labelId, z.id),
86+
over: () => onHoverJog(labelId)
87+
});
88+
});
89+
90+
// === Centre posxy et posz ===
91+
attach("posxy", {
92+
down: () => onMouseDown("posxy"),
93+
up: () => sendMoveCommand("posxy", "posxy"),
94+
out: () => onOut("posxy"),
95+
over: () => onHoverJog("posxy")
96+
});
97+
98+
attach("posz", {
99+
down: () => onMouseDown("posz"),
100+
up: () => sendMoveCommand("posz", "posz"),
101+
out: () => onOut("posz"),
102+
over: () => onHoverJog("posz")
103+
});
104+
105+
return cleanup;
106+
}, [V_axis, H_axis, V_axis_top_dir, V_axis_bottom_dir, H_axis_left_dir, H_axis_right_dir, Z_axis_top_dir, Z_axis_bottom_dir, moveToTitleXY, moveToTitleZ]);

‎css_transition/jog-optimized.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/* === Styles communs (user-select + pointer-events) === */
2+
.jog, .home, .scl, .posscl, .cross {
3+
pointer-events: none;
4+
-webkit-user-select: none;
5+
-moz-user-select: none;
6+
-ms-user-select: none;
7+
user-select: none;
8+
}
9+
10+
/* === Textes === */
11+
text.jog {
12+
font-weight: 900;
13+
font-size: 11px;
14+
fill: black;
15+
}
16+
17+
text.home {
18+
font-weight: 600;
19+
font-size: 16px;
20+
}
21+
22+
text.scl {
23+
stroke: white;
24+
fill: white;
25+
}
26+
27+
text.posscl {
28+
font-weight: 200;
29+
font-size: 8px;
30+
stroke: black;
31+
fill: black;
32+
}
33+
34+
/* === Éléments interactifs standards === */
35+
.std, .movez {
36+
stroke: black;
37+
stroke-width: 1;
38+
filter: url(#f1);
39+
}
40+
41+
.path.std, rect.std, circle.std, path.std {
42+
&:hover {
43+
fill: orange;
44+
cursor: pointer;
45+
}
46+
}
47+
48+
circle.std, rect.movez {
49+
fill: #f06565;
50+
fill-opacity: 1;
51+
}
52+
53+
rect.movez:hover {
54+
fill: orange;
55+
cursor: pointer;
56+
}
57+
58+
circle.scl {
59+
fill: black;
60+
fill-opacity: 0.5;
61+
stroke: red;
62+
stroke-width: 3;
63+
filter: url(#f1);
64+
}
65+
66+
circle.cross {
67+
stroke: black;
68+
fill-opacity: 0;
69+
stroke-width: 2;
70+
}
71+
72+
path.home {
73+
stroke: black;
74+
}
75+
76+
.pressedbutton {
77+
fill: #ff7c26;
78+
stroke: black;
79+
stroke-width: 1;
80+
cursor: pointer;
81+
}

‎css_transition/jog-optimized.svg.txt‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<svg
2+
viewBox="0 -5 325 255"
3+
xmlns="http://www.w3.org/2000/svg"
4+
version="1.1"
5+
class="jog-svg"
6+
>
7+
<defs>
8+
<filter id="f1" x="-1" y="-1" width="300%" height="300%">
9+
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"/>
10+
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="4"/>
11+
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
12+
</filter>
13+
<symbol id="HomeIcon" viewBox="0 0 20 18">
14+
<path class="home" d="M3,18 v-8 l7,-6 l7,6 v8 h-5 v-6 h-4 v6 z" fill="black"/>
15+
<path class="home" d="M0,10 l10-8.5 l10,8.5" stroke-width="1.5" fill="none"/>
16+
<path class="home" d="M15,3 v2.8 l1,.8 v-3.6 z"/>
17+
</symbol>
18+
</defs>
19+
20+
{/* Home buttons */}
21+
<g id="HomeAll" class="std">
22+
<title>{T("P6")}</title>
23+
<path class="std" d="M10 182.5 h-10 v57.5 h57.5 v-10 a 125,125 0 0,1 -47.5 -47.5 Z" fill="#f0f0f0"/>
24+
<use x="3" y="217" width="20" height="18" href="#HomeIcon"/>
25+
</g>
26+
27+
<g id="HomeX" class="std">
28+
<title>{T("P7")}</title>
29+
<path class="std" d="M10 57.5 h-10 v-57.5 h57.5 v10 a125,125 0 0,0 -47.5 47.5Z" fill="Khaki"/>
30+
<use x="3" y="5" width="20" height="18" href="#HomeIcon"/>
31+
<text x="25" y="20" class="home">X</text>
32+
</g>
33+
34+
<g id="HomeY" class="std">
35+
<title>{T("P8")}</title>
36+
<path class="std" d="M230 57.5 h10 v-57.5 h-57.5 v10 a125,125 0 0,1 47.5 47.5z" fill="SteelBlue"/>
37+
<use x="217" y="5" width="20" height="18" href="#HomeIcon"/>
38+
<text x="202" y="20" class="home">Y</text>
39+
</g>
40+
41+
<g id="HomeZ" class="std">
42+
<title>{T("P9")}</title>
43+
<path class="std" d="M230 182.5 h10 v57.5 h-57.5 v-10 a125,125 0 0,0 47.5 -47.5z" fill="DarkSeaGreen"/>
44+
<use x="217" y="217" width="20" height="18" href="#HomeIcon"/>
45+
<text x="202" y="232" class="home">Z</text>
46+
</g>
47+
48+
{/* Jog circles */}
49+
<g id="Jog100" fill="#c0c0c0" class="std">
50+
<g id="V_top_100" transform="translate(120 120)"><path class="std" d="M-60 -67.07 L-75.93,-83 A112.5,112.5 0 0,1 75,-83 L60,-67.07 A90,90 0 0,0 -60,-67.07 z"/></g>
51+
<g id="H_right_100" transform="translate(120 120)"><path class="std" d="M67.07,-60 L83,-75.93 A112.5,112.5 0 0,1 83,75.93 L67.07,60 A90,90 0 0,0 67.07,-60"/></g>
52+
<g id="V_bottom_100" transform="translate(120 120)"><path class="std" d="M-60,67.07 L-75.93,83 A112.5,112.5 0 0,0 75,83 L60,67.07 A90,90 0 0,1 -60,67.07 z"/></g>
53+
<g id="H_left_100" transform="translate(120 120)"><path class="std" d="M-67.07,-60 L-83,-75.93 A112.5,112.5 0 0,0 -83,75.93 L-67.07,60 A90,90 0 0,1 -67.07,-60 z"/></g>
54+
</g>
55+
56+
<g id="Jog10" fill="#d0d0d0" class="std">
57+
<g id="V_top_10" transform="translate(120 120)"><path class="std" d="M-44.06 -51.13 L-60,-67.07 A90,90 0 0,1 60,-67 L44.06,-51.13 A67.5,67.5 0 0,0 -44.06,-51.13 z"/></g>
58+
<g id="H_right_10" transform="translate(120 120)"><path class="std" d="M51.13 44.06 L67.07,60 A90,90 0 0,0 67.07,-60 L51.13,-44.06 A67.5,67.5 0 0,1 51.13,44.06 z"/></g>
59+
<g id="V_bottom_10" transform="translate(120 120)"><path class="std" d="M-44.06 51.13 L-60,67.07 A90,90 0 0,0 60,67 L44.06,51.13 A67.5,67.5 0 0,1 -44.06,51.13 z"/></g>
60+
<g id="H_left_10" transform="translate(120 120)"><path class="std" d="M-51.13 44.06 L-67.07,60 A90,90 0 0,1 -67.07,-60 L-51.13,-44.06 A67.5,67.5 0 0,0 -51.13,44.06 z"/></g>
61+
</g>
62+
63+
<g id="Jog1" fill="#e0e0e0" class="std">
64+
<g id="V_top_1" transform="translate(120 120)"><path class="std" d="M-28.09 -35.16 L-44.06,-51.13 A67.5,67.5 0 0,1 44.06,-51.13 L28.09,-35.16 A45,45 0 0,0 -28.09,-35.16 z"/></g>
65+
<g id="H_right_1" transform="translate(120 120)"><path class="std" d="M35.16 -28.09 L51.13,-44.06 A67.5,67.5 0 0,1 51.13,44.06 L35.16,28.09 A45,45 0 0,0 35.16,-28.09 z"/></g>
66+
<g id="V_bottom_1" transform="translate(120 120)"><path class="std" d="M-28.09 35.16 L-44.06,51.13 A67.5,67.5 0 0,0 44.06,51.13 L28.09,35.16 A45,45 0 0,1 -28.09,35.16 z"/></g>
67+
<g id="H_left_1" transform="translate(120 120)"><path class="std" d="M-35.16 -28.09 L-51.13,-44.06 A67.5,67.5 0 0,0 -51.13,44.06 L-35.16,28.09 A45,45 0 0,1 -35.16,-28.09 z"/></g>
68+
</g>
69+
70+
<g id="Jog0_1" fill="#f0f0f0" class="std">
71+
<g id="V_top_0_1" transform="translate(120 120)"><path class="std" d="M-28.09 -35.16 A45,45 0 0,1 29.09,-35.16 L0,-7.07 z"/></g>
72+
<g id="H_right_0_1" transform="translate(120 120)"><path class="std" d="M35.16 -28.09 A45,45 0 0,1 35.16,28.09 L7.07,0 z"/></g>
73+
<g id="V_bottom_0_1" transform="translate(120 120)"><path class="std" d="M-28.09 35.16 A45,45 0 0,0 29.09,35.16 L0,7.07 z"/></g>
74+
<g id="H_left_0_1" transform="translate(120 120)"><path class="std" d="M-35.16 -28.09 A45,45 0 0,0 -35.16,28.09 L-7.07,0 z"/></g>
75+
</g>
76+
77+
{/* Labels des cercles */}
78+
<g id="label_circle_0_1" style="opacity:0.2">
79+
<circle class="scl" cx="144" cy="96" r="9.5"/>
80+
<text class="scl" x="137" y="99" font-size="10">0.1</text>
81+
</g>
82+
<g id="label_circle_1" style="opacity:0.2">
83+
<circle class="scl" cx="159.5" cy="80.5" r="10.5"/>
84+
<text class="scl" x="155" y="85" font-size="14">1</text>
85+
</g>
86+
<g id="label_circle_10" style="opacity:0.2">
87+
<circle class="scl" cx="175" cy="65" r="12"/>
88+
<text class="scl" x="166" y="70" font-size="15">10</text>
89+
</g>
90+
<g id="label_circle_100" style="opacity:0.2">
91+
<circle class="scl" cx="195" cy="45" r="15"/>
92+
<text class="scl" x="182" y="50" font-size="15">100</text>
93+
</g>
94+
95+
{/* Decoration */}
96+
<g id="Decoration" pointer-events="none" fill-opacity=".6">
97+
<path class="std" d="M120,20 l17,17 h-10 v11 h-14 v-11 h-10 z" fill="SteelBlue"/>
98+
<path class="std" d="M120,220 l17,-17 h-10 v-11 h-14 v11 h-10 z" fill="SteelBlue"/>
99+
<path class="std" d="M20,120 l17,17 v-10 h11 v-14 h-11 v-10 z" fill="Khaki"/>
100+
<path class="std" d="M220,120 l-17,-17 v10 h-11 v14 h11 v10 z" fill="Khaki"/>
101+
<text class="jog" x={pos_x_v_axis_label_top} y="36">{label_v_axis_top}</text>
102+
<text class="jog" x={pos_x_v_axis_label_bottom} y="212">{label_v_axis_bottom}</text>
103+
<text class="jog" x="27" y="124">{label_h_axis_left}</text>
104+
<text class="jog" x="196" y="124">{label_h_axis_right}</text>
105+
</g>
106+
107+
{/* Centre XY */}
108+
<g id="posxy">
109+
<title>{moveToTitleXY}</title>
110+
<circle class="std" cx="120.2" cy="120.3" r="15"/>
111+
<circle class="cross" cx="116" cy="120.3" r="4"/>
112+
<line x1="116" y1="125.3" x2="116" y2="129" stroke="black" stroke-width="1"/>
113+
<line x1="116" y1="115.3" x2="116" y2="111.6" stroke="black" stroke-width="1"/>
114+
<line x1="121" y1="120.3" x2="124.7" y2="120.3" stroke="black" stroke-width="1"/>
115+
<line x1="111" y1="120.3" x2="107.3" y2="120.3" stroke="black" stroke-width="1"/>
116+
<text class="posscl" x="125" y="118">X</text>
117+
<text class="posscl" x="125" y="130">Y</text>
118+
</g>
119+
120+
{/* JogBar Z */}
121+
<g id="JogBar" transform="translate(250,0)">
122+
<g id="Z_top_100" fill="#d0d0d0" class="std">
123+
<path class="std" d="M5,0 h30 a5,5 0 0,1 5,5 v27 h-40 v-27 a5,5 0 0,1 5,-5 z"/>
124+
<g id="z100" style="opacity:0.2"><circle class="scl" cx="20" cy="16" r="14"/><text class="scl" x="8" y="22" font-size="14">100</text></g>
125+
</g>
126+
<g id="Z_top_10" fill="#d0d0d0" class="std">
127+
<rect class="std" x="0" y="32" width="40" height="30"/>
128+
<g id="z10" style="opacity:0.2"><circle class="scl" cx="20" cy="47" r="12"/><text class="scl" x="11" y="53" font-size="15">10</text></g>
129+
</g>
130+
<g id="Z_top_1" fill="#e0e0e0" class="std">
131+
<rect class="std" x="0" y="62" width="40" height="26"/>
132+
<g id="z1" style="opacity:0.2"><circle class="scl" cx="20" cy="75" r="10.5"/><text class="scl" x="16" y="80" font-size="14">1</text></g>
133+
</g>
134+
<g id="ZSpace" fill="#000000" style="pointer-events:none;">
135+
<rect class="std" x="0" y="112" width="40" height="16"/>
136+
</g>
137+
<g id="Z_top_0_1" fill="#f0f0f0" class="std">
138+
<rect class="std" x="0" y="88" width="40" height="24"/>
139+
<g id="z0_1" style="opacity:0.2"><circle class="scl" cx="20" cy="100" r="9.5"/><text class="scl" x="13.5" y="103.5" font-size="10">0.1</text></g>
140+
</g>
141+
<g id="Z_bottom_0_1" fill="#f0f0f0" class="std">
142+
<rect class="std" x="0" y="128" width="40" height="24"/>
143+
</g>
144+
<g id="Z_bottom_1" fill="#e0e0e0" class="std">
145+
<rect class="std" x="0" y="152" width="40" height="26"/>
146+
</g>
147+
<g id="Z_bottom_10" fill="#d0d0d0" class="std">
148+
<rect class="std" x="0" y="178" width="40" height="30"/>
149+
</g>
150+
<g id="Z_bottom_100" fill="#d0d0d0" class="std">
151+
<path class="std" d="M0,208 h40 v27 a5,5 0 0,1 -5,5 h-30 a5,5 0 0,1 -5,-5 z"/>
152+
</g>
153+
154+
<g id="+Z" fill-opacity=".6" pointer-events="none">
155+
<path class="std" d="M50,20 l17,17 h-10 v11 h-14 v-11 h-10 z" fill="DarkSeaGreen"/>
156+
<text class="jog" x={pos_x_z_axis_label_top} y="36">{label_z_axis_top}</text>
157+
</g>
158+
<g id="-Z" fill-opacity=".6" pointer-events="none">
159+
<path class="std" d="M50,220 l-17,-17 h10 v-11 h14 v11 h10 z" fill="DarkSeaGreen"/>
160+
<text class="jog" x={pos_x_z_axis_label_bottom} y="210">{label_z_axis_bottom}</text>
161+
</g>
162+
163+
<g id="posz">
164+
<title>{moveToTitleZ}</title>
165+
<rect class="movez" x="-1" y="110" width="42" height="20" rx="5"/>
166+
<circle class="cross" cx="13" cy="120.3" r="4"/>
167+
<line x1="13" y1="125.3" x2="13" y2="128.8" stroke="black" stroke-width="1"/>
168+
<line x1="13" y1="115.3" x2="13" y2="111.6" stroke="black" stroke-width="1"/>
169+
<line x1="4" y1="120.3" x2="8.7" y2="120.3" stroke="black" stroke-width="1"/>
170+
<line x1="18" y1="120.3" x2="21.7" y2="120.3" stroke="black" stroke-width="1"/>
171+
<text class="posscl" x="25" y="122">Z</text>
172+
</g>
173+
</g>
174+
</svg>

0 commit comments

Comments
 (0)