{"id":2098,"date":"2021-10-14T13:21:17","date_gmt":"2021-10-14T11:21:17","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/?page_id=2098"},"modified":"2022-06-07T13:47:03","modified_gmt":"2022-06-07T11:47:03","slug":"3-6-4-exemple-fem-apareixer-una-imatge-a-la-pantalla","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/3-6-4-exemple-fem-apareixer-una-imatge-a-la-pantalla\/","title":{"rendered":"3.6.4. Ejemplo: hacemos aparecer una imagen en la pantalla"},"content":{"rendered":"<p>Adem\u00e1s de mostrar texto, la pantalla de la placa ED1 tambi\u00e9n puede mostrar im\u00e1genes. Para hacerlo, tenemos que adaptar primero la imagen al formato que acepta la ED1, subirla a la placa y usar la librer\u00eda bitmaps para mostrarla. Tenemos que seguir estos pasos:<\/p>\n<p><strong>1.<\/strong> Preparar la imagen<\/p>\n<p>Elegimos una imagen que nos guste y la transformamos con un editor de im\u00e1genes para que tenga una medida de 128 x 128 p\u00edxeles. Una herramienta que podemos usar para adaptar una imagen es el editor de im\u00e1genes libre GIMP (<a href=\"http:\/\/www.gimp.org\" target=\"_blank\" rel=\"noopener noreferrer\">www.gimp.org<\/a>). Abrimos la imagen y ajustamos las proporciones, por ejemplo, con la opci\u00f3n \u00abImagen-Tama\u00f1o del lienzo&#8230;\u00bb.<\/p>\n<p>Si la imagen original no es cuadrada, tendremos que recortarla. Se pueden usar tama\u00f1os m\u00e1s peque\u00f1os y formatos no cuadrados, siempre que el m\u00e1ximo de ancho y alto sea inferior a 128 p\u00edxeles.<\/p>\n<p>Hay que guardar la imagen en formato BMP. Por ejemplo, en GIMP, hay que usar la opci\u00f3n de men\u00fa Archivo &gt; Exportar como y poner el nombre adecuado, por ejemplo, \u00abbabau.bmp\u00bb. Aparecer\u00e1 en la pantalla el cuadro \u00abExporta la imagen como BMP\u00bb y aqu\u00ed tenemos que seleccionar la opci\u00f3n \u00abOpciones avanzadas\u00bb:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1646 size-full\" src=\"\/wp-content\/uploads\/2021\/09\/image012.png\" alt=\"\" width=\"226\" height=\"288\" \/><\/p>\n<p>Elegimos el formato A1R5G5B5, X1R5G5B5 de 16 bits (no el R5G6B5) o cualquiera de 24 o 32 bits y lo exportamos. Los formatos de 16 bits ocupan menos espacio en la memoria de la tarjeta y tienen una calidad similar a los de 24 o 32 bits.<\/p>\n<p>Ahora ya tenemos la imagen preparada.<\/p>\n<p><strong>2.\u00a0<\/strong>Subir la imagen a la ED1<\/p>\n<p>Para subir la imagen como archivo en la placa ED1 hay que activar las opciones avanzadas de MicroBlocks. Haciendo clic con el rat\u00f3n en el icono de opciones escogemos la opci\u00f3n \u00abmuestra los bloques avanzados\u00bb. Ahora, en el men\u00fa escogemos la opci\u00f3n \u00abput file on board\u00bb (poner el archivo en la tarjeta). Aparecer\u00e1 una ventana para escoger el archivo en el ordenador.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2100\" src=\"\/wp-content\/uploads\/2021\/10\/blocks_avancats_es.png\" alt=\"\" width=\"500\" height=\"375\" srcset=\"\/wp-content\/uploads\/2021\/10\/blocks_avancats_es.png 1028w, \/wp-content\/uploads\/2021\/10\/blocks_avancats_es-300x225.png 300w, \/wp-content\/uploads\/2021\/10\/blocks_avancats_es-768x577.png 768w, \/wp-content\/uploads\/2021\/10\/blocks_avancats_es-1024x769.png 1024w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2102\" src=\"\/wp-content\/uploads\/2021\/10\/file_on_board_es.png\" alt=\"\" width=\"500\" height=\"340\" srcset=\"\/wp-content\/uploads\/2021\/10\/file_on_board_es.png 652w, \/wp-content\/uploads\/2021\/10\/file_on_board_es-300x204.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Finalmente apretamos el bot\u00f3n \u00abAbre\u00bb y ya lo tenemos.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1652 size-full\" src=\"\/wp-content\/uploads\/2021\/09\/image018.png\" alt=\"\" width=\"311\" height=\"261\" srcset=\"\/wp-content\/uploads\/2021\/09\/image018.png 311w, \/wp-content\/uploads\/2021\/09\/image018-300x252.png 300w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/p>\n<p><strong>3. <\/strong>Mostrar la imagen en la ED1<\/p>\n<p>La librer\u00eda para mostrar im\u00e1genes se puede encontrar en el apartado \u00abGraphics\u00bb y se denomina \u00abBMP.ubl\u00bb.<\/p>\n<p>El bloque que nos permite mostrar las im\u00e1genes es \u00abdisplay BMP file &#8230;\u00bb. En nuestro caso:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-2762 size-full\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_4_imatge_pantalla.jpg\" alt=\"\" width=\"227\" height=\"34\" \/><\/p>\n<p>Pegando sobre el bloque se muestra la imagen en la pantalla TFT de la ED1.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1656\" src=\"\/wp-content\/uploads\/2021\/09\/image022-1024x768.jpg\" alt=\"\" width=\"500\" height=\"375\" srcset=\"\/wp-content\/uploads\/2021\/09\/image022-1024x768.jpg 1024w, \/wp-content\/uploads\/2021\/09\/image022-300x225.jpg 300w, \/wp-content\/uploads\/2021\/09\/image022-768x576.jpg 768w, \/wp-content\/uploads\/2021\/09\/image022.jpg 2048w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>En la ED1 se pueden guardar hasta ochenta im\u00e1genes de este tipo. Para borrar las im\u00e1genes se puede utilizar la librer\u00eda \u00abSystem-filePrims\u00bb, donde encontraremos el bloque \u00abelimina el archivo\u2026\u00bb.<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-2104 alignnone\" src=\"\/wp-content\/uploads\/2021\/10\/llibreria_elinima_arxiu_es.png\" alt=\"\" width=\"500\" height=\"370\" srcset=\"\/wp-content\/uploads\/2021\/10\/llibreria_elinima_arxiu_es.png 1358w, \/wp-content\/uploads\/2021\/10\/llibreria_elinima_arxiu_es-300x222.png 300w, \/wp-content\/uploads\/2021\/10\/llibreria_elinima_arxiu_es-768x569.png 768w, \/wp-content\/uploads\/2021\/10\/llibreria_elinima_arxiu_es-1024x759.png 1024w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-2766 alignnone\" src=\"\/wp-content\/uploads\/2022\/05\/3_6_4_imatge_esborra_ES.jpg\" alt=\"\" width=\"206\" height=\"34\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adem\u00e1s de mostrar texto, la pantalla de la placa ED1 tambi\u00e9n puede mostrar im\u00e1genes. Para hacerlo, tenemos que adaptar primero la imagen al formato que acepta la ED1, subirla a la placa y usar la librer\u00eda bitmaps para mostrarla. Tenemos que seguir estos pasos: 1. Preparar la imagen Elegimos una imagen que nos guste y [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2098"}],"collection":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=2098"}],"version-history":[{"count":11,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2098\/revisions"}],"predecessor-version":[{"id":2836,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2098\/revisions\/2836"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=2098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}