MultiMote / niimblue

🖨 NIIMBOT custom web client/app. Design and print labels with NIIMBOT printers directly from your PC or mobile web browser!
https://niim.mmote.ru
MIT License
84 stars 16 forks source link

Allow seemless integration with other web/apps #55

Closed dotnetdreamer closed 1 week ago

dotnetdreamer commented 1 week ago

Here is my case:

  1. My custom app sets these in localstorage window.localStorage.setItem('last_label_props', JSON.stringify(props)); window.localStorage.setItem('csv_params', JSON.stringify(vars)); / newly added / window.localStorage.setItem('device_id', args.deviceId); window.localStorage.setItem('print_preview', args.printPreview.toString()); window.localStorage.setItem('redirect_uri', /index.html);
  2. My custom app navigates to Niimblue using window.location.href = '/app/assets/niimblue.html';
  3. Niimblue loads the data from localstorage and set the deviceId in connect({ device: device_id})
  4. Niimblue opens print preview immediately due to localStorage i.e print_preview set to true
  5. User presses print button
  6. Niimblue checks if there redirect_uri in localstorage after printing, if yes then it redirects back to the my custom app using window.location.href = '/index.html';
MultiMote commented 1 week ago

LocalStorage "automation" field full example:

{
  "autoConnect":true,
  "startPrint":"after_connect",
  "autoConnectDeviceId":"............"
}

LocalStorage "default_template" field example (can be set in save/load menu):

{"canvas":{"version":"5.4.0","objects":[{"type":"text","version":"5.4.0","originX":"center","originY":"center","left":172,"top":100,"width":100,"height":113,"fill":"black","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"fontFamily":"Material Icons","fontWeight":"normal","fontSize":100,"text":"юдЭ","underline":false,"overline":false,"linethrough":false,"textAlign":"center","fontStyle":"normal","lineHeight":1,"textBackgroundColor":"","charSpacing":0,"styles":[],"direction":"ltr","path":null,"pathStartOffset":0,"pathSide":"left","pathAlign":"baseline"}]},"label":{"printDirection":"top","size":{"width":344,"height":200}},"title":"","timestamp":1732214519}

Also "Make default" button added

image

dotnetdreamer commented 1 week ago

have integrated these features in capacitor plugin https://github.com/dotnetdreamer/capacitor-niimbot-printer