react-dymo icon indicating copy to clipboard operation
react-dymo copied to clipboard

Multiple labels in one job

Open sarkis1997 opened this issue 3 years ago • 6 comments

Hi, is there also any possibility to print multiple labels in one job. In the original documentation there is something like dymo.label.framework.LabelSetBuilder. How can I achieve this with the dymo-react-hooks?

sarkis1997 avatar Oct 13 '22 09:10 sarkis1997

https://github.com/apenab/react-dymo/discussions/33

apenab avatar Oct 22 '22 15:10 apenab

Hi @sarkis1997. After some research, I think that with the new printLabel utility function is enough. With this function you have the "labelSetXml" param, with this param you can achieve the required behavior .

For example:

Note in the following example the "Address" id.


import {printLabel} from "react-dymo-hooks";

const printerName = "Some Printer Name"

const labelXml = `<?xml version="1.0" encoding="utf-8"?>
  <DieCutLabel Version="8.0" Units="twips">
    <PaperOrientation>Landscape</PaperOrientation>
    <Id>Address</Id>
    <IsOutlined>false</IsOutlined>
    <PaperName>30336 1 in x 2-1/8 in</PaperName>
    <DrawCommands>
      <RoundRectangle X="0" Y="0" Width="1440" Height="3060" Rx="180" Ry="180" />
    </DrawCommands>
    <ObjectInfo>
      <TextObject>
        <Name>Address</Name>
        <ForeColor Alpha="255" Red="0" Green="0" Blue="0" />
        <BackColor Alpha="0" Red="255" Green="255" Blue="255" />
        <LinkedObjectName />
        <Rotation>Rotation0</Rotation>
        <IsMirrored>False</IsMirrored>
        <IsVariable>False</IsVariable>
        <GroupID>-1</GroupID>
        <IsOutlined>False</IsOutlined>
        <HorizontalAlignment>Center</HorizontalAlignment>
        <VerticalAlignment>Middle</VerticalAlignment>
        <TextFitMode>ShrinkToFit</TextFitMode>
        <UseFullFontHeight>True</UseFullFontHeight>
        <Verticalized>False</Verticalized>
        <StyledText>
          <Element>
            <Attributes>
              <Font Family="Arial" Size="12" Bold="False" Italic="False" Underline="False" Strikeout="False" />
              <ForeColor Alpha="255" Red="0" Green="0" Blue="0" HueScale="100" />
            </Attributes>
          </Element>
        </StyledText>
      </TextObject>
      <Bounds X="130" Y="300" Width="2846" Height="720" />
    </ObjectInfo>
  </DieCutLabel>`

const labelSetXml = `<LabelSet><LabelRecord><ObjectData Name="Address">Address1</ObjectData></LabelRecord><LabelRecord><ObjectData Name="Address">Address2</ObjectData></LabelRecord></LabelSet>`


// Inside some component or any react function
printLabel(printerName, labelXml, labelSetXml)

I couldn't test this example with a real dymo printer, because right now I don't have a printer. Some error or anything, I'm here.

apenab avatar Oct 23 '22 17:10 apenab

Hi,

Since I updated to version 2.0.1 I am getting this error:

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

This is caused by:

import { useDymoCheckService, useDymoFetchPrinters, useDymoOpenLabel, printLabel, } from "react-dymo-hooks”;

const statusDymoService = useDymoCheckService();
const { statusFetchPrinters, printers } = useDymoFetchPrinters();

It is called inside a functional component.

What is going wrong?

Op 22 okt. 2022, om 17:16 heeft Antonio Peña Batista @.***> het volgende geschreven:

#33 https://github.com/apenab/react-dymo/discussions/33 — Reply to this email directly, view it on GitHub https://github.com/apenab/react-dymo/issues/34#issuecomment-1287823270, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIC55BOOEEHAXYHQZ5J2BDLWEQAORANCNFSM6AAAAAAREDCBYA. You are receiving this because you authored the thread.

sarkis1997 avatar Oct 24 '22 17:10 sarkis1997

I just found this, maybe this can help to avoid other users application to break on update?

├── UNMET PEER DEPENDENCY @.*** └─┬ @.*** └── @.***

npm ERR! peer dep missing: react@^16.0.0, required by @.*** npm ERR! peer dep missing: react@~0.14.9 || ^15.0.0 || ^16.0.0, required by @.***

Op 24 okt. 2022, om 19:03 heeft Sarkis Moeradjan @.*** @.***>> het volgende geschreven:

