Creating a professional touchscreen interface shouldn’t require manually calculating the X and Y position of every button, label, slider, meter, and graphic.<\/p>\n
The B9X Basic Screen Designer<\/strong> gives B9X Basic developers a visual way to build complete touchscreen interfaces on a Windows PC.<\/p>\n Place your controls on the screen, move and resize them visually, configure their properties, choose colors and fonts, add graphics, and see the layout before it ever reaches your ESP32-S3 hardware.<\/p>\n When you’re finished, click Copy B9X BASIC<\/strong> and the Screen Designer generates the B9X Basic function needed to create your screen.<\/p>\n Instead of manually writing display code such as:<\/p>\n you can create and position the button visually.<\/p>\n The designer handles the coordinates and generates the corresponding B9X Basic code.<\/p>\n This makes it much easier to experiment with different layouts and build polished interfaces\u2014even if you’re new to graphical embedded programming.<\/p>\n Build screens using:<\/p>\n Controls can be positioned using real display coordinates, and applicable elements can be resized directly in the designer.<\/p>\n Create interfaces in either:<\/p>\n 320 \u00d7 480 Portrait<\/strong><\/p>\n or<\/p>\n 480 \u00d7 320 Landscape<\/strong><\/p>\n The Screen Designer works in actual hardware pixel coordinates, so the position you design corresponds directly to the target display.<\/p>\n Switch orientation and build the interface that best fits your application.<\/p>\n The B9X Basic Screen Designer is useful for much more than simple menus.<\/p>\n Create graphical control panels with analog meters and vertical bar graphs. Add status lamps to show equipment conditions. Add switches and toggle controls for machine operation. Build configuration screens using editable text boxes and an on-screen keyboard.<\/p>\n Add a slider for volume, temperature, speed, brightness, setpoints, or virtually any other numeric value.<\/p>\n Create list boxes for selecting operating modes, devices, settings, stations, files, or other choices.<\/p>\n The result can look and behave much more like a finished embedded product than a traditional development-board demonstration.<\/p>\n Use the B9X display system’s built-in graphical icons directly from the Screen Designer.<\/p>\n For custom graphics, add BMP images to your screen and preview them while designing the interface.<\/p>\n The designer can generate paths for images stored on either:<\/p>\n or:<\/p>\n BMP images can also be made touchable, allowing a graphic itself to become an interactive control.<\/p>\n You can even use a BMP as the screen background and build your controls over it.<\/p>\n Applications that require configuration information, network credentials, passwords, server information, or other user-entered data can use editable text and password fields.<\/p>\n Password fields mask the displayed characters, while the on-screen keyboard can be associated with an editable field.<\/p>\n This makes it possible to create standalone touchscreen applications that don’t require a PC keyboard for normal operation.<\/p>\n Choose from six supported font sizes to create visual hierarchy within your interface.<\/p>\n Use smaller text for settings and detailed information, larger text for headings and important values, and appropriately sized fonts for touchscreen buttons.<\/p>\n Customize screen backgrounds, element backgrounds, and text using RGB565 colors.<\/p>\n You don’t need to calculate every color manually. The Screen Designer includes visual color selection and a Sample Color<\/strong> tool for obtaining the RGB565 value of a color shown in the screen preview.<\/p>\n Visual dragging makes initial layout fast, while exact property editing gives you precise control when you need it.<\/p>\n Elements can also be moved in one-pixel increments<\/strong> using the keyboard.<\/p>\n This combination makes the designer suitable for both quick prototypes and carefully aligned finished interfaces.<\/p>\n Larger applications often need more than one screen.<\/p>\n The Screen Designer includes a Start Number<\/strong> system specifically to make multiple separately designed screens easier to combine.<\/p>\n For example:<\/p>\n A second screen can begin at 200, another at 300, and so on.<\/p>\n That gives each screen its own range of element numbers while allowing the individual designs to remain easy to understand.<\/p>\n Screen designs can be saved as Return later to move controls, change colors, alter captions, add new elements, or completely redesign the interface.<\/p>\n You aren’t locked into the generated code as your only copy of the design.<\/p>\n When the screen is finished, Copy B9X BASIC<\/strong> generates the B9X Basic screen function and places it on the Windows clipboard.<\/p>\n The generated function can handle the work required to establish the screen, including orientation, clearing previous elements, creating the new controls, setting their colors, loading applicable graphics, creating the keyboard, and refreshing the display.<\/p>\n You can then concentrate on the part of the application that actually matters\u2014what your program does when the user interacts with the screen.<\/strong><\/p>\n If you’re new to embedded touchscreen development, the Screen Designer removes much of the trial-and-error normally involved in building a graphical interface.<\/p>\n Instead of starting by memorizing display functions and manually calculating coordinates, you can start by designing the screen you want.<\/p>\n Experienced B9X Basic developers gain something equally valuable: speed<\/strong>.<\/p>\n Complex interfaces can be laid out, changed, saved, reused, and regenerated without repeatedly editing dozens of display calls by hand.<\/p>\n The B9X Basic Screen Designer is well suited for industrial control panels, home automation interfaces, MQTT dashboards, instrumentation, machine controls, radio and VOIP interfaces, sensor displays, configuration panels, test equipment, portable controllers, IoT devices, and custom ESP32-S3 touchscreen products.<\/strong><\/p>\n Whether you’re creating your first touchscreen application or building a sophisticated multi-screen controller, the B9X Basic Screen Designer provides a faster and easier way to turn your interface idea into working B9X Basic code.<\/p>\n B9X Basic Screen Designer \u2014 graphical touchscreen development for B9X Basic.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Build professional ESP32-S3 touchscreen interfaces visually\u2014without laying out every control by hand.<\/strong><\/p>\n The B9X Basic Screen Designer<\/strong> is a visual development tool for creating touchscreen interfaces for B9X Basic applications. Design your screen on your Windows PC, position controls exactly where you want them, customize their appearance and properties, then let the Screen Designer generate the B9X Basic display code for you.<\/p>\n Create interfaces using buttons, rounded buttons, labels, text boxes, password fields, checkboxes, sliders, list boxes, analog meters, vertical bar meters, lamps, switches, toggle switches, built-in icons, touchable BMP graphics, backgrounds, and an on-screen keyboard<\/strong>.<\/p>\n Supports both 320\u00d7480 portrait and 480\u00d7320 landscape<\/strong> screen designs with exact hardware pixel positioning.<\/p>\n Design it visually. Generate the B9X Basic. Build your application.<\/strong><\/p>\n","protected":false},"featured_media":1534,"template":"","meta":[],"product_brand":[],"product_cat":[15],"product_tag":[],"class_list":["post-1533","product","type-product","status-publish","has-post-thumbnail","product_cat-uncategorized","first","instock","virtual","purchasable","product-type-simple"],"_links":{"self":[{"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=\/wp\/v2\/product\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=\/wp\/v2\/product"}],"about":[{"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=\/wp\/v2\/types\/product"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=\/wp\/v2\/media\/1534"}],"wp:attachment":[{"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1533"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fproduct_brand&post=1533"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fproduct_cat&post=1533"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/b9xelectronics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fproduct_tag&post=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}A Visual Designer for B9X Basic<\/h3>\n
result=displayAddButton(BUTTON1,20,184,289,49,\"START\",3);<\/code><\/pre>\n<\/div>\nA Large Selection of Ready-to-Use Controls<\/h3>\n
\n
Portrait and Landscape Design<\/h3>\n
Build More Than Just Buttons<\/h3>\n
Built-In Icons and Custom BMP Graphics<\/h3>\n
\/sdcard\/<\/code><\/pre>\n<\/div>\n\/spiffs\/<\/code><\/pre>\n<\/div>\nPassword Entry and On-Screen Keyboard<\/h3>\n
Six Font Sizes<\/h3>\n
RGB565 Color Control<\/h3>\n
Precise Positioning<\/h3>\n
Multiple Screens Without Element-Number Conflicts<\/h3>\n
let START_NUM=100;\r\nlet BUTTON1=START_NUM+1;<\/code><\/pre>\n<\/div>\nSave Your Designs and Edit Them Later<\/h3>\n
.b9xscreen<\/code> project files.<\/p>\nGenerate B9X Basic Automatically<\/h3>\n
Designed for Beginners, Useful for Advanced Projects<\/h3>\n
Ideal For<\/h3>\n
Design Visually. Generate the Code. Build Something Real.<\/h2>\n
B9X Basic Screen Designer<\/h3>\n