lin9613/linuxcnc-control-panel
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>LinuxCNC Control Panel</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>10 <script src="components/navbar.js"></script>11</head>12<body class="bg-gray-900 text-gray-100 font-mono">13 <div class="min-h-screen flex flex-col">14 <!-- Header -->15 <header class="bg-gray-800 p-4 border-b border-gray-700">16 <div class="flex justify-between items-center">17 <h1 class="text-2xl font-bold text-blue-400">18 <span class="text-white">Linux</span>CNC19 </h1>20 <div class="flex space-x-4">21 <span class="bg-green-500 text-xs px-2 py-1 rounded">CONNECTED</span>22 <span class="text-gray-400">v2.8.4</span>23 </div>24 </div>25 </header>26 27 <!-- Main Content -->28 <div class="flex flex-1 overflow-hidden">29 <!-- Left Panel - Machine Controls -->30 <div class="w-1/4 bg-gray-800 p-4 border-r border-gray-700 flex flex-col">31 <!-- Machine Status -->32 <div class="mb-6">33 <h2 class="text-lg font-semibold mb-2 text-blue-300">Machine Status</h2>34 <div class="grid grid-cols-2 gap-2">35 <div class="bg-gray-700 p-2 rounded">36 <div class="text-xs text-gray-400">State</div>37 <div class="text-green-400 font-bold">ON</div>38 </div>39 <div class="bg-gray-700 p-2 rounded">40 <div class="text-xs text-gray-400">Mode</div>41 <div class="text-yellow-400 font-bold">AUTO</div>42 </div>43 <div class="bg-gray-700 p-2 rounded">44 <div class="text-xs text-gray-400">Feed</div>45 <div class="text-white">100%</div>46 </div>47 <div class="bg-gray-700 p-2 rounded">48 <div class="text-xs text-gray-400">Rapid</div>49 <div class="text-white">50%</div>50 </div>51 </div>52 </div>53 54 <!-- Jog Controls -->55 <div class="mb-6">56 <h2 class="text-lg font-semibold mb-2 text-blue-300">Jog Controls</h2>57 <div class="grid grid-cols-3 gap-2 mb-2">58 <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded">X+</button>59 <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded">Y+</button>60 <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded">Z+</button>61 <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded">X-</button>62 <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded">Y-</button>63 <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded">Z-</button>64 </div>65 <div class="flex items-center space-x-2">66 <span class="text-sm">Step:</span>67 <select class="bg-gray-700 text-white p-1 rounded text-sm">68 <option>0.001"</option>69 <option>0.010"</option>70 <option>0.100"</option>71 <option>1.000"</option>72 </select>73 </div>74 </div>75 76 <!-- Spindle Controls -->77 <div class="mb-6">78 <h2 class="text-lg font-semibold mb-2 text-blue-300">Spindle</h2>79 <div class="flex items-center space-x-4">80 <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">Start</button>81 <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded">Stop</button>82 </div>83 <div class="mt-2">84 <div class="flex justify-between text-xs">85 <span>0%</span>86 <span>100%</span>87 </div>88 <input type="range" min="0" max="100" value="75" class="w-full">89 <div class="text-center">7500 RPM</div>90 </div>91 </div>92 93 <!-- Emergency Stop -->94 <div class="mt-auto">95 <button class="w-full bg-red-700 hover:bg-red-800 py-3 rounded-lg font-bold text-white shadow-lg">96 EMERGENCY STOP97 </button>98 </div>99 </div>100 101 <!-- Center Panel - G-Code and Visualization -->102 <div class="flex-1 flex flex-col">103 <!-- 3D Visualization -->104 <div class="flex-1 bg-gray-900 border-b border-gray-700 relative">105 <div class="absolute inset-0 flex items-center justify-center">106 <div class="text-gray-600 text-center">107 <div class="text-4xl mb-2">🖥️</div>108 <div>3D Machine Visualization</div>109 </div>110 </div>111 </div>112 113 <!-- G-Code Editor -->114 <div class="h-1/3 bg-gray-800 p-4 overflow-auto">115 <h2 class="text-lg font-semibold mb-2 text-blue-300">G-Code Program</h2>116 <pre class="bg-gray-900 p-2 rounded text-sm font-mono overflow-auto h-full">117 <code class="text-gray-300">118N10 G90 G54 G17 G21 G40 G49 G80119N20 G28 G91 Z0120N30 G28 G91 X0 Y0121N40 T1 M6122N50 S7500 M3123N60 G90 G0 X10 Y10124N70 G43 Z5 H1125N80 G1 Z-2 F500126N90 X50127N100 Y50128N110 X10129N120 Y10130N130 G0 Z5131N140 M5132N150 G28 G91 Z0133N160 G28 G91 X0 Y0134N170 M30135 </code>136 </pre>137 </div>138 </div>139 140 <!-- Right Panel - Diagnostics and DRO -->141 <div class="w-1/4 bg-gray-800 p-4 border-l border-gray-700 flex flex-col">142 <!-- DRO -->143 <div class="mb-6">144 <h2 class="text-lg font-semibold mb-2 text-blue-300">Position</h2>145 <div class="space-y-2">146 <div class="bg-gray-700 p-2 rounded">147 <div class="flex justify-between">148 <span class="text-gray-400">X:</span>149 <span class="font-mono">10.000</span>150 </div>151 </div>152 <div class="bg-gray-700 p-2 rounded">153 <div class="flex justify-between">154 <span class="text-gray-400">Y:</span>155 <span class="font-mono">10.000</span>156 </div>157 </div>158 <div class="bg-gray-700 p-2 rounded">159 <div class="flex justify-between">160 <span class="text-gray-400">Z:</span>161 <span class="font-mono">5.000</span>162 </div>163 </div>164 </div>165 </div>166 167 <!-- Program Status -->168 <div class="mb-6">169 <h2 class="text-lg font-semibold mb-2 text-blue-300">Program Status</h2>170 <div class="bg-gray-700 p-3 rounded">171 <div class="flex justify-between mb-1">172 <span class="text-gray-400">Line:</span>173 <span class="font-mono">N80</span>174 </div>175 <div class="flex justify-between mb-1">176 <span class="text-gray-400">Progress:</span>177 <span class="font-mono">42%</span>178 </div>179 <div class="h-2 bg-gray-600 rounded-full mt-2">180 <div class="h-2 bg-blue-500 rounded-full" style="width: 42%"></div>181 </div>182 </div>183 </div>184 185 <!-- System Load -->186 <div class="mb-6">187 <h2 class="text-lg font-semibold mb-2 text-blue-300">System Load</h2>188 <div class="bg-gray-700 p-3 rounded">189 <canvas id="loadChart" height="120"></canvas>190 </div>191 </div>192 193 <!-- Console -->194 <div class="flex-1">195 <h2 class="text-lg font-semibold mb-2 text-blue-300">Console</h2>196 <div class="bg-gray-700 p-2 rounded h-full overflow-auto">197 <div class="text-green-400 text-xs">> Machine initialized</div>198 <div class="text-green-400 text-xs">> G54 coordinate system loaded</div>199 <div class="text-green-400 text-xs">> Tool 1 loaded</div>200 <div class="text-yellow-400 text-xs">> Spindle started at 7500 RPM</div>201 <div class="text-gray-400 text-xs">> Executing line N80</div>202 </div>203 </div>204 </div>205 </div>206 </div>207 208 <script>209 // Initialize system load chart210 const ctx = document.getElementById('loadChart').getContext('2d');211 const loadChart = new Chart(ctx, {212 type: 'line',213 data: {214 labels: Array(30).fill(''),215 datasets: [216 {217 label: 'CPU',218 data: [20, 25, 22, 30, 28, 35, 40, 38, 45, 42, 50, 48, 55, 52, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20, 18, 15, 12],219 borderColor: '#3B82F6',220 backgroundColor: 'rgba(59, 130, 246, 0.1)',221 tension: 0.4,222 fill: true223 },224 {225 label: 'Motion',226 data: [10, 15, 12, 20, 18, 25, 30, 28, 35, 32, 40, 38, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20, 18, 15, 12, 10, 8, 5, 2],227 borderColor: '#10B981',228 backgroundColor: 'rgba(16, 185, 129, 0.1)',229 tension: 0.4,230 fill: true231 }232 ]233 },234 options: {235 responsive: true,236 maintainAspectRatio: false,237 plugins: {238 legend: {239 display: false240 }241 },242 scales: {243 y: {244 min: 0,245 max: 100,246 grid: {247 color: 'rgba(255, 255, 255, 0.1)'248 },249 ticks: {250 color: 'rgba(255, 255, 255, 0.6)'251 }252 },253 x: {254 grid: {255 display: false256 },257 ticks: {258 display: false259 }260 }261 },262 elements: {263 point: {264 radius: 0265 }266 }267 }268 });269 </script>270</body>271</html>