{"id":437,"date":"2014-03-31T16:46:50","date_gmt":"2014-03-31T15:46:50","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=437"},"modified":"2021-08-06T18:03:16","modified_gmt":"2021-08-06T17:03:16","slug":"controles-graficos","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/controles-graficos\/","title":{"rendered":"Controles gr\u00e1ficos"},"content":{"rendered":"<p align=\"justify\">Los <b>controles gr\u00e1ficos <\/b>son objetos que aparecen sobre la escena y que se pueden arrastrar con el rat\u00f3n o con las flechas del teclado, con lo cual modifica en realidad un punto de la escena cuyas&nbsp; coordenadas se pueden usar a su vez como <em>par\u00e1metros<\/em> de la escena.<\/p>\n<p align=\"justify\">Para crear un control gr\u00e1fico se deben seguir los siguientes pasos:<\/p>\n<ol>\n<li>pulsar sobre el bot\u00f3n <strong>Controles<\/strong><\/li>\n<li>pulsar sobre el bot\u00f3n <strong>+<\/strong> que aparece arriba a la izquierda.<\/li>\n<li>seleccionar como tipo de control <strong>num\u00e9rico <\/strong>en la ventana <strong>agregar <\/strong>que se muestra despu\u00e9s del paso anterior<\/li>\n<li>teclear el nombre de control y confirmar pulsando sobre el bot\u00f3n <strong>Aceptar<\/strong>.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/crearCtrlGraf.png\"><img class=\"aligncenter size-full wp-image-1174\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/crearCtrlGraf.png\" alt=\"crearCtrlGraf\" width=\"836\" height=\"380\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/crearCtrlGraf.png 836w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/crearCtrlGraf-300x136.png 300w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><\/a><\/p>\n<p align=\"justify\">Al crear un <strong>control gr\u00e1fico<\/strong> se crea (internamente) dos controles num\u00e9ricos<strong>&nbsp;id.x<\/strong> e<strong> id.y <\/strong><small><\/small> donde<strong> id <\/strong><small><\/small> es el identificador del control gr\u00e1fico. Por defecto el control gr\u00e1fico se asigna al primer espacio definido, pero esto puede cambiarse posteriormente.<\/p>\n<p align=\"justify\">El panel de configuraci\u00f3n de un control gr\u00e1fico tiene este aspecto:<\/p>\n<p><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/confControGraf1.png\"><img class=\"aligncenter size-full wp-image-1175\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/confControGraf1.png\" alt=\"confControGraf1\" width=\"812\" height=\"218\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/confControGraf1.png 812w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/confControGraf1-300x80.png 300w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/a><\/p>\n<p>En la siguiente escena se pueden ver tres controles gr\u00e1ficos con distintas caracter\u00edsticas. Se pueden mover los controles gr\u00e1ficos libremente por el espacio en el que est\u00e9n definidos o \u00fanicamente por la curva que defina la ecuaci\u00f3n en x y en y que han de cumplir sus componentes (en el caso de que se introduzca una constricci\u00f3n). Puede descargar esta escena desde <a href=\"https:\/\/descartesjs.org\/repositorio\/EjPropiConGraf_JS.zip\">este enlace<\/a>.<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/EjPropiConGraf_JS\/\" width=\"780\" height=\"570\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p align=\"left\">Los campos especiales para este tipo de controles son <strong>colores<\/strong>,<strong> tama\u00f1o<\/strong><strong>, pos<\/strong>,<strong> constricci\u00f3n<\/strong><strong>&nbsp;<\/strong>e<strong> imagen<\/strong>. A continuaci\u00f3n se explica el significado de estos campos.<\/p>\n<ul>\n<li>Un control tiene dos colores:\n<ul>\n<li><strong>color<\/strong>. Color que se usa para dibujar la circunferencia del disco (<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=656\">ver Colores<\/a>). El color por defecto para la orilla es azul.<\/li>\n<li><strong>color-int<\/strong>. Color que se usa para el interior del c\u00edrculo o interior del disco.El color por defecto del interior es rojo.<\/li>\n<\/ul>\n<\/li>\n<li><strong style=\"line-height: 1.5em;\">tama\u00f1o<\/strong><span style=\"line-height: 1.5em;\">. Es el radio del disco en pixeles. Puede ser cualquier n\u00famero o expresi\u00f3n positiva. El valor por defecto es 4.<\/span><\/li>\n<\/ul>\n<ul>\n<li><strong>pos<\/strong>. Es el punto inicial de un control gr\u00e1fico o el extremo superior izquierdo de un control num\u00e9rico interior.Se expresa con dos n\u00fameros entre par\u00e9ntesis separados por una coma. Los n\u00fameros pueden ser constantes o expresiones en las que intervienen constantes o par\u00e1metros definidos en controles anteriores. El valor por defecto es (0,0).<\/li>\n<li><strong>constricci\u00f3n<\/strong>. Es una ecuaci\u00f3n en x, y que las coordenadas del control deben satisfacer. Es decir, el control queda restringido a moverse sobre la gr\u00e1fica de su constricci\u00f3n. Puede ser cualquier expresi\u00f3n o ser vac\u00eda. Si es vac\u00eda el control no est\u00e1 limitado en su movimiento.<br \/>\nEl valor por defecto es vac\u00edo.<\/li>\n<li><strong>imagen<\/strong>. Nombre del archivo de una imagen que se usar\u00e1 en el lugar de un c\u00edrculo para visualizar este control gr\u00e1fico.<\/li>\n<\/ul>\n<p align=\"justify\">El usuario puede mover el control gr\u00e1fico arrastr\u00e1ndolo con el rat\u00f3n o usando las flechas del teclado. Para que las pulsaciones de las flechas del teclado act\u00faen sobre un control gr\u00e1fico es necesario que \u00e9ste <em>tenga el foco<\/em>. Cuando un control gr\u00e1fico tiene el foco aparece una circunferencia blanco o negra en su interior. Para que un control gr\u00e1fico <em>adquiera el foco<\/em> hay que seleccionarlo con el rat\u00f3n.<\/p>\n<p align=\"justify\">Cuando los controles num\u00e9ricos asociados a un control gr\u00e1fico est\u00e1n activados, el usuario puede cambiar sus coordenadas con los pulsadores. Cuando no hay constricci\u00f3n la respuesta a las pulsaciones es la esperada. Sin embargo, cuando hay constricciones el programa tiene que respetarlas, para lo cual debe realizar ajustes a las coordenadas y, al hacerlo, puede no respetar \u00edntegramente las modificaciones realizadas a las coordenadas por el usuario con los pulsadores o con valores espec\u00edficos escritos.<\/p>\n<p align=\"justify\">A continuaci\u00f3n se presenta una escena con tres controles gr\u00e1ficos <strong>A<\/strong>, <strong>B<\/strong> y <strong>C<\/strong>, cada uno con una constricci\u00f3n diferente. En el ejemplo se han dibujado las constricciones utilizando para cada una de ellas un color. Puede descargar esta escena desde <a href=\"https:\/\/descartesjs.org\/repositorio\/EjControlGraf-JS.zip\">este enlace<\/a>.<\/p>\n<p style=\"text-align: center;\" align=\"justify\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/EjControlGraf-JS\/index.html\" width=\"610\" height=\"220\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/p>\n<p align=\"justify\">Se recomienda al lector estudiar el comportamiento de estos tres controles arrastr\u00e1ndolos con el rat\u00f3n, pulsando las flechas del teclado y modificando sus coordenadas con los pulsadores. En el caso del control <strong>A<\/strong> el programa respeta \u00edntegramente los cambios del usuario a <strong>A.x<\/strong> pero no a <strong>A.y<\/strong> (esto es porque la constricci\u00f3n tiene la forma <strong>y=f(x)<\/strong>). En el control <strong>C<\/strong> se respetan los cambios del usuario a <strong>C.y<\/strong> pero no a <strong>C.x<\/strong> (esto se debe a que la constricci\u00f3n tiene la forma <strong>x=f(y)<\/strong>). En en caso de <strong>B<\/strong> las dos coordenadas sufren un ajuste (esto ocurre cuando la constricci\u00f3n tiene la forma general <strong>f(x,y)=g(x,y)<\/strong>).<\/p>\n<h4>Controles gr\u00e1ficos en dispositivos t\u00e1ctiles<\/h4>\n<p>Cuando una escena se representa en una pantalla t\u00e1ctil un control usualmente es manejado con el dedo, si bien tambi\u00e9n pueden usarse otros accesorios como punteros. Obviamente, un dedo no determina un punto sino que ocupa una zona en el dispositivo, una &nbsp;superficie. As\u00ed pues, para que el usuario pueda con cierta comodidad proceder a seleccionar y manejar un control gr\u00e1fico lo que hace DescartesJS es definir una zona activa que no tiene por qu\u00e9 ser coincidente con el tama\u00f1o con el que se representa gr\u00e1ficamente ese control en la pantalla, sino que en general la zona activa ser\u00e1 mayor a la representada. El criterio actual que se aplica es:<\/p>\n<div>1. Un control gr\u00e1fico que no tenga imagen asociada tendr\u00e1 una zona activa m\u00ednima de 48&#215;48 p\u00edxeles.<\/div>\n<div>2. Un control gr\u00e1fico con imagen asociada tendr\u00e1 una zona activa dada por:<\/div>\n<div>m\u00e1x(32, ancho de la imagen)xm\u00e1x(32, alto de la imagen)<\/div>\n<div>donde m\u00e1x es el m\u00e1ximo entre los dos valores indicados.<\/div>\n<div>&nbsp;<\/div>\n<div>As\u00ed pues la zona activa tiene una cota inferior de 48&#215;48 y si se quiere que esa cota sea algo menor, 32&#215;32, tiene que ir asociada a una imagen que tenga esas dimensiones.<\/div>\n<div>&nbsp;<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los controles gr\u00e1ficos son objetos que aparecen sobre la escena y que se pueden arrastrar con el rat\u00f3n o con las flechas del teclado, con lo cual modifica en realidad un punto de la escena cuyas&nbsp; coordenadas se pueden usar a su vez como par\u00e1metros de la escena. Para crear un control gr\u00e1fico se deben seguir los siguientes pasos: pulsar sobre el bot\u00f3n Controles pulsar sobre el bot\u00f3n + que aparece arriba a la izquierda. seleccionar como tipo de control num\u00e9rico en la ventana agregar que se muestra despu\u00e9s del paso anterior teclear el nombre de control y confirmar pulsando<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/controles-graficos\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[35],"tags":[47,6],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/437"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":29,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/437\/revisions"}],"predecessor-version":[{"id":3413,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/437\/revisions\/3413"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}