Hi,

Since I updated to version 2.0.1 I am getting this error:

react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

This is caused by:

import { useDymoCheckService, useDymoFetchPrinters, useDymoOpenLabel, printLabel, } from "react-dymo-hooks”;

const statusDymoService = useDymoCheckService();
const { statusFetchPrinters, printers } = useDymoFetchPrinters();

It is called inside a functional component.

What is going wrong?

Op 22 okt. 2022, om 17:16 heeft Antonio Peña Batista @.*** @.***>> het volgende geschreven:

#33 https://github.com/apenab/react-dymo/discussions/33 — Reply to this email directly, view it on GitHub https://github.com/apenab/react-dymo/issues/34#issuecomment-1287823270, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIC55BOOEEHAXYHQZ5J2BDLWEQAORANCNFSM6AAAAAAREDCBYA. You are receiving this because you authored the thread.

sarkis1997 avatar Oct 24 '22 17:10 sarkis1997

In the meanwhile I downgraded react to test the module with a real Dymo printer, but it ain’t working.

) let printParams = <LabelWriterPrintParams><TwinTurboRoll>${twinTurboRoll}</TwinTurboRoll></LabelWriterPrintParams>;

const labelXml = `<?xml version="1.0" encoding="utf-8"?>
Landscape Address false 30336 1 in x 2-1/8 in Address Rotation0 False False -1 False Center Middle ShrinkToFit True False `;
const labelSetXml = `<LabelSet><LabelRecord><ObjectData Name="Address">Address1</ObjectData></LabelRecord><LabelRecord><ObjectData Name="Address">Address2</ObjectData></LabelRecord></LabelSet>`;


printLabel(
  encodeURIComponent(printer.modelName),
  encodeURIComponent(labelXml),
  encodeURIComponent(labelSetXml)
);
  1. ) printLabel(printer.modelName, labelXml, labelSetXml);

  2. ) printLabel( encodeURIComponent(printer.modelName), encodeURIComponent(labelXml), encodeURIComponent(labelSetXml) );

  3. )
    let printParams = <LabelWriterPrintParams><TwinTurboRoll>${twinTurboRoll}</TwinTurboRoll></LabelWriterPrintParams>;

const params = { data: printerName=${printer.modelName}&printParamsXml=${printParams}&labelXml=${labelXml}&labelSetXml=${labelSetXml}, };

await dymoRequestBuilder({
  method: "POST",
  wsAction: "printLabel",
  axiosOtherParams: params,
}).then((res) => {
  console.log(res);
  return res;
});

This are all scenarios I tried, none of them work with the labelSetXml. They are returning no response or :

createError.js:16 Uncaught (in promise) Error: Request failed with status code 500 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.onloadend (xhr.js:54:1)

Op 22 okt. 2022, om 17:16 heeft Antonio Peña Batista @.*** @.***>> het volgende geschreven:

#33 https://github.com/apenab/react-dymo/discussions/33 — Reply to this email directly, view it on GitHub https://github.com/apenab/react-dymo/issues/34#issuecomment-1287823270, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIC55BOOEEHAXYHQZ5J2BDLWEQAORANCNFSM6AAAAAAREDCBYA. You are receiving this because you authored the thread.

http://schema.org/ https://github.com/apenab/react-dymo/issues/34#issuecomment-1287823270 https://github.com/apenab/react-dymo/issues/34#issuecomment-1287823270 https://github.com/

sarkis1997 avatar Oct 24 '22 18:10 sarkis1997

Hi, Since I updated to version 2.0.1 I am getting this error: react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app This is caused by: import { useDymoCheckService, useDymoFetchPrinters, useDymoOpenLabel, printLabel, } from "react-dymo-hooks”; const statusDymoService = useDymoCheckService(); const { statusFetchPrinters, printers } = useDymoFetchPrinters(); It is called inside a functional component. What is going wrong? Op 22 okt. 2022, om 17:16 heeft Antonio Peña Batista @.***> het volgende geschreven: #33 <#33> — Reply to this email directly, view it on GitHub <#34 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIC55BOOEEHAXYHQZ5J2BDLWEQAORANCNFSM6AAAAAAREDCBYA. You are receiving this because you authored the thread.

Hi, the latest version of react-dymo-hooks is 2.0.2, I tested and all is working good, if you want share a code sandbox example.

apenab avatar Nov 01 '22 21:11 apenab