Dic 282021
 

En esta ocasión 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étodos gráficos con el apoyo de la clase ClsNeumorphism. El segundo utiliza tiras de imágenes las cuales contienen fotogramas rotados porcentualmente, quienes diseñan estas imágenes toman en cuenta el movimiento de la sombra, haciendo una simulación en 3D de la perilla en su rotación. Por último se encuentra otro ejemplo empleando el usercontrol Labelplus donde ponemos una imagen de una perilla que hallamos descargado de internet o diseñado nosotros, y otro Labelplus por encima de este con la imagen de la flecha la cual se rotará según el ángulo que le asignemos al Labelplus.

También encontraran la clase clsSubClass la cual puede ser opcional, esta se utilizó para subclasificar el formulario y asi interceptar la rueda del mouse para rotar dichos controles, de todas formas lo más común es operarlos mediante el mouse con el botón izquierdo presionado subiendo o bajando el cursor.

ucKnob con métodos gráficos (Recomendado)

Knob1.png

.

.


.

ucKnobStrip y Labelplus

(las imágenes que subí en los ejemplos son de alta calidad y tamaño, queda en ustedes editar estas imágenes con la calidad/tamaño mas adecuado lograr el equilibrio entre diseño/memoria/procesador.)
Las tiras de imágenes fuero extraídas de JSAudioKnobs

Knob2.png Knob3.png
Sep 282021
 

Un nuevo UserControl u ocx (para quienes quieran compilarlo), tal como su nombre lo indica es una Grilla. Si bien ya hay algunas dando vuelta y muy buenas por cierto, en este caso intenté buscarle un lado más moderno, nunca había utilzado este control así que me fui basando en las diferentes opciones que hay por la web, tanto las de vb6 (LynxGrid, IGrid, VBFlexGrid) como las de uso web por ejemplo ComponentOne y DevExpress. Este control me llevó mucho tiempo ya que son muchas líneas de código, como siempre no he realizado ningún archivo de ayuda, pero dentro de los ejemplos encontrarán algunos ejemplos muy funcionales en tiempo real. Al ser un control con muchas opciones seguramente se me habrán escapado muchas cosas, las cuales podré ir agregando o corrigiendo si me lo hacen saber, algo que no pude hacer en esta grilla fue implementar la funcionalidad MergedCell (celdas combinadas), pero el resto creo está casi todo.

Un problema que encontré tarde fue que por cuestiones estéticas utilicé otro use sercontrol «ucScrollBar» tal como ya lo había hecho en el ucList, pero no había notado que si se cambia el nombre del proyecto el ucScrollBar pierde la referencia y se convierte en un PictureBox, para que esto no pase es necesario abrir el ucGridPlus con el notepad y cambiar «Proyecto1» por el nombre del proyecto en que lo vayan a emplear, de momento no encontré una mejor solución.

El control puede cargar imágenes de muchas formas y formatos tanto ColImgListAddImage y HeaderImgListAddImage pueden cargar la imagen desde array de bits, archivo, url, url base64, hbitmap, hIcon y stream; las imágenes pueden tratarse como vectores donde podemos asignarle el color según el forecolor de la celda o podemos poner imágenes comunes, también cuenta con dar una propiedad «radio» para dar forma circular o con puntas redondeadas.

En el primer ejemplo encontrarán algunos gráficos, Progresos y ranking que se muestran en cada fila, en esos ejemplos utilicé un módulo externo para usar un CustomDraw, esto con el conocimiento adecuando se pueden hacer infinitas cosas. No es parte de la grilla en si, de este modo es más fácil para hacer cosas a necesidad de cada uno.

En el caso de los controles, es lo mismo, no son parte de la grilla, el ucGridPlus es un contendor, donde podemos poner Combobox, Datepiker entre otros y con algunas propiedades de este podemos ubicar dichos controles sobre la celda simulando que forman parte de ella.

La grilla cuenta con la posibilidad de agregar eventos a las imágenes y texto de la celda, de esta forma se pueden lograr algunos lindos efectos como verán en los ejemplos.

Es necesario tener instalada la fuente «Segoe MDL2 Assets» en windows 10 ya está por defecto, esta se utilizo para algunos iconos.

