{"id":1090,"date":"2021-12-28T17:44:48","date_gmt":"2021-12-28T20:44:48","guid":{"rendered":"http:\/\/leandroascierto.com\/blog\/?p=1090"},"modified":"2023-10-26T20:11:31","modified_gmt":"2023-10-26T23:11:31","slug":"control-de-usuario-knob-o-perilla","status":"publish","type":"post","link":"https:\/\/leandroascierto.com\/blog\/control-de-usuario-knob-o-perilla\/","title":{"rendered":"Control de usuario Knob o Perilla"},"content":{"rendered":"\n<p>En esta ocasi\u00f3n hay tres formas de crear un Knob o control de perilla, los muy conocidos en el ambiente de audio; digo tres formas porque el primer control de usuario lo dibuja todo mediante m\u00e9todos gr\u00e1ficos con el apoyo de la clase ClsNeumorphism. El segundo utiliza tiras de im\u00e1genes las cuales contienen fotogramas rotados porcentualmente, quienes dise\u00f1an estas im\u00e1genes toman en cuenta el movimiento de la sombra, haciendo una simulaci\u00f3n en 3D de la perilla en su rotaci\u00f3n. Por \u00faltimo se encuentra otro ejemplo empleando el usercontrol Labelplus donde ponemos una imagen de una perilla que hallamos descargado de internet o dise\u00f1ado nosotros, y otro Labelplus por encima de este con la imagen de la flecha la cual se rotar\u00e1 seg\u00fan el \u00e1ngulo que le asignemos al Labelplus.<\/p>\n\n\n\n<p>Tambi\u00e9n encontraran la clase clsSubClass la cual puede ser opcional, esta se utiliz\u00f3 para subclasificar el formulario y asi interceptar la rueda del mouse para rotar dichos controles, de todas formas lo m\u00e1s com\u00fan es operarlos mediante el mouse con el bot\u00f3n izquierdo presionado subiendo o bajando el cursor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ucKnob con m\u00e9todos gr\u00e1ficos (Recomendado)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/blog\/imagenes\/Knob1.png\" alt=\"Knob1.png\"\/><\/figure>\n\n\n\n<p>    <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\">\n<a href=\"https:\/\/leandroascierto.com\/blog\/descarga.php?url=ucKnob.zip\"><img decoding=\"async\" src=\"https:\/\/leandroascierto.com\/blog\/descarga.php?file=ucKnob.zip\" alt=\"\"><\/a>\n<\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p> <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p> <\/p>\n\n\n\n<p>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ucKnobStrip y Labelplus<\/strong> <\/h2>\n\n\n\n<p>(las im\u00e1genes que sub\u00ed en los ejemplos son de alta calidad y tama\u00f1o, queda en ustedes editar estas im\u00e1genes con la calidad\/tama\u00f1o mas adecuado lograr el equilibrio entre dise\u00f1o\/memoria\/procesador.)<br>Las tiras de im\u00e1genes fuero extra\u00eddas de <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/ColinBD\/JSAudioKnobs\" target=\"_blank\">JSAudioKnobs<\/a><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\">\n<img decoding=\"async\" src=\"\/blog\/imagenes\/Knob2.png\" alt=\"Knob2.png\">\n\n<img decoding=\"async\" src=\"\/blog\/imagenes\/Knob3.png\" alt=\"Knob3.png\">\n<\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\">\n<a href=\"https:\/\/leandroascierto.com\/blog\/descarga.php?url=knob with images.zip\"><img decoding=\"async\" src=\"https:\/\/leandroascierto.com\/blog\/descarga.php?file=knob with images.zip\" alt=\"\"><\/a>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En esta ocasi\u00f3n hay tres formas de crear un Knob o control de perilla, los muy conocidos en el ambiente de audio; digo tres formas porque el primer control de usuario lo dibuja todo mediante m\u00e9todos gr\u00e1ficos con el apoyo de la clase ClsNeumorphism. El segundo utiliza tiras de im\u00e1genes las cuales contienen fotogramas rotados <a href='https:\/\/leandroascierto.com\/blog\/control-de-usuario-knob-o-perilla\/' class='excerpt-more'>[&#8230;]<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,116],"tags":[192,191,193,167,69],"class_list":["post-1090","post","type-post","status-publish","format-standard","hentry","category-controles-de-usuarios","category-ocx","tag-audio","tag-knob","tag-media","tag-usercontrol","tag-vb6","category-26-id","category-116-id","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/posts\/1090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/comments?post=1090"}],"version-history":[{"count":15,"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/posts\/1090\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/posts\/1090\/revisions\/1311"}],"wp:attachment":[{"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/media?parent=1090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/categories?post=1090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leandroascierto.com\/blog\/wp-json\/wp\/v2\/tags?post=1090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}