Comments (18)
@piyasil Thanks for your direction! It works!
@ksgy iOS iPad dev here, I managed to get react-native-view-shot
working with react-native-svg
. Sample code as below:
import Svg, { Line, SvgProps, Text as SvgText, TSpan } from 'react-native-svg';
import ViewShot, { captureRef } from "react-native-view-shot";
const pixelWidth = 576;
const App =() => {
// you can change printerId by inserting a text field
const [printerId, setPrinterId] = useState<string>('YOUR_PRINTER_IP_OR_MAC');
const foo = useRef<Component<SvgProps, any, any> | null>();
const trialSvg = () => {
return (
<Svg height="500" width={pixelWidth} fill='black'>
<SvgText y="20" dx="5 5">
<TSpan x="10">tspan line 1</TSpan>
<TSpan fontSize="12" >font size 12</TSpan>
<TSpan fontSize="14" >font size 14</TSpan>
<TSpan fontSize="16" >font size 16</TSpan>
</SvgText>
</Svg>
)
}
// official example code
async function print(address: string): Promise<void> {
// Specify your printer connection settings.
var settings = new StarConnectionSettings();
settings.interfaceType = InterfaceType.Lan;
settings.identifier = address;
var printer = new StarPrinter(settings);
try {
// Connect to the printer.
await printer.open();
// capture svg under the reference view
const bar = await captureRef((foo.current as any), {
format: "jpg",
quality: 0.8,
result: 'base64',
width: pixelWidth,
})
.then(
base64 => {
console.log("Image captured and saved as base64:", base64);
return base64
}
)
.catch(error => console.log(error));
// create printing data. (Please refer to 'Create Printing data')
var builder = new StarXpandCommand.StarXpandCommandBuilder();
builder.addDocument(new StarXpandCommand.DocumentBuilder()
.addPrinter(new StarXpandCommand.PrinterBuilder()
.actionPrintImage(new StarXpandCommand.Printer.ImageParameter(bar as string, pixelWidth))
.actionCut(StarXpandCommand.Printer.CutType.Partial)
)
)
// ...
var commands = await builder.getCommands();
// Print.
await printer.print(commands);
console.log(`Success`);
}
catch(error) {
// Error.
console.log('error')
console.log(error);
}
finally {
// Disconnect from the printer and dispose object.
await printer.close();
await printer.dispose();
}
}
return (
<ScrollView
contentInsetAdjustmentBehavior="automatic"
contentContainerStyle={{
alignItems: 'center',
}}>
<View>
<Button mode='contained' onPress={async () => { await print(printerId) }}>
{t('printBtn')}
</Button>
</View>
<ViewShot>
<View ref={ref => foo.current = ref}>
{trialSvg()}
</View>
</ViewShot>
</ScrollView>
)
}
Notes:
- pay special notices to React's ref
foo = useRef<...>()
& its capturing methodbar = await captureRef(...)
const pixelWidth = 576;
as 'TSP100III has a pixel width of 576 dots' (credit to: @gare-bear; source: #33)- I suspect feeding to an
<Image...
component may the error cause,<ViewShot> <View> ... </ViewShot> </View>
could be safer?
@gare-bear and there is 3rd supporting format: Base64 encoded contents
I generate the base64 on the fly - you can check out above sample code bar
const bar = await captureRef(...)
- you can uncomment console.log to see the result non-uri base64 stringnew StarXpandCommand.Printer.ImageParameter(bar as string, pixelWidth)
- put in the non-uri base64-formatted image
from react-native-star-io10.
@Doudou8
Since TSP100 is a Raster-only printer, it does not support the actionPrintText and cannot print text-based data.
Instead, it will be needed to build up your document as image data and add them to the print job with the actionPrintImage method.
Due to differences in device capabilities, not all PrinterBuilder methods are available on every device.
The supported/unsupported methods for each device are listed in the "Supported Model" column above each method.
from react-native-star-io10.
@bandit-ibayashi Is there any example in the documentation?
from react-native-star-io10.
With the help of component capture, it's very convenient to make custom templates and generate images for printing.
Check out this lib https://github.com/gre/react-native-view-shot
from react-native-star-io10.
@Samuel-Martineau If you mean sample to create a receipt image data, unfortunately there are no samples to provide.
If you are looking for a sample code to print an image, you may find line 43 of the following file helpful: Replace logo_01.png with the receipt data and delete lines 44 to 99 to try printing.
https://github.com/star-micronics/react-native-star-io10/blob/master/example/samples/printing/App.tsx
from react-native-star-io10.
@bandit-ibayashi I got StarIO10ArgumentError when replace logo_01.png with my receipt data. Could you describe the step more specifically. The error says Invalid source.
.actionPrintImage( new StarXpandCommand.Printer.ImageParameter( "SKIPLI\n---- Test Order ----\nEmily Miller\n4 items\nDelivery\nCourier: Postmates\n\n Order# : 44BuAE\nJan-12-2020 10:47 AM\n\n", 406, ), )
from react-native-star-io10.
Hi @nguyen-vo I'm sorry no one responded to you sooner but the ImageParameter method does not convert text to an image, so this result is expected. You need to provide an image file as a parameter.
Hope this helps!
from react-native-star-io10.
@gare-bear thank for your response, so is there a way we can generate an image file inside drawable folder on the fly? Do you have any recommendation?
from react-native-star-io10.
@nguyen-vo react-native-canvas seems like it could be a good choice.
disclaimer: I haven't used it myself.
When researching I didn't find a lot of options.
Most options I found were for simpler tasks, like cropping, filters, re-sizing, etc.
Let me know if you find any other good options!
from react-native-star-io10.
Thank you. I will let you know if this work
from react-native-star-io10.
@gare-bear I would vote for raster receipt printing support as well. It'd be great if we can do something similar to this https://github.com/auctifera-josed/starprnt/blob/master/README.md#print-raster-receipt
TSP143III is commonly-used printers among my clients and I'd rather support them than asking them to buy new printers. Although I can generate a receipt image from the server and send back to the app as a workaround, I'd prefer function like above example that can do raster receipt from within the app.
from react-native-star-io10.
Hi
Trying to make this work with react-native-view-shot
and it works fine on android, but not on iOS, throws an Invalid source
error:
15:21:46.888 instrument.js:111 StarIO10ArgumentError: Invalid source.
at _buildObject$ (StarIO10ErrorFactory.ts:40)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:294)
at Generator.next (runtime.js:119)
at tryCatch (runtime.js:63)
at invoke (runtime.js:155)
at runtime.js:190
at tryCallTwo (core.js:45)
at doResolve (core.js:200)
at new Promise (core.js:66)
If I generate the image as base64 image and feed it to an <Image...
component, it shows the captured image, so the file is there for sure and accessible.
Anyone had any luck on iOS printing the image that has been created with https://github.com/gre/react-native-view-shot?
from react-native-star-io10.
@bandit-ibayashi what image sources do we support with the Xpand SDK? The two I know of are:
- local asset from a file
- image from a secure url
what about generating/printing images on the fly, how can we print those?
from react-native-star-io10.
android its not working but works fine on ios any clue if i print it on android app crashes
from react-native-star-io10.
Hi @Frankiz123, can you specify the error you encounter in follow categories:
- How that crash happened?
- Sample code you're using
- Debug logging
- Your printer model details
These info are great for others to help in your code. I'm not coding in Android but I'll try to help!
from react-native-star-io10.
@lung2008123 check this
async function print(address: string): Promise {
// Specify your printer connection settings.
// trackMessagesHandler("Start Print Function.");
if (Platform.OS == "android" && 31 <= Platform.Version) {
if (bluetoothIsEnabled) {
var hasPermission = await _confirmBluetoothPermission();
if (!hasPermission) {
Alert.alert(
`PERMISSION ERROR: You have to allow Nearby devices to use the Bluetooth printer`
);
return;
}
}
}
var settings = new StarConnectionSettings();
settings.interfaceType = InterfaceType.Bluetooth;
settings.identifier = address;
var printer = new StarPrinter(settings);
trackMessagesHandler(
"Printer Start Response. " + JSON.stringify(printer) || "N/A"
);
try {
// Connect to the printer.
let tempResponse = await printer.open();
trackMessagesHandler(
"Printer Open Response. " + JSON.stringify(tempResponse) || "N/A"
);
// capture svg under the reference view
const bar = await captureRef(foo.current as any, {
format: "jpg",
quality: 0.8,
result: "base64",
width: pixelWidth,
})
.then((base64) => {
console.log("Image captured and saved as base64:", base64);
trackMessagesHandler(
"Image captured and saved as base64: " + base64 || "N/A"
);
return base64;
})
.catch((error) => {
console.log(error);
trackMessagesHandler("Error base46 : " + error || "N/A");
});
// create printing data. (Please refer to 'Create Printing data')
var builder = new StarXpandCommand.StarXpandCommandBuilder();
trackMessagesHandler("Builder Message : " + builder || "N/A");
builder.addDocument(
new StarXpandCommand.DocumentBuilder().addPrinter(
new StarXpandCommand.PrinterBuilder()
.actionPrintImage(
new StarXpandCommand.Printer.ImageParameter(
bar as string,
pixelWidth
)
)
.actionCut(StarXpandCommand.Printer.CutType.Partial)
)
);
trackMessagesHandler("2. Builder Message : " + builder || "N/A");
// ...
var commands = await builder.getCommands();
trackMessagesHandler("Commands Message : " + commands || "N/A");
// Print.
let printout = await printer.print(commands);
trackMessagesHandler("PrintOut Message Success : " + printout || "N/A");
console.log(`Success`);
} catch (error) {
// Error.
trackMessagesHandler("PrintOut Error Message Error : " + error || "N/A");
console.log(error);
} finally {
// Disconnect from the printer and dispose object.
await printer.close();
await printer.dispose();
}
}
const trackMessagesHandler = (message: string) => {
setTrackingMessages(message);
let message2 = messagesTrackingArray;
message2.push(message);
setMessagesTrackingArray(message2);
};
from react-native-star-io10.
Hi @Frankiz123, can you specify the error you encounter in follow categories:
- How that crash happened?
- Sample code you're using
- Debug logging
- Your printer model details
These info are great for others to help in your code. I'm not coding in Android but I'll try to help!
@lung2008123 this is the printer model Star Micronics TSP143IIIBi.
from react-native-star-io10.
We have created a sample code to generate and print raster receipts on a React Native app on iOS/Android platforms.
https://github.com/star-micronics/react-native-star-io10/blob/master/example/samples/printing_samples/Sample15_GraphicReceipt.tsx
Thank you for your patience.
from react-native-star-io10.
Related Issues (20)
- The sdk fails to discover printers over usb HOT 2
- Could not resolve all artifacts for configuration ':react-native-star-io10:classpath'. HOT 3
- No matching configuration of project :react-native-star-io10 was found. HOT 1
- Why was the min android version changed from 6 to 9? HOT 3
- How to change the encoding if Chinese characters cannot be displayed. HOT 1
- Task :react-native-star-io10:bundleReleaseLocalLintAar FAILED HOT 2
- Error: StarIO10UnsupportedModelError: Not supported model TSP650II/TSP654II [REQUEST] HOT 2
- StarSpoolJobSettings not working on TSP650ii HOT 3
- Two Colour Printing with SP700 HOT 2
- what does this library accept as image or base64 ? HOT 2
- Apple's App Stores requires new privacy permissions from the library in order to be submitted to App Store HOT 4
- Could not find :stario10:. HOT 3
- Error 20001: StarIO10IllegalDeviceStateError HOT 2
- [Windows]: Unable to build on windows HOT 4
- Execution failed for task ':app:checkDebugAarMetadata' HOT 2
- Cash drawer is opening constantly HOT 3
- Issue with formatting sp700 printout, stardot HOT 2
- Example app for iOS cannot be built with Xcode14.3 HOT 1
- [UWP] Example app for Windows x86 architecture cannot be built HOT 1
- 'React/RCTBridgeModule.h' file not found HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-star-io10.