Para la vercion compilada (OCX) utilice el control de usuario UniTextBox para que acepte caracteres unicodes en modo de edición.

Para cerrar quiero aclarar que esto por momento es algo así como una beta y hasta que no se use y se encuentren errores no los podré detectar, sé que muchas cosas me quedaron en el tintero pero por ahora se me agotó la energía.

A continuación una tabla de propiedades, Rutinas y funciones del ucGridPlus

ucGridPlus0.png ucGridPlus2.png ucGridPlus3.png ucGridPlus5.png ucGridPlus6.png ucGridPlus9.png ucGridPlus11.png ucGridPlus12.png

A continuación una tabla de sus propiedades.

AllowColumnDrag ColLabelsEvents HeaderLinesVerticalWidth
AllowColumnSort ColLeft HeaderTextAlign
AllowEdit ColMinWidth InsertRow
AutoHeightAllRows ColMoveTo LastRowIsFooter
AutoHeightRow ColRef LinesHorizontalColor
AutoWidthAllColumns ColsCount LinesHorizontalWidth
AutoWidthColumn ColSort LinesVerticalColor
BackColor ColSortOrder LinesVerticalWidth
BackColorAlt ColTag ParentBackColor
BorderColor ColTextHidde Redraw
BorderRadius ColumnsAutoFit RowAlign
BorderVisible ColumnText RowBackColor
CellAlign ColUserResizeLocked RowChecked
CellBackColor ColWidth RowDelete
CellEditionLocked ColWordBreak RowFont
CellFont CurCol RowForeColor
CellForeColor CurRow RowHeight
CellImageIndex EnsureCellVisible RowHidden
CellStartEdit FillFromRS RowIdent
CellTag FixedColumns RowIsFullRow
CellValue FixedRows RowIsGroup
CellWordBreak Font RowMoveTo
CheckStyle GetCellRect RowRef
ChrW2 GetHotCell RowsBackColor
Clear GetSelectionRange RowsBackColorAlt
ColFont GetWindowsDPI RowsCount
ColForeColor GroupByColumn RowSelectorBkColor
ColFormat GroupColapse RowSelectorWidth
ColHeaderForeColor GroupExpand RowTag
ColHeaderImgIndex HeaderBackColor RowWordBreak
ColHidden HeaderFont ScrollBarStyle
ColImageListCount HeaderHeight SelectionColor
ColImagesEvents HeaderImageAlign SelectionMode
ColImgAlign HeaderImgListAddImage SetCurCell
ColImgListAddImage HeaderImgListClear SetMargin
ColImgListClear HeaderImgListCount SetSelectionRange
ColImgListHeight HeaderImgListHeight ShowHotRow
ColImgListRemoveImage HeaderImgListRemoveImage Sort
ColImgListWidth HeaderImgListWidth SwapCol
ColImgMonocrome HeaderInitImgList SwapRow
ColInitImgList HeaderLinesHorizontalWidth UnGroup

Descargar UserControl y Ejemplos

Descargar OCX


Historial de cambios

Continue reading »
Jul 072021
 

UserControl multi función el cual cumple con las funcionalidades de los controles ListBox, ComboBox, Lista Desplegable, Menú y Autocomplete de un TextBox. La novedad es que adiciona varios extras y cambios estéticos, como ser bordes redondeados, sombras, ítems personalizados, soporte para imágenes Png y estándares, a las imágenes se le puede aplicar esquinas redondeadas y cambios de colores para el caso de imágenes vectoriales (PNG), grupos de ítems, barras separadora, filtro y subtexto.

Para el caso del estilo ListBox los cambios de propiedades y adición de ítem no refrescan automáticamente, es necesario llamar a Update; esto es con la intención ganar la velocidad (aunque me quedó la duda si fue lo correcto haberlo hecho así)

Quizás hay muchas cosas que me gustaría aclarar pero por el momento sólo voy a dejar unos cuantos ejemplos donde podrán aprender a emplearlo fácilmente.

ucListPlus1.png ucListPlus2.png ucListPlus3.png ucListPlus4.png ucListPlus5.png

Actualizado: 05/08/2021 (corrección en algunas fallas de la sombra en ventanas padres)

Mar 182021
 

