Flying網路列印

# PinToo之Flying網路列印

# 1. 功能

範例採用HTTP、MQTT、WebSocket 通訊協議，連線列印伺服器進行列印操作。該範例需配合愛招飛旗下的Flying(飛印，區域網資料包表列印工具)使用。

該程式中包含了TARS的連線。需訪問資料庫。

通過範例學習，可以掌握HTTP、MQTT的基本通訊原理，並通過該協議進行列印操作的功能。

使用智能手機上的PinToo應用程式，通過HTTP、MQTT協議控制連線到伺服器的印表機進行列印操作。使用前需要配置Flying、TARS、MQTT中介軟體等，並設定帳套設定。

其中需要在demo資料庫中加入一張表，名稱為Basic_Unit。其表結構如下圖所示。也可執行如下指令碼匯入數值。在示例資料庫中已提供表結構。

--建立表Basic_Unit
CREATE TABLE [dbo].[Basic_Unit](
	[FInterID] [int] NOT NULL,
	[FUnitCode] [nvarchar](50) NULL,
	[FUnitName] [nvarchar](100) NULL,
	[FCoefficient] [decimal](18, 10) NULL,
	[FNote] [varchar](255) NULL,
 CONSTRAINT [PK_Basic_MeasureUnit] PRIMARY KEY CLUSTERED 
(
	[FInterID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

--插入示例數據
INSERT INTO [dbo].[Basic_Unit]
           ([FInterID],[FUnitCode],[FUnitName],[FCoefficient],[FNote])
     VALUES(2,'M','米',1,NULL)
INSERT INTO [dbo].[Basic_Unit]
           ([FInterID],[FUnitCode],[FUnitName],[FCoefficient],[FNote])
     VALUES(3,'KG','千克',1,NULL)
INSERT INTO [dbo].[Basic_Unit]
           ([FInterID],[FUnitCode],[FUnitName],[FCoefficient],[FNote])
     VALUES(4,'G','克',0.001,NULL)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 2. 設計明細

開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]，選擇模板檔案來打開對應模板。

①：TfxSvg元件，控制元件名稱為fxSvg1。

②：TfxRFDataSet元件，控制元件名稱為fxRFDataSet。

③：TfxFlying元件，控制元件名稱為fxFlying1。

④：TfxListBox元件，控制元件名稱為fxListBox1。

⑤：TfxSuperButton元件，控制元件名稱為fxSuperButtonPrint。

⑥：TfxSuperButton元件，控制元件名稱為fxSuperButtonPreview。

⑦：TfxSvg元件，控制元件名稱為fxSvg2。

⑧：TfxSvg元件，控制元件名稱為fxSvg3。

⑨：TfxSvg元件，控制元件名稱為fxSvg7。

⑩：TfxSvg元件，控制元件名稱為fxSvg4。

(11)：TfxSvg元件，控制元件名稱為fxSvg5。

(12)：TfxSvg元件，控制元件名稱為fxSvg6。

(13)：TfxEdit元件，控制元件名稱為fxEditAddress。

(14)：TfxEdit元件，控制元件名稱為fxEditPort。

(15)：TfxComboBox元件，控制元件名稱為fxComboBoxPrintType。

(16)：TfxComboBox元件，控制元件名稱為fxComboBoxReportType。

(17)：TfxEdit元件，控制元件名稱為fxEditPrintCopies。

(18)：TfxSwitch元件，控制元件名稱為fxSwitchEnablePreview。

fxRunFrame屬性設定
- Height：設定頁面高度=800。
- Width：設定頁面寬度=400。

①fxSvg1屬性設定

Height：設定控制元件高度=30。
Width：設定控制元件寬度=30。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M28.9903888702393,25.3371467590332 L22.9007530212402,19.2453384399414 C22.6702079772949,19.0218505859375 22.4004173278809,18.842809677124 22.1049327850342,18.717191696167 C23.4188537597656,16.7455310821533 24.119722366333,14.4290313720703 24.1192054748535,12.0596561431885 C24.1192054748535,5.39816284179688 18.7205562591553,3.20239564643998E-7 12.0592708587646,3.20239564643998E-7 C5.39865064620972,0 0,5.39882278442383 0,12.0596561431885 C0,18.7204895019531 5.39865064620972,24.119312286377 12.0592737197876,24.119312286377 C14.522557258606,24.119312286377 16.8084774017334,23.3715991973877 18.7185745239258,22.1049690246582 C18.8425331115723,22.3917922973633 19.0106639862061,22.6654281616211 19.244068145752,22.8995018005371 L25.3363437652588,28.9906463623047 C26.3452625274658,30 27.9814720153809,30 28.9903888702393,28.9906463623047 C30,27.9820747375488 30,26.3457145690918 28.9903888702393,25.3371467590332 Z M12.0592737197876,20.6735076904297 C7.30149745941162,20.6735076904297 3.44569540023804,16.8175849914551 3.44569540023804,12.0603151321411 C3.44569540023804,7.30238914489746 7.30149745941162,3.44646334648132 12.0592737197876,3.44646334648132 C16.8177089691162,3.44646334648132 20.6728515625,7.30238914489746 20.6728515625,12.0603151321411 C20.6728515625,16.8175849914551 16.8177089691162,20.6735076904297 12.0592737197876,20.6735076904297 Z" p-id="2053" fill="White" stroke="Null"></path>

③fxFlying1屬性設定
- ReportName：設定報表名稱=計量單位清單.fr3。
④fxListBox1屬性設定
- Height：設定控制元件高度=575。
- Width：設定控制元件寬度=400。雙擊控制元件，打開專案編輯器，在其中新增專案。新增的專案如圖所示，專案可作為一個控制元件展示面板，其中可新增其他控制元件。

⑤fxSuperButtonPrint屬性設定

Height：設定控制元件高度=35。
Width：設定控制元件寬度=180。
ColorBegin：設定按鈕的初始顏色=DarkslateVBlue。
Name：設定控制元件名稱=fxSuperButtonPrint。
ButtonType：設定按鈕型別=TfxSvgButton。
ButtonType.AlgnType：設定按鈕圖形與文字的相對位置=aLeft。
ButtonType.SvgData：設定SVG圖形的數據。其中填寫的內容如下：

<path d="M7.35000610351563,3 L27.6499938964844,3 L27.6499938964844,5.90000247955322 L7.35000610351563,5.90000247955322 Z M3,7.34999752044678 L3,24.75 L7.35000610351563,24.75 L7.35000610351563,32 L27.6499938964844,32 L27.6499938964844,24.75 L32,24.75 L32,7.34999752044678 Z M24.75,29.0999965667725 L10.25,29.0999965667725 L10.25,20.4000015258789 L24.75,20.4000015258789 Z M29.1000061035156,13.1500024795532 L24.75,13.1500024795532 L24.75,10.25 L29.1000061035156,10.25 Z" p-id="1959" fill="White" stroke="Null"></path>

Text：設定按鈕文字=列印。

⑥fxSuperButtonPreview屬性設定

Height：設定控制元件高度=35。
Width：設定控制元件寬度=180。
ColorBegin：設定按鈕的初始顏色=DarkslateVBlue。
Name：設定控制元件名稱=fxSuperButtonPreview。
ButtonType：設定按鈕型別=TfxSvgButton。
ButtonType.AlgnType：設定按鈕圖形與文字的相對位置=aLeft。
ButtonType.SvgData：設定SVG圖形的數據。其中填寫的內容如下：

<path d="M17.5084896087646,10.891939163208 C13.8615570068359,10.891939163208 10.9051456451416,13.8483505249023 10.9051456451416,17.4952812194824 C10.9051456451416,21.1422157287598 13.8615570068359,24.0986289978027 17.5084896087646,24.0986289978027 C21.1554222106934,24.0986289978027 24.1118335723877,21.1422157287598 24.1118335723877,17.4952812194824 C24.1118335723877,13.8483505249023 21.1554222106934,10.891939163208 17.5084896087646,10.891939163208 Z M17.5084896087646,22.2119560241699 C14.9029979705811,22.2119560241699 12.7918148040771,20.100772857666 12.7918148040771,17.4952812194824 C12.7918148040771,14.8897924423218 14.9029979705811,12.7786092758179 17.5084896087646,12.7786092758179 C20.1139812469482,12.7786092758179 22.2251644134521,14.8897924423218 22.2251644134521,17.4952812194824 C22.2251644134521,20.100772857666 20.1139812469482,22.2119560241699 17.5084896087646,22.2119560241699 Z M30.5887699127197,14.1766300201416 C27.3946380615234,9.8580436706543 22.7194690704346,7.12803268432617 17.4990558624268,7.12803268432617 C12.2786417007446,7.12803268432617 7.60536050796509,9.8580436706543 4.41122913360596,14.1766300201416 C3,16.0840530395508 3,18.9178314208984 4.41122913360596,20.8233680725098 C7.60536050796509,25.1419525146484 12.2805280685425,27.8719673156738 17.5009422302246,27.8719673156738 C22.7213592529297,27.8719673156738 27.3946380615234,25.1419525146484 30.5906581878662,20.8233680725098 C32,18.9178314208984 32,16.0840530395508 30.5887699127197,14.1766300201416 Z M29.169994354248,19.2593193054199 C26.2079238891602,23.5345153808594 21.9421634674072,25.9890670776367 17.466983795166,25.9890670776367 C12.9955759048462,25.9890670776367 8.72981643676758,23.5345153808594 5.7658576965332,19.2612075805664 C5.06024312973022,18.2424049377441 5.06024312973022,16.7632522583008 5.7658576965332,15.7444524765015 C8.72981643676758,11.4673738479614 12.9955759048462,9.0165901184082 17.466983795166,9.0165901184082 C21.9421634674072,9.0165901184082 26.2079238891602,11.469259262085 29.169994354248,15.7444524765015 C29.8756084442139,16.7613677978516 29.8756084442139,18.2424049377441 29.169994354248,19.2593193054199 Z" p-id="2876" fill="White" stroke="Null"></path>

Text：設定按鈕文字=預覽。

⑦fxSvg2屬性設定

Height：設定控制元件高度=40。
Width：設定控制元件寬度=40。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M23.433032989502,36.3191986083984 L23.433032989502,34.1227645874023 L21.1160697937012,34.1227645874023 L21.1160697937012,29.5691928863525 L37.8616065979004,29.5691928863525 L37.8616065979004,1.44419860839844 L2.14732003211975,1.44419860839844 L2.14732003211975,29.5691928863525 L18.8839263916016,29.5691928863525 L18.8839263916016,34.1272277832031 L16.5803546905518,34.1272277832031 L16.5803546905518,36.3236618041992 L0,36.3236618041992 L0,38.5558013916016 L40,38.5558013916016 L40,36.3236618041992 L23.433032989502,36.3236618041992 Z M4.3794641494751,27.3370552062988 L4.3794641494751,3.67634415626526 L35.6294631958008,3.67634415626526 L35.6294631958008,27.3370552062988 L4.37946271896362,27.3370552062988 Z M13.5312471389771,9.01562881469727 L15.1383924484253,9.01562881469727 L15.1383924484253,21.1584815979004 L13.5312471389771,21.1584815979004 L13.5312471389771,9.01562786102295 Z M26.9151782989502,9.69866371154785 C26.5133895874023,9.42187786102295 26.0133895874023,9.22991371154785 25.4151763916016,9.13169956207275 C24.9910697937012,9.05580615997314 24.3749980926514,9.01562786102295 23.5669612884521,9.01562786102295 L18.9866046905518,9.01562786102295 L18.9866046905518,21.1584815979004 L20.5937461853027,21.1584815979004 L20.5937461853027,16.220983505249 L23.7098178863525,16.220983505249 C25.4285659790039,16.220983505249 26.6160640716553,15.8638401031494 27.2723159790039,15.1495571136475 C27.9285659790039,14.4352693557739 28.2589206695557,13.5602684020996 28.2589206695557,12.5290203094482 C28.2589206695557,11.9263410568237 28.1339225769043,11.3727693557739 27.8883838653564,10.8727693557739 C27.6428527832031,10.3683052062988 27.3169593811035,9.9754467010498 26.9151706695557,9.69866275787354 Z M25.9464244842529,14.207592010498 C25.5089263916016,14.595986366272 24.7723178863525,14.7879476547241 23.7366046905518,14.7879476547241 L20.5982112884521,14.7879476547241 L20.5982112884521,10.4486656188965 L23.7053527832031,10.4486656188965 C24.4330310821533,10.4486656188965 24.9330310821533,10.4843788146973 25.2053489685059,10.5558080673218 C25.6249961853027,10.6718788146973 25.9642791748047,10.908486366272 26.2187442779541,11.2700929641724 C26.4776706695557,11.6317005157471 26.6026706695557,12.0647354125977 26.6026706695557,12.5736646652222 C26.5982112884521,13.2790212631226 26.3794593811035,13.8236637115479 25.9464225769043,14.2075929641724 Z" p-id="6154" fill="Darkslateblue" stroke="Null"></path>

⑧fxSvg3屬性設定

Height：設定控制元件高度=40。
Width：設定控制元件寬度=40。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M35.1785659790039,8.8058032989502 L35.1785659790039,5.30133867263794 L29.8214244842529,5.30133867263794 L29.8214244842529,0.390625 L10.1785707473755,0.390625 L10.1785707473755,5.30133867263794 L4.8214282989502,5.30133867263794 L4.8214282989502,8.8058032989502 L0,8.8058032989502 L0,39.609375 L40,39.609375 L40,8.8058032989502 L35.1785659790039,8.8058032989502 Z M37.7678565979004,37.3772315979004 L2.23214268684387,37.3772315979004 L2.23214268684387,11.0379457473755 L7.05357074737549,11.0379457473755 L7.05357074737549,7.53348112106323 L12.4107131958008,7.53348112106323 L12.4107131958008,2.62276768684387 L27.589282989502,2.62276768684387 L27.589282989502,7.53348112106323 L32.9464263916016,7.53348112106323 L32.9464263916016,11.0379457473755 L37.7678565979004,11.0379457473755 L37.7678565979004,37.3772315979004 Z M8.08035659790039,18.3415145874023 L10.3125,18.3415145874023 L10.3125,32.604907989502 L8.08035659790039,32.604907989502 L8.08035659790039,18.3415145874023 Z M15.2812480926514,18.3415145874023 L17.513391494751,18.3415145874023 L17.513391494751,32.604907989502 L15.2812480926514,32.604907989502 L15.2812480926514,18.3415145874023 Z M22.4866027832031,18.3415145874023 L24.7187461853027,18.3415145874023 L24.7187461853027,32.604907989502 L22.4866027832031,32.604907989502 L22.4866027832031,18.3415145874023 Z M29.6874942779541,18.3415145874023 L31.9196376800537,18.3415145874023 L31.9196376800537,32.604907989502 L29.6874942779541,32.604907989502 L29.6874942779541,18.3415145874023 Z" p-id="6552" fill="Darkslateblue" stroke="Null"></path>

⑨fxSvg7屬性設定

Height：設定控制元件高度=40。
Width：設定控制元件寬度=40。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M19.6190738677979,13.9554080963135 L38.7893104553223,13.9554080963135 C39.4566612243652,13.9554080963135 40,14.498743057251 40,15.1660957336426 C40,15.8334522247314 39.4566612243652,16.3767852783203 38.7893104553223,16.3767852783203 L19.6190738677979,16.3767852783203 C18.951717376709,16.3767852783203 18.4083843231201,15.8334522247314 18.4083843231201,15.1660957336426 C18.4083843231201,14.498743057251 18.951717376709,13.9554080963135 19.6190738677979,13.9554080963135 Z M19.6190738677979,23.6291122436523 L38.7893104553223,23.6291122436523 C39.4566612243652,23.6291122436523 40,24.1724452972412 40,24.8397998809814 C40,25.5071544647217 39.4566612243652,26.0504894256592 38.7893104553223,26.0504894256592 L19.6190738677979,26.0504894256592 C18.951717376709,26.0504894256592 18.4083843231201,25.5071544647217 18.4083843231201,24.8397998809814 C18.4083843231201,24.1665382385254 18.951717376709,23.6291122436523 19.6190738677979,23.6291122436523 Z M19.6190738677979,33.2969055175781 L38.7893104553223,33.2969055175781 C39.4566612243652,33.2969055175781 40,33.8402404785156 40,34.5075912475586 C40,35.1749649047852 39.4566612243652,35.7182922363281 38.7893104553223,35.7182922363281 L19.6190738677979,35.7182922363281 C18.951717376709,35.7182922363281 18.4083843231201,35.1749649047852 18.4083843231201,34.5075912475586 C18.4083843231201,33.8402404785156 18.951717376709,33.2969055175781 19.6190738677979,33.2969055175781 Z" p-id="2109" fill="Darkslateblue" stroke="Null"></path>
<path d="M13.3884515762329,17.676061630249 L1.299276471138,17.676061630249 C0.578768789768219,17.676061630249 0,17.0913887023926 0,16.3767852783203 L0,4.28761148452759 C0,3.57300901412964 0.578768789768219,2.98833465576172 1.299276471138,2.98833465576172 L13.3884515762329,2.98833465576172 C14.1089611053467,2.98833465576172 14.6877269744873,3.57300901412964 14.6877269744873,4.28761148452759 L14.6877269744873,16.3708820343018 C14.6877269744873,17.0913906097412 14.1089611053467,17.6760635375977 13.3884515762329,17.6760635375977 Z M2.59855198860168,15.0775098800659 L12.0891742706299,15.0775098800659 L12.0891742706299,5.58688735961914 L2.598552942276,5.58688735961914 L2.598552942276,15.0775098800659 Z M13.3884515762329,37.0116653442383 L1.299276471138,37.0116653442383 C0.578768789768219,37.0116653442383 0,36.4269866943359 0,35.7123870849609 L0,23.6291122436523 C0,22.9145088195801 0.578768789768219,22.329833984375 1.299276471138,22.329833984375 L13.3884515762329,22.329833984375 C14.1089611053467,22.329833984375 14.6877269744873,22.9145088195801 14.6877269744873,23.6291122436523 L14.6877269744873,35.7182922363281 C14.6877269744873,36.4328918457031 14.1089611053467,37.0116653442383 13.3884515762329,37.0116653442383 Z M2.59855198860168,34.4131011962891 L12.0891742706299,34.4131011962891 L12.0891742706299,24.9283866882324 L2.598552942276,24.9283866882324 L2.598552942276,34.4131011962891 Z" p-id="2110" fill="Darkslateblue" stroke="Null"></path>
<path d="M19.6190738677979,4.28761148452759 L38.7893104553223,4.28761148452759 C39.4566612243652,4.28761148452759 40,4.83094596862793 40,5.49830055236816 C40,6.16565561294556 39.4566612243652,6.70898962020874 38.7893104553223,6.70898962020874 L19.6190738677979,6.70898962020874 C18.951717376709,6.70898962020874 18.4083843231201,6.16565561294556 18.4083843231201,5.49830055236816 C18.4083843231201,4.83094596862793 18.951717376709,4.28761148452759 19.6190738677979,4.28761148452759 Z" p-id="2111" fill="Darkslateblue" stroke="Null"></path>

1
2
3

⑩fxSvg4屬性設定

Height：設定控制元件高度=40。
Width：設定控制元件寬度=40。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M28.7232131958008,0 L2.36607027053833,0 C1.8749988079071,0 1.47321319580078,0.401785671710968 1.47321319580078,0.892857015132904 L1.47321319580078,39.1071395874023 C1.47321319580078,39.5982093811035 1.8749988079071,40 2.36607027053833,40 L37.6339263916016,40 C38.125,40 38.5267868041992,39.5982093811035 38.5267868041992,39.1071395874023 L38.5267868041992,9.26785659790039 L28.7232131958008,0 Z M36.7410736083984,10.1919641494751 L36.7410736083984,37.9464263916016 C36.7410736083984,38.0937461853027 36.6205368041992,38.214282989502 36.4732208251953,38.214282989502 L3.52678298950195,38.214282989502 C3.37946152687073,38.214282989502 3.25892615318298,38.0937461853027 3.25892615318298,37.9464263916016 L3.25892615318298,2.05357241630554 C3.25892615318298,1.90625083446503 3.37946152687073,1.78571510314941 3.52678298950195,1.78571510314941 L27.9374923706055,1.78571510314941 L36.7410736083984,10.1919641494751 Z" p-id="11485" fill="Darkslateblue" stroke="Null"></path>
<path d="M6.83035564422607,23.0223178863525 L33.1696395874023,23.0223178863525 L33.1696395874023,24.8080310821533 L6.83035469055176,24.8080310821533 Z M6.83035564422607,15.8124990463257 L33.1696395874023,15.8124990463257 L33.1696395874023,17.5982131958008 L6.83035469055176,17.5982131958008 Z M6.83035564422607,30.1696395874023 L33.1696395874023,30.1696395874023 L33.1696395874023,31.9553546905518 L6.83035469055176,31.9553546905518 Z M6.83035564422607,8.0669641494751 L27.8348159790039,8.0669641494751 L27.8348159790039,9.85267925262451 L6.83035564422607,9.85267925262451 Z" p-id="11486" fill="Darkslateblue" stroke="Null"></path>

1
2

(11)fxSvg5屬性設定

Height：設定控制元件高度=40。
Width：設定控制元件寬度=40。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M36.25,10 L27.4999980926514,10 L27.4999980926514,1.25 L29.9999980926514,1.25 L29.9999980926514,7.49999952316284 L36.25,7.49999952316284 L36.25,10 Z" p-id="11832" fill="Darkslateblue" stroke="Null"></path>
<path d="M37.5,35 L7.5,35 L7.5,0 L29.2624988555908,0 L37.5,8.23749923706055 Z M9.99999904632568,32.4999961853027 L34.9999961853027,32.4999961853027 L34.9999961853027,9.26249980926514 L28.2374954223633,2.5 L9.99999904632568,2.5 Z" p-id="11833" fill="Darkslateblue" stroke="Null"></path>
<path d="M32.4999961853027,40 L2.5,40 L2.5,5 L8.74999904632568,5 L8.74999904632568,7.49999952316284 L5,7.49999952316284 L5,37.5 L29.9999980926514,37.5 L29.9999980926514,33.75 L32.4999961853027,33.75 L32.4999961853027,40 Z" p-id="11834" fill="Darkslateblue" stroke="Null"></path>

1
2
3

(12)fxSvg6屬性設定

Height：設定控制元件高度=40。
Width：設定控制元件寬度=40。
SVGData：設定SVG圖形數據。其中內容填寫如下：

<path d="M9.47368812561035,8.42105293273926 L26.3157901763916,8.42105293273926 L26.3157901763916,10.5263156890869 L9.47368812561035,10.5263156890869 L9.47368812561035,8.42105293273926 Z M26.3157901763916,18.9473686218262 L9.47368812561035,18.9473686218262 L9.47368812561035,16.8421058654785 L26.3157901763916,16.8421058654785 L26.3157901763916,18.9473686218262 Z M38.9473648071289,31.5789432525635 C38.9473648071289,35.0273666381836 33.2926254272461,40 26.3157901763916,40 C19.3389492034912,40 13.6842136383057,35.025260925293 13.6842136383057,31.5789432525635 C13.8263921737671,29.9591808319092 14.5789699554443,28.4540233612061 15.789475440979,27.3684177398682 L9.47368812561035,27.3684177398682 L9.47368812561035,25.2631568908691 L17.8947410583496,25.2631568908691 L17.8947410583496,25.6842079162598 C22.2795505523682,22.7784576416016 27.8573589324951,22.3537483215332 32.6315765380859,24.5621032714844 L32.6315765380859,2.10526323318481 L3.15789818763733,2.10526323318481 L3.15789818763733,35.7894706726074 L15.789475440979,35.7894706726074 L15.789475440979,37.8947334289551 L1.05263519287109,37.8947334289551 L1.05263519287109,0 L34.7368392944336,0 L34.7368392944336,25.7052612304688 C36.9803085327148,26.8985195159912 38.5377197265625,29.0711193084717 38.9473648071289,31.5789470672607 Z M33.6842041015625,27.3684177398682 L32.6315765380859,27.3684177398682 L32.6315765380859,26.7852592468262 C30.6756687164307,25.7872886657715 28.5115776062012,25.2657432556152 26.3157901763916,25.2631530761719 C20.5010547637939,25.2631530761719 15.789475440979,28.8231525421143 15.789475440979,31.5789413452148 C15.789475440979,34.1642074584961 20.5010547637939,37.8947334289551 26.3157901763916,37.8947334289551 C32.1305236816406,37.8947334289551 36.8421020507813,34.1642074584961 36.8421020507813,31.5789413452148 C36.5145721435547,29.755012512207 35.3434753417969,28.1935501098633 33.6842041015625,27.3684177398682 Z M26.3157901763916,35.7894706726074 C23.9903831481934,35.7894744873047 22.1052665710449,33.904354095459 22.1052665710449,31.5789470672607 C22.1052684783936,29.2535343170166 23.990385055542,27.3684177398682 26.3157939910889,27.3684177398682 C28.6412029266357,27.3684215545654 30.5263156890869,29.2535381317139 30.5263156890869,31.5789470672607 C30.5263156890869,33.9043655395508 28.6411991119385,35.789478302002 26.3157920837402,35.789478302002 Z M26.3157901763916,29.4736804962158 C25.1530857086182,29.4736785888672 24.2105293273926,30.4162368774414 24.2105293273926,31.5789432525635 C24.2105274200439,32.7416496276855 25.1530838012695,33.6842079162598 26.3157901763916,33.6842079162598 C27.4784965515137,33.684211730957 28.4210529327393,32.7416496276855 28.4210529327393,31.5789432525635 C28.4210529327393,30.4162406921387 27.4784965515137,29.4736804962158 26.3157920837402,29.4736804962158 Z" p-id="12847" fill="Darkslateblue" stroke="Null"></path>

(13)fxEditAddress屬性設定
- Height：設定控制元件高度=25。
- Width：設定控制元件寬度=320。
- Name：設定控制元件名稱=fxEditAddress。
- Text：設定編輯文字框顯示的內容，設定列印伺服器的地址=192.168.0.157。
(14)fxEditPort屬性設定
- Height：設定控制元件高度=25。
- Width：設定控制元件寬度=320。
- Name：設定控制元件名稱=fxEditPort。
- Text：設定編輯文字框顯示的內容，設定埠號=8801。
- KeyBoardType：設定彈出編輯鍵盤的型別=NumberPad。
(15)fxComboBoxPrintType屬性設定
- Height：設定控制元件高度=25。
- Width：設定控制元件寬度=320。
- Name：設定控制元件名稱=fxComboBoxPrinttype。
- ItemIndex：設定預設選項的索引值=0。
- Items：設定選項，雙擊該屬性或者點選右側的[...]打開編輯器，輸入選項。輸入的選項內容如圖所示。
(16)fxComboBoxReportType屬性設定
- Height：設定控制元件高度=25。
- Width：設定控制元件寬度=320。
- Name：設定控制元件名稱=fxComboBoxReportType。
- ItemIndex：設定預設的選項索引值=0。
- Items：設定選項，雙擊該屬性或者點選右側的[...]打開編輯器，輸入選項。輸入的選項內容如圖所示。
(17)fxEditPrintCopies屬性設定
- Height：設定控制元件高度=25。
- Width：設定控制元件寬度=320。
- Name：設定控制元件名稱=fxEditPrintCopies。
- Text：設定編輯文字框內容，此處為列印的份數=1。
- KeyBoardType：設定彈出編輯鍵盤的型別=NumberPad。
(18)fxSwitchEnablePreview屬性設定
- Name：設定控制元件名稱=fxSwitchEnablePreview。

# 3. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。需要引用Flying單元。

# 3.1. 程式初始設定

fxRunFrame-AfterScriptRun事件

在程式啟動運行后，執行程式，將編輯框中指定的預設值賦值給控制元件。

Procedure fxRunFrameAfterScriptRun(Sender: TObject);
//運行時獲取資訊
//get settings when run
Begin
  fxFlying1.HttpOptions.Host := fxEditAddress.Text;
  fxFlying1.HttpOptions.Port := StrToInt(fxEditPort.Text);
  fxFlying1.MQTTOptions.BrokerHost := fxEditAddress.Text;
  fxFlying1.MQTTOptions.BrokerPort := StrToInt(fxEditPort.Text); 
  fxFlying1.PrintOptions.PrintCopies := StrToInt(fxEditPrintCopies.Text);
  fxFlying1.PrintOptions.Preview := fxSwitchEnablePreview.IsChecked;
  //列印型別
  case fxComboBoxPrintType.ItemIndex Of
    1: 
    begin
      fxFlying1.PrintOptions.PrintType := MQTT;
      fxFlying1.MQTTOptions.Enabled := True;
      fxFlying1.WebSocketOptions.Enabled := False;
    End;
    2:
    begin
      fxFlying1.PrintOptions.PrintType := WebSocket;
      fxFlying1.MQTTOptions.Enabled := False;
      fxFlying1.WebSocketOptions.Enabled := True;
    End;
  else
  begin
    fxFlying1.PrintOptions.PrintType := HTTP;
    fxFlying1.MQTTOptions.Enabled := False;
    fxFlying1.WebSocketOptions.Enabled := False;
    End;
  End;
  //輸出檔案型別
  //export type
  case fxComboBoxReportType.ItemIndex Of
    1: fxFlying1.PrintOptions.ExportFileType := jpg;
    2: fxFlying1.PrintOptions.ExportFileType := html;
    3: fxFlying1.PrintOptions.ExportFileType := rtf;
    4: fxFlying1.PrintOptions.ExportFileType := csv;
    5: fxFlying1.PrintOptions.ExportFileType := txt;
    6: fxFlying1.PrintOptions.ExportFileType := xls;
  else
    fxFlying1.PrintOptions.ExportFileType := pdf;
  End;
End;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 3.2. 事件設定

fxSpeedButton1-OnClick事件

點選按鈕，將載入伺服器端的印表機列表並顯示。

Procedure fxSpeedButton1OnClick(Sender: TObject);
//獲取列印列表
//get printer list
Begin
  fxFlying1.GetPrinterList;
End;

1
2
3
4
5
6

(18)fxSwitchEnablePreview-OnSwitch事件

點選以切換開關狀態。是否開啟僅預覽模式。

Procedure fxSwitchEnablePreviewOnSwitch(Sender: TObject);
//切換預覽狀態,點選列印時僅輸出檔案不進行列印操作
//Preview State
Begin
  fxFlying1.PrintOptions.Preview := fxSwitchEnablePreview.IsChecked;
End;

1
2
3
4
5
6

(17)fxEditPrintCopies-OnExit事件

當編輯框取消對口袋控制元件的啟用時，進行列印份數的修改。

Procedure fxEditPrintCopiesOnExit(Sender: TObject);
//列印份數修改
//Print Copies
Begin
  fxFlying1.PrintOptions.PrintCopies := StrToInt(fxEditPrintCopies.Text);
End;

1
2
3
4
5
6

(14)fxEditPort-OnExit事件 當編輯框取消對埠號的啟用時，進行列印埠的修改。

Procedure fxEditPortOnExit(Sender: TObject);
//修改埠
//COM Port
Begin
  fxFlying1.HTTPOptions.Port := StrToInt(fxEditPort.Text);
  fxFlying1.WebSocketOptions.Port := StrToInt(fxEditPort.Text);
  fxFlying1.MQTTOptions.BrokerPort := StrToInt(fxEditPort.Text);  
End;

1
2
3
4
5
6
7
8

(13)fxEditAddress-OnExit事件 當編輯框取下對地址的啟用時，進行列印地址的修改。

Procedure fxEditAddressOnExit(Sender: TObject);
//修改地址
//Correct Address
Begin
  fxFlying1.HTTPOptions.Host := fxEditAddress.Text;
  fxFlying1.MQTTOptions.BrokerHost := fxEditAddress.Text;
  fxFlying1.WebSocketOptions.Host := fxEditAddress.Text;
End;

1
2
3
4
5
6
7
8

(15)fxComboBoxPrintType-OnChange事件

點選以切換列印型別。

Procedure fxComboBoxPrintTypeOnChange(Sender: TObject);
//修改列印型別
//Correct Print Type
Begin
  //列印型別
  case fxComboBoxPrintType.ItemIndex Of
    1: 
    begin
      fxFlying1.PrintOptions.PrintType := MQTT;
      fxFlying1.MQTTOptions.Enabled := True;
      fxFlying1.WebSocketOptions.Enabled := False;
    End;
    2:
    begin
      fxFlying1.PrintOptions.PrintType := WebSocket;
      fxFlying1.MQTTOptions.Enabled := False;
      fxFlying1.WebSocketOptions.Enabled := True;
    End;
  else
  begin
    fxFlying1.PrintOptions.PrintType := HTTP;
    fxFlying1.MQTTOptions.Enabled := False;
    fxFlying1.WebSocketOptions.Enabled := False;
    End;
  End;
End;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

(16)fxComboBoxReportType-OnChange事件

點選以切換列印報表的型別。

Procedure fxComboBoxReportTypeOnChange(Sender: TObject);
//修改檔案輸出型別
//Export File Type
Begin
  case fxComboBoxReportType.ItemIndex Of
    1: fxFlying1.PrintOptions.ExportFileType := jpg;
    2: fxFlying1.PrintOptions.ExportFileType := html;
    3: fxFlying1.PrintOptions.ExportFileType := rtf;
    4: fxFlying1.PrintOptions.ExportFileType := csv;
    5: fxFlying1.PrintOptions.ExportFileType := txt;
    6: fxFlying1.PrintOptions.ExportFileType := xls;
  else
    fxFlying1.PrintOptions.ExportFileType := pdf;
  End;
End;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

⑤fxSuperButtonPrint-OnClick事件

點選以開啟列印。

Procedure fxSuperButtonPrintOnClick(Sender: TObject);
//列印
//Print
Begin
  if demo Then exit;
  if fxcomboboxList.Count = 0 Then exit;
  fxFlying1.PrintOptions.PrinterName := fxcomboboxList.Items[fxcomboboxList.ItemIndex];
  fxRFDataSet1.SQL.Text := 'SELECT * FROM Basic_Unit';
  fxRFDataSet1.OpenData;
  fxFlying1.PrintOptions.Data.Clear;
  fxFlying1.AddPrintData(fxRFDataSet1,'A');
  fxFlying1.ReportPrint; 
end;

1
2
3
4
5
6
7
8
9
10
11
12
13

⑥fxSuperButtonPreview-OnClick事件

點選以進行預覽。

Procedure fxSuperButtonPreviewOnClick(Sender: TObject);
//預覽
//Preview
Begin
  //if fxcomboboxList.Count = 0 Then exit;
  //fxFlying1.PrinterName := fxcomboboxList.Items[fxcomboboxList.ItemIndex];
  fxRFDataSet1.Connection := fxdm.DBConnection;
  fxRFDataSet1.SQL.Text := 'SELECT * FROM Basic_Unit';
  fxRFDataSet1.openData;
  fxFlying1.PrintOptions.Data.Clear;
  fxFlying1.AddPrintData(fxRFDataSet1,'A'); 
  fxFlying1.ReportPreview;
End;

1
2
3
4
5
6
7
8
9
10
11
12
13

③fxFlying1-OnReceivedPrinter事件

當Flying向客戶端返回印表機列表資訊時觸發事件，用於顯示可使用的印表機列表資訊。

Procedure fxFlying1OnReceivedPrinter(Sender: TObject; APrinterList: string);
Begin
  fxComboboxList.Items.CommaText := APrinterList;
  if fxComboBoxList.Items.Count <> 0  Then
    fxComboBoxList.ItemIndex := 0;
  fxComboBoxList.DropDown;
End;

1
2
3
4
5
6
7

③fxFlying1-OnReceivedExport事件

當Flying向客戶端返回輸出的檔案資訊時觸發事件。

Procedure fxFlying1OnReceivedExport(Sender: TObject; AUrl: string);
Begin
  fxShowFileView(Self.GetMsgLang('preview'),AUrl,'',Self.GetMsgLang('cancel'),Self.GetMsgLang('OK'))
End;

1
2
3
4

# 4. 運行結果

使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

填寫列印設定的相關選項，比如伺服器地址，埠號，列印的型別等內容。確認無誤后，點選左上角的搜索按鈕，選擇對應使用的印表機型號。點選[列印]，服務端自動列印報表。

提示

搭載有鴻蒙(Harmony OS) 系統的手機設備可能會出現無法檢視預覽界面的情況。

← 自定HTTP Client客戶端二維碼產生與掃瞄→