{"id":237,"date":"2019-04-14T20:43:54","date_gmt":"2019-04-14T18:43:54","guid":{"rendered":"http:\/\/technical-publishing.de\/?page_id=237"},"modified":"2025-06-06T21:57:48","modified_gmt":"2025-06-06T19:57:48","slug":"zeichenbefehle","status":"publish","type":"page","link":"https:\/\/technical-publishing.de\/?page_id=237","title":{"rendered":"Zeichenbefehle"},"content":{"rendered":"<hr>\n<h3 id=\"cls\">cls<\/h3>\n<p><code>cls color<\/code><\/p>\n<p>Der cls-Befehl (clear screen) l\u00f6scht den Bildschirm. Das ist allerdings nicht ganz richtig, denn tats\u00e4chlich f\u00fcllt er den Bildschirm mit der angegebenen Farbe. Dazu kann ein definierter Farbcode oder der entsprechende Dezimalwert angegeben werden. Weitere Informationen zum Farbsystem finden Sie <a href=\"https:\/\/www.boecker-systemelektronik.de\/epages\/63381271.sf\/de_DE\/?ObjectPath=\/Shops\/63381271\/Categories\/Tutorials\/Nextion_Tutorials\/%22Das%20Farbsystem%22\" data-link-type=\"tree\" data-type=\"linkpicker\">hier<\/a><\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>cls RED 0xff 0xff 0xff<\/code><\/div>\n<hr>\n<h3 id=\"pic\">pic<\/h3>\n<p><code>pic x,y,id<\/code><\/p>\n<p>Sie k\u00f6nnen Bilder im Nextion-Editor in den Speicher des Nextions laden, m\u00fcssen diese aber noch nicht sofort darstellen. Jedes Bild verf\u00fcgt nach dem Laden \u00fcber eine &#8222;id&#8220;, mit der das Bild identifiziert werden kann. Bildern k\u00f6nnen nicht wie Komponenten Namen zugeordnet werden. Der pic-Befehl stellt das geladene Bild an den Positionen x und y auf dem Bildschirm dar. Die Angabe bezieht sich auf die obere, linke Ecke des Bildes.<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>pic 10,20,0 0xff 0xff 0xff<\/code>: Stellt das erste Bild (Index = 0) an den Positionen x=10 und y=20 dar.<\/div>\n<hr>\n<h3 id=\"picq\">picq<\/h3>\n<p><code>picq x,y,w,h,id<\/code><\/p>\n<p>Der picq-Befehl stellt das geladene Bild mit der angegebenen &#8222;id&#8220; an den Positionen x und y sowie mit einer Breite von w und einer H\u00f6he von h auf dem Bildschirm dar. Die Angabe bezieht sich auf die obere, linke Ecke des Bildes. Ist das Bild kleiner als der angegebene Bereich, wird es abgeschnitten. Ist er gr\u00f6\u00dfer wird das Bild in seiner tats\u00e4chlichen Gr\u00f6\u00dfe dargestellt.<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>picq 10,10,20,15,0 0xff 0xff 0xff<\/code>: Stellt das erste Bild (Index = 0) an den Positionen x=10 und y=10 mit einer Breite von 20 Pixeln und einer H\u00f6he von 15 Pixeln dar.<\/div>\n<hr>\n<h3 id=\"xpic\">xpic<\/h3>\n<p><code>xpic x,y,w,h,x0,y0,id<\/code><\/p>\n<p>Der xpic-Befehl ist eine komplexere Variante des picq-Befehls dar. Beim picq-Befehl beginnt der Bildausschnitt immer mit der oberen, linken Ecke des urspr\u00fcnglichen Originalbildes. Beim xpic-Befehl k\u00f6nnen Sie den Ausschnitt praktisch \u00fcber das Originalbild verschieben, dazu geben Sie zus\u00e4tzlich die Offset-Koordination x0 und y0 an.<\/p>\n<div class=\"beispiel\">Um die Wirkungsweise der beiden Befehl zu verdeutlichen, sehen Sie hier das Ergebnis beider Kommandos. Es handelt sich um ein Originalbild der Gr\u00f6\u00dfe 80 x 80 Pixel. Oben ist es mit dem picq-Befehl an den Koordinaten x=10, y=10 und mit einem Ausschnitt von 40 x 40 Pixeln zu sehen. Das untere Bild wurde mit dem xpic-Befehl an die Koordinaten x=10, y=100 ebenfalls mit der Gr\u00f6\u00dfe 40 x 40 dargestellt, allerdings ist der Ausschnitt um jeweils 20 Pixel nach rechts und nach unten verschoben. Sie k\u00f6nnen an diesem Beispiel auch sehen, dass Sie ein- und dasselbe Bild mehrmals darstellen k\u00f6nnen. Es erscheinen dann Kopien. Wollen Sie das Bild verschieben, m\u00fcssen Sie zwischendurch den Bildschirm l\u00f6schen.<br \/>\n&nbsp;<\/p>\n<div class=\"imgDiv\"><img decoding=\"async\" src=\"https:\/\/www.boecker-systemelektronik.de\/WebRoot\/Store13\/Shops\/63381271\/MediaGallery\/Tutorials_V2\/Nextion_Tutorials\/images\/picq_xpic.png\"><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>xpic 10,10,20,15,20,20,0 0xff 0xff 0xff<\/code><\/div>\n<hr>\n<h3 id=\"xstr\">xstr<\/h3>\n<p><code>xstr x,y,w,h,fontid,fontcolor,backcolor,halign,valign,sta,string<\/code><\/p>\n<p>Mit dem xstr-Befehl kann eine Zeichenkette in einem Kasten mit Hintergrund dargestellt werden. Dabei kommen ganze 11 Paramenter zum Einsatz. Schauen wir uns diese im Detail an:<\/p>\n<ul>\n<li><b>x, y:<\/b> Die Startkoordinaten des Hintergrundkastens f\u00fcr die Zeichenkette (obere, linke Ecke).<\/li>\n<li><b>w, h:<\/b> Die Breite und die H\u00f6he des Hintergrundkastens.<\/li>\n<li><b>fontid:<\/b> Die id des zu verwendenden Zeichensatzes.<\/li>\n<li><b>fontcolor:<\/b> Die Farbe des Textes.<\/li>\n<li><b>backcolor:<\/b> Die F\u00fcllfarbe f\u00fcr den Hintergrundkasten.<\/li>\n<li><b>halign:<\/b> Die horizontale Ausrichtung. Sie kann die Werte 0 (linksb\u00fcndig), 1 (zentriert) oder 2 (rechtsb\u00fcndig) annehmen.<\/li>\n<li><b>valign:<\/b> Die vertikale Ausrichtung. Sie kann die Werte 0 (oben), 1 (zentriert) oder 2 (unten) annehmen.<\/li>\n<li><b>sta:<\/b> \u00dcber diese Variable kann die Art des Hintergrunds bestimmt werden: 0 (Bildausschnitt), 1 (F\u00fcllfarbe), 2 (Bild), 3 (kein Hintergrund). Ist ein Bild als Hintergrund gew\u00e4hlt, so wird die gew\u00fcnschte Bild-ID \u00fcber die Hintergrundfarbe eingestellt.<\/li>\n<li><b>string:<\/b> Die Zeichenkette, die dargestellt werden soll.<\/li>\n<\/ul>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>xstr 0,0,100,30,1,RED,BLACK,1,1,1,\"Test\" 0xff 0xff 0xff<\/code>: Der Hintergrundkasten beginnt oben links und er ist 100 Pixel breit und 30 Pixel hoch. Der Text wird mit der Font-ID &#8222;1&#8220; angezeigt und zwar in rot. Der Hintergrund ist schwarz, der Text innerhalb des Kastens sowohl horizontal wie auch vertikal zentriert ausgerichtet.<\/div>\n<hr>\n<h3 id=\"fill\">fill<\/h3>\n<p><code>fill x,y,w,h,color<\/code><\/p>\n<p>Mit dem fill-Befehl wird ein rechteckiger Bereich an der Position x, y mit der Breite w und der H\u00f6he h in der F\u00fcllfarbe &#8222;color&#8220; gezeichnet.<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>fill 10,10,50,50,GREEN 0xff 0xff 0xff<\/code>: Stellt ein gr\u00fcnes Quadrat mit der Kantenl\u00e4nge 50 an der Position x=10 und y=10 dar.<\/div>\n<hr>\n<h3 id=\"line\">line<\/h3>\n<p><code>line x1,y1,x2,y2,color<\/code><\/p>\n<p>Der line-Befehl zeichnet eine Linie vom Startpunkt x1, y1 zum Endpunkt x2, y2 mit der Farbe &#8222;color&#8220;.<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>line 10,10,50,50,YELLOW 0xff 0xff 0xff<\/code>: Zeichnet eine gelbe Linie von 10, 10 zu 50, 50.<\/div>\n<hr>\n<h3 id=\"draw\">draw<\/h3>\n<p><code>draw x,y,w,h,color<\/code><\/p>\n<p>Mit dem draw-Befehl wird ein rechteckiger Rahmen an der Position x, y mit der Breite w und der H\u00f6he h in der Farbe &#8222;color&#8220; gezeichnet. Die Rahmenbreite betr\u00e4gt 1 Pixel. Der Rahmen wird im Gegensatz zum fill-Befehl nicht gef\u00fcllt.<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>draw 10,10,50,50,GREEN 0xff 0xff 0xff<\/code>: Stellt einen gr\u00fcnen Rahmen mit der Kantenl\u00e4nge 50 an der Position x=10 und y=10 dar.<\/div>\n<hr>\n<h3 id=\"cir\">cir<\/h3>\n<p><code>cir x,y,rad,color<\/code><\/p>\n<p>Mit dem cir-Befehl zeichnen Sie einen Kreis mit dem Radius (rad), der Farbe (color) und dem Mittelpunkt (x, y).<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>cir 50,50,20,BLUE 0xff 0xff 0xff<\/code>: Es wird ein ungef\u00fcllter blauer Kreis mit dem Radius 20 und dem Mittelpunkt an der Position x, y dargestellt.<\/div>\n<hr>\n<h3 id=\"cirs\">cirs<\/h3>\n<p><code>cirs x,y,rad,color<\/code><\/p>\n<p>Im Gegensatz zum cir-Befehl steht &#8222;cirs&#8220; f\u00fcr &#8222;solid circle&#8220;. Der Befehl zeichnet also einen gef\u00fcllten Kreis mit dem Radius (rad), der Farbe (color) und dem Mittelpunkt (x, y).<\/p>\n<div class=\"hinweis\"><span style=\"color: #0000ff;\">Beispiel-Befehl vom Host:<\/span> <code>cirs 50,50,20,BLUE 0xff 0xff 0xff<\/code>: Es wird ein gef\u00fcllter blauer Kreis mit dem Radius 20 und dem Mittelpunkt an der Position x, y dargestellt.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>cls cls color Der cls-Befehl (clear screen) l\u00f6scht den Bildschirm. Das ist allerdings nicht ganz richtig, denn tats\u00e4chlich f\u00fcllt er den Bildschirm mit der angegebenen Farbe. Dazu kann ein definierter Farbcode oder der entsprechende Dezimalwert angegeben werden. Weitere Informationen zum Farbsystem finden Sie hier Beispiel-Befehl vom Host: cls RED 0xff 0xff 0xff pic pic x,y,id&hellip;&nbsp;<a href=\"https:\/\/technical-publishing.de\/?page_id=237\" rel=\"bookmark\">Weiterlesen &raquo;<span class=\"screen-reader-text\">Zeichenbefehle<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":113,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":70,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-237","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/pages\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/technical-publishing.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=237"}],"version-history":[{"count":1,"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/pages\/237\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/pages\/237\/revisions\/238"}],"up":[{"embeddable":true,"href":"https:\/\/technical-publishing.de\/index.php?rest_route=\/wp\/v2\/pages\/113"}],"wp:attachment":[{"href":"https:\/\/technical-publishing.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}