En este caso se trata por un lado de un Módulo clase y por otro un Usercontrol para crear una interfaz de usuario moderna llamada Neumorphism o Neomorfismo, la cual comenzó a ponerse de moda a partir del 2020, si bien está pensada para aplicaciones móviles o webs no veo motivo para no implementarlo en nuestro querido vb6, al menos en aplicaciones pequeñas para no sobrecargar mucho la memoria y ralentizar nuestra app. El motor de todo esta basado en GDI+.

Con el módulo clase hay un ejemplo donde podemos jugar con las propiedades de la clase y otro formularios con algunos ejemplos graficados.
Además este permite dibujar un Path de GDI+ con el cual se utilizó un módulo extra, donde se puede crear distintas formas (Shapes) y se les puede aplicar el estilo, aprovecho para agradecer a Eduardo por tomar parte de las rutinas de su ShapeEx.



Con el Usercontrol hay tres ejemplos aplicados. No voy a detallar todas las propiedades, es cuestión de meter mano y jugar un poco, son las mismas del módulo. Con los ejemplos esta acompañando el usercontrol «LabelPlus» que es para agregar texto e iconos a las formas, (no quise volver a programar todo esto por eso utilicé dos usercontrols).

Ya más adelante voy a subir un reproductor de música en el que estoy trabajando donde puede verse todo esto aplicado.

Por último quiero aclarar que todo esto funciona más rápido cuando está compilado..

Neumorphism1.png Neumorphism2.png Neumorphism3.png Neumorphism4.png Neumorphism5.png
Sep 012020
 

Se trata de una suite de user controls, para crear gráficos estadísticos. Son cuatro controles pero algunos poseen estilos diferentes, se podría decir que están los principales y más utilizados. Cada user control es independiente del otro, por lo que no requiere implementar toda la suite, por supuesto esto no lo hace más óptimo en reducción de código, pero es esa costumbre de no depender de nada, son muchas lineas de código y seguramente habrá más de algún bugs dando vuelta, por mi parte creo que hasta aquí llegaron mis ganas con esto, por supuesto que si alguien encuentra algún error o sugerencia se agradece informar para corregirlo.

En la descarga se encuentra un ejemplo de cada uno y un proyecto principal que abarca todos y algunos agregados para simular un Dashboard.

DashBoard.png
PieChart.png
DonutChart.png
BarChart1.png
BarChart2.png
AreaChart.png
TreeMaps.png
TreeMaps2.png

Actualizado 21/12/2021, se añadió la función image() la cual retorna una imagen del grafico para poder imprimirla, esta tiene como parámetros opcionales Ancho y Alto para poder ajustar a la hoja de impresión, junto a los ejemplos individuales hay una demostración de como imprimir.

Abr 292020
 

Esta es una versión de este control el cual carecía de la barra de progreso para mostrar un porcentaje era más bien de esos que sólo giran. En esta versión se puede hacer ambas cosas, pero está más abocada a mostrar el progreso, prácticamente con un poco de ingenio se pueden lograr todos los diseños que se ven por la web de este tipo de controles tal como se muestra en la primer imágen; la segunda imágen es la página de propiedades del usercontrol, este sirve sólo para formar una paleta degradada de colores, donde podemos seleccionar y armar nuestra paleta a gusto. el control cuenta con muchas propiedades por lo que es necesario que metan mano y jueguen con éste para aprender para qué sirve cada una, yo no tengo ganas de hacer un archivo de ayuda :), pero mirando los ejemplos es fácil darse cuenta para qué sirve cada una.

ucProgressCircular2020.png
ucProgressCircular2020.png

21/09/21 Actualizado, se corrigió un error en la pagina de propiedades, al cargar el control en otro proyecto fallaba la el método de obtener el nombre del proyecto. Gracias Eduardo por la función GetProjectName

Sep 102018
 

Este proyecto se lo robe a mi amigo Coco y le hice un par de cambios que quede todo dentro del mismo UC, se trata de un user control para hacer una paleta de colores tal como muestra la imagen, este carga es una imagen png (de una paleta de colores), que puede ser leída desde disco o archivo de recurso  (no lo carga en modo de diseño por ahorrar una ventana de propiedades.) al hacer clic en la paleta lanza un evento del color seleccionado, también cuenta con un evento que muestra el color donde pasa el cursor.

ucPalette.png