PixPIO 2.8" smart display · User manual

PixPIO User Manual

Design the screens, send them to the display in one click. Use it from any microcontroller (Arduino, PIC, STM32…), from a PLC over Modbus, or straight from the PC. It can also run on its own, with only power.

The red boxes in the screenshots are the settings / buttons that step uses.

A design like this manual's tutorial on the display: no host, Actions only.

1

What is PixPIO

PixPIO is a 2.8" (320×240) colour display board with its own processor (PIC18F27Q84). Screens, buttons, bars, gauges and pictures are designed on the PC in the PixPIO Editor, and the display draws them itself. The host (an MCU or a PLC) only sends short messages such as "level = 80".

LiteNo NOR, no touch. English fonts.

4 / 4T4 MB NOR (all fonts and languages). T = touch.

8 / 8T8 MB NOR. More pictures, animations.

16 / 16T16 MB NOR. Large pictures, many languages.

The board has 4 buttons: MENU UP DOWN START (push buttons or TTP223 touch pads). Some models also have brightness control and a buzzer.

Why PixPIO

Live editingPlug in USB: every change in the Editor shows on the display at once. No SD card, no long upload.

30 ready widgetsGauges, charts, keyboards, QR codes, animations: drag, drop, done.

Any hostUART, I2C or SPI. Tested with PIC, Arduino, ESP32, STM32. Or no host at all.

Your languageMalayalam, Hindi, Tamil and more on the screen, with phonetic typing.

Free toolsPixPIO Editor and PICPIO for VS Code cost nothing.

2

Installing

Install Visual Studio Code (Windows, free).
In VS Code, the PICPIO extension: Extensions → "…" → Install from VSIX… → the picpio-x.y.z.vsix that came with the board.
Restart VS Code. In the PICPIO menu (or Ctrl+Shift+P → "PixPIO") choose PixPIO. The Editor opens in the browser.
Plug the USB-serial cable (CH340) into the PC. Device Manager → Ports should show something like USB-SERIAL CH340 (COM3).

The Editor needs no internet. It talks to the display through a "bridge" that VS Code runs, so keep VS Code open while you use the Editor.

3

The Editor

The first time it opens, the Editor shows an Example project (the Example button in the toolbar always brings it back; 8 pages, most widgets).

PixPIO Editor: toolbar, pages, add widget, preview, properties, problems, device — The PixPIO Editor with the Example project.

Part	Where	What it does
Toolbar	Top	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	Top left	The screens. + new page, ⧉ copy, − remove. "start" = the one shown first.
Add widget	Left	Click one and it is added to the screen.
Preview	Middle	As the display will show it. Drag to move; pull the blue squares to resize.
Properties	Right	The selected widget's settings. Click a page in the Pages list for the page's and the whole project's settings. ? = an explanation of every setting.
Problems	Bottom left	Mistakes and warnings in the design.
Device	Bottom right	COM port, Connect, Mirror, Storage, Self-test, Touch, commands from the PC (chapter 6).

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo.

4

Tutorial: Water Tank (from scratch)

A 2-page screen showing a tank's level. UP / DOWN change the level and the bar follows. At 100 it shows "TANK FULL", at 0 "TANK EMPTY". MENU opens a settings page. No host needed. About 15 minutes.

STEP 1

A new project

New in the toolbar. You get an empty screen (page "main").

STEP 2

Board model

On the right, under Screen · whole project, set Board model to the model on the board's label (here PixPIO 4T).

This sets the display, touch, buttons, brightness, buzzer and NOR by itself. The Editor remembers it.

STEP 3

Display (only if needed)

Only if the picture is turned or the colours are wrong:

Display: the module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation in red boxes

STEP 4

Name the page

At the top right, Name: home. In host code it is PAGE_HOME.

STEP 5

A second page

The Pages +. Name the new page settings. Then click home in the list to go back.

Pages: home start, settings; + in a red box

STEP 6

The top bar (Rectangle)

Rectangle in Add widget. x, y, width, height: 0, 0, 320, 30 (or drag with the mouse). Its colour under Colours.

Rectangle added; Rectangle button and x y width height in red boxes

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, position 8, 7, 304, 16. Font, Size and Align are under Text.

Label: Name title, Text WATER TANK in red boxes

STEP 8

Level (Number)

Number: Name level, position 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: kept through a power cut

Number: Value, Unit, Min, Max, Remember value in red boxes

STEP 9

Change it with the board buttons

Keys (buttons): Key + UP, Key − DOWN, Step 5. Held down, it keeps changing.

Key + UP, Key − DOWN, Step 5 in red boxes

STEP 10

Level bar

Bar: Name level_bar, position 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, green segment bar — So far: title, number, bar.

STEP 11

Hidden messages

Label: Name full_msg, Text TANK FULL, position 10, 120, 300, 20, Hidden ✓.

One more in the same place: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Hidden widgets show dotted in the preview; on the display they are not shown at start.

Label: Text TANK FULL, Hidden in red boxes

STEP 12

Actions: 5 actions on the number

Click level in the preview. Actions (no code) → + Add action 5 times:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ removes a row.

STEP 13

Settings button

Button: Name btn_settings, position 10, 200, 145, 34, Caption MENU: Settings.

STEP 14

Change page when the button is pressed

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: the board's MENU does the same.

Home page finished — The home page is done.

STEP 15

Settings page: Back button, QR

settings in Pages. A Rectangle and a "SETTINGS" Label as in steps 6 and 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = your website, Border shape = Rounded.

QR: Text / link, Border shape in red boxes

Settings page: SETTINGS, rounded QR, START: Back — The settings page is done.

STEP 16

Save

Save: a .pixpio file. While "Unsaved changes" shows, it is not saved. Next, connect the board and Flash (chapter 5).

5

Connect the board, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Only if the board has no supply of its own

STEP 2

Connect

In Device: the COM port, baud 115200, Connect. A green dot = connected. No port listed? ↻.

STEP 3

⚡ Flash to display

⚡ Flash to display in the toolbar.
The design is turned into firmware and sent over the cable; a window shows the progress. The first time takes 1–2 minutes.
When "UPLOAD SUCCESSFUL" shows, the display starts with the new screen.
Pictures and other languages (NOR models) go to the NOR over the same cable.

No SD card needed. For every change: change it in the Editor, Flash.

The tutorial design on the display: change the level with UP / DOWN, take it to 100 to see "TANK FULL", press MENU for the settings page.

6

Controlling the display from the PC

Once connected, you can try every widget from the PC, with no host MCU. Three ways:

1. Quick commands (Device panel)

Page + Show: opens that page on the display.
Pick a Widget, type a Value, Set value: a number, bar, LED, switch… changes.
text + Set text: changes a Changeable text.
Hide / Show: hide / show the widget.
Key + Press: as if a board button (MENU, UP…) were pressed.

Device quick commands: Page Show, Widget, Value Set value, text Set text, Hide, Show, Key Press in red boxes

2. Commands for this widget

Whatever widget is selected, the bottom of its properties has Commands for this widget. For each command:

Send: sends it from the PC to the display right away (must be connected).
Copy: the code to paste into the host program (pd_set_value(&disp, W_NUMBER, 253);).
The green bytes: the frame to send yourself over UART / I2C / SPI (when programming in another language).

The commands follow the settings as you change them. Each widget's commands are in chapter 7.

Number widget commands: Set value, Main colour, Background, Hide, Show, Read value; Copy and Send for each

3. Mirror, Touch

Mirror ✓: what happens on the display (button presses, value changes) shows live in the preview too.
☝ Touch: a mouse click on the preview acts like a finger on the display (👆 cursor, yellow dot).
🔧 Self-test, ⬆ Storage: chapters 15, 12.

Mirror, Storage, Self-test, Touch in red boxes

7

Every widget

For each widget: what it is for, how to use it, what its value is, host code. Three pictures: On the display (the widget added to a New project), Settings, Commands (Send from the PC / Copy the code). The names are the same as in the Add widget list.

Rectangle

Header bars, background boxes, cards. Can sit behind other widgets.

How to use

Colours: Background (fill), Text / border colour.
Corner radius: rounded corners. Border: an outline.
Lower in the widget list = behind other widgets (change the order with the ↑ ↓ buttons).

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // red
disp.hide(W_HEADER);

Rectangle: On the display — On the display

Rectangle: Commands: Send from the PC, Copy the code — Commands: Send from the PC, Copy the code

Label

Fixed text: titles, captions, units.

How to use

Type in Text. Font, Size, Align.
Language: Malayalam, Hindi… (chapter 9).
Tick Changeable and the host can change the text.
No background: what is underneath shows through.

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // needs Changeable ✓

Label: Commands: Send from the PC, Copy the code — Commands: Send from the PC, Copy the code

Number

Shows a number: temperature, speed, count, setpoint.

How to use

Value (at start), Min, Max.
Decimals 1 shows 253 as 25.3. Unit: °C, %, V.
Keys: change it with UP / DOWN, by Step.
Remember value: kept through a power cut.

Value

The number (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send from the PC, Copy the code — Commands: Send from the PC, Copy the code

Bar

Level, progress, tank, battery.

How to use

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
On touch models it can be dragged with a finger (slider).
Controls brightness: this bar sets the backlight.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send from the PC, Copy the code — Commands: Send from the PC, Copy the code

Button

A button to press: change page, start / stop.

How to use

Caption: its text. Style: normal, outline, pill, checkbox.
Mode: push (only while pressed) / toggle (on-off).
Key: a board button (MENU…) presses it too.
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

Keyboard

An on-screen QWERTY keyboard: a name, a Wi-Fi password.

How to use

Types into: an Input box.
Language: Malayalam, Hindi, Tamil… English letters typed show in that language (chapter 9).
Touching the Input box can also pop the keyboard up (Keyboard on tap).

Value

Character code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: On the display — On the display

Keyboard: Commands: Send from the PC, Copy the code — Commands: Send from the PC, Copy the code

Input box

The box a keypad / keyboard types into.

How to use

Placeholder, Max length.
Kind: text, number, password (shown as *), Indian language (typed in English, shown in Malayalam, Hindi, Tamil…; chapter 9).

Value

Number kind: the number, on OK

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: On the display — On the display

Input box: Commands: Send from the PC, Copy the code — Commands: Send from the PC, Copy the code

8

Actions: full list

What the display does by itself when something happens to a widget. No host needed. Examples: Tutorial steps 12, 14.

When	Which widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	The same widgets

Do	Target / value
Go to page	A page
Set value of	widget, value
Add to / Subtract from	widget, how much
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Models with a buzzer
Brightness (%)	Models with brightness control

9

Languages

Put a Message on a page (Label, Text and Button work the same).

Language: Malayalam (Hindi, Marathi, Tamil, Gujarati, Punjabi, Bengali, European, Русский, Ελληνικά).
The sentence in Phrases (several: separate with |).
Live text ✓: the host can send any sentence as UTF-8; the display draws conjuncts and vowel signs correctly. Ticking it makes the field "Message" and ticks "Changeable".

Live text in languages other than English needs a NOR model (4, 8, 16). The fonts are already on the NOR from the factory.

Language Malayalam, Message, Changeable in red boxes

Malayalam in the preview — Malayalam live text in the preview.

Typing Malayalam, Hindi, Tamil… on the keyboard

Press English letters on the on-screen keyboard and the box shows them in Malayalam (or Hindi, Marathi, Tamil, Gujarati, Punjabi, Bengali): namaste → नमस्ते. Like phonetic typing on a phone.

Add a Keyboard.
Language: pick the language.

If the keyboard does not type into an Input box yet ("Types into" = None), picking a Language adds an Input box above the keyboard and the keyboard types into it.

Keyboard settings: Language in a red box

The Input box added above the keyboard — After picking Malayalam: an Input box above the keyboard, "Types into" = that box.

The language is a setting of that Input box. It can be changed by selecting the box too:

Kind: Indian language (typed in English).
Language: the language.
Letter size: 16, 20, 24 px.
The typing rules for that language are shown below.

Max length is at most 24 English letters. "Show typed text" is only needed when the keyboard covers the box (a pop-up keyboard). If the box is visible above the keyboard, untick it, or the same text shows in two boxes.

Input box settings: Kind, Language, Letter size in red boxes

Boxes typed in seven languages — On the display: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Language	Type	Shows	Remember
മലയാളം	`namaskaaram`, `kEraLam`, `avan`	നമസ്കാരം, കേരളം, അവൻ	E O = long ഏ ഓ, L = ള, N = ണ, t = റ്റ, zh = ഴ; at a word's end n r l = chillu, m = ം
हिन्दी / मराठी	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	A I U = long vowels, T D = ट ड, t d = त द, x = क्ष, M = ं
தமிழ்	`vaNakkam`, `thamizh`, `nanRi`	வணக்கம், தமிழ், நன்றி	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க, nj = ஞ்ச
ગુજરાતી	`kem chho`	કેમ છો	The same rules as Hindi
ਪੰਜਾਬੀ	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	A doubled letter = ੱ, n m before a letter = ੰ
বাংলা	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = no sign, O = ো, ng = ং

Needs a NOR model (4T, 8T, 16T…): the language fonts are on the NOR. When the host reads the box (readText) it gets the English letters that were typed.

10

From a host MCU (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: a name for every widget and page (W_LEVEL, PAGE_SETTINGS…). Add it to the host program.
Write to project folder…: the firmware and the host header together.
NOR data file: only for a chip programmer.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Called when the operator changes the level with UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // until the display is ready (up to 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // show the sensor value
  disp.loop();                           // messages from the display
  delay(200);
}

Function	What it does
setValue(id, v)	Value of a number, bar, LED, switch…
setText(id, "…")	Changeable text (UTF-8 for Live text)
page(PAGE_…)	Change page
show(id) / hide(id)	Show / hide a widget
setColor(id, c) / setBackground(id, c)	Colour (RGB565)
getValue(id) / readText(id, buf, n)	Read a value / text from the display
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	A value changed, a board button, the page changed, the display restarted
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (with a PLC)

Click a page in the Pages list, then Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: the same in the PLC.
📋 Register table (CSV): a list of every register; open it in Excel for the PLC programmer.
Set the Device panel's baud to the Modbus baud and Flash.

Select a widget and its registers show under its Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table in red boxes

Register	Address	Meaning
Holding (4x)	0 … N-1	Widget value (its place in the widget list). Writing shows it on the display.
Holding	1000	Page; write a page ID to open that page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	Show (1) / hide (0)
Discrete input (1x)	0 … N-1	Button pressed (cleared when read)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: pressed / held
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16. Values are signed 16-bit. Adding or removing widgets changes the addresses; give the PLC the new CSV.

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	The PLC's (or USB-RS485's) A / B

Flashing needs the USB-serial (TTL) cable. Do not wire the USB-serial TXD and the MAX485 RO straight to RC7 together: use a jumper, or a 1 kΩ resistor in TXD and a 10 kΩ pull-up on RB4.

Testing from the PC without a PLC

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in, under Storage · whole project:

MCU flash: English fonts, small pictures. The Lite model.
SPI NOR flash: large pictures, animations, other languages. The 4 / 8 / 16 models (set by itself when you pick the Board model).

The font library is already on the NOR from the factory. Only the design's pictures are sent when you Flash.

13

Widget list, Problems

Widgets on this page dialog — **☰ Widgets**: every widget on this page. Click a name to select it. To select one underneath, untick the one on top.

Problems: No problems. Ready to export. — **Problems**: with an error it will not Flash. Click it to select that widget.

14

Board, pins

Part	PIC pin	Note
Host UART TX / RX	RC6 / RC7	115200 8N1 (for Modbus: the baud set in the Editor)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = drawing. For Modbus: RS-485 DE/RE.
INT	RC0	LOW = a message for the host (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (to GND) or TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	On models that have them
Status LED	RB5	Blinks every 0.5 s while running

Display settings: Tutorial step 3. Flash after every change.

15

Self-test

Once connected, 🔧 Self-test in the Device panel. It works whatever design is flashed.

Colours: red, green, blue, white, black and grey stripes, with a yellow square at the top left. If the square is in another corner, fix Orientation / Mirror. START or a tap: next.
Buttons, touch: press all four buttons; each box turns green. With touch, a dot. If a button does not work, START twice.
Parts: NOR, font library, EEPROM: PASS / FAIL. Buzzer and backlight test. START: back to the normal screen.

16

Troubleshooting

Problem	What to do
The display is all white	Check the display's DC, CS, RST wires and the 3.3 V supply.
Mirrored / upside down	Display entry, Mirror, Orientation (Tutorial step 3). The self-test's yellow square must be top left.
Wrong colours	Red shows blue: Swap red/blue. White shows black: Invert colours.
Buttons always pressed	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223".
Touch lands in the wrong place	Touch calibration → Calibrate…: touch the four + marks on the display one by one.
Flash fails / port busy	Disconnect, then Flash. "Waiting for bootloader": power the board off and on.
Will not connect	TX / RX swapped? (adapter TXD → RC7). Baud 115200 (for a Modbus design, the Modbus baud).
Text shows "????"	Fix the widget's Language. Live text in other languages needs a NOR model.
No Modbus answer	Same address, baud, parity? Swap A / B. After a page change, PLC timeout 3 s.
An error in Problems	Click the error and fix that widget. With an error it will not Flash.

PixPIO 2.8" smart display · ഉപയോക്തൃ മാനുവൽ

PixPIO ഉപയോക്തൃ മാനുവൽ

Screen design ചെയ്യുക, ഒരു click-ൽ display-ലേക്ക് അയക്കുക. Arduino, PIC, STM32 പോലുള്ള ഏത് microcontroller-ൽ നിന്നും, PLC-യിൽ നിന്ന് Modbus വഴിയും, PC-ൽ നിന്ന് നേരിട്ടും ഉപയോഗിക്കാം. Host ഇല്ലാതെ power മാത്രം കൊണ്ടും പ്രവർത്തിപ്പിക്കാം.

Screenshots-ലെ ചുവന്ന കള്ളികൾ ആ step-ൽ ഉപയോഗിക്കേണ്ട settings / buttons ആണ്.

ഈ manual-ലെ tutorial-ന് സമാനമായ ഒരു design display-ൽ: host ഇല്ലാതെ, Actions മാത്രം.

1

PixPIO എന്താണ്

PixPIO ഒരു 2.8" (320×240) colour display board ആണ്, സ്വന്തം processor (PIC18F27Q84) സഹിതം. Screens, buttons, bars, gauges, ചിത്രങ്ങൾ എല്ലാം PC-യിലെ PixPIO Editor-ൽ design ചെയ്യുന്നു. Display അവ സ്വയം വരയ്ക്കുന്നു. Host (MCU അല്ലെങ്കിൽ PLC) "level = 80" പോലുള്ള ചെറിയ സന്ദേശങ്ങൾ മാത്രം അയച്ചാൽ മതി.

LiteNOR ഇല്ല, touch ഇല്ല. English fonts.

4 / 4T4 MB NOR (എല്ലാ fonts, ഭാഷകൾ). T = touch.

8 / 8T8 MB NOR. കൂടുതൽ ചിത്രങ്ങൾ, animation.

16 / 16T16 MB NOR. വലിയ ചിത്രങ്ങൾ, പല ഭാഷകൾ.

Board-ൽ 4 buttons: MENU UP DOWN START (push buttons അല്ലെങ്കിൽ TTP223 touch pads). Brightness control-ഉം buzzer-ഉം ഉള്ള models-ഉം ഉണ്ട്.

എന്തുകൊണ്ട് PixPIO

Live editingUSB ഘടിപ്പിക്കുക: Editor-ലെ ഓരോ മാറ്റവും display-ൽ ഉടൻ. SD card വേണ്ട, നീണ്ട upload ഇല്ല.

30 widgets തയ്യാർGauge, chart, keyboard, QR code, animation: drag ചെയ്ത് ഇടുക, കഴിഞ്ഞു.

ഏത് host-ഉംUART, I2C അല്ലെങ്കിൽ SPI. PIC, Arduino, ESP32, STM32-ൽ tested. Host ഇല്ലാതെയും.

നിങ്ങളുടെ ഭാഷമലയാളം, ഹിന്ദി, തമിഴ്… screen-ൽ, Manglish typing-ഓടെ.

Free toolsPixPIO Editor-ഉം VS Code-നുള്ള PICPIO-യും free ആണ്.

2

Install ചെയ്യൽ

Visual Studio Code install ചെയ്യുക (Windows, free).
VS Code-ൽ PICPIO extension: Extensions → "…" → Install from VSIX… → കൂടെ കിട്ടിയ picpio-x.y.z.vsix.
VS Code വീണ്ടും തുറക്കുക. PICPIO menu-വിൽ (അല്ലെങ്കിൽ Ctrl+Shift+P → "PixPIO") PixPIO. Browser-ൽ Editor തുറക്കും.
USB-serial cable (CH340) PC-യിൽ ഘടിപ്പിക്കുക. Device Manager → Ports-ൽ USB-SERIAL CH340 (COM3) പോലെ കാണണം.

Editor-ന് internet വേണ്ട. Display-യുമായുള്ള ബന്ധം VS Code ഓടിക്കുന്ന "bridge" വഴി. Editor ഉപയോഗിക്കുന്ന സമയം മുഴുവൻ VS Code തുറന്നുവെക്കുക.

3

Editor പരിചയം

ആദ്യം തുറക്കുമ്പോൾ Editor-ൽ ഒരു Example project ഉണ്ടാകും (toolbar-ലെ Example അമർത്തിയാൽ എപ്പോഴും തിരികെ കിട്ടും; 8 pages, മിക്ക widgets-ഉം).

ഭാഗം	സ്ഥാനം	ജോലി
Toolbar	മുകളിൽ	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	ഇടത് മുകളിൽ	Screens. + പുതിയ page, ⧉ copy, − നീക്കം. "start" = ആദ്യം കാണിക്കുന്നത്.
Add widget	ഇടത്	Click ചെയ്താൽ ആ widget screen-ൽ ചേരും.
Preview	നടുവിൽ	Display-ൽ കാണുന്നതുപോലെ. Drag ചെയ്ത് നീക്കാം, നീല ചതുരങ്ങൾ വലിച്ച് വലിപ്പം മാറ്റാം.
Properties	വലത്	തിരഞ്ഞെടുത്ത widget-ന്റെ settings. Pages list-ൽ page click ചെയ്താൽ page-ന്റെയും മുഴുവൻ project-ന്റെയും settings. ? = ഓരോ setting-ന്റെയും വിശദീകരണം.
Problems	താഴെ ഇടത്	Design-ലെ പിഴവുകൾ, മുന്നറിയിപ്പുകൾ.
Device	താഴെ വലത്	COM port, Connect, Mirror, Storage, Self-test, Touch, PC-ൽ നിന്നുള്ള commands (അദ്ധ്യായം 6).

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo.

4

Tutorial: Water Tank (ആദ്യം മുതൽ)

ഒരു ടാങ്കിന്റെ level കാണിക്കുന്ന 2-page screen. UP / DOWN കൊണ്ട് level മാറും, bar ഒപ്പം മാറും. 100 ആയാൽ "TANK FULL", 0 ആയാൽ "TANK EMPTY". MENU settings page തുറക്കും. Host ആവശ്യമില്ല. ഏകദേശം 15 മിനിറ്റ്.

STEP 1

പുതിയ project

Toolbar-ൽ New. ശൂന്യമായ ഒരു screen (page "main") കിട്ടും.

STEP 2

Board model

വലതുവശത്ത് Screen · whole project-ൽ Board model: board-ന്റെ label-ൽ എഴുതിയ model (ഇവിടെ PixPIO 4T).

ഇത് display, touch, buttons, brightness, buzzer, NOR എന്നിവ തനിയെ set ചെയ്യും. Editor ഇത് ഓർമ്മിക്കും.

STEP 3

Display (ആവശ്യമെങ്കിൽ മാത്രം)

ചിത്രം തിരിഞ്ഞോ നിറം തെറ്റിയോ വന്നാൽ മാത്രം:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation ചുവന്ന കള്ളികളിൽ

STEP 4

Page-ന് പേര്

വലതുവശത്ത് മുകളിൽ Name: home. Host code-ൽ ഇത് PAGE_HOME.

STEP 5

രണ്ടാമത്തെ page

Pages-ന്റെ +. പുതിയ page-ന്റെ Name: settings. എന്നിട്ട് list-ൽ home click ചെയ്ത് തിരിച്ചുവരിക.

Pages: home start, settings; + ചുവന്ന കള്ളിയിൽ

STEP 6

മുകളിലെ bar (Rectangle)

Add widget-ൽ Rectangle. x, y, width, height: 0, 0, 320, 30 (അല്ലെങ്കിൽ mouse കൊണ്ട് വലിക്കുക). Colours-ൽ നിറം.

Rectangle ചേർത്തു; Rectangle button, x y width height ചുവന്ന കള്ളികളിൽ

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, സ്ഥാനം 8, 7, 304, 16. Font, Size, Align Text ഭാഗത്ത്.

Label: Name title, Text WATER TANK ചുവന്ന കള്ളികളിൽ

STEP 8

Level (Number)

Number: Name level, സ്ഥാനം 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power പോയാലും ഓർമ്മിക്കും

Number: Value, Unit, Min, Max, Remember value ചുവന്ന കള്ളികളിൽ

STEP 9

Board buttons കൊണ്ട് മാറ്റാൻ

Keys (buttons): Key + UP, Key − DOWN, Step 5. അമർത്തിപ്പിടിച്ചാൽ തുടർച്ചയായി മാറും.

Key + UP, Key − DOWN, Step 5 ചുവന്ന കള്ളികളിൽ

STEP 10

Level bar

Bar: Name level_bar, സ്ഥാനം 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, പച്ച segment bar — ഇതുവരെ: title, number, bar.

STEP 11

മറഞ്ഞിരിക്കുന്ന സന്ദേശങ്ങൾ

Label: Name full_msg, Text TANK FULL, സ്ഥാനം 10, 120, 300, 20, Hidden ✓.

ഒരെണ്ണം കൂടി അതേ സ്ഥാനത്ത്: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Hidden widgets preview-ൽ കുത്തുവരയായി കാണും; display-ൽ തുടക്കത്തിൽ കാണില്ല.

Label: Text TANK FULL, Hidden ചുവന്ന കള്ളികളിൽ

STEP 12

Actions: number-ന് 5 actions

Preview-ൽ level click ചെയ്യുക. Actions (no code) → + Add action 5 തവണ:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

ഒരു വരി നീക്കാൻ ✕.

STEP 13

Settings button

Button: Name btn_settings, സ്ഥാനം 10, 200, 145, 34, Caption MENU: Settings.

STEP 14

Button അമർത്തിയാൽ page മാറാൻ

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: board-ലെ MENU-ഉം ഇതുതന്നെ ചെയ്യും.

STEP 15

Settings page: Back button, QR

Pages-ൽ settings. Step 6, 7 പോലെ Rectangle-ഉം "SETTINGS" Label-ഉം.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = നിങ്ങളുടെ website, Border shape = Rounded.

QR: Text / link, Border shape ചുവന്ന കള്ളികളിൽ

STEP 16

Save

Save: .pixpio file. "Unsaved changes" ഉള്ളിടത്തോളം save ആയിട്ടില്ല. ഇനി board ഘടിപ്പിച്ച് Flash (അദ്ധ്യായം 5).

5

Board ഘടിപ്പിക്കൽ, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Board-ന് സ്വന്തം supply ഇല്ലെങ്കിൽ മാത്രം

STEP 2

Connect

Device-ൽ COM port, baud 115200, Connect. Dot പച്ചയായാൽ ബന്ധിപ്പിച്ചു. Port ഇല്ലെങ്കിൽ ↻.

STEP 3

⚡ Flash to display

Toolbar-ൽ ⚡ Flash to display.
Design firmware ആക്കി cable വഴി അയക്കും; ഒരു window-ൽ progress. ആദ്യ തവണ 1–2 മിനിറ്റ്.
"UPLOAD SUCCESSFUL" വന്നാൽ display പുതിയ screen-ഓടെ തുടങ്ങും.
ചിത്രങ്ങളോ മറ്റ് ഭാഷകളോ ഉണ്ടെങ്കിൽ (NOR models) അവയും ഇതേ cable വഴി NOR-ലേക്ക്.

SD card ആവശ്യമില്ല. ഓരോ മാറ്റത്തിനും: Editor-ൽ മാറ്റുക, Flash.

Tutorial design display-ൽ: UP / DOWN കൊണ്ട് level മാറ്റുക, 100 ആക്കി "TANK FULL" കാണുക, MENU അമർത്തി settings page.

6

PC-ൽ നിന്ന് display നിയന്ത്രിക്കൽ

Connect ചെയ്ത ശേഷം, host MCU ഇല്ലാതെ തന്നെ PC-ൽ നിന്ന് ഓരോ widget-നെയും പരീക്ഷിക്കാം. ഇതിന് മൂന്ന് വഴികൾ:

1. Quick commands (Device panel)

Page + Show: ആ page display-ൽ തുറക്കും.
Widget തിരഞ്ഞെടുക്കുക, Value എഴുതി Set value: number, bar, LED, switch… മാറും.
text + Set text: Changeable text മാറും.
Hide / Show: widget മറയ്ക്കുക / കാണിക്കുക.
Key + Press: board button അമർത്തിയതുപോലെ (MENU, UP…).

Device quick commands: Page Show, Widget, Value Set value, text Set text, Hide, Show, Key Press ചുവന്ന കള്ളികളിൽ

2. Commands for this widget

ഏത് widget തിരഞ്ഞെടുത്താലും properties-ന്റെ ഏറ്റവും അടിയിൽ Commands for this widget ഉണ്ട്. ഓരോ command-നും:

Send: PC-ൽ നിന്ന് ഉടൻ display-ലേക്ക് അയക്കും (Connect ചെയ്തിരിക്കണം).
Copy: host program-ൽ ഒട്ടിക്കാനുള്ള code (pd_set_value(&disp, W_NUMBER, 253);).
പച്ച നിറത്തിലുള്ള bytes: UART / I2C / SPI വഴി നേരിട്ട് അയക്കേണ്ട frame (മറ്റ് ഭാഷകളിൽ program എഴുതുമ്പോൾ).

Settings മാറ്റുമ്പോൾ ഈ commands-ഉം ഒപ്പം മാറും. ഓരോ widget-ന്റെയും commands അദ്ധ്യായം 7-ൽ.

Number widget commands: Set value, Main colour, Background, Hide, Show, Read value; ഓരോന്നിനും Copy, Send

3. Mirror, Touch

Mirror ✓: display-ൽ നടക്കുന്നത് (button അമർത്തൽ, value മാറ്റം) preview-ലും തത്സമയം കാണാം.
☝ Touch: preview-ൽ mouse കൊണ്ട് click ചെയ്താൽ display-ൽ വിരൽ കൊണ്ട് തൊട്ടതുപോലെ (👆 cursor, മഞ്ഞ dot).
🔧 Self-test, ⬆ Storage: അദ്ധ്യായം 15, 12.

Mirror, Storage, Self-test, Touch ചുവന്ന കള്ളികളിൽ

7

ഓരോ widget-ഉം

ഓരോ widget-നും: എന്തിന്, എങ്ങനെ ഉപയോഗിക്കാം, value എന്താണ്, host code. മൂന്ന് ചിത്രങ്ങൾ: Display-ൽ (New project-ൽ ആ widget ചേർത്തപ്പോൾ), Settings, Commands (PC-ൽ നിന്ന് Send / code Copy). Add widget list-ൽ ഇതേ പേരുകൾ കാണാം.

Rectangle

Header bars, background boxes, കാർഡുകൾ. മറ്റ് widgets-ന് പിന്നിൽ വെക്കാം.

എങ്ങനെ ഉപയോഗിക്കാം

Colours-ൽ Background (fill), Text / border നിറം.
Corner radius: വളഞ്ഞ മൂലകൾ. Border: അരിക്.
Widget list-ൽ താഴെയാണെങ്കിൽ മറ്റ് widgets-ന് പിന്നിൽ വരും (↑ ↓ buttons കൊണ്ട് ക്രമം മാറ്റാം).

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // ചുവപ്പ്
disp.hide(W_HEADER);

Rectangle: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Label

നിശ്ചിത എഴുത്ത്: titles, captions, units.

എങ്ങനെ ഉപയോഗിക്കാം

Text-ൽ എഴുതുക. Font, Size, Align.
Language: മലയാളം, ഹിന്ദി… (അദ്ധ്യായം 8).
Changeable ✓ ആക്കിയാൽ host-ന് text മാറ്റാം.
No background: അടിയിലുള്ളത് കാണാം.

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ വേണം

Label: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Number

സംഖ്യ കാണിക്കാൻ: temperature, speed, count, setpoint.

എങ്ങനെ ഉപയോഗിക്കാം

Value (തുടക്കം), Min, Max.
Decimals 1 ആക്കിയാൽ 253 → 25.3. Unit: °C, %, V.
Keys: UP / DOWN കൊണ്ട് മാറ്റാം, Step.
Remember value: power പോയാലും ഓർമ്മിക്കും.

Value

സംഖ്യ (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Text

Host അയക്കുന്ന ഒരു വരി എഴുത്ത്: status, പേര്, സന്ദേശം.

എങ്ങനെ ഉപയോഗിക്കാം

Max length: എത്ര അക്ഷരം വരെ.
Font, Size, Align, നിറങ്ങൾ.
Language Live text ആക്കിയാൽ മലയാളം പോലുള്ളവയും (NOR model).

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Bar

Level, progress, tank, battery.

എങ്ങനെ ഉപയോഗിക്കാം

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Touch ഉള്ള models-ൽ വിരൽ കൊണ്ട് വലിക്കാം (slider).
Controls brightness: ഈ bar backlight നിയന്ത്രിക്കും.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Button

അമർത്താനുള്ള button. Page മാറ്റം, start / stop.

എങ്ങനെ ഉപയോഗിക്കാം

Caption: എഴുത്ത്. Style: normal, outline, pill, checkbox.
Mode: push (അമർത്തുമ്പോൾ മാത്രം) / toggle (on-off).
Key: board button (MENU…) ഇതിനെ അമർത്തും.
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

LED

Status lamp: ON / OFF / മിന്നുന്നു.

എങ്ങനെ ഉപയോഗിക്കാം

State: Off, On, Blink. Blink every: ms.
Colours: Off നിറം, On നിറം.

Value

0 off, 1 on, 2 blink

Host code (Arduino)

disp.setValue(W_LED, 2);   // മിന്നും

LED: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Arc / gauge

വൃത്താകൃതിയിലുള്ള meter: speed, power, volume.

എങ്ങനെ ഉപയോഗിക്കാം

Start angle, Sweep (എത്ര ഡിഗ്രി), Thickness.
Show value: നടുവിൽ സംഖ്യ.
Knob ✓: touch കൊണ്ട് തിരിക്കാം.
Keys + / −.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Switch

ON / OFF slider: fan, light, mode.

എങ്ങനെ ഉപയോഗിക്കാം

Switched on: തുടക്കത്തിലെ നില.
Key: ഒരു board button അമർത്തിയാൽ മാറും. Touch-ലും മാറും.
Remember value.

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator മാറ്റിയാൽ: onChange(W_SWITCH, 0/1)

Switch: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Select

Drop-down: പല options-ൽ നിന്ന് ഒന്ന്.

എങ്ങനെ ഉപയോഗിക്കാം

Options: Low|Medium|High (| കൊണ്ട് വേർതിരിക്കുക).
Selected: തുടക്കത്തിലെ option.
Keys: open / OK, up, down. Touch-ൽ list തുറക്കും.

Value

0, 1, 2… (option-ന്റെ സ്ഥാനം)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Spinner

"ജോലി നടക്കുന്നു" animation.

എങ്ങനെ ഉപയോഗിക്കാം

Style: dots, comet, arc…
Spinning, Speed. 0 = blank: നിൽക്കുമ്പോൾ മറയും.

Value

1 കറങ്ങുന്നു, 0 നിൽക്കുന്നു

Host code (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Wi-Fi, battery, bell പോലുള്ള ചിഹ്നങ്ങൾ.

എങ്ങനെ ഉപയോഗിക്കാം

Symbol: icon തിരഞ്ഞെടുക്കുക. Icon size, Scale.
Host switches icons: host-ന് icon മാറ്റാം.

Value

Icon നമ്പർ (0 = ഒന്നുമില്ല)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

പല buttons, ഒന്ന് മാത്രം തിരഞ്ഞെടുക്കാം (mode, speed level).

എങ്ങനെ ഉപയോഗിക്കാം

Options: Low|Mid|High. Columns.
Style: buttons അല്ലെങ്കിൽ radio.

Value

തിരഞ്ഞെടുത്ത button-ന്റെ സ്ഥാനം (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Switch array

പല ON / OFF switches ഒരുമിച്ച് (zones, relays).

എങ്ങനെ ഉപയോഗിക്കാം

Options: ഓരോ switch-ന്റെയും പേര്. Columns.
Style: switches അല്ലെങ്കിൽ checkboxes.

Value

Bits: bit 0 = ആദ്യ switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Keypad

നമ്പർ keys: PIN, setpoint.

എങ്ങനെ ഉപയോഗിക്കാം

Keys: 1|2|3|…|OK. Columns.
Types into: ഒരു Input box-ലേക്ക് എഴുതും.
Keys move / press: board buttons കൊണ്ടും ഉപയോഗിക്കാം.

Value

അമർത്തിയ key-ന്റെ സ്ഥാനം

Host code (Arduino)

disp.onChange(myChange);   // ഓരോ key അമർത്തലും

Keypad: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Keyboard

Screen-ലെ QWERTY keyboard: പേര്, Wi-Fi password.

എങ്ങനെ ഉപയോഗിക്കാം

Types into: ഒരു Input box.
Language: മലയാളം, ഹിന്ദി, തമിഴ്… English അക്ഷരങ്ങൾ type ചെയ്താൽ ആ ഭാഷയിൽ കാണിക്കും (അദ്ധ്യായം 9).
Input box-ൽ തൊട്ടാൽ keyboard തുറക്കാനും സൗകര്യമുണ്ട് (Keyboard on tap).

Value

അക്ഷരത്തിന്റെ code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Arrow

ദിശ: flow, motor direction.

എങ്ങനെ ഉപയോഗിക്കാം

Style: arrow, double, triangle. Shaft thickness.

Value

0 വലത്, 1 ഇടത്, 2 മുകളിൽ, 3 താഴെ

Host code (Arduino)

disp.setValue(W_ARROW, 2);   // മുകളിലേക്ക്

Image / logo

Logo, ചിത്രങ്ങൾ.

എങ്ങനെ ഉപയോഗിക്കാം

Change image…: PNG, JPG, SVG. Editor display-ന് യോജിച്ച വലിപ്പമാക്കും.
Colours: Full colour അല്ലെങ്കിൽ Two colours (logo, വളരെ കുറഞ്ഞ flash).
Fit, Border shape (Rounded, Circle…).

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display-ൽ

Settings

Commands: PC-ൽ നിന്ന് Send, code Copy

Chart

Trend: temperature history.

എങ്ങനെ ഉപയോഗിക്കാം

Style: line, thick, bars. Points, Min, Max, Grid lines.

Value

ഓരോ setValue-ഉം ഒരു പുതിയ point വലതുവശത്ത് (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // ഓരോ സെക്കൻഡിലും

Chart: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Needle gauge

സൂചിയുള്ള meter: pressure, RPM.

എങ്ങനെ ഉപയോഗിക്കാം

Min, Max, Ticks, Scale numbers.
Warning from %, Danger from %: മഞ്ഞ, ചുവപ്പ് zones.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_GAUGE, 75);

Needle gauge: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Input box

Keypad / keyboard എഴുതുന്ന box.

എങ്ങനെ ഉപയോഗിക്കാം

Placeholder, Max length.
Kind: text, number, password (* ആയി കാണിക്കും), Indian language (English-ൽ type ചെയ്താൽ മലയാളം, ഹിന്ദി, തമിഴ്…; അദ്ധ്യായം 9).

Value

Number kind: OK അമർത്തുമ്പോൾ സംഖ്യ

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Message

പല വരി എഴുത്ത്, വാക്കുകൾ തനിയെ അടുത്ത വരിയിലേക്ക്.

എങ്ങനെ ഉപയോഗിക്കാം

Message: | = പുതിയ വരി. Line gap.
Language, Live text (അദ്ധ്യായം 8).
Changeable: host-ന് മാറ്റാം.

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter മാറ്റുക|Service: 3 ദിവസം");

Message: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Animation (GIF)

GIF animation: logo, loading, മുന്നറിയിപ്പ്.

എങ്ങനെ ഉപയോഗിക്കാം

Choose GIF…: ഒരു GIF file. Fit.
Playing: loop, once, stopped.
വലിയ / ധാരാളം നിറമുള്ള GIF-ന് NOR model നല്ലത്.

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // ഒരു തവണ

Roller (picker)

Scroll ചെയ്യുന്ന picker: programs, modes.

എങ്ങനെ ഉപയോഗിക്കാം

Options: Off|Low|Medium|High. Rows shown: 3, 5, 7.
Keys next / previous. Touch-ൽ മുകളിലോ താഴെയോ ഉള്ള row തൊടുക.
Remember value.

Value

തിരഞ്ഞെടുത്ത row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

Spinbox (− 12 +)

− സംഖ്യ + : setpoint, timer.

എങ്ങനെ ഉപയോഗിക്കാം

Min, Max, Step, Unit.
Touch-ൽ − / + തൊടുക, അല്ലെങ്കിൽ Keys + / −.
Remember value.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_SPINBOX, 60);

Spinbox (− 12 +): Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

QR code

ഫോൺ scan ചെയ്യാൻ: website, Wi-Fi, phone, manual link.

എങ്ങനെ ഉപയോഗിക്കാം

Text / link: https://…, WIFI:T:WPA;S:പേര്;P:password;;, tel:….
Border shape, No background.
വലിയ box = എളുപ്പം scan.

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC-ൽ നിന്ന് Send, code Copy — Commands: PC-ൽ നിന്ന് Send, code Copy

8

Actions: മുഴുവൻ list

Widget-ൽ എന്തെങ്കിലും സംഭവിക്കുമ്പോൾ display സ്വയം ചെയ്യുന്നവ. Host ആവശ്യമില്ല. ഉദാഹരണങ്ങൾ: Tutorial step 12, 14.

When (എപ്പോൾ)	ഏത് widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	അതേ widgets

Do (എന്ത്)	Target / value
Go to page	ഒരു page
Set value of	widget, value
Add to / Subtract from	widget, എത്ര
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer ഉള്ള models
Brightness (%)	brightness control ഉള്ള models

9

ഭാഷകൾ

ഒരു page-ൽ Message ഇടുക (Label, Text, Button-ലും ഇതുതന്നെ).

Language: മലയാളം (ഹിന്ദി, മറാഠി, തമിഴ്, ഗുജറാത്തി, പഞ്ചാബി, ബംഗാളി, European, Русский, Ελληνικά).
Phrases-ൽ വാക്യം (പലതുണ്ടെങ്കിൽ |).
Live text ✓: host-ന് ഏത് വാക്യവും UTF-8 ആയി അയക്കാം; display ചില്ലുകളും കൂട്ടക്ഷരങ്ങളും ശരിയായി വരയ്ക്കും. Tick ചെയ്താൽ field "Message" ആയും "Changeable" ✓ ആയും മാറും.

English അല്ലാത്ത live text-ന് NOR model (4, 8, 16) വേണം. Fonts factory-യിൽ തന്നെ NOR-ൽ ഉണ്ട്.

Language മലയാളം, Message, Changeable ചുവന്ന കള്ളികളിൽ

Preview-ൽ മലയാളം — മലയാളം live text preview-ൽ.

Keyboard-ൽ മലയാളം, ഹിന്ദി, തമിഴ്… type ചെയ്യൽ

Screen-ലെ keyboard-ൽ English അക്ഷരങ്ങൾ അമർത്തിയാൽ box-ൽ അത് മലയാളത്തിൽ (അല്ലെങ്കിൽ ഹിന്ദി, മറാഠി, തമിഴ്, ഗുജറാത്തി, പഞ്ചാബി, ബംഗാളി) കാണിക്കും: namaskaaram → നമസ്കാരം. Mobile-ലെ Manglish typing പോലെ.

Keyboard ചേർക്കുക.
Language: ഭാഷ തിരഞ്ഞെടുക്കുക.

Keyboard ഇതുവരെ ഒരു Input box-ലേക്കും എഴുതുന്നില്ലെങ്കിൽ ("Types into" = None), Language തിരഞ്ഞെടുക്കുമ്പോൾ keyboard-ന് മുകളിൽ ഒരു Input box തനിയെ വരും, keyboard അതിലേക്ക് എഴുതും.

Keyboard settings: Language ചുവന്ന കള്ളിയിൽ

Keyboard-ന് മുകളിൽ തനിയെ വന്ന Input box — Malayalam തിരഞ്ഞെടുത്തപ്പോൾ: keyboard-ന് മുകളിൽ Input box, "Types into" = ആ box.

ഭാഷ ആ Input box-ന്റെ setting ആണ്. Box select ചെയ്താലും മാറ്റാം:

Kind: Indian language (typed in English).
Language: ഭാഷ.
Letter size: 16, 20, 24 px.
താഴെ ആ ഭാഷയുടെ typing rules കാണാം.

Max length പരമാവധി 24 English അക്ഷരം. "Show typed text" വേണ്ടത് keyboard box-നെ മറയ്ക്കുമ്പോൾ മാത്രം (pop-up keyboard). Box keyboard-ന് മുകളിൽ കാണുന്നുണ്ടെങ്കിൽ tick വേണ്ട; അല്ലെങ്കിൽ ഒരേ എഴുത്ത് രണ്ട് box-ൽ കാണും.

Input box settings: Kind, Language, Letter size ചുവന്ന കള്ളികളിൽ

ഏഴ് ഭാഷകളിൽ type ചെയ്ത box-കൾ — Display-ൽ ഇങ്ങനെ: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

ഭാഷ	Type ചെയ്യുന്നത്	കാണുന്നത്	ഓർക്കാൻ
മലയാളം	`namaskaaram`, `kEraLam`, `avan`	നമസ്കാരം, കേരളം, അവൻ	E O = നീണ്ട ഏ ഓ, L = ള, N = ണ, t = റ്റ, zh = ഴ; വാക്കിന്റെ അവസാനം n r l = ചില്ല്, m = ം
हिन्दी / मराठी	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	A I U = നീണ്ട സ്വരം, T D = ट ड, t d = त द, x = क्ष, M = ं
தமிழ்	`vaNakkam`, `thamizh`, `nanRi`	வணக்கம், தமிழ், நன்றி	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க, nj = ஞ்ச
ગુજરાતી	`kem chho`	કેમ છો	ഹിന്ദിയുടെ അതേ rules
ਪੰਜਾਬੀ	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	ഇരട്ട അക്ഷരം = ੱ, n m പിന്നെ അക്ഷരം = ੰ
বাংলা	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = ചിഹ്നം ഇല്ല, O = ো, ng = ং

NOR model (4T, 8T, 16T…) വേണം: ഭാഷാ fonts NOR-ൽ ആണ്. Host വായിക്കുമ്പോൾ (readText) കിട്ടുന്നത് type ചെയ്ത English അക്ഷരങ്ങൾ ആണ്.

10

Host MCU-ൽ നിന്ന് (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: ഓരോ widget-ന്റെയും page-ന്റെയും പേര് (W_LEVEL, PAGE_SETTINGS…). Host program-ൽ ചേർക്കുക.
Write to project folder…: firmware-ഉം host header-ഉം ഒരുമിച്ച്.
NOR data file: chip programmer-ന് മാത്രം.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator UP / DOWN കൊണ്ട് level മാറ്റിയാൽ ഇവിടെ അറിയും
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display തയ്യാറാകുന്നതുവരെ (5 s വരെ)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value കാണിക്കുക
  disp.loop();                           // display-ൽ നിന്നുള്ള സന്ദേശങ്ങൾ
  delay(200);
}

Function	ജോലി
setValue(id, v)	Number, bar, LED, switch… value
setText(id, "…")	Changeable text (Live text-ൽ UTF-8)
page(PAGE_…)	Page മാറ്റുക
show(id) / hide(id)	Widget കാണിക്കുക / മറയ്ക്കുക
setColor(id, c) / setBackground(id, c)	നിറം (RGB565)
getValue(id) / readText(id, buf, n)	Display-ലെ value / text വായിക്കുക
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value മാറി, board button, page മാറി, display restart ആയി
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (PLC-യുമായി)

Pages list-ൽ ഒരു page click ചെയ്ത് Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: PLC-യിലും ഇതുതന്നെ.
📋 Register table (CSV): എല്ലാ registers-ന്റെയും list; Excel-ൽ തുറന്ന് PLC programmer-ന്.
Device panel-ലെ baud Modbus baud ആക്കി Flash.

Widget തിരഞ്ഞെടുത്താൽ Name-ന് താഴെ അതിന്റെ registers: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table ചുവന്ന കള്ളികളിൽ

Register	Address	അർത്ഥം
Holding (4x)	0 … N-1	Widget value (widget list-ലെ സ്ഥാനം). എഴുതിയാൽ display-ൽ.
Holding	1000	Page; page ID എഴുതിയാൽ ആ page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	കാണിക്കുക (1) / മറയ്ക്കുക (0)
Discrete input (1x)	0 … N-1	Button അമർത്തിയോ (വായിച്ചാൽ clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: അമർത്തി / പിടിച്ചിരിക്കുന്നു
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16. Values signed 16-bit. Widgets ചേർക്കുകയോ നീക്കുകയോ ചെയ്താൽ addresses മാറും; പുതിയ CSV PLC-ക്ക് കൊടുക്കുക.

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC-യുടെ (അല്ലെങ്കിൽ USB-RS485-ന്റെ) A / B

Flash ചെയ്യാൻ USB-serial (TTL) cable വേണം. USB-serial TXD-ഉം MAX485 RO-ഉം ഒരുമിച്ച് RC7-ലേക്ക് നേരിട്ട് അരുത്: jumper, അല്ലെങ്കിൽ TXD-ൽ 1 kΩ resistor-ഉം RB4-ൽ 10 kΩ pull-up-ഉം.

PLC ഇല്ലാതെ PC-യിൽ നിന്ന് test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project-ൽ Store in:

MCU flash: English fonts, ചെറിയ ചിത്രങ്ങൾ. Lite model.
SPI NOR flash: വലിയ ചിത്രങ്ങൾ, animation, മറ്റ് ഭാഷകൾ. 4 / 8 / 16 models (Board model തിരഞ്ഞെടുത്താൽ തനിയെ).

NOR-ൽ fonts library factory-യിൽ തന്നെ ഉണ്ട്. Design-ന്റെ ചിത്രങ്ങൾ മാത്രം Flash സമയത്ത് അയക്കും.

13

Widget list, Problems

14

Board, pins

ഭാഗം	PIC pin	കുറിപ്പ്
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus-ൽ Editor-ൽ കൊടുത്ത baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = വരയ്ക്കുന്നു. Modbus-ൽ RS-485 DE/RE.
INT	RC0	LOW = host-ന് സന്ദേശമുണ്ട് (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND-ലേക്ക്) അല്ലെങ്കിൽ TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	ഉള്ള models-ൽ
Status LED	RB5	Run ചെയ്യുമ്പോൾ 0.5 s ഇടവിട്ട് മിന്നും

Display settings: Tutorial step 3. ഓരോ മാറ്റത്തിനും ശേഷം Flash.

15

Self-test

Connect ചെയ്ത ശേഷം Device panel-ൽ 🔧 Self-test. ഏത് design flash ചെയ്തിരുന്നാലും പ്രവർത്തിക്കും.

Colours: ചുവപ്പ്, പച്ച, നീല, വെള്ള, കറുപ്പ്, ചാരം വരകൾ, മുകളിൽ ഇടതുവശത്ത് മഞ്ഞ ചതുരം. ചതുരം മറ്റൊരു മൂലയിലാണെങ്കിൽ Orientation / Mirror ശരിയാക്കുക. START അല്ലെങ്കിൽ tap: അടുത്തത്.
Buttons, touch: നാല് buttons-ഉം അമർത്തുക; ഓരോ box-ഉം പച്ചയാകും. Touch ഉണ്ടെങ്കിൽ dot. ഒരു button പ്രവർത്തിക്കുന്നില്ലെങ്കിൽ START രണ്ടുതവണ.
Parts: NOR, font library, EEPROM: PASS / FAIL. Buzzer, backlight test. START: സാധാരണ screen.

16

പ്രശ്നപരിഹാരം

പ്രശ്നം	ചെയ്യേണ്ടത്
Display മുഴുവൻ വെള്ള	Display-യുടെ DC, CS, RST വയറുകളും 3.3 V supply-ഉം പരിശോധിക്കുക.
കണ്ണാടിയിലെന്ന പോലെ / തലകീഴായി	Display entry, Mirror, Orientation (Tutorial step 3). Self-test-ലെ മഞ്ഞ ചതുരം മുകളിൽ ഇടത്.
നിറങ്ങൾ തെറ്റി	ചുവപ്പ് നീലയായി: Swap red/blue. വെള്ള കറുപ്പായി: Invert colours.
Buttons എപ്പോഴും അമർത്തിയ നിലയിൽ	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223".
Touch തെറ്റായ സ്ഥലത്ത്	Touch calibration → Calibrate…: display-ലെ നാല് + ചിഹ്നങ്ങളിൽ ഓരോന്നായി തൊടുക.
Flash പരാജയം / port busy	Disconnect ചെയ്തിട്ട് Flash. "Waiting for bootloader": board power off / on.
Connect ആകുന്നില്ല	TX / RX തിരിച്ചിട്ടോ (adapter TXD → RC7). Baud 115200 (Modbus design-ൽ Modbus baud).
എഴുത്ത് "????"	Widget-ന്റെ Language ശരിയാക്കുക. English അല്ലാത്ത live text-ന് NOR model.
Modbus മറുപടി ഇല്ല	Address, baud, parity ഒന്നാണോ? A / B swap. Page മാറ്റിയ ശേഷം PLC timeout 3 s.
Problems-ൽ error	Error click ചെയ്ത് ആ widget ശരിയാക്കുക. Error ഉള്ളപ്പോൾ Flash ചെയ്യില്ല.

PixPIO 2.8" smart display · उपयोगकर्ता मैनुअल

PixPIO उपयोगकर्ता मैनुअल

Screen design करें, एक click में display पर भेजें। Arduino, PIC, STM32 जैसे किसी भी microcontroller से, PLC से Modbus द्वारा, या सीधे PC से इस्तेमाल करें। Host के बिना सिर्फ़ power से भी चलता है।

Screenshots में लाल डिब्बे वे settings / buttons हैं जो उस step में इस्तेमाल होते हैं।

इस मैनुअल के tutorial जैसा design display पर: host के बिना, सिर्फ़ Actions।

1

PixPIO क्या है

PixPIO एक 2.8" (320×240) colour display board है, अपने processor (PIC18F27Q84) के साथ। Screens, buttons, bars, gauges, चित्र सब PC पर PixPIO Editor में design होते हैं। Display उन्हें खुद बनाता है। Host (MCU या PLC) को बस "level = 80" जैसे छोटे संदेश भेजने होते हैं।

LiteNOR नहीं, touch नहीं। English fonts।

4 / 4T4 MB NOR (सभी fonts, भाषाएँ)। T = touch।

8 / 8T8 MB NOR। ज़्यादा चित्र, animation।

16 / 16T16 MB NOR। बड़े चित्र, कई भाषाएँ।

Board पर 4 buttons: MENU UP DOWN START (push buttons या TTP223 touch pads)। कुछ models में brightness control और buzzer भी है।

PixPIO क्यों

Live editingUSB लगाइए: Editor का हर बदलाव display पर तुरंत। SD card नहीं, लंबा upload नहीं।

30 तैयार widgetsGauge, chart, keyboard, QR code, animation: drag कीजिए, बस।

कोई भी hostUART, I2C या SPI. PIC, Arduino, ESP32, STM32 पर tested. Host के बिना भी।

आपकी भाषाहिंदी, मलयालम, तमिल… screen पर, phonetic typing के साथ।

Free toolsPixPIO Editor और VS Code के लिए PICPIO free हैं।

2

Install करना

Visual Studio Code install करें (Windows, free)।
VS Code में PICPIO extension: Extensions → "…" → Install from VSIX… → साथ मिली picpio-x.y.z.vsix।
VS Code फिर से खोलें। PICPIO menu में (या Ctrl+Shift+P → "PixPIO") PixPIO। Browser में Editor खुलेगा।
USB-serial cable (CH340) PC में लगाएँ। Device Manager → Ports में USB-SERIAL CH340 (COM3) जैसा दिखना चाहिए।

Editor को internet नहीं चाहिए। Display से संपर्क VS Code द्वारा चलाए गए "bridge" से होता है। Editor इस्तेमाल करते समय VS Code खुला रखें।

3

Editor परिचय

पहली बार खोलने पर Editor में एक Example project होता है (toolbar का Example दबाने पर हमेशा वापस मिलता है; 8 pages, लगभग सभी widgets)।

भाग	जगह	काम
Toolbar	ऊपर	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	ऊपर बाएँ	Screens। + नया page, ⧉ copy, − हटाएँ। "start" = पहले दिखने वाला।
Add widget	बाएँ	Click करने पर वह widget screen पर जुड़ता है।
Preview	बीच में	जैसा display पर दिखेगा। Drag करके हिलाएँ, नीले चौकोर खींचकर आकार बदलें।
Properties	दाएँ	चुने गए widget की settings। Pages list में page click करने पर page और पूरे project की settings। ? = हर setting की व्याख्या।
Problems	नीचे बाएँ	Design की गलतियाँ, चेतावनियाँ।
Device	नीचे दाएँ	COM port, Connect, Mirror, Storage, Self-test, Touch, PC से commands (अध्याय 6)।

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo।

4

Tutorial: Water Tank (शुरू से)

टंकी का level दिखाने वाली 2-page screen। UP / DOWN से level बदलेगा, bar साथ में बदलेगा। 100 होने पर "TANK FULL", 0 होने पर "TANK EMPTY"। MENU settings page खोलेगा। Host की ज़रूरत नहीं। लगभग 15 मिनट।

STEP 1

नया project

Toolbar में New। एक खाली screen (page "main") मिलेगी।

STEP 2

Board model

दाईं ओर Screen · whole project में Board model: board के label पर लिखा model (यहाँ PixPIO 4T)।

यह display, touch, buttons, brightness, buzzer, NOR अपने आप set करता है। Editor इसे याद रखता है।

STEP 3

Display (सिर्फ़ ज़रूरत हो तो)

सिर्फ़ तब, जब चित्र घूमा हुआ हो या रंग गलत हों:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation लाल डिब्बों में

STEP 4

Page का नाम

दाईं ओर ऊपर Name: home। Host code में यह PAGE_HOME है।

STEP 5

दूसरा page

Pages का +। नए page का Name: settings। फिर list में home click करके वापस आएँ।

Pages: home start, settings; + लाल डिब्बे में

STEP 6

ऊपर की bar (Rectangle)

Add widget में Rectangle। x, y, width, height: 0, 0, 320, 30 (या mouse से खींचें)। Colours में रंग।

Rectangle जोड़ा; Rectangle button, x y width height लाल डिब्बों में

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, जगह 8, 7, 304, 16। Font, Size, Align Text भाग में।

Label: Name title, Text WATER TANK लाल डिब्बों में

STEP 8

Level (Number)

Number: Name level, जगह 10, 64, 120, 50।

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power जाने पर भी याद रहेगा

Number: Value, Unit, Min, Max, Remember value लाल डिब्बों में

STEP 9

Board buttons से बदलना

Keys (buttons): Key + UP, Key − DOWN, Step 5। दबाए रखने पर लगातार बदलेगा।

Key + UP, Key − DOWN, Step 5 लाल डिब्बों में

STEP 10

Level bar

Bar: Name level_bar, जगह 140, 64, 170, 50, Min 0, Max 100, Style: Segments।

Preview: WATER TANK, 50%, हरी segment bar — अब तक: title, number, bar।

STEP 11

छिपे हुए संदेश

Label: Name full_msg, Text TANK FULL, जगह 10, 120, 300, 20, Hidden ✓।

उसी जगह एक और: Name empty_msg, Text TANK EMPTY, Hidden ✓।

Hidden widgets preview में बिंदुदार दिखते हैं; display पर शुरू में नहीं दिखते।

Label: Text TANK FULL, Hidden लाल डिब्बों में

STEP 12

Actions: number पर 5 actions

Preview में level click करें। Actions (no code) → + Add action 5 बार:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

एक पंक्ति हटाने के लिए ✕।

STEP 13

Settings button

Button: Name btn_settings, जगह 10, 200, 145, 34, Caption MENU: Settings।

STEP 14

Button दबाने पर page बदलना

+ Add action: Pressed → Go to page → 0x02 · settings। Key: MENU: board का MENU भी यही करेगा।

STEP 15

Settings page: Back button, QR

Pages में settings। Step 6, 7 की तरह Rectangle और "SETTINGS" Label।

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home।

QR code: Text / link = आपकी website, Border shape = Rounded।

QR: Text / link, Border shape लाल डिब्बों में

STEP 16

Save

Save: .pixpio file। जब तक "Unsaved changes" दिखे, save नहीं हुआ। अब board जोड़कर Flash (अध्याय 5)।

5

Board जोड़ना, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	सिर्फ़ तब, जब board की अपनी supply न हो

STEP 2

Connect

Device में COM port, baud 115200, Connect। Dot हरा = जुड़ गया। Port न दिखे तो ↻।

STEP 3

⚡ Flash to display

Toolbar में ⚡ Flash to display।
Design firmware बनकर cable से भेजा जाता है; एक window में progress। पहली बार 1–2 मिनट।
"UPLOAD SUCCESSFUL" आने पर display नई screen के साथ शुरू होता है।
चित्र या दूसरी भाषाएँ हों (NOR models), तो वे भी इसी cable से NOR में जाती हैं।

SD card की ज़रूरत नहीं। हर बदलाव के लिए: Editor में बदलें, Flash।

Tutorial design display पर: UP / DOWN से level बदलें, 100 करके "TANK FULL" देखें, MENU दबाकर settings page।

6

PC से display नियंत्रित करना

Connect करने के बाद host MCU के बिना ही PC से हर widget आज़मा सकते हैं। तीन तरीके:

1. Quick commands (Device panel)

Page + Show: वह page display पर खुलेगा।
Widget चुनें, Value लिखें, Set value: number, bar, LED, switch… बदलेंगे।
text + Set text: Changeable text बदलेगा।
Hide / Show: widget छिपाएँ / दिखाएँ।
Key + Press: जैसे board button (MENU, UP…) दबाया हो।

2. Commands for this widget

कोई भी widget चुनें, properties के सबसे नीचे Commands for this widget है। हर command के लिए:

Send: PC से तुरंत display पर भेजता है (connected होना चाहिए)।
Copy: host program में चिपकाने का code (pd_set_value(&disp, W_NUMBER, 253);)।
हरे bytes: UART / I2C / SPI से सीधे भेजने वाला frame (दूसरी भाषाओं में program लिखते समय)।

Settings बदलने पर commands भी साथ बदलते हैं। हर widget के commands अध्याय 7 में।

Number widget commands; हर एक के लिए Copy, Send

3. Mirror, Touch

Mirror ✓: display पर जो होता है (button दबाना, value बदलना) वह preview में भी तुरंत दिखता है।
☝ Touch: preview पर mouse click = display पर उँगली से छूना (👆 cursor, पीला dot)।
🔧 Self-test, ⬆ Storage: अध्याय 15, 12।

Mirror, Storage, Self-test, Touch लाल डिब्बों में

7

हर widget

हर widget के लिए: किस लिए, कैसे इस्तेमाल करें, value क्या है, host code। तीन चित्र: Display पर (New project में वह widget जोड़ने पर), Settings, Commands (PC से Send / code Copy)। Add widget list में यही नाम हैं।

Rectangle

Header bars, background boxes, cards। दूसरे widgets के पीछे रख सकते हैं।

कैसे इस्तेमाल करें

Colours में Background (fill), Text / border रंग।
Corner radius: गोल कोने। Border: किनारा।
Widget list में नीचे हो तो दूसरे widgets के पीछे आएगा (↑ ↓ buttons से क्रम बदलें)।

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // लाल
disp.hide(W_HEADER);

Rectangle: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Label

स्थिर लिखावट: titles, captions, units।

कैसे इस्तेमाल करें

Text में लिखें। Font, Size, Align।
Language: हिन्दी, मलयालम… (अध्याय 9)।
Changeable ✓ करने पर host text बदल सकता है।
No background: नीचे वाला दिखेगा।

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ चाहिए

Label: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Number

संख्या दिखाने के लिए: temperature, speed, count, setpoint।

कैसे इस्तेमाल करें

Value (शुरुआत), Min, Max।
Decimals 1 करने पर 253 → 25.3। Unit: °C, %, V।
Keys: UP / DOWN से बदलें, Step।
Remember value: power जाने पर भी याद रहेगा।

Value

संख्या (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Text

Host की भेजी एक पंक्ति: status, नाम, संदेश।

कैसे इस्तेमाल करें

Max length: कितने अक्षर तक।
Font, Size, Align, रंग।
Language और Live text से हिन्दी जैसी भाषाएँ भी (NOR model)।

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Bar

Level, progress, tank, battery।

कैसे इस्तेमाल करें

Min, Max, Value।
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery।
Touch वाले models में उँगली से खींच सकते हैं (slider)।
Controls brightness: यह bar backlight नियंत्रित करेगी।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Button

दबाने वाला button: page बदलना, start / stop।

कैसे इस्तेमाल करें

Caption: लिखावट। Style: normal, outline, pill, checkbox।
Mode: push (सिर्फ़ दबाते समय) / toggle (on-off)।
Key: board button (MENU…) भी इसे दबाएगा।
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

LED

Status lamp: ON / OFF / टिमटिमाता।

कैसे इस्तेमाल करें

State: Off, On, Blink। Blink every: ms।
Colours: Off रंग, On रंग।

Value

0 off, 1 on, 2 blink

Host code (Arduino)

disp.setValue(W_LED, 2);   // टिमटिमाएगा

LED: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Arc / gauge

गोल meter: speed, power, volume।

कैसे इस्तेमाल करें

Start angle, Sweep (कितने degree), Thickness।
Show value: बीच में संख्या।
Knob ✓: touch से घुमा सकते हैं।
Keys + / −।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Switch

ON / OFF slider: fan, light, mode।

कैसे इस्तेमाल करें

Switched on: शुरुआत की स्थिति।
Key: board button दबाने पर बदलेगा। Touch से भी।
Remember value।

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator बदले तो: onChange(W_SWITCH, 0/1)

Switch: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Select

Drop-down: कई options में से एक।

कैसे इस्तेमाल करें

Options: Low|Medium|High (| से अलग करें)।
Selected: शुरुआत का option।
Keys: open / OK, up, down। Touch पर list खुलती है।

Value

0, 1, 2… (option की जगह)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Spinner

"काम चल रहा है" animation।

कैसे इस्तेमाल करें

Style: dots, comet, arc…
Spinning, Speed। 0 = blank: रुकने पर छिप जाता है।

Value

1 घूम रहा, 0 रुका

Host code (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Wi-Fi, battery, bell जैसे चिह्न।

कैसे इस्तेमाल करें

Symbol: icon चुनें। Icon size, Scale।
Host switches icons: host icon बदल सकता है।

Value

Icon संख्या (0 = कुछ नहीं)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

कई buttons, सिर्फ़ एक चुना जा सकता है (mode, speed level)।

कैसे इस्तेमाल करें

Options: Low|Mid|High। Columns।
Style: buttons या radio।

Value

चुने गए button की जगह (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Switch array

कई ON / OFF switches एक साथ (zones, relays)।

कैसे इस्तेमाल करें

Options: हर switch का नाम। Columns।
Style: switches या checkboxes।

Value

Bits: bit 0 = पहला switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Keypad

संख्या keys: PIN, setpoint।

कैसे इस्तेमाल करें

Keys: 1|2|3|…|OK। Columns।
Types into: एक Input box में लिखेगा।
Keys move / press: board buttons से भी।

Value

दबाई गई key की जगह

Host code (Arduino)

disp.onChange(myChange);   // हर key दबाने पर

Keypad: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Keyboard

Screen पर QWERTY keyboard: नाम, Wi-Fi password।

कैसे इस्तेमाल करें

Types into: एक Input box।
Language: हिन्दी, मलयालम, तमिल… English अक्षर टाइप करें, उस भाषा में दिखेगा (अध्याय 9)।
Input box छूने पर keyboard खुल सकता है (Keyboard on tap)।

Value

अक्षर का code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Image / logo

Logo, चित्र।

कैसे इस्तेमाल करें

Change image…: PNG, JPG, SVG। Editor display के लिए सही आकार बनाता है।
Colours: Full colour या Two colours (logo, बहुत कम flash)।
Fit, Border shape (Rounded, Circle…)।

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display पर

Settings

Commands: PC से Send, code Copy

Chart

Trend: temperature history।

कैसे इस्तेमाल करें

Style: line, thick, bars। Points, Min, Max, Grid lines।

Value

हर setValue दाईं ओर एक नया point (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // हर सेकंड

Chart: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Input box

Keypad / keyboard जिसमें लिखते हैं।

कैसे इस्तेमाल करें

Placeholder, Max length।
Kind: text, number, password (* दिखेगा), Indian language (English में टाइप करें, हिन्दी, मलयालम, तमिल… में दिखेगा; अध्याय 9)।

Value

Number kind: OK दबाने पर संख्या

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Message

कई पंक्तियाँ; शब्द अपने आप अगली पंक्ति में।

कैसे इस्तेमाल करें

Message: | = नई पंक्ति। Line gap।
Language, Live text (अध्याय 9)।
Changeable: host बदल सकता है।

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter बदलें|Service: 3 दिन");

Message: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

Animation (GIF)

GIF animation: logo, loading, चेतावनी।

कैसे इस्तेमाल करें

Choose GIF…: एक GIF file। Fit।
Playing: loop, once, stopped।
बड़े / बहुत रंगीन GIF के लिए NOR model बेहतर।

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // एक बार

Animation (GIF): Display पर — Display पर

Roller (picker)

Scroll होने वाला picker: programs, modes।

कैसे इस्तेमाल करें

Options: Off|Low|Medium|High। Rows shown: 3, 5, 7।
Keys next / previous। Touch में ऊपर या नीचे की row छुएँ।
Remember value।

Value

चुनी गई row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Display पर — Display पर

Roller (picker): Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

QR code

Phone से scan के लिए: website, Wi-Fi, phone, manual link।

कैसे इस्तेमाल करें

Text / link: https://…, WIFI:T:WPA;S:नाम;P:password;;, tel:…।
Border shape, No background।
बड़ा box = आसान scan।

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC से Send, code Copy — Commands: PC से Send, code Copy

8

Actions: पूरी सूची

Widget में कुछ होने पर display खुद जो करता है। Host की ज़रूरत नहीं। उदाहरण: Tutorial step 12, 14।

When (कब)	कौन से widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	वही widgets

Do (क्या)	Target / value
Go to page	एक page
Set value of	widget, value
Add to / Subtract from	widget, कितना
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer वाले models
Brightness (%)	brightness control वाले models

9

भाषाएँ

किसी page पर Message रखें (Label, Text, Button में भी यही)।

Language: हिन्दी (मलयालम, मराठी, तमिल, गुजराती, पंजाबी, बंगाली, European, Русский, Ελληνικά)।
Phrases में वाक्य (कई हों तो |)।
Live text ✓: host कोई भी वाक्य UTF-8 में भेज सकता है; display संयुक्ताक्षर और मात्राएँ सही बनाता है। Tick करने पर field "Message" और "Changeable" ✓ हो जाता है।

English के अलावा live text के लिए NOR model (4, 8, 16) चाहिए। Fonts factory से ही NOR में हैं।

Language, Message, Changeable लाल डिब्बों में

Preview में मलयालम — Live text preview में।

Keyboard पर हिन्दी, मलयालम, तमिल… टाइप करना

Screen के keyboard पर English अक्षर दबाएँ, box में वे हिन्दी में (या मलयालम, मराठी, तमिल, गुजराती, पंजाबी, बंगाली में) दिखेंगे: namaste → नमस्ते। Phone की phonetic typing की तरह।

Keyboard जोड़ें।
Language: भाषा चुनें।

अगर keyboard अभी किसी Input box में नहीं लिखता ("Types into" = None), तो Language चुनने पर keyboard के ऊपर एक Input box अपने आप आएगा और keyboard उसी में लिखेगा।

Keyboard settings: Language लाल डिब्बे में

Keyboard के ऊपर अपने आप आया Input box — भाषा चुनने पर: keyboard के ऊपर Input box, "Types into" = वही box।

भाषा उस Input box की setting है। Box चुनकर भी बदल सकते हैं:

Kind: Indian language (typed in English)।
Language: भाषा।
Letter size: 16, 20, 24 px।
नीचे उस भाषा के typing rules दिखते हैं।

Max length अधिकतम 24 English अक्षर। "Show typed text" सिर्फ़ तब चाहिए जब keyboard box को ढक दे (pop-up keyboard)। Box keyboard के ऊपर दिख रहा हो तो tick हटाएँ, वरना एक ही लिखावट दो box में दिखेगी।

Input box settings: Kind, Language, Letter size लाल डिब्बों में

सात भाषाओं में टाइप किए गए box — Display पर ऐसे: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO।

भाषा	टाइप करें	दिखेगा	याद रखें
मलयालम	`namaskaaram`, `kEraLam`, `avan`	നമസ്കാരം, കേരളം, അവൻ	E O = दीर्घ ഏ ഓ, L = ള, N = ണ, t = റ്റ, zh = ഴ; शब्द के अंत में n r l = chillu, m = ം
हिन्दी / मराठी	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	A I U = दीर्घ स्वर, T D = ट ड, t d = त द, x = क्ष, M = ं
तमिल	`vaNakkam`, `thamizh`, `nanRi`	வணக்கம், தமிழ், நன்றி	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க, nj = ஞ்ச
गुजराती	`kem chho`	કેમ છો	हिन्दी जैसे ही rules
पंजाबी	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	दोहरा अक्षर = ੱ, अक्षर से पहले n m = ੰ
बंगाली	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = कोई मात्रा नहीं, O = ো, ng = ং

NOR model (4T, 8T, 16T…) चाहिए: भाषा fonts NOR में हैं। Host पढ़े (readText) तो उसे टाइप किए गए English अक्षर मिलते हैं।

10

Host MCU से (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: हर widget और page का नाम (W_LEVEL, PAGE_SETTINGS…)। Host program में जोड़ें।
Write to project folder…: firmware और host header एक साथ।
NOR data file: सिर्फ़ chip programmer के लिए।

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator UP / DOWN से level बदले तो यहाँ पता चलता है
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display तैयार होने तक (5 s तक)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value दिखाएँ
  disp.loop();                           // display से आए संदेश
  delay(200);
}

Function	काम
setValue(id, v)	Number, bar, LED, switch… की value
setText(id, "…")	Changeable text (Live text में UTF-8)
page(PAGE_…)	Page बदलें
show(id) / hide(id)	Widget दिखाएँ / छिपाएँ
setColor(id, c) / setBackground(id, c)	रंग (RGB565)
getValue(id) / readText(id, buf, n)	Display की value / text पढ़ें
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value बदली, board button, page बदला, display restart हुआ
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO)।

11

Modbus RTU (PLC के साथ)

Pages list में एक page click करें, फिर Host link · whole project।
Host link: Modbus RTU slave।
Slave address (1–247), Baud, Parity: PLC में भी यही।
📋 Register table (CSV): सभी registers की सूची; Excel में खोलकर PLC programmer को दें।
Device panel का baud Modbus baud करें और Flash।

Widget चुनने पर Name के नीचे उसके registers: holding register 3 (40004), coil 3 (4)।

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table लाल डिब्बों में

Register	Address	अर्थ
Holding (4x)	0 … N-1	Widget value (widget list में उसकी जगह)। लिखने पर display पर।
Holding	1000	Page; page ID लिखें तो वह page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	दिखाएँ (1) / छिपाएँ (0)
Discrete input (1x)	0 … N-1	Button दबा? (पढ़ने पर clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: दबा / पकड़ा हुआ
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16। Values signed 16-bit। Widgets जोड़ने या हटाने पर addresses बदलते हैं; PLC को नई CSV दें।

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC (या USB-RS485) का A / B

Flash के लिए USB-serial (TTL) cable चाहिए। USB-serial TXD और MAX485 RO को एक साथ सीधे RC7 से न जोड़ें: jumper, या TXD में 1 kΩ resistor और RB4 पर 10 kΩ pull-up।

PLC के बिना PC से test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project में Store in:

MCU flash: English fonts, छोटे चित्र। Lite model।
SPI NOR flash: बड़े चित्र, animation, दूसरी भाषाएँ। 4 / 8 / 16 models (Board model चुनने पर अपने आप)।

NOR में font library factory से ही है। Flash के समय सिर्फ़ design के चित्र भेजे जाते हैं।

13

Widget list, Problems

14

Board, pins

भाग	PIC pin	टिप्पणी
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus में Editor में दिया baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = बना रहा है। Modbus में RS-485 DE/RE।
INT	RC0	LOW = host के लिए संदेश है (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND पर) या TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	जिन models में हैं
Status LED	RB5	चलते समय हर 0.5 s पर टिमटिमाता है

Display settings: Tutorial step 3। हर बदलाव के बाद Flash।

15

Self-test

Connect करने के बाद Device panel में 🔧 Self-test। कोई भी design flash हो, यह चलता है।

Colours: लाल, हरी, नीली, सफ़ेद, काली, स्लेटी पट्टियाँ, ऊपर बाएँ पीला चौकोर। चौकोर किसी और कोने में हो तो Orientation / Mirror ठीक करें। START या tap: अगला।
Buttons, touch: चारों buttons दबाएँ; हर box हरा होगा। Touch हो तो dot। कोई button काम न करे तो START दो बार।
Parts: NOR, font library, EEPROM: PASS / FAIL। Buzzer, backlight test। START: सामान्य screen।

16

समस्या समाधान

समस्या	क्या करें
Display पूरा सफ़ेद	Display के DC, CS, RST तार और 3.3 V supply जाँचें।
दर्पण जैसा / उल्टा	Display entry, Mirror, Orientation (Tutorial step 3)। Self-test का पीला चौकोर ऊपर बाएँ हो।
रंग गलत	लाल नीला दिखे: Swap red/blue। सफ़ेद काला दिखे: Invert colours।
Buttons हमेशा दबे हुए	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223"।
Touch गलत जगह	Touch calibration → Calibrate…: display के चारों + निशान एक-एक कर छुएँ।
Flash fail / port busy	Disconnect करके Flash। "Waiting for bootloader": board power off / on।
Connect नहीं होता	TX / RX उल्टे? (adapter TXD → RC7)। Baud 115200 (Modbus design में Modbus baud)।
लिखावट "????"	Widget की Language ठीक करें। English के अलावा live text के लिए NOR model।
Modbus जवाब नहीं	Address, baud, parity एक जैसे? A / B बदलें। Page बदलने के बाद PLC timeout 3 s।
Problems में error	Error पर click करके वह widget ठीक करें। Error रहते Flash नहीं होगा।

PixPIO 2.8" smart display · பயனர் கையேடு

PixPIO பயனர் கையேடு

Screen design செய்யுங்கள், ஒரே click-இல் display-க்கு அனுப்புங்கள். Arduino, PIC, STM32 போன்ற எந்த microcontroller-இலிருந்தும், PLC-இலிருந்து Modbus வழியாகவும், நேரடியாக PC-இலிருந்தும் பயன்படுத்தலாம். Host இல்லாமல் power மட்டும் கொண்டும் இயங்கும்.

Screenshots-இல் உள்ள சிவப்பு பெட்டிகள் அந்த step-இல் பயன்படுத்த வேண்டிய settings / buttons.

இந்தக் கையேட்டின் tutorial போன்ற design display-இல்: host இல்லாமல், Actions மட்டும்.

1

PixPIO என்றால் என்ன

PixPIO என்பது சொந்த processor (PIC18F27Q84) கொண்ட 2.8" (320×240) colour display board. Screens, buttons, bars, gauges, படங்கள் அனைத்தும் PC-இல் PixPIO Editor-இல் design செய்யப்படுகின்றன. Display அவற்றைத் தானே வரைகிறது. Host (MCU அல்லது PLC) "level = 80" போன்ற சிறிய செய்திகளை மட்டும் அனுப்பினால் போதும்.

LiteNOR இல்லை, touch இல்லை. English fonts.

4 / 4T4 MB NOR (எல்லா fonts, மொழிகள்). T = touch.

8 / 8T8 MB NOR. அதிக படங்கள், animation.

16 / 16T16 MB NOR. பெரிய படங்கள், பல மொழிகள்.

Board-இல் 4 buttons: MENU UP DOWN START (push buttons அல்லது TTP223 touch pads). சில models-இல் brightness control, buzzer உண்டு.

ஏன் PixPIO

Live editingUSB இணைக்கவும்: Editor-இல் ஒவ்வொரு மாற்றமும் display-இல் உடனே. SD card தேவையில்லை, நீண்ட upload இல்லை.

30 widgets தயார்Gauge, chart, keyboard, QR code, animation: drag செய்து போடுங்கள், முடிந்தது.

எந்த host-உம்UART, I2C அல்லது SPI. PIC, Arduino, ESP32, STM32-இல் tested. Host இல்லாமலும்.

உங்கள் மொழிதமிழ், மலையாளம், இந்தி… screen-இல், phonetic typing உடன்.

Free toolsPixPIO Editor, VS Code-க்கான PICPIO இலவசம்.

2

Install செய்தல்

Visual Studio Code install செய்யுங்கள் (Windows, இலவசம்).
VS Code-இல் PICPIO extension: Extensions → "…" → Install from VSIX… → உடன் கிடைத்த picpio-x.y.z.vsix.
VS Code-ஐ மீண்டும் திறக்கவும். PICPIO menu-இல் (அல்லது Ctrl+Shift+P → "PixPIO") PixPIO. Browser-இல் Editor திறக்கும்.
USB-serial cable (CH340)-ஐ PC-இல் இணைக்கவும். Device Manager → Ports-இல் USB-SERIAL CH340 (COM3) போல் தெரிய வேண்டும்.

Editor-க்கு internet தேவையில்லை. Display-உடன் தொடர்பு VS Code இயக்கும் "bridge" வழியாக. Editor பயன்படுத்தும் நேரம் முழுவதும் VS Code-ஐ திறந்து வைக்கவும்.

3

Editor அறிமுகம்

முதல் முறை திறக்கும்போது Editor-இல் ஒரு Example project இருக்கும் (toolbar-இல் Example அழுத்தினால் எப்போதும் திரும்பக் கிடைக்கும்; 8 pages, பெரும்பாலான widgets).

பகுதி	இடம்	வேலை
Toolbar	மேலே	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	மேல் இடது	Screens. + புதிய page, ⧉ copy, − நீக்கு. "start" = முதலில் தெரிவது.
Add widget	இடது	Click செய்தால் அந்த widget screen-இல் சேரும்.
Preview	நடுவில்	Display-இல் தெரிவது போல. Drag செய்து நகர்த்தலாம், நீல சதுரங்களை இழுத்து அளவு மாற்றலாம்.
Properties	வலது	தேர்ந்தெடுத்த widget-இன் settings. Pages list-இல் page-ஐ click செய்தால் page மற்றும் முழு project settings. ? = ஒவ்வொரு setting-இன் விளக்கம்.
Problems	கீழ் இடது	Design-இல் உள்ள பிழைகள், எச்சரிக்கைகள்.
Device	கீழ் வலது	COM port, Connect, Mirror, Storage, Self-test, Touch, PC-இலிருந்து commands (அத்தியாயம் 6).

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo.

4

Tutorial: Water Tank (ஆரம்பத்திலிருந்து)

ஒரு தொட்டியின் level-ஐக் காட்டும் 2-page screen. UP / DOWN மூலம் level மாறும், bar உடன் மாறும். 100 ஆனால் "TANK FULL", 0 ஆனால் "TANK EMPTY". MENU settings page-ஐத் திறக்கும். Host தேவையில்லை. சுமார் 15 நிமிடம்.

STEP 1

புதிய project

Toolbar-இல் New. ஒரு காலி screen (page "main") கிடைக்கும்.

STEP 2

Board model

வலது பக்கம் Screen · whole project-இல் Board model: board-இன் label-இல் உள்ள model (இங்கே PixPIO 4T).

இது display, touch, buttons, brightness, buzzer, NOR ஆகியவற்றைத் தானாக set செய்யும். Editor இதை நினைவில் வைக்கும்.

Board model PixPIO 4T சிவப்பு பெட்டியில்

STEP 3

Display (தேவைப்பட்டால் மட்டும்)

படம் திரும்பியிருந்தால் அல்லது நிறம் தவறாக இருந்தால் மட்டும்:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation சிவப்பு பெட்டிகளில்

STEP 4

Page-க்குப் பெயர்

வலது மேலே Name: home. Host code-இல் இது PAGE_HOME.

STEP 5

இரண்டாவது page

Pages-இன் +. புதிய page-இன் Name: settings. பிறகு list-இல் home-ஐ click செய்து திரும்புங்கள்.

Pages: home start, settings; + சிவப்பு பெட்டியில்

STEP 6

மேல் bar (Rectangle)

Add widget-இல் Rectangle. x, y, width, height: 0, 0, 320, 30 (அல்லது mouse-ஆல் இழுக்கவும்). Colours-இல் நிறம்.

Rectangle சேர்க்கப்பட்டது; Rectangle button, x y width height சிவப்பு பெட்டிகளில்

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, இடம் 8, 7, 304, 16. Font, Size, Align Text பகுதியில்.

Label: Name title, Text WATER TANK சிவப்பு பெட்டிகளில்

STEP 8

Level (Number)

Number: Name level, இடம் 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power போனாலும் நினைவில் இருக்கும்

Number: Value, Unit, Min, Max, Remember value சிவப்பு பெட்டிகளில்

STEP 9

Board buttons மூலம் மாற்ற

Keys (buttons): Key + UP, Key − DOWN, Step 5. அழுத்திப் பிடித்தால் தொடர்ந்து மாறும்.

Key + UP, Key − DOWN, Step 5 சிவப்பு பெட்டிகளில்

STEP 10

Level bar

Bar: Name level_bar, இடம் 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Bar: Min, Max, Style சிவப்பு பெட்டிகளில்

Preview: WATER TANK, 50%, பச்சை segment bar — இதுவரை: title, number, bar.

STEP 11

மறைந்திருக்கும் செய்திகள்

Label: Name full_msg, Text TANK FULL, இடம் 10, 120, 300, 20, Hidden ✓.

அதே இடத்தில் இன்னொன்று: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Hidden widgets preview-இல் புள்ளிக் கோடாகத் தெரியும்; display-இல் ஆரம்பத்தில் தெரியாது.

Label: Text TANK FULL, Hidden சிவப்பு பெட்டிகளில்

STEP 12

Actions: number-க்கு 5 actions

Preview-இல் level-ஐ click செய்யவும். Actions (no code) → + Add action 5 முறை:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

ஒரு வரியை நீக்க ✕.

STEP 13

Settings button

Button: Name btn_settings, இடம் 10, 200, 145, 34, Caption MENU: Settings.

STEP 14

Button அழுத்தினால் page மாற

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: board-இன் MENU-உம் இதையே செய்யும்.

STEP 15

Settings page: Back button, QR

Pages-இல் settings. Step 6, 7 போல Rectangle மற்றும் "SETTINGS" Label.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = உங்கள் website, Border shape = Rounded.

QR: Text / link, Border shape சிவப்பு பெட்டிகளில்

STEP 16

Save

Save: .pixpio file. "Unsaved changes" தெரியும் வரை save ஆகவில்லை. இனி board-ஐ இணைத்து Flash (அத்தியாயம் 5).

5

Board இணைத்தல், Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Board-க்கு சொந்த supply இல்லையெனில் மட்டும்

STEP 2

Connect

Device-இல் COM port, baud 115200, Connect. Dot பச்சையானால் இணைந்தது. Port இல்லையெனில் ↻.

STEP 3

⚡ Flash to display

Toolbar-இல் ⚡ Flash to display.
Design firmware ஆக்கப்பட்டு cable வழியாக அனுப்பப்படும்; ஒரு window-இல் progress. முதல் முறை 1–2 நிமிடம்.
"UPLOAD SUCCESSFUL" வந்தால் display புதிய screen-உடன் தொடங்கும்.
படங்கள் அல்லது பிற மொழிகள் இருந்தால் (NOR models) அவையும் இதே cable வழியாக NOR-க்கு.

SD card தேவையில்லை. ஒவ்வொரு மாற்றத்துக்கும்: Editor-இல் மாற்றுங்கள், Flash.

Tutorial design display-இல்: UP / DOWN மூலம் level மாற்றுங்கள், 100 ஆக்கி "TANK FULL" பாருங்கள், MENU அழுத்தி settings page.

6

PC-இலிருந்து display-ஐக் கட்டுப்படுத்தல்

Connect செய்த பிறகு host MCU இல்லாமலேயே PC-இலிருந்து ஒவ்வொரு widget-ஐயும் சோதிக்கலாம். மூன்று வழிகள்:

1. Quick commands (Device panel)

Page + Show: அந்த page display-இல் திறக்கும்.
Widget தேர்ந்தெடுத்து, Value எழுதி Set value: number, bar, LED, switch… மாறும்.
text + Set text: Changeable text மாறும்.
Hide / Show: widget-ஐ மறை / காட்டு.
Key + Press: board button (MENU, UP…) அழுத்தியது போல.

Device quick commands சிவப்பு பெட்டிகளில்

2. Commands for this widget

எந்த widget தேர்ந்தெடுத்தாலும் properties-இன் கடைசியில் Commands for this widget உண்டு. ஒவ்வொரு command-க்கும்:

Send: PC-இலிருந்து உடனே display-க்கு அனுப்பும் (Connect செய்திருக்க வேண்டும்).
Copy: host program-இல் ஒட்ட வேண்டிய code (pd_set_value(&disp, W_NUMBER, 253);).
பச்சை bytes: UART / I2C / SPI வழியாக நேரடியாக அனுப்ப வேண்டிய frame (பிற மொழிகளில் program எழுதும்போது).

Settings மாற்றும்போது commands-உம் உடன் மாறும். ஒவ்வொரு widget-இன் commands அத்தியாயம் 7-இல்.

Number widget commands; ஒவ்வொன்றுக்கும் Copy, Send

3. Mirror, Touch

Mirror ✓: display-இல் நடப்பது (button அழுத்தல், value மாற்றம்) preview-இலும் உடனே தெரியும்.
☝ Touch: preview-இல் mouse click = display-இல் விரலால் தொடுவது (👆 cursor, மஞ்சள் dot).
🔧 Self-test, ⬆ Storage: அத்தியாயம் 15, 12.

Mirror, Storage, Self-test, Touch சிவப்பு பெட்டிகளில்

7

ஒவ்வொரு widget-உம்

ஒவ்வொரு widget-க்கும்: எதற்கு, எப்படிப் பயன்படுத்துவது, value என்ன, host code. மூன்று படங்கள்: Display-இல் (New project-இல் அந்த widget சேர்த்தபோது), Settings, Commands (PC-இலிருந்து Send / code Copy). Add widget list-இல் இதே பெயர்கள்.

Rectangle

Header bars, background boxes, cards. மற்ற widgets-க்குப் பின்னால் வைக்கலாம்.

எப்படி பயன்படுத்துவது

Colours-இல் Background (fill), Text / border நிறம்.
Corner radius: வளைந்த மூலைகள். Border: விளிம்பு.
Widget list-இல் கீழே இருந்தால் மற்ற widgets-க்குப் பின்னால் வரும் (↑ ↓ buttons மூலம் வரிசை மாற்றலாம்).

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // சிவப்பு
disp.hide(W_HEADER);

Rectangle: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Label

நிலையான எழுத்து: titles, captions, units.

எப்படி பயன்படுத்துவது

Text-இல் எழுதவும். Font, Size, Align.
Language: தமிழ், மலையாளம்… (அத்தியாயம் 9).
Changeable ✓ ஆக்கினால் host text மாற்றலாம்.
No background: கீழே உள்ளது தெரியும்.

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ தேவை

Label: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Number

எண் காட்ட: temperature, speed, count, setpoint.

எப்படி பயன்படுத்துவது

Value (ஆரம்பம்), Min, Max.
Decimals 1 ஆக்கினால் 253 → 25.3. Unit: °C, %, V.
Keys: UP / DOWN மூலம் மாற்றலாம், Step.
Remember value: power போனாலும் நினைவில் இருக்கும்.

Value

எண் (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Text

Host அனுப்பும் ஒரு வரி: status, பெயர், செய்தி.

எப்படி பயன்படுத்துவது

Max length: எத்தனை எழுத்துகள் வரை.
Font, Size, Align, நிறங்கள்.
Language, Live text மூலம் தமிழ் போன்றவையும் (NOR model).

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Bar

Level, progress, tank, battery.

எப்படி பயன்படுத்துவது

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Touch உள்ள models-இல் விரலால் இழுக்கலாம் (slider).
Controls brightness: இந்த bar backlight-ஐக் கட்டுப்படுத்தும்.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Button

அழுத்தும் button: page மாற்றம், start / stop.

எப்படி பயன்படுத்துவது

Caption: எழுத்து. Style: normal, outline, pill, checkbox.
Mode: push (அழுத்தும்போது மட்டும்) / toggle (on-off).
Key: board button (MENU…) இதை அழுத்தும்.
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

LED

Status lamp: ON / OFF / மின்னுதல்.

எப்படி பயன்படுத்துவது

State: Off, On, Blink. Blink every: ms.
Colours: Off நிறம், On நிறம்.

Value

0 off, 1 on, 2 blink

Host code (Arduino)

disp.setValue(W_LED, 2);   // மின்னும்

LED: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Arc / gauge

வட்ட meter: speed, power, volume.

எப்படி பயன்படுத்துவது

Start angle, Sweep (எத்தனை டிகிரி), Thickness.
Show value: நடுவில் எண்.
Knob ✓: touch மூலம் சுழற்றலாம்.
Keys + / −.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Switch

ON / OFF slider: fan, light, mode.

எப்படி பயன்படுத்துவது

Switched on: ஆரம்ப நிலை.
Key: ஒரு board button அழுத்தினால் மாறும். Touch-இலும்.
Remember value.

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator மாற்றினால்: onChange(W_SWITCH, 0/1)

Switch: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Select

Drop-down: பல options-இல் ஒன்று.

எப்படி பயன்படுத்துவது

Options: Low|Medium|High (| மூலம் பிரிக்கவும்).
Selected: ஆரம்ப option.
Keys: open / OK, up, down. Touch-இல் list திறக்கும்.

Value

0, 1, 2… (option-இன் இடம்)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Spinner

"வேலை நடக்கிறது" animation.

எப்படி பயன்படுத்துவது

Style: dots, comet, arc…
Spinning, Speed. 0 = blank: நிற்கும்போது மறையும்.

Value

1 சுழல்கிறது, 0 நிற்கிறது

Host code (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Wi-Fi, battery, bell போன்ற குறியீடுகள்.

எப்படி பயன்படுத்துவது

Symbol: icon தேர்ந்தெடுக்கவும். Icon size, Scale.
Host switches icons: host icon மாற்றலாம்.

Value

Icon எண் (0 = எதுவுமில்லை)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

பல buttons, ஒன்றை மட்டும் தேர்ந்தெடுக்கலாம் (mode, speed level).

எப்படி பயன்படுத்துவது

Options: Low|Mid|High. Columns.
Style: buttons அல்லது radio.

Value

தேர்ந்தெடுத்த button-இன் இடம் (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Switch array

பல ON / OFF switches ஒன்றாக (zones, relays).

எப்படி பயன்படுத்துவது

Options: ஒவ்வொரு switch-இன் பெயர். Columns.
Style: switches அல்லது checkboxes.

Value

Bits: bit 0 = முதல் switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Keypad

எண் keys: PIN, setpoint.

எப்படி பயன்படுத்துவது

Keys: 1|2|3|…|OK. Columns.
Types into: ஒரு Input box-இல் எழுதும்.
Keys move / press: board buttons மூலமும்.

Value

அழுத்திய key-இன் இடம்

Host code (Arduino)

disp.onChange(myChange);   // ஒவ்வொரு key அழுத்தலும்

Keypad: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Keyboard

Screen-இல் QWERTY keyboard: பெயர், Wi-Fi password.

எப்படி பயன்படுத்துவது

Types into: ஒரு Input box.
Language: தமிழ், மலையாளம், இந்தி… English எழுத்துகளை type செய்தால் அந்த மொழியில் தெரியும் (அத்தியாயம் 9).
Input box-ஐத் தொட்டால் keyboard திறக்கவும் வசதி உண்டு (Keyboard on tap).

Value

எழுத்தின் code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Arrow

திசை: flow, motor direction.

எப்படி பயன்படுத்துவது

Style: arrow, double, triangle. Shaft thickness.

Value

0 வலது, 1 இடது, 2 மேல், 3 கீழ்

Host code (Arduino)

disp.setValue(W_ARROW, 2);   // மேலே

Image / logo

Logo, படங்கள்.

எப்படி பயன்படுத்துவது

Change image…: PNG, JPG, SVG. Editor display-க்கு ஏற்ற அளவாக்கும்.
Colours: Full colour அல்லது Two colours (logo, மிகக் குறைந்த flash).
Fit, Border shape (Rounded, Circle…).

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display-இல்

Settings

Commands: PC-இலிருந்து Send, code Copy

Chart

Trend: temperature வரலாறு.

எப்படி பயன்படுத்துவது

Style: line, thick, bars. Points, Min, Max, Grid lines.

Value

ஒவ்வொரு setValue-உம் வலது பக்கம் ஒரு புதிய point (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // ஒவ்வொரு வினாடியும்

Chart: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Needle gauge

முள் உள்ள meter: pressure, RPM.

எப்படி பயன்படுத்துவது

Min, Max, Ticks, Scale numbers.
Warning from %, Danger from %: மஞ்சள், சிவப்பு zones.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_GAUGE, 75);

Needle gauge: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Input box

Keypad / keyboard எழுதும் box.

எப்படி பயன்படுத்துவது

Placeholder, Max length.
Kind: text, number, password (* ஆகத் தெரியும்), Indian language (English-இல் type செய்தால் தமிழ், மலையாளம், இந்தி…; அத்தியாயம் 9).

Value

Number kind: OK அழுத்தும்போது எண்

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Message

பல வரி எழுத்து; சொற்கள் தானாக அடுத்த வரிக்கு.

எப்படி பயன்படுத்துவது

Message: | = புதிய வரி. Line gap.
Language, Live text (அத்தியாயம் 9).
Changeable: host மாற்றலாம்.

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter மாற்றவும்|Service: 3 நாள்");

Message: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Animation (GIF)

GIF animation: logo, loading, எச்சரிக்கை.

எப்படி பயன்படுத்துவது

Choose GIF…: ஒரு GIF file. Fit.
Playing: loop, once, stopped.
பெரிய / அதிக நிறமுள்ள GIF-க்கு NOR model நல்லது.

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // ஒரு முறை

Animation (GIF): Display-இல் — Display-இல்

Roller (picker)

Scroll ஆகும் picker: programs, modes.

எப்படி பயன்படுத்துவது

Options: Off|Low|Medium|High. Rows shown: 3, 5, 7.
Keys next / previous. Touch-இல் மேல் அல்லது கீழ் row-ஐத் தொடவும்.
Remember value.

Value

தேர்ந்தெடுத்த row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Display-இல் — Display-இல்

Roller (picker): Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

Spinbox (− 12 +)

− எண் + : setpoint, timer.

எப்படி பயன்படுத்துவது

Min, Max, Step, Unit.
Touch-இல் − / + தொடவும், அல்லது Keys + / −.
Remember value.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_SPINBOX, 60);

Spinbox (− 12 +): Display-இல் — Display-இல்

Spinbox (− 12 +): Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

QR code

Phone scan செய்ய: website, Wi-Fi, phone, manual link.

எப்படி பயன்படுத்துவது

Text / link: https://…, WIFI:T:WPA;S:பெயர்;P:password;;, tel:….
Border shape, No background.
பெரிய box = எளிதான scan.

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC-இலிருந்து Send, code Copy — Commands: PC-இலிருந்து Send, code Copy

8

Actions: முழு பட்டியல்

Widget-இல் ஏதாவது நடக்கும்போது display தானே செய்பவை. Host தேவையில்லை. உதாரணங்கள்: Tutorial step 12, 14.

When (எப்போது)	எந்த widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	அதே widgets

Do (என்ன)	Target / value
Go to page	ஒரு page
Set value of	widget, value
Add to / Subtract from	widget, எவ்வளவு
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer உள்ள models
Brightness (%)	brightness control உள்ள models

9

மொழிகள்

ஒரு page-இல் Message வையுங்கள் (Label, Text, Button-இலும் இதே).

Language: தமிழ் (மலையாளம், இந்தி, மராத்தி, குஜராத்தி, பஞ்சாபி, வங்காளம், European, Русский, Ελληνικά).
Phrases-இல் வாக்கியம் (பல இருந்தால் |).
Live text ✓: host எந்த வாக்கியத்தையும் UTF-8 ஆக அனுப்பலாம்; display கூட்டெழுத்துகள், உயிர்க்குறிகளைச் சரியாக வரையும். Tick செய்தால் field "Message" ஆகவும் "Changeable" ✓ ஆகவும் மாறும்.

English அல்லாத live text-க்கு NOR model (4, 8, 16) தேவை. Fonts factory-யிலேயே NOR-இல் உள்ளன.

Language, Message, Changeable சிவப்பு பெட்டிகளில்

Preview-இல் மலையாளம் — Live text preview-இல்.

Keyboard-இல் தமிழ், மலையாளம், இந்தி… type செய்தல்

Screen keyboard-இல் English எழுத்துகளை அழுத்தினால் box-இல் தமிழில் (அல்லது மலையாளம், இந்தி, மராத்தி, குஜராத்தி, பஞ்சாபி, வங்காளத்தில்) தெரியும்: vaNakkam → வணக்கம். Phone-இல் phonetic typing போல.

Keyboard சேர்க்கவும்.
Language: மொழியைத் தேர்ந்தெடுக்கவும்.

Keyboard இதுவரை எந்த Input box-இலும் எழுதவில்லை என்றால் ("Types into" = None), Language தேர்ந்தெடுக்கும்போது keyboard-க்கு மேலே ஒரு Input box தானாக வரும், keyboard அதில் எழுதும்.

Keyboard settings: Language சிவப்பு பெட்டியில்

Keyboard-க்கு மேலே தானாக வந்த Input box — மொழி தேர்ந்தெடுத்தபோது: keyboard-க்கு மேலே Input box, "Types into" = அந்த box.

மொழி அந்த Input box-இன் setting. Box-ஐத் தேர்ந்தெடுத்தும் மாற்றலாம்:

Kind: Indian language (typed in English).
Language: மொழி.
Letter size: 16, 20, 24 px.
கீழே அந்த மொழியின் typing rules தெரியும்.

Max length அதிகபட்சம் 24 English எழுத்துகள். "Show typed text" keyboard box-ஐ மறைக்கும்போது மட்டும் (pop-up keyboard). Box keyboard-க்கு மேலே தெரிந்தால் tick வேண்டாம்; இல்லையெனில் ஒரே எழுத்து இரண்டு box-இல் தெரியும்.

Input box settings: Kind, Language, Letter size சிவப்பு பெட்டிகளில்

ஏழு மொழிகளில் type செய்த box-கள் — Display-இல் இப்படி: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

மொழி	Type செய்வது	தெரிவது	நினைவில் கொள்ள
தமிழ்	`vaNakkam`, `thamizh`, `nanRi`	வணக்கம், தமிழ், நன்றி	t d = ட, th = த, n = ன (சொல்லின் தொடக்கத்தில் ந), N = ண, R = ற, zh = ழ, L = ள, ng = ங்க, nj = ஞ்ச, A I U E O = நெடில்
மலையாளம்	`namaskaaram`, `kEraLam`, `avan`	നമസ്കാരം, കേരളം, അവൻ	E O = நெடில், L = ള, N = ണ, t = റ്റ, zh = ഴ
हिन्दी / मराठी	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	A I U = நெடில், T D = ट ड, t d = त द, x = क्ष, M = ं
ગુજરાતી	`kem chho`	કેમ છો	இந்தியின் அதே rules
ਪੰਜਾਬੀ	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	இரட்டை எழுத்து = ੱ, எழுத்துக்கு முன் n m = ੰ
বাংলা	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = குறி இல்லை, O = ো, ng = ং

NOR model (4T, 8T, 16T…) தேவை: மொழி fonts NOR-இல் உள்ளன. Host படிக்கும்போது (readText) type செய்த English எழுத்துகள் கிடைக்கும்.

10

Host MCU-இலிருந்து (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: ஒவ்வொரு widget, page-இன் பெயர் (W_LEVEL, PAGE_SETTINGS…). Host program-இல் சேர்க்கவும்.
Write to project folder…: firmware-உம் host header-உம் ஒன்றாக.
NOR data file: chip programmer-க்கு மட்டும்.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator UP / DOWN மூலம் level மாற்றினால் இங்கே தெரியும்
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display தயாராகும் வரை (5 s வரை)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value காட்டு
  disp.loop();                           // display-இலிருந்து வரும் செய்திகள்
  delay(200);
}

Function	வேலை
setValue(id, v)	Number, bar, LED, switch… value
setText(id, "…")	Changeable text (Live text-இல் UTF-8)
page(PAGE_…)	Page மாற்று
show(id) / hide(id)	Widget காட்டு / மறை
setColor(id, c) / setBackground(id, c)	நிறம் (RGB565)
getValue(id) / readText(id, buf, n)	Display-இன் value / text படி
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value மாறியது, board button, page மாறியது, display restart ஆனது
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (PLC-உடன்)

Pages list-இல் ஒரு page-ஐ click செய்து Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: PLC-இலும் இதே.
📋 Register table (CSV): எல்லா registers பட்டியல்; Excel-இல் திறந்து PLC programmer-க்கு.
Device panel baud-ஐ Modbus baud ஆக்கி Flash.

Widget தேர்ந்தெடுத்தால் Name-க்குக் கீழே அதன் registers: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table சிவப்பு பெட்டிகளில்

Register	Address	பொருள்
Holding (4x)	0 … N-1	Widget value (widget list-இல் அதன் இடம்). எழுதினால் display-இல்.
Holding	1000	Page; page ID எழுதினால் அந்த page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	காட்டு (1) / மறை (0)
Discrete input (1x)	0 … N-1	Button அழுத்தப்பட்டதா (படித்தால் clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: அழுத்தியது / பிடித்திருப்பது
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16. Values signed 16-bit. Widgets சேர்த்தால் அல்லது நீக்கினால் addresses மாறும்; புதிய CSV-ஐ PLC-க்குக் கொடுங்கள்.

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC-இன் (அல்லது USB-RS485-இன்) A / B

Flash செய்ய USB-serial (TTL) cable தேவை. USB-serial TXD-ஐயும் MAX485 RO-ஐயும் ஒன்றாக நேரடியாக RC7-க்கு இணைக்க வேண்டாம்: jumper, அல்லது TXD-இல் 1 kΩ resistor, RB4-இல் 10 kΩ pull-up.

PLC இல்லாமல் PC-இலிருந்து test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project-இல் Store in:

MCU flash: English fonts, சிறிய படங்கள். Lite model.
SPI NOR flash: பெரிய படங்கள், animation, பிற மொழிகள். 4 / 8 / 16 models (Board model தேர்ந்தெடுத்தால் தானாக).

NOR-இல் font library factory-யிலேயே உள்ளது. Flash நேரத்தில் design-இன் படங்கள் மட்டும் அனுப்பப்படும்.

13

Widget list, Problems

14

Board, pins

பகுதி	PIC pin	குறிப்பு
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus-இல் Editor-இல் கொடுத்த baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = வரைகிறது. Modbus-இல் RS-485 DE/RE.
INT	RC0	LOW = host-க்குச் செய்தி உண்டு (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND-க்கு) அல்லது TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	உள்ள models-இல்
Status LED	RB5	இயங்கும்போது 0.5 s இடைவெளியில் மின்னும்

Display settings: Tutorial step 3. ஒவ்வொரு மாற்றத்துக்குப் பிறகும் Flash.

15

Self-test

Connect செய்த பிறகு Device panel-இல் 🔧 Self-test. எந்த design flash செய்திருந்தாலும் இயங்கும்.

Colours: சிவப்பு, பச்சை, நீலம், வெள்ளை, கருப்பு, சாம்பல் பட்டைகள், மேல் இடதில் மஞ்சள் சதுரம். சதுரம் வேறு மூலையில் இருந்தால் Orientation / Mirror சரிசெய்யவும். START அல்லது tap: அடுத்தது.
Buttons, touch: நான்கு buttons-ஐயும் அழுத்தவும்; ஒவ்வொரு box-உம் பச்சையாகும். Touch இருந்தால் dot. ஒரு button இயங்கவில்லை என்றால் START இருமுறை.
Parts: NOR, font library, EEPROM: PASS / FAIL. Buzzer, backlight test. START: சாதாரண screen.

16

சிக்கல் தீர்வு

சிக்கல்	செய்ய வேண்டியது
Display முழுவதும் வெள்ளை	Display-இன் DC, CS, RST கம்பிகளையும் 3.3 V supply-ஐயும் சரிபாருங்கள்.
கண்ணாடி போல / தலைகீழாக	Display entry, Mirror, Orientation (Tutorial step 3). Self-test மஞ்சள் சதுரம் மேல் இடதில் இருக்க வேண்டும்.
நிறங்கள் தவறு	சிவப்பு நீலமாக: Swap red/blue. வெள்ளை கருப்பாக: Invert colours.
Buttons எப்போதும் அழுத்திய நிலையில்	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223".
Touch தவறான இடத்தில்	Touch calibration → Calibrate…: display-இன் நான்கு + குறிகளை ஒவ்வொன்றாகத் தொடவும்.
Flash தோல்வி / port busy	Disconnect செய்து Flash. "Waiting for bootloader": board power off / on.
Connect ஆகவில்லை	TX / RX மாறியுள்ளதா (adapter TXD → RC7). Baud 115200 (Modbus design-இல் Modbus baud).
எழுத்து "????"	Widget-இன் Language-ஐச் சரிசெய்யவும். English அல்லாத live text-க்கு NOR model.
Modbus பதில் இல்லை	Address, baud, parity ஒன்றா? A / B மாற்றவும். Page மாற்றிய பிறகு PLC timeout 3 s.
Problems-இல் error	Error-ஐ click செய்து அந்த widget-ஐச் சரிசெய்யவும். Error இருக்கும்போது Flash ஆகாது.

PixPIO 2.8" smart display · वापरकर्ता पुस्तिका

PixPIO वापरकर्ता पुस्तिका

Screen design करा, एका click मध्ये display वर पाठवा. Arduino, PIC, STM32 सारख्या कोणत्याही microcontroller वरून, PLC वरून Modbus द्वारे किंवा थेट PC वरून वापरा. Host शिवाय फक्त power वरही चालतो.

Screenshots मधील लाल चौकटी त्या step मध्ये वापरायच्या settings / buttons आहेत.

या पुस्तिकेच्या tutorial सारखे design display वर: host शिवाय, फक्त Actions.

1

PixPIO म्हणजे काय

PixPIO हा स्वतःच्या processor (PIC18F27Q84) सह 2.8" (320×240) colour display board आहे. Screens, buttons, bars, gauges, चित्रे सर्व PC वरील PixPIO Editor मध्ये design होतात. Display ती स्वतः काढतो. Host (MCU किंवा PLC) ला फक्त "level = 80" सारखे छोटे संदेश पाठवायचे असतात.

LiteNOR नाही, touch नाही. English fonts.

4 / 4T4 MB NOR (सर्व fonts, भाषा). T = touch.

8 / 8T8 MB NOR. अधिक चित्रे, animation.

16 / 16T16 MB NOR. मोठी चित्रे, अनेक भाषा.

Board वर 4 buttons: MENU UP DOWN START (push buttons किंवा TTP223 touch pads). काही models मध्ये brightness control आणि buzzer आहे.

PixPIO का

Live editingUSB लावा: Editor मधील प्रत्येक बदल display वर लगेच. SD card नाही, लांब upload नाही.

30 तयार widgetsGauge, chart, keyboard, QR code, animation: drag करा, झाले.

कोणताही hostUART, I2C किंवा SPI. PIC, Arduino, ESP32, STM32 वर tested. Host शिवायही.

तुमची भाषामराठी, हिंदी, मल्याळम… screen वर, phonetic typing सह.

Free toolsPixPIO Editor आणि VS Code साठी PICPIO मोफत आहेत.

2

Install करणे

Visual Studio Code install करा (Windows, मोफत).
VS Code मध्ये PICPIO extension: Extensions → "…" → Install from VSIX… → सोबत मिळालेली picpio-x.y.z.vsix.
VS Code पुन्हा उघडा. PICPIO menu मध्ये (किंवा Ctrl+Shift+P → "PixPIO") PixPIO. Browser मध्ये Editor उघडेल.
USB-serial cable (CH340) PC ला लावा. Device Manager → Ports मध्ये USB-SERIAL CH340 (COM3) सारखे दिसले पाहिजे.

Editor ला internet लागत नाही. Display शी संपर्क VS Code चालवत असलेल्या "bridge" द्वारे होतो. Editor वापरताना VS Code उघडे ठेवा.

3

Editor ओळख

पहिल्यांदा उघडल्यावर Editor मध्ये एक Example project असतो (toolbar मधील Example दाबल्यावर नेहमी परत मिळतो; 8 pages, बहुतेक widgets).

भाग	जागा	काम
Toolbar	वर	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	वर डावीकडे	Screens. + नवीन page, ⧉ copy, − काढा. "start" = पहिला दिसणारा.
Add widget	डावीकडे	Click केल्यावर ते widget screen वर जोडले जाते.
Preview	मध्यभागी	Display वर दिसेल तसे. Drag करून हलवा, निळे चौकोन ओढून आकार बदला.
Properties	उजवीकडे	निवडलेल्या widget च्या settings. Pages list मध्ये page click केल्यास page आणि संपूर्ण project च्या settings. ? = प्रत्येक setting चे स्पष्टीकरण.
Problems	खाली डावीकडे	Design मधील चुका, इशारे.
Device	खाली उजवीकडे	COM port, Connect, Mirror, Storage, Self-test, Touch, PC वरून commands (प्रकरण 6).

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo.

4

Tutorial: Water Tank (सुरुवातीपासून)

टाकीची level दाखवणारी 2-page screen. UP / DOWN ने level बदलेल, bar सोबत बदलेल. 100 झाल्यावर "TANK FULL", 0 झाल्यावर "TANK EMPTY". MENU settings page उघडेल. Host लागत नाही. सुमारे 15 मिनिटे.

STEP 1

नवीन project

Toolbar मध्ये New. एक रिकामी screen (page "main") मिळेल.

STEP 2

Board model

उजवीकडे Screen · whole project मध्ये Board model: board च्या label वरील model (येथे PixPIO 4T).

हे display, touch, buttons, brightness, buzzer, NOR आपोआप set करते. Editor हे लक्षात ठेवतो.

STEP 3

Display (गरज असेल तरच)

चित्र फिरलेले असेल किंवा रंग चुकीचे असतील तरच:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation लाल चौकटीत

STEP 4

Page चे नाव

उजवीकडे वर Name: home. Host code मध्ये हे PAGE_HOME.

STEP 5

दुसरे page

Pages चे +. नवीन page चे Name: settings. मग list मध्ये home click करून परत या.

Pages: home start, settings; + लाल चौकटीत

STEP 6

वरचा bar (Rectangle)

Add widget मध्ये Rectangle. x, y, width, height: 0, 0, 320, 30 (किंवा mouse ने ओढा). Colours मध्ये रंग.

Rectangle जोडला; Rectangle button, x y width height लाल चौकटीत

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, जागा 8, 7, 304, 16. Font, Size, Align Text भागात.

Label: Name title, Text WATER TANK लाल चौकटीत

STEP 8

Level (Number)

Number: Name level, जागा 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power गेली तरी लक्षात राहील

Number: Value, Unit, Min, Max, Remember value लाल चौकटीत

STEP 9

Board buttons ने बदलणे

Keys (buttons): Key + UP, Key − DOWN, Step 5. दाबून धरल्यास सतत बदलेल.

STEP 10

Level bar

Bar: Name level_bar, जागा 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, हिरवा segment bar — आतापर्यंत: title, number, bar.

STEP 11

लपलेले संदेश

Label: Name full_msg, Text TANK FULL, जागा 10, 120, 300, 20, Hidden ✓.

त्याच जागी आणखी एक: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Hidden widgets preview मध्ये ठिपक्यांनी दिसतात; display वर सुरुवातीला दिसत नाहीत.

Label: Text TANK FULL, Hidden लाल चौकटीत

STEP 12

Actions: number वर 5 actions

Preview मध्ये level click करा. Actions (no code) → + Add action 5 वेळा:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

एक ओळ काढण्यासाठी ✕.

STEP 13

Settings button

Button: Name btn_settings, जागा 10, 200, 145, 34, Caption MENU: Settings.

STEP 14

Button दाबल्यावर page बदलणे

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: board चे MENU सुद्धा हेच करेल.

STEP 15

Settings page: Back button, QR

Pages मध्ये settings. Step 6, 7 प्रमाणे Rectangle आणि "SETTINGS" Label.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = तुमची website, Border shape = Rounded.

QR: Text / link, Border shape लाल चौकटीत

STEP 16

Save

Save: .pixpio file. "Unsaved changes" दिसत असेपर्यंत save झाले नाही. आता board जोडून Flash (प्रकरण 5).

5

Board जोडणे, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Board ला स्वतःची supply नसेल तरच

STEP 2

Connect

Device मध्ये COM port, baud 115200, Connect. Dot हिरवा = जोडले. Port दिसत नसेल तर ↻.

STEP 3

⚡ Flash to display

Toolbar मध्ये ⚡ Flash to display.
Design चे firmware बनवून cable ने पाठवले जाते; एका window मध्ये progress. पहिल्यांदा 1–2 मिनिटे.
"UPLOAD SUCCESSFUL" आल्यावर display नवीन screen सह सुरू होतो.
चित्रे किंवा इतर भाषा असल्यास (NOR models) त्याही याच cable ने NOR मध्ये जातात.

SD card लागत नाही. प्रत्येक बदलासाठी: Editor मध्ये बदला, Flash.

Tutorial design display वर: UP / DOWN ने level बदला, 100 करून "TANK FULL" पाहा, MENU दाबून settings page.

6

PC वरून display नियंत्रित करणे

Connect केल्यानंतर host MCU शिवायच PC वरून प्रत्येक widget तपासता येते. तीन मार्ग:

1. Quick commands (Device panel)

Page + Show: ते page display वर उघडेल.
Widget निवडा, Value लिहा, Set value: number, bar, LED, switch… बदलतील.
text + Set text: Changeable text बदलेल.
Hide / Show: widget लपवा / दाखवा.
Key + Press: board button (MENU, UP…) दाबल्यासारखे.

2. Commands for this widget

कोणतेही widget निवडल्यावर properties च्या सर्वात खाली Commands for this widget असते. प्रत्येक command साठी:

Send: PC वरून लगेच display ला पाठवते (connected असले पाहिजे).
Copy: host program मध्ये चिकटवायचा code (pd_set_value(&disp, W_NUMBER, 253);).
हिरवे bytes: UART / I2C / SPI ने थेट पाठवायची frame (इतर भाषांमध्ये program लिहिताना).

Settings बदलल्यावर commands सुद्धा बदलतात. प्रत्येक widget चे commands प्रकरण 7 मध्ये.

Number widget commands; प्रत्येकासाठी Copy, Send

3. Mirror, Touch

Mirror ✓: display वर जे घडते (button दाबणे, value बदलणे) ते preview मध्येही लगेच दिसते.
☝ Touch: preview वर mouse click = display ला बोटाने स्पर्श (👆 cursor, पिवळा dot).
🔧 Self-test, ⬆ Storage: प्रकरण 15, 12.

Mirror, Storage, Self-test, Touch लाल चौकटीत

7

प्रत्येक widget

प्रत्येक widget साठी: कशासाठी, कसे वापरावे, value काय, host code. तीन चित्रे: Display वर (New project मध्ये ते widget जोडल्यावर), Settings, Commands (PC वरून Send / code Copy). Add widget list मध्ये हीच नावे आहेत.

Rectangle

Header bars, background boxes, cards. इतर widgets च्या मागे ठेवता येतो.

कसे वापरावे

Colours मध्ये Background (fill), Text / border रंग.
Corner radius: गोल कोपरे. Border: कड.
Widget list मध्ये खाली असल्यास इतर widgets च्या मागे येतो (↑ ↓ buttons ने क्रम बदला).

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // लाल
disp.hide(W_HEADER);

Rectangle: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Label

स्थिर लिखाण: titles, captions, units.

कसे वापरावे

Text मध्ये लिहा. Font, Size, Align.
Language: मराठी, हिंदी… (प्रकरण 9).
Changeable ✓ केल्यास host text बदलू शकतो.
No background: खालचे दिसते.

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ लागते

Label: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Number

संख्या दाखवण्यासाठी: temperature, speed, count, setpoint.

कसे वापरावे

Value (सुरुवात), Min, Max.
Decimals 1 केल्यास 253 → 25.3. Unit: °C, %, V.
Keys: UP / DOWN ने बदला, Step.
Remember value: power गेली तरी लक्षात राहते.

Value

संख्या (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Text

Host ने पाठवलेली एक ओळ: status, नाव, संदेश.

कसे वापरावे

Max length: किती अक्षरे.
Font, Size, Align, रंग.
Language आणि Live text ने मराठीसारख्या भाषाही (NOR model).

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Bar

Level, progress, tank, battery.

कसे वापरावे

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Touch असलेल्या models मध्ये बोटाने ओढता येतो (slider).
Controls brightness: हा bar backlight नियंत्रित करतो.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Button

दाबायचे button: page बदलणे, start / stop.

कसे वापरावे

Caption: लिखाण. Style: normal, outline, pill, checkbox.
Mode: push (दाबताना फक्त) / toggle (on-off).
Key: board button (MENU…) हेही दाबते.
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

Arc / gauge

गोल meter: speed, power, volume.

कसे वापरावे

Start angle, Sweep (किती अंश), Thickness.
Show value: मध्यभागी संख्या.
Knob ✓: touch ने फिरवता येतो.
Keys + / −.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Switch

ON / OFF slider: fan, light, mode.

कसे वापरावे

Switched on: सुरुवातीची स्थिती.
Key: board button दाबल्यास बदलतो. Touch नेही.
Remember value.

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator ने बदलल्यास: onChange(W_SWITCH, 0/1)

Switch: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Select

Drop-down: अनेक options पैकी एक.

कसे वापरावे

Options: Low|Medium|High (| ने वेगळे करा).
Selected: सुरुवातीचा option.
Keys: open / OK, up, down. Touch वर list उघडते.

Value

0, 1, 2… (option ची जागा)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Icon

Wi-Fi, battery, bell सारखी चिन्हे.

कसे वापरावे

Symbol: icon निवडा. Icon size, Scale.
Host switches icons: host icon बदलू शकतो.

Value

Icon क्रमांक (0 = काही नाही)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

अनेक buttons, फक्त एक निवडता येतो (mode, speed level).

कसे वापरावे

Options: Low|Mid|High. Columns.
Style: buttons किंवा radio.

Value

निवडलेल्या button ची जागा (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Switch array

अनेक ON / OFF switches एकत्र (zones, relays).

कसे वापरावे

Options: प्रत्येक switch चे नाव. Columns.
Style: switches किंवा checkboxes.

Value

Bits: bit 0 = पहिला switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Keypad

संख्या keys: PIN, setpoint.

कसे वापरावे

Keys: 1|2|3|…|OK. Columns.
Types into: एका Input box मध्ये लिहितो.
Keys move / press: board buttons नेही.

Value

दाबलेल्या key ची जागा

Host code (Arduino)

disp.onChange(myChange);   // प्रत्येक key दाबल्यावर

Keypad: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Keyboard

Screen वरील QWERTY keyboard: नाव, Wi-Fi password.

कसे वापरावे

Types into: एक Input box.
Language: मराठी, हिंदी, तमिळ… English अक्षरे type केल्यास त्या भाषेत दिसतात (प्रकरण 9).
Input box ला स्पर्श केल्यावर keyboard उघडण्याची सोय (Keyboard on tap).

Value

अक्षराचा code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Image / logo

Logo, चित्रे.

कसे वापरावे

Change image…: PNG, JPG, SVG. Editor display ला योग्य आकार करतो.
Colours: Full colour किंवा Two colours (logo, खूप कमी flash).
Fit, Border shape (Rounded, Circle…).

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display वर

Settings

Commands: PC वरून Send, code Copy

Chart

Trend: temperature इतिहास.

कसे वापरावे

Style: line, thick, bars. Points, Min, Max, Grid lines.

Value

प्रत्येक setValue उजवीकडे एक नवीन point (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // दर सेकंदाला

Chart: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Input box

Keypad / keyboard ज्यात लिहितात तो box.

कसे वापरावे

Placeholder, Max length.
Kind: text, number, password (* दिसते), Indian language (English मध्ये type करा, मराठी, हिंदी, तमिळ… मध्ये दिसेल; प्रकरण 9).

Value

Number kind: OK दाबल्यावर संख्या

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Message

अनेक ओळी; शब्द आपोआप पुढच्या ओळीत.

कसे वापरावे

Message: | = नवीन ओळ. Line gap.
Language, Live text (प्रकरण 9).
Changeable: host बदलू शकतो.

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter बदला|Service: 3 दिवस");

Message: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

Animation (GIF)

GIF animation: logo, loading, इशारा.

कसे वापरावे

Choose GIF…: एक GIF file. Fit.
Playing: loop, once, stopped.
मोठ्या / खूप रंगीत GIF साठी NOR model चांगला.

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // एकदा

Animation (GIF): Display वर — Display वर

Roller (picker)

Scroll होणारा picker: programs, modes.

कसे वापरावे

Options: Off|Low|Medium|High. Rows shown: 3, 5, 7.
Keys next / previous. Touch मध्ये वरची किंवा खालची row स्पर्श करा.
Remember value.

Value

निवडलेली row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Display वर — Display वर

Roller (picker): Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

QR code

Phone ने scan करण्यासाठी: website, Wi-Fi, phone, manual link.

कसे वापरावे

Text / link: https://…, WIFI:T:WPA;S:नाव;P:password;;, tel:….
Border shape, No background.
मोठा box = सोपे scan.

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC वरून Send, code Copy — Commands: PC वरून Send, code Copy

8

Actions: संपूर्ण यादी

Widget मध्ये काही घडल्यावर display स्वतः करतो ते. Host लागत नाही. उदाहरणे: Tutorial step 12, 14.

When (केव्हा)	कोणते widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	तेच widgets

Do (काय)	Target / value
Go to page	एक page
Set value of	widget, value
Add to / Subtract from	widget, किती
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer असलेले models
Brightness (%)	brightness control असलेले models

9

भाषा

एखाद्या page वर Message ठेवा (Label, Text, Button मध्येही हेच).

Language: मराठी (हिंदी, मल्याळम, तमिळ, गुजराती, पंजाबी, बंगाली, European, Русский, Ελληνικά).
Phrases मध्ये वाक्य (अनेक असल्यास |).
Live text ✓: host कोणतेही वाक्य UTF-8 मध्ये पाठवू शकतो; display जोडाक्षरे आणि मात्रा योग्य काढतो. Tick केल्यावर field "Message" आणि "Changeable" ✓ होते.

English व्यतिरिक्त live text साठी NOR model (4, 8, 16) लागतो. Fonts factory मधूनच NOR मध्ये आहेत.

Language, Message, Changeable लाल चौकटीत

Preview मध्ये मल्याळम — Live text preview मध्ये.

Keyboard वर मराठी, हिंदी, तमिळ… type करणे

Screen वरील keyboard वर English अक्षरे दाबा, box मध्ये ती मराठीत (किंवा हिंदी, मल्याळम, तमिळ, गुजराती, पंजाबी, बंगालीत) दिसतील: marAThI → मराठी. Phone वरील phonetic typing सारखे.

Keyboard जोडा.
Language: भाषा निवडा.

Keyboard अजून कोणत्याही Input box मध्ये लिहीत नसेल ("Types into" = None), तर Language निवडल्यावर keyboard च्या वर एक Input box आपोआप येईल आणि keyboard त्यात लिहील.

Keyboard च्या वर आपोआप आलेला Input box — भाषा निवडल्यावर: keyboard च्या वर Input box, "Types into" = तोच box.

भाषा त्या Input box ची setting आहे. Box निवडूनही बदलता येते:

Kind: Indian language (typed in English).
Language: भाषा (मराठी).
Letter size: 16, 20, 24 px.
खाली त्या भाषेचे typing rules दिसतात.

Max length जास्तीत जास्त 24 English अक्षरे. "Show typed text" फक्त keyboard box झाकतो तेव्हा (pop-up keyboard). Box keyboard च्या वर दिसत असेल तर tick काढा, नाहीतर तेच लिखाण दोन box मध्ये दिसेल.

Input box settings: Kind, Language, Letter size लाल चौकटीत

सात भाषांमध्ये type केलेले box — Display वर असे: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

भाषा	Type करा	दिसेल	लक्षात ठेवा
मराठी / हिंदी	`marAThI`, `namaste`, `dhanyavAd`	मराठी, नमस्ते, धन्यवाद	A I U = दीर्घ स्वर, T D = ट ड, t d = त द, L = ळ, x = क्ष, M = ं
मल्याळम	`namaskaaram`, `kEraLam`	നമസ്കാരം, കേരളം	E O = दीर्घ, L = ള, N = ണ, t = റ്റ, zh = ഴ
तमिळ	`vaNakkam`, `thamizh`	வணக்கம், தமிழ்	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க
गुजराती	`kem chho`	કેમ છો	मराठी / हिंदी सारखेच rules
पंजाबी	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	दुहेरी अक्षर = ੱ, अक्षराआधी n m = ੰ
बंगाली	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = मात्रा नाही, O = ো, ng = ং

NOR model (4T, 8T, 16T…) लागतो: भाषा fonts NOR मध्ये आहेत. Host वाचतो (readText) तेव्हा type केलेली English अक्षरे मिळतात.

10

Host MCU वरून (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: प्रत्येक widget आणि page चे नाव (W_LEVEL, PAGE_SETTINGS…). Host program मध्ये जोडा.
Write to project folder…: firmware आणि host header एकत्र.
NOR data file: फक्त chip programmer साठी.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator ने UP / DOWN ने level बदलल्यास येथे कळते
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display तयार होईपर्यंत (5 s पर्यंत)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value दाखवा
  disp.loop();                           // display कडून आलेले संदेश
  delay(200);
}

Function	काम
setValue(id, v)	Number, bar, LED, switch… ची value
setText(id, "…")	Changeable text (Live text मध्ये UTF-8)
page(PAGE_…)	Page बदला
show(id) / hide(id)	Widget दाखवा / लपवा
setColor(id, c) / setBackground(id, c)	रंग (RGB565)
getValue(id) / readText(id, buf, n)	Display ची value / text वाचा
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value बदलली, board button, page बदलले, display restart झाला
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (PLC सोबत)

Pages list मध्ये एक page click करा, मग Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: PLC मध्येही हेच.
📋 Register table (CSV): सर्व registers ची यादी; Excel मध्ये उघडून PLC programmer ला द्या.
Device panel चा baud Modbus baud करा आणि Flash.

Widget निवडल्यावर Name खाली त्याचे registers: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table लाल चौकटीत

Register	Address	अर्थ
Holding (4x)	0 … N-1	Widget value (widget list मधील त्याची जागा). लिहिल्यास display वर.
Holding	1000	Page; page ID लिहिल्यास ते page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	दाखवा (1) / लपवा (0)
Discrete input (1x)	0 … N-1	Button दाबले का (वाचल्यावर clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: दाबले / धरून ठेवले
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16. Values signed 16-bit. Widgets जोडल्यास किंवा काढल्यास addresses बदलतात; PLC ला नवीन CSV द्या.

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC चे (किंवा USB-RS485 चे) A / B

Flash साठी USB-serial (TTL) cable लागते. USB-serial TXD आणि MAX485 RO एकत्र थेट RC7 ला जोडू नका: jumper, किंवा TXD मध्ये 1 kΩ resistor आणि RB4 वर 10 kΩ pull-up.

PLC शिवाय PC वरून test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project मध्ये Store in:

MCU flash: English fonts, लहान चित्रे. Lite model.
SPI NOR flash: मोठी चित्रे, animation, इतर भाषा. 4 / 8 / 16 models (Board model निवडल्यावर आपोआप).

NOR मध्ये font library factory मधूनच आहे. Flash करताना फक्त design ची चित्रे पाठवली जातात.

13

Widget list, Problems

14

Board, pins

भाग	PIC pin	टीप
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus मध्ये Editor मध्ये दिलेला baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = काढत आहे. Modbus मध्ये RS-485 DE/RE.
INT	RC0	LOW = host साठी संदेश आहे (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND ला) किंवा TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	असलेल्या models मध्ये
Status LED	RB5	चालू असताना दर 0.5 s ने लुकलुकतो

Display settings: Tutorial step 3. प्रत्येक बदलानंतर Flash.

15

Self-test

Connect केल्यावर Device panel मध्ये 🔧 Self-test. कोणतेही design flash असले तरी चालते.

Colours: लाल, हिरवा, निळा, पांढरा, काळा, राखाडी पट्टे, वर डावीकडे पिवळा चौकोन. चौकोन दुसऱ्या कोपऱ्यात असल्यास Orientation / Mirror दुरुस्त करा. START किंवा tap: पुढे.
Buttons, touch: चारही buttons दाबा; प्रत्येक box हिरवा होईल. Touch असल्यास dot. एखादे button चालत नसल्यास START दोनदा.
Parts: NOR, font library, EEPROM: PASS / FAIL. Buzzer, backlight test. START: नेहमीची screen.

16

समस्या निवारण

समस्या	काय करावे
Display पूर्ण पांढरा	Display चे DC, CS, RST wires आणि 3.3 V supply तपासा.
आरशासारखे / उलटे	Display entry, Mirror, Orientation (Tutorial step 3). Self-test चा पिवळा चौकोन वर डावीकडे असावा.
रंग चुकीचे	लाल निळा दिसतो: Swap red/blue. पांढरा काळा दिसतो: Invert colours.
Buttons नेहमी दाबलेले	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223".
Touch चुकीच्या जागी	Touch calibration → Calibrate…: display वरील चार + खुणांना एकेक करून स्पर्श करा.
Flash अयशस्वी / port busy	Disconnect करून Flash. "Waiting for bootloader": board power off / on.
Connect होत नाही	TX / RX उलटे? (adapter TXD → RC7). Baud 115200 (Modbus design मध्ये Modbus baud).
लिखाण "????"	Widget ची Language दुरुस्त करा. English व्यतिरिक्त live text साठी NOR model.
Modbus उत्तर नाही	Address, baud, parity सारखे आहेत का? A / B बदला. Page बदलल्यावर PLC timeout 3 s.
Problems मध्ये error	Error वर click करून ते widget दुरुस्त करा. Error असताना Flash होणार नाही.

PixPIO 2.8" smart display · વપરાશકર્તા માર્ગદર્શિકા

PixPIO વપરાશકર્તા માર્ગદર્શિકા

Screen design કરો, એક click માં display પર મોકલો. Arduino, PIC, STM32 જેવા કોઈ પણ microcontroller થી, PLC થી Modbus દ્વારા, અથવા સીધા PC થી વાપરો. Host વગર ફક્ત power થી પણ ચાલે છે.

Screenshots માં લાલ ખાનાં એ step માં વાપરવાના settings / buttons છે.

આ માર્ગદર્શિકાના tutorial જેવું design display પર: host વગર, ફક્ત Actions.

1

PixPIO શું છે

PixPIO પોતાના processor (PIC18F27Q84) સાથેનું 2.8" (320×240) colour display board છે. Screens, buttons, bars, gauges, ચિત્રો બધું PC પર PixPIO Editor માં design થાય છે. Display તેને જાતે દોરે છે. Host (MCU અથવા PLC) ને ફક્ત "level = 80" જેવા નાના સંદેશા મોકલવાના હોય છે.

LiteNOR નથી, touch નથી. English fonts.

4 / 4T4 MB NOR (બધા fonts, ભાષાઓ). T = touch.

8 / 8T8 MB NOR. વધુ ચિત્રો, animation.

16 / 16T16 MB NOR. મોટાં ચિત્રો, ઘણી ભાષાઓ.

Board પર 4 buttons: MENU UP DOWN START (push buttons અથવા TTP223 touch pads). કેટલાક models માં brightness control અને buzzer પણ છે.

PixPIO કેમ

Live editingUSB જોડો: Editor નો દરેક ફેરફાર display પર તરત. SD card નહીં, લાંબું upload નહીં.

30 તૈયાર widgetsGauge, chart, keyboard, QR code, animation: drag કરો, બસ.

કોઈ પણ hostUART, I2C કે SPI. PIC, Arduino, ESP32, STM32 પર tested. Host વગર પણ.

તમારી ભાષાગુજરાતી, હિન્દી, મલયાલમ… screen પર, phonetic typing સાથે.

Free toolsPixPIO Editor અને VS Code માટે PICPIO મફત છે.

2

Install કરવું

Visual Studio Code install કરો (Windows, મફત).
VS Code માં PICPIO extension: Extensions → "…" → Install from VSIX… → સાથે મળેલી picpio-x.y.z.vsix.
VS Code ફરી ખોલો. PICPIO menu માં (અથવા Ctrl+Shift+P → "PixPIO") PixPIO. Browser માં Editor ખુલશે.
USB-serial cable (CH340) PC માં લગાવો. Device Manager → Ports માં USB-SERIAL CH340 (COM3) જેવું દેખાવું જોઈએ.

Editor ને internet ની જરૂર નથી. Display સાથેનો સંપર્ક VS Code ચલાવે છે તે "bridge" દ્વારા થાય છે. Editor વાપરતી વખતે VS Code ખુલ્લું રાખો.

3

Editor પરિચય

પહેલી વાર ખોલતાં Editor માં એક Example project હોય છે (toolbar નું Example દબાવવાથી હંમેશાં પાછો મળે છે; 8 pages, મોટાભાગના widgets).

ભાગ	જગ્યા	કામ
Toolbar	ઉપર	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	ઉપર ડાબે	Screens. + નવું page, ⧉ copy, − દૂર કરો. "start" = પહેલું દેખાતું.
Add widget	ડાબે	Click કરતાં તે widget screen પર ઉમેરાય છે.
Preview	વચ્ચે	Display પર દેખાશે તેમ. Drag કરીને ખસેડો, વાદળી ચોરસ ખેંચીને માપ બદલો.
Properties	જમણે	પસંદ કરેલા widget ના settings. Pages list માં page click કરતાં page અને આખા project ના settings. ? = દરેક setting ની સમજૂતી.
Problems	નીચે ડાબે	Design ની ભૂલો, ચેતવણીઓ.
Device	નીચે જમણે	COM port, Connect, Mirror, Storage, Self-test, Touch, PC થી commands (પ્રકરણ 6).

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo.

4

Tutorial: Water Tank (શરૂઆતથી)

ટાંકીનું level બતાવતી 2-page screen. UP / DOWN થી level બદલાશે, bar સાથે બદલાશે. 100 થતાં "TANK FULL", 0 થતાં "TANK EMPTY". MENU settings page ખોલશે. Host ની જરૂર નથી. લગભગ 15 મિનિટ.

STEP 1

નવો project

Toolbar માં New. એક ખાલી screen (page "main") મળશે.

STEP 2

Board model

જમણી બાજુ Screen · whole project માં Board model: board ના label પર લખેલું model (અહીં PixPIO 4T).

તે display, touch, buttons, brightness, buzzer, NOR આપમેળે set કરે છે. Editor તેને યાદ રાખે છે.

STEP 3

Display (જરૂર હોય તો જ)

ચિત્ર ફરેલું હોય અથવા રંગ ખોટા હોય તો જ:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation લાલ ખાનાંમાં

STEP 4

Page નું નામ

જમણે ઉપર Name: home. Host code માં આ PAGE_HOME છે.

STEP 5

બીજું page

Pages નું +. નવા page નું Name: settings. પછી list માં home click કરીને પાછા આવો.

Pages: home start, settings; + લાલ ખાનામાં

STEP 6

ઉપરનો bar (Rectangle)

Add widget માં Rectangle. x, y, width, height: 0, 0, 320, 30 (અથવા mouse થી ખેંચો). Colours માં રંગ.

Rectangle ઉમેર્યો; Rectangle button, x y width height લાલ ખાનાંમાં

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, જગ્યા 8, 7, 304, 16. Font, Size, Align Text ભાગમાં.

Label: Name title, Text WATER TANK લાલ ખાનાંમાં

STEP 8

Level (Number)

Number: Name level, જગ્યા 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power જાય તો પણ યાદ રહે છે

Number: Value, Unit, Min, Max, Remember value લાલ ખાનાંમાં

STEP 9

Board buttons થી બદલવું

Keys (buttons): Key + UP, Key − DOWN, Step 5. દબાવી રાખતાં સતત બદલાય છે.

Key + UP, Key − DOWN, Step 5 લાલ ખાનાંમાં

STEP 10

Level bar

Bar: Name level_bar, જગ્યા 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, લીલો segment bar — અત્યાર સુધી: title, number, bar.

STEP 11

છુપાયેલા સંદેશા

Label: Name full_msg, Text TANK FULL, જગ્યા 10, 120, 300, 20, Hidden ✓.

એ જ જગ્યાએ બીજું એક: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Hidden widgets preview માં ટપકાંવાળા દેખાય છે; display પર શરૂઆતમાં દેખાતા નથી.

Label: Text TANK FULL, Hidden લાલ ખાનાંમાં

STEP 12

Actions: number પર 5 actions

Preview માં level click કરો. Actions (no code) → + Add action 5 વાર:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

એક લીટી દૂર કરવા ✕.

STEP 13

Settings button

Button: Name btn_settings, જગ્યા 10, 200, 145, 34, Caption MENU: Settings.

STEP 14

Button દબાવતાં page બદલવું

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: board નું MENU પણ એ જ કરશે.

STEP 15

Settings page: Back button, QR

Pages માં settings. Step 6, 7 જેમ Rectangle અને "SETTINGS" Label.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = તમારી website, Border shape = Rounded.

QR: Text / link, Border shape લાલ ખાનાંમાં

STEP 16

Save

Save: .pixpio file. "Unsaved changes" દેખાય ત્યાં સુધી save થયું નથી. હવે board જોડીને Flash (પ્રકરણ 5).

5

Board જોડવું, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Board ની પોતાની supply ન હોય તો જ

STEP 2

Connect

Device માં COM port, baud 115200, Connect. Dot લીલું = જોડાયું. Port ન દેખાય તો ↻.

STEP 3

⚡ Flash to display

Toolbar માં ⚡ Flash to display.
Design નું firmware બનીને cable થી મોકલાય છે; એક window માં progress. પહેલી વાર 1–2 મિનિટ.
"UPLOAD SUCCESSFUL" આવતાં display નવી screen સાથે શરૂ થાય છે.
ચિત્રો અથવા બીજી ભાષાઓ હોય (NOR models) તો તે પણ આ જ cable થી NOR માં જાય છે.

SD card ની જરૂર નથી. દરેક ફેરફાર માટે: Editor માં બદલો, Flash.

Tutorial design display પર: UP / DOWN થી level બદલો, 100 કરીને "TANK FULL" જુઓ, MENU દબાવીને settings page.

6

PC થી display નિયંત્રિત કરવું

Connect કર્યા પછી host MCU વગર જ PC થી દરેક widget અજમાવી શકાય છે. ત્રણ રીતો:

1. Quick commands (Device panel)

Page + Show: તે page display પર ખુલશે.
Widget પસંદ કરો, Value લખો, Set value: number, bar, LED, switch… બદલાશે.
text + Set text: Changeable text બદલાશે.
Hide / Show: widget છુપાવો / બતાવો.
Key + Press: જાણે board button (MENU, UP…) દબાવ્યું હોય.

2. Commands for this widget

કોઈ પણ widget પસંદ કરો, properties ના છેક નીચે Commands for this widget છે. દરેક command માટે:

Send: PC થી તરત display પર મોકલે છે (connected હોવું જોઈએ).
Copy: host program માં ચોંટાડવાનો code (pd_set_value(&disp, W_NUMBER, 253);).
લીલા bytes: UART / I2C / SPI થી સીધી મોકલવાની frame (બીજી ભાષાઓમાં program લખતી વખતે).

Settings બદલતાં commands પણ સાથે બદલાય છે. દરેક widget ના commands પ્રકરણ 7 માં.

Number widget commands; દરેક માટે Copy, Send

3. Mirror, Touch

Mirror ✓: display પર જે થાય છે (button દબાવવું, value બદલવી) તે preview માં પણ તરત દેખાય છે.
☝ Touch: preview પર mouse click = display ને આંગળીથી સ્પર્શ (👆 cursor, પીળું dot).
🔧 Self-test, ⬆ Storage: પ્રકરણ 15, 12.

Mirror, Storage, Self-test, Touch લાલ ખાનાંમાં

7

દરેક widget

દરેક widget માટે: શેના માટે, કેવી રીતે વાપરવું, value શું છે, host code. ત્રણ ચિત્રો: Display પર (New project માં તે widget ઉમેરતાં), Settings, Commands (PC થી Send / code Copy). Add widget list માં આ જ નામો છે.

Rectangle

Header bars, background boxes, cards. બીજા widgets ની પાછળ મૂકી શકાય.

કેવી રીતે વાપરવું

Colours માં Background (fill), Text / border રંગ.
Corner radius: ગોળ ખૂણા. Border: કિનારી.
Widget list માં નીચે હોય તો બીજા widgets ની પાછળ આવે (↑ ↓ buttons થી ક્રમ બદલો).

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // લાલ
disp.hide(W_HEADER);

Rectangle: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Label

સ્થિર લખાણ: titles, captions, units.

કેવી રીતે વાપરવું

Text માં લખો. Font, Size, Align.
Language: ગુજરાતી, હિન્દી… (પ્રકરણ 9).
Changeable ✓ કરતાં host text બદલી શકે.
No background: નીચેનું દેખાય.

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ જોઈએ

Label: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Number

સંખ્યા બતાવવા: temperature, speed, count, setpoint.

કેવી રીતે વાપરવું

Value (શરૂઆત), Min, Max.
Decimals 1 કરતાં 253 → 25.3. Unit: °C, %, V.
Keys: UP / DOWN થી બદલો, Step.
Remember value: power જાય તો પણ યાદ રહે.

Value

સંખ્યા (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Text

Host મોકલે તે એક લીટી: status, નામ, સંદેશ.

કેવી રીતે વાપરવું

Max length: કેટલા અક્ષરો સુધી.
Font, Size, Align, રંગો.
Language અને Live text થી ગુજરાતી જેવી ભાષાઓ પણ (NOR model).

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Bar

Level, progress, tank, battery.

કેવી રીતે વાપરવું

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Touch વાળા models માં આંગળીથી ખેંચી શકાય (slider).
Controls brightness: આ bar backlight નિયંત્રિત કરે.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Button

દબાવવાનું button: page બદલવું, start / stop.

કેવી રીતે વાપરવું

Caption: લખાણ. Style: normal, outline, pill, checkbox.
Mode: push (દબાવો ત્યારે જ) / toggle (on-off).
Key: board button (MENU…) પણ તેને દબાવે.
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

Arc / gauge

ગોળ meter: speed, power, volume.

કેવી રીતે વાપરવું

Start angle, Sweep (કેટલા ડિગ્રી), Thickness.
Show value: વચ્ચે સંખ્યા.
Knob ✓: touch થી ફેરવી શકાય.
Keys + / −.

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Switch

ON / OFF slider: fan, light, mode.

કેવી રીતે વાપરવું

Switched on: શરૂઆતની સ્થિતિ.
Key: board button દબાવતાં બદલાય. Touch થી પણ.
Remember value.

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator બદલે તો: onChange(W_SWITCH, 0/1)

Switch: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Select

Drop-down: ઘણા options માંથી એક.

કેવી રીતે વાપરવું

Options: Low|Medium|High (| થી અલગ કરો).
Selected: શરૂઆતનો option.
Keys: open / OK, up, down. Touch પર list ખુલે.

Value

0, 1, 2… (option ની જગ્યા)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Spinner

"કામ ચાલુ છે" animation.

કેવી રીતે વાપરવું

Style: dots, comet, arc…
Spinning, Speed. 0 = blank: અટકે ત્યારે છુપાય.

Value

1 ફરે છે, 0 અટક્યું

Host code (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Wi-Fi, battery, bell જેવાં ચિહ્નો.

કેવી રીતે વાપરવું

Symbol: icon પસંદ કરો. Icon size, Scale.
Host switches icons: host icon બદલી શકે.

Value

Icon નંબર (0 = કંઈ નહીં)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

ઘણાં buttons, ફક્ત એક પસંદ થાય (mode, speed level).

કેવી રીતે વાપરવું

Options: Low|Mid|High. Columns.
Style: buttons અથવા radio.

Value

પસંદ કરેલા button ની જગ્યા (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Switch array

ઘણા ON / OFF switches સાથે (zones, relays).

કેવી રીતે વાપરવું

Options: દરેક switch નું નામ. Columns.
Style: switches અથવા checkboxes.

Value

Bits: bit 0 = પહેલું switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Keypad

સંખ્યા keys: PIN, setpoint.

કેવી રીતે વાપરવું

Keys: 1|2|3|…|OK. Columns.
Types into: એક Input box માં લખે.
Keys move / press: board buttons થી પણ.

Value

દબાવેલી key ની જગ્યા

Host code (Arduino)

disp.onChange(myChange);   // દરેક key દબાવતાં

Keypad: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Keyboard

Screen પર QWERTY keyboard: નામ, Wi-Fi password.

કેવી રીતે વાપરવું

Types into: એક Input box.
Language: ગુજરાતી, હિન્દી, તમિલ… English અક્ષરો type કરો, તે ભાષામાં દેખાશે (પ્રકરણ 9).
Input box ને સ્પર્શતાં keyboard ખોલવાની સગવડ (Keyboard on tap).

Value

અક્ષરનો code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Image / logo

Logo, ચિત્રો.

કેવી રીતે વાપરવું

Change image…: PNG, JPG, SVG. Editor display માટે યોગ્ય માપ કરે.
Colours: Full colour અથવા Two colours (logo, બહુ ઓછી flash).
Fit, Border shape (Rounded, Circle…).

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display પર

Settings

Commands: PC થી Send, code Copy

Chart

Trend: temperature ઇતિહાસ.

કેવી રીતે વાપરવું

Style: line, thick, bars. Points, Min, Max, Grid lines.

Value

દરેક setValue જમણે એક નવો point (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // દર સેકન્ડે

Chart: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Input box

Keypad / keyboard જેમાં લખે તે box.

કેવી રીતે વાપરવું

Placeholder, Max length.
Kind: text, number, password (* દેખાય), Indian language (English માં type કરો, ગુજરાતી, હિન્દી, તમિલ… માં દેખાય; પ્રકરણ 9).

Value

Number kind: OK દબાવતાં સંખ્યા

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Message

ઘણી લીટીઓ; શબ્દો આપમેળે આગલી લીટીમાં.

કેવી રીતે વાપરવું

Message: | = નવી લીટી. Line gap.
Language, Live text (પ્રકરણ 9).
Changeable: host બદલી શકે.

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter બદલો|Service: 3 દિવસ");

Message: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

Animation (GIF)

GIF animation: logo, loading, ચેતવણી.

કેવી રીતે વાપરવું

Choose GIF…: એક GIF file. Fit.
Playing: loop, once, stopped.
મોટા / બહુ રંગીન GIF માટે NOR model સારું.

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // એક વાર

Animation (GIF): Display પર — Display પર

Roller (picker)

Scroll થતો picker: programs, modes.

કેવી રીતે વાપરવું

Options: Off|Low|Medium|High. Rows shown: 3, 5, 7.
Keys next / previous. Touch માં ઉપર કે નીચેની row સ્પર્શો.
Remember value.

Value

પસંદ કરેલી row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Display પર — Display પર

Roller (picker): Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

QR code

Phone થી scan કરવા: website, Wi-Fi, phone, manual link.

કેવી રીતે વાપરવું

Text / link: https://…, WIFI:T:WPA;S:નામ;P:password;;, tel:….
Border shape, No background.
મોટું box = સરળ scan.

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC થી Send, code Copy — Commands: PC થી Send, code Copy

8

Actions: સંપૂર્ણ યાદી

Widget માં કંઈક થાય ત્યારે display જાતે જે કરે છે. Host ની જરૂર નથી. ઉદાહરણો: Tutorial step 12, 14.

When (ક્યારે)	કયા widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	એ જ widgets

Do (શું)	Target / value
Go to page	એક page
Set value of	widget, value
Add to / Subtract from	widget, કેટલું
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer વાળા models
Brightness (%)	brightness control વાળા models

9

ભાષાઓ

કોઈ page પર Message મૂકો (Label, Text, Button માં પણ આ જ).

Language: ગુજરાતી (હિન્દી, મલયાલમ, મરાઠી, તમિલ, પંજાબી, બંગાળી, European, Русский, Ελληνικά).
Phrases માં વાક્ય (ઘણાં હોય તો |).
Live text ✓: host કોઈ પણ વાક્ય UTF-8 માં મોકલી શકે; display જોડાક્ષરો અને માત્રાઓ સાચી દોરે છે. Tick કરતાં field "Message" અને "Changeable" ✓ થાય છે.

English સિવાયના live text માટે NOR model (4, 8, 16) જોઈએ. Fonts factory થી જ NOR માં છે.

Language, Message, Changeable લાલ ખાનાંમાં

Preview માં મલયાલમ — Live text preview માં.

Keyboard પર ગુજરાતી, હિન્દી, તમિલ… type કરવું

Screen ના keyboard પર English અક્ષરો દબાવો, box માં તે ગુજરાતીમાં (અથવા હિન્દી, મલયાલમ, મરાઠી, તમિલ, પંજાબી, બંગાળીમાં) દેખાશે: kem chho → કેમ છો. Phone ના phonetic typing જેવું.

Keyboard ઉમેરો.
Language: ભાષા પસંદ કરો.

Keyboard હજી કોઈ Input box માં લખતું ન હોય ("Types into" = None), તો Language પસંદ કરતાં keyboard ની ઉપર એક Input box આપમેળે આવશે અને keyboard તેમાં લખશે.

Keyboard ની ઉપર આપમેળે આવેલું Input box — ભાષા પસંદ કરતાં: keyboard ની ઉપર Input box, "Types into" = તે જ box.

ભાષા તે Input box નું setting છે. Box પસંદ કરીને પણ બદલી શકાય:

Kind: Indian language (typed in English).
Language: ભાષા.
Letter size: 16, 20, 24 px.
નીચે તે ભાષાના typing rules દેખાય છે.

Max length વધુમાં વધુ 24 English અક્ષરો. "Show typed text" ફક્ત ત્યારે જ જોઈએ જ્યારે keyboard box ને ઢાંકે (pop-up keyboard). Box keyboard ની ઉપર દેખાતું હોય તો tick કાઢો, નહીં તો એ જ લખાણ બે box માં દેખાશે.

Input box settings: Kind, Language, Letter size લાલ ખાનાંમાં

સાત ભાષાઓમાં type કરેલાં box — Display પર આ રીતે: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

ભાષા	Type કરો	દેખાશે	યાદ રાખો
ગુજરાતી	`kem chho`, `gujarAtI`, `AbhAr`	કેમ છો, ગુજરાતી, આભાર	A I U = દીર્ઘ સ્વર, T D = ટ ડ, t d = ત દ, L = ળ, x = ક્ષ, M = ં
હિન્દી / મરાઠી	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	ગુજરાતી જેવા જ rules
મલયાલમ	`namaskaaram`, `kEraLam`	നമസ്കാരം, കേരളം	E O = દીર્ઘ, L = ള, N = ണ, t = റ്റ, zh = ഴ
તમિલ	`vaNakkam`, `thamizh`	வணக்கம், தமிழ்	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க
પંજાબી	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	બેવડો અક્ષર = ੱ, અક્ષર પહેલાં n m = ੰ
બંગાળી	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = માત્રા નહીં, O = ো, ng = ং

NOR model (4T, 8T, 16T…) જોઈએ: ભાષા fonts NOR માં છે. Host વાંચે (readText) ત્યારે type કરેલા English અક્ષરો મળે છે.

10

Host MCU થી (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: દરેક widget અને page નું નામ (W_LEVEL, PAGE_SETTINGS…). Host program માં ઉમેરો.
Write to project folder…: firmware અને host header સાથે.
NOR data file: ફક્ત chip programmer માટે.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator UP / DOWN થી level બદલે તો અહીં ખબર પડે
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display તૈયાર થાય ત્યાં સુધી (5 s સુધી)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value બતાવો
  disp.loop();                           // display ના સંદેશા
  delay(200);
}

Function	કામ
setValue(id, v)	Number, bar, LED, switch… ની value
setText(id, "…")	Changeable text (Live text માં UTF-8)
page(PAGE_…)	Page બદલો
show(id) / hide(id)	Widget બતાવો / છુપાવો
setColor(id, c) / setBackground(id, c)	રંગ (RGB565)
getValue(id) / readText(id, buf, n)	Display ની value / text વાંચો
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value બદલાઈ, board button, page બદલાયું, display restart થયું
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (PLC સાથે)

Pages list માં એક page click કરો, પછી Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: PLC માં પણ આ જ.
📋 Register table (CSV): બધા registers ની યાદી; Excel માં ખોલીને PLC programmer ને આપો.
Device panel નો baud Modbus baud કરો અને Flash.

Widget પસંદ કરતાં Name નીચે તેના registers: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table લાલ ખાનાંમાં

Register	Address	અર્થ
Holding (4x)	0 … N-1	Widget value (widget list માં તેની જગ્યા). લખતાં display પર.
Holding	1000	Page; page ID લખો તો તે page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	બતાવો (1) / છુપાવો (0)
Discrete input (1x)	0 … N-1	Button દબાયું? (વાંચતાં clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: દબાયું / પકડી રાખ્યું
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16. Values signed 16-bit. Widgets ઉમેરતાં કે કાઢતાં addresses બદલાય છે; PLC ને નવી CSV આપો.

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC ના (અથવા USB-RS485 ના) A / B

Flash માટે USB-serial (TTL) cable જોઈએ. USB-serial TXD અને MAX485 RO ને સાથે સીધા RC7 સાથે ન જોડો: jumper, અથવા TXD માં 1 kΩ resistor અને RB4 પર 10 kΩ pull-up.

PLC વગર PC થી test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project માં Store in:

MCU flash: English fonts, નાનાં ચિત્રો. Lite model.
SPI NOR flash: મોટાં ચિત્રો, animation, બીજી ભાષાઓ. 4 / 8 / 16 models (Board model પસંદ કરતાં આપમેળે).

NOR માં font library factory થી જ છે. Flash વખતે ફક્ત design નાં ચિત્રો મોકલાય છે.

13

Widget list, Problems

14

Board, pins

ભાગ	PIC pin	નોંધ
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus માં Editor માં આપેલો baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = દોરે છે. Modbus માં RS-485 DE/RE.
INT	RC0	LOW = host માટે સંદેશ છે (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND પર) અથવા TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	જે models માં હોય
Status LED	RB5	ચાલુ હોય ત્યારે દર 0.5 s એ ઝબકે છે

Display settings: Tutorial step 3. દરેક ફેરફાર પછી Flash.

15

Self-test

Connect કર્યા પછી Device panel માં 🔧 Self-test. કોઈ પણ design flash હોય તો પણ ચાલે છે.

Colours: લાલ, લીલો, વાદળી, સફેદ, કાળો, રાખોડી પટ્ટા, ઉપર ડાબે પીળો ચોરસ. ચોરસ બીજા ખૂણામાં હોય તો Orientation / Mirror સુધારો. START અથવા tap: આગળ.
Buttons, touch: ચારેય buttons દબાવો; દરેક box લીલું થશે. Touch હોય તો dot. કોઈ button કામ ન કરે તો START બે વાર.
Parts: NOR, font library, EEPROM: PASS / FAIL. Buzzer, backlight test. START: સામાન્ય screen.

16

સમસ્યા નિવારણ

સમસ્યા	શું કરવું
Display આખું સફેદ	Display ના DC, CS, RST વાયર અને 3.3 V supply તપાસો.
અરીસા જેવું / ઊંધું	Display entry, Mirror, Orientation (Tutorial step 3). Self-test નો પીળો ચોરસ ઉપર ડાબે હોવો જોઈએ.
રંગ ખોટા	લાલ વાદળી દેખાય: Swap red/blue. સફેદ કાળું દેખાય: Invert colours.
Buttons હંમેશાં દબાયેલાં	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223".
Touch ખોટી જગ્યાએ	Touch calibration → Calibrate…: display પરનાં ચાર + નિશાન એક પછી એક સ્પર્શો.
Flash નિષ્ફળ / port busy	Disconnect કરીને Flash. "Waiting for bootloader": board power off / on.
Connect થતું નથી	TX / RX ઊલટાં? (adapter TXD → RC7). Baud 115200 (Modbus design માં Modbus baud).
લખાણ "????"	Widget ની Language સુધારો. English સિવાયના live text માટે NOR model.
Modbus જવાબ નથી	Address, baud, parity સરખાં છે? A / B બદલો. Page બદલ્યા પછી PLC timeout 3 s.
Problems માં error	Error પર click કરીને તે widget સુધારો. Error હોય ત્યાં સુધી Flash નહીં થાય.

PixPIO 2.8" smart display · ਵਰਤੋਂਕਾਰ ਗਾਈਡ

PixPIO ਵਰਤੋਂਕਾਰ ਗਾਈਡ

Screen design ਕਰੋ, ਇੱਕ click ਵਿੱਚ display ਉੱਤੇ ਭੇਜੋ। Arduino, PIC, STM32 ਵਰਗੇ ਕਿਸੇ ਵੀ microcontroller ਤੋਂ, PLC ਤੋਂ Modbus ਰਾਹੀਂ, ਜਾਂ ਸਿੱਧਾ PC ਤੋਂ ਵਰਤੋ। Host ਤੋਂ ਬਿਨਾਂ ਸਿਰਫ਼ power ਨਾਲ ਵੀ ਚੱਲਦਾ ਹੈ।

Screenshots ਵਿੱਚ ਲਾਲ ਡੱਬੇ ਉਹ settings / buttons ਹਨ ਜੋ ਉਸ step ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

ਇਸ ਗਾਈਡ ਦੇ tutorial ਵਰਗਾ design display ਉੱਤੇ: host ਤੋਂ ਬਿਨਾਂ, ਸਿਰਫ਼ Actions।

1

PixPIO ਕੀ ਹੈ

PixPIO ਆਪਣੇ processor (PIC18F27Q84) ਵਾਲਾ 2.8" (320×240) colour display board ਹੈ। Screens, buttons, bars, gauges, ਤਸਵੀਰਾਂ ਸਭ PC ਉੱਤੇ PixPIO Editor ਵਿੱਚ design ਹੁੰਦੀਆਂ ਹਨ। Display ਉਹਨਾਂ ਨੂੰ ਖ਼ੁਦ ਬਣਾਉਂਦਾ ਹੈ। Host (MCU ਜਾਂ PLC) ਨੇ ਸਿਰਫ਼ "level = 80" ਵਰਗੇ ਛੋਟੇ ਸੁਨੇਹੇ ਭੇਜਣੇ ਹੁੰਦੇ ਹਨ।

LiteNOR ਨਹੀਂ, touch ਨਹੀਂ। English fonts।

4 / 4T4 MB NOR (ਸਾਰੇ fonts, ਭਾਸ਼ਾਵਾਂ)। T = touch।

8 / 8T8 MB NOR। ਵੱਧ ਤਸਵੀਰਾਂ, animation।

16 / 16T16 MB NOR। ਵੱਡੀਆਂ ਤਸਵੀਰਾਂ, ਕਈ ਭਾਸ਼ਾਵਾਂ।

Board ਉੱਤੇ 4 buttons: MENU UP DOWN START (push buttons ਜਾਂ TTP223 touch pads)। ਕੁਝ models ਵਿੱਚ brightness control ਅਤੇ buzzer ਵੀ ਹੈ।

PixPIO ਕਿਉਂ

Live editingUSB ਲਾਓ: Editor ਦੀ ਹਰ ਤਬਦੀਲੀ display ਉੱਤੇ ਤੁਰੰਤ। SD card ਨਹੀਂ, ਲੰਮਾ upload ਨਹੀਂ।

30 ਤਿਆਰ widgetsGauge, chart, keyboard, QR code, animation: drag ਕਰੋ, ਬੱਸ।

ਕੋਈ ਵੀ hostUART, I2C ਜਾਂ SPI. PIC, Arduino, ESP32, STM32 ਉੱਤੇ tested. Host ਤੋਂ ਬਿਨਾਂ ਵੀ।

ਤੁਹਾਡੀ ਭਾਸ਼ਾਪੰਜਾਬੀ, ਹਿੰਦੀ, ਮਲਿਆਲਮ… screen ਉੱਤੇ, phonetic typing ਨਾਲ।

Free toolsPixPIO Editor ਅਤੇ VS Code ਲਈ PICPIO ਮੁਫ਼ਤ ਹਨ।

2

Install ਕਰਨਾ

Visual Studio Code install ਕਰੋ (Windows, ਮੁਫ਼ਤ)।
VS Code ਵਿੱਚ PICPIO extension: Extensions → "…" → Install from VSIX… → ਨਾਲ ਮਿਲੀ picpio-x.y.z.vsix।
VS Code ਮੁੜ ਖੋਲ੍ਹੋ। PICPIO menu ਵਿੱਚ (ਜਾਂ Ctrl+Shift+P → "PixPIO") PixPIO। Browser ਵਿੱਚ Editor ਖੁੱਲ੍ਹੇਗਾ।
USB-serial cable (CH340) PC ਵਿੱਚ ਲਗਾਓ। Device Manager → Ports ਵਿੱਚ USB-SERIAL CH340 (COM3) ਵਰਗਾ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ।

Editor ਨੂੰ internet ਦੀ ਲੋੜ ਨਹੀਂ। Display ਨਾਲ ਸੰਪਰਕ VS Code ਵੱਲੋਂ ਚਲਾਏ "bridge" ਰਾਹੀਂ ਹੁੰਦਾ ਹੈ। Editor ਵਰਤਦੇ ਸਮੇਂ VS Code ਖੁੱਲ੍ਹਾ ਰੱਖੋ।

3

Editor ਜਾਣ-ਪਛਾਣ

ਪਹਿਲੀ ਵਾਰ ਖੋਲ੍ਹਣ ਉੱਤੇ Editor ਵਿੱਚ ਇੱਕ Example project ਹੁੰਦਾ ਹੈ (toolbar ਦਾ Example ਦਬਾਉਣ ਨਾਲ ਹਮੇਸ਼ਾ ਵਾਪਸ ਮਿਲਦਾ ਹੈ; 8 pages, ਲਗਭਗ ਸਾਰੇ widgets)।

ਹਿੱਸਾ	ਥਾਂ	ਕੰਮ
Toolbar	ਉੱਪਰ	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	ਉੱਪਰ ਖੱਬੇ	Screens। + ਨਵਾਂ page, ⧉ copy, − ਹਟਾਓ। "start" = ਪਹਿਲਾਂ ਦਿਖਣ ਵਾਲਾ।
Add widget	ਖੱਬੇ	Click ਕਰਨ ਉੱਤੇ ਉਹ widget screen ਉੱਤੇ ਜੁੜਦਾ ਹੈ।
Preview	ਵਿਚਕਾਰ	ਜਿਵੇਂ display ਉੱਤੇ ਦਿਖੇਗਾ। Drag ਕਰਕੇ ਹਿਲਾਓ, ਨੀਲੇ ਚੌਰਸ ਖਿੱਚ ਕੇ ਆਕਾਰ ਬਦਲੋ।
Properties	ਸੱਜੇ	ਚੁਣੇ widget ਦੀਆਂ settings। Pages list ਵਿੱਚ page click ਕਰਨ ਉੱਤੇ page ਅਤੇ ਪੂਰੇ project ਦੀਆਂ settings। ? = ਹਰ setting ਦੀ ਵਿਆਖਿਆ।
Problems	ਹੇਠਾਂ ਖੱਬੇ	Design ਦੀਆਂ ਗ਼ਲਤੀਆਂ, ਚੇਤਾਵਨੀਆਂ।
Device	ਹੇਠਾਂ ਸੱਜੇ	COM port, Connect, Mirror, Storage, Self-test, Touch, PC ਤੋਂ commands (ਅਧਿਆਇ 6)।

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo।

4

Tutorial: Water Tank (ਸ਼ੁਰੂ ਤੋਂ)

ਟੈਂਕੀ ਦਾ level ਦਿਖਾਉਣ ਵਾਲੀ 2-page screen। UP / DOWN ਨਾਲ level ਬਦਲੇਗਾ, bar ਨਾਲ ਬਦਲੇਗੀ। 100 ਹੋਣ ਉੱਤੇ "TANK FULL", 0 ਹੋਣ ਉੱਤੇ "TANK EMPTY"। MENU settings page ਖੋਲ੍ਹੇਗਾ। Host ਦੀ ਲੋੜ ਨਹੀਂ। ਲਗਭਗ 15 ਮਿੰਟ।

STEP 1

ਨਵਾਂ project

Toolbar ਵਿੱਚ New। ਇੱਕ ਖਾਲੀ screen (page "main") ਮਿਲੇਗੀ।

STEP 2

Board model

ਸੱਜੇ ਪਾਸੇ Screen · whole project ਵਿੱਚ Board model: board ਦੇ label ਉੱਤੇ ਲਿਖਿਆ model (ਇੱਥੇ PixPIO 4T)।

ਇਹ display, touch, buttons, brightness, buzzer, NOR ਆਪਣੇ-ਆਪ set ਕਰਦਾ ਹੈ। Editor ਇਸ ਨੂੰ ਯਾਦ ਰੱਖਦਾ ਹੈ।

STEP 3

Display (ਸਿਰਫ਼ ਲੋੜ ਹੋਵੇ ਤਾਂ)

ਸਿਰਫ਼ ਤਾਂ, ਜੇ ਤਸਵੀਰ ਘੁੰਮੀ ਹੋਵੇ ਜਾਂ ਰੰਗ ਗ਼ਲਤ ਹੋਣ:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 4

Page ਦਾ ਨਾਮ

ਸੱਜੇ ਉੱਪਰ Name: home। Host code ਵਿੱਚ ਇਹ PAGE_HOME ਹੈ।

STEP 5

ਦੂਜਾ page

Pages ਦਾ +। ਨਵੇਂ page ਦਾ Name: settings। ਫਿਰ list ਵਿੱਚ home click ਕਰਕੇ ਵਾਪਸ ਆਓ।

Pages: home start, settings; + ਲਾਲ ਡੱਬੇ ਵਿੱਚ

STEP 6

ਉੱਪਰਲੀ bar (Rectangle)

Add widget ਵਿੱਚ Rectangle। x, y, width, height: 0, 0, 320, 30 (ਜਾਂ mouse ਨਾਲ ਖਿੱਚੋ)। Colours ਵਿੱਚ ਰੰਗ।

Rectangle ਜੋੜਿਆ; Rectangle button, x y width height ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, ਥਾਂ 8, 7, 304, 16। Font, Size, Align Text ਹਿੱਸੇ ਵਿੱਚ।

Label: Name title, Text WATER TANK ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 8

Level (Number)

Number: Name level, ਥਾਂ 10, 64, 120, 50।

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power ਜਾਣ ਉੱਤੇ ਵੀ ਯਾਦ ਰਹੇਗਾ

Number: Value, Unit, Min, Max, Remember value ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 9

Board buttons ਨਾਲ ਬਦਲਣਾ

Keys (buttons): Key + UP, Key − DOWN, Step 5। ਦਬਾ ਕੇ ਰੱਖਣ ਨਾਲ ਲਗਾਤਾਰ ਬਦਲੇਗਾ।

Key + UP, Key − DOWN, Step 5 ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 10

Level bar

Bar: Name level_bar, ਥਾਂ 140, 64, 170, 50, Min 0, Max 100, Style: Segments।

Preview: WATER TANK, 50%, ਹਰੀ segment bar — ਹੁਣ ਤੱਕ: title, number, bar।

STEP 11

ਲੁਕੇ ਸੁਨੇਹੇ

Label: Name full_msg, Text TANK FULL, ਥਾਂ 10, 120, 300, 20, Hidden ✓।

ਉਸੇ ਥਾਂ ਇੱਕ ਹੋਰ: Name empty_msg, Text TANK EMPTY, Hidden ✓।

Hidden widgets preview ਵਿੱਚ ਬਿੰਦੀਦਾਰ ਦਿਖਦੇ ਹਨ; display ਉੱਤੇ ਸ਼ੁਰੂ ਵਿੱਚ ਨਹੀਂ ਦਿਖਦੇ।

Label: Text TANK FULL, Hidden ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 12

Actions: number ਉੱਤੇ 5 actions

Preview ਵਿੱਚ level click ਕਰੋ। Actions (no code) → + Add action 5 ਵਾਰ:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

ਇੱਕ ਲਾਈਨ ਹਟਾਉਣ ਲਈ ✕।

STEP 13

Settings button

Button: Name btn_settings, ਥਾਂ 10, 200, 145, 34, Caption MENU: Settings।

STEP 14

Button ਦਬਾਉਣ ਉੱਤੇ page ਬਦਲਣਾ

+ Add action: Pressed → Go to page → 0x02 · settings। Key: MENU: board ਦਾ MENU ਵੀ ਇਹੀ ਕਰੇਗਾ।

STEP 15

Settings page: Back button, QR

Pages ਵਿੱਚ settings। Step 6, 7 ਵਾਂਗ Rectangle ਅਤੇ "SETTINGS" Label।

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home।

QR code: Text / link = ਤੁਹਾਡੀ website, Border shape = Rounded।

QR: Text / link, Border shape ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

STEP 16

Save

Save: .pixpio file। ਜਦ ਤੱਕ "Unsaved changes" ਦਿਖੇ, save ਨਹੀਂ ਹੋਇਆ। ਹੁਣ board ਜੋੜ ਕੇ Flash (ਅਧਿਆਇ 5)।

5

Board ਜੋੜਨਾ, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	ਸਿਰਫ਼ ਤਾਂ, ਜੇ board ਦੀ ਆਪਣੀ supply ਨਾ ਹੋਵੇ

STEP 2

Connect

Device ਵਿੱਚ COM port, baud 115200, Connect। Dot ਹਰਾ = ਜੁੜ ਗਿਆ। Port ਨਾ ਦਿਖੇ ਤਾਂ ↻।

STEP 3

⚡ Flash to display

Toolbar ਵਿੱਚ ⚡ Flash to display।
Design firmware ਬਣ ਕੇ cable ਰਾਹੀਂ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ; ਇੱਕ window ਵਿੱਚ progress। ਪਹਿਲੀ ਵਾਰ 1–2 ਮਿੰਟ।
"UPLOAD SUCCESSFUL" ਆਉਣ ਉੱਤੇ display ਨਵੀਂ screen ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।
ਤਸਵੀਰਾਂ ਜਾਂ ਹੋਰ ਭਾਸ਼ਾਵਾਂ ਹੋਣ (NOR models) ਤਾਂ ਉਹ ਵੀ ਇਸੇ cable ਰਾਹੀਂ NOR ਵਿੱਚ ਜਾਂਦੀਆਂ ਹਨ।

SD card ਦੀ ਲੋੜ ਨਹੀਂ। ਹਰ ਬਦਲਾਅ ਲਈ: Editor ਵਿੱਚ ਬਦਲੋ, Flash।

Tutorial design display ਉੱਤੇ: UP / DOWN ਨਾਲ level ਬਦਲੋ, 100 ਕਰਕੇ "TANK FULL" ਵੇਖੋ, MENU ਦਬਾ ਕੇ settings page।

6

PC ਤੋਂ display ਕੰਟਰੋਲ ਕਰਨਾ

Connect ਕਰਨ ਤੋਂ ਬਾਅਦ host MCU ਤੋਂ ਬਿਨਾਂ ਹੀ PC ਤੋਂ ਹਰ widget ਪਰਖ ਸਕਦੇ ਹੋ। ਤਿੰਨ ਤਰੀਕੇ:

1. Quick commands (Device panel)

Page + Show: ਉਹ page display ਉੱਤੇ ਖੁੱਲ੍ਹੇਗਾ।
Widget ਚੁਣੋ, Value ਲਿਖੋ, Set value: number, bar, LED, switch… ਬਦਲਣਗੇ।
text + Set text: Changeable text ਬਦਲੇਗਾ।
Hide / Show: widget ਲੁਕਾਓ / ਦਿਖਾਓ।
Key + Press: ਜਿਵੇਂ board button (MENU, UP…) ਦਬਾਇਆ ਹੋਵੇ।

2. Commands for this widget

ਕੋਈ ਵੀ widget ਚੁਣੋ, properties ਦੇ ਸਭ ਤੋਂ ਹੇਠਾਂ Commands for this widget ਹੈ। ਹਰ command ਲਈ:

Send: PC ਤੋਂ ਤੁਰੰਤ display ਨੂੰ ਭੇਜਦਾ ਹੈ (connected ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ)।
Copy: host program ਵਿੱਚ ਚਿਪਕਾਉਣ ਲਈ code (pd_set_value(&disp, W_NUMBER, 253);)।
ਹਰੇ bytes: UART / I2C / SPI ਰਾਹੀਂ ਸਿੱਧਾ ਭੇਜਣ ਵਾਲਾ frame (ਹੋਰ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ program ਲਿਖਦੇ ਸਮੇਂ)।

Settings ਬਦਲਣ ਉੱਤੇ commands ਵੀ ਨਾਲ ਬਦਲਦੇ ਹਨ। ਹਰ widget ਦੇ commands ਅਧਿਆਇ 7 ਵਿੱਚ।

Number widget commands; ਹਰ ਇੱਕ ਲਈ Copy, Send

3. Mirror, Touch

Mirror ✓: display ਉੱਤੇ ਜੋ ਹੁੰਦਾ ਹੈ (button ਦਬਾਉਣਾ, value ਬਦਲਣਾ) ਉਹ preview ਵਿੱਚ ਵੀ ਤੁਰੰਤ ਦਿਖਦਾ ਹੈ।
☝ Touch: preview ਉੱਤੇ mouse click = display ਨੂੰ ਉਂਗਲ ਨਾਲ ਛੂਹਣਾ (👆 cursor, ਪੀਲਾ dot)।
🔧 Self-test, ⬆ Storage: ਅਧਿਆਇ 15, 12।

Mirror, Storage, Self-test, Touch ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

7

ਹਰ widget

ਹਰ widget ਲਈ: ਕਿਸ ਲਈ, ਕਿਵੇਂ ਵਰਤਣਾ, value ਕੀ ਹੈ, host code। ਤਿੰਨ ਤਸਵੀਰਾਂ: Display ਉੱਤੇ (New project ਵਿੱਚ ਉਹ widget ਜੋੜਨ ਉੱਤੇ), Settings, Commands (PC ਤੋਂ Send / code Copy)। Add widget list ਵਿੱਚ ਇਹੀ ਨਾਮ ਹਨ।

Rectangle

Header bars, background boxes, cards। ਹੋਰ widgets ਦੇ ਪਿੱਛੇ ਰੱਖ ਸਕਦੇ ਹੋ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Colours ਵਿੱਚ Background (fill), Text / border ਰੰਗ।
Corner radius: ਗੋਲ ਕੋਨੇ। Border: ਕਿਨਾਰਾ।
Widget list ਵਿੱਚ ਹੇਠਾਂ ਹੋਵੇ ਤਾਂ ਹੋਰ widgets ਦੇ ਪਿੱਛੇ ਆਵੇਗਾ (↑ ↓ buttons ਨਾਲ ਕ੍ਰਮ ਬਦਲੋ)।

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // ਲਾਲ
disp.hide(W_HEADER);

Rectangle: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Label

ਸਥਿਰ ਲਿਖਤ: titles, captions, units।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Text ਵਿੱਚ ਲਿਖੋ। Font, Size, Align।
Language: ਪੰਜਾਬੀ, ਹਿੰਦੀ… (ਅਧਿਆਇ 9)।
Changeable ✓ ਕਰਨ ਉੱਤੇ host text ਬਦਲ ਸਕਦਾ ਹੈ।
No background: ਹੇਠਲਾ ਦਿਖੇਗਾ।

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ ਚਾਹੀਦਾ

Label: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Number

ਨੰਬਰ ਦਿਖਾਉਣ ਲਈ: temperature, speed, count, setpoint।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Value (ਸ਼ੁਰੂ), Min, Max।
Decimals 1 ਕਰਨ ਉੱਤੇ 253 → 25.3। Unit: °C, %, V।
Keys: UP / DOWN ਨਾਲ ਬਦਲੋ, Step।
Remember value: power ਜਾਣ ਉੱਤੇ ਵੀ ਯਾਦ ਰਹੇਗਾ।

Value

ਨੰਬਰ (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Text

Host ਦੀ ਭੇਜੀ ਇੱਕ ਲਾਈਨ: status, ਨਾਮ, ਸੁਨੇਹਾ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Max length: ਕਿੰਨੇ ਅੱਖਰ ਤੱਕ।
Font, Size, Align, ਰੰਗ।
Language ਅਤੇ Live text ਨਾਲ ਪੰਜਾਬੀ ਵਰਗੀਆਂ ਭਾਸ਼ਾਵਾਂ ਵੀ (NOR model)।

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Bar

Level, progress, tank, battery।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Min, Max, Value।
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery।
Touch ਵਾਲੇ models ਵਿੱਚ ਉਂਗਲ ਨਾਲ ਖਿੱਚ ਸਕਦੇ ਹੋ (slider)।
Controls brightness: ਇਹ bar backlight ਕੰਟਰੋਲ ਕਰੇਗੀ।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Button

ਦਬਾਉਣ ਵਾਲਾ button: page ਬਦਲਣਾ, start / stop।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Caption: ਲਿਖਤ। Style: normal, outline, pill, checkbox।
Mode: push (ਸਿਰਫ਼ ਦਬਾਉਂਦੇ ਸਮੇਂ) / toggle (on-off)।
Key: board button (MENU…) ਵੀ ਇਸ ਨੂੰ ਦਬਾਏਗਾ।
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

LED

Status lamp: ON / OFF / ਟਿਮਟਿਮਾਉਂਦਾ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

State: Off, On, Blink। Blink every: ms।
Colours: Off ਰੰਗ, On ਰੰਗ।

Value

0 off, 1 on, 2 blink

Host code (Arduino)

disp.setValue(W_LED, 2);   // ਟਿਮਟਿਮਾਏਗਾ

LED: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Arc / gauge

ਗੋਲ meter: speed, power, volume।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Start angle, Sweep (ਕਿੰਨੇ degree), Thickness।
Show value: ਵਿਚਕਾਰ ਨੰਬਰ।
Knob ✓: touch ਨਾਲ ਘੁਮਾ ਸਕਦੇ ਹੋ।
Keys + / −।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Display ਉੱਤੇ — Display ਉੱਤੇ

Arc / gauge: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Switch

ON / OFF slider: fan, light, mode।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Switched on: ਸ਼ੁਰੂਆਤੀ ਹਾਲਤ।
Key: board button ਦਬਾਉਣ ਉੱਤੇ ਬਦਲੇਗਾ। Touch ਨਾਲ ਵੀ।
Remember value।

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator ਬਦਲੇ ਤਾਂ: onChange(W_SWITCH, 0/1)

Switch: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Select

Drop-down: ਕਈ options ਵਿੱਚੋਂ ਇੱਕ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Options: Low|Medium|High (| ਨਾਲ ਵੱਖ ਕਰੋ)।
Selected: ਸ਼ੁਰੂਆਤੀ option।
Keys: open / OK, up, down। Touch ਉੱਤੇ list ਖੁੱਲ੍ਹਦੀ ਹੈ।

Value

0, 1, 2… (option ਦੀ ਥਾਂ)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Spinner

"ਕੰਮ ਚੱਲ ਰਿਹਾ ਹੈ" animation।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Style: dots, comet, arc…
Spinning, Speed। 0 = blank: ਰੁਕਣ ਉੱਤੇ ਲੁਕ ਜਾਂਦਾ ਹੈ।

Value

1 ਘੁੰਮ ਰਿਹਾ, 0 ਰੁਕਿਆ

Host code (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Wi-Fi, battery, bell ਵਰਗੇ ਚਿੰਨ੍ਹ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Symbol: icon ਚੁਣੋ। Icon size, Scale।
Host switches icons: host icon ਬਦਲ ਸਕਦਾ ਹੈ।

Value

Icon ਨੰਬਰ (0 = ਕੁਝ ਨਹੀਂ)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

ਕਈ buttons, ਸਿਰਫ਼ ਇੱਕ ਚੁਣਿਆ ਜਾ ਸਕਦਾ ਹੈ (mode, speed level)।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Options: Low|Mid|High। Columns।
Style: buttons ਜਾਂ radio।

Value

ਚੁਣੇ button ਦੀ ਥਾਂ (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Display ਉੱਤੇ — Display ਉੱਤੇ

Button group: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Switch array

ਕਈ ON / OFF switches ਇਕੱਠੇ (zones, relays)।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Options: ਹਰ switch ਦਾ ਨਾਮ। Columns।
Style: switches ਜਾਂ checkboxes।

Value

Bits: bit 0 = ਪਹਿਲਾ switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Display ਉੱਤੇ — Display ਉੱਤੇ

Switch array: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Keypad

ਨੰਬਰ keys: PIN, setpoint।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Keys: 1|2|3|…|OK। Columns।
Types into: ਇੱਕ Input box ਵਿੱਚ ਲਿਖੇਗਾ।
Keys move / press: board buttons ਨਾਲ ਵੀ।

Value

ਦਬਾਈ key ਦੀ ਥਾਂ

Host code (Arduino)

disp.onChange(myChange);   // ਹਰ key ਦਬਾਉਣ ਉੱਤੇ

Keypad: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Keyboard

Screen ਉੱਤੇ QWERTY keyboard: ਨਾਮ, Wi-Fi password।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Types into: ਇੱਕ Input box।
Language: ਪੰਜਾਬੀ, ਹਿੰਦੀ, ਤਮਿਲ… English ਅੱਖਰ type ਕਰੋ, ਉਸ ਭਾਸ਼ਾ ਵਿੱਚ ਦਿਖੇਗਾ (ਅਧਿਆਇ 9)।
Input box ਛੂਹਣ ਉੱਤੇ keyboard ਖੁੱਲ੍ਹ ਸਕਦਾ ਹੈ (Keyboard on tap)।

Value

ਅੱਖਰ ਦਾ code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Image / logo

Logo, ਤਸਵੀਰਾਂ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Change image…: PNG, JPG, SVG। Editor display ਲਈ ਸਹੀ ਆਕਾਰ ਬਣਾਉਂਦਾ ਹੈ।
Colours: Full colour ਜਾਂ Two colours (logo, ਬਹੁਤ ਘੱਟ flash)।
Fit, Border shape (Rounded, Circle…)।

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display ਉੱਤੇ

Settings

Commands: PC ਤੋਂ Send, code Copy

Chart

Trend: temperature ਇਤਿਹਾਸ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Style: line, thick, bars। Points, Min, Max, Grid lines।

Value

ਹਰ setValue ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਨਵਾਂ point (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // ਹਰ ਸਕਿੰਟ

Chart: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Input box

Keypad / keyboard ਜਿਸ ਵਿੱਚ ਲਿਖਦੇ ਹਨ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Placeholder, Max length।
Kind: text, number, password (* ਦਿਖੇਗਾ), Indian language (English ਵਿੱਚ type ਕਰੋ, ਪੰਜਾਬੀ, ਹਿੰਦੀ, ਤਮਿਲ… ਵਿੱਚ ਦਿਖੇਗਾ; ਅਧਿਆਇ 9)।

Value

Number kind: OK ਦਬਾਉਣ ਉੱਤੇ ਨੰਬਰ

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Message

ਕਈ ਲਾਈਨਾਂ; ਸ਼ਬਦ ਆਪਣੇ-ਆਪ ਅਗਲੀ ਲਾਈਨ ਵਿੱਚ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Message: | = ਨਵੀਂ ਲਾਈਨ। Line gap।
Language, Live text (ਅਧਿਆਇ 9)।
Changeable: host ਬਦਲ ਸਕਦਾ ਹੈ।

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter ਬਦਲੋ|Service: 3 ਦਿਨ");

Message: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

Animation (GIF)

GIF animation: logo, loading, ਚੇਤਾਵਨੀ।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Choose GIF…: ਇੱਕ GIF file। Fit।
Playing: loop, once, stopped।
ਵੱਡੇ / ਬਹੁਤ ਰੰਗੀਨ GIF ਲਈ NOR model ਬਿਹਤਰ।

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // ਇੱਕ ਵਾਰ

Animation (GIF): Display ਉੱਤੇ — Display ਉੱਤੇ

Roller (picker)

Scroll ਹੋਣ ਵਾਲਾ picker: programs, modes।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Options: Off|Low|Medium|High। Rows shown: 3, 5, 7।
Keys next / previous। Touch ਵਿੱਚ ਉੱਪਰਲੀ ਜਾਂ ਹੇਠਲੀ row ਛੂਹੋ।
Remember value।

Value

ਚੁਣੀ row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Display ਉੱਤੇ — Display ਉੱਤੇ

Roller (picker): Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

QR code

Phone ਨਾਲ scan ਲਈ: website, Wi-Fi, phone, manual link।

ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

Text / link: https://…, WIFI:T:WPA;S:ਨਾਮ;P:password;;, tel:…।
Border shape, No background।
ਵੱਡਾ box = ਸੌਖਾ scan।

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC ਤੋਂ Send, code Copy — Commands: PC ਤੋਂ Send, code Copy

8

Actions: ਪੂਰੀ ਸੂਚੀ

Widget ਵਿੱਚ ਕੁਝ ਹੋਣ ਉੱਤੇ display ਖ਼ੁਦ ਜੋ ਕਰਦਾ ਹੈ। Host ਦੀ ਲੋੜ ਨਹੀਂ। ਉਦਾਹਰਣ: Tutorial step 12, 14।

When (ਕਦੋਂ)	ਕਿਹੜੇ widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	ਉਹੀ widgets

Do (ਕੀ)	Target / value
Go to page	ਇੱਕ page
Set value of	widget, value
Add to / Subtract from	widget, ਕਿੰਨਾ
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer ਵਾਲੇ models
Brightness (%)	brightness control ਵਾਲੇ models

9

ਭਾਸ਼ਾਵਾਂ

ਕਿਸੇ page ਉੱਤੇ Message ਰੱਖੋ (Label, Text, Button ਵਿੱਚ ਵੀ ਇਹੀ)।

Language: ਪੰਜਾਬੀ (ਹਿੰਦੀ, ਮਲਿਆਲਮ, ਮਰਾਠੀ, ਤਮਿਲ, ਗੁਜਰਾਤੀ, ਬੰਗਾਲੀ, European, Русский, Ελληνικά)।
Phrases ਵਿੱਚ ਵਾਕ (ਕਈ ਹੋਣ ਤਾਂ |)।
Live text ✓: host ਕੋਈ ਵੀ ਵਾਕ UTF-8 ਵਿੱਚ ਭੇਜ ਸਕਦਾ ਹੈ; display ਲਗਾਂ-ਮਾਤਰਾਂ ਸਹੀ ਬਣਾਉਂਦਾ ਹੈ। Tick ਕਰਨ ਉੱਤੇ field "Message" ਅਤੇ "Changeable" ✓ ਹੋ ਜਾਂਦਾ ਹੈ।

English ਤੋਂ ਇਲਾਵਾ live text ਲਈ NOR model (4, 8, 16) ਚਾਹੀਦਾ ਹੈ। Fonts factory ਤੋਂ ਹੀ NOR ਵਿੱਚ ਹਨ।

Language, Message, Changeable ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

Preview ਵਿੱਚ ਮਲਿਆਲਮ — Live text preview ਵਿੱਚ।

Keyboard ਉੱਤੇ ਪੰਜਾਬੀ, ਹਿੰਦੀ, ਤਮਿਲ… type ਕਰਨਾ

Screen ਦੇ keyboard ਉੱਤੇ English ਅੱਖਰ ਦਬਾਓ, box ਵਿੱਚ ਉਹ ਪੰਜਾਬੀ ਵਿੱਚ (ਜਾਂ ਹਿੰਦੀ, ਮਲਿਆਲਮ, ਮਰਾਠੀ, ਤਮਿਲ, ਗੁਜਰਾਤੀ, ਬੰਗਾਲੀ ਵਿੱਚ) ਦਿਖਣਗੇ: sat srI akAl → ਸਤ ਸ੍ਰੀ ਅਕਾਲ। Phone ਦੀ phonetic typing ਵਾਂਗ।

Keyboard ਜੋੜੋ।
Language: ਭਾਸ਼ਾ ਚੁਣੋ।

ਜੇ keyboard ਅਜੇ ਕਿਸੇ Input box ਵਿੱਚ ਨਹੀਂ ਲਿਖਦਾ ("Types into" = None), ਤਾਂ Language ਚੁਣਨ ਉੱਤੇ keyboard ਦੇ ਉੱਪਰ ਇੱਕ Input box ਆਪਣੇ-ਆਪ ਆਵੇਗਾ ਅਤੇ keyboard ਉਸ ਵਿੱਚ ਲਿਖੇਗਾ।

Keyboard settings: Language ਲਾਲ ਡੱਬੇ ਵਿੱਚ

Keyboard ਦੇ ਉੱਪਰ ਆਪਣੇ-ਆਪ ਆਇਆ Input box — ਭਾਸ਼ਾ ਚੁਣਨ ਉੱਤੇ: keyboard ਦੇ ਉੱਪਰ Input box, "Types into" = ਉਹੀ box।

ਭਾਸ਼ਾ ਉਸ Input box ਦੀ setting ਹੈ। Box ਚੁਣ ਕੇ ਵੀ ਬਦਲ ਸਕਦੇ ਹੋ:

Kind: Indian language (typed in English)।
Language: ਭਾਸ਼ਾ।
Letter size: 16, 20, 24 px।
ਹੇਠਾਂ ਉਸ ਭਾਸ਼ਾ ਦੇ typing rules ਦਿਖਦੇ ਹਨ।

Max length ਵੱਧ ਤੋਂ ਵੱਧ 24 English ਅੱਖਰ। "Show typed text" ਸਿਰਫ਼ ਤਾਂ ਚਾਹੀਦਾ ਹੈ ਜਦੋਂ keyboard box ਨੂੰ ਢੱਕ ਦੇਵੇ (pop-up keyboard)। Box keyboard ਦੇ ਉੱਪਰ ਦਿਖ ਰਿਹਾ ਹੋਵੇ ਤਾਂ tick ਹਟਾਓ, ਨਹੀਂ ਤਾਂ ਇੱਕੋ ਲਿਖਤ ਦੋ box ਵਿੱਚ ਦਿਖੇਗੀ।

Input box settings: Kind, Language, Letter size ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

ਸੱਤ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ type ਕੀਤੇ box — Display ਉੱਤੇ ਇਵੇਂ: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO।

ਭਾਸ਼ਾ	Type ਕਰੋ	ਦਿਖੇਗਾ	ਯਾਦ ਰੱਖੋ
ਪੰਜਾਬੀ	`sat srI akAl`, `pakkA`, `punjAbI`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ, ਪੰਜਾਬੀ	A I U = ਲੰਮੀ ਮਾਤਰਾ, ਦੋਹਰਾ ਅੱਖਰ = ੱ, ਅੱਖਰ ਤੋਂ ਪਹਿਲਾਂ n m = ੰ, r h v = ਪੈਰ ਵਿੱਚ (ਸ੍ਰੀ), M = ਂ
ਹਿੰਦੀ / ਮਰਾਠੀ	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	T D = ट ड, t d = त द, x = क्ष
ਮਲਿਆਲਮ	`namaskaaram`, `kEraLam`	നമസ്കാരം, കേരളം	E O = ਲੰਮੀ, L = ള, N = ണ, t = റ്റ, zh = ഴ
ਤਮਿਲ	`vaNakkam`, `thamizh`	வணக்கம், தமிழ்	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க
ਗੁਜਰਾਤੀ	`kem chho`	કેમ છો	ਹਿੰਦੀ ਵਾਲੇ ਹੀ rules
ਬੰਗਾਲੀ	`ami`, `bangla`, `bhalO`	আমি, বাংলা, ভালো	a = া, o = ਕੋਈ ਮਾਤਰਾ ਨਹੀਂ, O = ো, ng = ং

NOR model (4T, 8T, 16T…) ਚਾਹੀਦਾ ਹੈ: ਭਾਸ਼ਾ fonts NOR ਵਿੱਚ ਹਨ। Host ਪੜ੍ਹੇ (readText) ਤਾਂ ਉਸ ਨੂੰ type ਕੀਤੇ English ਅੱਖਰ ਮਿਲਦੇ ਹਨ।

10

Host MCU ਤੋਂ (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: ਹਰ widget ਅਤੇ page ਦਾ ਨਾਮ (W_LEVEL, PAGE_SETTINGS…)। Host program ਵਿੱਚ ਜੋੜੋ।
Write to project folder…: firmware ਅਤੇ host header ਇਕੱਠੇ।
NOR data file: ਸਿਰਫ਼ chip programmer ਲਈ।

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator UP / DOWN ਨਾਲ level ਬਦਲੇ ਤਾਂ ਇੱਥੇ ਪਤਾ ਲੱਗਦਾ ਹੈ
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display ਤਿਆਰ ਹੋਣ ਤੱਕ (5 s ਤੱਕ)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value ਦਿਖਾਓ
  disp.loop();                           // display ਤੋਂ ਆਏ ਸੁਨੇਹੇ
  delay(200);
}

Function	ਕੰਮ
setValue(id, v)	Number, bar, LED, switch… ਦੀ value
setText(id, "…")	Changeable text (Live text ਵਿੱਚ UTF-8)
page(PAGE_…)	Page ਬਦਲੋ
show(id) / hide(id)	Widget ਦਿਖਾਓ / ਲੁਕਾਓ
setColor(id, c) / setBackground(id, c)	ਰੰਗ (RGB565)
getValue(id) / readText(id, buf, n)	Display ਦੀ value / text ਪੜ੍ਹੋ
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value ਬਦਲੀ, board button, page ਬਦਲਿਆ, display restart ਹੋਇਆ
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO)।

11

Modbus RTU (PLC ਨਾਲ)

Pages list ਵਿੱਚ ਇੱਕ page click ਕਰੋ, ਫਿਰ Host link · whole project।
Host link: Modbus RTU slave।
Slave address (1–247), Baud, Parity: PLC ਵਿੱਚ ਵੀ ਇਹੀ।
📋 Register table (CSV): ਸਾਰੇ registers ਦੀ ਸੂਚੀ; Excel ਵਿੱਚ ਖੋਲ੍ਹ ਕੇ PLC programmer ਨੂੰ ਦਿਓ।
Device panel ਦਾ baud Modbus baud ਕਰੋ ਅਤੇ Flash।

Widget ਚੁਣਨ ਉੱਤੇ Name ਦੇ ਹੇਠਾਂ ਉਸ ਦੇ registers: holding register 3 (40004), coil 3 (4)।

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table ਲਾਲ ਡੱਬਿਆਂ ਵਿੱਚ

Register	Address	ਅਰਥ
Holding (4x)	0 … N-1	Widget value (widget list ਵਿੱਚ ਉਸ ਦੀ ਥਾਂ)। ਲਿਖਣ ਉੱਤੇ display ਉੱਤੇ।
Holding	1000	Page; page ID ਲਿਖੋ ਤਾਂ ਉਹ page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	ਦਿਖਾਓ (1) / ਲੁਕਾਓ (0)
Discrete input (1x)	0 … N-1	Button ਦਬਿਆ? (ਪੜ੍ਹਨ ਉੱਤੇ clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: ਦਬਿਆ / ਫੜਿਆ ਹੋਇਆ
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16। Values signed 16-bit। Widgets ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਉੱਤੇ addresses ਬਦਲਦੇ ਹਨ; PLC ਨੂੰ ਨਵੀਂ CSV ਦਿਓ।

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC ਦੇ (ਜਾਂ USB-RS485 ਦੇ) A / B

Flash ਲਈ USB-serial (TTL) cable ਚਾਹੀਦੀ ਹੈ। USB-serial TXD ਅਤੇ MAX485 RO ਨੂੰ ਇਕੱਠੇ ਸਿੱਧਾ RC7 ਨਾਲ ਨਾ ਜੋੜੋ: jumper, ਜਾਂ TXD ਵਿੱਚ 1 kΩ resistor ਅਤੇ RB4 ਉੱਤੇ 10 kΩ pull-up।

PLC ਤੋਂ ਬਿਨਾਂ PC ਤੋਂ test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project ਵਿੱਚ Store in:

MCU flash: English fonts, ਛੋਟੀਆਂ ਤਸਵੀਰਾਂ। Lite model।
SPI NOR flash: ਵੱਡੀਆਂ ਤਸਵੀਰਾਂ, animation, ਹੋਰ ਭਾਸ਼ਾਵਾਂ। 4 / 8 / 16 models (Board model ਚੁਣਨ ਉੱਤੇ ਆਪਣੇ-ਆਪ)।

NOR ਵਿੱਚ font library factory ਤੋਂ ਹੀ ਹੈ। Flash ਵੇਲੇ ਸਿਰਫ਼ design ਦੀਆਂ ਤਸਵੀਰਾਂ ਭੇਜੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

13

Widget list, Problems

14

Board, pins

ਹਿੱਸਾ	PIC pin	ਨੋਟ
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus ਵਿੱਚ Editor ਵਿੱਚ ਦਿੱਤਾ baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = ਬਣਾ ਰਿਹਾ ਹੈ। Modbus ਵਿੱਚ RS-485 DE/RE।
INT	RC0	LOW = host ਲਈ ਸੁਨੇਹਾ ਹੈ (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND ਨਾਲ) ਜਾਂ TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	ਜਿਹਨਾਂ models ਵਿੱਚ ਹਨ
Status LED	RB5	ਚੱਲਦੇ ਸਮੇਂ ਹਰ 0.5 s ਉੱਤੇ ਟਿਮਟਿਮਾਉਂਦਾ ਹੈ

Display settings: Tutorial step 3। ਹਰ ਬਦਲਾਅ ਤੋਂ ਬਾਅਦ Flash।

15

Self-test

Connect ਕਰਨ ਤੋਂ ਬਾਅਦ Device panel ਵਿੱਚ 🔧 Self-test। ਕੋਈ ਵੀ design flash ਹੋਵੇ, ਇਹ ਚੱਲਦਾ ਹੈ।

Colours: ਲਾਲ, ਹਰੀ, ਨੀਲੀ, ਚਿੱਟੀ, ਕਾਲੀ, ਸਲੇਟੀ ਪੱਟੀਆਂ, ਉੱਪਰ ਖੱਬੇ ਪੀਲਾ ਚੌਰਸ। ਚੌਰਸ ਕਿਸੇ ਹੋਰ ਕੋਨੇ ਵਿੱਚ ਹੋਵੇ ਤਾਂ Orientation / Mirror ਠੀਕ ਕਰੋ। START ਜਾਂ tap: ਅਗਲਾ।
Buttons, touch: ਚਾਰੇ buttons ਦਬਾਓ; ਹਰ box ਹਰਾ ਹੋਵੇਗਾ। Touch ਹੋਵੇ ਤਾਂ dot। ਕੋਈ button ਕੰਮ ਨਾ ਕਰੇ ਤਾਂ START ਦੋ ਵਾਰ।
Parts: NOR, font library, EEPROM: PASS / FAIL। Buzzer, backlight test। START: ਆਮ screen।

16

ਸਮੱਸਿਆ ਹੱਲ

ਸਮੱਸਿਆ	ਕੀ ਕਰੀਏ
Display ਪੂਰਾ ਚਿੱਟਾ	Display ਦੀਆਂ DC, CS, RST ਤਾਰਾਂ ਅਤੇ 3.3 V supply ਜਾਂਚੋ।
ਸ਼ੀਸ਼ੇ ਵਾਂਗ / ਉਲਟਾ	Display entry, Mirror, Orientation (Tutorial step 3)। Self-test ਦਾ ਪੀਲਾ ਚੌਰਸ ਉੱਪਰ ਖੱਬੇ ਹੋਵੇ।
ਰੰਗ ਗ਼ਲਤ	ਲਾਲ ਨੀਲਾ ਦਿਖੇ: Swap red/blue। ਚਿੱਟਾ ਕਾਲਾ ਦਿਖੇ: Invert colours।
Buttons ਹਮੇਸ਼ਾ ਦਬੇ ਹੋਏ	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223"।
Touch ਗ਼ਲਤ ਥਾਂ	Touch calibration → Calibrate…: display ਦੇ ਚਾਰ + ਨਿਸ਼ਾਨ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਛੂਹੋ।
Flash fail / port busy	Disconnect ਕਰਕੇ Flash। "Waiting for bootloader": board power off / on।
Connect ਨਹੀਂ ਹੁੰਦਾ	TX / RX ਉਲਟੇ? (adapter TXD → RC7)। Baud 115200 (Modbus design ਵਿੱਚ Modbus baud)।
ਲਿਖਤ "????"	Widget ਦੀ Language ਠੀਕ ਕਰੋ। English ਤੋਂ ਇਲਾਵਾ live text ਲਈ NOR model।
Modbus ਜਵਾਬ ਨਹੀਂ	Address, baud, parity ਇੱਕੋ ਜਿਹੇ? A / B ਬਦਲੋ। Page ਬਦਲਣ ਤੋਂ ਬਾਅਦ PLC timeout 3 s।
Problems ਵਿੱਚ error	Error ਉੱਤੇ click ਕਰਕੇ ਉਹ widget ਠੀਕ ਕਰੋ। Error ਰਹਿੰਦਿਆਂ Flash ਨਹੀਂ ਹੋਵੇਗਾ।

PixPIO 2.8" smart display · ব্যবহারকারী নির্দেশিকা

PixPIO ব্যবহারকারী নির্দেশিকা

Screen design করুন, এক click-এ display-এ পাঠান। Arduino, PIC, STM32-এর মতো যেকোনো microcontroller থেকে, PLC থেকে Modbus দিয়ে, বা সরাসরি PC থেকে ব্যবহার করুন। Host ছাড়া শুধু power দিয়েও চলে।

Screenshots-এর লাল বাক্স হলো সেই step-এ ব্যবহার করার settings / buttons।

এই নির্দেশিকার tutorial-এর মতো design display-এ: host ছাড়া, শুধু Actions।

1

PixPIO কী

PixPIO হলো নিজস্ব processor (PIC18F27Q84) সহ একটি 2.8" (320×240) colour display board। Screens, buttons, bars, gauges, ছবি সব PC-তে PixPIO Editor-এ design হয়। Display সেগুলো নিজেই আঁকে। Host (MCU বা PLC)-কে শুধু "level = 80"-এর মতো ছোট বার্তা পাঠাতে হয়।

LiteNOR নেই, touch নেই। English fonts।

4 / 4T4 MB NOR (সব fonts, ভাষা)। T = touch।

8 / 8T8 MB NOR। আরও ছবি, animation।

16 / 16T16 MB NOR। বড় ছবি, অনেক ভাষা।

Board-এ 4টি buttons: MENU UP DOWN START (push buttons বা TTP223 touch pads)। কিছু models-এ brightness control আর buzzer-ও আছে।

কেন PixPIO

Live editingUSB লাগান: Editor-এর প্রতিটি পরিবর্তন display-তে সঙ্গে সঙ্গে। SD card নয়, লম্বা upload নয়।

30টি তৈরি widgetsGauge, chart, keyboard, QR code, animation: drag করুন, ব্যস।

যেকোনো hostUART, I2C বা SPI. PIC, Arduino, ESP32, STM32-এ tested. Host ছাড়াও।

আপনার ভাষাবাংলা, হিন্দি, মালায়ালম… screen-এ, phonetic typing সহ।

Free toolsPixPIO Editor আর VS Code-এর জন্য PICPIO বিনামূল্যে।

2

Install করা

Visual Studio Code install করুন (Windows, বিনামূল্যে)।
VS Code-এ PICPIO extension: Extensions → "…" → Install from VSIX… → সঙ্গে পাওয়া picpio-x.y.z.vsix।
VS Code আবার খুলুন। PICPIO menu-তে (বা Ctrl+Shift+P → "PixPIO") PixPIO। Browser-এ Editor খুলবে।
USB-serial cable (CH340) PC-তে লাগান। Device Manager → Ports-এ USB-SERIAL CH340 (COM3)-এর মতো দেখা উচিত।

Editor-এর internet লাগে না। Display-এর সঙ্গে যোগাযোগ VS Code চালানো "bridge" দিয়ে হয়। Editor ব্যবহারের সময় VS Code খোলা রাখুন।

3

Editor পরিচিতি

প্রথমবার খুললে Editor-এ একটি Example project থাকে (toolbar-এর Example চাপলে সবসময় ফিরে পাবেন; 8 pages, প্রায় সব widgets)।

অংশ	জায়গা	কাজ
Toolbar	উপরে	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	উপরে বাঁয়ে	Screens। + নতুন page, ⧉ copy, − মুছুন। "start" = প্রথমে দেখানো।
Add widget	বাঁয়ে	Click করলে সেই widget screen-এ যোগ হয়।
Preview	মাঝে	Display-এ যেমন দেখাবে। Drag করে সরান, নীল বর্গ টেনে আকার বদলান।
Properties	ডানে	বাছাই করা widget-এর settings। Pages list-এ page click করলে page আর পুরো project-এর settings। ? = প্রতিটি setting-এর ব্যাখ্যা।
Problems	নিচে বাঁয়ে	Design-এর ভুল, সতর্কতা।
Device	নিচে ডানে	COM port, Connect, Mirror, Storage, Self-test, Touch, PC থেকে commands (অধ্যায় 6)।

Shortcuts: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copy, Del delete, Ctrl+Z / Y undo / redo।

4

Tutorial: Water Tank (শুরু থেকে)

একটি ট্যাঙ্কের level দেখানো 2-page screen। UP / DOWN দিয়ে level বদলাবে, bar সঙ্গে বদলাবে। 100 হলে "TANK FULL", 0 হলে "TANK EMPTY"। MENU settings page খুলবে। Host লাগে না। প্রায় 15 মিনিট।

STEP 1

নতুন project

Toolbar-এ New। একটি খালি screen (page "main") পাবেন।

STEP 2

Board model

ডান দিকে Screen · whole project-এ Board model: board-এর label-এ লেখা model (এখানে PixPIO 4T)।

এটি display, touch, buttons, brightness, buzzer, NOR নিজে থেকে set করে। Editor এটি মনে রাখে।

STEP 3

Display (দরকার হলে তবেই)

ছবি ঘুরে গেলে বা রং ভুল হলে তবেই:

Display: module (ILI9341 variants)
Buttons on the board: push buttons / TTP223 / none
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation লাল বাক্সে

STEP 4

Page-এর নাম

ডানে উপরে Name: home। Host code-এ এটি PAGE_HOME।

STEP 5

দ্বিতীয় page

Pages-এর +। নতুন page-এর Name: settings। তারপর list-এ home click করে ফিরে আসুন।

Pages: home start, settings; + লাল বাক্সে

STEP 6

উপরের bar (Rectangle)

Add widget-এ Rectangle। x, y, width, height: 0, 0, 320, 30 (বা mouse দিয়ে টানুন)। Colours-এ রং।

Rectangle যোগ হলো; Rectangle button, x y width height লাল বাক্সে

STEP 7

Title (Label)

Label: Name title, Text WATER TANK, জায়গা 8, 7, 304, 16। Font, Size, Align Text অংশে।

Label: Name title, Text WATER TANK লাল বাক্সে

STEP 8

Level (Number)

Number: Name level, জায়গা 10, 64, 120, 50।

Value 50, Unit %
Min 0, Max 100
Remember value ✓: power গেলেও মনে থাকবে

Number: Value, Unit, Min, Max, Remember value লাল বাক্সে

STEP 9

Board buttons দিয়ে বদলানো

Keys (buttons): Key + UP, Key − DOWN, Step 5। চেপে ধরে রাখলে একটানা বদলাবে।

STEP 10

Level bar

Bar: Name level_bar, জায়গা 140, 64, 170, 50, Min 0, Max 100, Style: Segments।

Preview: WATER TANK, 50%, সবুজ segment bar — এখন পর্যন্ত: title, number, bar।

STEP 11

লুকানো বার্তা

Label: Name full_msg, Text TANK FULL, জায়গা 10, 120, 300, 20, Hidden ✓।

একই জায়গায় আরও একটি: Name empty_msg, Text TANK EMPTY, Hidden ✓।

Hidden widgets preview-এ বিন্দু রেখায় দেখায়; display-এ শুরুতে দেখায় না।

Label: Text TANK FULL, Hidden লাল বাক্সে

STEP 12

Actions: number-এ 5টি actions

Preview-এ level click করুন। Actions (no code) → + Add action 5 বার:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

একটি সারি মুছতে ✕।

STEP 13

Settings button

Button: Name btn_settings, জায়গা 10, 200, 145, 34, Caption MENU: Settings।

STEP 14

Button চাপলে page বদল

+ Add action: Pressed → Go to page → 0x02 · settings। Key: MENU: board-এর MENU-ও এটাই করবে।

STEP 15

Settings page: Back button, QR

Pages-এ settings। Step 6, 7-এর মতো Rectangle আর "SETTINGS" Label।

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home।

QR code: Text / link = আপনার website, Border shape = Rounded।

QR: Text / link, Border shape লাল বাক্সে

STEP 16

Save

Save: .pixpio file। "Unsaved changes" দেখা গেলে এখনও save হয়নি। এবার board যুক্ত করে Flash (অধ্যায় 5)।

5

Board যুক্ত করা, Flash

STEP 1

USB-serial cable

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Board-এর নিজস্ব supply না থাকলে তবেই

STEP 2

Connect

Device-এ COM port, baud 115200, Connect। Dot সবুজ = যুক্ত। Port না দেখালে ↻।

STEP 3

⚡ Flash to display

Toolbar-এ ⚡ Flash to display।
Design firmware হয়ে cable দিয়ে পাঠানো হয়; একটি window-এ progress। প্রথমবার 1–2 মিনিট।
"UPLOAD SUCCESSFUL" এলে display নতুন screen নিয়ে শুরু হয়।
ছবি বা অন্য ভাষা থাকলে (NOR models) সেগুলোও এই cable দিয়ে NOR-এ যায়।

SD card লাগে না। প্রতিটি পরিবর্তনের জন্য: Editor-এ বদলান, Flash।

Tutorial design display-এ: UP / DOWN দিয়ে level বদলান, 100 করে "TANK FULL" দেখুন, MENU চেপে settings page।

6

PC থেকে display নিয়ন্ত্রণ

Connect করার পর host MCU ছাড়াই PC থেকে প্রতিটি widget পরীক্ষা করা যায়। তিনটি উপায়:

1. Quick commands (Device panel)

Page + Show: সেই page display-এ খুলবে।
Widget বাছুন, Value লিখুন, Set value: number, bar, LED, switch… বদলাবে।
text + Set text: Changeable text বদলাবে।
Hide / Show: widget লুকান / দেখান।
Key + Press: যেন board button (MENU, UP…) চাপা হয়েছে।

2. Commands for this widget

যেকোনো widget বাছলে properties-এর একদম নিচে Commands for this widget থাকে। প্রতিটি command-এর জন্য:

Send: PC থেকে সঙ্গে সঙ্গে display-এ পাঠায় (connected থাকতে হবে)।
Copy: host program-এ বসানোর code (pd_set_value(&disp, W_NUMBER, 253);)।
সবুজ bytes: UART / I2C / SPI দিয়ে সরাসরি পাঠানোর frame (অন্য ভাষায় program লেখার সময়)।

Settings বদলালে commands-ও সঙ্গে বদলায়। প্রতিটি widget-এর commands অধ্যায় 7-এ।

Number widget commands; প্রতিটির জন্য Copy, Send

3. Mirror, Touch

Mirror ✓: display-এ যা ঘটে (button চাপা, value বদল) তা preview-তেও সঙ্গে সঙ্গে দেখা যায়।
☝ Touch: preview-এ mouse click = display-এ আঙুল দিয়ে ছোঁয়া (👆 cursor, হলুদ dot)।
🔧 Self-test, ⬆ Storage: অধ্যায় 15, 12।

Mirror, Storage, Self-test, Touch লাল বাক্সে

7

প্রতিটি widget

প্রতিটি widget-এর জন্য: কীসের জন্য, কীভাবে ব্যবহার করবেন, value কী, host code। তিনটি ছবি: Display-তে (New project-এ সেই widget যোগ করলে), Settings, Commands (PC থেকে Send / code Copy)। Add widget list-এ এই নামগুলোই আছে।

Rectangle

Header bars, background boxes, cards। অন্য widgets-এর পেছনে রাখা যায়।

কীভাবে ব্যবহার করবেন

Colours-এ Background (fill), Text / border রং।
Corner radius: গোল কোণ। Border: কিনারা।
Widget list-এ নিচে থাকলে অন্য widgets-এর পেছনে আসবে (↑ ↓ buttons দিয়ে ক্রম বদলান)।

Value

—

Host code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // লাল
disp.hide(W_HEADER);

Rectangle: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Label

স্থির লেখা: titles, captions, units।

কীভাবে ব্যবহার করবেন

Text-এ লিখুন। Font, Size, Align।
Language: বাংলা, হিন্দি… (অধ্যায় 9)।
Changeable ✓ করলে host text বদলাতে পারে।
No background: নিচেরটা দেখা যায়।

Value

—

Host code (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ লাগবে

Label: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Number

সংখ্যা দেখাতে: temperature, speed, count, setpoint।

কীভাবে ব্যবহার করবেন

Value (শুরু), Min, Max।
Decimals 1 করলে 253 → 25.3। Unit: °C, %, V।
Keys: UP / DOWN দিয়ে বদলান, Step।
Remember value: power গেলেও মনে থাকে।

Value

সংখ্যা (Min…Max)

Host code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Text

Host-এর পাঠানো এক লাইন: status, নাম, বার্তা।

কীভাবে ব্যবহার করবেন

Max length: কত অক্ষর পর্যন্ত।
Font, Size, Align, রং।
Language আর Live text দিয়ে বাংলার মতো ভাষাও (NOR model)।

Value

—

Host code (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Bar

Level, progress, tank, battery।

কীভাবে ব্যবহার করবেন

Min, Max, Value।
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery।
Touch আছে এমন models-এ আঙুল দিয়ে টানা যায় (slider)।
Controls brightness: এই bar backlight নিয়ন্ত্রণ করে।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Button

চাপার button: page বদল, start / stop।

কীভাবে ব্যবহার করবেন

Caption: লেখা। Style: normal, outline, pill, checkbox।
Mode: push (চাপার সময়ই) / toggle (on-off)।
Key: board button (MENU…)-ও এটি চাপে।
Actions: Pressed → Go to page, Set value…

Value

Toggle: 0 / 1

Host code (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

LED

Status lamp: ON / OFF / জ্বলা-নেভা।

কীভাবে ব্যবহার করবেন

State: Off, On, Blink। Blink every: ms।
Colours: Off রং, On রং।

Value

0 off, 1 on, 2 blink

Host code (Arduino)

disp.setValue(W_LED, 2);   // জ্বলবে-নিভবে

LED: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Arc / gauge

গোল meter: speed, power, volume।

কীভাবে ব্যবহার করবেন

Start angle, Sweep (কত ডিগ্রি), Thickness।
Show value: মাঝে সংখ্যা।
Knob ✓: touch দিয়ে ঘোরানো যায়।
Keys + / −।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Switch

ON / OFF slider: fan, light, mode।

কীভাবে ব্যবহার করবেন

Switched on: শুরুর অবস্থা।
Key: board button চাপলে বদলায়। Touch-এও।
Remember value।

Value

0 / 1

Host code (Arduino)

disp.setValue(W_SWITCH, 1);
// operator বদলালে: onChange(W_SWITCH, 0/1)

Switch: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Select

Drop-down: অনেক options থেকে একটি।

কীভাবে ব্যবহার করবেন

Options: Low|Medium|High (| দিয়ে আলাদা করুন)।
Selected: শুরুর option।
Keys: open / OK, up, down। Touch-এ list খোলে।

Value

0, 1, 2… (option-এর জায়গা)

Host code (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Spinner

"কাজ চলছে" animation।

কীভাবে ব্যবহার করবেন

Style: dots, comet, arc…
Spinning, Speed। 0 = blank: থামলে লুকায়।

Value

1 ঘুরছে, 0 থেমে আছে

Host code (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Wi-Fi, battery, bell-এর মতো চিহ্ন।

কীভাবে ব্যবহার করবেন

Symbol: icon বাছুন। Icon size, Scale।
Host switches icons: host icon বদলাতে পারে।

Value

Icon নম্বর (0 = কিছু নয়)

Host code (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

অনেক buttons, শুধু একটি বাছা যায় (mode, speed level)।

কীভাবে ব্যবহার করবেন

Options: Low|Mid|High। Columns।
Style: buttons বা radio।

Value

বাছাই করা button-এর জায়গা (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Switch array

অনেক ON / OFF switches একসঙ্গে (zones, relays)।

কীভাবে ব্যবহার করবেন

Options: প্রতিটি switch-এর নাম। Columns।
Style: switches বা checkboxes।

Value

Bits: bit 0 = প্রথম switch

Host code (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1, 3 ON

Switch array: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Keypad

সংখ্যার keys: PIN, setpoint।

কীভাবে ব্যবহার করবেন

Keys: 1|2|3|…|OK। Columns।
Types into: একটি Input box-এ লেখে।
Keys move / press: board buttons দিয়েও।

Value

চাপা key-এর জায়গা

Host code (Arduino)

disp.onChange(myChange);   // প্রতিটি key চাপায়

Keypad: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Keyboard

Screen-এ QWERTY keyboard: নাম, Wi-Fi password।

কীভাবে ব্যবহার করবেন

Types into: একটি Input box।
Language: বাংলা, হিন্দি, তামিল… English অক্ষর type করলে সেই ভাষায় দেখায় (অধ্যায় 9)।
Input box ছুঁলে keyboard খোলার সুবিধা (Keyboard on tap)।

Value

অক্ষরের code (8 = backspace, 13 = OK)

Host code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Arrow

দিক: flow, motor direction।

কীভাবে ব্যবহার করবেন

Style: arrow, double, triangle। Shaft thickness।

Value

0 ডানে, 1 বাঁয়ে, 2 উপরে, 3 নিচে

Host code (Arduino)

disp.setValue(W_ARROW, 2);   // উপরে

Image / logo

Logo, ছবি।

কীভাবে ব্যবহার করবেন

Change image…: PNG, JPG, SVG। Editor display-এর উপযোগী আকার করে।
Colours: Full colour বা Two colours (logo, খুব কম flash)।
Fit, Border shape (Rounded, Circle…)।

Value

—

Host code (Arduino)

disp.show(W_IMAGE);

Display-তে

Settings

Commands: PC থেকে Send, code Copy

Chart

Trend: temperature ইতিহাস।

কীভাবে ব্যবহার করবেন

Style: line, thick, bars। Points, Min, Max, Grid lines।

Value

প্রতিটি setValue ডান দিকে একটি নতুন point (-32768 = clear)

Host code (Arduino)

disp.setValue(W_CHART, temperature);   // প্রতি সেকেন্ডে

Chart: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Input box

Keypad / keyboard যাতে লেখে সেই box।

কীভাবে ব্যবহার করবেন

Placeholder, Max length।
Kind: text, number, password (* দেখায়), Indian language (English-এ type করুন, বাংলা, হিন্দি, তামিল…-তে দেখাবে; অধ্যায় 9)।

Value

Number kind: OK চাপলে সংখ্যা

Host code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Message

অনেক লাইন; শব্দ নিজে থেকে পরের লাইনে।

কীভাবে ব্যবহার করবেন

Message: | = নতুন লাইন। Line gap।
Language, Live text (অধ্যায় 9)।
Changeable: host বদলাতে পারে।

Value

—

Host code (Arduino)

disp.setText(W_MESSAGE, "Filter বদলান|Service: 3 দিন");

Message: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Animation (GIF)

GIF animation: logo, loading, সতর্কতা।

কীভাবে ব্যবহার করবেন

Choose GIF…: একটি GIF file। Fit।
Playing: loop, once, stopped।
বড় / অনেক রঙের GIF-এর জন্য NOR model ভালো।

Value

1 play (loop), 2 once, 0 stop

Host code (Arduino)

disp.setValue(W_ANIM, 2);   // একবার

Animation (GIF): Display-তে — Display-তে

Roller (picker)

Scroll হওয়া picker: programs, modes।

কীভাবে ব্যবহার করবেন

Options: Off|Low|Medium|High। Rows shown: 3, 5, 7।
Keys next / previous। Touch-এ উপরের বা নিচের row ছুঁয়ে দিন।
Remember value।

Value

বাছাই করা row (0, 1, 2…)

Host code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Display-তে — Display-তে

Roller (picker): Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

Spinbox (− 12 +)

− সংখ্যা + : setpoint, timer।

কীভাবে ব্যবহার করবেন

Min, Max, Step, Unit।
Touch-এ − / + ছুঁয়ে দিন, বা Keys + / −।
Remember value।

Value

Min…Max

Host code (Arduino)

disp.setValue(W_SPINBOX, 60);

Spinbox (− 12 +): Display-তে — Display-তে

Spinbox (− 12 +): Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

QR code

Phone দিয়ে scan করতে: website, Wi-Fi, phone, manual link।

কীভাবে ব্যবহার করবেন

Text / link: https://…, WIFI:T:WPA;S:নাম;P:password;;, tel:…।
Border shape, No background।
বড় box = সহজ scan।

Value

—

Host code (Arduino)

disp.show(W_QR);

QR code: Commands: PC থেকে Send, code Copy — Commands: PC থেকে Send, code Copy

8

Actions: সম্পূর্ণ তালিকা

Widget-এ কিছু ঘটলে display নিজেই যা করে। Host লাগে না। উদাহরণ: Tutorial step 12, 14।

When (কখন)	কোন widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	একই widgets

Do (কী)	Target / value
Go to page	একটি page
Set value of	widget, value
Add to / Subtract from	widget, কত
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	buzzer আছে এমন models
Brightness (%)	brightness control আছে এমন models

9

ভাষা

কোনো page-এ Message রাখুন (Label, Text, Button-এও একই)।

Language: বাংলা (হিন্দি, মালয়ালম, মারাঠি, তামিল, গুজরাটি, পাঞ্জাবি, European, Русский, Ελληνικά)।
Phrases-এ বাক্য (একাধিক হলে |)।
Live text ✓: host যেকোনো বাক্য UTF-8-এ পাঠাতে পারে; display যুক্তাক্ষর আর কার-চিহ্ন ঠিকভাবে আঁকে। Tick করলে field "Message" আর "Changeable" ✓ হয়।

English ছাড়া live text-এর জন্য NOR model (4, 8, 16) লাগে। Fonts factory থেকেই NOR-এ আছে।

Language, Message, Changeable লাল বাক্সে

Preview-এ মালয়ালম — Live text preview-এ।

Keyboard-এ বাংলা, হিন্দি, তামিল… type করা

Screen-এর keyboard-এ English অক্ষর চাপুন, box-এ তা বাংলায় (বা হিন্দি, মালয়ালম, মারাঠি, তামিল, গুজরাটি, পাঞ্জাবিতে) দেখাবে: ami bangla bhalO → আমি বাংলা ভালো। Phone-এর phonetic typing-এর মতো।

Keyboard যোগ করুন।
Language: ভাষা বাছুন।

Keyboard এখনও কোনো Input box-এ না লিখলে ("Types into" = None), Language বাছলে keyboard-এর উপরে একটি Input box নিজে থেকে আসবে আর keyboard তাতে লিখবে।

Keyboard-এর উপরে নিজে থেকে আসা Input box — ভাষা বাছলে: keyboard-এর উপরে Input box, "Types into" = সেই box।

ভাষা সেই Input box-এর setting। Box বেছেও বদলানো যায়:

Kind: Indian language (typed in English)।
Language: ভাষা।
Letter size: 16, 20, 24 px।
নিচে সেই ভাষার typing rules দেখায়।

Max length সর্বোচ্চ 24টি English অক্ষর। "Show typed text" শুধু তখনই লাগে যখন keyboard box ঢেকে দেয় (pop-up keyboard)। Box keyboard-এর উপরে দেখা গেলে tick সরান, নইলে একই লেখা দুটি box-এ দেখাবে।

Input box settings: Kind, Language, Letter size লাল বাক্সে

সাতটি ভাষায় type করা box — Display-এ এভাবে: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO।

ভাষা	Type করুন	দেখাবে	মনে রাখুন
বাংলা	`ami`, `bangla`, `bhalO`, `nomoskar`	আমি, বাংলা, ভালো, নমস্কার	a = া, o = কোনো চিহ্ন নেই (শুরুতে অ), O = ো, i I u U e = ি ী ু ূ ে, ng = ং, NG = ঙ, sh = শ, Sh = ষ, v w = ব, x = ক্ষ
হিন্দি / মারাঠি	`namaste`, `dhanyavAd`	नमस्ते, धन्यवाद	A I U = দীর্ঘ স্বর, T D = ट ड, t d = त द, x = क्ष
মালয়ালম	`namaskaaram`, `kEraLam`	നമസ്കാരം, കേരളം	E O = দীর্ঘ, L = ള, N = ണ, t = റ്റ, zh = ഴ
তামিল	`vaNakkam`, `thamizh`	வணக்கம், தமிழ்	t d = ட, th = த, R = ற, zh = ழ, ng = ங்க
গুজরাটি	`kem chho`	કેમ છો	হিন্দির মতো rules
পাঞ্জাবি	`sat srI akAl`, `pakkA`	ਸਤ ਸ੍ਰੀ ਅਕਾਲ, ਪੱਕਾ	দ্বিত্ব অক্ষর = ੱ, অক্ষরের আগে n m = ੰ

NOR model (4T, 8T, 16T…) লাগে: ভাষার fonts NOR-এ আছে। Host পড়লে (readText) type করা English অক্ষর পায়।

10

Host MCU থেকে (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: প্রতিটি widget আর page-এর নাম (W_LEVEL, PAGE_SETTINGS…)। Host program-এ যোগ করুন।
Write to project folder…: firmware আর host header একসঙ্গে।
NOR data file: শুধু chip programmer-এর জন্য।

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operator UP / DOWN দিয়ে level বদলালে এখানে জানা যায়
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // display প্রস্তুত হওয়া পর্যন্ত (5 s পর্যন্ত)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensor value দেখান
  disp.loop();                           // display থেকে আসা বার্তা
  delay(200);
}

Function	কাজ
setValue(id, v)	Number, bar, LED, switch…-এর value
setText(id, "…")	Changeable text (Live text-এ UTF-8)
page(PAGE_…)	Page বদলান
show(id) / hide(id)	Widget দেখান / লুকান
setColor(id, c) / setBackground(id, c)	রং (RGB565)
getValue(id) / readText(id, buf, n)	Display-এর value / text পড়ুন
brightness(%) / beep(ms)	Backlight, buzzer
onChange / onKey / onPage / onReboot	Value বদলেছে, board button, page বদলেছে, display restart হয়েছে
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino examples: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO)।

11

Modbus RTU (PLC-এর সঙ্গে)

Pages list-এ একটি page click করুন, তারপর Host link · whole project।
Host link: Modbus RTU slave।
Slave address (1–247), Baud, Parity: PLC-তেও একই।
📋 Register table (CSV): সব registers-এর তালিকা; Excel-এ খুলে PLC programmer-কে দিন।
Device panel-এর baud Modbus baud করুন আর Flash।

Widget বাছলে Name-এর নিচে তার registers: holding register 3 (40004), coil 3 (4)।

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table লাল বাক্সে

Register	Address	অর্থ
Holding (4x)	0 … N-1	Widget value (widget list-এ তার জায়গা)। লিখলে display-এ।
Holding	1000	Page; page ID লিখলে সেই page
Holding	1001 / 1002	Brightness 0–100 % / beep (ms)
Coil (0x)	0 … N-1	দেখান (1) / লুকান (0)
Discrete input (1x)	0 … N-1	Button চাপা হয়েছে কি (পড়লে clear)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: চাপা / ধরে রাখা
Input (3x)	0 … N-1, 1000–1002	Values (read only), page, widget count, version

Functions 01, 02, 03, 04, 05, 06, 08, 15, 16। Values signed 16-bit। Widgets যোগ বা মুছলে addresses বদলায়; PLC-কে নতুন CSV দিন।

RS-485 wiring

MAX485 module	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC-এর (বা USB-RS485-এর) A / B

Flash-এর জন্য USB-serial (TTL) cable লাগে। USB-serial TXD আর MAX485 RO একসঙ্গে সরাসরি RC7-এ লাগাবেন না: jumper, বা TXD-তে 1 kΩ resistor আর RB4-এ 10 kΩ pull-up।

PLC ছাড়া PC থেকে test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project-এ Store in:

MCU flash: English fonts, ছোট ছবি। Lite model।
SPI NOR flash: বড় ছবি, animation, অন্য ভাষা। 4 / 8 / 16 models (Board model বাছলে নিজে থেকে)।

NOR-এ font library factory থেকেই আছে। Flash-এর সময় শুধু design-এর ছবি পাঠানো হয়।

13

Widget list, Problems

14

Board, pins

অংশ	PIC pin	টীকা
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus-এ Editor-এ দেওয়া baud)
Host I2C SCL / SDA	RC3 / RC4	Address 0x3C, 4.7 kΩ pull-ups
BUSY	RB4	HIGH = আঁকছে। Modbus-এ RS-485 DE/RE।
INT	RC0	LOW = host-এর জন্য বার্তা আছে (I2C / SPI)
Buttons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Push button (GND-এ) বা TTP223
Touch panel CS	RA0	T models (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 models
Backlight PWM, buzzer	RA6, RA7	যে models-এ আছে
Status LED	RB5	চলার সময় প্রতি 0.5 s-এ জ্বলে-নেভে

Display settings: Tutorial step 3। প্রতিটি পরিবর্তনের পর Flash।

15

Self-test

Connect করার পর Device panel-এ 🔧 Self-test। যে design-ই flash করা থাকুক, এটি চলে।

Colours: লাল, সবুজ, নীল, সাদা, কালো, ধূসর ডোরা, উপরে বাঁয়ে হলুদ বর্গ। বর্গ অন্য কোণে থাকলে Orientation / Mirror ঠিক করুন। START বা tap: পরেরটি।
Buttons, touch: চারটি buttons-ই চাপুন; প্রতিটি box সবুজ হবে। Touch থাকলে dot। কোনো button কাজ না করলে START দুবার।
Parts: NOR, font library, EEPROM: PASS / FAIL। Buzzer, backlight test। START: সাধারণ screen।

16

সমস্যা সমাধান

সমস্যা	কী করবেন
Display পুরো সাদা	Display-এর DC, CS, RST তার আর 3.3 V supply পরীক্ষা করুন।
আয়নার মতো / উল্টো	Display entry, Mirror, Orientation (Tutorial step 3)। Self-test-এর হলুদ বর্গ উপরে বাঁয়ে থাকা উচিত।
রং ভুল	লাল নীল দেখালে: Swap red/blue। সাদা কালো দেখালে: Invert colours।
Buttons সবসময় চাপা	"Buttons on the board": push buttons = "Push buttons to GND", touch pads = "TTP223"।
Touch ভুল জায়গায়	Touch calibration → Calibrate…: display-এর চারটি + চিহ্ন একে একে ছুঁয়ে দিন।
Flash ব্যর্থ / port busy	Disconnect করে Flash। "Waiting for bootloader": board power off / on।
Connect হচ্ছে না	TX / RX উল্টো? (adapter TXD → RC7)। Baud 115200 (Modbus design-এ Modbus baud)।
লেখা "????"	Widget-এর Language ঠিক করুন। English ছাড়া live text-এর জন্য NOR model।
Modbus উত্তর নেই	Address, baud, parity একই? A / B বদলান। Page বদলের পর PLC timeout 3 s।
Problems-এ error	Error-এ click করে সেই widget ঠিক করুন। Error থাকলে Flash হবে না।

PixPIO 2.8" smart display · Manual de usuario

Manual de usuario de PixPIO

Diseñe las pantallas y envíelas al display con un clic. Úselo desde cualquier microcontrolador (Arduino, PIC, STM32…), desde un PLC por Modbus o directamente desde el PC. También funciona solo, únicamente con alimentación.

Los recuadros rojos de las capturas son los ajustes / botones que usa ese paso.

Un diseño como el del tutorial de este manual en el display: sin host, solo Actions.

1

Qué es PixPIO

PixPIO es una placa de display a color de 2.8" (320×240) con su propio procesador (PIC18F27Q84). Las pantallas, botones, barras, indicadores e imágenes se diseñan en el PC con el PixPIO Editor, y el display los dibuja por sí mismo. El host (un MCU o un PLC) solo envía mensajes cortos como "level = 80".

LiteSin NOR, sin táctil. Fuentes en inglés.

4 / 4T4 MB NOR (todas las fuentes e idiomas). T = táctil.

8 / 8T8 MB NOR. Más imágenes, animaciones.

16 / 16T16 MB NOR. Imágenes grandes, muchos idiomas.

La placa tiene 4 botones: MENU UP DOWN START (pulsadores o pads táctiles TTP223). Algunos modelos también tienen control de brillo y zumbador.

Por qué PixPIO

Edición en vivoConecte el USB: cada cambio en el Editor aparece al instante en la pantalla. Sin tarjeta SD, sin cargas largas.

30 widgets listosIndicadores, gráficos, teclados, códigos QR, animaciones: arrastrar y listo.

Cualquier hostUART, I2C o SPI. Probado con PIC, Arduino, ESP32, STM32. O sin host.

Su idiomaMuchos idiomas en pantalla, con escritura fonética para lenguas de la India.

Herramientas gratisPixPIO Editor y PICPIO para VS Code no cuestan nada.

2

Instalación

Instale Visual Studio Code (Windows, gratis).
En VS Code, la extensión PICPIO: Extensions → "…" → Install from VSIX… → el picpio-x.y.z.vsix que vino con la placa.
Reinicie VS Code. En el menú PICPIO (o Ctrl+Shift+P → "PixPIO") elija PixPIO. El Editor se abre en el navegador.
Conecte el cable USB-serie (CH340) al PC. En Device Manager → Ports debe aparecer algo como USB-SERIAL CH340 (COM3).

El Editor no necesita internet. Se comunica con el display mediante un "bridge" que ejecuta VS Code, así que mantenga VS Code abierto mientras usa el Editor.

3

El Editor

La primera vez, el Editor muestra un proyecto de ejemplo (el botón Example de la barra lo trae siempre de vuelta; 8 pages, casi todos los widgets).

PixPIO Editor: barra, pages, add widget, preview, properties, problems, device — El PixPIO Editor con el proyecto de ejemplo.

Parte	Dónde	Qué hace
Toolbar	Arriba	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	Arriba a la izquierda	Las pantallas. + page nueva, ⧉ copiar, − quitar. "start" = la que se muestra primero.
Add widget	Izquierda	Haga clic en uno y se añade a la pantalla.
Preview	Centro	Tal como lo mostrará el display. Arrastre para mover; tire de los cuadrados azules para cambiar el tamaño.
Properties	Derecha	Los ajustes del widget elegido. Haga clic en una page de la lista para ver los ajustes de la page y de todo el proyecto. ? = explicación de cada ajuste.
Problems	Abajo a la izquierda	Errores y avisos del diseño.
Device	Abajo a la derecha	Puerto COM, Connect, Mirror, Storage, Self-test, Touch, comandos desde el PC (capítulo 6).

Atajos: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copiar, Del borrar, Ctrl+Z / Y deshacer / rehacer.

4

Tutorial: Water Tank (desde cero)

Una pantalla de 2 pages que muestra el nivel de un depósito. UP / DOWN cambian el nivel y la barra lo sigue. En 100 muestra "TANK FULL", en 0 "TANK EMPTY". MENU abre una page de ajustes. No hace falta host. Unos 15 minutos.

PASO 1

Un proyecto nuevo

New en la barra. Obtiene una pantalla vacía (page "main").

PASO 2

Board model

A la derecha, en Screen · whole project, ponga Board model en el modelo que indica la etiqueta de la placa (aquí PixPIO 4T).

Esto ajusta por sí solo el display, el táctil, los botones, el brillo, el zumbador y la NOR. El Editor lo recuerda.

Board model PixPIO 4T en un recuadro rojo

PASO 3

Display (solo si hace falta)

Solo si la imagen sale girada o los colores están mal:

Display: el módulo (variantes ILI9341)
Buttons on the board: pulsadores / TTP223 / ninguno
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation en recuadros rojos

PASO 4

Nombre de la page

Arriba a la derecha, Name: home. En el código del host es PAGE_HOME.

Name de la page home en un recuadro rojo

PASO 5

Una segunda page

El + de Pages. Ponga a la nueva page el Name settings. Después haga clic en home en la lista para volver.

Pages: home start, settings; + en un recuadro rojo

PASO 6

La barra superior (Rectangle)

Rectangle en Add widget. x, y, width, height: 0, 0, 320, 30 (o arrastre con el ratón). Su color en Colours.

Rectangle añadido; botón Rectangle y x y width height en recuadros rojos

PASO 7

Título (Label)

Label: Name title, Text WATER TANK, posición 8, 7, 304, 16. Font, Size y Align están en Text.

Label: Name title, Text WATER TANK en recuadros rojos

PASO 8

Nivel (Number)

Number: Name level, posición 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: se conserva tras un corte de luz

Number: Value, Unit, Min, Max, Remember value en recuadros rojos

PASO 9

Cambiarlo con los botones de la placa

Keys (buttons): Key + UP, Key − DOWN, Step 5. Manteniéndolo pulsado sigue cambiando.

Key + UP, Key − DOWN, Step 5 en recuadros rojos

PASO 10

Barra de nivel

Bar: Name level_bar, posición 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, barra verde por segmentos — Hasta ahora: título, número, barra.

PASO 11

Mensajes ocultos

Label: Name full_msg, Text TANK FULL, posición 10, 120, 300, 20, Hidden ✓.

Otro en el mismo sitio: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Los widgets ocultos se ven punteados en el preview; en el display no aparecen al inicio.

Label: Text TANK FULL, Hidden en recuadros rojos

PASO 12

Actions: 5 acciones en el número

Haga clic en level en el preview. Actions (no code) → + Add action 5 veces:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ borra una fila.

PASO 13

Botón de ajustes

Button: Name btn_settings, posición 10, 200, 145, 34, Caption MENU: Settings.

PASO 14

Cambiar de page al pulsar el botón

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: el MENU de la placa hace lo mismo.

Page home terminada — La page home está lista.

PASO 15

Page de ajustes: botón Back, QR

settings en Pages. Un Rectangle y un Label "SETTINGS" como en los pasos 6 y 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = su sitio web, Border shape = Rounded.

QR: Text / link, Border shape en recuadros rojos

Page de ajustes: SETTINGS, QR redondeado, START: Back — La page de ajustes está lista.

PASO 16

Guardar

Save: un archivo .pixpio. Mientras se vea "Unsaved changes", no está guardado. Después, conecte la placa y haga Flash (capítulo 5).

5

Conectar la placa, Flash

PASO 1

Cable USB-serie

USB-serie (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Solo si la placa no tiene alimentación propia

PASO 2

Connect

En Device: el puerto COM, baud 115200, Connect. Punto verde = conectado. ¿No aparece el puerto? ↻.

PASO 3

⚡ Flash to display

⚡ Flash to display en la barra.
El diseño se convierte en firmware y se envía por el cable; una ventana muestra el progreso. La primera vez tarda 1–2 minutos.
Cuando aparece "UPLOAD SUCCESSFUL", el display arranca con la nueva pantalla.
Las imágenes y otros idiomas (modelos con NOR) van a la NOR por el mismo cable.

No hace falta tarjeta SD. Para cada cambio: cámbielo en el Editor y haga Flash.

El diseño del tutorial en el display: cambie el nivel con UP / DOWN, llévelo a 100 para ver "TANK FULL", pulse MENU para la page de ajustes.

6

Controlar el display desde el PC

Una vez conectado, puede probar cada widget desde el PC, sin MCU host. Tres formas:

1. Comandos rápidos (panel Device)

Page + Show: abre esa page en el display.
Elija un Widget, escriba un Value, Set value: cambia un número, barra, LED, interruptor…
text + Set text: cambia un texto Changeable.
Hide / Show: ocultar / mostrar el widget.
Key + Press: como si se pulsara un botón de la placa (MENU, UP…).

Comandos rápidos de Device en recuadros rojos

2. Commands for this widget

Con cualquier widget elegido, al final de sus propiedades está Commands for this widget. Para cada comando:

Send: lo envía al instante del PC al display (debe estar conectado).
Copy: el código para pegar en el programa del host (pd_set_value(&disp, W_NUMBER, 253);).
Los bytes verdes: la trama a enviar usted mismo por UART / I2C / SPI (si programa en otro lenguaje).

Los comandos siguen a los ajustes cuando los cambia. Los comandos de cada widget están en el capítulo 7.

Comandos del widget Number; Copy y Send en cada uno

3. Mirror, Touch

Mirror ✓: lo que pasa en el display (pulsaciones, cambios de valor) se ve también en el preview en directo.
☝ Touch: un clic en el preview equivale a tocar el display con el dedo (cursor 👆, punto amarillo).
🔧 Self-test, ⬆ Storage: capítulos 15, 12.

Mirror, Storage, Self-test, Touch en recuadros rojos

7

Cada widget

Para cada widget: para qué sirve, cómo se usa, cuál es su valor y el código del host. Tres imágenes: En el display (el widget añadido a un proyecto New), Ajustes y Commands (Send desde el PC / Copy del código). Los nombres son los mismos que en la lista Add widget.

Rectangle

Barras de cabecera, fondos, tarjetas. Puede ir detrás de otros widgets.

Cómo usarlo

Colours: Background (relleno), color de Text / border.
Corner radius: esquinas redondeadas. Border: un contorno.
Más abajo en la lista de widgets = detrás de otros (cambie el orden con ↑ ↓).

Valor

—

Código del host (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // rojo
disp.hide(W_HEADER);

Rectangle: En el display — En el display

Rectangle: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Label

Texto fijo: títulos, rótulos, unidades.

Cómo usarlo

Escriba en Text. Font, Size, Align.
Language: otros idiomas (capítulo 9).
Con Changeable ✓ el host puede cambiar el texto.
No background: se ve lo de debajo.

Valor

—

Código del host (Arduino)

disp.setText(W_LABEL, "Motor ON");   // necesita Changeable ✓

Label: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Number

Muestra un número: temperatura, velocidad, contador, consigna.

Cómo usarlo

Value (inicial), Min, Max.
Decimals 1 muestra 253 como 25.3. Unit: °C, %, V.
Keys: se cambia con UP / DOWN, en pasos de Step.
Remember value: se conserva tras un corte de luz.

Valor

El número (Min…Max)

Código del host (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Bar

Nivel, progreso, depósito, batería.

Cómo usarlo

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
En modelos táctiles se puede arrastrar con el dedo (slider).
Controls brightness: esta barra regula la retroiluminación.

Valor

Min…Max

Código del host (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Button

Un botón para pulsar: cambiar de page, marcha / paro.

Cómo usarlo

Caption: su texto. Style: normal, outline, pill, checkbox.
Mode: push (solo mientras se pulsa) / toggle (on-off).
Key: un botón de la placa (MENU…) también lo pulsa.
Actions: Pressed → Go to page, Set value…

Valor

Toggle: 0 / 1

Código del host (Arduino)

disp.onKey(myKey);             // botón de la placa
disp.onChange(myChange);       // valor del toggle

Switch

Un interruptor ON / OFF: ventilador, luz, modo.

Cómo usarlo

Switched on: su estado inicial.
Key: un botón de la placa lo cambia. El táctil también.
Remember value.

Valor

0 / 1

Código del host (Arduino)

disp.setValue(W_SWITCH, 1);
// cuando el operador lo cambia: onChange(W_SWITCH, 0/1)

Switch: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Select

Un desplegable: una de varias opciones.

Cómo usarlo

Options: Bajo|Medio|Alto (separadas con |).
Selected: la opción inicial.
Keys: abrir / OK, arriba, abajo. El táctil abre la lista.

Valor

0, 1, 2… (posición de la opción)

Código del host (Arduino)

disp.setValue(W_SELECT, 2);   // Alto

Select: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Keyboard

Un teclado QWERTY en pantalla: un nombre, una contraseña Wi-Fi.

Cómo usarlo

Types into: un Input box.
Language: idiomas de la India escritos con letras inglesas (capítulo 9).
Al tocar el Input box también puede aparecer el teclado (Keyboard on tap).

Valor

Código del carácter (8 = borrar, 13 = OK)

Código del host (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Input box

El recuadro donde escribe un keypad / teclado.

Cómo usarlo

Placeholder, Max length.
Kind: text, number, password (se ve *), Indian language (se escribe en letras inglesas y se ve en un alfabeto indio; capítulo 9).

Valor

Tipo Number: el número, al pulsar OK

Código del host (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: En el display — En el display

Input box: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Message

Varias líneas de texto; las palabras pasan solas a la línea siguiente.

Cómo usarlo

Message: | = línea nueva. Line gap.
Language, Live text (capítulo 9).
Changeable: el host puede cambiarlo.

Valor

—

Código del host (Arduino)

disp.setText(W_MESSAGE, "Cambie el filtro|Servicio en 3 días");

Message: Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

Roller (picker)

Un selector que se desplaza: programas, modos.

Cómo usarlo

Options: Off|Bajo|Medio|Alto. Rows shown: 3, 5, 7.
Keys siguiente / anterior. En táctil: toque la fila de arriba o de abajo.
Remember value.

Valor

La fila elegida (0, 1, 2…)

Código del host (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): En el display — En el display

Roller (picker): Commands: Send desde el PC, Copy del código — Commands: Send desde el PC, Copy del código

8

Actions: lista completa

Lo que el display hace por sí mismo cuando algo le pasa a un widget. No hace falta host. Ejemplos: pasos 12 y 14 del tutorial.

When (cuándo)	Qué widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Los mismos widgets

Do (qué)	Destino / valor
Go to page	Una page
Set value of	widget, valor
Add to / Subtract from	widget, cuánto
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Modelos con zumbador
Brightness (%)	Modelos con control de brillo

9

Idiomas

Ponga un Message en una page (Label, Text y Button funcionan igual).

Language: Français · Deutsch · Español … (é ü ñ ç ß), Русский, Ελληνικά, o idiomas de la India (hindi, tamil, malayalam…).
La frase en Phrases (varias: sepárelas con |).
Live text ✓: el host puede enviar cualquier frase en UTF-8; el display dibuja acentos y letras especiales correctamente. Al marcarlo, el campo pasa a "Message" y se marca "Changeable".

El texto en vivo en idiomas distintos del inglés necesita un modelo con NOR (4, 8, 16). Las fuentes vienen de fábrica en la NOR.

Language, Message, Changeable en recuadros rojos

Escribir en idiomas de la India con el teclado

El teclado en pantalla puede escribir en malayalam, hindi, maratí, tamil, guyaratí, panyabí o bengalí: se pulsan letras inglesas y el recuadro las muestra en ese alfabeto (namaste → नमस्ते), como la escritura fonética de un móvil.

Añada un Keyboard.
Language: elija el idioma.

Si el teclado aún no escribe en ningún Input box ("Types into" = None), al elegir un idioma se añade un Input box encima del teclado y el teclado escribe en él.

Ajustes del Keyboard: Language en un recuadro rojo

Input box añadido encima del teclado — Tras elegir el idioma: un Input box encima del teclado, "Types into" = ese recuadro.

El idioma es un ajuste de ese Input box; también puede cambiarse seleccionando el recuadro:

Kind: Indian language (typed in English).
Language: el idioma.
Letter size: 16, 20, 24 px.
Debajo se muestran las reglas de escritura de ese idioma.

Max length es como máximo 24 letras. "Show typed text" solo hace falta cuando el teclado tapa el recuadro (teclado emergente). Si el recuadro se ve encima del teclado, desmárquelo; si no, el mismo texto se ve en dos recuadros.

Ajustes del Input box: Kind, Language, Letter size en recuadros rojos

Recuadros escritos en siete idiomas — En el display: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Necesita un modelo con NOR (4T, 8T, 16T…). Cuando el host lee el recuadro (readText) recibe las letras inglesas que se escribieron.

10

Desde un MCU host (Arduino / C)

Barra Export ▾:

Download pixpio_ui.h: un nombre para cada widget y page (W_LEVEL, PAGE_SETTINGS…). Añádalo al programa del host.
Write to project folder…: el firmware y la cabecera del host juntos.
NOR data file: solo para un programador de chips.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Se llama cuando el operador cambia el nivel con UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → placa RC7, host RX ← placa RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // hasta que el display esté listo (máx. 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // mostrar el valor del sensor
  disp.loop();                           // mensajes del display
  delay(200);
}

Función	Qué hace
setValue(id, v)	Valor de un número, barra, LED, interruptor…
setText(id, "…")	Texto Changeable (UTF-8 para Live text)
page(PAGE_…)	Cambiar de page
show(id) / hide(id)	Mostrar / ocultar un widget
setColor(id, c) / setBackground(id, c)	Color (RGB565)
getValue(id) / readText(id, buf, n)	Leer un valor / texto del display
brightness(%) / beep(ms)	Retroiluminación, zumbador
onChange / onKey / onPage / onReboot	Cambió un valor, un botón de la placa, cambió la page, el display se reinició
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Ejemplos de Arduino: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (con un PLC)

Haga clic en una page de la lista Pages y luego en Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: lo mismo en el PLC.
📋 Register table (CSV): la lista de todos los registros; ábrala en Excel para el programador del PLC.
Ponga el baud del panel Device igual al de Modbus y haga Flash.

Al seleccionar un widget, sus registros aparecen bajo el Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table en recuadros rojos

Registro	Dirección	Significado
Holding (4x)	0 … N-1	Valor del widget (su lugar en la lista de widgets). Al escribirlo se muestra en el display.
Holding	1000	Page; escriba un ID de page para abrirla
Holding	1001 / 1002	Brillo 0–100 % / beep (ms)
Coil (0x)	0 … N-1	Mostrar (1) / ocultar (0)
Discrete input (1x)	0 … N-1	Botón pulsado (se borra al leerlo)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: pulsado / mantenido
Input (3x)	0 … N-1, 1000–1002	Valores (solo lectura), page, número de widgets, versión

Funciones 01, 02, 03, 04, 05, 06, 08, 15, 16. Los valores son de 16 bits con signo. Añadir o quitar widgets cambia las direcciones; entregue al PLC el CSV nuevo.

Cableado RS-485

Módulo MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B del PLC (o del USB-RS485)

Para hacer Flash hace falta el cable USB-serie (TTL). No conecte directamente juntos a RC7 el TXD del USB-serie y el RO del MAX485: use un puente, o una resistencia de 1 kΩ en TXD y un pull-up de 10 kΩ en RB4.

Probar desde el PC sin PLC

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in, en Storage · whole project:

MCU flash: fuentes en inglés, imágenes pequeñas. El modelo Lite.
SPI NOR flash: imágenes grandes, animaciones, otros idiomas. Los modelos 4 / 8 / 16 (se ajusta solo al elegir el Board model).

La biblioteca de fuentes ya está en la NOR de fábrica. Al hacer Flash solo se envían las imágenes del diseño.

13

Widget list, Problems

Diálogo Widgets on this page — **☰ Widgets**: todos los widgets de esta page. Haga clic en un nombre para seleccionarlo. Para seleccionar uno de abajo, desmarque el de encima.

14

Placa, pines

Parte	Pin del PIC	Nota
Host UART TX / RX	RC6 / RC7	115200 8N1 (en Modbus: el baud del Editor)
Host I2C SCL / SDA	RC3 / RC4	Dirección 0x3C, pull-ups de 4.7 kΩ
BUSY	RB4	HIGH = dibujando. En Modbus: DE/RE del RS-485.
INT	RC0	LOW = hay un mensaje para el host (I2C / SPI)
Botones MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Pulsador (a GND) o TTP223
CS del panel táctil	RA0	Modelos T (XPT2046)
CS de la NOR flash	RA5	Modelos 4 / 8 / 16
PWM de retroiluminación, zumbador	RA6, RA7	En los modelos que los tienen
LED de estado	RB5	Parpadea cada 0.5 s mientras funciona

Ajustes del display: paso 3 del tutorial. Haga Flash tras cada cambio.

15

Self-test

Una vez conectado, 🔧 Self-test en el panel Device. Funciona con cualquier diseño cargado.

Colores: franjas roja, verde, azul, blanca, negra y gris, con un cuadrado amarillo arriba a la izquierda. Si el cuadrado está en otra esquina, corrija Orientation / Mirror. START o un toque: siguiente.
Botones, táctil: pulse los cuatro botones; cada recuadro se pone verde. Con táctil, un punto. Si un botón no funciona, START dos veces.
Componentes: NOR, biblioteca de fuentes, EEPROM: PASS / FAIL. Prueba de zumbador y retroiluminación. START: vuelve a la pantalla normal.

16

Solución de problemas

Problema	Qué hacer
El display está todo blanco	Revise los cables DC, CS, RST del display y la alimentación de 3.3 V.
Espejado / al revés	Display, Mirror, Orientation (paso 3 del tutorial). El cuadrado amarillo del self-test debe estar arriba a la izquierda.
Colores incorrectos	El rojo sale azul: Swap red/blue. El blanco sale negro: Invert colours.
Botones siempre pulsados	"Buttons on the board": pulsadores = "Push buttons to GND", pads táctiles = "TTP223".
El toque cae en otro sitio	Touch calibration → Calibrate…: toque una a una las cuatro marcas + del display.
Falla el Flash / puerto ocupado	Desconecte y luego haga Flash. "Waiting for bootloader": apague y encienda la placa.
No conecta	¿TX / RX cruzados? (TXD del adaptador → RC7). Baud 115200 (en un diseño Modbus, el baud de Modbus).
El texto sale "????"	Corrija el Language del widget. El texto en vivo en otros idiomas necesita un modelo con NOR.
Modbus no responde	¿Misma dirección, baud, paridad? Intercambie A / B. Tras un cambio de page, timeout del PLC de 3 s.
Un error en Problems	Haga clic en el error y corrija ese widget. Con un error no hace Flash.

PixPIO 2.8" smart display · Manual do usuário

Manual do usuário PixPIO

Desenhe as telas e envie para o display com um clique. Use a partir de qualquer microcontrolador (Arduino, PIC, STM32…), de um CLP via Modbus ou direto do PC. Também funciona sozinho, só com alimentação.

As caixas vermelhas nas capturas são as configurações / botões usados naquele passo.

Um design como o do tutorial deste manual no display: sem host, só Actions.

1

O que é o PixPIO

O PixPIO é uma placa de display colorido de 2.8" (320×240) com processador próprio (PIC18F27Q84). Telas, botões, barras, medidores e imagens são desenhados no PC com o PixPIO Editor, e o display os desenha sozinho. O host (um MCU ou um CLP) só envia mensagens curtas como "level = 80".

LiteSem NOR, sem toque. Fontes em inglês.

4 / 4T4 MB NOR (todas as fontes e idiomas). T = toque.

8 / 8T8 MB NOR. Mais imagens, animações.

16 / 16T16 MB NOR. Imagens grandes, muitos idiomas.

A placa tem 4 botões: MENU UP DOWN START (botões de pressão ou pads de toque TTP223). Alguns modelos também têm controle de brilho e buzzer.

Por que PixPIO

Edição ao vivoLigue o USB: cada mudança no Editor aparece na hora no display. Sem cartão SD, sem upload demorado.

30 widgets prontosMedidores, gráficos, teclados, QR codes, animações: arrastar e pronto.

Qualquer hostUART, I2C ou SPI. Testado com PIC, Arduino, ESP32, STM32. Ou sem host.

Seu idiomaVários idiomas na tela, com digitação fonética para línguas da Índia.

Ferramentas grátisPixPIO Editor e PICPIO para VS Code são gratuitos.

2

Instalação

Instale o Visual Studio Code (Windows, grátis).
No VS Code, a extensão PICPIO: Extensions → "…" → Install from VSIX… → o picpio-x.y.z.vsix que veio com a placa.
Reinicie o VS Code. No menu PICPIO (ou Ctrl+Shift+P → "PixPIO") escolha PixPIO. O Editor abre no navegador.
Ligue o cabo USB-serial (CH340) ao PC. Em Device Manager → Ports deve aparecer algo como USB-SERIAL CH340 (COM3).

O Editor não precisa de internet. Ele fala com o display por um "bridge" que o VS Code executa, então mantenha o VS Code aberto enquanto usa o Editor.

3

O Editor

Na primeira vez, o Editor mostra um projeto de exemplo (o botão Example da barra sempre o traz de volta; 8 pages, quase todos os widgets).

Parte	Onde	O que faz
Toolbar	Em cima	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	Em cima à esquerda	As telas. + nova page, ⧉ copiar, − remover. "start" = a mostrada primeiro.
Add widget	Esquerda	Clique num e ele é adicionado à tela.
Preview	Centro	Como o display vai mostrar. Arraste para mover; puxe os quadrados azuis para redimensionar.
Properties	Direita	As configurações do widget selecionado. Clique numa page da lista para as configurações da page e do projeto inteiro. ? = explicação de cada configuração.
Problems	Embaixo à esquerda	Erros e avisos do design.
Device	Embaixo à direita	Porta COM, Connect, Mirror, Storage, Self-test, Touch, comandos pelo PC (capítulo 6).

Atalhos: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copiar, Del apagar, Ctrl+Z / Y desfazer / refazer.

4

Tutorial: Water Tank (do zero)

Uma tela de 2 pages com o nível de uma caixa d'água. UP / DOWN mudam o nível e a barra acompanha. Em 100 mostra "TANK FULL", em 0 "TANK EMPTY". MENU abre uma page de configurações. Sem host. Cerca de 15 minutos.

PASSO 1

Um projeto novo

New na barra. Você recebe uma tela vazia (page "main").

PASSO 2

Board model

À direita, em Screen · whole project, ponha Board model no modelo da etiqueta da placa (aqui PixPIO 4T).

Isso ajusta sozinho display, toque, botões, brilho, buzzer e NOR. O Editor lembra.

Board model PixPIO 4T numa caixa vermelha

PASSO 3

Display (só se precisar)

Só se a imagem estiver girada ou as cores erradas:

Display: o módulo (variantes ILI9341)
Buttons on the board: botões de pressão / TTP223 / nenhum
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation em caixas vermelhas

PASSO 4

Nome da page

Em cima à direita, Name: home. No código do host é PAGE_HOME.

PASSO 5

Uma segunda page

O + de Pages. Dê à nova page o Name settings. Depois clique em home na lista para voltar.

Pages: home start, settings; + numa caixa vermelha

PASSO 6

A barra superior (Rectangle)

Rectangle em Add widget. x, y, width, height: 0, 0, 320, 30 (ou arraste com o mouse). A cor em Colours.

Rectangle adicionado; botão Rectangle e x y width height em caixas vermelhas

PASSO 7

Título (Label)

Label: Name title, Text WATER TANK, posição 8, 7, 304, 16. Font, Size e Align ficam em Text.

Label: Name title, Text WATER TANK em caixas vermelhas

PASSO 8

Nível (Number)

Number: Name level, posição 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: mantido após falta de energia

Number: Value, Unit, Min, Max, Remember value em caixas vermelhas

PASSO 9

Mudar com os botões da placa

Keys (buttons): Key + UP, Key − DOWN, Step 5. Segurando, continua mudando.

Key + UP, Key − DOWN, Step 5 em caixas vermelhas

PASSO 10

Barra de nível

Bar: Name level_bar, posição 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Bar: Min, Max, Style em caixas vermelhas

Preview: WATER TANK, 50%, barra verde em segmentos — Até aqui: título, número, barra.

PASSO 11

Mensagens ocultas

Label: Name full_msg, Text TANK FULL, posição 10, 120, 300, 20, Hidden ✓.

Mais um no mesmo lugar: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Widgets ocultos aparecem pontilhados no preview; no display não aparecem no início.

Label: Text TANK FULL, Hidden em caixas vermelhas

PASSO 12

Actions: 5 ações no número

Clique em level no preview. Actions (no code) → + Add action 5 vezes:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ remove uma linha.

PASSO 13

Botão de configurações

Button: Name btn_settings, posição 10, 200, 145, 34, Caption MENU: Settings.

PASSO 14

Trocar de page ao apertar o botão

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: o MENU da placa faz o mesmo.

Page home pronta — A page home está pronta.

PASSO 15

Page de configurações: botão Back, QR

settings em Pages. Um Rectangle e um Label "SETTINGS" como nos passos 6 e 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = seu site, Border shape = Rounded.

QR: Text / link, Border shape em caixas vermelhas

Page de configurações: SETTINGS, QR arredondado, START: Back — A page de configurações está pronta.

PASSO 16

Salvar

Save: um arquivo .pixpio. Enquanto aparecer "Unsaved changes", não está salvo. Em seguida, ligue a placa e faça o Flash (capítulo 5).

5

Ligar a placa, Flash

PASSO 1

Cabo USB-serial

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Só se a placa não tiver alimentação própria

PASSO 2

Connect

Em Device: a porta COM, baud 115200, Connect. Ponto verde = conectado. A porta não aparece? ↻.

PASSO 3

⚡ Flash to display

⚡ Flash to display na barra.
O design vira firmware e é enviado pelo cabo; uma janela mostra o progresso. Na primeira vez leva 1–2 minutos.
Quando aparecer "UPLOAD SUCCESSFUL", o display inicia com a nova tela.
Imagens e outros idiomas (modelos com NOR) vão para a NOR pelo mesmo cabo.

Não precisa de cartão SD. Para cada mudança: altere no Editor e faça o Flash.

O design do tutorial no display: mude o nível com UP / DOWN, leve a 100 para ver "TANK FULL", aperte MENU para a page de configurações.

6

Controlar o display pelo PC

Depois de conectar, você pode testar cada widget pelo PC, sem MCU host. Três formas:

1. Comandos rápidos (painel Device)

Page + Show: abre essa page no display.
Escolha um Widget, digite um Value, Set value: muda um número, barra, LED, chave…
text + Set text: muda um texto Changeable.
Hide / Show: esconder / mostrar o widget.
Key + Press: como se um botão da placa (MENU, UP…) fosse apertado.

Comandos rápidos de Device em caixas vermelhas

2. Commands for this widget

Com qualquer widget selecionado, o fim das propriedades tem Commands for this widget. Para cada comando:

Send: envia do PC ao display na hora (precisa estar conectado).
Copy: o código para colar no programa do host (pd_set_value(&disp, W_NUMBER, 253);).
Os bytes verdes: o quadro para enviar você mesmo por UART / I2C / SPI (programando em outra linguagem).

Os comandos acompanham as configurações quando você as muda. Os comandos de cada widget estão no capítulo 7.

Comandos do widget Number; Copy e Send em cada um

3. Mirror, Touch

Mirror ✓: o que acontece no display (botões, mudanças de valor) aparece também no preview ao vivo.
☝ Touch: um clique no preview age como um dedo no display (cursor 👆, ponto amarelo).
🔧 Self-test, ⬆ Storage: capítulos 15, 12.

Mirror, Storage, Self-test, Touch em caixas vermelhas

7

Cada widget

Para cada widget: para que serve, como usar, qual é o seu valor e o código do host. Três imagens: No display (o widget num projeto New), Configurações e Commands (Send pelo PC / Copy do código). Os nomes são os mesmos da lista Add widget.

Rectangle

Barras de cabeçalho, fundos, cartões. Pode ficar atrás de outros widgets.

Como usar

Colours: Background (preenchimento), cor de Text / border.
Corner radius: cantos arredondados. Border: um contorno.
Mais abaixo na lista de widgets = atrás dos outros (mude a ordem com ↑ ↓).

Valor

—

Código do host (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // vermelho
disp.hide(W_HEADER);

Rectangle: Configurações — Configurações

Rectangle: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Label

Texto fixo: títulos, legendas, unidades.

Como usar

Escreva em Text. Font, Size, Align.
Language: outros idiomas (capítulo 9).
Com Changeable ✓ o host pode mudar o texto.
No background: o que está embaixo aparece.

Valor

—

Código do host (Arduino)

disp.setText(W_LABEL, "Motor ON");   // precisa de Changeable ✓

Label: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Number

Mostra um número: temperatura, velocidade, contagem, setpoint.

Como usar

Value (inicial), Min, Max.
Decimals 1 mostra 253 como 25.3. Unit: °C, %, V.
Keys: muda com UP / DOWN, de Step em Step.
Remember value: mantido após falta de energia.

Valor

O número (Min…Max)

Código do host (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Bar

Nível, progresso, caixa d'água, bateria.

Como usar

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Em modelos com toque, pode ser arrastada com o dedo (slider).
Controls brightness: esta barra controla a luz de fundo.

Valor

Min…Max

Código do host (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Button

Um botão para apertar: trocar de page, liga / desliga.

Como usar

Caption: o texto. Style: normal, outline, pill, checkbox.
Mode: push (só enquanto apertado) / toggle (liga-desliga).
Key: um botão da placa (MENU…) também o aperta.
Actions: Pressed → Go to page, Set value…

Valor

Toggle: 0 / 1

Código do host (Arduino)

disp.onKey(myKey);             // botão da placa
disp.onChange(myChange);       // valor do toggle

Select

Uma lista suspensa: uma de várias opções.

Como usar

Options: Baixo|Médio|Alto (separadas por |).
Selected: a opção inicial.
Keys: abrir / OK, cima, baixo. O toque abre a lista.

Valor

0, 1, 2… (posição da opção)

Código do host (Arduino)

disp.setValue(W_SELECT, 2);   // Alto

Select: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Keyboard

Um teclado QWERTY na tela: um nome, uma senha de Wi-Fi.

Como usar

Types into: um Input box.
Language: idiomas da Índia digitados com letras inglesas (capítulo 9).
Tocar no Input box também pode abrir o teclado (Keyboard on tap).

Valor

Código do caractere (8 = apagar, 13 = OK)

Código do host (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Input box

A caixa onde o keypad / teclado escreve.

Como usar

Placeholder, Max length.
Kind: text, number, password (aparece *), Indian language (digitado em letras inglesas, mostrado num alfabeto indiano; capítulo 9).

Valor

Tipo Number: o número, ao apertar OK

Código do host (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Configurações — Configurações

Input box: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Message

Várias linhas de texto; as palavras passam sozinhas para a próxima linha.

Como usar

Message: | = nova linha. Line gap.
Language, Live text (capítulo 9).
Changeable: o host pode mudar.

Valor

—

Código do host (Arduino)

disp.setText(W_MESSAGE, "Troque o filtro|Manutenção em 3 dias");

Message: Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

Roller (picker)

Um seletor rolante: programas, modos.

Como usar

Options: Off|Baixo|Médio|Alto. Rows shown: 3, 5, 7.
Keys próximo / anterior. No toque: toque a linha de cima ou de baixo.
Remember value.

Valor

A linha selecionada (0, 1, 2…)

Código do host (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): No display — No display

Roller (picker): Configurações — Configurações

Roller (picker): Commands: Send pelo PC, Copy do código — Commands: Send pelo PC, Copy do código

8

Actions: lista completa

O que o display faz sozinho quando algo acontece com um widget. Sem host. Exemplos: passos 12 e 14 do tutorial.

When (quando)	Quais widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Os mesmos widgets

Do (o quê)	Alvo / valor
Go to page	Uma page
Set value of	widget, valor
Add to / Subtract from	widget, quanto
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Modelos com buzzer
Brightness (%)	Modelos com controle de brilho

9

Idiomas

Coloque um Message numa page (Label, Text e Button funcionam igual).

Language: Français · Deutsch · Español … (é ü ñ ç ß, ã õ), Русский, Ελληνικά, ou idiomas da Índia (hindi, tâmil, malaiala…).
A frase em Phrases (várias: separe com |).
Live text ✓: o host pode enviar qualquer frase em UTF-8; o display desenha acentos e letras especiais corretamente. Ao marcar, o campo vira "Message" e "Changeable" é marcado.

Texto ao vivo em idiomas diferentes do inglês precisa de um modelo com NOR (4, 8, 16). As fontes já vêm de fábrica na NOR.

Language, Message, Changeable em caixas vermelhas

Escrever idiomas da Índia no teclado

O teclado da tela pode escrever em malaiala, hindi, marata, tâmil, guzerate, panjabi ou bengali: você digita letras inglesas e a caixa mostra no alfabeto desse idioma (namaste → नमस्ते), como a digitação fonética do celular.

Adicione um Keyboard.
Language: escolha o idioma.

Se o teclado ainda não escreve em nenhum Input box ("Types into" = None), escolher um idioma adiciona um Input box acima do teclado, e o teclado escreve nele.

Configurações do Keyboard: Language numa caixa vermelha

Input box adicionado acima do teclado — Depois de escolher o idioma: um Input box acima do teclado, "Types into" = essa caixa.

O idioma é uma configuração desse Input box; também pode ser mudado selecionando a caixa:

Kind: Indian language (typed in English).
Language: o idioma.
Letter size: 16, 20, 24 px.
Abaixo aparecem as regras de digitação desse idioma.

Max length é no máximo 24 letras. "Show typed text" só é necessário quando o teclado cobre a caixa (teclado pop-up). Se a caixa aparece acima do teclado, desmarque; senão o mesmo texto aparece em duas caixas.

Configurações do Input box: Kind, Language, Letter size em caixas vermelhas

Caixas digitadas em sete idiomas — No display: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Precisa de um modelo com NOR (4T, 8T, 16T…). Quando o host lê a caixa (readText) recebe as letras inglesas digitadas.

10

A partir de um MCU host (Arduino / C)

Barra Export ▾:

Download pixpio_ui.h: um nome para cada widget e page (W_LEVEL, PAGE_SETTINGS…). Inclua no programa do host.
Write to project folder…: o firmware e o cabeçalho do host juntos.
NOR data file: só para um gravador de chips.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Chamado quando o operador muda o nível com UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → placa RC7, host RX ← placa RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // até o display ficar pronto (até 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // mostrar o valor do sensor
  disp.loop();                           // mensagens do display
  delay(200);
}

Função	O que faz
setValue(id, v)	Valor de um número, barra, LED, chave…
setText(id, "…")	Texto Changeable (UTF-8 para Live text)
page(PAGE_…)	Trocar de page
show(id) / hide(id)	Mostrar / esconder um widget
setColor(id, c) / setBackground(id, c)	Cor (RGB565)
getValue(id) / readText(id, buf, n)	Ler um valor / texto do display
brightness(%) / beep(ms)	Luz de fundo, buzzer
onChange / onKey / onPage / onReboot	Um valor mudou, um botão da placa, a page mudou, o display reiniciou
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Exemplos Arduino: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (com um CLP)

Clique numa page da lista Pages e depois em Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: o mesmo no CLP.
📋 Register table (CSV): a lista de todos os registradores; abra no Excel para o programador do CLP.
Ajuste o baud do painel Device para o baud do Modbus e faça o Flash.

Ao selecionar um widget, seus registradores aparecem sob o Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table em caixas vermelhas

Registrador	Endereço	Significado
Holding (4x)	0 … N-1	Valor do widget (posição na lista de widgets). Ao escrever, aparece no display.
Holding	1000	Page; escreva um ID de page para abri-la
Holding	1001 / 1002	Brilho 0–100 % / beep (ms)
Coil (0x)	0 … N-1	Mostrar (1) / esconder (0)
Discrete input (1x)	0 … N-1	Botão apertado (zera ao ler)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: apertado / segurado
Input (3x)	0 … N-1, 1000–1002	Valores (só leitura), page, número de widgets, versão

Funções 01, 02, 03, 04, 05, 06, 08, 15, 16. Valores de 16 bits com sinal. Adicionar ou remover widgets muda os endereços; entregue o novo CSV ao CLP.

Ligação RS-485

Módulo MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B do CLP (ou do USB-RS485)

Para o Flash é preciso o cabo USB-serial (TTL). Não ligue o TXD do USB-serial e o RO do MAX485 juntos direto no RC7: use um jumper, ou um resistor de 1 kΩ no TXD e um pull-up de 10 kΩ no RB4.

Testar pelo PC sem CLP

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in, em Storage · whole project:

MCU flash: fontes em inglês, imagens pequenas. O modelo Lite.
SPI NOR flash: imagens grandes, animações, outros idiomas. Os modelos 4 / 8 / 16 (ajustado sozinho ao escolher o Board model).

A biblioteca de fontes já está na NOR de fábrica. No Flash só as imagens do design são enviadas.

13

Widget list, Problems

14

Placa, pinos

Parte	Pino do PIC	Nota
Host UART TX / RX	RC6 / RC7	115200 8N1 (no Modbus: o baud do Editor)
Host I2C SCL / SDA	RC3 / RC4	Endereço 0x3C, pull-ups de 4.7 kΩ
BUSY	RB4	HIGH = desenhando. No Modbus: DE/RE do RS-485.
INT	RC0	LOW = há mensagem para o host (I2C / SPI)
Botões MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Botão de pressão (para GND) ou TTP223
CS do painel de toque	RA0	Modelos T (XPT2046)
CS da NOR flash	RA5	Modelos 4 / 8 / 16
PWM da luz de fundo, buzzer	RA6, RA7	Nos modelos que têm
LED de status	RB5	Pisca a cada 0.5 s em funcionamento

Configurações do display: passo 3 do tutorial. Faça o Flash após cada mudança.

15

Self-test

Depois de conectar, 🔧 Self-test no painel Device. Funciona com qualquer design gravado.

Cores: faixas vermelha, verde, azul, branca, preta e cinza, com um quadrado amarelo em cima à esquerda. Se o quadrado estiver em outro canto, corrija Orientation / Mirror. START ou um toque: próximo.
Botões, toque: aperte os quatro botões; cada caixa fica verde. Com toque, um ponto. Se um botão não funciona, START duas vezes.
Componentes: NOR, biblioteca de fontes, EEPROM: PASS / FAIL. Teste do buzzer e da luz de fundo. START: volta à tela normal.

16

Solução de problemas

Problema	O que fazer
Display todo branco	Verifique os fios DC, CS, RST do display e a alimentação de 3.3 V.
Espelhado / de cabeça para baixo	Display, Mirror, Orientation (passo 3 do tutorial). O quadrado amarelo do self-test deve ficar em cima à esquerda.
Cores erradas	Vermelho sai azul: Swap red/blue. Branco sai preto: Invert colours.
Botões sempre apertados	"Buttons on the board": botões de pressão = "Push buttons to GND", pads de toque = "TTP223".
O toque cai no lugar errado	Touch calibration → Calibrate…: toque as quatro marcas + do display, uma por uma.
Flash falha / porta ocupada	Desconecte e faça o Flash. "Waiting for bootloader": desligue e ligue a placa.
Não conecta	TX / RX invertidos? (TXD do adaptador → RC7). Baud 115200 (num design Modbus, o baud do Modbus).
O texto sai "????"	Corrija o Language do widget. Texto ao vivo em outros idiomas precisa de modelo com NOR.
Modbus não responde	Mesmo endereço, baud, paridade? Inverta A / B. Após trocar de page, timeout do CLP de 3 s.
Um erro em Problems	Clique no erro e corrija esse widget. Com erro, o Flash não acontece.

PixPIO 2.8" smart display · Manuel d'utilisation

Manuel d'utilisation PixPIO

Dessinez les écrans, envoyez-les à l'afficheur en un clic. Utilisable depuis n'importe quel microcontrôleur (Arduino, PIC, STM32…), depuis un automate en Modbus ou directement depuis le PC. Il fonctionne aussi seul, avec une simple alimentation.

Les cadres rouges des captures montrent les réglages / boutons utilisés à cette étape.

Un design comme celui du tutoriel sur l'afficheur : sans hôte, uniquement des Actions.

1

Qu'est-ce que PixPIO

PixPIO est une carte d'affichage couleur de 2.8" (320×240) avec son propre processeur (PIC18F27Q84). Écrans, boutons, barres, jauges et images sont dessinés sur le PC dans le PixPIO Editor, et l'afficheur les dessine lui-même. L'hôte (un MCU ou un automate) n'envoie que de courts messages comme « level = 80 ».

LiteSans NOR, sans tactile. Polices anglaises.

4 / 4T4 Mo de NOR (toutes les polices et langues). T = tactile.

8 / 8T8 Mo de NOR. Plus d'images, d'animations.

16 / 16T16 Mo de NOR. Grandes images, nombreuses langues.

La carte a 4 boutons : MENU UP DOWN START (boutons-poussoirs ou pastilles tactiles TTP223). Certains modèles ont aussi le réglage de luminosité et un buzzer.

Pourquoi PixPIO

Édition en directBranchez l’USB : chaque modification dans l’Editor s’affiche aussitôt. Pas de carte SD, pas de long transfert.

30 widgets prêtsJauges, graphiques, claviers, QR codes, animations : glisser, déposer, c’est fait.

N’importe quel hôteUART, I2C ou SPI. Testé avec PIC, Arduino, ESP32, STM32. Ou sans hôte.

Votre langueDe nombreuses langues à l’écran, avec saisie phonétique pour les langues indiennes.

Outils gratuitsPixPIO Editor et PICPIO pour VS Code sont gratuits.

2

Installation

Installez Visual Studio Code (Windows, gratuit).
Dans VS Code, l'extension PICPIO : Extensions → « … » → Install from VSIX… → le fichier picpio-x.y.z.vsix fourni avec la carte.
Redémarrez VS Code. Dans le menu PICPIO (ou Ctrl+Shift+P → « PixPIO »), choisissez PixPIO. L'Editor s'ouvre dans le navigateur.
Branchez le câble USB-série (CH340) au PC. Device Manager → Ports doit afficher par exemple USB-SERIAL CH340 (COM3).

L'Editor n'a pas besoin d'internet. Il parle à l'afficheur via un « bridge » lancé par VS Code : gardez VS Code ouvert pendant que vous utilisez l'Editor.

3

L'Editor

À la première ouverture, l'Editor montre un projet d'exemple (le bouton Example de la barre le ramène toujours ; 8 pages, presque tous les widgets).

PixPIO Editor : barre, pages, add widget, preview, properties, problems, device — Le PixPIO Editor avec le projet d'exemple.

Zone	Où	Rôle
Toolbar	En haut	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	En haut à gauche	Les écrans. + nouvelle page, ⧉ copier, − supprimer. « start » = celle affichée en premier.
Add widget	À gauche	Un clic ajoute le widget à l'écran.
Preview	Au centre	Tel que l'afficheur le montrera. Faites glisser pour déplacer ; tirez les carrés bleus pour redimensionner.
Properties	À droite	Les réglages du widget sélectionné. Un clic sur une page de la liste montre les réglages de la page et de tout le projet. ? = explication de chaque réglage.
Problems	En bas à gauche	Erreurs et avertissements du design.
Device	En bas à droite	Port COM, Connect, Mirror, Storage, Self-test, Touch, commandes depuis le PC (chapitre 6).

Raccourcis : ←→↑↓ 1 px (Shift 10 px), Ctrl+D copier, Del supprimer, Ctrl+Z / Y annuler / rétablir.

4

Tutoriel : Water Tank (à partir de zéro)

Un écran de 2 pages qui affiche le niveau d'une cuve. UP / DOWN changent le niveau et la barre suit. À 100 il affiche « TANK FULL », à 0 « TANK EMPTY ». MENU ouvre une page de réglages. Pas d'hôte nécessaire. Environ 15 minutes.

ÉTAPE 1

Un nouveau projet

New dans la barre. Vous obtenez un écran vide (page « main »).

ÉTAPE 2

Board model

À droite, sous Screen · whole project, réglez Board model sur le modèle indiqué sur l'étiquette de la carte (ici PixPIO 4T).

Cela règle tout seul l'afficheur, le tactile, les boutons, la luminosité, le buzzer et la NOR. L'Editor s'en souvient.

Board model PixPIO 4T dans un cadre rouge

ÉTAPE 3

Display (seulement si nécessaire)

Seulement si l'image est tournée ou les couleurs fausses :

Display : le module (variantes ILI9341)
Buttons on the board : boutons-poussoirs / TTP223 / aucun
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation dans des cadres rouges

ÉTAPE 4

Nommer la page

En haut à droite, Name : home. Dans le code de l'hôte, c'est PAGE_HOME.

Name de la page home dans un cadre rouge

ÉTAPE 5

Une deuxième page

Le + de Pages. Nommez la nouvelle page settings. Puis cliquez sur home dans la liste pour revenir.

Pages : home start, settings ; + dans un cadre rouge

ÉTAPE 6

La barre du haut (Rectangle)

Rectangle dans Add widget. x, y, width, height : 0, 0, 320, 30 (ou tracez à la souris). Sa couleur dans Colours.

Rectangle ajouté ; bouton Rectangle et x y width height dans des cadres rouges

ÉTAPE 7

Titre (Label)

Label : Name title, Text WATER TANK, position 8, 7, 304, 16. Font, Size et Align sont sous Text.

Label : Name title, Text WATER TANK dans des cadres rouges

ÉTAPE 8

Niveau (Number)

Number : Name level, position 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓ : conservé après une coupure de courant

Number : Value, Unit, Min, Max, Remember value dans des cadres rouges

ÉTAPE 9

Le changer avec les boutons de la carte

Keys (buttons) : Key + UP, Key − DOWN, Step 5. Maintenu appuyé, il continue de changer.

Key + UP, Key − DOWN, Step 5 dans des cadres rouges

ÉTAPE 10

Barre de niveau

Bar : Name level_bar, position 140, 64, 170, 50, Min 0, Max 100, Style : Segments.

Bar : Min, Max, Style dans des cadres rouges

Preview : WATER TANK, 50 %, barre verte à segments — Jusqu'ici : titre, nombre, barre.

ÉTAPE 11

Messages cachés

Label : Name full_msg, Text TANK FULL, position 10, 120, 300, 20, Hidden ✓.

Un autre au même endroit : Name empty_msg, Text TANK EMPTY, Hidden ✓.

Les widgets cachés apparaissent en pointillés dans le preview ; sur l'afficheur, ils ne sont pas visibles au départ.

Label : Text TANK FULL, Hidden dans des cadres rouges

ÉTAPE 12

Actions : 5 actions sur le nombre

Cliquez sur level dans le preview. Actions (no code) → + Add action 5 fois :

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ supprime une ligne.

ÉTAPE 13

Bouton de réglages

Button : Name btn_settings, position 10, 200, 145, 34, Caption MENU: Settings.

ÉTAPE 14

Changer de page quand on appuie sur le bouton

+ Add action : Pressed → Go to page → 0x02 · settings. Key : MENU : le MENU de la carte fait la même chose.

Page home terminée — La page home est terminée.

ÉTAPE 15

Page de réglages : bouton Back, QR

settings dans Pages. Un Rectangle et un Label « SETTINGS » comme aux étapes 6 et 7.

Button : Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code : Text / link = votre site web, Border shape = Rounded.

QR : Text / link, Border shape dans des cadres rouges

Page de réglages : SETTINGS, QR arrondi, START: Back — La page de réglages est terminée.

ÉTAPE 16

Enregistrer

Save : un fichier .pixpio. Tant que « Unsaved changes » s'affiche, rien n'est enregistré. Ensuite, branchez la carte et faites le Flash (chapitre 5).

5

Brancher la carte, Flash

ÉTAPE 1

Câble USB-série

USB-série (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Seulement si la carte n'a pas sa propre alimentation

ÉTAPE 2

Connect

Dans Device : le port COM, baud 115200, Connect. Point vert = connecté. Pas de port dans la liste ? ↻.

ÉTAPE 3

⚡ Flash to display

⚡ Flash to display dans la barre.
Le design devient un firmware envoyé par le câble ; une fenêtre montre la progression. La première fois prend 1–2 minutes.
Quand « UPLOAD SUCCESSFUL » apparaît, l'afficheur démarre avec le nouvel écran.
Les images et autres langues (modèles avec NOR) partent vers la NOR par le même câble.

Pas besoin de carte SD. Pour chaque modification : modifiez dans l'Editor, puis Flash.

Le design du tutoriel sur l'afficheur : changez le niveau avec UP / DOWN, montez à 100 pour voir « TANK FULL », appuyez sur MENU pour la page de réglages.

6

Commander l'afficheur depuis le PC

Une fois connecté, vous pouvez essayer chaque widget depuis le PC, sans MCU hôte. Trois façons :

1. Commandes rapides (panneau Device)

Page + Show : ouvre cette page sur l'afficheur.
Choisissez un Widget, tapez une Value, Set value : un nombre, une barre, une LED, un interrupteur… change.
text + Set text : change un texte Changeable.
Hide / Show : masquer / afficher le widget.
Key + Press : comme si un bouton de la carte (MENU, UP…) était appuyé.

Commandes rapides de Device dans des cadres rouges

2. Commands for this widget

Pour tout widget sélectionné, le bas de ses propriétés contient Commands for this widget. Pour chaque commande :

Send : l'envoie tout de suite du PC à l'afficheur (il doit être connecté).
Copy : le code à coller dans le programme de l'hôte (pd_set_value(&disp, W_NUMBER, 253);).
Les octets verts : la trame à envoyer vous-même en UART / I2C / SPI (si vous programmez dans un autre langage).

Les commandes suivent les réglages quand vous les modifiez. Les commandes de chaque widget sont au chapitre 7.

Commandes du widget Number ; Copy et Send pour chacune

3. Mirror, Touch

Mirror ✓ : ce qui se passe sur l'afficheur (appuis, changements de valeur) se voit aussi en direct dans le preview.
☝ Touch : un clic dans le preview agit comme un doigt sur l'afficheur (curseur 👆, point jaune).
🔧 Self-test, ⬆ Storage : chapitres 15, 12.

Mirror, Storage, Self-test, Touch dans des cadres rouges

7

Chaque widget

Pour chaque widget : à quoi il sert, comment l'utiliser, quelle est sa valeur et le code de l'hôte. Trois images : Sur l'écran (le widget ajouté à un projet New), Réglages et Commands (Send depuis le PC / Copy du code). Les noms sont ceux de la liste Add widget.

Rectangle

Bandeaux, fonds, cartes. Peut se placer derrière d'autres widgets.

Utilisation

Colours : Background (remplissage), couleur Text / border.
Corner radius : coins arrondis. Border : un contour.
Plus bas dans la liste des widgets = derrière les autres (changez l'ordre avec ↑ ↓).

Valeur

—

Code de l’hôte (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // rouge
disp.hide(W_HEADER);

Rectangle: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Label

Texte fixe : titres, légendes, unités.

Utilisation

Tapez dans Text. Font, Size, Align.
Language : autres langues (chapitre 9).
Avec Changeable ✓, l'hôte peut changer le texte.
No background : on voit ce qui est dessous.

Valeur

—

Code de l’hôte (Arduino)

disp.setText(W_LABEL, "Moteur ON");   // nécessite Changeable ✓

Label: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Number

Affiche un nombre : température, vitesse, compteur, consigne.

Utilisation

Value (au départ), Min, Max.
Decimals 1 affiche 253 en 25.3. Unit : °C, %, V.
Keys : se change avec UP / DOWN, par pas de Step.
Remember value : conservé après une coupure de courant.

Valeur

Le nombre (Min…Max)

Code de l’hôte (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Text

Une ligne de texte envoyée par l'hôte : état, nom, message.

Utilisation

Max length : combien de caractères.
Font, Size, Align, couleurs.
Avec Language et Live text : accents et autres alphabets (modèle avec NOR).

Valeur

—

Code de l’hôte (Arduino)

disp.setText(W_TEXT, "En marche");

Text: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Bar

Niveau, progression, cuve, batterie.

Utilisation

Min, Max, Value.
Style : Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Sur les modèles tactiles, se fait glisser au doigt (slider).
Controls brightness : cette barre règle le rétroéclairage.

Valeur

Min…Max

Code de l’hôte (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Button

Un bouton à presser : changer de page, marche / arrêt.

Utilisation

Caption : son texte. Style : normal, outline, pill, checkbox.
Mode : push (seulement pendant l'appui) / toggle (marche-arrêt).
Key : un bouton de la carte (MENU…) l'appuie aussi.
Actions : Pressed → Go to page, Set value…

Valeur

Toggle : 0 / 1

Code de l’hôte (Arduino)

disp.onKey(myKey);             // bouton de la carte
disp.onChange(myChange);       // valeur du toggle

Switch

Un interrupteur ON / OFF : ventilateur, lumière, mode.

Utilisation

Switched on : son état au départ.
Key : un bouton de la carte le bascule. Le tactile aussi.
Remember value.

Valeur

0 / 1

Code de l’hôte (Arduino)

disp.setValue(W_SWITCH, 1);
// quand l'opérateur le bascule : onChange(W_SWITCH, 0/1)

Switch: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Select

Une liste déroulante : une option parmi plusieurs.

Utilisation

Options : Bas|Moyen|Haut (séparées par |).
Selected : l'option au départ.
Keys : ouvrir / OK, haut, bas. Le tactile ouvre la liste.

Valeur

0, 1, 2… (position de l'option)

Code de l’hôte (Arduino)

disp.setValue(W_SELECT, 2);   // Haut

Select: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Switch array

Plusieurs interrupteurs ON / OFF ensemble (zones, relais).

Utilisation

Options : le nom de chaque interrupteur. Columns.
Style : interrupteurs ou cases à cocher.

Valeur

Bits : bit 0 = premier interrupteur

Code de l’hôte (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1 et 3 ON

Switch array: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Keypad

Touches numériques : code PIN, consigne.

Utilisation

Keys : 1|2|3|…|OK. Columns.
Types into : écrit dans un Input box.
Keys move / press : aussi avec les boutons de la carte.

Valeur

Position de la touche appuyée

Code de l’hôte (Arduino)

disp.onChange(myChange);   // chaque appui

Keypad: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Keyboard

Un clavier QWERTY à l'écran : un nom, un mot de passe Wi-Fi.

Utilisation

Types into : un Input box.
Language : langues de l'Inde tapées en lettres latines (chapitre 9).
Toucher l'Input box peut aussi ouvrir le clavier (Keyboard on tap).

Valeur

Code du caractère (8 = effacement, 13 = OK)

Code de l’hôte (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Input box

La case où écrit un keypad / clavier.

Utilisation

Placeholder, Max length.
Kind : text, number, password (affiché en *), Indian language (tapé en lettres latines, affiché dans un alphabet indien ; chapitre 9).

Valeur

Type Number : le nombre, à l'appui sur OK

Code de l’hôte (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Message

Plusieurs lignes de texte ; les mots passent seuls à la ligne.

Utilisation

Message : | = nouvelle ligne. Line gap.
Language, Live text (chapitre 9).
Changeable : l'hôte peut le changer.

Valeur

—

Code de l’hôte (Arduino)

disp.setText(W_MESSAGE, "Changez le filtre|Entretien dans 3 jours");

Message: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

Roller (picker)

Un sélecteur à défilement : programmes, modes.

Utilisation

Options : Off|Bas|Moyen|Haut. Rows shown : 3, 5, 7.
Keys suivant / précédent. Au toucher : la ligne du dessus ou du dessous.
Remember value.

Valeur

La ligne choisie (0, 1, 2…)

Code de l’hôte (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Sur l’écran — Sur l’écran

Roller (picker): Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

QR code

À scanner avec un téléphone : site web, Wi-Fi, téléphone, lien du manuel.

Utilisation

Text / link : https://…, WIFI:T:WPA;S:nom;P:motdepasse;;, tel:….
Border shape, No background.
Une case plus grande se scanne plus facilement.

Valeur

—

Code de l’hôte (Arduino)

disp.show(W_QR);

QR code: Commands : Send depuis le PC, Copy du code — Commands : Send depuis le PC, Copy du code

8

Actions : liste complète

Ce que l'afficheur fait tout seul quand il arrive quelque chose à un widget. Pas d'hôte nécessaire. Exemples : étapes 12 et 14 du tutoriel.

When (quand)	Quels widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Les mêmes widgets

Do (quoi)	Cible / valeur
Go to page	Une page
Set value of	widget, valeur
Add to / Subtract from	widget, combien
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Modèles avec buzzer
Brightness (%)	Modèles avec réglage de luminosité

9

Langues

Placez un Message sur une page (Label, Text et Button fonctionnent pareil).

Language : Français · Deutsch · Español … (é è à ç ô œ), Русский, Ελληνικά, ou langues de l'Inde (hindi, tamoul, malayalam…).
La phrase dans Phrases (plusieurs : séparez par |).
Live text ✓ : l'hôte peut envoyer n'importe quelle phrase en UTF-8 ; l'afficheur dessine correctement les accents et lettres spéciales. En le cochant, le champ devient « Message » et « Changeable » est coché.

Le texte en direct dans une autre langue que l'anglais nécessite un modèle avec NOR (4, 8, 16). Les polices sont déjà dans la NOR en usine.

Language, Message, Changeable dans des cadres rouges

Écrire en langues de l'Inde avec le clavier

Le clavier à l'écran peut écrire en malayalam, hindi, marathi, tamoul, gujarati, pendjabi ou bengali : on tape des lettres latines et la case les affiche dans l'alphabet de la langue (namaste → नमस्ते), comme la saisie phonétique d'un téléphone.

Ajoutez un Keyboard.
Language : choisissez la langue.

Si le clavier n'écrit encore dans aucun Input box (« Types into » = None), choisir une langue ajoute un Input box au-dessus du clavier, et le clavier écrit dedans.

Réglages du Keyboard : Language dans un cadre rouge

Input box ajouté au-dessus du clavier — Après le choix de la langue : un Input box au-dessus du clavier, « Types into » = cette case.

La langue est un réglage de cet Input box ; on peut aussi la changer en sélectionnant la case :

Kind : Indian language (typed in English).
Language : la langue.
Letter size : 16, 20, 24 px.
Les règles de saisie de la langue s'affichent dessous.

Max length : 24 lettres au plus. « Show typed text » ne sert que si le clavier couvre la case (clavier pop-up). Si la case est visible au-dessus du clavier, décochez-le, sinon le même texte apparaît dans deux cases.

Réglages de l'Input box : Kind, Language, Letter size dans des cadres rouges

Cases saisies en sept langues — Sur l'afficheur : santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Nécessite un modèle avec NOR (4T, 8T, 16T…). Quand l'hôte lit la case (readText), il reçoit les lettres latines tapées.

10

Depuis un MCU hôte (Arduino / C)

Barre Export ▾ :

Download pixpio_ui.h : un nom pour chaque widget et page (W_LEVEL, PAGE_SETTINGS…). Ajoutez-le au programme de l'hôte.
Write to project folder… : le firmware et l'en-tête de l'hôte ensemble.
NOR data file : uniquement pour un programmateur de puces.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Appelé quand l'opérateur change le niveau avec UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // TX hôte → RC7 carte, RX hôte ← RC6 carte
  disp.beginSerial(Serial1);        // I2C : disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // jusqu'à ce que l'afficheur soit prêt (5 s max)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // afficher la valeur du capteur
  disp.loop();                           // messages de l'afficheur
  delay(200);
}

Fonction	Rôle
setValue(id, v)	Valeur d'un nombre, barre, LED, interrupteur…
setText(id, "…")	Texte Changeable (UTF-8 pour Live text)
page(PAGE_…)	Changer de page
show(id) / hide(id)	Afficher / masquer un widget
setColor(id, c) / setBackground(id, c)	Couleur (RGB565)
getValue(id) / readText(id, buf, n)	Lire une valeur / un texte de l'afficheur
brightness(%) / beep(ms)	Rétroéclairage, buzzer
onChange / onKey / onPage / onReboot	Une valeur a changé, un bouton de la carte, la page a changé, l'afficheur a redémarré
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Exemples Arduino : uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (avec un automate)

Cliquez sur une page de la liste Pages, puis Host link · whole project.
Host link : Modbus RTU slave.
Slave address (1–247), Baud, Parity : les mêmes dans l'automate.
📋 Register table (CSV) : la liste de tous les registres ; ouvrez-la dans Excel pour le programmeur de l'automate.
Réglez le baud du panneau Device sur celui du Modbus et faites le Flash.

Quand un widget est sélectionné, ses registres apparaissent sous son Name : holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table dans des cadres rouges

Registre	Adresse	Signification
Holding (4x)	0 … N-1	Valeur du widget (sa place dans la liste). L'écrire l'affiche.
Holding	1000	Page ; écrivez un ID de page pour l'ouvrir
Holding	1001 / 1002	Luminosité 0–100 % / bip (ms)
Coil (0x)	0 … N-1	Afficher (1) / masquer (0)
Discrete input (1x)	0 … N-1	Bouton appuyé (remis à zéro à la lecture)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START : appuyé / maintenu
Input (3x)	0 … N-1, 1000–1002	Valeurs (lecture seule), page, nombre de widgets, version

Fonctions 01, 02, 03, 04, 05, 06, 08, 15, 16. Valeurs sur 16 bits signés. Ajouter ou supprimer des widgets change les adresses ; donnez le nouveau CSV à l'automate.

Câblage RS-485

Module MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B de l'automate (ou de l'USB-RS485)

Le Flash nécessite le câble USB-série (TTL). Ne reliez pas directement ensemble à RC7 le TXD de l'USB-série et le RO du MAX485 : utilisez un cavalier, ou une résistance de 1 kΩ sur TXD et un pull-up de 10 kΩ sur RB4.

Tester depuis le PC sans automate

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in, sous Storage · whole project :

MCU flash : polices anglaises, petites images. Le modèle Lite.
SPI NOR flash : grandes images, animations, autres langues. Les modèles 4 / 8 / 16 (réglé tout seul en choisissant le Board model).

La bibliothèque de polices est déjà dans la NOR en usine. Au Flash, seules les images du design sont envoyées.

13

Widget list, Problems

Fenêtre Widgets on this page — **☰ Widgets** : tous les widgets de cette page. Cliquez sur un nom pour le sélectionner. Pour en sélectionner un dessous, décochez celui du dessus.

14

Carte, broches

Élément	Broche PIC	Note
Host UART TX / RX	RC6 / RC7	115200 8N1 (en Modbus : le baud choisi dans l'Editor)
Host I2C SCL / SDA	RC3 / RC4	Adresse 0x3C, pull-ups de 4.7 kΩ
BUSY	RB4	HIGH = en train de dessiner. En Modbus : DE/RE du RS-485.
INT	RC0	LOW = un message pour l'hôte (I2C / SPI)
Boutons MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Bouton-poussoir (vers GND) ou TTP223
CS du panneau tactile	RA0	Modèles T (XPT2046)
CS de la NOR flash	RA5	Modèles 4 / 8 / 16
PWM du rétroéclairage, buzzer	RA6, RA7	Sur les modèles qui en ont
LED d'état	RB5	Clignote toutes les 0.5 s en fonctionnement

Réglages de l'afficheur : étape 3 du tutoriel. Faites le Flash après chaque modification.

15

Self-test

Une fois connecté, 🔧 Self-test dans le panneau Device. Il fonctionne quel que soit le design chargé.

Couleurs : bandes rouge, verte, bleue, blanche, noire et grise, avec un carré jaune en haut à gauche. Si le carré est dans un autre coin, corrigez Orientation / Mirror. START ou une touche : suivant.
Boutons, tactile : appuyez sur les quatre boutons ; chaque case devient verte. Avec le tactile, un point. Si un bouton ne marche pas, START deux fois.
Composants : NOR, bibliothèque de polices, EEPROM : PASS / FAIL. Test du buzzer et du rétroéclairage. START : retour à l'écran normal.

16

Dépannage

Problème	Que faire
L'afficheur est tout blanc	Vérifiez les fils DC, CS, RST de l'afficheur et l'alimentation 3.3 V.
En miroir / à l'envers	Display, Mirror, Orientation (étape 3 du tutoriel). Le carré jaune du self-test doit être en haut à gauche.
Couleurs fausses	Le rouge sort bleu : Swap red/blue. Le blanc sort noir : Invert colours.
Boutons toujours appuyés	« Buttons on the board » : boutons-poussoirs = « Push buttons to GND », pastilles tactiles = « TTP223 ».
Le toucher tombe au mauvais endroit	Touch calibration → Calibrate… : touchez une par une les quatre marques + de l'afficheur.
Échec du Flash / port occupé	Déconnectez, puis Flash. « Waiting for bootloader » : éteignez et rallumez la carte.
Ne se connecte pas	TX / RX inversés ? (TXD de l'adaptateur → RC7). Baud 115200 (pour un design Modbus, le baud Modbus).
Le texte affiche « ???? »	Corrigez le Language du widget. Le texte en direct dans d'autres langues nécessite un modèle avec NOR.
Pas de réponse Modbus	Même adresse, baud, parité ? Inversez A / B. Après un changement de page, timeout de l'automate à 3 s.
Une erreur dans Problems	Cliquez sur l'erreur et corrigez ce widget. Avec une erreur, pas de Flash.

PixPIO 2.8" Smart Display · Bedienungsanleitung

PixPIO Bedienungsanleitung

Bildschirme gestalten und mit einem Klick an das Display senden. Nutzbar von jedem Mikrocontroller (Arduino, PIC, STM32 …), von einer SPS über Modbus oder direkt vom PC. Es läuft auch allein, nur mit Stromversorgung.

Die roten Rahmen in den Screenshots zeigen die Einstellungen / Schaltflächen des jeweiligen Schritts.

Ein Design wie das Tutorial dieser Anleitung auf dem Display: ohne Host, nur mit Actions.

1

Was ist PixPIO

PixPIO ist eine 2.8"-Farbdisplay-Platine (320×240) mit eigenem Prozessor (PIC18F27Q84). Bildschirme, Tasten, Balken, Anzeigen und Bilder werden am PC im PixPIO Editor gestaltet, und das Display zeichnet sie selbst. Der Host (ein MCU oder eine SPS) sendet nur kurze Nachrichten wie „level = 80“.

LiteKein NOR, kein Touch. Englische Schriften.

4 / 4T4 MB NOR (alle Schriften und Sprachen). T = Touch.

8 / 8T8 MB NOR. Mehr Bilder, Animationen.

16 / 16T16 MB NOR. Große Bilder, viele Sprachen.

Die Platine hat 4 Tasten: MENU UP DOWN START (Drucktaster oder TTP223-Touchpads). Manche Modelle haben auch Helligkeitssteuerung und einen Summer.

Warum PixPIO

Live-BearbeitungUSB anstecken: jede Änderung im Editor erscheint sofort auf dem Display. Keine SD-Karte, kein langer Upload.

30 fertige WidgetsAnzeigen, Diagramme, Tastaturen, QR-Codes, Animationen: ziehen, ablegen, fertig.

Jeder HostUART, I2C oder SPI. Getestet mit PIC, Arduino, ESP32, STM32. Oder ganz ohne Host.

Ihre SpracheViele Sprachen auf dem Bildschirm, mit phonetischer Eingabe für indische Sprachen.

Kostenlose ToolsPixPIO Editor und PICPIO für VS Code sind kostenlos.

2

Installation

Visual Studio Code installieren (Windows, kostenlos).
In VS Code die Erweiterung PICPIO: Extensions → „…“ → Install from VSIX… → die mitgelieferte picpio-x.y.z.vsix.
VS Code neu starten. Im PICPIO-Menü (oder Ctrl+Shift+P → „PixPIO“) PixPIO wählen. Der Editor öffnet sich im Browser.
Das USB-Seriell-Kabel (CH340) an den PC stecken. Unter Device Manager → Ports sollte etwa USB-SERIAL CH340 (COM3) erscheinen.

Der Editor braucht kein Internet. Er spricht mit dem Display über eine „Bridge“, die VS Code ausführt. Lassen Sie VS Code also geöffnet, während Sie den Editor benutzen.

3

Der Editor

Beim ersten Öffnen zeigt der Editor ein Beispielprojekt (die Schaltfläche Example holt es jederzeit zurück; 8 Pages, fast alle Widgets).

Bereich	Wo	Aufgabe
Toolbar	Oben	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, Zoom, Grid, Snap, ☰ Widgets
Pages	Oben links	Die Bildschirme. + neue Page, ⧉ kopieren, − entfernen. „start“ = die zuerst gezeigte.
Add widget	Links	Ein Klick fügt das Widget dem Bildschirm hinzu.
Preview	Mitte	So wie das Display es zeigt. Ziehen zum Verschieben; an den blauen Quadraten ziehen zum Ändern der Größe.
Properties	Rechts	Die Einstellungen des gewählten Widgets. Ein Klick auf eine Page in der Liste zeigt die Einstellungen der Page und des ganzen Projekts. ? = Erklärung jeder Einstellung.
Problems	Unten links	Fehler und Warnungen im Design.
Device	Unten rechts	COM-Port, Connect, Mirror, Storage, Self-test, Touch, Befehle vom PC (Kapitel 6).

Tastenkürzel: ←→↑↓ 1 px (Shift 10 px), Ctrl+D kopieren, Del löschen, Ctrl+Z / Y rückgängig / wiederholen.

4

Tutorial: Water Tank (von Grund auf)

Ein Bildschirm mit 2 Pages, der den Füllstand eines Tanks zeigt. UP / DOWN ändern den Füllstand, der Balken folgt. Bei 100 erscheint „TANK FULL“, bei 0 „TANK EMPTY“. MENU öffnet eine Einstellungs-Page. Kein Host nötig. Etwa 15 Minuten.

SCHRITT 1

Ein neues Projekt

New in der Toolbar. Sie erhalten einen leeren Bildschirm (Page „main“).

Leerer Editor; New in einem roten Rahmen

SCHRITT 2

Board model

Rechts unter Screen · whole project das Board model auf das Modell vom Etikett der Platine setzen (hier PixPIO 4T).

Das stellt Display, Touch, Tasten, Helligkeit, Summer und NOR automatisch ein. Der Editor merkt es sich.

Board model PixPIO 4T in einem roten Rahmen

SCHRITT 3

Display (nur bei Bedarf)

Nur wenn das Bild gedreht ist oder die Farben falsch sind:

Display: das Modul (ILI9341-Varianten)
Buttons on the board: Drucktaster / TTP223 / keine
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation in roten Rahmen

SCHRITT 4

Page benennen

Oben rechts Name: home. Im Host-Code ist das PAGE_HOME.

SCHRITT 5

Eine zweite Page

Das + bei Pages. Die neue Page settings nennen. Dann in der Liste auf home klicken, um zurückzugehen.

Pages: home start, settings; + in einem roten Rahmen

SCHRITT 6

Die obere Leiste (Rectangle)

Rectangle in Add widget. x, y, width, height: 0, 0, 320, 30 (oder mit der Maus aufziehen). Die Farbe unter Colours.

Rectangle hinzugefügt; Schaltfläche Rectangle und x y width height in roten Rahmen

SCHRITT 7

Titel (Label)

Label: Name title, Text WATER TANK, Position 8, 7, 304, 16. Font, Size und Align stehen unter Text.

Label: Name title, Text WATER TANK in roten Rahmen

SCHRITT 8

Füllstand (Number)

Number: Name level, Position 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: bleibt bei Stromausfall erhalten

Number: Value, Unit, Min, Max, Remember value in roten Rahmen

SCHRITT 9

Mit den Tasten der Platine ändern

Keys (buttons): Key + UP, Key − DOWN, Step 5. Gedrückt halten ändert fortlaufend.

Key + UP, Key − DOWN, Step 5 in roten Rahmen

SCHRITT 10

Füllstandsbalken

Bar: Name level_bar, Position 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50 %, grüner Segmentbalken — Bis jetzt: Titel, Zahl, Balken.

SCHRITT 11

Versteckte Meldungen

Label: Name full_msg, Text TANK FULL, Position 10, 120, 300, 20, Hidden ✓.

Noch eines an derselben Stelle: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Versteckte Widgets erscheinen in der Preview gepunktet; auf dem Display sind sie anfangs nicht sichtbar.

Label: Text TANK FULL, Hidden in roten Rahmen

SCHRITT 12

Actions: 5 Aktionen an der Zahl

In der Preview auf level klicken. Actions (no code) → 5-mal + Add action:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ entfernt eine Zeile.

SCHRITT 13

Einstellungs-Taste

Button: Name btn_settings, Position 10, 200, 145, 34, Caption MENU: Settings.

SCHRITT 14

Page wechseln, wenn die Taste gedrückt wird

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: die MENU-Taste der Platine macht dasselbe.

Page home fertig — Die Page home ist fertig.

SCHRITT 15

Einstellungs-Page: Back-Taste, QR

settings in Pages. Ein Rectangle und ein Label „SETTINGS“ wie in Schritt 6 und 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = Ihre Website, Border shape = Rounded.

QR: Text / link, Border shape in roten Rahmen

Einstellungs-Page: SETTINGS, abgerundeter QR, START: Back — Die Einstellungs-Page ist fertig.

SCHRITT 16

Speichern

Save: eine .pixpio-Datei. Solange „Unsaved changes“ angezeigt wird, ist nichts gespeichert. Danach die Platine anschließen und flashen (Kapitel 5).

5

Platine anschließen, Flash

SCHRITT 1

USB-Seriell-Kabel

USB-Seriell (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Nur wenn die Platine keine eigene Versorgung hat

SCHRITT 2

Connect

In Device: COM-Port, Baud 115200, Connect. Grüner Punkt = verbunden. Kein Port in der Liste? ↻.

SCHRITT 3

⚡ Flash to display

⚡ Flash to display in der Toolbar.
Das Design wird zu Firmware und über das Kabel gesendet; ein Fenster zeigt den Fortschritt. Beim ersten Mal 1–2 Minuten.
Bei „UPLOAD SUCCESSFUL“ startet das Display mit dem neuen Bildschirm.
Bilder und andere Sprachen (Modelle mit NOR) gehen über dasselbe Kabel in den NOR.

Keine SD-Karte nötig. Für jede Änderung: im Editor ändern, Flash.

Das Tutorial-Design auf dem Display: Füllstand mit UP / DOWN ändern, auf 100 bringen für „TANK FULL“, MENU drücken für die Einstellungs-Page.

6

Das Display vom PC steuern

Nach dem Verbinden können Sie jedes Widget vom PC aus testen, ohne Host-MCU. Drei Wege:

1. Schnellbefehle (Device-Bereich)

Page + Show: öffnet diese Page auf dem Display.
Widget wählen, Value eingeben, Set value: eine Zahl, ein Balken, eine LED, ein Schalter … ändert sich.
text + Set text: ändert einen Changeable-Text.
Hide / Show: Widget aus- / einblenden.
Key + Press: als würde eine Taste der Platine (MENU, UP …) gedrückt.

Schnellbefehle im Device-Bereich in roten Rahmen

2. Commands for this widget

Bei jedem gewählten Widget steht ganz unten in den Eigenschaften Commands for this widget. Für jeden Befehl:

Send: sendet ihn sofort vom PC an das Display (muss verbunden sein).
Copy: der Code zum Einfügen ins Host-Programm (pd_set_value(&disp, W_NUMBER, 253);).
Die grünen Bytes: der Rahmen, den Sie selbst über UART / I2C / SPI senden (bei Programmierung in einer anderen Sprache).

Die Befehle passen sich an, wenn Sie Einstellungen ändern. Die Befehle jedes Widgets stehen in Kapitel 7.

Befehle des Widgets Number; Copy und Send bei jedem

3. Mirror, Touch

Mirror ✓: was auf dem Display passiert (Tastendrücke, Wertänderungen), ist live auch in der Preview zu sehen.
☝ Touch: ein Klick in die Preview wirkt wie ein Finger auf dem Display (👆-Cursor, gelber Punkt).
🔧 Self-test, ⬆ Storage: Kapitel 15, 12.

Mirror, Storage, Self-test, Touch in roten Rahmen

7

Jedes Widget

Für jedes Widget: wofür, wie man es benutzt, was sein Wert ist, Host-Code. Drei Bilder: Auf dem Display (das Widget in einem New-Projekt), Einstellungen, Commands (Send vom PC / Code Copy). Die Namen sind dieselben wie in der Liste Add widget.

Rectangle

Kopfleisten, Hintergründe, Karten. Kann hinter anderen Widgets liegen.

So wird es benutzt

Colours: Background (Füllung), Farbe Text / border.
Corner radius: runde Ecken. Border: ein Rand.
Weiter unten in der Widget-Liste = hinter anderen (Reihenfolge mit ↑ ↓ ändern).

Wert

—

Host-Code (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // rot
disp.hide(W_HEADER);

Rectangle: Auf dem Display — Auf dem Display

Rectangle: Einstellungen — Einstellungen

Rectangle: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Label

Fester Text: Titel, Beschriftungen, Einheiten.

So wird es benutzt

In Text schreiben. Font, Size, Align.
Language: andere Sprachen (Kapitel 9).
Mit Changeable ✓ kann der Host den Text ändern.
No background: Darunterliegendes scheint durch.

Wert

—

Host-Code (Arduino)

disp.setText(W_LABEL, "Motor EIN");   // braucht Changeable ✓

Label: Auf dem Display — Auf dem Display

Label: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Number

Zeigt eine Zahl: Temperatur, Drehzahl, Zähler, Sollwert.

So wird es benutzt

Value (Start), Min, Max.
Decimals 1 zeigt 253 als 25.3. Unit: °C, %, V.
Keys: mit UP / DOWN ändern, in Schritten von Step.
Remember value: bleibt bei Stromausfall erhalten.

Wert

Die Zahl (Min…Max)

Host-Code (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Auf dem Display — Auf dem Display

Number: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Bar

Füllstand, Fortschritt, Tank, Batterie.

So wird es benutzt

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Bei Touch-Modellen mit dem Finger ziehbar (Slider).
Controls brightness: dieser Balken steuert die Hintergrundbeleuchtung.

Wert

Min…Max

Host-Code (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Button

Eine Taste zum Drücken: Page wechseln, Start / Stopp.

So wird es benutzt

Caption: ihr Text. Style: normal, outline, pill, checkbox.
Mode: push (nur solange gedrückt) / toggle (ein-aus).
Key: eine Taste der Platine (MENU …) drückt sie auch.
Actions: Pressed → Go to page, Set value …

Wert

Toggle: 0 / 1

Host-Code (Arduino)

disp.onKey(myKey);             // Taste der Platine
disp.onChange(myChange);       // Toggle-Wert

Select

Eine Auswahlliste: eine von mehreren Optionen.

So wird es benutzt

Options: Niedrig|Mittel|Hoch (mit | getrennt).
Selected: die Option beim Start.
Keys: öffnen / OK, auf, ab. Touch öffnet die Liste.

Wert

0, 1, 2 … (Position der Option)

Host-Code (Arduino)

disp.setValue(W_SELECT, 2);   // Hoch

Select: Auf dem Display — Auf dem Display

Select: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Keyboard

Eine QWERTY-Bildschirmtastatur: ein Name, ein WLAN-Passwort.

So wird es benutzt

Types into: eine Input box.
Language: indische Sprachen, mit lateinischen Buchstaben getippt (Kapitel 9).
Antippen der Input box kann die Tastatur auch öffnen (Keyboard on tap).

Wert

Zeichencode (8 = Löschen, 13 = OK)

Host-Code (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Auf dem Display — Auf dem Display

Keyboard: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Input box

Das Feld, in das ein Keypad / eine Tastatur schreibt.

So wird es benutzt

Placeholder, Max length.
Kind: text, number, password (als * angezeigt), Indian language (lateinisch getippt, in indischer Schrift angezeigt; Kapitel 9).

Wert

Art Number: die Zahl, bei OK

Host-Code (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Auf dem Display — Auf dem Display

Input box: Einstellungen — Einstellungen

Input box: Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

Roller (picker)

Eine Scroll-Auswahl: Programme, Modi.

So wird es benutzt

Options: Aus|Niedrig|Mittel|Hoch. Rows shown: 3, 5, 7.
Keys weiter / zurück. Per Touch: die Zeile darüber oder darunter antippen.
Remember value.

Wert

Die gewählte Zeile (0, 1, 2 …)

Host-Code (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Auf dem Display — Auf dem Display

Roller (picker): Einstellungen — Einstellungen

Roller (picker): Commands: Send vom PC, Code Copy — Commands: Send vom PC, Code Copy

8

Actions: vollständige Liste

Was das Display selbst tut, wenn bei einem Widget etwas passiert. Kein Host nötig. Beispiele: Tutorial-Schritte 12, 14.

When (wann)	Welche Widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Dieselben Widgets

Do (was)	Ziel / Wert
Go to page	Eine Page
Set value of	Widget, Wert
Add to / Subtract from	Widget, wie viel
Copy my value to	Widget
Show / Hide / Show / hide	Widget
Beep (ms)	Modelle mit Summer
Brightness (%)	Modelle mit Helligkeitssteuerung

9

Sprachen

Ein Message auf eine Page setzen (Label, Text und Button funktionieren genauso).

Language: Français · Deutsch · Español … (ä ö ü ß é ñ), Русский, Ελληνικά oder indische Sprachen (Hindi, Tamil, Malayalam …).
Den Satz in Phrases (mehrere: mit | trennen).
Live text ✓: der Host kann jeden Satz als UTF-8 senden; das Display zeichnet Umlaute und Sonderzeichen korrekt. Beim Ankreuzen wird das Feld zu „Message“ und „Changeable“ wird angekreuzt.

Live-Text in anderen Sprachen als Englisch braucht ein Modell mit NOR (4, 8, 16). Die Schriften sind ab Werk im NOR.

Language, Message, Changeable in roten Rahmen

Indische Sprachen auf der Tastatur schreiben

Die Bildschirmtastatur kann Malayalam, Hindi, Marathi, Tamil, Gujarati, Punjabi oder Bengali schreiben: man tippt lateinische Buchstaben, das Feld zeigt sie in der Schrift der Sprache (namaste → नमस्ते), wie die phonetische Eingabe am Handy.

Ein Keyboard hinzufügen.
Language: Sprache wählen.

Schreibt die Tastatur noch in keine Input box („Types into“ = None), fügt die Wahl einer Sprache eine Input box über der Tastatur hinzu, und die Tastatur schreibt hinein.

Keyboard-Einstellungen: Language in einem roten Rahmen

Input box über der Tastatur hinzugefügt — Nach der Sprachwahl: eine Input box über der Tastatur, „Types into“ = diese Box.

Die Sprache ist eine Einstellung dieser Input box; man kann sie auch durch Auswahl der Box ändern:

Kind: Indian language (typed in English).
Language: die Sprache.
Letter size: 16, 20, 24 px.
Darunter stehen die Eingaberegeln der Sprache.

Max length höchstens 24 Buchstaben. „Show typed text“ ist nur nötig, wenn die Tastatur die Box verdeckt (Pop-up-Tastatur). Ist die Box über der Tastatur sichtbar, das Häkchen entfernen, sonst erscheint derselbe Text in zwei Boxen.

Input-box-Einstellungen: Kind, Language, Letter size in roten Rahmen

In sieben Sprachen getippte Boxen — Auf dem Display: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Braucht ein Modell mit NOR (4T, 8T, 16T …). Liest der Host die Box (readText), erhält er die getippten lateinischen Buchstaben.

10

Von einem Host-MCU (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: ein Name für jedes Widget und jede Page (W_LEVEL, PAGE_SETTINGS …). Ins Host-Programm einbinden.
Write to project folder…: Firmware und Host-Header zusammen.
NOR data file: nur für ein Chip-Programmiergerät.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Wird aufgerufen, wenn der Bediener den Füllstand mit UP / DOWN ändert
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // Host-TX → Platine RC7, Host-RX ← Platine RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // bis das Display bereit ist (max. 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // Sensorwert anzeigen
  disp.loop();                           // Nachrichten vom Display
  delay(200);
}

Funktion	Aufgabe
setValue(id, v)	Wert einer Zahl, eines Balkens, einer LED, eines Schalters …
setText(id, "…")	Changeable-Text (UTF-8 bei Live text)
page(PAGE_…)	Page wechseln
show(id) / hide(id)	Widget ein- / ausblenden
setColor(id, c) / setBackground(id, c)	Farbe (RGB565)
getValue(id) / readText(id, buf, n)	Wert / Text vom Display lesen
brightness(%) / beep(ms)	Hintergrundbeleuchtung, Summer
onChange / onKey / onPage / onReboot	Wert geändert, Taste der Platine, Page gewechselt, Display neu gestartet
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino-Beispiele: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (mit einer SPS)

In der Pages-Liste eine Page anklicken, dann Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: in der SPS gleich einstellen.
📋 Register table (CSV): Liste aller Register; in Excel öffnen für den SPS-Programmierer.
Baud im Device-Bereich auf die Modbus-Baudrate setzen und flashen.

Bei gewähltem Widget stehen seine Register unter dem Namen: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table in roten Rahmen

Register	Adresse	Bedeutung
Holding (4x)	0 … N-1	Widget-Wert (Platz in der Widget-Liste). Schreiben zeigt ihn auf dem Display.
Holding	1000	Page; eine Page-ID schreiben öffnet sie
Holding	1001 / 1002	Helligkeit 0–100 % / Piepton (ms)
Coil (0x)	0 … N-1	Einblenden (1) / ausblenden (0)
Discrete input (1x)	0 … N-1	Taste gedrückt (wird beim Lesen gelöscht)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: gedrückt / gehalten
Input (3x)	0 … N-1, 1000–1002	Werte (nur lesen), Page, Anzahl Widgets, Version

Funktionen 01, 02, 03, 04, 05, 06, 08, 15, 16. Werte 16 Bit mit Vorzeichen. Hinzufügen oder Entfernen von Widgets ändert die Adressen; der SPS die neue CSV geben.

RS-485-Verdrahtung

MAX485-Modul	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B der SPS (oder des USB-RS485)

Zum Flashen braucht man das USB-Seriell-Kabel (TTL). USB-Seriell-TXD und MAX485-RO nicht direkt gemeinsam an RC7 anschließen: einen Jumper verwenden, oder 1 kΩ in TXD und 10 kΩ Pull-up an RB4.

Testen vom PC ohne SPS

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in unter Storage · whole project:

MCU flash: englische Schriften, kleine Bilder. Das Modell Lite.
SPI NOR flash: große Bilder, Animationen, andere Sprachen. Die Modelle 4 / 8 / 16 (wird mit dem Board model automatisch gesetzt).

Die Schriftbibliothek ist ab Werk im NOR. Beim Flashen werden nur die Bilder des Designs gesendet.

13

Widget list, Problems

Dialog Widgets on this page — **☰ Widgets**: alle Widgets dieser Page. Klick auf einen Namen wählt es aus. Um eines darunter zu wählen, beim oberen das Häkchen entfernen.

14

Platine, Pins

Teil	PIC-Pin	Hinweis
Host UART TX / RX	RC6 / RC7	115200 8N1 (bei Modbus: die Baudrate aus dem Editor)
Host I2C SCL / SDA	RC3 / RC4	Adresse 0x3C, 4.7-kΩ-Pull-ups
BUSY	RB4	HIGH = zeichnet. Bei Modbus: DE/RE des RS-485.
INT	RC0	LOW = Nachricht für den Host (I2C / SPI)
Tasten MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Drucktaster (nach GND) oder TTP223
Touchpanel CS	RA0	T-Modelle (XPT2046)
NOR-Flash CS	RA5	Modelle 4 / 8 / 16
Hintergrundbeleuchtung PWM, Summer	RA6, RA7	Bei Modellen, die sie haben
Status-LED	RB5	Blinkt im Betrieb alle 0.5 s

Display-Einstellungen: Tutorial-Schritt 3. Nach jeder Änderung flashen.

15

Self-test

Nach dem Verbinden 🔧 Self-test im Device-Bereich. Funktioniert mit jedem geflashten Design.

Farben: rote, grüne, blaue, weiße, schwarze und graue Streifen, mit einem gelben Quadrat oben links. Liegt das Quadrat in einer anderen Ecke, Orientation / Mirror korrigieren. START oder Antippen: weiter.
Tasten, Touch: alle vier Tasten drücken; jedes Feld wird grün. Mit Touch ein Punkt. Funktioniert eine Taste nicht, START zweimal.
Bauteile: NOR, Schriftbibliothek, EEPROM: PASS / FAIL. Test von Summer und Hintergrundbeleuchtung. START: zurück zum normalen Bildschirm.

16

Fehlersuche

Problem	Was tun
Display ganz weiß	DC-, CS-, RST-Leitungen des Displays und die 3.3-V-Versorgung prüfen.
Gespiegelt / kopfüber	Display, Mirror, Orientation (Tutorial-Schritt 3). Das gelbe Quadrat im Self-test muss oben links sein.
Falsche Farben	Rot erscheint blau: Swap red/blue. Weiß erscheint schwarz: Invert colours.
Tasten immer gedrückt	„Buttons on the board“: Drucktaster = „Push buttons to GND“, Touchpads = „TTP223“.
Touch an der falschen Stelle	Touch calibration → Calibrate…: die vier +-Zeichen auf dem Display nacheinander antippen.
Flash schlägt fehl / Port belegt	Trennen, dann flashen. „Waiting for bootloader“: Platine aus- und einschalten.
Keine Verbindung	TX / RX vertauscht? (Adapter-TXD → RC7). Baud 115200 (bei einem Modbus-Design die Modbus-Baudrate).
Text zeigt „????“	Language des Widgets korrigieren. Live-Text in anderen Sprachen braucht ein Modell mit NOR.
Keine Modbus-Antwort	Gleiche Adresse, Baud, Parität? A / B tauschen. Nach Page-Wechsel SPS-Timeout 3 s.
Ein Fehler in Problems	Auf den Fehler klicken und das Widget korrigieren. Mit Fehler wird nicht geflasht.

PixPIO 2.8" smart display · Manuale d'uso

Manuale d'uso PixPIO

Progetta le schermate e inviale al display con un clic. Si usa da qualsiasi microcontrollore (Arduino, PIC, STM32…), da un PLC via Modbus o direttamente dal PC. Funziona anche da solo, con la sola alimentazione.

I riquadri rossi nelle schermate sono le impostazioni / i pulsanti usati in quel passo.

Un progetto come il tutorial di questo manuale sul display: niente host, solo Actions.

1

Cos'è PixPIO

PixPIO è una scheda display a colori da 2.8" (320×240) con un proprio processore (PIC18F27Q84). Schermate, pulsanti, barre, indicatori e immagini si progettano sul PC con il PixPIO Editor, e il display li disegna da solo. L'host (un MCU o un PLC) invia solo brevi messaggi come "level = 80".

LiteSenza NOR, senza touch. Font inglesi.

4 / 4T4 MB di NOR (tutti i font e le lingue). T = touch.

8 / 8T8 MB di NOR. Più immagini, animazioni.

16 / 16T16 MB di NOR. Immagini grandi, molte lingue.

La scheda ha 4 pulsanti: MENU UP DOWN START (pulsanti o pad touch TTP223). Alcuni modelli hanno anche regolazione della luminosità e cicalino.

Perché PixPIO

Modifica dal vivoCollega l’USB: ogni modifica nell’Editor appare subito sul display. Niente scheda SD, niente lunghi caricamenti.

30 widget prontiIndicatori, grafici, tastiere, QR code, animazioni: trascina e fatto.

Qualsiasi hostUART, I2C o SPI. Provato con PIC, Arduino, ESP32, STM32. O senza host.

La tua linguaMolte lingue sullo schermo, con digitazione fonetica per le lingue indiane.

Strumenti gratuitiPixPIO Editor e PICPIO per VS Code sono gratuiti.

2

Installazione

Installa Visual Studio Code (Windows, gratuito).
In VS Code, l'estensione PICPIO: Extensions → "…" → Install from VSIX… → il file picpio-x.y.z.vsix fornito con la scheda.
Riavvia VS Code. Nel menu PICPIO (o Ctrl+Shift+P → "PixPIO") scegli PixPIO. L'Editor si apre nel browser.
Collega il cavo USB-seriale (CH340) al PC. In Device Manager → Ports deve comparire qualcosa come USB-SERIAL CH340 (COM3).

L'Editor non ha bisogno di internet. Comunica con il display tramite un "bridge" avviato da VS Code, quindi tieni VS Code aperto mentre usi l'Editor.

3

L'Editor

Alla prima apertura l'Editor mostra un progetto di esempio (il pulsante Example della barra lo riporta sempre; 8 page, quasi tutti i widget).

Parte	Dove	Funzione
Toolbar	In alto	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	In alto a sinistra	Le schermate. + nuova page, ⧉ copia, − elimina. "start" = quella mostrata per prima.
Add widget	Sinistra	Un clic aggiunge il widget alla schermata.
Preview	Centro	Come lo mostrerà il display. Trascina per spostare; tira i quadratini blu per ridimensionare.
Properties	Destra	Le impostazioni del widget selezionato. Clic su una page nell'elenco per le impostazioni della page e di tutto il progetto. ? = spiegazione di ogni impostazione.
Problems	In basso a sinistra	Errori e avvisi del progetto.
Device	In basso a destra	Porta COM, Connect, Mirror, Storage, Self-test, Touch, comandi dal PC (capitolo 6).

Scorciatoie: ←→↑↓ 1 px (Shift 10 px), Ctrl+D copia, Del elimina, Ctrl+Z / Y annulla / ripeti.

4

Tutorial: Water Tank (da zero)

Una schermata di 2 page che mostra il livello di un serbatoio. UP / DOWN cambiano il livello e la barra lo segue. A 100 mostra "TANK FULL", a 0 "TANK EMPTY". MENU apre una page di impostazioni. Nessun host necessario. Circa 15 minuti.

PASSO 1

Un nuovo progetto

New nella barra. Ottieni una schermata vuota (page "main").

PASSO 2

Board model

A destra, in Screen · whole project, imposta Board model sul modello indicato sull'etichetta della scheda (qui PixPIO 4T).

Questo imposta da solo display, touch, pulsanti, luminosità, cicalino e NOR. L'Editor lo ricorda.

Board model PixPIO 4T in un riquadro rosso

PASSO 3

Display (solo se serve)

Solo se l'immagine è ruotata o i colori sono sbagliati:

Display: il modulo (varianti ILI9341)
Buttons on the board: pulsanti / TTP223 / nessuno
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation in riquadri rossi

PASSO 4

Nome della page

In alto a destra, Name: home. Nel codice dell'host è PAGE_HOME.

PASSO 5

Una seconda page

Il + di Pages. Chiama la nuova page settings. Poi clicca home nell'elenco per tornare.

Pages: home start, settings; + in un riquadro rosso

PASSO 6

La barra in alto (Rectangle)

Rectangle in Add widget. x, y, width, height: 0, 0, 320, 30 (o trascina col mouse). Il colore in Colours.

Rectangle aggiunto; pulsante Rectangle e x y width height in riquadri rossi

PASSO 7

Titolo (Label)

Label: Name title, Text WATER TANK, posizione 8, 7, 304, 16. Font, Size e Align sono in Text.

Label: Name title, Text WATER TANK in riquadri rossi

PASSO 8

Livello (Number)

Number: Name level, posizione 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: resta anche dopo un'interruzione di corrente

Number: Value, Unit, Min, Max, Remember value in riquadri rossi

PASSO 9

Cambiarlo con i pulsanti della scheda

Keys (buttons): Key + UP, Key − DOWN, Step 5. Tenendo premuto continua a cambiare.

Key + UP, Key − DOWN, Step 5 in riquadri rossi

PASSO 10

Barra di livello

Bar: Name level_bar, posizione 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, barra verde a segmenti — Finora: titolo, numero, barra.

PASSO 11

Messaggi nascosti

Label: Name full_msg, Text TANK FULL, posizione 10, 120, 300, 20, Hidden ✓.

Un altro nello stesso punto: Name empty_msg, Text TANK EMPTY, Hidden ✓.

I widget nascosti appaiono tratteggiati nella preview; sul display all'inizio non si vedono.

Label: Text TANK FULL, Hidden in riquadri rossi

PASSO 12

Actions: 5 azioni sul numero

Clicca level nella preview. Actions (no code) → + Add action 5 volte:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ elimina una riga.

PASSO 13

Pulsante impostazioni

Button: Name btn_settings, posizione 10, 200, 145, 34, Caption MENU: Settings.

PASSO 14

Cambiare page alla pressione del pulsante

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: il MENU della scheda fa lo stesso.

Page home completata — La page home è pronta.

PASSO 15

Page impostazioni: pulsante Back, QR

settings in Pages. Un Rectangle e un Label "SETTINGS" come nei passi 6 e 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = il tuo sito web, Border shape = Rounded.

QR: Text / link, Border shape in riquadri rossi

Page impostazioni: SETTINGS, QR arrotondato, START: Back — La page impostazioni è pronta.

PASSO 16

Salvare

Save: un file .pixpio. Finché compare "Unsaved changes", non è salvato. Poi collega la scheda e fai il Flash (capitolo 5).

5

Collegare la scheda, Flash

PASSO 1

Cavo USB-seriale

USB-seriale (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Solo se la scheda non ha alimentazione propria

PASSO 2

Connect

In Device: la porta COM, baud 115200, Connect. Punto verde = collegato. La porta non compare? ↻.

PASSO 3

⚡ Flash to display

⚡ Flash to display nella barra.
Il progetto diventa firmware e viene inviato via cavo; una finestra mostra l'avanzamento. La prima volta servono 1–2 minuti.
Quando compare "UPLOAD SUCCESSFUL", il display parte con la nuova schermata.
Immagini e altre lingue (modelli con NOR) vanno nella NOR con lo stesso cavo.

Nessuna scheda SD necessaria. Per ogni modifica: modifica nell'Editor, poi Flash.

Il progetto del tutorial sul display: cambia il livello con UP / DOWN, portalo a 100 per vedere "TANK FULL", premi MENU per la page impostazioni.

6

Controllare il display dal PC

Una volta collegato, puoi provare ogni widget dal PC, senza MCU host. Tre modi:

1. Comandi rapidi (pannello Device)

Page + Show: apre quella page sul display.
Scegli un Widget, scrivi un Value, Set value: cambia un numero, una barra, un LED, un interruttore…
text + Set text: cambia un testo Changeable.
Hide / Show: nascondi / mostra il widget.
Key + Press: come se fosse premuto un pulsante della scheda (MENU, UP…).

2. Commands for this widget

Per qualsiasi widget selezionato, in fondo alle proprietà c'è Commands for this widget. Per ogni comando:

Send: lo invia subito dal PC al display (deve essere collegato).
Copy: il codice da incollare nel programma dell'host (pd_set_value(&disp, W_NUMBER, 253);).
I byte verdi: il frame da inviare tu stesso via UART / I2C / SPI (se programmi in un altro linguaggio).

I comandi seguono le impostazioni quando le cambi. I comandi di ogni widget sono nel capitolo 7.

Comandi del widget Number; Copy e Send per ognuno

3. Mirror, Touch

Mirror ✓: ciò che succede sul display (pressioni, cambi di valore) si vede anche nella preview in tempo reale.
☝ Touch: un clic nella preview equivale a un dito sul display (cursore 👆, punto giallo).
🔧 Self-test, ⬆ Storage: capitoli 15, 12.

Mirror, Storage, Self-test, Touch in riquadri rossi

7

Ogni widget

Per ogni widget: a cosa serve, come si usa, qual è il suo valore, codice dell'host. Tre immagini: Sul display (il widget in un progetto New), Impostazioni, Commands (Send dal PC / Copy del codice). I nomi sono quelli dell'elenco Add widget.

Rectangle

Barre di intestazione, sfondi, schede. Può stare dietro ad altri widget.

Come si usa

Colours: Background (riempimento), colore Text / border.
Corner radius: angoli arrotondati. Border: un bordo.
Più in basso nell'elenco dei widget = dietro agli altri (cambia l'ordine con ↑ ↓).

Valore

—

Codice host (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // rosso
disp.hide(W_HEADER);

Rectangle: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

Label

Testo fisso: titoli, didascalie, unità.

Come si usa

Scrivi in Text. Font, Size, Align.
Language: altre lingue (capitolo 9).
Con Changeable ✓ l'host può cambiare il testo.
No background: si vede ciò che sta sotto.

Valore

—

Codice host (Arduino)

disp.setText(W_LABEL, "Motore ON");   // serve Changeable ✓

Label: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

Number

Mostra un numero: temperatura, velocità, contatore, setpoint.

Come si usa

Value (iniziale), Min, Max.
Decimals 1 mostra 253 come 25.3. Unit: °C, %, V.
Keys: si cambia con UP / DOWN, a passi di Step.
Remember value: resta dopo un'interruzione di corrente.

Valore

Il numero (Min…Max)

Codice host (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

Bar

Livello, avanzamento, serbatoio, batteria.

Come si usa

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Sui modelli touch si trascina col dito (slider).
Controls brightness: questa barra regola la retroilluminazione.

Valore

Min…Max

Codice host (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

Button

Un pulsante da premere: cambiare page, avvio / arresto.

Come si usa

Caption: il suo testo. Style: normal, outline, pill, checkbox.
Mode: push (solo mentre premuto) / toggle (acceso-spento).
Key: anche un pulsante della scheda (MENU…) lo preme.
Actions: Pressed → Go to page, Set value…

Valore

Toggle: 0 / 1

Codice host (Arduino)

disp.onKey(myKey);             // pulsante della scheda
disp.onChange(myChange);       // valore del toggle

Switch

Un interruttore ON / OFF: ventola, luce, modalità.

Come si usa

Switched on: lo stato iniziale.
Key: un pulsante della scheda lo commuta. Anche il tocco.
Remember value.

Valore

0 / 1

Codice host (Arduino)

disp.setValue(W_SWITCH, 1);
// quando l'operatore lo commuta: onChange(W_SWITCH, 0/1)

Switch: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

Keyboard

Una tastiera QWERTY a schermo: un nome, una password Wi-Fi.

Come si usa

Types into: un Input box.
Language: lingue dell'India digitate con lettere latine (capitolo 9).
Toccare l'Input box può aprire anche la tastiera (Keyboard on tap).

Valore

Codice del carattere (8 = cancella, 13 = OK)

Codice host (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

Input box

La casella in cui scrive un keypad / una tastiera.

Come si usa

Placeholder, Max length.
Kind: text, number, password (mostra *), Indian language (digitato in lettere latine, mostrato in una scrittura indiana; capitolo 9).

Valore

Tipo Number: il numero, alla pressione di OK

Codice host (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: Send dal PC, Copy del codice — Commands: Send dal PC, Copy del codice

8

Actions: elenco completo

Ciò che il display fa da solo quando succede qualcosa a un widget. Nessun host necessario. Esempi: passi 12 e 14 del tutorial.

When (quando)	Quali widget
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Gli stessi widget

Do (cosa)	Destinazione / valore
Go to page	Una page
Set value of	widget, valore
Add to / Subtract from	widget, quanto
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Modelli con cicalino
Brightness (%)	Modelli con regolazione della luminosità

9

Lingue

Metti un Message su una page (Label, Text e Button funzionano allo stesso modo).

Language: Français · Deutsch · Español … (à è é ì ò ù), Русский, Ελληνικά, o lingue dell'India.
La frase in Phrases (più frasi: separale con |).
Live text ✓: l'host può inviare qualsiasi frase in UTF-8; il display disegna correttamente le lettere accentate. Spuntandolo, il campo diventa "Message" e si spunta "Changeable".

Il testo dal vivo in lingue diverse dall'inglese richiede un modello con NOR (4, 8, 16). I font sono già nella NOR di fabbrica.

Language, Message, Changeable in riquadri rossi

Scrivere lingue dell'India con la tastiera

La tastiera a schermo può scrivere in malayalam, hindi, marathi, tamil, gujarati, punjabi e bengalese: premi lettere latine e la casella le mostra nella scrittura della lingua (namaste → नमस्ते), come la digitazione fonetica del telefono.

Aggiungi un Keyboard.
Language: scegli la lingua.

Se la tastiera non scrive ancora in nessun Input box ("Types into" = None), scegliere una lingua aggiunge un Input box sopra la tastiera e la tastiera scrive lì.

Impostazioni Keyboard: Language in un riquadro rosso

Input box aggiunto sopra la tastiera — Dopo aver scelto la lingua: un Input box sopra la tastiera, "Types into" = quella casella.

La lingua è un'impostazione di quell'Input box; si può cambiare anche selezionando la casella:

Kind: Indian language (typed in English).
Language: la lingua.
Letter size: 16, 20, 24 px.
Sotto compaiono le regole di digitazione della lingua.

Max length al massimo 24 lettere. "Show typed text" serve solo quando la tastiera copre la casella (tastiera pop-up). Se la casella è visibile sopra la tastiera, togli la spunta, altrimenti lo stesso testo compare in due caselle.

Impostazioni Input box: Kind, Language, Letter size in riquadri rossi

Caselle scritte in sette lingue — Sul display: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Serve un modello con NOR (4T, 8T, 16T…). Quando l'host legge la casella (readText) riceve le lettere latine digitate.

10

Da un MCU host (Arduino / C)

Barra Export ▾:

Download pixpio_ui.h: un nome per ogni widget e page (W_LEVEL, PAGE_SETTINGS…). Aggiungilo al programma dell'host.
Write to project folder…: firmware e header dell'host insieme.
NOR data file: solo per un programmatore di chip.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Chiamata quando l'operatore cambia il livello con UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // TX host → RC7 scheda, RX host ← RC6 scheda
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // finché il display è pronto (max 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // mostra il valore del sensore
  disp.loop();                           // messaggi dal display
  delay(200);
}

Funzione	Cosa fa
setValue(id, v)	Valore di numero, barra, LED, interruttore…
setText(id, "…")	Testo Changeable (UTF-8 per Live text)
page(PAGE_…)	Cambiare page
show(id) / hide(id)	Mostrare / nascondere un widget
setColor(id, c) / setBackground(id, c)	Colore (RGB565)
getValue(id) / readText(id, buf, n)	Leggere un valore / testo dal display
brightness(%) / beep(ms)	Retroilluminazione, cicalino
onChange / onKey / onPage / onReboot	Un valore è cambiato, un pulsante della scheda, la page è cambiata, il display si è riavviato
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Esempi Arduino: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (con un PLC)

Clicca una page nell'elenco Pages, poi Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: gli stessi nel PLC.
📋 Register table (CSV): l'elenco di tutti i registri; aprilo in Excel per il programmatore del PLC.
Imposta il baud del pannello Device uguale a quello Modbus e fai il Flash.

Selezionando un widget, i suoi registri compaiono sotto il Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table in riquadri rossi

Registro	Indirizzo	Significato
Holding (4x)	0 … N-1	Valore del widget (posizione nell'elenco). Scriverlo lo mostra sul display.
Holding	1000	Page; scrivi un ID di page per aprirla
Holding	1001 / 1002	Luminosità 0–100 % / bip (ms)
Coil (0x)	0 … N-1	Mostra (1) / nascondi (0)
Discrete input (1x)	0 … N-1	Pulsante premuto (azzerato alla lettura)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: premuto / tenuto premuto
Input (3x)	0 … N-1, 1000–1002	Valori (sola lettura), page, numero di widget, versione

Funzioni 01, 02, 03, 04, 05, 06, 08, 15, 16. Valori a 16 bit con segno. Aggiungere o togliere widget cambia gli indirizzi; dai al PLC il nuovo CSV.

Cablaggio RS-485

Modulo MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B del PLC (o dell'USB-RS485)

Per il Flash serve il cavo USB-seriale (TTL). Non collegare direttamente insieme a RC7 il TXD dell'USB-seriale e l'RO del MAX485: usa un ponticello, oppure una resistenza da 1 kΩ sul TXD e un pull-up da 10 kΩ su RB4.

Prova dal PC senza PLC

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in, in Storage · whole project:

MCU flash: font inglesi, immagini piccole. Il modello Lite.
SPI NOR flash: immagini grandi, animazioni, altre lingue. I modelli 4 / 8 / 16 (impostato da solo scegliendo il Board model).

La libreria dei font è già nella NOR di fabbrica. Al Flash si inviano solo le immagini del progetto.

13

Widget list, Problems

Finestra Widgets on this page — **☰ Widgets**: tutti i widget di questa page. Clicca un nome per selezionarlo. Per selezionarne uno sotto, togli la spunta a quello sopra.

14

Scheda, pin

Parte	Pin del PIC	Nota
Host UART TX / RX	RC6 / RC7	115200 8N1 (in Modbus: il baud impostato nell'Editor)
Host I2C SCL / SDA	RC3 / RC4	Indirizzo 0x3C, pull-up da 4.7 kΩ
BUSY	RB4	HIGH = sta disegnando. In Modbus: DE/RE dell'RS-485.
INT	RC0	LOW = c'è un messaggio per l'host (I2C / SPI)
Pulsanti MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Pulsante (verso GND) o TTP223
CS del pannello touch	RA0	Modelli T (XPT2046)
CS della NOR flash	RA5	Modelli 4 / 8 / 16
PWM retroilluminazione, cicalino	RA6, RA7	Nei modelli che li hanno
LED di stato	RB5	Lampeggia ogni 0.5 s durante il funzionamento

Impostazioni del display: passo 3 del tutorial. Fai il Flash dopo ogni modifica.

15

Self-test

Dopo il collegamento, 🔧 Self-test nel pannello Device. Funziona con qualsiasi progetto caricato.

Colori: strisce rossa, verde, blu, bianca, nera e grigia, con un quadrato giallo in alto a sinistra. Se il quadrato è in un altro angolo, correggi Orientation / Mirror. START o un tocco: avanti.
Pulsanti, touch: premi i quattro pulsanti; ogni casella diventa verde. Con il touch, un punto. Se un pulsante non funziona, START due volte.
Componenti: NOR, libreria font, EEPROM: PASS / FAIL. Prova di cicalino e retroilluminazione. START: torna alla schermata normale.

16

Risoluzione dei problemi

Problema	Cosa fare
Display tutto bianco	Controlla i fili DC, CS, RST del display e l'alimentazione a 3.3 V.
Specchiato / capovolto	Display, Mirror, Orientation (passo 3 del tutorial). Il quadrato giallo del self-test deve stare in alto a sinistra.
Colori sbagliati	Il rosso appare blu: Swap red/blue. Il bianco appare nero: Invert colours.
Pulsanti sempre premuti	"Buttons on the board": pulsanti = "Push buttons to GND", pad touch = "TTP223".
Il tocco finisce nel punto sbagliato	Touch calibration → Calibrate…: tocca uno alla volta i quattro segni + del display.
Flash fallito / porta occupata	Scollega, poi Flash. "Waiting for bootloader": spegni e riaccendi la scheda.
Non si collega	TX / RX invertiti? (TXD dell'adattatore → RC7). Baud 115200 (in un progetto Modbus, il baud Modbus).
Il testo appare "????"	Correggi il Language del widget. Il testo dal vivo in altre lingue richiede un modello con NOR.
Modbus non risponde	Stesso indirizzo, baud, parità? Inverti A / B. Dopo un cambio di page, timeout del PLC a 3 s.
Un errore in Problems	Clicca l'errore e correggi quel widget. Con un errore il Flash non parte.

PixPIO 2.8" smart display · Руководство пользователя

Руководство пользователя PixPIO

Нарисуйте экраны и отправьте их на дисплей одним щелчком. Работает с любым микроконтроллером (Arduino, PIC, STM32…), с ПЛК по Modbus или прямо с ПК. Может работать и самостоятельно, только от питания.

Красные рамки на снимках показывают настройки / кнопки, используемые на этом шаге.

Проект, как в уроке этого руководства, на дисплее: без хоста, только Actions.

1

Что такое PixPIO

PixPIO — это плата цветного дисплея 2.8" (320×240) с собственным процессором (PIC18F27Q84). Экраны, кнопки, полосы, шкалы и изображения рисуются на ПК в PixPIO Editor, а дисплей отрисовывает их сам. Хост (MCU или ПЛК) отправляет только короткие сообщения вроде «level = 80».

LiteБез NOR, без сенсора. Английские шрифты.

4 / 4T4 МБ NOR (все шрифты и языки). T = сенсор.

8 / 8T8 МБ NOR. Больше изображений, анимация.

16 / 16T16 МБ NOR. Большие изображения, много языков.

На плате 4 кнопки: MENU UP DOWN START (кнопки или сенсорные площадки TTP223). В некоторых моделях есть регулировка яркости и зуммер.

Почему PixPIO

Правка вживуюПодключите USB: каждое изменение в Editor сразу видно на дисплее. Без SD-карты и долгой загрузки.

30 готовых виджетовШкалы, графики, клавиатуры, QR-коды, анимации: перетащил, и готово.

Любой хостUART, I2C или SPI. Проверено с PIC, Arduino, ESP32, STM32. Или вообще без хоста.

Ваш языкМного языков на экране, фонетический ввод для языков Индии.

Бесплатные инструментыPixPIO Editor и PICPIO для VS Code бесплатны.

2

Установка

Установите Visual Studio Code (Windows, бесплатно).
В VS Code — расширение PICPIO: Extensions → «…» → Install from VSIX… → файл picpio-x.y.z.vsix из комплекта.
Перезапустите VS Code. В меню PICPIO (или Ctrl+Shift+P → «PixPIO») выберите PixPIO. Editor откроется в браузере.
Подключите USB-UART кабель (CH340) к ПК. В Device Manager → Ports должно появиться, например, USB-SERIAL CH340 (COM3).

Editor не нужен интернет. Он связывается с дисплеем через «bridge», который запускает VS Code, поэтому держите VS Code открытым, пока работаете в Editor.

3

Editor

При первом запуске Editor показывает пример проекта (кнопка Example на панели всегда возвращает его; 8 pages, почти все widgets).

Часть	Где	Назначение
Toolbar	Сверху	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, масштаб, Grid, Snap, ☰ Widgets
Pages	Слева сверху	Экраны. + новая page, ⧉ копия, − удалить. «start» — показывается первой.
Add widget	Слева	Щелчок добавляет widget на экран.
Preview	В центре	Так, как покажет дисплей. Перетаскивайте для перемещения; тяните синие квадраты для изменения размера.
Properties	Справа	Настройки выбранного widget. Щелчок по page в списке показывает настройки page и всего проекта. ? — пояснение к каждой настройке.
Problems	Слева снизу	Ошибки и предупреждения проекта.
Device	Справа снизу	COM-порт, Connect, Mirror, Storage, Self-test, Touch, команды с ПК (глава 6).

Горячие клавиши: ←→↑↓ 1 px (Shift 10 px), Ctrl+D копия, Del удалить, Ctrl+Z / Y отмена / повтор.

4

Урок: Water Tank (с нуля)

Экран из 2 pages, показывающий уровень в баке. UP / DOWN меняют уровень, полоса следует за ним. При 100 появляется «TANK FULL», при 0 — «TANK EMPTY». MENU открывает page настроек. Хост не нужен. Около 15 минут.

ШАГ 1

Новый проект

New на панели. Появится пустой экран (page «main»).

ШАГ 2

Board model

Справа в Screen · whole project выберите в Board model модель с наклейки платы (здесь PixPIO 4T).

Это само настроит дисплей, сенсор, кнопки, яркость, зуммер и NOR. Editor это запомнит.

ШАГ 3

Display (только при необходимости)

Только если изображение повёрнуто или цвета неверны:

Display: модуль (варианты ILI9341)
Buttons on the board: кнопки / TTP223 / нет
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation в красных рамках

ШАГ 4

Имя page

Справа сверху Name: home. В коде хоста это PAGE_HOME.

ШАГ 5

Вторая page

+ у Pages. Назовите новую page settings. Затем щёлкните home в списке, чтобы вернуться.

Pages: home start, settings; + в красной рамке

ШАГ 6

Верхняя полоса (Rectangle)

Rectangle в Add widget. x, y, width, height: 0, 0, 320, 30 (или растяните мышью). Цвет — в Colours.

Rectangle добавлен; кнопка Rectangle и x y width height в красных рамках

ШАГ 7

Заголовок (Label)

Label: Name title, Text WATER TANK, положение 8, 7, 304, 16. Font, Size, Align — в разделе Text.

Label: Name title, Text WATER TANK в красных рамках

ШАГ 8

Уровень (Number)

Number: Name level, положение 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: сохраняется при отключении питания

Number: Value, Unit, Min, Max, Remember value в красных рамках

ШАГ 9

Изменение кнопками платы

Keys (buttons): Key + UP, Key − DOWN, Step 5. При удержании значение продолжает меняться.

Key + UP, Key − DOWN, Step 5 в красных рамках

ШАГ 10

Полоса уровня

Bar: Name level_bar, положение 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50 %, зелёная сегментная полоса — Пока что: заголовок, число, полоса.

ШАГ 11

Скрытые сообщения

Label: Name full_msg, Text TANK FULL, положение 10, 120, 300, 20, Hidden ✓.

Ещё один на том же месте: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Скрытые widgets в preview показаны пунктиром; на дисплее в начале их не видно.

Label: Text TANK FULL, Hidden в красных рамках

ШАГ 12

Actions: 5 действий для числа

Щёлкните level в preview. Actions (no code) → 5 раз + Add action:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ удаляет строку.

ШАГ 13

Кнопка настроек

Button: Name btn_settings, положение 10, 200, 145, 34, Caption MENU: Settings.

ШАГ 14

Смена page по нажатию кнопки

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU — кнопка MENU на плате делает то же самое.

ШАГ 15

Page настроек: кнопка Back, QR

settings в Pages. Rectangle и Label «SETTINGS», как в шагах 6 и 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = ваш сайт, Border shape = Rounded.

QR: Text / link, Border shape в красных рамках

Page настроек: SETTINGS, скруглённый QR, START: Back — Page настроек готова.

ШАГ 16

Сохранение

Save: файл .pixpio. Пока видно «Unsaved changes», проект не сохранён. Далее подключите плату и выполните Flash (глава 5).

5

Подключение платы, Flash

ШАГ 1

Кабель USB-UART

USB-UART (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Только если у платы нет своего питания

ШАГ 2

Connect

В Device: COM-порт, скорость 115200, Connect. Зелёная точка — подключено. Порта нет в списке? ↻.

ШАГ 3

⚡ Flash to display

⚡ Flash to display на панели.
Проект превращается в прошивку и отправляется по кабелю; окно показывает ход работы. Первый раз — 1–2 минуты.
Когда появится «UPLOAD SUCCESSFUL», дисплей запустится с новым экраном.
Изображения и другие языки (модели с NOR) уходят в NOR по тому же кабелю.

SD-карта не нужна. Для каждого изменения: измените в Editor и выполните Flash.

Проект урока на дисплее: меняйте уровень кнопками UP / DOWN, доведите до 100 — появится «TANK FULL», нажмите MENU — откроется page настроек.

6

Управление дисплеем с ПК

После подключения каждый widget можно проверить с ПК, без хост-MCU. Три способа:

1. Быстрые команды (панель Device)

Page + Show: открывает эту page на дисплее.
Выберите Widget, введите Value, Set value: меняется число, полоса, LED, переключатель…
text + Set text: меняет текст с Changeable.
Hide / Show: скрыть / показать widget.
Key + Press: как нажатие кнопки платы (MENU, UP…).

2. Commands for this widget

У любого выбранного widget внизу свойств есть Commands for this widget. Для каждой команды:

Send: сразу отправляет с ПК на дисплей (нужно подключение).
Copy: код для вставки в программу хоста (pd_set_value(&disp, W_NUMBER, 253);).
Зелёные байты: кадр, который можно отправить самому по UART / I2C / SPI (если программа на другом языке).

Команды меняются вместе с настройками. Команды каждого widget — в главе 7.

Команды widget Number; у каждой Copy и Send

3. Mirror, Touch

Mirror ✓: всё, что происходит на дисплее (нажатия, изменения значений), сразу видно и в preview.
☝ Touch: щелчок мышью в preview — как касание дисплея пальцем (курсор 👆, жёлтая точка).
🔧 Self-test, ⬆ Storage: главы 15, 12.

Mirror, Storage, Self-test, Touch в красных рамках

7

Все widgets

Для каждого widget: назначение, использование, его значение, код хоста. Три изображения: На дисплее (widget в новом проекте), Настройки, Commands (Send с ПК / Copy кода). Названия те же, что в списке Add widget.

Rectangle

Шапки, фоны, карточки. Может лежать под другими widgets.

Как пользоваться

Colours: Background (заливка), цвет Text / border.
Corner radius: скруглённые углы. Border: рамка.
Ниже в списке widgets = под другими (порядок меняют кнопки ↑ ↓).

Значение

—

Код хоста (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // красный
disp.hide(W_HEADER);

Rectangle: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Label

Постоянный текст: заголовки, подписи, единицы.

Как пользоваться

Пишите в Text. Font, Size, Align.
Language: другие языки (глава 9).
С Changeable ✓ хост может менять текст.
No background: видно то, что под ним.

Значение

—

Код хоста (Arduino)

disp.setText(W_LABEL, "Мотор ВКЛ");   // нужен Changeable ✓ и Language Русский

Label: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Number

Показывает число: температура, скорость, счётчик, уставка.

Как пользоваться

Value (начальное), Min, Max.
Decimals 1 показывает 253 как 25.3. Unit: °C, %, V.
Keys: меняется кнопками UP / DOWN, с шагом Step.
Remember value: сохраняется при отключении питания.

Значение

Число (Min…Max)

Код хоста (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Text

Строка текста от хоста: состояние, имя, сообщение.

Как пользоваться

Max length: сколько символов.
Font, Size, Align, цвета.
С Language и Live text: кириллица и другие алфавиты (модель с NOR).

Значение

—

Код хоста (Arduino)

disp.setText(W_TEXT, "Работает");

Text: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Bar

Уровень, прогресс, бак, батарея.

Как пользоваться

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
На сенсорных моделях её можно тянуть пальцем (slider).
Controls brightness: эта полоса управляет подсветкой.

Значение

Min…Max

Код хоста (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Button

Кнопка для нажатия: смена page, пуск / стоп.

Как пользоваться

Caption: её текст. Style: normal, outline, pill, checkbox.
Mode: push (только пока нажата) / toggle (вкл-выкл).
Key: кнопка платы (MENU…) тоже нажимает её.
Actions: Pressed → Go to page, Set value…

Значение

Toggle: 0 / 1

Код хоста (Arduino)

disp.onKey(myKey);             // кнопка платы
disp.onChange(myChange);       // значение toggle

LED

Индикатор состояния: ВКЛ / ВЫКЛ / мигает.

Как пользоваться

State: Off, On, Blink. Blink every: мс.
Colours: цвет Off, цвет On.

Значение

0 выкл, 1 вкл, 2 мигает

Код хоста (Arduino)

disp.setValue(W_LED, 2);   // мигает

LED: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Arc / gauge

Круговая шкала: скорость, мощность, громкость.

Как пользоваться

Start angle, Sweep (сколько градусов), Thickness.
Show value: число в центре.
Knob ✓: можно вращать касанием.
Keys + / −.

Значение

Min…Max

Код хоста (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Switch

Переключатель ВКЛ / ВЫКЛ: вентилятор, свет, режим.

Как пользоваться

Switched on: состояние при старте.
Key: кнопка платы переключает его. Касание тоже.
Remember value.

Значение

0 / 1

Код хоста (Arduino)

disp.setValue(W_SWITCH, 1);
// когда оператор переключает: onChange(W_SWITCH, 0/1)

Switch: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Select

Выпадающий список: один из вариантов.

Как пользоваться

Options: Low|Medium|High (через |).
Selected: вариант при старте.
Keys: открыть / OK, вверх, вниз. Касание открывает список.

Значение

0, 1, 2… (номер варианта)

Код хоста (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Spinner

Анимация «идёт работа…».

Как пользоваться

Style: dots, comet, arc…
Spinning, Speed. 0 = blank: скрыт, когда остановлен.

Значение

1 крутится, 0 стоит

Код хоста (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

Значки: Wi-Fi, батарея, колокольчик.

Как пользоваться

Symbol: выберите значок. Icon size, Scale.
Host switches icons: хост может менять значок.

Значение

Номер значка (0 = нет)

Код хоста (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

Несколько кнопок, выбрана только одна (режим, ступень).

Как пользоваться

Options: Low|Mid|High. Columns.
Style: кнопки или радио.

Значение

Номер выбранной кнопки (0, 1, 2…)

Код хоста (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Switch array

Несколько переключателей ВКЛ / ВЫКЛ вместе (зоны, реле).

Как пользоваться

Options: имя каждого переключателя. Columns.
Style: переключатели или флажки.

Значение

Биты: бит 0 = первый переключатель

Код хоста (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1 и 3 ВКЛ

Switch array: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Keypad

Цифровые клавиши: PIN, уставка.

Как пользоваться

Keys: 1|2|3|…|OK. Columns.
Types into: пишет в Input box.
Keys move / press: работает и с кнопками платы.

Значение

Номер нажатой клавиши

Код хоста (Arduino)

disp.onChange(myChange);   // каждое нажатие

Keypad: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Keyboard

Экранная клавиатура QWERTY: имя, пароль Wi-Fi.

Как пользоваться

Types into: Input box.
Language: языки Индии, набираемые латиницей (глава 9).
Касание Input box тоже может открыть клавиатуру (Keyboard on tap).

Значение

Код символа (8 = удаление, 13 = OK)

Код хоста (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Arrow

Направление: поток, вращение мотора.

Как пользоваться

Style: arrow, double, triangle. Shaft thickness.

Значение

0 вправо, 1 влево, 2 вверх, 3 вниз

Код хоста (Arduino)

disp.setValue(W_ARROW, 2);   // вверх

Image / logo

Логотипы, изображения.

Как пользоваться

Change image…: PNG, JPG, SVG. Editor подгоняет под дисплей.
Colours: Full colour или Two colours (логотипы, очень мало flash).
Fit, Border shape (Rounded, Circle…).

Значение

—

Код хоста (Arduino)

disp.show(W_IMAGE);

На дисплее

Настройки

Commands: Send с ПК, Copy кода

Chart

График: история температуры.

Как пользоваться

Style: line, thick, bars. Points, Min, Max, Grid lines.

Значение

Каждый setValue добавляет точку справа (-32768 = очистить)

Код хоста (Arduino)

disp.setValue(W_CHART, temperature);   // каждую секунду

Chart: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Needle gauge

Стрелочный прибор: давление, обороты.

Как пользоваться

Min, Max, Ticks, Scale numbers.
Warning from %, Danger from %: жёлтая и красная зоны.

Значение

Min…Max

Код хоста (Arduino)

disp.setValue(W_GAUGE, 75);

Needle gauge: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Input box

Поле, в которое пишет keypad / клавиатура.

Как пользоваться

Placeholder, Max length.
Kind: text, number, password (показывается *), Indian language (набор латиницей, показ индийским письмом; глава 9).

Значение

Вид Number: число, по нажатию OK

Код хоста (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Message

Несколько строк; слова сами переносятся.

Как пользоваться

Message: | = новая строка. Line gap.
Language, Live text (глава 9).
Changeable: хост может менять.

Значение

—

Код хоста (Arduino)

disp.setText(W_MESSAGE, "Замените фильтр|Сервис через 3 дня");

Message: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

Animation (GIF)

GIF-анимация: логотип, загрузка, предупреждение.

Как пользоваться

Choose GIF…: файл GIF. Fit.
Playing: loop, once, stopped.
Для больших или очень цветных GIF лучше модель с NOR.

Значение

1 играть (цикл), 2 один раз, 0 стоп

Код хоста (Arduino)

disp.setValue(W_ANIM, 2);   // один раз

Animation (GIF): На дисплее — На дисплее

Roller (picker)

Прокручиваемый выбор: программы, режимы.

Как пользоваться

Options: Off|Low|Medium|High. Rows shown: 3, 5, 7.
Keys далее / назад. Касанием: строка выше или ниже.
Remember value.

Значение

Выбранная строка (0, 1, 2…)

Код хоста (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): На дисплее — На дисплее

Roller (picker): Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

QR code

Для сканирования телефоном: сайт, Wi-Fi, телефон, ссылка на руководство.

Как пользоваться

Text / link: https://…, WIFI:T:WPA;S:имя;P:пароль;;, tel:….
Border shape, No background.
Чем больше поле, тем легче сканировать.

Значение

—

Код хоста (Arduino)

disp.show(W_QR);

QR code: Commands: Send с ПК, Copy кода — Commands: Send с ПК, Copy кода

8

Actions: полный список

Что дисплей делает сам, когда что-то происходит с widget. Хост не нужен. Примеры: шаги 12 и 14 урока.

When (когда)	Какие widgets
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Те же widgets

Do (что)	Цель / значение
Go to page	Page
Set value of	widget, значение
Add to / Subtract from	widget, на сколько
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Модели с зуммером
Brightness (%)	Модели с регулировкой яркости

9

Языки

Поместите на page Message (Label, Text и Button работают так же).

Language: Русский · Cyrillic, Français · Deutsch · Español …, Ελληνικά или языки Индии (хинди, тамильский, малаялам…).
Фраза в Phrases (несколько — через |).
Live text ✓: хост может прислать любую фразу в UTF-8; дисплей правильно рисует кириллицу и особые буквы. При отметке поле становится «Message», и отмечается «Changeable».

Живой текст не на английском требует модели с NOR (4, 8, 16). Шрифты записаны в NOR на заводе.

Language, Message, Changeable в красных рамках

Ввод на языках Индии с клавиатуры

Экранная клавиатура умеет писать на малаялам, хинди, маратхи, тамильском, гуджарати, панджаби и бенгальском: нажимаете латинские буквы, а поле показывает их письмом этого языка (namaste → नमस्ते), как фонетический ввод на телефоне.

Добавьте Keyboard.
Language: выберите язык.

Если клавиатура ещё не пишет ни в какой Input box («Types into» = None), выбор языка добавит Input box над клавиатурой, и клавиатура будет писать в него.

Настройки Keyboard: Language в красной рамке

Input box добавлен над клавиатурой — После выбора языка: Input box над клавиатурой, «Types into» = это поле.

Язык — это настройка этого Input box; его можно изменить, выбрав само поле:

Kind: Indian language (typed in English).
Language: язык.
Letter size: 16, 20, 24 px.
Ниже показаны правила ввода для языка.

Max length — не более 24 латинских букв. «Show typed text» нужен, только когда клавиатура закрывает поле (всплывающая клавиатура). Если поле видно над клавиатурой, снимите отметку, иначе один и тот же текст будет в двух полях.

Настройки Input box: Kind, Language, Letter size в красных рамках

Поля, набранные на семи языках — На дисплее: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Нужна модель с NOR (4T, 8T, 16T…). При чтении поля (readText) хост получает набранные латинские буквы.

10

С хост-MCU (Arduino / C)

Панель Export ▾:

Download pixpio_ui.h: имя для каждого widget и page (W_LEVEL, PAGE_SETTINGS…). Добавьте в программу хоста.
Write to project folder…: прошивка и заголовок хоста вместе.
NOR data file: только для программатора микросхем.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Вызывается, когда оператор меняет уровень кнопками UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // TX хоста → RC7 платы, RX хоста ← RC6 платы
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // пока дисплей не будет готов (до 5 с)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // показать значение датчика
  disp.loop();                           // сообщения от дисплея
  delay(200);
}

Функция	Назначение
setValue(id, v)	Значение числа, полосы, LED, переключателя…
setText(id, "…")	Текст с Changeable (UTF-8 для Live text)
page(PAGE_…)	Сменить page
show(id) / hide(id)	Показать / скрыть widget
setColor(id, c) / setBackground(id, c)	Цвет (RGB565)
getValue(id) / readText(id, buf, n)	Прочитать значение / текст с дисплея
brightness(%) / beep(ms)	Подсветка, зуммер
onChange / onKey / onPage / onReboot	Изменилось значение, кнопка платы, сменилась page, дисплей перезапустился
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Примеры Arduino: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (с ПЛК)

Щёлкните page в списке Pages, затем Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: такие же в ПЛК.
📋 Register table (CSV): список всех регистров; откройте в Excel для программиста ПЛК.
Установите скорость панели Device равной скорости Modbus и выполните Flash.

При выборе widget его регистры видны под Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table в красных рамках

Регистр	Адрес	Значение
Holding (4x)	0 … N-1	Значение widget (его место в списке). Запись выводит его на дисплей.
Holding	1000	Page; запишите ID page, чтобы открыть её
Holding	1001 / 1002	Яркость 0–100 % / сигнал (мс)
Coil (0x)	0 … N-1	Показать (1) / скрыть (0)
Discrete input (1x)	0 … N-1	Кнопка нажата (сбрасывается при чтении)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: нажата / удерживается
Input (3x)	0 … N-1, 1000–1002	Значения (только чтение), page, число widgets, версия

Функции 01, 02, 03, 04, 05, 06, 08, 15, 16. Значения — 16 бит со знаком. Добавление или удаление widgets меняет адреса; передайте ПЛК новый CSV.

Подключение RS-485

Модуль MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B ПЛК (или USB-RS485)

Для Flash нужен кабель USB-UART (TTL). Не соединяйте напрямую вместе на RC7 TXD кабеля и RO модуля MAX485: используйте перемычку или резистор 1 кОм в TXD и подтяжку 10 кОм на RB4.

Проверка с ПК без ПЛК

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in в Storage · whole project:

MCU flash: английские шрифты, маленькие изображения. Модель Lite.
SPI NOR flash: большие изображения, анимация, другие языки. Модели 4 / 8 / 16 (выставляется само при выборе Board model).

Библиотека шрифтов уже записана в NOR на заводе. При Flash отправляются только изображения проекта.

13

Widget list, Problems

Окно Widgets on this page — **☰ Widgets**: все widgets этой page. Щелчок по имени выбирает его. Чтобы выбрать нижний, снимите отметку с верхнего.

14

Плата, выводы

Узел	Вывод PIC	Примечание
Host UART TX / RX	RC6 / RC7	115200 8N1 (в Modbus — скорость из Editor)
Host I2C SCL / SDA	RC3 / RC4	Адрес 0x3C, подтяжки 4.7 кОм
BUSY	RB4	HIGH = идёт отрисовка. В Modbus: DE/RE RS-485.
INT	RC0	LOW = есть сообщение для хоста (I2C / SPI)
Кнопки MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Кнопка (на GND) или TTP223
CS сенсорной панели	RA0	Модели T (XPT2046)
CS NOR flash	RA5	Модели 4 / 8 / 16
ШИМ подсветки, зуммер	RA6, RA7	В моделях, где они есть
Светодиод состояния	RB5	Мигает каждые 0.5 с во время работы

Настройки дисплея: шаг 3 урока. После каждого изменения выполняйте Flash.

15

Self-test

После подключения — 🔧 Self-test на панели Device. Работает при любом записанном проекте.

Цвета: красная, зелёная, синяя, белая, чёрная и серая полосы, жёлтый квадрат слева сверху. Если квадрат в другом углу, исправьте Orientation / Mirror. START или касание: далее.
Кнопки, сенсор: нажмите все четыре кнопки; каждое поле станет зелёным. С сенсором — точка. Если кнопка не работает, START дважды.
Компоненты: NOR, библиотека шрифтов, EEPROM: PASS / FAIL. Проверка зуммера и подсветки. START: обычный экран.

16

Устранение неполадок

Проблема	Что делать
Дисплей весь белый	Проверьте провода DC, CS, RST дисплея и питание 3.3 В.
Зеркально / вверх ногами	Display, Mirror, Orientation (шаг 3 урока). Жёлтый квадрат self-test должен быть слева сверху.
Неверные цвета	Красный выглядит синим: Swap red/blue. Белый выглядит чёрным: Invert colours.
Кнопки всегда нажаты	«Buttons on the board»: кнопки = «Push buttons to GND», сенсорные площадки = «TTP223».
Касание не туда	Touch calibration → Calibrate…: по очереди коснитесь четырёх знаков + на дисплее.
Flash не проходит / порт занят	Отключитесь (Disconnect), затем Flash. «Waiting for bootloader»: выключите и включите плату.
Не подключается	Перепутаны TX / RX? (TXD адаптера → RC7). Скорость 115200 (для проекта Modbus — скорость Modbus).
Текст выводится как «????»	Исправьте Language у widget. Живой текст на других языках требует модели с NOR.
Нет ответа Modbus	Адрес, скорость, чётность совпадают? Поменяйте A / B. После смены page тайм-аут ПЛК 3 с.
Ошибка в Problems	Щёлкните ошибку и исправьте этот widget. С ошибкой Flash не выполняется.

PixPIO 2.8" smart display · Kullanım kılavuzu

PixPIO Kullanım Kılavuzu

Ekranları tasarlayın, tek tıkla ekrana gönderin. Herhangi bir mikrodenetleyiciden (Arduino, PIC, STM32…), Modbus ile bir PLC'den ya da doğrudan PC'den kullanılır. Yalnızca beslemeyle tek başına da çalışır.

Ekran görüntülerindeki kırmızı kutular o adımda kullanılan ayarlar / düğmelerdir.

Bu kılavuzdaki uygulamaya benzer bir tasarım ekranda: host yok, yalnızca Actions.

1

PixPIO nedir

PixPIO, kendi işlemcisi (PIC18F27Q84) olan 2.8 inç (320×240) renkli bir ekran kartıdır. Ekranlar, düğmeler, çubuklar, göstergeler ve resimler PC'de PixPIO Editor ile tasarlanır; ekran bunları kendisi çizer. Host (bir MCU ya da PLC) yalnızca "level = 80" gibi kısa mesajlar gönderir.

LiteNOR yok, dokunmatik yok. İngilizce fontlar.

4 / 4T4 MB NOR (tüm fontlar ve diller). T = dokunmatik.

8 / 8T8 MB NOR. Daha çok resim, animasyon.

16 / 16T16 MB NOR. Büyük resimler, çok dil.

Kartta 4 düğme var: MENU UP DOWN START (basmalı düğme ya da TTP223 dokunmatik ped). Bazı modellerde parlaklık kontrolü ve buzzer da vardır.

Neden PixPIO

Canlı düzenlemeUSB’yi takın: Editor’deki her değişiklik ekranda hemen görünür. SD kart yok, uzun yükleme yok.

30 hazır widgetGöstergeler, grafikler, klavyeler, QR kodlar, animasyonlar: sürükle, bırak, bitti.

Her hostUART, I2C veya SPI. PIC, Arduino, ESP32, STM32 ile test edildi. Ya da host olmadan.

Sizin dilinizEkranda birçok dil, Hint dilleri için fonetik yazma.

Ücretsiz araçlarPixPIO Editor ve VS Code için PICPIO ücretsizdir.

2

Kurulum

Visual Studio Code'u kurun (Windows, ücretsiz).
VS Code'da PICPIO eklentisi: Extensions → "…" → Install from VSIX… → kartla gelen picpio-x.y.z.vsix.
VS Code'u yeniden başlatın. PICPIO menüsünden (ya da Ctrl+Shift+P → "PixPIO") PixPIO'yu seçin. Editor tarayıcıda açılır.
USB-seri kabloyu (CH340) PC'ye takın. Device Manager → Ports altında USB-SERIAL CH340 (COM3) gibi bir satır görünmelidir.

Editor internete ihtiyaç duymaz. Ekranla VS Code'un çalıştırdığı bir "bridge" üzerinden konuşur; Editor'ü kullanırken VS Code'u açık tutun.

3

Editor

İlk açılışta Editor bir örnek proje gösterir (araç çubuğundaki Example onu her zaman geri getirir; 8 page, neredeyse tüm widget'lar).

Bölüm	Yeri	Görevi
Toolbar	Üstte	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, yakınlaştırma, Grid, Snap, ☰ Widgets
Pages	Sol üst	Ekranlar. + yeni page, ⧉ kopyala, − sil. "start" = ilk gösterilen.
Add widget	Sol	Tıklayınca widget ekrana eklenir.
Preview	Orta	Ekranın göstereceği gibi. Taşımak için sürükleyin; boyut için mavi kareleri çekin.
Properties	Sağ	Seçili widget'ın ayarları. Listede bir page'e tıklayınca page'in ve tüm projenin ayarları. ? = her ayarın açıklaması.
Problems	Sol alt	Tasarımdaki hatalar ve uyarılar.
Device	Sağ alt	COM portu, Connect, Mirror, Storage, Self-test, Touch, PC'den komutlar (bölüm 6).

Kısayollar: ←→↑↓ 1 px (Shift 10 px), Ctrl+D kopyala, Del sil, Ctrl+Z / Y geri al / yinele.

4

Uygulama: Water Tank (sıfırdan)

Bir tankın seviyesini gösteren 2 page'lik bir ekran. UP / DOWN seviyeyi değiştirir, çubuk onu izler. 100'de "TANK FULL", 0'da "TANK EMPTY" gösterir. MENU ayarlar page'ini açar. Host gerekmez. Yaklaşık 15 dakika.

ADIM 1

Yeni proje

Araç çubuğunda New. Boş bir ekran (page "main") gelir.

ADIM 2

Board model

Sağda Screen · whole project altında Board model'i kartın etiketindeki modele ayarlayın (burada PixPIO 4T).

Bu, ekranı, dokunmatiği, düğmeleri, parlaklığı, buzzer'ı ve NOR'u kendiliğinden ayarlar. Editor bunu hatırlar.

ADIM 3

Display (yalnızca gerekirse)

Yalnızca görüntü dönmüşse ya da renkler yanlışsa:

Display: modül (ILI9341 türleri)
Buttons on the board: basmalı düğme / TTP223 / yok
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation kırmızı kutularda

ADIM 4

Page'e ad verme

Sağ üstte Name: home. Host kodunda bu PAGE_HOME olur.

ADIM 5

İkinci page

Pages'teki +. Yeni page'in adı: settings. Sonra geri dönmek için listede home'a tıklayın.

Pages: home start, settings; + kırmızı kutuda

ADIM 6

Üst çubuk (Rectangle)

Add widget'ta Rectangle. x, y, width, height: 0, 0, 320, 30 (ya da fareyle çizin). Rengi Colours'ta.

Rectangle eklendi; Rectangle düğmesi ve x y width height kırmızı kutularda

ADIM 7

Başlık (Label)

Label: Name title, Text WATER TANK, konum 8, 7, 304, 16. Font, Size ve Align Text bölümünde.

Label: Name title, Text WATER TANK kırmızı kutularda

ADIM 8

Seviye (Number)

Number: Name level, konum 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: elektrik kesilse de saklanır

Number: Value, Unit, Min, Max, Remember value kırmızı kutularda

ADIM 9

Kart düğmeleriyle değiştirme

Keys (buttons): Key + UP, Key − DOWN, Step 5. Basılı tutunca sürekli değişir.

Key + UP, Key − DOWN, Step 5 kırmızı kutularda

ADIM 10

Seviye çubuğu

Bar: Name level_bar, konum 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, %50, yeşil parçalı çubuk — Şimdiye kadar: başlık, sayı, çubuk.

ADIM 11

Gizli mesajlar

Label: Name full_msg, Text TANK FULL, konum 10, 120, 300, 20, Hidden ✓.

Aynı yere bir tane daha: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Gizli widget'lar preview'da noktalı görünür; ekranda başlangıçta görünmez.

Label: Text TANK FULL, Hidden kırmızı kutularda

ADIM 12

Actions: sayıya 5 eylem

Preview'da level'a tıklayın. Actions (no code) → 5 kez + Add action:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ bir satırı siler.

ADIM 13

Ayarlar düğmesi

Button: Name btn_settings, konum 10, 200, 145, 34, Caption MENU: Settings.

ADIM 14

Düğmeye basınca page değiştirme

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: karttaki MENU da aynısını yapar.

ADIM 15

Ayarlar page'i: Back düğmesi, QR

Pages'te settings. Adım 6 ve 7'deki gibi bir Rectangle ve "SETTINGS" Label.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = web siteniz, Border shape = Rounded.

QR: Text / link, Border shape kırmızı kutularda

Ayarlar page'i: SETTINGS, yuvarlak QR, START: Back — Ayarlar page'i tamamlandı.

ADIM 16

Kaydetme

Save: bir .pixpio dosyası. "Unsaved changes" göründüğü sürece kaydedilmemiştir. Sonra kartı bağlayıp Flash yapın (bölüm 5).

5

Kartı bağlama, Flash

ADIM 1

USB-seri kablo

USB-seri (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Yalnızca kartın kendi beslemesi yoksa

ADIM 2

Connect

Device'ta COM portu, baud 115200, Connect. Yeşil nokta = bağlı. Port görünmüyor mu? ↻.

ADIM 3

⚡ Flash to display

Araç çubuğunda ⚡ Flash to display.
Tasarım firmware'e dönüşür ve kabloyla gönderilir; bir pencere ilerlemeyi gösterir. İlk sefer 1–2 dakika sürer.
"UPLOAD SUCCESSFUL" görünce ekran yeni arayüzle başlar.
Resimler ve diğer diller (NOR modelleri) aynı kabloyla NOR'a gider.

SD karta gerek yok. Her değişiklik için: Editor'de değiştirin, Flash yapın.

Uygulama tasarımı ekranda: seviyeyi UP / DOWN ile değiştirin, 100'e getirince "TANK FULL" görünür, MENU ile ayarlar page'i açılır.

6

Ekranı PC'den kontrol etme

Bağlandıktan sonra host MCU olmadan her widget'ı PC'den deneyebilirsiniz. Üç yol:

1. Hızlı komutlar (Device paneli)

Page + Show: o page'i ekranda açar.
Bir Widget seçin, Value yazın, Set value: sayı, çubuk, LED, anahtar… değişir.
text + Set text: Changeable bir metni değiştirir.
Hide / Show: widget'ı gizle / göster.
Key + Press: karttaki bir düğmeye (MENU, UP…) basılmış gibi.

Device hızlı komutları kırmızı kutularda

2. Commands for this widget

Seçili her widget'ın özelliklerinin en altında Commands for this widget vardır. Her komut için:

Send: PC'den ekrana hemen gönderir (bağlı olmalı).
Copy: host programına yapıştırılacak kod (pd_set_value(&disp, W_NUMBER, 253);).
Yeşil baytlar: başka bir dilde program yazarken UART / I2C / SPI ile kendiniz göndereceğiniz çerçeve.

Ayarları değiştirdikçe komutlar da değişir. Her widget'ın komutları bölüm 7'de.

Number widget komutları; her birinde Copy ve Send

3. Mirror, Touch

Mirror ✓: ekranda olanlar (düğmeye basma, değer değişimi) preview'da da canlı görünür.
☝ Touch: preview'a tıklamak ekrana parmakla dokunmak gibidir (👆 imleç, sarı nokta).
🔧 Self-test, ⬆ Storage: bölüm 15, 12.

Mirror, Storage, Self-test, Touch kırmızı kutularda

7

Her widget

Her widget için: ne işe yarar, nasıl kullanılır, değeri nedir, host kodu. Üç resim: Ekranda (New projeye eklenmiş widget), Ayarlar, Commands (PC'den Send / kodu Copy). Adlar Add widget listesindekiyle aynıdır.

Rectangle

Başlık çubukları, arka planlar, kartlar. Diğer widget'ların arkasında durabilir.

Nasıl kullanılır

Colours: Background (dolgu), Text / border rengi.
Corner radius: yuvarlak köşeler. Border: kenar çizgisi.
Widget listesinde aşağıda olan diğerlerinin arkasında kalır (sırayı ↑ ↓ ile değiştirin).

Değer

—

Host kodu (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // kırmızı
disp.hide(W_HEADER);

Rectangle: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

Label

Sabit metin: başlıklar, etiketler, birimler.

Nasıl kullanılır

Text'e yazın. Font, Size, Align.
Language: diğer diller (bölüm 9).
Changeable ✓ ile host metni değiştirebilir.
No background: altındaki görünür.

Değer

—

Host kodu (Arduino)

disp.setText(W_LABEL, "Motor AÇIK");   // Changeable ✓ gerekir

Label: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

Number

Sayı gösterir: sıcaklık, hız, sayaç, ayar değeri.

Nasıl kullanılır

Value (başlangıç), Min, Max.
Decimals 1 ise 253, 25.3 görünür. Unit: °C, %, V.
Keys: UP / DOWN ile Step adımlarla değişir.
Remember value: elektrik kesilse de saklanır.

Değer

Sayı (Min…Max)

Host kodu (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

Bar

Seviye, ilerleme, tank, pil.

Nasıl kullanılır

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Dokunmatik modellerde parmakla sürüklenebilir (slider).
Controls brightness: bu çubuk arka ışığı ayarlar.

Değer

Min…Max

Host kodu (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

Button

Basılacak düğme: page değiştirme, başlat / durdur.

Nasıl kullanılır

Caption: yazısı. Style: normal, outline, pill, checkbox.
Mode: push (yalnızca basılıyken) / toggle (aç-kapa).
Key: karttaki bir düğme (MENU…) de ona basar.
Actions: Pressed → Go to page, Set value…

Değer

Toggle: 0 / 1

Host kodu (Arduino)

disp.onKey(myKey);             // kart düğmesi
disp.onChange(myChange);       // toggle değeri

Select

Açılır liste: birkaç seçenekten biri.

Nasıl kullanılır

Options: Düşük|Orta|Yüksek (| ile ayırın).
Selected: başlangıç seçeneği.
Keys: aç / OK, yukarı, aşağı. Dokunmak listeyi açar.

Değer

0, 1, 2… (seçeneğin yeri)

Host kodu (Arduino)

disp.setValue(W_SELECT, 2);   // Yüksek

Select: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

Keyboard

Ekranda QWERTY klavye: ad, Wi-Fi şifresi.

Nasıl kullanılır

Types into: bir Input box.
Language: Latin harflerle yazılan Hindistan dilleri (bölüm 9).
Input box'a dokununca da klavye açılabilir (Keyboard on tap).

Değer

Karakter kodu (8 = sil, 13 = OK)

Host kodu (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

Input box

Keypad / klavyenin yazdığı kutu.

Nasıl kullanılır

Placeholder, Max length.
Kind: text, number, password (* görünür), Indian language (Latin harflerle yazılır, Hint yazısıyla görünür; bölüm 9).

Değer

Number türü: OK'e basınca sayı

Host kodu (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: PC’den Send, kodu Copy — Commands: PC’den Send, kodu Copy

8

Actions: tam liste

Bir widget'a bir şey olduğunda ekranın kendiliğinden yaptıkları. Host gerekmez. Örnekler: uygulama adım 12, 14.

When (ne zaman)	Hangi widget'lar
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Aynı widget'lar

Do (ne)	Hedef / değer
Go to page	Bir page
Set value of	widget, değer
Add to / Subtract from	widget, ne kadar
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Buzzer'lı modeller
Brightness (%)	Parlaklık kontrollü modeller

9

Diller

Bir page'e Message koyun (Label, Text ve Button da aynı şekilde çalışır).

Language: Français · Deutsch · Español … (Türkçe ç ğ ı ö ş ü harfleri dahil), Русский, Ελληνικά ya da Hindistan dilleri.
Cümle Phrases'ta (birden fazlaysa | ile ayırın).
Live text ✓: host her cümleyi UTF-8 olarak gönderebilir; ekran özel harfleri doğru çizer. İşaretleyince alan "Message" olur ve "Changeable" işaretlenir.

İngilizce dışındaki canlı metin için NOR modeli (4, 8, 16) gerekir. Fontlar fabrikada NOR'a yazılıdır.

Language, Message, Changeable kırmızı kutularda

Klavyeyle Hindistan dillerinde yazma

Ekran klavyesi Malayalam, Hintçe, Marathi, Tamil, Gujarati, Pencapça ve Bengalce yazabilir: Latin harflere basarsınız, kutu onları o dilin yazısıyla gösterir (namaste → नमस्ते), telefondaki fonetik yazım gibi.

Bir Keyboard ekleyin.
Language: dili seçin.

Klavye henüz hiçbir Input box'a yazmıyorsa ("Types into" = None), dil seçmek klavyenin üstüne bir Input box ekler ve klavye ona yazar.

Keyboard ayarları: Language kırmızı kutuda

Klavyenin üstüne eklenen Input box — Dil seçildikten sonra: klavyenin üstünde Input box, "Types into" = o kutu.

Dil, o Input box'ın bir ayarıdır; kutuyu seçerek de değiştirilebilir:

Kind: Indian language (typed in English).
Language: dil.
Letter size: 16, 20, 24 px.
Altta o dilin yazım kuralları görünür.

Max length en fazla 24 Latin harf. "Show typed text" yalnızca klavye kutuyu örttüğünde (açılır klavye) gerekir. Kutu klavyenin üstünde görünüyorsa işareti kaldırın, yoksa aynı metin iki kutuda görünür.

Input box ayarları: Kind, Language, Letter size kırmızı kutularda

Yedi dilde yazılmış kutular — Ekranda: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

NOR modeli (4T, 8T, 16T…) gerekir. Host kutuyu okuduğunda (readText) yazılan Latin harfleri alır.

10

Host MCU'dan (Arduino / C)

Araç çubuğu Export ▾:

Download pixpio_ui.h: her widget ve page için bir ad (W_LEVEL, PAGE_SETTINGS…). Host programına ekleyin.
Write to project folder…: firmware ve host başlık dosyası birlikte.
NOR data file: yalnızca bir çip programlayıcı için.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Operatör seviyeyi UP / DOWN ile değiştirdiğinde çağrılır
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → kart RC7, host RX ← kart RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // ekran hazır olana kadar (en fazla 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // sensör değerini göster
  disp.loop();                           // ekrandan gelen mesajlar
  delay(200);
}

Fonksiyon	Görevi
setValue(id, v)	Sayı, çubuk, LED, anahtar… değeri
setText(id, "…")	Changeable metin (Live text için UTF-8)
page(PAGE_…)	Page değiştir
show(id) / hide(id)	Widget göster / gizle
setColor(id, c) / setBackground(id, c)	Renk (RGB565)
getValue(id) / readText(id, buf, n)	Ekrandan değer / metin oku
brightness(%) / beep(ms)	Arka ışık, buzzer
onChange / onKey / onPage / onReboot	Değer değişti, kart düğmesi, page değişti, ekran yeniden başladı
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Arduino örnekleri: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (PLC ile)

Pages listesinde bir page'e tıklayın, sonra Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: PLC'de de aynısı.
📋 Register table (CSV): tüm register'ların listesi; PLC programcısı için Excel'de açın.
Device panelindeki baud'u Modbus baud'una ayarlayıp Flash yapın.

Bir widget seçince register'ları Name'in altında görünür: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table kırmızı kutularda

Register	Adres	Anlamı
Holding (4x)	0 … N-1	Widget değeri (widget listesindeki yeri). Yazınca ekranda görünür.
Holding	1000	Page; bir page ID yazınca o page açılır
Holding	1001 / 1002	Parlaklık %0–100 / bip (ms)
Coil (0x)	0 … N-1	Göster (1) / gizle (0)
Discrete input (1x)	0 … N-1	Düğmeye basıldı (okununca silinir)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: basıldı / basılı tutuluyor
Input (3x)	0 … N-1, 1000–1002	Değerler (salt okunur), page, widget sayısı, sürüm

Fonksiyonlar 01, 02, 03, 04, 05, 06, 08, 15, 16. Değerler işaretli 16 bit. Widget eklemek ya da silmek adresleri değiştirir; PLC'ye yeni CSV'yi verin.

RS-485 bağlantısı

MAX485 modülü	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC'nin (ya da USB-RS485'in) A / B'si

Flash için USB-seri (TTL) kablo gerekir. USB-seri TXD'yi ve MAX485 RO'yu birlikte doğrudan RC7'ye bağlamayın: jumper kullanın ya da TXD'ye 1 kΩ direnç ve RB4'e 10 kΩ pull-up koyun.

PLC olmadan PC'den test

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project altında Store in:

MCU flash: İngilizce fontlar, küçük resimler. Lite model.
SPI NOR flash: büyük resimler, animasyon, diğer diller. 4 / 8 / 16 modelleri (Board model seçilince kendiliğinden).

Font kütüphanesi fabrikada NOR'a yazılıdır. Flash sırasında yalnızca tasarımın resimleri gönderilir.

13

Widget list, Problems

Widgets on this page penceresi — **☰ Widgets**: bu page'deki tüm widget'lar. Bir ada tıklayınca seçilir. Alttakini seçmek için üstteki işareti kaldırın.

14

Kart, pinler

Bölüm	PIC pini	Not
Host UART TX / RX	RC6 / RC7	115200 8N1 (Modbus'ta Editor'de verilen baud)
Host I2C SCL / SDA	RC3 / RC4	Adres 0x3C, 4.7 kΩ pull-up
BUSY	RB4	HIGH = çiziyor. Modbus'ta RS-485 DE/RE.
INT	RC0	LOW = host için mesaj var (I2C / SPI)
Düğmeler MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Basmalı düğme (GND'ye) ya da TTP223
Dokunmatik panel CS	RA0	T modelleri (XPT2046)
NOR flash CS	RA5	4 / 8 / 16 modelleri
Arka ışık PWM, buzzer	RA6, RA7	Bulunan modellerde
Durum LED'i	RB5	Çalışırken 0.5 sn'de bir yanıp söner

Ekran ayarları: uygulama adım 3. Her değişiklikten sonra Flash yapın.

15

Self-test

Bağlandıktan sonra Device panelinde 🔧 Self-test. Hangi tasarım yüklü olursa olsun çalışır.

Renkler: kırmızı, yeşil, mavi, beyaz, siyah ve gri şeritler, sol üstte sarı bir kare. Kare başka köşedeyse Orientation / Mirror'u düzeltin. START ya da dokunma: sonraki.
Düğmeler, dokunmatik: dört düğmeye de basın; her kutu yeşil olur. Dokunmatikte bir nokta. Bir düğme çalışmıyorsa START'a iki kez basın.
Parçalar: NOR, font kütüphanesi, EEPROM: PASS / FAIL. Buzzer ve arka ışık testi. START: normal ekrana dönüş.

16

Sorun giderme

Sorun	Yapılacak
Ekran tamamen beyaz	Ekranın DC, CS, RST kablolarını ve 3.3 V beslemeyi kontrol edin.
Ayna gibi / ters	Display, Mirror, Orientation (uygulama adım 3). Self-test'teki sarı kare sol üstte olmalı.
Renkler yanlış	Kırmızı mavi görünüyor: Swap red/blue. Beyaz siyah görünüyor: Invert colours.
Düğmeler hep basılı	"Buttons on the board": basmalı düğme = "Push buttons to GND", dokunmatik ped = "TTP223".
Dokunma yanlış yere düşüyor	Touch calibration → Calibrate…: ekrandaki dört + işaretine sırayla dokunun.
Flash başarısız / port meşgul	Bağlantıyı kesin, sonra Flash. "Waiting for bootloader": kartı kapatıp açın.
Bağlanmıyor	TX / RX ters mi? (adaptör TXD → RC7). Baud 115200 (Modbus tasarımında Modbus baud'u).
Metin "????" görünüyor	Widget'ın Language'ini düzeltin. Diğer dillerde canlı metin için NOR modeli gerekir.
Modbus yanıt vermiyor	Adres, baud, parity aynı mı? A / B'yi değiştirin. Page değişiminden sonra PLC zaman aşımı 3 sn.
Problems'ta hata	Hataya tıklayıp o widget'ı düzeltin. Hata varken Flash yapılmaz.

PixPIO 2.8" smart display · Panduan pengguna

Panduan Pengguna PixPIO

Rancang layar, kirim ke display dengan satu klik. Bisa dipakai dari mikrokontroler apa pun (Arduino, PIC, STM32…), dari PLC lewat Modbus, atau langsung dari PC. Juga bisa berjalan sendiri hanya dengan catu daya.

Kotak merah pada tangkapan layar adalah pengaturan / tombol yang dipakai di langkah itu.

Desain seperti tutorial panduan ini di display: tanpa host, hanya Actions.

1

Apa itu PixPIO

PixPIO adalah papan display warna 2.8 inci (320×240) dengan prosesor sendiri (PIC18F27Q84). Layar, tombol, bar, meter, dan gambar dirancang di PC dengan PixPIO Editor, dan display menggambarnya sendiri. Host (MCU atau PLC) cukup mengirim pesan pendek seperti "level = 80".

LiteTanpa NOR, tanpa sentuh. Font Inggris.

4 / 4TNOR 4 MB (semua font dan bahasa). T = sentuh.

8 / 8TNOR 8 MB. Lebih banyak gambar, animasi.

16 / 16TNOR 16 MB. Gambar besar, banyak bahasa.

Papan punya 4 tombol: MENU UP DOWN START (tombol tekan atau pad sentuh TTP223). Beberapa model juga punya pengatur kecerahan dan buzzer.

Mengapa PixPIO

Edit langsungColok USB: setiap perubahan di Editor langsung tampil di display. Tanpa kartu SD, tanpa upload lama.

30 widget siapGauge, grafik, keyboard, kode QR, animasi: seret, lepas, selesai.

Host apa sajaUART, I2C atau SPI. Diuji dengan PIC, Arduino, ESP32, STM32. Atau tanpa host.

Bahasa AndaBanyak bahasa di layar, dengan pengetikan fonetik untuk bahasa India.

Alat gratisPixPIO Editor dan PICPIO untuk VS Code gratis.

2

Instalasi

Instal Visual Studio Code (Windows, gratis).
Di VS Code, ekstensi PICPIO: Extensions → "…" → Install from VSIX… → berkas picpio-x.y.z.vsix yang disertakan.
Mulai ulang VS Code. Di menu PICPIO (atau Ctrl+Shift+P → "PixPIO") pilih PixPIO. Editor terbuka di browser.
Colokkan kabel USB-serial (CH340) ke PC. Di Device Manager → Ports harus muncul sesuatu seperti USB-SERIAL CH340 (COM3).

Editor tidak butuh internet. Editor berbicara dengan display lewat "bridge" yang dijalankan VS Code, jadi biarkan VS Code terbuka selama memakai Editor.

3

Mengenal Editor

Saat pertama dibuka, Editor menampilkan proyek contoh (tombol Example di toolbar selalu mengembalikannya; 8 page, hampir semua widget).

Bagian	Letak	Fungsi
Toolbar	Atas	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, zoom, Grid, Snap, ☰ Widgets
Pages	Kiri atas	Layar-layar. + page baru, ⧉ salin, − hapus. "start" = yang tampil pertama.
Add widget	Kiri	Klik dan widget ditambahkan ke layar.
Preview	Tengah	Seperti yang akan tampil di display. Seret untuk memindah; tarik kotak biru untuk mengubah ukuran.
Properties	Kanan	Pengaturan widget yang dipilih. Klik page di daftar untuk pengaturan page dan seluruh proyek. ? = penjelasan tiap pengaturan.
Problems	Kiri bawah	Kesalahan dan peringatan desain.
Device	Kanan bawah	Port COM, Connect, Mirror, Storage, Self-test, Touch, perintah dari PC (bab 6).

Pintasan: ←→↑↓ 1 px (Shift 10 px), Ctrl+D salin, Del hapus, Ctrl+Z / Y batal / ulang.

4

Tutorial: Water Tank (dari nol)

Layar 2 page yang menampilkan level tangki. UP / DOWN mengubah level dan bar ikut berubah. Di 100 tampil "TANK FULL", di 0 "TANK EMPTY". MENU membuka page pengaturan. Tanpa host. Sekitar 15 menit.

LANGKAH 1

Proyek baru

New di toolbar. Anda mendapat layar kosong (page "main").

LANGKAH 2

Board model

Di kanan, pada Screen · whole project, atur Board model sesuai model di label papan (di sini PixPIO 4T).

Ini otomatis mengatur display, sentuh, tombol, kecerahan, buzzer, dan NOR. Editor mengingatnya.

LANGKAH 3

Display (hanya jika perlu)

Hanya jika gambar terputar atau warnanya salah:

Display: modul (varian ILI9341)
Buttons on the board: tombol tekan / TTP223 / tidak ada
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation dalam kotak merah

LANGKAH 4

Nama page

Kanan atas, Name: home. Di kode host namanya PAGE_HOME.

LANGKAH 5

Page kedua

+ di Pages. Beri nama page baru settings. Lalu klik home di daftar untuk kembali.

Pages: home start, settings; + dalam kotak merah

LANGKAH 6

Bar atas (Rectangle)

Rectangle di Add widget. x, y, width, height: 0, 0, 320, 30 (atau tarik dengan mouse). Warnanya di Colours.

Rectangle ditambahkan; tombol Rectangle dan x y width height dalam kotak merah

LANGKAH 7

Judul (Label)

Label: Name title, Text WATER TANK, posisi 8, 7, 304, 16. Font, Size, dan Align ada di Text.

Label: Name title, Text WATER TANK dalam kotak merah

LANGKAH 8

Level (Number)

Number: Name level, posisi 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: tetap tersimpan saat listrik padam

Number: Value, Unit, Min, Max, Remember value dalam kotak merah

LANGKAH 9

Mengubah dengan tombol papan

Keys (buttons): Key + UP, Key − DOWN, Step 5. Ditahan, nilainya terus berubah.

Key + UP, Key − DOWN, Step 5 dalam kotak merah

LANGKAH 10

Bar level

Bar: Name level_bar, posisi 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, bar segmen hijau — Sejauh ini: judul, angka, bar.

LANGKAH 11

Pesan tersembunyi

Label: Name full_msg, Text TANK FULL, posisi 10, 120, 300, 20, Hidden ✓.

Satu lagi di tempat yang sama: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Widget tersembunyi tampil bertitik-titik di preview; di display tidak tampil di awal.

Label: Text TANK FULL, Hidden dalam kotak merah

LANGKAH 12

Actions: 5 aksi pada angka

Klik level di preview. Actions (no code) → + Add action 5 kali:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ menghapus satu baris.

LANGKAH 13

Tombol pengaturan

Button: Name btn_settings, posisi 10, 200, 145, 34, Caption MENU: Settings.

LANGKAH 14

Ganti page saat tombol ditekan

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: MENU di papan melakukan hal yang sama.

LANGKAH 15

Page pengaturan: tombol Back, QR

settings di Pages. Rectangle dan Label "SETTINGS" seperti langkah 6 dan 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = situs web Anda, Border shape = Rounded.

QR: Text / link, Border shape dalam kotak merah

Page pengaturan: SETTINGS, QR membulat, START: Back — Page pengaturan selesai.

LANGKAH 16

Simpan

Save: berkas .pixpio. Selama "Unsaved changes" tampil, belum tersimpan. Selanjutnya sambungkan papan dan lakukan Flash (bab 5).

5

Menyambung papan, Flash

LANGKAH 1

Kabel USB-serial

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Hanya jika papan tidak punya catu daya sendiri

LANGKAH 2

Connect

Di Device: port COM, baud 115200, Connect. Titik hijau = tersambung. Port tidak muncul? ↻.

LANGKAH 3

⚡ Flash to display

⚡ Flash to display di toolbar.
Desain diubah menjadi firmware dan dikirim lewat kabel; jendela menampilkan kemajuannya. Pertama kali 1–2 menit.
Saat "UPLOAD SUCCESSFUL" muncul, display mulai dengan layar baru.
Gambar dan bahasa lain (model NOR) masuk ke NOR lewat kabel yang sama.

Tidak perlu kartu SD. Untuk setiap perubahan: ubah di Editor, lalu Flash.

Desain tutorial di display: ubah level dengan UP / DOWN, naikkan ke 100 untuk melihat "TANK FULL", tekan MENU untuk page pengaturan.

6

Mengontrol display dari PC

Setelah tersambung, Anda bisa mencoba setiap widget dari PC tanpa MCU host. Tiga cara:

1. Perintah cepat (panel Device)

Page + Show: membuka page itu di display.
Pilih Widget, ketik Value, Set value: angka, bar, LED, sakelar… berubah.
text + Set text: mengubah teks Changeable.
Hide / Show: sembunyikan / tampilkan widget.
Key + Press: seolah tombol papan (MENU, UP…) ditekan.

2. Commands for this widget

Untuk widget apa pun yang dipilih, bagian paling bawah propertinya berisi Commands for this widget. Untuk tiap perintah:

Send: langsung dikirim dari PC ke display (harus tersambung).
Copy: kode untuk ditempel ke program host (pd_set_value(&disp, W_NUMBER, 253);).
Byte hijau: frame yang dikirim sendiri lewat UART / I2C / SPI (jika memprogram dengan bahasa lain).

Perintah ikut berubah saat pengaturan diubah. Perintah tiap widget ada di bab 7.

Perintah widget Number; Copy dan Send di tiap perintah

3. Mirror, Touch

Mirror ✓: apa yang terjadi di display (tombol ditekan, nilai berubah) juga tampil langsung di preview.
☝ Touch: klik di preview sama dengan menyentuh display dengan jari (kursor 👆, titik kuning).
🔧 Self-test, ⬆ Storage: bab 15, 12.

Mirror, Storage, Self-test, Touch dalam kotak merah

7

Setiap widget

Untuk tiap widget: kegunaan, cara memakai, arti nilainya, kode host. Tiga gambar: Di display (widget di proyek New), Pengaturan, Commands (Send dari PC / Copy kode). Namanya sama dengan daftar Add widget.

Rectangle

Bar judul, latar, kartu. Bisa diletakkan di belakang widget lain.

Cara memakai

Colours: Background (isi), warna Text / border.
Corner radius: sudut membulat. Border: garis tepi.
Makin bawah di daftar widget = makin di belakang (ubah urutan dengan ↑ ↓).

Nilai

—

Kode host (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // merah
disp.hide(W_HEADER);

Rectangle: Commands: Send dari PC, Copy kode — Commands: Send dari PC, Copy kode

Label

Teks tetap: judul, keterangan, satuan.

Cara memakai

Tulis di Text. Font, Size, Align.
Language: bahasa lain (bab 9).
Dengan Changeable ✓ host bisa mengubah teks.
No background: yang di bawahnya terlihat.

Nilai

—

Kode host (Arduino)

disp.setText(W_LABEL, "Motor NYALA");   // perlu Changeable ✓

Label: Commands: Send dari PC, Copy kode — Commands: Send dari PC, Copy kode

Number

Menampilkan angka: suhu, kecepatan, hitungan, setpoint.

Cara memakai

Value (awal), Min, Max.
Decimals 1 menampilkan 253 sebagai 25.3. Unit: °C, %, V.
Keys: diubah dengan UP / DOWN sebesar Step.
Remember value: tersimpan saat listrik padam.

Nilai

Angka (Min…Max)

Kode host (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send dari PC, Copy kode — Commands: Send dari PC, Copy kode

Bar

Level, kemajuan, tangki, baterai.

Cara memakai

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Pada model sentuh bisa digeser dengan jari (slider).
Controls brightness: bar ini mengatur lampu latar.

Nilai

Min…Max

Kode host (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send dari PC, Copy kode — Commands: Send dari PC, Copy kode

Button

Tombol untuk ditekan: ganti page, mulai / berhenti.

Cara memakai

Caption: teksnya. Style: normal, outline, pill, checkbox.
Mode: push (hanya saat ditekan) / toggle (nyala-mati).
Key: tombol papan (MENU…) juga menekannya.
Actions: Pressed → Go to page, Set value…

Nilai

Toggle: 0 / 1

Kode host (Arduino)

disp.onKey(myKey);             // tombol papan
disp.onChange(myChange);       // nilai toggle

Keyboard

Keyboard QWERTY di layar: nama, kata sandi Wi-Fi.

Cara memakai

Types into: sebuah Input box.
Language: bahasa India yang diketik dengan huruf Latin (bab 9).
Menyentuh Input box juga bisa membuka keyboard (Keyboard on tap).

Nilai

Kode karakter (8 = hapus, 13 = OK)

Kode host (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send dari PC, Copy kode — Commands: Send dari PC, Copy kode

Input box

Kotak tempat keypad / keyboard menulis.

Cara memakai

Placeholder, Max length.
Kind: text, number, password (tampil *), Indian language (diketik dengan huruf Latin, tampil dalam aksara India; bab 9).

Nilai

Jenis Number: angka, saat OK ditekan

Kode host (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: Send dari PC, Copy kode — Commands: Send dari PC, Copy kode

8

Actions: daftar lengkap

Hal yang dilakukan display sendiri saat sesuatu terjadi pada widget. Tanpa host. Contoh: langkah tutorial 12, 14.

When (kapan)	Widget mana
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Widget yang sama

Do (apa)	Target / nilai
Go to page	Sebuah page
Set value of	widget, nilai
Add to / Subtract from	widget, berapa
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Model dengan buzzer
Brightness (%)	Model dengan pengatur kecerahan

9

Bahasa

Letakkan Message di sebuah page (Label, Text, dan Button sama caranya).

Language: Français · Deutsch · Español …, Русский, Ελληνικά, atau bahasa-bahasa India. (Bahasa Indonesia memakai huruf Latin biasa, jadi tidak perlu Language.)
Kalimat di Phrases (beberapa: pisahkan dengan |).
Live text ✓: host bisa mengirim kalimat apa pun dalam UTF-8. Saat dicentang, kolom menjadi "Message" dan "Changeable" ikut dicentang.

Live text dalam bahasa selain Inggris butuh model NOR (4, 8, 16). Font sudah ada di NOR dari pabrik.

Language, Message, Changeable dalam kotak merah

Mengetik bahasa India dengan keyboard

Keyboard di layar bisa menulis bahasa Malayalam, Hindi, Marathi, Tamil, Gujarati, Punjabi, dan Bengali: Anda menekan huruf Latin, kotak menampilkannya dalam aksara bahasa itu (namaste → नमस्ते), seperti mengetik fonetik di ponsel.

Tambahkan Keyboard.
Language: pilih bahasanya.

Jika keyboard belum menulis ke Input box mana pun ("Types into" = None), memilih bahasa akan menambahkan Input box di atas keyboard dan keyboard menulis ke situ.

Pengaturan Keyboard: Language dalam kotak merah

Input box ditambahkan di atas keyboard — Setelah memilih bahasa: Input box di atas keyboard, "Types into" = kotak itu.

Bahasa adalah pengaturan Input box itu; bisa juga diubah dengan memilih kotaknya:

Kind: Indian language (typed in English).
Language: bahasa.
Letter size: 16, 20, 24 px.
Aturan mengetik bahasa itu tampil di bawahnya.

Max length paling banyak 24 huruf Latin. "Show typed text" hanya perlu jika keyboard menutupi kotak (keyboard pop-up). Jika kotak terlihat di atas keyboard, hilangkan centangnya, kalau tidak teks yang sama muncul di dua kotak.

Pengaturan Input box: Kind, Language, Letter size dalam kotak merah

Kotak yang diketik dalam tujuh bahasa — Di display: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Butuh model NOR (4T, 8T, 16T…). Saat host membaca kotak (readText), yang diterima adalah huruf Latin yang diketik.

10

Dari MCU host (Arduino / C)

Toolbar Export ▾:

Download pixpio_ui.h: nama untuk setiap widget dan page (W_LEVEL, PAGE_SETTINGS…). Tambahkan ke program host.
Write to project folder…: firmware dan header host sekaligus.
NOR data file: hanya untuk programmer chip.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Dipanggil saat operator mengubah level dengan UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // TX host → RC7 papan, RX host ← RC6 papan
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // sampai display siap (maks. 5 detik)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // tampilkan nilai sensor
  disp.loop();                           // pesan dari display
  delay(200);
}

Fungsi	Kegunaan
setValue(id, v)	Nilai angka, bar, LED, sakelar…
setText(id, "…")	Teks Changeable (UTF-8 untuk Live text)
page(PAGE_…)	Ganti page
show(id) / hide(id)	Tampilkan / sembunyikan widget
setColor(id, c) / setBackground(id, c)	Warna (RGB565)
getValue(id) / readText(id, buf, n)	Baca nilai / teks dari display
brightness(%) / beep(ms)	Lampu latar, buzzer
onChange / onKey / onPage / onReboot	Nilai berubah, tombol papan, page berganti, display dinyalakan ulang
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Contoh Arduino: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (dengan PLC)

Klik sebuah page di daftar Pages, lalu Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: sama dengan di PLC.
📋 Register table (CSV): daftar semua register; buka di Excel untuk programmer PLC.
Atur baud panel Device ke baud Modbus lalu Flash.

Saat widget dipilih, register-nya tampil di bawah Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table dalam kotak merah

Register	Alamat	Arti
Holding (4x)	0 … N-1	Nilai widget (urutan di daftar widget). Ditulis = tampil di display.
Holding	1000	Page; tulis ID page untuk membukanya
Holding	1001 / 1002	Kecerahan 0–100 % / bip (ms)
Coil (0x)	0 … N-1	Tampilkan (1) / sembunyikan (0)
Discrete input (1x)	0 … N-1	Tombol ditekan (terhapus saat dibaca)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: ditekan / ditahan
Input (3x)	0 … N-1, 1000–1002	Nilai (baca saja), page, jumlah widget, versi

Fungsi 01, 02, 03, 04, 05, 06, 08, 15, 16. Nilai 16 bit bertanda. Menambah atau menghapus widget mengubah alamat; berikan CSV baru ke PLC.

Pengkabelan RS-485

Modul MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B PLC (atau USB-RS485)

Flash memerlukan kabel USB-serial (TTL). Jangan menyambung TXD USB-serial dan RO MAX485 bersama-sama langsung ke RC7: pakai jumper, atau resistor 1 kΩ di TXD dan pull-up 10 kΩ di RB4.

Uji dari PC tanpa PLC

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in di Storage · whole project:

MCU flash: font Inggris, gambar kecil. Model Lite.
SPI NOR flash: gambar besar, animasi, bahasa lain. Model 4 / 8 / 16 (diatur otomatis saat memilih Board model).

Pustaka font sudah ada di NOR dari pabrik. Saat Flash hanya gambar desain yang dikirim.

13

Widget list, Problems

14

Papan, pin

Bagian	Pin PIC	Catatan
Host UART TX / RX	RC6 / RC7	115200 8N1 (untuk Modbus: baud dari Editor)
Host I2C SCL / SDA	RC3 / RC4	Alamat 0x3C, pull-up 4.7 kΩ
BUSY	RB4	HIGH = sedang menggambar. Untuk Modbus: DE/RE RS-485.
INT	RC0	LOW = ada pesan untuk host (I2C / SPI)
Tombol MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Tombol tekan (ke GND) atau TTP223
CS panel sentuh	RA0	Model T (XPT2046)
CS NOR flash	RA5	Model 4 / 8 / 16
PWM lampu latar, buzzer	RA6, RA7	Pada model yang memilikinya
LED status	RB5	Berkedip tiap 0.5 detik saat berjalan

Pengaturan display: langkah tutorial 3. Lakukan Flash setelah setiap perubahan.

15

Self-test

Setelah tersambung, 🔧 Self-test di panel Device. Berjalan apa pun desain yang terpasang.

Warna: garis merah, hijau, biru, putih, hitam, dan abu-abu, dengan kotak kuning di kiri atas. Jika kotak di sudut lain, perbaiki Orientation / Mirror. START atau sentuh: berikutnya.
Tombol, sentuh: tekan keempat tombol; tiap kotak menjadi hijau. Dengan sentuh, muncul titik. Jika ada tombol yang tidak berfungsi, START dua kali.
Komponen: NOR, pustaka font, EEPROM: PASS / FAIL. Uji buzzer dan lampu latar. START: kembali ke layar normal.

16

Mengatasi masalah

Masalah	Yang dilakukan
Display putih semua	Periksa kabel DC, CS, RST display dan catu 3.3 V.
Terbalik seperti cermin / terbalik	Display, Mirror, Orientation (langkah tutorial 3). Kotak kuning self-test harus di kiri atas.
Warna salah	Merah tampil biru: Swap red/blue. Putih tampil hitam: Invert colours.
Tombol selalu tertekan	"Buttons on the board": tombol tekan = "Push buttons to GND", pad sentuh = "TTP223".
Sentuhan meleset	Touch calibration → Calibrate…: sentuh keempat tanda + di display satu per satu.
Flash gagal / port sibuk	Putuskan sambungan lalu Flash. "Waiting for bootloader": matikan dan nyalakan papan.
Tidak tersambung	TX / RX tertukar? (TXD adaptor → RC7). Baud 115200 (pada desain Modbus, baud Modbus).
Teks tampil "????"	Perbaiki Language widget. Live text bahasa lain butuh model NOR.
Modbus tidak menjawab	Alamat, baud, paritas sama? Tukar A / B. Setelah ganti page, timeout PLC 3 detik.
Error di Problems	Klik error lalu perbaiki widget itu. Jika ada error, Flash tidak dijalankan.

PixPIO 2.8" smart display · Hướng dẫn sử dụng

Hướng dẫn sử dụng PixPIO

Thiết kế màn hình, gửi xuống màn hình chỉ với một cú nhấp. Dùng được từ mọi vi điều khiển (Arduino, PIC, STM32…), từ PLC qua Modbus hoặc trực tiếp từ PC. Cũng có thể tự chạy chỉ với nguồn điện.

Các khung đỏ trong ảnh chụp là cài đặt / nút dùng ở bước đó.

Một thiết kế giống bài hướng dẫn trên màn hình: không có máy chủ, chỉ dùng Actions.

1

PixPIO là gì

PixPIO là bo màn hình màu 2.8 inch (320×240) có bộ xử lý riêng (PIC18F27Q84). Màn hình, nút, thanh, đồng hồ đo và hình ảnh được thiết kế trên PC bằng PixPIO Editor, và màn hình tự vẽ chúng. Máy chủ (MCU hoặc PLC) chỉ cần gửi tin nhắn ngắn như "level = 80".

LiteKhông NOR, không cảm ứng. Phông tiếng Anh.

4 / 4TNOR 4 MB (mọi phông và ngôn ngữ). T = cảm ứng.

8 / 8TNOR 8 MB. Nhiều hình ảnh, hoạt ảnh hơn.

16 / 16TNOR 16 MB. Ảnh lớn, nhiều ngôn ngữ.

Bo mạch có 4 nút: MENU UP DOWN START (nút nhấn hoặc miếng cảm ứng TTP223). Một số mẫu có thêm điều chỉnh độ sáng và còi.

Vì sao chọn PixPIO

Sửa trực tiếpCắm USB: mọi thay đổi trong Editor hiện ngay trên màn hình. Không cần thẻ SD, không chờ nạp lâu.

30 widget có sẵnĐồng hồ, biểu đồ, bàn phím, mã QR, hoạt ảnh: kéo, thả, xong.

Mọi hostUART, I2C hoặc SPI. Đã thử với PIC, Arduino, ESP32, STM32. Hoặc không cần host.

Ngôn ngữ của bạnNhiều ngôn ngữ trên màn hình, gõ theo âm cho các tiếng Ấn Độ.

Công cụ miễn phíPixPIO Editor và PICPIO cho VS Code đều miễn phí.

2

Cài đặt

Cài Visual Studio Code (Windows, miễn phí).
Trong VS Code, tiện ích PICPIO: Extensions → "…" → Install from VSIX… → tệp picpio-x.y.z.vsix đi kèm bo mạch.
Khởi động lại VS Code. Trong menu PICPIO (hoặc Ctrl+Shift+P → "PixPIO") chọn PixPIO. Editor mở trong trình duyệt.
Cắm cáp USB-serial (CH340) vào PC. Trong Device Manager → Ports phải thấy dòng như USB-SERIAL CH340 (COM3).

Editor không cần internet. Nó liên lạc với màn hình qua một "bridge" do VS Code chạy, vì vậy hãy để VS Code mở khi dùng Editor.

3

Giới thiệu Editor

Lần đầu mở, Editor hiển thị một dự án mẫu (nút Example trên thanh công cụ luôn mở lại nó; 8 page, gần như mọi widget).

PixPIO Editor: thanh công cụ, pages, add widget, preview, properties, problems, device — PixPIO Editor với dự án mẫu.

Phần	Vị trí	Chức năng
Toolbar	Trên cùng	New, Open, Example, Save, Export, ⚡ Flash to display, Undo / Redo, phóng to, Grid, Snap, ☰ Widgets
Pages	Trên bên trái	Các màn hình. + page mới, ⧉ sao chép, − xóa. "start" = page hiện đầu tiên.
Add widget	Bên trái	Nhấp vào là widget được thêm lên màn hình.
Preview	Ở giữa	Giống như màn hình sẽ hiển thị. Kéo để di chuyển; kéo các ô vuông xanh để đổi kích thước.
Properties	Bên phải	Cài đặt của widget đang chọn. Nhấp vào page trong danh sách để xem cài đặt của page và cả dự án. ? = giải thích từng cài đặt.
Problems	Dưới bên trái	Lỗi và cảnh báo của thiết kế.
Device	Dưới bên phải	Cổng COM, Connect, Mirror, Storage, Self-test, Touch, lệnh từ PC (chương 6).

Phím tắt: ←→↑↓ 1 px (Shift 10 px), Ctrl+D sao chép, Del xóa, Ctrl+Z / Y hoàn tác / làm lại.

4

Hướng dẫn: Water Tank (từ đầu)

Một màn hình 2 page hiển thị mức nước trong bồn. UP / DOWN đổi mức nước, thanh thay đổi theo. Ở 100 hiện "TANK FULL", ở 0 hiện "TANK EMPTY". MENU mở page cài đặt. Không cần máy chủ. Khoảng 15 phút.

BƯỚC 1

Dự án mới

New trên thanh công cụ. Bạn có một màn hình trống (page "main").

BƯỚC 2

Board model

Bên phải, trong Screen · whole project, đặt Board model theo mẫu ghi trên nhãn bo mạch (ở đây là PixPIO 4T).

Việc này tự cài đặt màn hình, cảm ứng, nút, độ sáng, còi và NOR. Editor sẽ ghi nhớ.

BƯỚC 3

Display (chỉ khi cần)

Chỉ khi hình bị xoay hoặc màu sai:

Display: mô-đun (các loại ILI9341)
Buttons on the board: nút nhấn / TTP223 / không có
Swap red/blue, Mirror, Orientation

Display, Buttons, Swap red/blue, Mirror, Orientation trong khung đỏ

BƯỚC 4

Đặt tên page

Trên bên phải, Name: home. Trong mã máy chủ là PAGE_HOME.

BƯỚC 5

Page thứ hai

Nút + ở Pages. Đặt tên page mới là settings. Rồi nhấp home trong danh sách để quay lại.

Pages: home start, settings; + trong khung đỏ

BƯỚC 6

Thanh trên cùng (Rectangle)

Rectangle trong Add widget. x, y, width, height: 0, 0, 320, 30 (hoặc kéo bằng chuột). Màu ở Colours.

Đã thêm Rectangle; nút Rectangle và x y width height trong khung đỏ

BƯỚC 7

Tiêu đề (Label)

Label: Name title, Text WATER TANK, vị trí 8, 7, 304, 16. Font, Size, Align ở phần Text.

Label: Name title, Text WATER TANK trong khung đỏ

BƯỚC 8

Mức nước (Number)

Number: Name level, vị trí 10, 64, 120, 50.

Value 50, Unit %
Min 0, Max 100
Remember value ✓: vẫn giữ khi mất điện

Number: Value, Unit, Min, Max, Remember value trong khung đỏ

BƯỚC 9

Đổi bằng nút trên bo mạch

Keys (buttons): Key + UP, Key − DOWN, Step 5. Giữ nút thì giá trị đổi liên tục.

Key + UP, Key − DOWN, Step 5 trong khung đỏ

BƯỚC 10

Thanh mức nước

Bar: Name level_bar, vị trí 140, 64, 170, 50, Min 0, Max 100, Style: Segments.

Preview: WATER TANK, 50%, thanh phân đoạn xanh lá — Đến giờ: tiêu đề, số, thanh.

BƯỚC 11

Thông báo ẩn

Label: Name full_msg, Text TANK FULL, vị trí 10, 120, 300, 20, Hidden ✓.

Thêm một cái ở cùng chỗ: Name empty_msg, Text TANK EMPTY, Hidden ✓.

Widget ẩn hiện bằng nét chấm trong preview; trên màn hình ban đầu không hiện.

Label: Text TANK FULL, Hidden trong khung đỏ

BƯỚC 12

Actions: 5 hành động cho số

Nhấp level trong preview. Actions (no code) → + Add action 5 lần:

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ xóa một dòng.

BƯỚC 13

Nút cài đặt

Button: Name btn_settings, vị trí 10, 200, 145, 34, Caption MENU: Settings.

BƯỚC 14

Chuyển page khi nhấn nút

+ Add action: Pressed → Go to page → 0x02 · settings. Key: MENU: nút MENU trên bo mạch cũng làm như vậy.

BƯỚC 15

Page cài đặt: nút Back, QR

settings trong Pages. Một Rectangle và Label "SETTINGS" như bước 6 và 7.

Button: Caption START: Back, Key START, Action Pressed → Go to page → 0x01 · home.

QR code: Text / link = trang web của bạn, Border shape = Rounded.

QR: Text / link, Border shape trong khung đỏ

Page cài đặt: SETTINGS, QR bo góc, START: Back — Page cài đặt hoàn tất.

BƯỚC 16

Lưu

Save: một tệp .pixpio. Khi còn hiện "Unsaved changes" thì chưa lưu. Tiếp theo nối bo mạch và Flash (chương 5).

5

Nối bo mạch, Flash

BƯỚC 1

Cáp USB-serial

USB-serial (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	Chỉ khi bo mạch không có nguồn riêng

BƯỚC 2

Connect

Trong Device: cổng COM, baud 115200, Connect. Chấm xanh = đã kết nối. Không thấy cổng? ↻.

BƯỚC 3

⚡ Flash to display

⚡ Flash to display trên thanh công cụ.
Thiết kế được biến thành firmware và gửi qua cáp; một cửa sổ hiện tiến độ. Lần đầu mất 1–2 phút.
Khi hiện "UPLOAD SUCCESSFUL", màn hình khởi động với giao diện mới.
Hình ảnh và ngôn ngữ khác (mẫu NOR) được ghi vào NOR qua cùng cáp.

Không cần thẻ SD. Mỗi lần thay đổi: sửa trong Editor rồi Flash.

Thiết kế hướng dẫn trên màn hình: đổi mức nước bằng UP / DOWN, đưa lên 100 để thấy "TANK FULL", nhấn MENU để mở page cài đặt.

6

Điều khiển màn hình từ PC

Sau khi kết nối, bạn có thể thử từng widget từ PC mà không cần MCU chủ. Có ba cách:

1. Lệnh nhanh (bảng Device)

Page + Show: mở page đó trên màn hình.
Chọn Widget, nhập Value, Set value: số, thanh, LED, công tắc… thay đổi.
text + Set text: đổi văn bản Changeable.
Hide / Show: ẩn / hiện widget.
Key + Press: như thể nhấn nút trên bo mạch (MENU, UP…).

2. Commands for this widget

Với bất kỳ widget nào đang chọn, cuối phần thuộc tính có Commands for this widget. Mỗi lệnh có:

Send: gửi ngay từ PC xuống màn hình (phải đang kết nối).
Copy: đoạn mã để dán vào chương trình máy chủ (pd_set_value(&disp, W_NUMBER, 253);).
Các byte màu xanh: khung dữ liệu tự gửi qua UART / I2C / SPI (khi lập trình bằng ngôn ngữ khác).

Lệnh thay đổi theo cài đặt. Lệnh của từng widget ở chương 7.

Lệnh của widget Number; mỗi lệnh có Copy và Send

3. Mirror, Touch

Mirror ✓: những gì xảy ra trên màn hình (nhấn nút, đổi giá trị) cũng hiện trực tiếp trong preview.
☝ Touch: nhấp chuột vào preview giống như chạm ngón tay vào màn hình (con trỏ 👆, chấm vàng).
🔧 Self-test, ⬆ Storage: chương 15, 12.

Mirror, Storage, Self-test, Touch trong khung đỏ

7

Từng widget

Với mỗi widget: dùng để làm gì, cách dùng, giá trị là gì, mã máy chủ. Ba hình: Trên màn hình (widget trong dự án New), Cài đặt, Commands (Send từ PC / Copy mã). Tên giống trong danh sách Add widget.

Rectangle

Thanh tiêu đề, nền, thẻ. Có thể đặt phía sau widget khác.

Cách dùng

Colours: Background (tô nền), màu Text / border.
Corner radius: bo góc. Border: viền.
Càng ở dưới trong danh sách widget thì càng ở phía sau (đổi thứ tự bằng ↑ ↓).

Giá trị

—

Mã host (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // đỏ
disp.hide(W_HEADER);

Rectangle: Trên màn hình — Trên màn hình

Rectangle: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Label

Chữ cố định: tiêu đề, nhãn, đơn vị.

Cách dùng

Viết trong Text. Font, Size, Align.
Language: ngôn ngữ khác (chương 9).
Với Changeable ✓ máy chủ có thể đổi chữ.
No background: thấy được phần bên dưới.

Giá trị

—

Mã host (Arduino)

disp.setText(W_LABEL, "Motor ON");   // cần Changeable ✓

Label: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Number

Hiển thị số: nhiệt độ, tốc độ, bộ đếm, giá trị đặt.

Cách dùng

Value (ban đầu), Min, Max.
Decimals 1 hiển thị 253 thành 25.3. Unit: °C, %, V.
Keys: đổi bằng UP / DOWN theo Step.
Remember value: vẫn giữ khi mất điện.

Giá trị

Số (Min…Max)

Mã host (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Bar

Mức, tiến độ, bồn, pin.

Cách dùng

Min, Max, Value.
Style: Classic, Rounded, Segments (Blocks), Level meter, Slider, Battery.
Ở mẫu cảm ứng có thể kéo bằng ngón tay (slider).
Controls brightness: thanh này điều khiển đèn nền.

Giá trị

Min…Max

Mã host (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Button

Nút để nhấn: chuyển page, chạy / dừng.

Cách dùng

Caption: chữ trên nút. Style: normal, outline, pill, checkbox.
Mode: push (chỉ khi đang nhấn) / toggle (bật-tắt).
Key: nút trên bo mạch (MENU…) cũng nhấn nó.
Actions: Pressed → Go to page, Set value…

Giá trị

Toggle: 0 / 1

Mã host (Arduino)

disp.onKey(myKey);             // nút bo mạch
disp.onChange(myChange);       // giá trị toggle

Switch

Công tắc BẬT / TẮT: quạt, đèn, chế độ.

Cách dùng

Switched on: trạng thái ban đầu.
Key: nút trên bo mạch bật / tắt nó. Chạm cũng được.
Remember value.

Giá trị

0 / 1

Mã host (Arduino)

disp.setValue(W_SWITCH, 1);
// khi người vận hành bật/tắt: onChange(W_SWITCH, 0/1)

Switch: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Select

Danh sách thả xuống: chọn một trong nhiều mục.

Cách dùng

Options: Low|Medium|High (ngăn bằng |).
Selected: mục ban đầu.
Keys: mở / OK, lên, xuống. Chạm để mở danh sách.

Giá trị

0, 1, 2… (thứ tự mục)

Mã host (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Keypad

Phím số: PIN, giá trị đặt.

Cách dùng

Keys: 1|2|3|…|OK. Columns.
Types into: ghi vào một Input box.
Keys move / press: dùng được cả với nút bo mạch.

Giá trị

Thứ tự phím được nhấn

Mã host (Arduino)

disp.onChange(myChange);   // mỗi lần nhấn phím

Keypad: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Keyboard

Bàn phím QWERTY trên màn hình: tên, mật khẩu Wi-Fi.

Cách dùng

Types into: một Input box.
Language: các ngôn ngữ Ấn Độ gõ bằng chữ Latin (chương 9).
Chạm vào Input box cũng có thể mở bàn phím (Keyboard on tap).

Giá trị

Mã ký tự (8 = xóa lùi, 13 = OK)

Mã host (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Input box

Ô mà keypad / bàn phím ghi vào.

Cách dùng

Placeholder, Max length.
Kind: text, number, password (hiện *), Indian language (gõ chữ Latin, hiện bằng chữ Ấn Độ; chương 9).

Giá trị

Loại Number: số, khi nhấn OK

Mã host (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Trên màn hình — Trên màn hình

Input box: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

Roller (picker)

Bộ chọn cuộn: chương trình, chế độ.

Cách dùng

Options: Off|Low|Medium|High. Rows shown: 3, 5, 7.
Keys tiếp / trước. Với cảm ứng: chạm dòng trên hoặc dưới.
Remember value.

Giá trị

Dòng được chọn (0, 1, 2…)

Mã host (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Trên màn hình — Trên màn hình

Roller (picker): Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

QR code

Để điện thoại quét: trang web, Wi-Fi, số điện thoại, liên kết hướng dẫn.

Cách dùng

Text / link: https://…, WIFI:T:WPA;S:tên;P:mật khẩu;;, tel:….
Border shape, No background.
Ô càng lớn càng dễ quét.

Giá trị

—

Mã host (Arduino)

disp.show(W_QR);

QR code: Commands: Send từ PC, Copy mã — Commands: Send từ PC, Copy mã

8

Actions: danh sách đầy đủ

Những gì màn hình tự làm khi có chuyện xảy ra với một widget. Không cần máy chủ. Ví dụ: bước 12, 14 của hướng dẫn.

When (khi nào)	Widget nào
Pressed	Button
Changed	Number, bar, arc, switch, select, roller, spinbox, popup…
Becomes… N	Các widget trên

Do (làm gì)	Đích / giá trị
Go to page	Một page
Set value of	widget, giá trị
Add to / Subtract from	widget, bao nhiêu
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	Mẫu có còi
Brightness (%)	Mẫu có điều chỉnh độ sáng

9

Ngôn ngữ

Đặt một Message lên page (Label, Text và Button cũng vậy).

Language: Français · Deutsch · Español …, Русский, Ελληνικά hoặc các ngôn ngữ Ấn Độ.
Câu trong Phrases (nhiều câu: ngăn cách bằng |).
Live text ✓: máy chủ có thể gửi bất kỳ câu nào dạng UTF-8. Khi đánh dấu, ô chuyển thành "Message" và "Changeable" được đánh dấu.

Văn bản trực tiếp không phải tiếng Anh cần mẫu NOR (4, 8, 16). Phông có sẵn trong NOR từ nhà máy. Để hiển thị tiếng Việt, chọn Language = Other (any script) và viết câu trong Phrases (văn bản cố định); văn bản tiếng Việt trực tiếp đang được phát triển.

Language, Message, Changeable trong khung đỏ

Gõ ngôn ngữ Ấn Độ bằng bàn phím

Bàn phím trên màn hình có thể viết tiếng Malayalam, Hindi, Marathi, Tamil, Gujarati, Punjabi và Bengali: bạn nhấn chữ Latin, ô hiển thị bằng chữ viết của ngôn ngữ đó (namaste → नमस्ते), giống cách gõ Telex trên điện thoại.

Thêm một Keyboard.
Language: chọn ngôn ngữ.

Nếu bàn phím chưa ghi vào Input box nào ("Types into" = None), chọn ngôn ngữ sẽ thêm một Input box phía trên bàn phím và bàn phím ghi vào đó.

Cài đặt Keyboard: Language trong khung đỏ

Input box được thêm phía trên bàn phím — Sau khi chọn ngôn ngữ: Input box phía trên bàn phím, "Types into" = ô đó.

Ngôn ngữ là cài đặt của Input box đó; cũng có thể đổi bằng cách chọn ô:

Kind: Indian language (typed in English).
Language: ngôn ngữ.
Letter size: 16, 20, 24 px.
Quy tắc gõ của ngôn ngữ đó hiện bên dưới.

Max length tối đa 24 chữ Latin. "Show typed text" chỉ cần khi bàn phím che ô (bàn phím bật lên). Nếu ô hiện phía trên bàn phím, hãy bỏ đánh dấu, nếu không cùng một nội dung sẽ hiện ở hai ô.

Cài đặt Input box: Kind, Language, Letter size trong khung đỏ

Các ô gõ bằng bảy ngôn ngữ — Trên màn hình: santhOsham, namaste dhanyavAd, marAThI bhAShA, vaNakkam thamizh, kem chho gujarAtI, sat srI akAl punjAbI, ami bangla bhalO.

Cần mẫu NOR (4T, 8T, 16T…). Khi máy chủ đọc ô (readText), nó nhận các chữ Latin đã gõ.

10

Từ MCU chủ (Arduino / C)

Thanh công cụ Export ▾:

Download pixpio_ui.h: tên cho từng widget và page (W_LEVEL, PAGE_SETTINGS…). Thêm vào chương trình máy chủ.
Write to project folder…: firmware và tệp header máy chủ cùng lúc.
NOR data file: chỉ dành cho máy nạp chip.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Được gọi khi người vận hành đổi mức nước bằng UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // TX máy chủ → RC7 bo mạch, RX máy chủ ← RC6 bo mạch
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // đợi màn hình sẵn sàng (tối đa 5 giây)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // hiển thị giá trị cảm biến
  disp.loop();                           // tin nhắn từ màn hình
  delay(200);
}

Hàm	Chức năng
setValue(id, v)	Giá trị của số, thanh, LED, công tắc…
setText(id, "…")	Văn bản Changeable (UTF-8 cho Live text)
page(PAGE_…)	Chuyển page
show(id) / hide(id)	Hiện / ẩn widget
setColor(id, c) / setBackground(id, c)	Màu (RGB565)
getValue(id) / readText(id, buf, n)	Đọc giá trị / văn bản từ màn hình
brightness(%) / beep(ms)	Đèn nền, còi
onChange / onKey / onPage / onReboot	Giá trị đổi, nút bo mạch, page đổi, màn hình khởi động lại
beginSerial / beginI2C / beginSPI	UART, I2C (0x3C), SPI

Ví dụ Arduino: uart_basic, i2c_basic, spi_basic, showcase_uart (Arduino IDE → File → Examples → PixPIO).

11

Modbus RTU (với PLC)

Nhấp một page trong danh sách Pages, rồi Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247), Baud, Parity: đặt giống trong PLC.
📋 Register table (CSV): danh sách mọi thanh ghi; mở bằng Excel cho người lập trình PLC.
Đặt baud của bảng Device bằng baud Modbus rồi Flash.

Khi chọn widget, các thanh ghi của nó hiện dưới Name: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave, Slave address, Baud, Parity, Register table trong khung đỏ

Thanh ghi	Địa chỉ	Ý nghĩa
Holding (4x)	0 … N-1	Giá trị widget (thứ tự trong danh sách widget). Ghi vào sẽ hiện trên màn hình.
Holding	1000	Page; ghi ID page để mở page đó
Holding	1001 / 1002	Độ sáng 0–100 % / tiếng bíp (ms)
Coil (0x)	0 … N-1	Hiện (1) / ẩn (0)
Discrete input (1x)	0 … N-1	Nút đã được nhấn (xóa khi đọc)
Discrete input	1000–1003 / 1100–1103	MENU, UP, DOWN, START: đã nhấn / đang giữ
Input (3x)	0 … N-1, 1000–1002	Giá trị (chỉ đọc), page, số widget, phiên bản

Hàm 01, 02, 03, 04, 05, 06, 08, 15, 16. Giá trị 16 bit có dấu. Thêm hoặc xóa widget sẽ đổi địa chỉ; hãy đưa CSV mới cho PLC.

Đấu dây RS-485

Mô-đun MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B của PLC (hoặc USB-RS485)

Flash cần cáp USB-serial (TTL). Không nối trực tiếp TXD của USB-serial và RO của MAX485 cùng lúc vào RC7: dùng jumper, hoặc điện trở 1 kΩ ở TXD và điện trở kéo lên 10 kΩ ở RB4.

Thử từ PC không cần PLC

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in trong Storage · whole project:

MCU flash: phông tiếng Anh, ảnh nhỏ. Mẫu Lite.
SPI NOR flash: ảnh lớn, hoạt ảnh, ngôn ngữ khác. Mẫu 4 / 8 / 16 (tự đặt khi chọn Board model).

Thư viện phông có sẵn trong NOR từ nhà máy. Khi Flash chỉ gửi hình ảnh của thiết kế.

13

Widget list, Problems

Hộp thoại Widgets on this page — **☰ Widgets**: mọi widget trên page này. Nhấp tên để chọn. Muốn chọn cái bên dưới, bỏ đánh dấu cái bên trên.

14

Bo mạch, chân

Phần	Chân PIC	Ghi chú
Host UART TX / RX	RC6 / RC7	115200 8N1 (với Modbus: baud đặt trong Editor)
Host I2C SCL / SDA	RC3 / RC4	Địa chỉ 0x3C, điện trở kéo lên 4.7 kΩ
BUSY	RB4	HIGH = đang vẽ. Với Modbus: DE/RE của RS-485.
INT	RC0	LOW = có tin nhắn cho máy chủ (I2C / SPI)
Nút MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	Nút nhấn (về GND) hoặc TTP223
CS màn cảm ứng	RA0	Mẫu T (XPT2046)
CS NOR flash	RA5	Mẫu 4 / 8 / 16
PWM đèn nền, còi	RA6, RA7	Ở các mẫu có trang bị
LED trạng thái	RB5	Nhấp nháy mỗi 0.5 giây khi đang chạy

Cài đặt màn hình: bước 3 của hướng dẫn. Flash sau mỗi thay đổi.

15

Self-test

Sau khi kết nối, 🔧 Self-test trong bảng Device. Chạy được với bất kỳ thiết kế nào đã nạp.

Màu: các sọc đỏ, xanh lá, xanh dương, trắng, đen và xám, ô vuông vàng ở góc trên trái. Nếu ô vuông ở góc khác, sửa Orientation / Mirror. START hoặc chạm: tiếp theo.
Nút, cảm ứng: nhấn cả bốn nút; mỗi ô chuyển xanh lá. Có cảm ứng thì hiện một chấm. Nếu một nút không hoạt động, nhấn START hai lần.
Linh kiện: NOR, thư viện phông, EEPROM: PASS / FAIL. Thử còi và đèn nền. START: về màn hình thường.

16

Khắc phục sự cố

Sự cố	Cách xử lý
Màn hình trắng toàn bộ	Kiểm tra dây DC, CS, RST của màn hình và nguồn 3.3 V.
Bị lật gương / ngược	Display, Mirror, Orientation (bước 3 hướng dẫn). Ô vàng của self-test phải ở góc trên trái.
Sai màu	Đỏ thành xanh dương: Swap red/blue. Trắng thành đen: Invert colours.
Nút luôn bị nhấn	"Buttons on the board": nút nhấn = "Push buttons to GND", miếng cảm ứng = "TTP223".
Chạm sai vị trí	Touch calibration → Calibrate…: chạm lần lượt bốn dấu + trên màn hình.
Flash lỗi / cổng bận	Ngắt kết nối rồi Flash. "Waiting for bootloader": tắt rồi bật lại bo mạch.
Không kết nối được	TX / RX bị đảo? (TXD của bộ chuyển → RC7). Baud 115200 (thiết kế Modbus thì dùng baud Modbus).
Chữ hiện "????"	Sửa Language của widget. Văn bản trực tiếp ngôn ngữ khác cần mẫu NOR.
Modbus không trả lời	Địa chỉ, baud, parity có giống nhau? Đổi A / B. Sau khi chuyển page, đặt timeout PLC 3 giây.
Có lỗi trong Problems	Nhấp vào lỗi và sửa widget đó. Có lỗi thì không Flash được.

PixPIO 2.8" 智能显示屏 · 用户手册

PixPIO 用户手册

设计界面，一键发送到显示屏。可由任何单片机（Arduino、PIC、STM32…）、通过 Modbus 由 PLC、或直接由电脑使用。也可以只接电源独立运行。

截图中的红框是该步骤要用的设置 / 按钮。

与本手册教程类似的设计在显示屏上：没有主机，只有 Actions。

1

PixPIO 是什么

PixPIO 是一块 2.8 英寸（320×240）彩色显示板，自带处理器（PIC18F27Q84）。界面、按钮、进度条、仪表和图片都在电脑上的 PixPIO Editor 中设计，显示屏自己绘制。主机（MCU 或 PLC）只需发送“level = 80”这样的短消息。

Lite无 NOR，无触摸。英文字体。

4 / 4T4 MB NOR（全部字体和语言）。T = 触摸。

8 / 8T8 MB NOR。更多图片、动画。

16 / 16T16 MB NOR。大图片、多种语言。

板上有 4 个按键：MENU UP DOWN START（轻触按键或 TTP223 触摸焊盘）。部分型号还有亮度调节和蜂鸣器。

为什么选 PixPIO

实时编辑插上 USB：Editor 里的每处修改立即显示在屏上。无需 SD 卡，无需漫长下载。

30 个现成控件仪表、图表、键盘、二维码、动画：拖放即可。

任意主机UART、I2C 或 SPI。已在 PIC、Arduino、ESP32、STM32 上测试。也可不接主机。

您的语言屏幕支持多种语言，印度语言可拼音输入。

免费工具PixPIO Editor 和 VS Code 的 PICPIO 均免费。

2

安装

安装 Visual Studio Code（Windows，免费）。
在 VS Code 中安装 PICPIO 扩展：Extensions → “…” → Install from VSIX… → 随板附带的 picpio-x.y.z.vsix。
重启 VS Code。在 PICPIO 菜单（或 Ctrl+Shift+P → “PixPIO”）中选择 PixPIO。Editor 会在浏览器中打开。
把 USB 转串口线（CH340）插到电脑上。Device Manager → Ports 中应出现类似 USB-SERIAL CH340 (COM3) 的条目。

Editor 不需要联网。它通过 VS Code 运行的“bridge”与显示屏通信，所以使用 Editor 时请保持 VS Code 打开。

3

Editor 介绍

第一次打开时，Editor 显示一个示例项目（工具栏的 Example 按钮随时可以找回；8 个 pages，几乎所有 widgets）。

PixPIO Editor：工具栏、pages、add widget、preview、properties、problems、device — 打开示例项目的 PixPIO Editor。

部分	位置	作用
Toolbar	顶部	New、Open、Example、Save、Export、⚡ Flash to display、Undo / Redo、缩放、Grid、Snap、☰ Widgets
Pages	左上	各个界面。+ 新建 page，⧉ 复制，− 删除。“start” = 最先显示的。
Add widget	左侧	点击即可把该 widget 加到界面上。
Preview	中间	与显示屏上的效果相同。拖动可移动；拉蓝色小方块可改变大小。
Properties	右侧	所选 widget 的设置。在 Pages 列表中点击 page，可看到 page 和整个项目的设置。? = 每项设置的说明。
Problems	左下	设计中的错误和警告。
Device	右下	COM 口、Connect、Mirror、Storage、Self-test、Touch、电脑发送的命令（第 6 章）。

快捷键：←→↑↓ 1 px（Shift 10 px），Ctrl+D 复制，Del 删除，Ctrl+Z / Y 撤销 / 重做。

4

教程：Water Tank（从零开始）

一个显示水箱液位的 2-page 界面。UP / DOWN 改变液位，进度条跟着变。到 100 显示“TANK FULL”，到 0 显示“TANK EMPTY”。MENU 打开设置 page。不需要主机。约 15 分钟。

步骤 1

新建项目

工具栏中的 New。得到一个空白界面（page “main”）。

步骤 2

Board model

在右侧 Screen · whole project 中，把 Board model 设为板子标签上的型号（这里是 PixPIO 4T）。

它会自动设置显示屏、触摸、按键、亮度、蜂鸣器和 NOR。Editor 会记住它。

步骤 3

Display（仅在需要时）

仅当画面旋转或颜色不对时：

Display：模块（ILI9341 各型号）
Buttons on the board：轻触按键 / TTP223 / 无
Swap red/blue、Mirror、Orientation

Display、Buttons、Swap red/blue、Mirror、Orientation 在红框中

步骤 4

给 page 命名

右上角 Name：home。在主机代码中它是 PAGE_HOME。

步骤 5

第二个 page

点 Pages 的 +。把新 page 命名为 settings。然后在列表中点 home 返回。

步骤 6

顶部栏（Rectangle）

在 Add widget 中点 Rectangle。x、y、width、height：0, 0, 320, 30（或用鼠标拖出）。颜色在 Colours 中。

已添加 Rectangle；Rectangle 按钮和 x y width height 在红框中

步骤 7

标题（Label）

Label：Name title，Text WATER TANK，位置 8, 7, 304, 16。Font、Size、Align 在 Text 部分。

步骤 8

液位（Number）

Number：Name level，位置 10, 64, 120, 50。

Value 50，Unit %
Min 0，Max 100
Remember value ✓：断电后仍保留

Number：Value、Unit、Min、Max、Remember value 在红框中

步骤 9

用板上按键修改

Keys (buttons)：Key + UP，Key − DOWN，Step 5。按住不放会连续变化。

步骤 10

液位条

Bar：Name level_bar，位置 140, 64, 170, 50，Min 0，Max 100，Style：Segments。

Preview：WATER TANK、50%、绿色分段条 — 目前：标题、数字、进度条。

步骤 11

隐藏的提示

Label：Name full_msg，Text TANK FULL，位置 10, 120, 300, 20，Hidden ✓。

同一位置再加一个：Name empty_msg，Text TANK EMPTY，Hidden ✓。

隐藏的 widgets 在 preview 中显示为虚线；在显示屏上一开始不显示。

步骤 12

Actions：给数字加 5 个动作

在 preview 中点 level。Actions (no code) → + Add action 5 次：

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ 删除一行。

步骤 13

设置按钮

Button：Name btn_settings，位置 10, 200, 145, 34，Caption MENU: Settings。

步骤 14

按下按钮时切换 page

+ Add action：Pressed → Go to page → 0x02 · settings。Key：MENU：板上的 MENU 键也会这样做。

步骤 15

设置 page：Back 按钮、QR

在 Pages 中选 settings。按步骤 6、7 加一个 Rectangle 和 “SETTINGS” Label。

Button：Caption START: Back，Key START，Action Pressed → Go to page → 0x01 · home。

QR code：Text / link = 您的网站，Border shape = Rounded。

设置 page：SETTINGS、圆角 QR、START: Back — 设置 page 完成。

步骤 16

保存

Save：一个 .pixpio 文件。只要还显示 “Unsaved changes”，就还没保存。接下来连接板子并 Flash（第 5 章）。

5

连接板子、Flash

步骤 1

USB 转串口线

USB 转串口 (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	仅当板子没有自己的电源时

步骤 2

Connect

在 Device 中选 COM 口，波特率 115200，点 Connect。绿点 = 已连接。列表里没有端口？点 ↻。

步骤 3

⚡ Flash to display

工具栏中的 ⚡ Flash to display。
设计被编译成固件并通过线缆发送；窗口中显示进度。第一次需要 1–2 分钟。
出现 “UPLOAD SUCCESSFUL” 后，显示屏以新界面启动。
图片和其他语言（带 NOR 的型号）也通过同一根线写入 NOR。

不需要 SD 卡。每次修改：在 Editor 中修改，然后 Flash。

教程设计在显示屏上：用 UP / DOWN 改变液位，调到 100 看到 “TANK FULL”，按 MENU 进入设置 page。

6

从电脑控制显示屏

连接后，不需要主机 MCU，就可以从电脑测试每个 widget。三种方式：

1. 快捷命令（Device 面板）

Page + Show：在显示屏上打开该 page。
选一个 Widget，输入 Value，点 Set value：数字、进度条、LED、开关……随之改变。
text + Set text：修改 Changeable 文本。
Hide / Show：隐藏 / 显示该 widget。
Key + Press：相当于按下板上按键（MENU、UP…）。

2. Commands for this widget

选中任何 widget，属性面板最下面都有 Commands for this widget。每条命令有：

Send：立即从电脑发送到显示屏（需已连接）。
Copy：可粘贴到主机程序中的代码（pd_set_value(&disp, W_NUMBER, 253);）。
绿色字节：用其他语言编程时，自己通过 UART / I2C / SPI 发送的数据帧。

修改设置时命令会随之更新。每个 widget 的命令见第 7 章。

3. Mirror、Touch

Mirror ✓：显示屏上发生的事（按键、数值变化）会实时显示在 preview 中。
☝ Touch：在 preview 上点击，相当于手指触摸显示屏（👆 光标，黄点）。
🔧 Self-test、⬆ Storage：见第 15、12 章。

7

每个 widget

每个 widget 都有：用途、用法、数值含义、主机代码。三张图：显示屏上（在 New 项目中添加该 widget）、设置、Commands（从电脑 Send / Copy 代码）。名称与 Add widget 列表一致。

Rectangle

标题栏、背景框、卡片。可以放在其他 widgets 后面。

使用方法

Colours：Background（填充）、Text / border 颜色。
Corner radius：圆角。Border：边框。
在 widget 列表中越靠下 = 越在后面（用 ↑ ↓ 按钮调整顺序）。

数值

—

主机代码 (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // 红色
disp.hide(W_HEADER);

Rectangle: Commands：从 PC Send，Copy 代码 — Commands：从 PC Send，Copy 代码

Label

固定文字：标题、说明、单位。

使用方法

在 Text 中输入。Font、Size、Align。
Language：其他语言（第 9 章）。
勾选 Changeable ✓ 后主机可以修改文字。
No background：可以看到下面的内容。

数值

—

主机代码 (Arduino)

disp.setText(W_LABEL, "Motor ON");   // 需要勾选 Changeable

Label: Commands：从 PC Send，Copy 代码 — Commands：从 PC Send，Copy 代码

Number

显示数字：温度、速度、计数、设定值。

使用方法

Value（初始值）、Min、Max。
Decimals 设 1 时 253 显示为 25.3。Unit：°C、%、V。
Keys：用 UP / DOWN 修改，每次 Step。
Remember value：断电后仍保留。

数值

数字（Min…Max）

主机代码 (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands：从 PC Send，Copy 代码 — Commands：从 PC Send，Copy 代码

Bar

液位、进度、水箱、电池。

使用方法

Min、Max、Value。
Style：Classic、Rounded、Segments (Blocks)、Level meter、Slider、Battery。
触摸型号可用手指拖动（滑块）。
Controls brightness：该进度条控制背光。

数值

Min…Max

主机代码 (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands：从 PC Send，Copy 代码 — Commands：从 PC Send，Copy 代码

Button

可按的按钮：切换 page、启动 / 停止。

使用方法

Caption：按钮文字。Style：normal、outline、pill、checkbox。
Mode：push（只在按下时）/ toggle（开-关）。
Key：板上按键（MENU…）也会按下它。
Actions：Pressed → Go to page、Set value…

数值

Toggle：0 / 1

主机代码 (Arduino)

disp.onKey(myKey);             // 板上按键
disp.onChange(myChange);       // toggle 数值

Keyboard

屏幕 QWERTY 键盘：名称、Wi-Fi 密码。

使用方法

Types into：一个 Input box。
Language：用英文字母输入的印度语言（第 9 章）。
触摸 Input box 也可以弹出键盘（Keyboard on tap）。

数值

字符编码（8 = 退格，13 = OK）

主机代码 (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands：从 PC Send，Copy 代码 — Commands：从 PC Send，Copy 代码

Image / logo

标志、图片。

使用方法

Change image…：PNG、JPG、SVG。Editor 会调整到适合显示屏的尺寸。
Colours：Full colour 或 Two colours（标志，占用极少 flash）。
Fit、Border shape（Rounded、Circle…）。

数值

—

主机代码 (Arduino)

disp.show(W_IMAGE);

显示屏上

设置

Commands：从 PC Send，Copy 代码

Input box

Keypad / 键盘写入的输入框。

使用方法

Placeholder、Max length。
Kind：text、number、password（显示 *）、Indian language（用英文字母输入，以印度文字显示；第 9 章）。

数值

Number 类型：按 OK 时得到数字

主机代码 (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands：从 PC Send，Copy 代码 — Commands：从 PC Send，Copy 代码

8

Actions：完整列表

当 widget 发生某事时，显示屏自己执行的动作。不需要主机。示例：教程步骤 12、14。

When（何时）	哪些 widgets
Pressed	Button
Changed	Number、bar、arc、switch、select、roller、spinbox、popup…
Becomes… N	同上

Do（做什么）	目标 / 数值
Go to page	一个 page
Set value of	widget、数值
Add to / Subtract from	widget、多少
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	带蜂鸣器的型号
Brightness (%)	带亮度调节的型号

9

语言

在 page 上放一个 Message（Label、Text、Button 同理）。

Language：Français · Deutsch · Español …、Русский、Ελληνικά，或印度语言（印地语、泰米尔语、马拉雅拉姆语…）。
在 Phrases 中写句子（多个句子用 | 分隔）。
Live text ✓：主机可以用 UTF-8 发送任意句子，显示屏正确绘制。勾选后字段变为 “Message”，并勾选 “Changeable”。

非英语的实时文本需要带 NOR 的型号（4、8、16）。字体出厂时已写入 NOR。中文显示请用 Phrases（固定文字）；中文实时文本仍在开发中。

用键盘输入印度语言

屏幕键盘可以输入马拉雅拉姆语、印地语、马拉地语、泰米尔语、古吉拉特语、旁遮普语、孟加拉语：按英文字母，输入框以该语言的文字显示（namaste → नमस्ते），类似手机上的拼音式输入。

添加一个 Keyboard。
Language：选择语言。

如果键盘还没有写入任何 Input box（“Types into” = None），选择语言时会在键盘上方自动添加一个 Input box，键盘就写入其中。

键盘上方自动添加的 Input box — 选择语言后：键盘上方出现 Input box，“Types into” = 该输入框。

语言是该 Input box 的设置；选中输入框也可以修改：

Kind：Indian language (typed in English)。
Language：语言。
Letter size：16、20、24 px。
下方显示该语言的输入规则。

Max length 最多 24 个英文字母。只有键盘遮住输入框时（弹出式键盘）才需要 “Show typed text”。输入框在键盘上方可见时请取消勾选，否则同样的文字会显示在两个框里。

Input box 设置：Kind、Language、Letter size 在红框中

用七种语言输入的输入框 — 显示屏上：santhOsham、namaste dhanyavAd、marAThI bhAShA、vaNakkam thamizh、kem chho gujarAtI、sat srI akAl punjAbI、ami bangla bhalO。

需要带 NOR 的型号（4T、8T、16T…）。主机读取输入框（readText）时得到的是输入的英文字母。

10

从主机 MCU（Arduino / C）

工具栏 Export ▾：

Download pixpio_ui.h：每个 widget 和 page 的名字（W_LEVEL、PAGE_SETTINGS…）。加到主机程序中。
Write to project folder…：固件和主机头文件一起。
NOR data file：仅供芯片编程器使用。

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// 操作员用 UP / DOWN 改变液位时调用
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // 主机 TX → 板 RC7，主机 RX ← 板 RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // 等待显示屏就绪（最多 5 秒）
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // 显示传感器数值
  disp.loop();                           // 处理显示屏发来的消息
  delay(200);
}

函数	作用
setValue(id, v)	数字、进度条、LED、开关……的数值
setText(id, "…")	Changeable 文本（Live text 用 UTF-8）
page(PAGE_…)	切换 page
show(id) / hide(id)	显示 / 隐藏 widget
setColor(id, c) / setBackground(id, c)	颜色（RGB565）
getValue(id) / readText(id, buf, n)	读取显示屏上的数值 / 文本
brightness(%) / beep(ms)	背光、蜂鸣器
onChange / onKey / onPage / onReboot	数值改变、板上按键、page 切换、显示屏重启
beginSerial / beginI2C / beginSPI	UART、I2C（0x3C）、SPI

Arduino 示例：uart_basic、i2c_basic、spi_basic、showcase_uart（Arduino IDE → File → Examples → PixPIO）。

11

Modbus RTU（与 PLC）

在 Pages 列表中点一个 page，然后 Host link · whole project。
Host link：Modbus RTU slave。
Slave address（1–247）、Baud、Parity：PLC 中设成一样。
📋 Register table (CSV)：所有寄存器的列表；用 Excel 打开交给 PLC 程序员。
把 Device 面板的波特率设为 Modbus 波特率，然后 Flash。

选中 widget 时，Name 下方显示它的寄存器：holding register 3 (40004), coil 3 (4)。

Host link Modbus RTU slave、Slave address、Baud、Parity、Register table 在红框中

寄存器	地址	含义
Holding (4x)	0 … N-1	Widget 的数值（在 widget 列表中的位置）。写入即显示。
Holding	1000	Page；写入 page ID 打开该 page
Holding	1001 / 1002	亮度 0–100 % / 蜂鸣（ms）
Coil (0x)	0 … N-1	显示（1）/ 隐藏（0）
Discrete input (1x)	0 … N-1	按钮已按下（读取后清零）
Discrete input	1000–1003 / 1100–1103	MENU、UP、DOWN、START：按下 / 按住
Input (3x)	0 … N-1, 1000–1002	数值（只读）、page、widget 数量、版本

功能码 01、02、03、04、05、06、08、15、16。数值为 16 位有符号数。添加或删除 widgets 会改变地址；请把新的 CSV 交给 PLC。

RS-485 接线

MAX485 模块	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC（或 USB-RS485）的 A / B

Flash 需要 USB 转串口（TTL）线。不要把 USB 转串口的 TXD 和 MAX485 的 RO 直接同时接到 RC7：用跳线，或在 TXD 上串 1 kΩ 电阻并在 RB4 上加 10 kΩ 上拉。

没有 PLC 时用电脑测试

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project 中的 Store in：

MCU flash：英文字体、小图片。Lite 型号。
SPI NOR flash：大图片、动画、其他语言。4 / 8 / 16 型号（选择 Board model 时自动设置）。

字体库出厂时已在 NOR 中。Flash 时只发送设计中的图片。

13

Widget list、Problems

Widgets on this page 对话框 — **☰ Widgets**：本 page 上的所有 widgets。点名字即可选中。要选中下面的，先取消上面那个的勾选。

14

板子、引脚

部分	PIC 引脚	说明
Host UART TX / RX	RC6 / RC7	115200 8N1（Modbus 时为 Editor 中设置的波特率）
Host I2C SCL / SDA	RC3 / RC4	地址 0x3C，4.7 kΩ 上拉
BUSY	RB4	HIGH = 正在绘制。Modbus 时为 RS-485 的 DE/RE。
INT	RC0	LOW = 有给主机的消息（I2C / SPI）
按键 MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	轻触按键（接 GND）或 TTP223
触摸面板 CS	RA0	T 型号（XPT2046）
NOR flash CS	RA5	4 / 8 / 16 型号
背光 PWM、蜂鸣器	RA6, RA7	有此功能的型号
状态 LED	RB5	运行时每 0.5 秒闪烁

显示屏设置：教程步骤 3。每次修改后都要 Flash。

15

Self-test

连接后，点 Device 面板中的 🔧 Self-test。无论烧录了什么设计都能运行。

颜色：红、绿、蓝、白、黑、灰色条纹，左上角有黄色方块。如果方块在别的角，请调整 Orientation / Mirror。START 或触摸：下一步。
按键、触摸：按下全部四个按键，每个方框变绿。有触摸时显示一个点。某个按键不工作时，按两次 START。
部件：NOR、字体库、EEPROM：PASS / FAIL。测试蜂鸣器和背光。START：回到正常界面。

16

故障排除

问题	处理方法
显示屏全白	检查显示屏的 DC、CS、RST 线和 3.3 V 电源。
镜像 / 上下颠倒	Display、Mirror、Orientation（教程步骤 3）。Self-test 的黄色方块应在左上角。
颜色不对	红色显示为蓝色：Swap red/blue。白色显示为黑色：Invert colours。
按键一直处于按下状态	“Buttons on the board”：轻触按键 = “Push buttons to GND”，触摸焊盘 = “TTP223”。
触摸位置不准	Touch calibration → Calibrate…：依次触摸显示屏上的四个 + 号。
Flash 失败 / 端口被占用	先 Disconnect 再 Flash。“Waiting for bootloader”：给板子断电再上电。
无法连接	TX / RX 接反了？（转接器 TXD → RC7）。波特率 115200（Modbus 设计用 Modbus 波特率）。
文字显示为 “????”	修正 widget 的 Language。其他语言的实时文本需要带 NOR 的型号。
Modbus 无应答	地址、波特率、校验是否一致？对调 A / B。切换 page 后 PLC 超时设为 3 秒。
Problems 中有错误	点击错误并修正该 widget。有错误时不会 Flash。

PixPIO 2.8" スマートディスプレイ · ユーザーマニュアル

PixPIO ユーザーマニュアル

画面をデザインし、ワンクリックでディスプレイに送ります。どんなマイコン（Arduino、PIC、STM32…）からでも、Modbus で PLC からでも、PC から直接でも使えます。電源だけで単独動作もできます。

スクリーンショットの赤い枠は、その手順で使う設定 / ボタンです。

このマニュアルのチュートリアルと同様のデザインをディスプレイに表示：ホストなし、Actions のみ。

1

PixPIO とは

PixPIO は、専用プロセッサ（PIC18F27Q84）を搭載した 2.8 インチ（320×240）カラーディスプレイボードです。画面、ボタン、バー、メーター、画像はすべて PC の PixPIO Editor でデザインし、ディスプレイが自分で描画します。ホスト（MCU や PLC）は「level = 80」のような短いメッセージを送るだけです。

LiteNOR なし、タッチなし。英語フォント。

4 / 4T4 MB NOR（全フォント・全言語）。T = タッチ。

8 / 8T8 MB NOR。画像やアニメーションを多く。

16 / 16T16 MB NOR。大きな画像、多言語。

ボードには 4 つのボタンがあります：MENU UP DOWN START（押しボタンまたは TTP223 タッチパッド）。一部のモデルには輝度調整とブザーもあります。

PixPIO を選ぶ理由

ライブ編集USB をつなぐだけ：Editor の変更がすぐ画面に出ます。SD カード不要、長い書き込み待ちなし。

30 のウィジェットメーター、グラフ、キーボード、QR コード、アニメーション：ドラッグするだけ。

どのホストでもUART、I2C、SPI。PIC、Arduino、ESP32、STM32 で動作確認済み。ホストなしでも動きます。

あなたの言語多言語表示、インドの言語は発音入力に対応。

無料ツールPixPIO Editor と VS Code 用 PICPIO は無料です。

2

インストール

Visual Studio Code をインストールします（Windows、無料）。
VS Code に PICPIO 拡張機能を入れます：Extensions → 「…」 → Install from VSIX… → 付属の picpio-x.y.z.vsix。
VS Code を再起動します。PICPIO メニュー（または Ctrl+Shift+P → 「PixPIO」）で PixPIO を選ぶと、ブラウザで Editor が開きます。
USB シリアルケーブル（CH340）を PC に接続します。Device Manager → Ports に USB-SERIAL CH340 (COM3) のような項目が表示されるはずです。

Editor にインターネットは不要です。VS Code が動かす「bridge」経由でディスプレイと通信するので、Editor を使う間は VS Code を開いたままにしてください。

3

Editor の概要

初めて開くと Editor にはサンプルプロジェクトが表示されます（ツールバーの Example でいつでも戻せます。8 pages、ほぼ全 widgets）。

PixPIO Editor：ツールバー、pages、add widget、preview、properties、problems、device — サンプルプロジェクトを開いた PixPIO Editor。

部分	場所	役割
Toolbar	上部	New、Open、Example、Save、Export、⚡ Flash to display、Undo / Redo、ズーム、Grid、Snap、☰ Widgets
Pages	左上	画面の一覧。+ 新規 page、⧉ コピー、− 削除。「start」= 最初に表示される page。
Add widget	左	クリックすると画面に追加されます。
Preview	中央	ディスプレイと同じ表示。ドラッグで移動、青い四角を引っ張ってサイズ変更。
Properties	右	選択した widget の設定。Pages 一覧で page をクリックすると page とプロジェクト全体の設定。? = 各設定の説明。
Problems	左下	デザインのエラーと警告。
Device	右下	COM ポート、Connect、Mirror、Storage、Self-test、Touch、PC からのコマンド（第 6 章）。

ショートカット：←→↑↓ 1 px（Shift で 10 px）、Ctrl+D 複製、Del 削除、Ctrl+Z / Y 元に戻す / やり直し。

4

チュートリアル：Water Tank（ゼロから）

タンクの水位を表示する 2-page の画面です。UP / DOWN で水位が変わり、バーも連動します。100 で「TANK FULL」、0 で「TANK EMPTY」を表示。MENU で設定 page を開きます。ホスト不要。約 15 分。

手順 1

新規プロジェクト

ツールバーの New。空の画面（page「main」）ができます。

手順 2

Board model

右側の Screen · whole project で、Board model をボードのラベルにあるモデル（ここでは PixPIO 4T）にします。

これでディスプレイ、タッチ、ボタン、輝度、ブザー、NOR が自動設定され、Editor が記憶します。

手順 3

Display（必要なときだけ）

画像が回転している、または色が違うときだけ：

Display：モジュール（ILI9341 の各種）
Buttons on the board：押しボタン / TTP223 / なし
Swap red/blue、Mirror、Orientation

Display、Buttons、Swap red/blue、Mirror、Orientation が赤枠

手順 4

page の名前

右上の Name：home。ホストのコードでは PAGE_HOME になります。

手順 5

2 つ目の page

Pages の +。新しい page の Name を settings にします。その後、一覧の home をクリックして戻ります。

手順 6

上部のバー（Rectangle）

Add widget の Rectangle。x、y、width、height：0, 0, 320, 30（またはマウスでドラッグ）。色は Colours で。

Rectangle を追加；Rectangle ボタンと x y width height が赤枠

手順 7

タイトル（Label）

Label：Name title、Text WATER TANK、位置 8, 7, 304, 16。Font、Size、Align は Text にあります。

手順 8

水位（Number）

Number：Name level、位置 10, 64, 120, 50。

Value 50、Unit %
Min 0、Max 100
Remember value ✓：電源が切れても保持

Number：Value、Unit、Min、Max、Remember value が赤枠

手順 9

ボードのボタンで変更

Keys (buttons)：Key + UP、Key − DOWN、Step 5。押し続けると連続して変わります。

手順 10

水位バー

Bar：Name level_bar、位置 140, 64, 170, 50、Min 0、Max 100、Style：Segments。

Preview：WATER TANK、50%、緑のセグメントバー — ここまで：タイトル、数値、バー。

手順 11

非表示のメッセージ

Label：Name full_msg、Text TANK FULL、位置 10, 120, 300, 20、Hidden ✓。

同じ位置にもう 1 つ：Name empty_msg、Text TANK EMPTY、Hidden ✓。

非表示の widgets は preview では点線で表示され、ディスプレイでは最初は表示されません。

手順 12

Actions：数値に 5 つのアクション

preview で level をクリック。Actions (no code) → + Add action を 5 回：

Changed → Copy my value to → level_bar
Becomes… 100 → Show → full_msg
Becomes… 95 → Hide → full_msg
Becomes… 0 → Show → empty_msg
Becomes… 5 → Hide → empty_msg

✕ で行を削除。

手順 13

設定ボタン

Button：Name btn_settings、位置 10, 200, 145, 34、Caption MENU: Settings。

手順 14

ボタンを押したら page を切り替え

+ Add action：Pressed → Go to page → 0x02 · settings。Key：MENU：ボードの MENU でも同じ動作。

手順 15

設定 page：Back ボタン、QR

Pages で settings。手順 6、7 と同様に Rectangle と「SETTINGS」Label。

Button：Caption START: Back、Key START、Action Pressed → Go to page → 0x01 · home。

QR code：Text / link = あなたのウェブサイト、Border shape = Rounded。

設定 page：SETTINGS、角丸 QR、START: Back — 設定 page の完成。

手順 16

保存

Save：.pixpio ファイル。「Unsaved changes」が表示されている間は保存されていません。次にボードを接続して Flash します（第 5 章）。

5

ボードの接続、Flash

手順 1

USB シリアルケーブル

USB シリアル (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	ボードに独自の電源がない場合のみ

手順 2

Connect

Device で COM ポート、ボーレート 115200、Connect。緑の点 = 接続済み。ポートが出ないときは ↻。

手順 3

⚡ Flash to display

ツールバーの ⚡ Flash to display。
デザインがファームウェアになりケーブルで送られます。ウィンドウに進捗が出ます。初回は 1～2 分。
「UPLOAD SUCCESSFUL」が出ると、ディスプレイが新しい画面で起動します。
画像や他言語（NOR モデル）も同じケーブルで NOR に書き込まれます。

SD カードは不要です。変更のたびに：Editor で変更して Flash。

チュートリアルのデザインをディスプレイで：UP / DOWN で水位を変え、100 にすると「TANK FULL」、MENU で設定 page。

6

PC からディスプレイを操作

接続後は、ホスト MCU なしで PC から各 widget を試せます。方法は 3 つ：

1. クイックコマンド（Device パネル）

Page + Show：その page をディスプレイに表示。
Widget を選び、Value を入力して Set value：数値、バー、LED、スイッチ…が変わります。
text + Set text：Changeable のテキストを変更。
Hide / Show：widget の非表示 / 表示。
Key + Press：ボードのボタン（MENU、UP…）を押したのと同じ。

2. Commands for this widget

widget を選ぶと、プロパティの一番下に Commands for this widget があります。各コマンドに：

Send：PC からすぐにディスプレイへ送信（接続が必要）。
Copy：ホストのプログラムに貼るコード（pd_set_value(&disp, W_NUMBER, 253);）。
緑のバイト列：他の言語でプログラムする場合に UART / I2C / SPI で直接送るフレーム。

設定を変えるとコマンドも変わります。各 widget のコマンドは第 7 章。

3. Mirror、Touch

Mirror ✓：ディスプレイ上の出来事（ボタン操作、値の変化）が preview にもリアルタイムに表示されます。
☝ Touch：preview をクリックすると、ディスプレイを指で触れたのと同じ（👆 カーソル、黄色の点）。
🔧 Self-test、⬆ Storage：第 15 章、第 12 章。

7

各 widget

各 widget について：用途、使い方、値の意味、ホストのコード。画像は 3 つ：ディスプレイ上（New プロジェクトに追加したとき）、設定、Commands（PC から Send / コードを Copy）。名前は Add widget 一覧と同じです。

Rectangle

ヘッダーバー、背景、カード。他の widgets の後ろに置けます。

使い方

Colours：Background（塗り）、Text / border の色。
Corner radius：角の丸み。Border：枠線。
widget 一覧で下にあるほど後ろになります（↑ ↓ ボタンで順序変更）。

値

—

ホストコード (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // 赤
disp.hide(W_HEADER);

Rectangle: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Label

固定の文字：タイトル、見出し、単位。

使い方

Text に入力。Font、Size、Align。
Language：他の言語（第 9 章）。
Changeable ✓ でホストが文字を変更できます。
No background：下にあるものが透けて見えます。

値

—

ホストコード (Arduino)

disp.setText(W_LABEL, "Motor ON");   // Changeable ✓ が必要

Label: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Number

数値を表示：温度、速度、カウント、設定値。

使い方

Value（初期値）、Min、Max。
Decimals 1 で 253 を 25.3 と表示。Unit：°C、%、V。
Keys：UP / DOWN で Step ずつ変更。
Remember value：電源が切れても保持。

値

数値（Min…Max）

ホストコード (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Bar

レベル、進捗、タンク、バッテリー。

使い方

Min、Max、Value。
Style：Classic、Rounded、Segments (Blocks)、Level meter、Slider、Battery。
タッチモデルでは指でドラッグできます（スライダー）。
Controls brightness：このバーでバックライトを調整。

値

Min…Max

ホストコード (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Button

押すボタン：page 切り替え、開始 / 停止。

使い方

Caption：表示文字。Style：normal、outline、pill、checkbox。
Mode：push（押している間だけ）/ toggle（オン・オフ）。
Key：ボードのボタン（MENU…）でも押せます。
Actions：Pressed → Go to page、Set value…

値

Toggle：0 / 1

ホストコード (Arduino)

disp.onKey(myKey);             // ボードのボタン
disp.onChange(myChange);       // toggle の値

Switch

オン / オフのスイッチ：ファン、照明、モード。

使い方

Switched on：起動時の状態。
Key：ボードのボタンで切り替え。タッチでも。
Remember value。

値

0 / 1

ホストコード (Arduino)

disp.setValue(W_SWITCH, 1);
// オペレーターが切り替えたとき：onChange(W_SWITCH, 0/1)

Switch: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Select

ドロップダウン：複数の選択肢から 1 つ。

使い方

Options：Low|Medium|High（| で区切る）。
Selected：最初の選択肢。
Keys：開く / OK、上、下。タッチで一覧が開きます。

値

0、1、2…（選択肢の位置）

ホストコード (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Icon

Wi-Fi、バッテリー、ベルなどの記号。

使い方

Symbol：アイコンを選択。Icon size、Scale。
Host switches icons：ホストがアイコンを変更できます。

値

アイコン番号（0 = なし）

ホストコード (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Switch array

複数のオン / オフスイッチをまとめて（ゾーン、リレー）。

使い方

Options：各スイッチの名前。Columns。
Style：スイッチまたはチェックボックス。

値

ビット：bit 0 = 最初のスイッチ

ホストコード (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1 と 3 がオン

Switch array: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Keypad

数字キー：PIN、設定値。

使い方

Keys：1|2|3|…|OK。Columns。
Types into：Input box に書き込みます。
Keys move / press：ボードのボタンでも操作可。

値

押したキーの位置

ホストコード (Arduino)

disp.onChange(myChange);   // キーを押すたび

Keypad: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Keyboard

画面上の QWERTY キーボード：名前、Wi-Fi パスワード。

使い方

Types into：Input box。
Language：英字で入力するインドの言語（第 9 章）。
Input box をタッチしてキーボードを開くこともできます（Keyboard on tap）。

値

文字コード（8 = バックスペース、13 = OK）

ホストコード (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Image / logo

ロゴ、画像。

使い方

Change image…：PNG、JPG、SVG。Editor がディスプレイに合わせます。
Colours：Full colour または Two colours（ロゴ向け、flash 使用量がとても少ない）。
Fit、Border shape（Rounded、Circle…）。

値

—

ホストコード (Arduino)

disp.show(W_IMAGE);

ディスプレイ上

設定

Commands：PC から Send、コードを Copy

Input box

Keypad / キーボードが書き込む入力欄。

使い方

Placeholder、Max length。
Kind：text、number、password（* 表示）、Indian language（英字で入力し、インドの文字で表示；第 9 章）。

値

Number の場合：OK を押したときの数値

ホストコード (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Message

複数行の文字。単語は自動で折り返します。

使い方

Message：| = 改行。Line gap。
Language、Live text（第 9 章）。
Changeable：ホストが変更できます。

値

—

ホストコード (Arduino)

disp.setText(W_MESSAGE, "Change filter|Service in 3 days");

Message: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

Animation (GIF)

GIF アニメーション：ロゴ、読み込み中、警告。

使い方

Choose GIF…：GIF ファイル。Fit。
Playing：loop、once、stopped。
大きい / 色の多い GIF は NOR モデルがおすすめ。

値

1 再生（ループ）、2 1 回、0 停止

ホストコード (Arduino)

disp.setValue(W_ANIM, 2);   // 1 回

Roller (picker)

スクロール式の選択：プログラム、モード。

使い方

Options：Off|Low|Medium|High。Rows shown：3、5、7。
Keys 次 / 前。タッチでは上か下の行をタップ。
Remember value。

値

選択した行（0、1、2…）

ホストコード (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

QR code

スマートフォンで読み取り：ウェブサイト、Wi-Fi、電話、マニュアルのリンク。

使い方

Text / link：https://…、WIFI:T:WPA;S:名前;P:パスワード;;、tel:…。
Border shape、No background。
枠が大きいほど読み取りやすくなります。

値

—

ホストコード (Arduino)

disp.show(W_QR);

QR code: Commands：PC から Send、コードを Copy — Commands：PC から Send、コードを Copy

8

Actions：一覧

widget に何かが起きたとき、ディスプレイが自分で行う動作です。ホスト不要。例：チュートリアルの手順 12、14。

When（いつ）	対象の widgets
Pressed	Button
Changed	Number、bar、arc、switch、select、roller、spinbox、popup…
Becomes… N	同上

Do（何を）	対象 / 値
Go to page	page
Set value of	widget、値
Add to / Subtract from	widget、量
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	ブザー付きモデル
Brightness (%)	輝度調整付きモデル

9

言語

page に Message を置きます（Label、Text、Button も同様）。

Language：日本語、Français · Deutsch · Español …、Русский、Ελληνικά、またはインドの言語。
Phrases に文を書きます（複数なら | で区切る）。
Live text ✓：ホストが任意の文を UTF-8 で送れます。チェックすると欄が「Message」になり「Changeable」もチェックされます。

英語以外のライブテキストには NOR モデル（4、8、16）が必要です。フォントは工場出荷時に NOR に書き込まれています。日本語は Phrases（固定テキスト）で表示してください。日本語のライブテキストは開発中です。

キーボードでインドの言語を入力

画面のキーボードでマラヤーラム語、ヒンディー語、マラーティー語、タミル語、グジャラート語、パンジャーブ語、ベンガル語を入力できます。英字を押すと、入力欄にその言語の文字で表示されます（namaste → नमस्ते）。スマートフォンのローマ字入力のようなものです。

Keyboard を追加します。
Language：言語を選びます。

キーボードがまだどの Input box にも書き込んでいない場合（「Types into」= None）、言語を選ぶとキーボードの上に Input box が自動で追加され、キーボードはそこに書き込みます。

キーボードの上に追加された Input box — 言語を選んだ後：キーボードの上に Input box、「Types into」= その入力欄。

言語はその Input box の設定です。入力欄を選んで変更することもできます：

Kind：Indian language (typed in English)。
Language：言語。
Letter size：16、20、24 px。
下にその言語の入力ルールが表示されます。

Max length は英字 24 文字まで。「Show typed text」はキーボードが入力欄を隠すとき（ポップアップキーボード）だけ必要です。入力欄がキーボードの上に見えている場合はチェックを外してください。外さないと同じ文字が 2 つの欄に表示されます。

Input box の設定：Kind、Language、Letter size が赤枠

7 言語で入力した入力欄 — ディスプレイ上：santhOsham、namaste dhanyavAd、marAThI bhAShA、vaNakkam thamizh、kem chho gujarAtI、sat srI akAl punjAbI、ami bangla bhalO。

NOR モデル（4T、8T、16T…）が必要です。ホストが入力欄を読む（readText）と、入力された英字が得られます。

10

ホスト MCU から（Arduino / C）

ツールバーの Export ▾：

Download pixpio_ui.h：各 widget と page の名前（W_LEVEL、PAGE_SETTINGS…）。ホストのプログラムに追加します。
Write to project folder…：ファームウェアとホスト用ヘッダーをまとめて。
NOR data file：チッププログラマ用のみ。

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// オペレーターが UP / DOWN で水位を変えたときに呼ばれる
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // ホスト TX → ボード RC7、ホスト RX ← ボード RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // ディスプレイの準備ができるまで（最大 5 秒）
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // センサー値を表示
  disp.loop();                           // ディスプレイからのメッセージ
  delay(200);
}

関数	役割
setValue(id, v)	数値、バー、LED、スイッチ…の値
setText(id, "…")	Changeable のテキスト（Live text は UTF-8）
page(PAGE_…)	page を切り替え
show(id) / hide(id)	widget の表示 / 非表示
setColor(id, c) / setBackground(id, c)	色（RGB565）
getValue(id) / readText(id, buf, n)	ディスプレイの値 / テキストを読む
brightness(%) / beep(ms)	バックライト、ブザー
onChange / onKey / onPage / onReboot	値の変化、ボードのボタン、page の変化、ディスプレイの再起動
beginSerial / beginI2C / beginSPI	UART、I2C（0x3C）、SPI

Arduino のサンプル：uart_basic、i2c_basic、spi_basic、showcase_uart（Arduino IDE → File → Examples → PixPIO）。

11

Modbus RTU（PLC と）

Pages 一覧で page をクリックし、Host link · whole project。
Host link：Modbus RTU slave。
Slave address（1–247）、Baud、Parity：PLC 側も同じ設定に。
📋 Register table (CSV)：全レジスタの一覧。Excel で開いて PLC プログラマへ。
Device パネルのボーレートを Modbus のボーレートにして Flash。

widget を選ぶと、Name の下にそのレジスタが表示されます：holding register 3 (40004), coil 3 (4)。

Host link Modbus RTU slave、Slave address、Baud、Parity、Register table が赤枠

レジスタ	アドレス	意味
Holding (4x)	0 … N-1	widget の値（widget 一覧での位置）。書き込むと表示されます。
Holding	1000	page。page ID を書くとその page を開く
Holding	1001 / 1002	輝度 0–100 % / ビープ（ms）
Coil (0x)	0 … N-1	表示（1）/ 非表示（0）
Discrete input (1x)	0 … N-1	ボタンが押された（読むとクリア）
Discrete input	1000–1003 / 1100–1103	MENU、UP、DOWN、START：押された / 押し続け
Input (3x)	0 … N-1, 1000–1002	値（読み取り専用）、page、widget 数、バージョン

ファンクション 01、02、03、04、05、06、08、15、16。値は符号付き 16 ビット。widgets を追加・削除するとアドレスが変わるので、新しい CSV を PLC 側に渡してください。

RS-485 配線

MAX485 モジュール	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	PLC（または USB-RS485）の A / B

Flash には USB シリアル（TTL）ケーブルが必要です。USB シリアルの TXD と MAX485 の RO を RC7 に直接同時に接続しないでください：ジャンパーを使うか、TXD に 1 kΩ の抵抗、RB4 に 10 kΩ のプルアップを入れます。

PLC なしで PC からテスト

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Storage · whole project の Store in：

MCU flash：英語フォント、小さな画像。Lite モデル。
SPI NOR flash：大きな画像、アニメーション、他言語。4 / 8 / 16 モデル（Board model を選ぶと自動設定）。

フォントライブラリは工場出荷時に NOR に入っています。Flash ではデザインの画像だけが送られます。

13

Widget list、Problems

Widgets on this page ダイアログ — **☰ Widgets**：この page のすべての widgets。名前をクリックで選択。下にあるものを選ぶには、上にあるもののチェックを外します。

14

ボード、ピン

部分	PIC ピン	備考
Host UART TX / RX	RC6 / RC7	115200 8N1（Modbus では Editor で設定したボーレート）
Host I2C SCL / SDA	RC3 / RC4	アドレス 0x3C、4.7 kΩ プルアップ
BUSY	RB4	HIGH = 描画中。Modbus では RS-485 の DE/RE。
INT	RC0	LOW = ホスト宛てのメッセージあり（I2C / SPI）
ボタン MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	押しボタン（GND へ）または TTP223
タッチパネル CS	RA0	T モデル（XPT2046）
NOR flash CS	RA5	4 / 8 / 16 モデル
バックライト PWM、ブザー	RA6, RA7	搭載モデルのみ
ステータス LED	RB5	動作中は 0.5 秒ごとに点滅

ディスプレイ設定：チュートリアル手順 3。変更のたびに Flash してください。

15

Self-test

接続後、Device パネルの 🔧 Self-test。どのデザインを書き込んでいても動作します。

色：赤、緑、青、白、黒、灰色の縞と、左上に黄色の四角。四角が別の角にあれば Orientation / Mirror を直します。START またはタップ：次へ。
ボタン、タッチ：4 つのボタンをすべて押すと、各枠が緑になります。タッチがあれば点が出ます。動かないボタンがあれば START を 2 回。
部品：NOR、フォントライブラリ、EEPROM：PASS / FAIL。ブザーとバックライトのテスト。START：通常画面へ。

16

トラブルシューティング

症状	対処
ディスプレイが真っ白	ディスプレイの DC、CS、RST の配線と 3.3 V 電源を確認。
鏡像 / 上下逆	Display、Mirror、Orientation（チュートリアル手順 3）。Self-test の黄色い四角が左上になるように。
色がおかしい	赤が青になる：Swap red/blue。白が黒になる：Invert colours。
ボタンが押しっぱなしになる	「Buttons on the board」：押しボタン = 「Push buttons to GND」、タッチパッド = 「TTP223」。
タッチ位置がずれる	Touch calibration → Calibrate…：ディスプレイの 4 つの + を順にタッチ。
Flash 失敗 / ポート使用中	Disconnect してから Flash。「Waiting for bootloader」：ボードの電源を入れ直す。
接続できない	TX / RX が逆？（アダプタ TXD → RC7）。ボーレート 115200（Modbus デザインでは Modbus のボーレート）。
文字が「????」になる	widget の Language を直す。他言語のライブテキストには NOR モデルが必要。
Modbus の応答がない	アドレス、ボーレート、パリティは同じ？ A / B を入れ替える。page 切り替え後の PLC タイムアウトは 3 秒に。
Problems にエラー	エラーをクリックしてその widget を直す。エラーがあると Flash できません。

PixPIO 2.8" smart display · دليل المستخدم

دليل مستخدم PixPIO

صمّم الشاشات وأرسلها إلى الشاشة بنقرة واحدة. استخدمها من أي متحكم دقيق (Arduino، PIC، STM32…)، أو من PLC عبر Modbus، أو مباشرة من الحاسوب. يمكنها أيضاً العمل وحدها بمجرد توصيل الكهرباء.

المربعات الحمراء في الصور هي الإعدادات / الأزرار المستخدمة في تلك الخطوة.

تصميم مثل الدرس التطبيقي في هذا الدليل على الشاشة: بدون مضيف، باستخدام Actions فقط.

1

ما هو PixPIO

PixPIO لوحة شاشة ملونة مقاس 2.8 بوصة (320×240) بمعالج خاص بها (PIC18F27Q84). تُصمَّم الشاشات والأزرار والأشرطة والمقاييس والصور على الحاسوب في PixPIO Editor، والشاشة ترسمها بنفسها. المضيف (MCU أو PLC) يرسل فقط رسائل قصيرة مثل "level = 80".

Liteبدون NOR، بدون لمس. خطوط إنجليزية.

4 / 4Tذاكرة NOR سعة 4 MB (كل الخطوط واللغات). T = لمس.

8 / 8TNOR سعة 8 MB. صور أكثر، رسوم متحركة.

16 / 16TNOR سعة 16 MB. صور كبيرة، لغات كثيرة.

على اللوحة 4 أزرار: MENU UP DOWN START (أزرار ضغط أو وسائد لمس TTP223). بعض الطرازات بها أيضاً تحكم في السطوع وجرس.

لماذا PixPIO

تعديل مباشرصِل USB: كل تغيير في Editor يظهر فورًا على الشاشة. بلا بطاقة SD، بلا رفع طويل.

30 عنصرًا جاهزًامقاييس، رسوم بيانية، لوحات مفاتيح، رموز QR، رسوم متحركة: اسحب وأفلت.

أي مضيفUART أو I2C أو SPI. مُختبَر مع PIC وArduino وESP32 وSTM32. أو بلا مضيف.

لغتكلغات كثيرة على الشاشة، مع كتابة صوتية للغات الهند.

أدوات مجانيةPixPIO Editor وPICPIO لـ VS Code مجانيان.

2

التثبيت

ثبّت Visual Studio Code (Windows، مجاني).
في VS Code، إضافة PICPIO: Extensions ← "…" ← Install from VSIX… ← الملف picpio-x.y.z.vsix المرفق مع اللوحة.
أعد تشغيل VS Code. من قائمة PICPIO (أو Ctrl+Shift+P ← "PixPIO") اختر PixPIO. يفتح Editor في المتصفح.
وصّل كابل USB-تسلسلي (CH340) بالحاسوب. يجب أن يظهر في Device Manager ← Ports شيء مثل USB-SERIAL CH340 (COM3).

لا يحتاج Editor إلى الإنترنت. يتصل بالشاشة عبر "bridge" يشغّله VS Code، لذا أبقِ VS Code مفتوحاً أثناء استخدام Editor.

3

التعرف على Editor

عند الفتح لأول مرة يعرض Editor مشروعاً نموذجياً (زر Example في شريط الأدوات يعيده دائماً؛ 8 pages ومعظم الـ widgets).

PixPIO Editor: شريط الأدوات، pages، add widget، preview، properties، problems، device — PixPIO Editor مع المشروع النموذجي.

الجزء	المكان	الوظيفة
Toolbar	في الأعلى	New، Open، Example، Save، Export، ⚡ Flash to display، Undo / Redo، التكبير، Grid، Snap، ☰ Widgets
Pages	أعلى اليسار	الشاشات. + page جديدة، ⧉ نسخ، − حذف. "start" = التي تظهر أولاً.
Add widget	اليسار	انقر على widget فيُضاف إلى الشاشة.
Preview	الوسط	كما ستعرضه الشاشة. اسحب للتحريك، واسحب المربعات الزرقاء لتغيير الحجم.
Properties	اليمين	إعدادات الـ widget المحدد. انقر على page في القائمة لإعدادات الـ page والمشروع كله. ? = شرح كل إعداد.
Problems	أسفل اليسار	أخطاء وتحذيرات التصميم.
Device	أسفل اليمين	منفذ COM، Connect، Mirror، Storage، Self-test، Touch، أوامر من الحاسوب (الفصل 6).

اختصارات: ←→↑↓ بكسل واحد (Shift 10 بكسل)، Ctrl+D نسخ، Del حذف، Ctrl+Z / Y تراجع / إعادة.

4

درس تطبيقي: Water Tank (من البداية)

شاشة من page اثنتين تعرض مستوى خزان. UP / DOWN يغيّران المستوى والشريط يتبعه. عند 100 تظهر "TANK FULL"، وعند 0 "TANK EMPTY". MENU يفتح page الإعدادات. لا حاجة لمضيف. حوالي 15 دقيقة.

الخطوة 1

مشروع جديد

New في شريط الأدوات. تحصل على شاشة فارغة (page "main").

الخطوة 2

Board model

على اليمين في Screen · whole project اضبط Board model على الطراز المكتوب على ملصق اللوحة (هنا PixPIO 4T).

يضبط هذا تلقائياً الشاشة واللمس والأزرار والسطوع والجرس وذاكرة NOR. ويتذكره Editor.

الخطوة 3

Display (عند الحاجة فقط)

فقط إذا كانت الصورة مقلوبة أو الألوان خاطئة:

Display: الوحدة (أنواع ILI9341)
Buttons on the board: أزرار ضغط / TTP223 / لا شيء
Swap red/blue، Mirror، Orientation

Display، Buttons، Swap red/blue، Mirror، Orientation في مربعات حمراء

الخطوة 4

اسم الـ page

أعلى اليمين Name: home. في كود المضيف هو PAGE_HOME.

الخطوة 5

page ثانية

زر + في Pages. سمِّ الـ page الجديدة settings. ثم انقر home في القائمة للرجوع.

Pages: home start، settings؛ + في مربع أحمر

الخطوة 6

الشريط العلوي (Rectangle)

Rectangle في Add widget. x، y، width، height: 0, 0, 320, 30 (أو ارسمه بالفأرة). لونه في Colours.

أضيف Rectangle؛ زر Rectangle و x y width height في مربعات حمراء

الخطوة 7

العنوان (Label)

Label: Name title، Text WATER TANK، الموضع 8, 7, 304, 16. Font و Size و Align في قسم Text.

Label: Name title، Text WATER TANK في مربعات حمراء

الخطوة 8

المستوى (Number)

Number: Name level، الموضع 10, 64, 120, 50.

Value 50، Unit %
Min 0، Max 100
Remember value ✓: تُحفظ القيمة عند انقطاع الكهرباء

Number: Value، Unit، Min، Max، Remember value في مربعات حمراء

الخطوة 9

التغيير بأزرار اللوحة

Keys (buttons): Key + UP، Key − DOWN، Step 5. مع الاستمرار في الضغط يستمر التغيير.

Key + UP، Key − DOWN، Step 5 في مربعات حمراء

الخطوة 10

شريط المستوى

Bar: Name level_bar، الموضع 140, 64, 170, 50، Min 0، Max 100، Style: Segments.

Preview: WATER TANK، 50%، شريط أخضر مقسّم — حتى الآن: عنوان، رقم، شريط.

الخطوة 11

رسائل مخفية

Label: Name full_msg، Text TANK FULL، الموضع 10, 120, 300, 20، Hidden ✓.

وآخر في المكان نفسه: Name empty_msg، Text TANK EMPTY، Hidden ✓.

الـ widgets المخفية تظهر منقّطة في الـ preview، ولا تظهر على الشاشة في البداية.

Label: Text TANK FULL، Hidden في مربعات حمراء

الخطوة 12

Actions: خمسة إجراءات على الرقم

انقر level في الـ preview. Actions (no code) ← + Add action خمس مرات:

Changed ← Copy my value to ← level_bar
Becomes… 100 ← Show ← full_msg
Becomes… 95 ← Hide ← full_msg
Becomes… 0 ← Show ← empty_msg
Becomes… 5 ← Hide ← empty_msg

✕ يحذف سطراً.

الخطوة 13

زر الإعدادات

Button: Name btn_settings، الموضع 10, 200, 145, 34، Caption MENU: Settings.

الخطوة 14

تغيير الـ page عند ضغط الزر

+ Add action: Pressed ← Go to page ← 0x02 · settings. Key: MENU: زر MENU في اللوحة يفعل الشيء نفسه.

الخطوة 15

page الإعدادات: زر Back، QR

settings في Pages. Rectangle و Label "SETTINGS" كما في الخطوتين 6 و 7.

Button: Caption START: Back، Key START، Action Pressed ← Go to page ← 0x01 · home.

QR code: Text / link = موقعك الإلكتروني، Border shape = Rounded.

QR: Text / link، Border shape في مربعات حمراء

page الإعدادات: SETTINGS، QR مستدير، START: Back — اكتملت page الإعدادات.

الخطوة 16

الحفظ

Save: ملف .pixpio. ما دامت "Unsaved changes" ظاهرة فلم يُحفظ بعد. بعدها وصّل اللوحة ونفّذ Flash (الفصل 5).

5

توصيل اللوحة، Flash

الخطوة 1

كابل USB-تسلسلي

USB-تسلسلي (CH340)	PixPIO
TXD	RC7 (RX)
RXD	RC6 (TX)
GND	GND
5V	فقط إذا لم يكن للوحة مصدر كهرباء خاص

الخطوة 2

Connect

في Device: منفذ COM، السرعة 115200، Connect. نقطة خضراء = متصل. لا يظهر المنفذ؟ ↻.

الخطوة 3

⚡ Flash to display

⚡ Flash to display في شريط الأدوات.
يتحول التصميم إلى firmware ويُرسل عبر الكابل؛ نافذة تعرض التقدم. المرة الأولى تستغرق 1–2 دقيقة.
عند ظهور "UPLOAD SUCCESSFUL" تبدأ الشاشة بالواجهة الجديدة.
الصور واللغات الأخرى (طرازات NOR) تُكتب في NOR عبر الكابل نفسه.

لا حاجة لبطاقة SD. لكل تعديل: عدّل في Editor ثم Flash.

تصميم الدرس على الشاشة: غيّر المستوى بـ UP / DOWN، اوصل إلى 100 لترى "TANK FULL"، اضغط MENU لصفحة الإعدادات.

6

التحكم في الشاشة من الحاسوب

بعد الاتصال يمكنك تجربة كل widget من الحاسوب دون MCU مضيف. ثلاث طرق:

1. أوامر سريعة (لوحة Device)

Page + Show: يفتح تلك الـ page على الشاشة.
اختر Widget، اكتب Value، ثم Set value: يتغير الرقم أو الشريط أو LED أو المفتاح…
text + Set text: يغيّر نصاً من نوع Changeable.
Hide / Show: إخفاء / إظهار الـ widget.
Key + Press: كأن زراً في اللوحة (MENU، UP…) ضُغط.

2. Commands for this widget

لأي widget محدد يوجد في أسفل خصائصه Commands for this widget. لكل أمر:

Send: يرسله فوراً من الحاسوب إلى الشاشة (يجب أن يكون متصلاً).
Copy: الكود الذي تلصقه في برنامج المضيف (pd_set_value(&disp, W_NUMBER, 253);).
البايتات الخضراء: الإطار الذي ترسله بنفسك عبر UART / I2C / SPI (عند البرمجة بلغة أخرى).

تتغير الأوامر مع تغيّر الإعدادات. أوامر كل widget في الفصل 7.

أوامر widget Number؛ Copy و Send لكل أمر

3. Mirror، Touch

Mirror ✓: ما يحدث على الشاشة (ضغطات الأزرار، تغيّر القيم) يظهر مباشرة في الـ preview أيضاً.
☝ Touch: النقر على الـ preview يعمل كإصبع على الشاشة (مؤشر 👆، نقطة صفراء).
🔧 Self-test، ⬆ Storage: الفصلان 15 و 12.

Mirror، Storage، Self-test، Touch في مربعات حمراء

7

كل widget

لكل widget: الغرض منه، طريقة استخدامه، معنى قيمته، وكود المضيف. ثلاث صور: على الشاشة (الـ widget في مشروع New)، الإعدادات، و Commands (Send من الحاسوب / Copy للكود). الأسماء نفسها كما في قائمة Add widget.

Rectangle

أشرطة العناوين، الخلفيات، البطاقات. يمكن وضعه خلف widgets أخرى.

طريقة الاستخدام

Colours: Background (التعبئة)، لون Text / border.
Corner radius: زوايا مستديرة. Border: إطار.
كلما كان أسفل في قائمة الـ widgets كان خلف غيره (غيّر الترتيب بزرّي ↑ ↓).

القيمة

—

كود المضيف (Arduino)

disp.setBackground(W_HEADER, 0xF800);   // red
disp.hide(W_HEADER);

Rectangle: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Label

نص ثابت: عناوين، تسميات، وحدات.

طريقة الاستخدام

اكتب في Text. Font، Size، Align.
Language: لغات أخرى (الفصل 9).
مع Changeable ✓ يستطيع المضيف تغيير النص.
No background: يظهر ما تحته.

القيمة

—

كود المضيف (Arduino)

disp.setText(W_LABEL, "Motor ON");   // needs Changeable

Label: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Number

يعرض رقماً: حرارة، سرعة، عدّاد، قيمة مطلوبة.

طريقة الاستخدام

Value (البداية)، Min، Max.
Decimals 1 يعرض 253 كـ 25.3. Unit: °C، %، V.
Keys: يتغير بـ UP / DOWN بمقدار Step.
Remember value: تُحفظ عند انقطاع الكهرباء.

القيمة

الرقم (Min…Max)

كود المضيف (Arduino)

disp.setValue(W_NUMBER, 253);        // 25.3 °C
int16_t v = disp.getValue(W_NUMBER);

Number: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Text

سطر نص يرسله المضيف: حالة، اسم، رسالة.

طريقة الاستخدام

Max length: عدد الأحرف.
Font، Size، Align، الألوان.
مع Language و Live text: حروف أخرى (طراز بذاكرة NOR).

القيمة

—

كود المضيف (Arduino)

disp.setText(W_TEXT, "Running");

Text: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Bar

مستوى، تقدّم، خزان، بطارية.

طريقة الاستخدام

Min، Max، Value.
Style: Classic، Rounded، Segments (Blocks)، Level meter، Slider، Battery.
في طرازات اللمس يمكن سحبه بالإصبع (slider).
Controls brightness: هذا الشريط يتحكم في الإضاءة الخلفية.

القيمة

Min…Max

كود المضيف (Arduino)

disp.setValue(W_BAR, 70);

Bar: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Button

زر للضغط: تغيير الـ page، تشغيل / إيقاف.

طريقة الاستخدام

Caption: نصه. Style: normal، outline، pill، checkbox.
Mode: push (أثناء الضغط فقط) / toggle (تشغيل-إيقاف).
Key: زر في اللوحة (MENU…) يضغطه أيضاً.
Actions: Pressed ← Go to page، Set value…

القيمة

Toggle: 0 / 1

كود المضيف (Arduino)

disp.onKey(myKey);             // board button
disp.onChange(myChange);       // toggle value

LED

مصباح حالة: تشغيل / إيقاف / وميض.

طريقة الاستخدام

State: Off، On، Blink. Blink every: ms.
Colours: لون Off، لون On.

القيمة

0 مطفأ، 1 مضاء، 2 وميض

كود المضيف (Arduino)

disp.setValue(W_LED, 2);   // blink

LED: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Arc / gauge

مقياس دائري: سرعة، قدرة، صوت.

طريقة الاستخدام

Start angle، Sweep (كم درجة)، Thickness.
Show value: الرقم في الوسط.
Knob ✓: يُدار باللمس.
Keys + / −.

القيمة

Min…Max

كود المضيف (Arduino)

disp.setValue(W_ARC, 60);

Arc / gauge: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Switch

مفتاح تشغيل / إيقاف: مروحة، ضوء، وضع.

طريقة الاستخدام

Switched on: الحالة عند البدء.
Key: زر في اللوحة يقلبه. واللمس أيضاً.
Remember value.

القيمة

0 / 1

كود المضيف (Arduino)

disp.setValue(W_SWITCH, 1);
// when the operator flips it: onChange(W_SWITCH, 0/1)

Switch: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Select

قائمة منسدلة: خيار واحد من عدة خيارات.

طريقة الاستخدام

Options: Low|Medium|High (افصل بـ |).
Selected: الخيار عند البدء.
Keys: فتح / OK، أعلى، أسفل. اللمس يفتح القائمة.

القيمة

0، 1، 2… (موضع الخيار)

كود المضيف (Arduino)

disp.setValue(W_SELECT, 2);   // High

Select: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Spinner

رسم متحرك "جارٍ العمل…".

طريقة الاستخدام

Style: dots، comet، arc…
Spinning، Speed. 0 = blank: مخفي عند التوقف.

القيمة

1 يدور، 0 متوقف

كود المضيف (Arduino)

disp.setValue(W_SPINNER, 1);

Icon

رموز مثل Wi-Fi والبطارية والجرس.

طريقة الاستخدام

Symbol: اختر الأيقونة. Icon size، Scale.
Host switches icons: يستطيع المضيف تغيير الأيقونة.

القيمة

رقم الأيقونة (0 = لا شيء)

كود المضيف (Arduino)

disp.setValue(W_ICON, ICON_WIFI);   // pd_symbols.h

Button group

عدة أزرار، يُختار واحد فقط (وضع، سرعة).

طريقة الاستخدام

Options: Low|Mid|High. Columns.
Style: أزرار أو radio.

القيمة

موضع الزر المختار (0، 1، 2…)

كود المضيف (Arduino)

disp.setValue(W_GROUP, 1);

Button group: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Switch array

عدة مفاتيح تشغيل / إيقاف معاً (مناطق، مرحّلات).

طريقة الاستخدام

Options: اسم كل مفتاح. Columns.
Style: مفاتيح أو مربعات اختيار.

القيمة

بتات: البت 0 = المفتاح الأول

كود المضيف (Arduino)

disp.setValue(W_SWITCHES, 0b101);   // 1 and 3 ON

Switch array: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Keypad

مفاتيح أرقام: رمز PIN، قيمة مطلوبة.

طريقة الاستخدام

Keys: 1|2|3|…|OK. Columns.
Types into: يكتب في Input box.
Keys move / press: بأزرار اللوحة أيضاً.

القيمة

موضع المفتاح المضغوط

كود المضيف (Arduino)

disp.onChange(myChange);   // every key press

Keypad: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Keyboard

لوحة مفاتيح QWERTY على الشاشة: اسم، كلمة مرور Wi-Fi.

طريقة الاستخدام

Types into: Input box.
Language: لغات الهند المكتوبة بحروف لاتينية (الفصل 9).
لمس الـ Input box يمكن أن يفتح لوحة المفاتيح (Keyboard on tap).

القيمة

رمز الحرف (8 = حذف، 13 = OK)

كود المضيف (Arduino)

char buf[32];
disp.readText(W_INPUT, buf, sizeof buf);

Keyboard: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Arrow

اتجاه: تدفّق، اتجاه المحرك.

طريقة الاستخدام

Style: arrow، double، triangle. Shaft thickness.

القيمة

0 يمين، 1 يسار، 2 أعلى، 3 أسفل

كود المضيف (Arduino)

disp.setValue(W_ARROW, 2);   // up

Image / logo

شعارات، صور.

طريقة الاستخدام

Change image…: PNG، JPG، SVG. يضبط Editor حجمها للشاشة.
Colours: Full colour أو Two colours (شعارات، مساحة flash قليلة جداً).
Fit، Border shape (Rounded، Circle…).

القيمة

—

كود المضيف (Arduino)

disp.show(W_IMAGE);

على الشاشة

الإعدادات

Commands: Send من الحاسوب، Copy للكود

Chart

منحنى: سجل درجة الحرارة.

طريقة الاستخدام

Style: line، thick، bars. Points، Min، Max، Grid lines.

القيمة

كل setValue يضيف نقطة على اليمين (-32768 = مسح)

كود المضيف (Arduino)

disp.setValue(W_CHART, temperature);   // every second

Chart: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Needle gauge

مقياس بمؤشر: ضغط، دورات في الدقيقة.

طريقة الاستخدام

Min، Max، Ticks، Scale numbers.
Warning from %، Danger from %: منطقة صفراء وحمراء.

القيمة

Min…Max

كود المضيف (Arduino)

disp.setValue(W_GAUGE, 75);

Needle gauge: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Input box

المربع الذي يكتب فيه keypad / لوحة المفاتيح.

طريقة الاستخدام

Placeholder، Max length.
Kind: text، number، password (يظهر *)، Indian language (يُكتب بحروف لاتينية ويظهر بخط هندي؛ الفصل 9).

القيمة

نوع Number: الرقم عند الضغط على OK

كود المضيف (Arduino)

char pin[8];
disp.readText(W_INPUT, pin, sizeof pin);

Input box: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Message

عدة أسطر؛ الكلمات تنتقل تلقائياً للسطر التالي.

طريقة الاستخدام

Message: | = سطر جديد. Line gap.
Language، Live text (الفصل 9).
Changeable: يستطيع المضيف تغييره.

القيمة

—

كود المضيف (Arduino)

disp.setText(W_MESSAGE, "Change filter|Service in 3 days");

Message: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

Animation (GIF)

رسم متحرك GIF: شعار، تحميل، تحذير.

طريقة الاستخدام

Choose GIF…: ملف GIF. Fit.
Playing: loop، once، stopped.
لملفات GIF الكبيرة أو كثيرة الألوان يُفضّل طراز بذاكرة NOR.

القيمة

1 تشغيل (تكرار)، 2 مرة واحدة، 0 إيقاف

كود المضيف (Arduino)

disp.setValue(W_ANIM, 2);   // once

Animation (GIF): على الشاشة — على الشاشة

Roller (picker)

منتقٍ بالتمرير: برامج، أوضاع.

طريقة الاستخدام

Options: Off|Low|Medium|High. Rows shown: 3، 5، 7.
Keys التالي / السابق. باللمس: المس السطر الأعلى أو الأسفل.
Remember value.

القيمة

السطر المختار (0، 1، 2…)

كود المضيف (Arduino)

disp.setValue(W_ROLLER, 3);

Roller (picker): على الشاشة — على الشاشة

Roller (picker): Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

QR code

ليمسحه الهاتف: موقع، Wi-Fi، هاتف، رابط الدليل.

طريقة الاستخدام

Text / link: https://…، WIFI:T:WPA;S:name;P:password;;، tel:….
Border shape، No background.
المربع الأكبر أسهل في المسح.

القيمة

—

كود المضيف (Arduino)

disp.show(W_QR);

QR code: Commands: Send من الحاسوب، Copy للكود — Commands: Send من الحاسوب، Copy للكود

8

Actions: القائمة الكاملة

ما تفعله الشاشة بنفسها عندما يحدث شيء لـ widget. لا حاجة لمضيف. أمثلة: الخطوتان 12 و 14 من الدرس.

When (متى)	أي widgets
Pressed	Button
Changed	Number، bar، arc، switch، select، roller، spinbox، popup…
Becomes… N	الـ widgets نفسها

Do (ماذا)	الهدف / القيمة
Go to page	page
Set value of	widget، قيمة
Add to / Subtract from	widget، المقدار
Copy my value to	widget
Show / Hide / Show / hide	widget
Beep (ms)	الطرازات ذات الجرس
Brightness (%)	الطرازات ذات التحكم في السطوع

9

اللغات

ضع Message على page (Label و Text و Button تعمل بالطريقة نفسها).

Language: العربية، Français · Deutsch · Español …، Русский، Ελληνικά، أو لغات الهند.
الجملة في Phrases (عدة جمل: افصل بينها بـ |).
Live text ✓: يستطيع المضيف إرسال أي جملة بترميز UTF-8. عند التحديد يصبح الحقل "Message" ويُحدَّد "Changeable".

النص الحي بغير الإنجليزية يحتاج طرازاً بذاكرة NOR (4، 8، 16). الخطوط مكتوبة في NOR من المصنع. لعرض العربية استخدم Phrases (نص ثابت)؛ النص العربي الحي ما زال قيد التطوير.

Language، Message، Changeable في مربعات حمراء

الكتابة بلغات الهند على لوحة المفاتيح

تستطيع لوحة المفاتيح على الشاشة الكتابة بالمالايالامية والهندية والماراثية والتاميلية والغوجاراتية والبنجابية والبنغالية: تكتب حروفاً لاتينية فيعرضها المربع بخط تلك اللغة (namaste ← नमस्ते)، مثل الكتابة الصوتية في الهاتف.

أضف Keyboard.
Language: اختر اللغة.

إذا لم تكن لوحة المفاتيح تكتب في أي Input box بعد ("Types into" = None)، فإن اختيار اللغة يضيف Input box فوق لوحة المفاتيح وتكتب فيه.

Input box أضيف فوق لوحة المفاتيح — بعد اختيار اللغة: Input box فوق لوحة المفاتيح، و "Types into" = ذلك المربع.

اللغة إعداد في ذلك الـ Input box، ويمكن تغييرها أيضاً بتحديد المربع:

Kind: Indian language (typed in English).
Language: اللغة.
Letter size: 16، 20، 24 px.
تظهر تحته قواعد الكتابة لتلك اللغة.

Max length 24 حرفاً لاتينياً كحد أقصى. "Show typed text" مطلوب فقط عندما تغطي لوحة المفاتيح المربع (لوحة منبثقة). إذا كان المربع ظاهراً فوق لوحة المفاتيح فألغِ التحديد، وإلا ظهر النص نفسه في مربعين.

إعدادات Input box: Kind، Language، Letter size في مربعات حمراء

مربعات مكتوبة بسبع لغات — على الشاشة: santhOsham، namaste dhanyavAd، marAThI bhAShA، vaNakkam thamizh، kem chho gujarAtI، sat srI akAl punjAbI، ami bangla bhalO.

يحتاج طرازاً بذاكرة NOR (4T، 8T، 16T…). عندما يقرأ المضيف المربع (readText) يحصل على الحروف اللاتينية المكتوبة.

10

من MCU مضيف (Arduino / C)

شريط الأدوات Export ▾:

Download pixpio_ui.h: اسم لكل widget و page (W_LEVEL، PAGE_SETTINGS…). أضفه إلى برنامج المضيف.
Write to project folder…: الـ firmware وملف رأس المضيف معاً.
NOR data file: لمبرمج الشرائح فقط.

#include <PixPIO.h>
#include "pixpio_ui.h"              // Export ▾ → Download pixpio_ui.h

PixPIO disp;
int16_t level;

// Called when the operator changes the level with UP / DOWN
void onChange(uint16_t id, int16_t value) {
  if (id == W_LEVEL) level = value;
}

void setup() {
  Serial1.begin(115200);            // host TX → board RC7, host RX ← board RC6
  disp.beginSerial(Serial1);        // I2C: disp.beginI2C(Wire, 0x3C)
  disp.waitForDisplay();            // until the display is ready (up to 5 s)
  disp.onChange(onChange);
}

void loop() {
  disp.setValue(W_LEVEL, readSensor());  // show the sensor value
  disp.loop();                           // messages from the display
  delay(200);
}

الدالة	الوظيفة
setValue(id, v)	قيمة رقم، شريط، LED، مفتاح…
setText(id, "…")	نص Changeable (بترميز UTF-8 لـ Live text)
page(PAGE_…)	تغيير الـ page
show(id) / hide(id)	إظهار / إخفاء widget
setColor(id, c) / setBackground(id, c)	اللون (RGB565)
getValue(id) / readText(id, buf, n)	قراءة قيمة / نص من الشاشة
brightness(%) / beep(ms)	الإضاءة الخلفية، الجرس
onChange / onKey / onPage / onReboot	تغيّرت قيمة، زر في اللوحة، تغيّرت الـ page، أُعيد تشغيل الشاشة
beginSerial / beginI2C / beginSPI	UART، I2C (0x3C)، SPI

أمثلة Arduino: uart_basic، i2c_basic، spi_basic، showcase_uart (Arduino IDE ← File ← Examples ← PixPIO).

11

Modbus RTU (مع PLC)

انقر على page في قائمة Pages، ثم Host link · whole project.
Host link: Modbus RTU slave.
Slave address (1–247)، Baud، Parity: القيم نفسها في الـ PLC.
📋 Register table (CSV): قائمة بكل السجلات؛ افتحها في Excel لمبرمج الـ PLC.
اضبط سرعة لوحة Device على سرعة Modbus ثم Flash.

عند تحديد widget تظهر سجلاته تحت الاسم: holding register 3 (40004), coil 3 (4).

Host link Modbus RTU slave، Slave address، Baud، Parity، Register table في مربعات حمراء

السجل	العنوان	المعنى
Holding (4x)	0 … N-1	قيمة الـ widget (موضعه في قائمة الـ widgets). الكتابة تعرضها على الشاشة.
Holding	1000	الـ page؛ اكتب رقم page لفتحها
Holding	1001 / 1002	السطوع 0–100 % / صفارة (ms)
Coil (0x)	0 … N-1	إظهار (1) / إخفاء (0)
Discrete input (1x)	0 … N-1	الزر مضغوط (يُمسح عند القراءة)
Discrete input	1000–1003 / 1100–1103	MENU، UP، DOWN، START: مضغوط / مستمر الضغط
Input (3x)	0 … N-1, 1000–1002	القيم (قراءة فقط)، الـ page، عدد الـ widgets، الإصدار

الدوال 01، 02، 03، 04، 05، 06، 08، 15، 16. القيم 16 بت بإشارة. إضافة widgets أو حذفها يغيّر العناوين؛ أعطِ الـ PLC ملف CSV الجديد.

توصيل RS-485

وحدة MAX485	PixPIO
RO	RC7
DI	RC6
DE + RE	RB4
VCC / GND	5V / GND
A / B	A / B للـ PLC (أو لـ USB-RS485)

يحتاج الـ Flash إلى كابل USB-تسلسلي (TTL). لا توصّل TXD الخاص بالكابل و RO الخاص بـ MAX485 معاً مباشرة إلى RC7: استخدم جمبر، أو مقاومة 1 كيلو أوم على TXD ومقاومة رفع 10 كيلو أوم على RB4.

الاختبار من الحاسوب بدون PLC

powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Write 3 -Value 80
powershell -ExecutionPolicy Bypass -File tools\modbus_test.ps1 -Port COM5 -Baud 9600 -Addr 1 -Watch

12

Storage (NOR)

Store in في Storage · whole project:

MCU flash: خطوط إنجليزية، صور صغيرة. طراز Lite.
SPI NOR flash: صور كبيرة، رسوم متحركة، لغات أخرى. طرازات 4 / 8 / 16 (يُضبط تلقائياً عند اختيار Board model).

مكتبة الخطوط موجودة في NOR من المصنع. عند الـ Flash تُرسل صور التصميم فقط.

13

Widget list، Problems

نافذة Widgets on this page — **☰ Widgets**: كل الـ widgets في هذه الـ page. انقر على اسم لتحديده. لتحديد واحد تحت آخر، ألغِ تحديد الذي فوقه.

14

اللوحة، الأطراف

الجزء	طرف PIC	ملاحظة
Host UART TX / RX	RC6 / RC7	115200 8N1 (في Modbus: السرعة المحددة في Editor)
Host I2C SCL / SDA	RC3 / RC4	العنوان 0x3C، مقاومات رفع 4.7 كيلو أوم
BUSY	RB4	HIGH = يرسم. في Modbus: DE/RE لـ RS-485.
INT	RC0	LOW = توجد رسالة للمضيف (I2C / SPI)
الأزرار MENU / UP / DOWN / START	RA4 / RA1 / RA2 / RA3	زر ضغط (إلى GND) أو TTP223
CS للوحة اللمس	RA0	طرازات T (XPT2046)
CS لذاكرة NOR	RA5	طرازات 4 / 8 / 16
PWM للإضاءة الخلفية، الجرس	RA6, RA7	في الطرازات التي تحتويها
LED الحالة	RB5	يومض كل 0.5 ثانية أثناء التشغيل

إعدادات الشاشة: الخطوة 3 من الدرس. نفّذ Flash بعد كل تعديل.

15

Self-test

بعد الاتصال، 🔧 Self-test في لوحة Device. يعمل مهما كان التصميم المحمّل.

الألوان: خطوط حمراء وخضراء وزرقاء وبيضاء وسوداء ورمادية، ومربع أصفر أعلى اليسار. إذا كان المربع في زاوية أخرى فصحّح Orientation / Mirror. START أو لمسة: التالي.
الأزرار، اللمس: اضغط الأزرار الأربعة؛ يصبح كل مربع أخضر. مع اللمس تظهر نقطة. إذا لم يعمل زر فاضغط START مرتين.
المكونات: NOR، مكتبة الخطوط، EEPROM: PASS / FAIL. اختبار الجرس والإضاءة الخلفية. START: العودة إلى الشاشة العادية.

16

حل المشكلات

المشكلة	الحل
الشاشة بيضاء بالكامل	افحص أسلاك DC و CS و RST للشاشة ومصدر 3.3 فولت.
معكوسة / مقلوبة	Display، Mirror، Orientation (الخطوة 3 من الدرس). يجب أن يكون المربع الأصفر في Self-test أعلى اليسار.
ألوان خاطئة	الأحمر يظهر أزرق: Swap red/blue. الأبيض يظهر أسود: Invert colours.
الأزرار مضغوطة دائماً	"Buttons on the board": أزرار الضغط = "Push buttons to GND"، وسائد اللمس = "TTP223".
اللمس في مكان خاطئ	Touch calibration ← Calibrate…: المس علامات + الأربع على الشاشة واحدة تلو الأخرى.
فشل الـ Flash / المنفذ مشغول	افصل الاتصال ثم Flash. "Waiting for bootloader": أطفئ اللوحة ثم شغّلها.
لا يتصل	هل TX / RX معكوسان؟ (TXD للمحوّل ← RC7). السرعة 115200 (في تصميم Modbus سرعة Modbus).
يظهر النص "????"	صحّح Language للـ widget. النص الحي بلغات أخرى يحتاج طرازاً بذاكرة NOR.
لا رد من Modbus	هل العنوان والسرعة والتكافؤ متطابقة؟ بدّل A / B. بعد تغيير الـ page اجعل مهلة الـ PLC 3 ثوانٍ.
خطأ في Problems	انقر الخطأ وصحّح ذلك الـ widget. مع وجود خطأ لا يتم الـ Flash.

What is PixPIO

Why PixPIO

Installing

The Editor

Tutorial: Water Tank (from scratch)

A new project

Board model

Display (only if needed)

Name the page

A second page

The top bar (Rectangle)

Title (Label)

Level (Number)

Change it with the board buttons

Level bar

Hidden messages

Actions: 5 actions on the number

Settings button

Change page when the button is pressed

Settings page: Back button, QR

Save

Connect the board, Flash

USB-serial cable

Connect

⚡ Flash to display

Controlling the display from the PC

1. Quick commands (Device panel)

2. Commands for this widget

3. Mirror, Touch

Every widget

Rectangle

Label

Number

Text

Bar

Button

LED

Arc / gauge

Switch

Select

Spinner

Icon

Button group

Switch array

Keypad

Keyboard

Circle

Line

Arrow

Bullet list

Image / logo

Chart

Needle gauge

Input box

Message

Popup

Animation (GIF)

Roller (picker)

Spinbox (− 12 +)

QR code

Actions: full list

Languages

Typing Malayalam, Hindi, Tamil… on the keyboard

From a host MCU (Arduino / C)

Modbus RTU (with a PLC)

RS-485 wiring

Testing from the PC without a PLC

Storage (NOR)

Widget list, Problems

Board, pins

Self-test

Troubleshooting

PixPIO എന്താണ്

എന്തുകൊണ്ട് PixPIO

Install ചെയ്യൽ

Editor പരിചയം

Tutorial: Water Tank (ആദ്യം മുതൽ)

പുതിയ project

Board model

Display (ആവശ്യമെങ്കിൽ മാത്രം)