search

apenab / react-dymo

Collections of react utilities to handle the Dymo LabelWriter web service
26 stars 10 forks source link

Multiple labels in one job #34

Open sarkis1997 opened 1 year ago

sarkis1997 commented 1 year ago

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?

apenab commented 1 year ago

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

apenab commented 1 year ago

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.

sarkis1997 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 = `Address1Address2`; printLabel( encodeURIComponent(printer.modelName), encodeURIComponent(labelXml), encodeURIComponent(labelSetXml) ); 2. ) printLabel(printer.modelName, labelXml, labelSetXml); 3. ) printLabel( encodeURIComponent(printer.modelName), encodeURIComponent(labelXml), encodeURIComponent(labelSetXml) ); 4. ) let printParams = `${twinTurboRoll}`; 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 > — > Reply to this email directly, view it on GitHub , or unsubscribe . > You are receiving this because you authored the thread. > >
apenab commented 1 year ago

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.