[Styling Module, JS Module, JS+Editor Module] Bambulab Printer Card

[lucuss]

Bambulab Printer Card

Version: 1.0
Creator: Luke

Important

Supported cards:

• Button

That module creates a printer card for Bambulab printers using a bubble-card button, this is a port for bubble-card and full credit for the actual design goes to BangerTECH
Configure this module via the editor or in YAML, for example:

bambulab_printer_card: 
    bambulab_printer: YOUR_VALUE
    bambulab_ams: YOUR_VALUE
    bambulab_ext_spool: YOUR_VALUE
    chamber_light: YOUR_VALUE
    cover_image: YOUR_VALUE
    printer_image: YOUR_VALUE

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

bambulab_printer_card:
    name: "Bambulab Printer Card"
    version: "1.0"
    creator: "Luke"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button

    description: |
        That card creates a printer card for Bambulab printers, this is a port for bubble-card and full credit for the actual design goes to <a href="https://www.reddit.com/r/homeassistant/comments/1pvjzxd/new_bambulab_printer_card/">BangerTECH</a>
        <br><br>
        <code-block><pre>
        bambulab_printer_card: 
            bambulab_printer: YOUR_VALUE
        </pre></code-block>

    code: |
            ${(() => {
              const config = this.config.bambulab_printer_card || {};
              const card = this.shadowRoot;
              const hass = this._hass;
              if (!hass) return "";
        
              // Internal State
              this._bambu_show_camera = this._bambu_show_camera !== undefined ? this._bambu_show_camera : false;
        
              const ENTITY_KEYS = [
                'aux_fan_speed', 'bed_temp', 'chamber_fan_speed', 'chamber_light', 'chamber_temp',
                'cooling_fan_speed', 'cover_image', 'current_layer', 'door_open', 'humidity',
                'nozzle_temp', 'power', 'print_progress', 'print_status', 'remaining_time',
                'speed_profile', 'stage', 'target_bed_temp', 'target_bed_temperature',
                'target_nozzle_temp', 'target_nozzle_temperature', 'total_layers', 'camera',
                'titelbild'
              ];
        
              const getDeviceEntities = (deviceId) => {
                if (!deviceId) return {};
                const result = {};
                for (const eid in hass.entities) {
                  const info = hass.entities[eid];
                  if (info.device_id === deviceId) {
                    const tk = info.translation_key;
                    if (tk && ENTITY_KEYS.includes(tk)) {
                      if (tk === 'camera' && !eid.startsWith('camera.')) { /* ignore non-camera entities with camera translation key */ }
                      else { result[tk] = { entity_id: eid, ...info }; }
                    }
                    if (eid.startsWith('camera.')) result['camera'] = { entity_id: eid };
                    if (eid.startsWith('button.') && eid.includes('_resume_')) result['resume_print'] = { entity_id: eid };
                    if (eid.startsWith('button.') && eid.includes('_pause_')) result['pause_print'] = { entity_id: eid };
                    if (eid.startsWith('button.') && eid.includes('_stop_')) result['stop_print'] = { entity_id: eid };
                    if (eid.includes('print_progress')) result['print_progress'] = { entity_id: eid };
                    if (eid.includes('print_status')) result['print_status'] = { entity_id: eid };
                    if (eid.includes('nozzle_temperature')) result['nozzle_temp'] = { entity_id: eid };
                    if (eid.includes('bed_temperature')) result['bed_temp'] = { entity_id: eid };
                    if (eid.startsWith('image.') && (eid.includes('titelbild') || eid.includes('cover_image'))) result['cover_image'] = { entity_id: eid };
                    if (eid.includes('chamber_light')) result['chamber_light'] = { entity_id: eid };
                  }
                }
                return result;
              };
        
              const printerEntities = getDeviceEntities(config.bambulab_printer);
        
              const getVal = (key) => {
                const eid = printerEntities[key]?.entity_id;
                if (!eid) return null;
                return hass.states[eid]?.state;
              };
        
              const getNum = (key) => parseFloat(getVal(key)) || 0;
        
              // Data extraction
              const progress = getNum('print_progress');
              const stateStr = getVal('print_status') || getVal('stage') || 'unavailable';
              const statusLower = stateStr.toLowerCase();
              const isPrinting = ['printing', 'prepare', 'running', 'druckt', 'vorbereiten'].includes(statusLower);
              const isPaused = ['paused', 'pause', 'pausiert'].includes(statusLower);
              const isIdle = !isPrinting && !isPaused;
        
              const nozzleTemp = Math.round(getNum('nozzle_temp'));
              const targetNozzleTemp = Math.round(getNum('target_nozzle_temp') || getNum('target_nozzle_temperature'));
              const bedTemp = Math.round(getNum('bed_temp'));
              const targetBedTemp = Math.round(getNum('target_bed_temp') || getNum('target_bed_temperature'));
              const chamberTemp = Math.round(getNum('chamber_temp'));
              
              const currentLayer = parseInt(getVal('current_layer')) || 0;
              const totalLayers = parseInt(getVal('total_layers')) || 0;
        
              const remTimeMin = parseFloat(getVal('remaining_time')) || 0;
              let printTimeLeft = '--';
              if (remTimeMin > 0 && (isPrinting || isPaused)) {
                const h = Math.floor(remTimeMin / 60);
                const m = Math.round(remTimeMin % 60);
                printTimeLeft = h > 0 ? `${h}h ${m}m` : `${m}m`;
              }
        
              const lightId = config.chamber_light || printerEntities['chamber_light']?.entity_id;
              const isLightOn = lightId ? hass.states[lightId]?.state === 'on' : false;
        
              const cameraEntityId = config.camera_entity || printerEntities['camera']?.entity_id;
              const cameraState = cameraEntityId ? hass.states[cameraEntityId] : null;
        
              // Cover Image
              let coverImgUrl = null;
              const coverId = config.cover_image_entity || printerEntities['cover_image']?.entity_id;
              if (coverId && (config.show_cover_image !== false)) {
                const stateObj = hass.states[coverId];
                if (stateObj && stateObj.state !== 'unavailable' && stateObj.state !== 'unknown') {
                  coverImgUrl = stateObj.attributes?.entity_picture;
                  if (coverImgUrl && !coverImgUrl.startsWith('http') && !coverImgUrl.startsWith('/')) coverImgUrl = '/' + coverImgUrl;
                }
              }
        
              // AMS & External Spool
              const trays = [];
              if (config.bambulab_ams) {
                for (const eid in hass.entities) {
                  const info = hass.entities[eid];
                  if (info.device_id === config.bambulab_ams && (info.translation_key?.startsWith('tray_') || eid.includes('_tray_'))) {
                    const s = hass.states[eid];
                    trays.push({ eid, tk: info.translation_key || eid, color: s?.attributes?.color, active: s?.attributes?.active, type: s?.attributes?.type, empty: !s?.state || s.state.toLowerCase() === 'empty' });
                  }
                }
                trays.sort((a,b) => (a.tk.match(/\d+/)?.[0] || 0) - (b.tk.match(/\d+/)?.[0] || 0));
              }
              
              // External Spool
              let extSpool = null;
              if (config.bambulab_ext_spool) {
                for (const eid in hass.entities) {
                  const info = hass.entities[eid];
                  if (info.device_id === config.bambulab_ext_spool) {
                     const s = hass.states[eid];
                     const isEmpty = !s?.state || s.state.toLowerCase() === 'empty' || s.state === 'unavailable';
                     if (!isEmpty) {
                       extSpool = { eid, color: s?.attributes?.color, active: s?.attributes?.active, type: s?.attributes?.type };
                       break;
                     }
                  }
                }
              }
        
              // DOM Initialization
              let root = card.querySelector('.bambu-root');
              if (!root) {
                root = document.createElement('div');
                root.className = 'bambu-root';
                const bubble = card.querySelector('.bubble-container');
                if (bubble) {
                  Array.from(bubble.children).forEach(c => c.style.display = 'none');
                  bubble.appendChild(root);
                  bubble.style.overflow = 'visible';
                  bubble.style.height = 'auto';
                }
                
                root.innerHTML = `
                  <div class="bambu-card">
                    <div class="noise"></div>
                    <div class="header">
                      <div class="header-left">
                        <div class="icon-box"><ha-icon icon="${config.icon || 'mdi:printer-3d-nozzle'}"></ha-icon></div>
                        <div>
                          <div class="title">${config.name || 'Bambu Printer'}</div>
                          <div class="status-row">
                            <div class="dot"></div>
                            <span class="status"></span>
                          </div>
                        </div>
                      </div>
                      <div class="header-right">
                        <button class="h-btn btn-light"><ha-icon icon="mdi:lightbulb-outline"></ha-icon></button>
                        <button class="h-btn btn-cam"><ha-icon icon="mdi:camera-outline"></ha-icon></button>
                      </div>
                    </div>
        
                    <div class="trays-row"></div>
        
                    <div class="visual-box">
                      <div class="v-inner">
                        <div class="img-wrap">
                          <img class="p-img" src="${config.printer_image || 'https://raw.githubusercontent.com/greghesp/ha-bambulab-cards/main/images/p1s.png'}" />
                          <div class="cover-overlay" style="display:none">
                            <div class="c-wrap"><img class="c-img" onerror="this.closest('.cover-overlay').style.display='none'" /><div class="c-prog"></div></div>
                          </div>
                        </div>
                        <div class="cam-wrap" style="display:none"></div>
                      </div>
                    </div>
        
                    <div class="prog-box">
                      <div class="prog-bar"><div class="fill"></div><div class="perc">0%</div></div>
                    </div>
        
                    <div class="stats-row">
                      <div class="s-pill nozzle"><ha-icon icon="mdi:thermometer"></ha-icon> <span class="v">--</span><span class="t">/--</span></div>
                      <div class="s-pill bed"><ha-icon icon="mdi:radiator"></ha-icon> <span class="v">--</span><span class="t">/--</span></div>
                      <div class="s-pill layer"><ha-icon icon="mdi:layers"></ha-icon> <span class="v">--</span></div>
                    </div>
        
                    <div class="ctrls">
                       <button class="c-btn btn-stop"><ha-icon icon="mdi:stop"></ha-icon></button>
                       <button class="c-btn btn-pause-resume"><ha-icon icon="mdi:pause"></ha-icon> <span>Pause</span></button>
                    </div>
        
                    <div class="footer-row">
                       <div class="time-box"><ha-icon icon="mdi:clock-outline"></ha-icon> <span>--</span></div>
                    </div>
                  </div>
                `;
        
                // Handlers
                root.querySelector('.btn-light').onclick = (e) => { e.stopPropagation(); if(lightId) hass.callService('light', 'toggle', {entity_id: lightId}); };
                root.querySelector('.btn-cam').onclick = (e) => { e.stopPropagation(); this._bambu_show_camera = !this._bambu_show_camera; };
                root.querySelector('.btn-pause-resume').onclick = (e) => { 
                  e.stopPropagation(); 
                  const action = isPaused ? 'resume_print' : 'pause_print';
                  const btnId = printerEntities[action]?.entity_id;
                  if (btnId) {
                    hass.callService('button', 'press', { entity_id: btnId });
                  } else {
                    // Fallback for older integrations or if buttons aren't found
                    const service = isPaused ? 'resume_print' : 'pause_print';
                    hass.callService('bambu_lab', service, { entity_id: printerEntities['print_status']?.entity_id });
                  }
                };
                root.querySelector('.btn-stop').onclick = (e) => { 
                  e.stopPropagation();
                  const btnId = printerEntities['stop_print']?.entity_id;
                  if (btnId) {
                    hass.callService('button', 'press', { entity_id: btnId });
                  } else {
                    hass.callService('bambu_lab', 'stop_print', { entity_id: printerEntities['print_status']?.entity_id });
                  }
                };
              }
        
              // Update Engine
              const set = (sel, attr, val) => {
                const el = root.querySelector(sel);
                if(!el) return;
                if(attr === 'text') { if(el.textContent !== String(val)) el.textContent = val; }
                else if(attr === 'style') { Object.entries(val).forEach(([k,v]) => { if(el.style[k] !== v) el.style[k] = v; }); }
                else if(attr === 'class') { Object.entries(val).forEach(([k,v]) => el.classList.toggle(k, !!v)); }
                else if(attr === 'src') { if(el.src !== val) el.src = val; }
                else if(attr === 'icon') { if(el.getAttribute('icon') !== val) el.setAttribute('icon', val); }
              };
        
              set('.status', 'text', stateStr);
              set('.dot', 'style', { backgroundColor: isPrinting ? '#22c55e' : isPaused ? '#fbbf24' : 'rgba(255,255,255,0.2)' });
              set('.dot', 'class', { pulse: isPrinting });
              set('.status', 'style', { color: isPrinting ? '#4ade80' : isPaused ? '#fbbf24' : 'rgba(255,255,255,0.6)' });
              
              set('.btn-light', 'class', { active: isLightOn });
              set('.btn-light ha-icon', 'icon', isLightOn ? 'mdi:lightbulb' : 'mdi:lightbulb-outline');
              set('.btn-cam', 'class', { active: this._bambu_show_camera });
              set('.btn-cam ha-icon', 'icon', this._bambu_show_camera ? 'mdi:camera' : 'mdi:camera-outline');
        
              // Visuals Toggle
              set('.cam-wrap', 'style', { display: this._bambu_show_camera ? 'flex' : 'none' });
              set('.img-wrap', 'style', { display: !this._bambu_show_camera ? 'flex' : 'none' });
              set('.p-img', 'class', { dimmed: !isLightOn });
        
              if (this._bambu_show_camera && cameraState && cameraEntityId.startsWith('camera.')) {
                const cw = root.querySelector('.cam-wrap');
                let cs = cw.querySelector('ha-camera-stream');
                if (!cs) {
                  cw.innerHTML = '';
                  cs = document.createElement('ha-camera-stream');
                  cw.appendChild(cs);
                }
                if (cs.hass !== hass) cs.hass = hass;
                if (cs.stateObj !== cameraState) cs.stateObj = cameraState;
              }
        
              // Cover Image
              set('.cover-overlay', 'style', { display: (coverImgUrl && isPrinting) ? 'block' : 'none' });
              if (coverImgUrl && isPrinting) {
                set('.c-img', 'src', coverImgUrl);
                set('.c-prog', 'style', { height: `${progress}%` });
              }
        
              // Progress
              set('.fill', 'style', { width: `${progress}%` });
              set('.perc', 'text', `${Math.round(progress)}%`);
              set('.prog-box', 'style', { display: isIdle ? 'none' : 'block' });
        
              // Stats
              set('.s-pill.nozzle .v', 'text', `${nozzleTemp}°`);
              set('.s-pill.nozzle .t', 'text', `/${targetNozzleTemp}°`);
              set('.s-pill.bed .v', 'text', `${bedTemp}°`);
              set('.s-pill.bed .t', 'text', `/${targetBedTemp}°`);
              set('.s-pill.layer .v', 'text', `${currentLayer} / ${totalLayers}`);
              set('.time-box span', 'text', `${printTimeLeft} remaining`);
              set('.footer-row', 'style', { display: isIdle ? 'none' : 'block' });
        
              // Controls
              set('.ctrls', 'style', { display: isIdle ? 'none' : 'grid' });
              set('.btn-pause-resume span', 'text', isPaused ? 'Resume' : 'Pause');
              set('.btn-pause-resume ha-icon', 'icon', isPaused ? 'mdi:play' : 'mdi:pause');
        
              // AMS & Ext Spool Logic
              const traysHtml = trays.slice(0, 4).map(t => `<div class="tray ${t.active ? 'active' : ''} ${t.empty ? 'empty' : ''}">
                <div class="spool"><div class="fill" style="background:${t.color || '#444'}"></div></div>
                <div class="name">${t.empty ? 'Empty' : t.type || 'Fila'}</div>
              </div>`).join('') + (extSpool ? `<div class="tray ext active">
                <div class="spool"><div class="fill" style="background:${extSpool.color || '#444'}"></div></div>
                <div class="name">${extSpool.type || 'Ext'}</div>
              </div>` : '');
              const trow = root.querySelector('.trays-row');
              if (trow.innerHTML !== traysHtml) trow.innerHTML = traysHtml;
        
              return "";
            })()}
        
            .bambu-root { width: 100%; font-family: Inter, system-ui, sans-serif; }
            .bambu-card {
              position: relative; background: rgba(26, 28, 32, 0.88); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
              border-radius: 28px; padding: 22px; color: white; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; box-shadow: 0 15px 45px rgba(0,0,0,0.7);
            }
            .noise { position: absolute; inset: 0; opacity: 0.04; pointer-events: none; background-image: url('https://grainy-gradients.vercel.app/noise.svg'); mix-blend-mode: overlay; }
            .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; position: relative; z-index: 5; }
            .header-left { display: flex; align-items: center; gap: 14px; }
            .icon-box { width: 44px; height: 44px; border-radius: 14px; background: rgba(0, 174, 66, 0.12); display: flex; align-items: center; justify-content: center; color: #00AE42; border: 1px solid rgba(0, 174, 66, 0.25); }
            .title { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
            .status-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
            .dot { width: 8px; height: 8px; border-radius: 50%; }
            .status { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
            .header-right { display: flex; gap: 12px; }
            .h-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
            .h-btn.active { color: #fed330; background: rgba(255,255,255,0.12); border-color: rgba(254, 211, 48, 0.4); box-shadow: 0 0 15px rgba(254, 211, 48, 0.2); }
        
            .trays-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 12px; margin-bottom: 24px; position: relative; z-index: 5; }
            .tray { background: rgba(0,0,0,0.4); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.55; border: 1px solid rgba(255,255,255,0.04); transition: 0.4s; }
            .tray.active { opacity: 1; background: rgba(0, 174, 66, 0.08); border-color: rgba(0, 174, 66, 0.3); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
            .tray.ext { border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.05); }
            .spool { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #111; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); }
            .spool .fill { width: 72%; height: 72%; border-radius: 50%; }
            .name { font-size: 0.65rem; font-weight: 900; color: rgba(255,255,255,0.85); text-align: center; }
        
            .visual-box { position: relative; height: 260px; margin-bottom: 20px; z-index: 2; }
            .v-inner { height: 100%; position: relative; overflow: hidden; border-radius: 20px; background: rgba(0,0,0,0.2); }
            .img-wrap, .cam-wrap { height: 100%; width: 100%; align-items: center; justify-content: center; }
            .p-img { max-height: 90%; filter: drop-shadow(0 0 30px rgba(0,0,0,0.5)); transition: 0.5s ease; }
            .p-img.dimmed { filter: brightness(0.25) grayscale(0.6) blur(1px); }
            .cam-wrap ha-camera-stream { width: 100%; height: 100%; }
        
            .cover-overlay { position: absolute; bottom: 28%; left: 50%; transform: translateX(-50%); width: 36%; pointer-events: none; }
            .c-wrap { position: relative; width: 100%; padding-bottom: 100%; }
            .c-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.9)); }
            .c-prog { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(74, 222, 128, 0.45), transparent); mix-blend-mode: hard-light; transition: 0.6s; border-radius: 6px; }
        
            .prog-box { margin-bottom: 24px; }
            .prog-bar { position: relative; height: 18px; background: rgba(0,0,0,0.5); border-radius: 20px; border: 1px solid rgba(255,255,255,0.06); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }
            .prog-bar .fill { height: 100%; background: linear-gradient(90deg, #009432, #00AE42, #4ade80); transition: width 1s cubic-bezier(0.1, 0, 0.1, 1); box-shadow: 0 0 15px rgba(0, 174, 66, 0.4); }
            .perc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.05em; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
        
            .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
            .s-pill { background: rgba(255,255,255,0.07); padding: 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.95rem; font-weight: 800; border: 1px solid rgba(255,255,255,0.03); }
            .s-pill ha-icon { --mdc-icon-size: 18px; color: rgba(255,255,255,0.5); }
            .s-pill .t { font-size: 0.75rem; opacity: 0.4; font-weight: 500; margin-left: -2px; }
        
            .ctrls { display: grid; grid-template-columns: 60px 1fr; gap: 12px; margin-bottom: 20px; }
            .c-btn { height: 54px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; transition: 0.3s; }
            .c-btn:hover { background: rgba(255,255,255,0.12); }
            .btn-pause-resume { background: rgba(0, 174, 66, 0.15); color: #4ade80; border-color: rgba(0, 174, 66, 0.3); }
        
            .footer-row { text-align: center; color: rgba(255,255,255,0.5); font-size: 0.85rem; font-weight: 600; }
            .time-box { display: flex; align-items: center; justify-content: center; gap: 6px; }
            .time-box ha-icon { --mdc-icon-size: 16px; }
        
            @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
            .pulse { animation: pulse 2.5s infinite ease-in-out; }

    editor:
      - name: bambulab_printer
        label: Bambulab Printer Device
        selector:
          device:
            filter:
              integration: bambu_lab
      - name: bambulab_ams
        label: Bambulab AMS Device
        selector:
          device:
            filter:
              integration: bambu_lab
      - name: bambulab_ext_spool
        label: Bambulab Ext. Spool Device
        selector:
          device:
            filter:
              integration: bambu_lab
      - name: chamber_light
        label: Chamber Light
        selector:
          entity:
            filter:
              domain: light
      - name: cover_image
        label: Cover Image Entity
        selector:
          entity:
            filter:
              domain: image
      - name: show_cover_image
        label: Show Cover Image Overlay
        default: true
        selector:
          boolean: {}
      - name: printer_image
        label: Image URL of the printer
        selector:
          text: {}
      

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️