File size: 3,971 Bytes
62e38d1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | class PrinterControl extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.printer-card {
background: white;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
.printer-header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.printer-status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.status-indicator {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
.status-online { background: #10B981; }
.status-offline { background: #EF4444; }
.status-printing { background: #3B82F6; }
.printer-controls {
display: flex;
gap: 0.5rem;
}
.printer-view {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.camera-feed {
background: #F3F4F6;
border-radius: 0.5rem;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.printer-info {
display: grid;
gap: 0.75rem;
}
.info-row {
display: flex;
justify-content: space-between;
}
.progress-bar {
height: 0.5rem;
background: #E5E7EB;
border-radius: 0.25rem;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #3B82F6;
}
button {
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-weight: 500;
cursor: pointer;
}
.btn-primary {
background: #3B82F6;
color: white;
border: none;
}
.btn-secondary {
background: white;
color: #3B82F6;
border: 1px solid #3B82F6;
}
.btn-danger {
background: #EF4444;
color: white;
border: none;
}
</style>
<div class="printer-card">
<div class="printer-header">
<h3>Vixelab Aquilla 3D Printer</h3>
<div class="printer-status">
<div class="status-indicator status-online"></div>
<span>Online</span>
</div>
</div>
<div class="printer-view">
<div class="camera-feed">
<img src="http://static.photos/technology/640x360/3dprinter" alt="Printer Camera Feed">
</div>
<div class="printer-info">
<div class="info-row">
<span>Current Job:</span>
<span>Widget_Prototype.gcode</span>
</div>
<div class="info-row">
<span>Progress:</span>
<span>42%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 42%"></div>
</div>
<div class="info-row">
<span>Time Remaining:</span>
<span>2h 15m</span>
</div>
<div class="info-row">
<span>Nozzle Temp:</span>
<span>210°C</span>
</div>
<div class="info-row">
<span>Bed Temp:</span>
<span>60°C</span>
</div>
</div>
</div>
<div class="printer-controls">
<button class="btn-primary">Start Print</button>
<button class="btn-secondary">Pause</button>
<button class="btn-danger">Stop</button>
<button class="btn-secondary">Upload File</button>
</div>
</div>
`;
}
}
customElements.define('printer-control', PrinterControl); |