Unofficial Nextion/TJC User Forum

Showing a popup page (custom kbd)

Ive been playing with the built in keyboards but decided not to use them as they don’t really suit my application. So I thought I’d try a custom KB.

As I understand, the keyboard is just another page. But if I add a page, I can’t resize it, any changes I make revert back to the original full screen size. How can I add a page and make it appear as a pop-up? I’d like to show the popup either from MCU code if possible as I’ll be using the same keyboard for several different functions.

This is using a 3.5" basic display although I’m just using the editor debugger right now.

Hi and welcome @DiggityDawg,

Popup pages aren‘t possible with basic, enhanced or discovery models - only on intelligent series devices. If you want that effect you‘d have to integrate the keyboard into every page you want to use it on or accept the page switches.

Edit: Was wrong, see below.

Kind regards,

The Enhanced series can do popup pages smaller than full size. I do it for a drop down file listbox and use the same drop down on several different pages.

Ah OK :slightly_frowning_face: It must be availiable but hidden otherwise the built-in KBs wouldn’t work.

Actually I found I could unlock & edit the standard KB but then it was reset when I did a reset system page.

But I think I might have found a workaround: I exported a system KB as a page, then imported it as a new page and it seems to have lost its “system” properties so I can rename & tweak it. I haven’t actually tried using it properly yet as I need to get my head around the whole Nextion coding thing but fingers crossed…

Indeed… Thanks for the hint. Basic series screens seem to be able to do it, too. It’s not hidden btw you just set the sta property of the page that contains the overlay to no background.

Kind regards,

You cannot do a true “popup” screen on the Nextion because loading a different page unloads the current one from RAM.

However, you can work around this limitation in several ways-

  • do not specify a background on your KB page (the blank background will draw your KB over the previous screen/page). Returning to your previous page will clear any previous changes because the page was cleared from RAM.

-draw the popup in real time on the MCU side the refresh the screen to clear (preserves any previous changes because page never changed). For quick popup messages I use a pop-up function that draws a ‘3D Up’ style filled box (fill command) then displays text over the top using ‘xstr’ command. Allows for different popup box colors, text colors and fonts. Waits for user to tap the screen then refreshes (‘ref 255’) which removes the drawn popup. You can also incorporate buttons into the popup message to allow for the user to make a selection by using the xpic command to place the buttons and using ‘xstr’ to label them. At this point you monitor for screen touches (tch0, tch1, sendme, etc) and use the touch coordinates to determine which button was selected.

-you can embed your KB and buttons into the page and use ‘vis’ to show and hide the KB elements (also conserves current page changes)

-create two images of your popup KB. One with the buttons in the released state and the other with all buttons in the pressed state. When the keyboard is needed on a page, disable touch sensing on all screen elements (tsw 255,0 ?), place your keyboard image on the screen (xpic), monitor for screen touches (tch, sendme, etc), use touch coordinates to determine keyboard button pressed then use ‘xpic’ with button pressed image to overlay that button and make it appear to toggle in response to the user action then when touch is released (tch0=0), use xpic again to revert back to the released button keyboard image and use ‘xstr’ to write the updated keyboard input text into your text field. Once the user presses OK/ENTER you then simply use ‘ref 255’ and ‘tsw 255,1’ to clear the drawn keyboard and enable touch on the previously covered page elements. All these steps would be controlled in a single MCU side function (lightweight, simple to add on any page, preserves page changes because page is never unloaded from memory).

I can probably think of several more ways to accomplish the task but I believe these few are your best options.

Hope this helps.

Thanks for that detailed reply, that’ll get me going.

This forum is in no way affiliated with NEXTION®, ITEAD STUDIO®, TJC®, or anyone else really. All product names, logos, and brands are property of their respective owners. All company, product, and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement from the respective rights holder(s).