Mar 092023
 

Esta es una actualizacion del post anterior donde no había quedado conforme con la velocidad de el dibujado de dicho control, anteriormente estaba trabajando con GDI+ pero al este no utilizar aceleración por hardware el repintado se hacia muy lento, así que decidí intentarlo con Direct2D y el resultado fue deslumbrante para mi, me consto un poco entender esta nueva tecnología pero con ayuda de The trick , fafalone, baka y Frank Schüler pude lograr migrarlo, también he realizado otros mejoras visuales y funcionales.

Para poder utilizar Direct2D he recurrido a la librería Oleexp.tlb esta ya esta incluida en el .zip de descarga, para lo que no esta familiarizado con los archivos .tlb estos se compilan junto al ejecutable y no es necesario incluirlos en la instalación de la aplicación final, tengan en cuenta si cuando abren los ejemplos no se carga la librería tendrá que hacerlo manualmente desde el menú Proyectos/Referencias y luego dan al botón Examinar y buscan dicha librería junto a la carpeta ya descomprimida.

Para quienes estén trabajando con Windows 7, en los ejemplos utilizo la fuente «Segoe MDL2 Assets» para algunos iconos, dicha fuente no esta instalada por defecto en Windows 7, por lo tanto si quieren verla correctamente deberán descargarla e instalarla.

May 142022
 

Este proyecto lo había comenzado un par de años atrás luego lo abandoné, así que me decidí a retomarlo, si tendría que comenzarlo de cero hoy cambiaria muchas cosas ya que no son las más óptimas, pero esto no impide que el calendario funcione bien.

Ahora bien el control se trata de un calendario al cual podemos añadir eventos, esto puede servir para muchas cosas como ser mostrar vacaciones de personal, eventos de cobro, turnos, actividades de tiempo o mostrar de manera gráfica intervalos de fecha.

El control tiene soporte para hacer drag & drop de los eventos, tal como poder modificar con el mouse su rango de fecha, si presionamos la tecla Ctrl y hacemos drag & drop duplica este evento.

Luego la parte de entrada de datos queda a cargo del programador, en los ejemplos agregué unos formularios de muestra, lo que no hice fue crear una series de eventos, pero es posible si se tiene un poco de paciencia, cualquier duda sobre esto último puedo dar una guía de cómo hacerlo.

Dentro de los ejemplos en la carpeta «Advance» encontrarán un ejemplo enlazando el calendario a una base de datos de SQLite, deberán agregar a la referencia a la dll J3cnn.dll

Los eventos del calendario no se manejan por índice sino por keys esto porque internamente éstos son ordenados por fecha y de esta forma se pierde el índice (esto no gustó mucho cómo lo encaré de un principio).

El control no tiene ninguna dependencia, inclusive los iconos son pintados con líneas.

La rueda del scrollbar funciona correctamente cuanto está compilado, esto lo hice así ya que no utilicé Safe subclass, para evitarme dolores de cabeza al programar lo deje así, compilado funciona correctamente lo mismo para el evento MouseLeave. Si a alguien le es necesario que funcione en el ide puede quitar el «If App.LogMode Then».

Para ir cerrando sé que hay muchas cosas que quedaron pendientes, me gustaría que comenten si habría que implementar algo o corregir, también si ven algún error; así de esa manera me es más fácil. En los primeros días de subida seguramente lo esté actualizando frecuentemente a medida que me informen o encuentren detalles.

ucCalendar_Month.png
ucCalendar_Week.png
ucCalendar_Day.png
ucCalendar_Year.png

A continuación un detalle rápido de sus funciones y propiedades:

AddEvents: Función principal para agregar eventos al calendario, parámetros requerido; sujeto (titulo descriptivo), fecha y hora de inicio, fecha y hora de finalización y color del evento, el resto de los parámetros son opcionales, valor de retorno una key del evento.
CenterCalenarInNow: Mueve el scroll a la hora actual.
Clear: Elimina todo los eventos.
DateValue: Asigna o retorna la fecha actual del calendario.
DayHaveEvents: Retorna True/False si hay eventos en un día especifico.
DropDownColor: Cuando hay muchos eventos en un día y en el modo de vista Mes hay más de los que se pueden mostrar, se muestra una barra desplegable la cual podemos cambiar el color con esta propiedad.
EventsCount: Cantidad de eventos agregados.
EventsRoundCorner: Propiedad booleana para mostrar o no esquinas redondeadas en eventos y botones.
FirstDayOfWeek: Aquí podemos asignar que día queremos que se muestre como primer día de la semana, por defecto usa el del sistema.
GetAllEvents: Obtiene una colección de las keys de los eventos agregados.
GetEventData: Obtiene los datos de un evento, su primer parámetro es la key del evento la cual podemos obtenerla con GetAllEvents o por algún evento, el resto de los parámetros son valores de retorno.
GetEventsFromDay: Retorna una colección de keys de los eventos de un día en especifico,
GetSelectionRangeDate: Función para obtener el rango de fechas seleccionada.
HeaderColor: Color de la cabecera y parte de la temática.
HiddeEvent: Oculta el evento, útil para filtrar.
LinesColor: Color de las líneas.
Redraw: Habilita o deshabilita el repintando del calendario, esto sirve para acelerar la carga de eventos.
RemoveEvent: Elimina un evento.
Refresh: Refresca el repintado calendario.
SelectedEvent: Retorna el evento seleccionado.
SelectionColor: Color de la selección.
SetStrLanguage: Aqui podemos pasar la traducción de las palabras utilizadas.
ShowToolTipEvents: Si se quiere mostrar o no la ventana tooltip, esta se puede remplazar por otra personalizada y con informacion más detallada. Véase los eventos EventMouseEnter y EventMouseLeave.
Update: Es más completo que refresh, este vuelve a reordenar por fecha y alfabéticamente los evento, recalcula la posición y por último repinta todo.
UpdateEventData: Función para actualizar los datos de un evento. Debe pasarse la key del evento que queremos modificar.
UserCanChangeDate: Habilita o deshabilita para que el usuario pueda cambiar la pagina actual del calendario.
UserCanChangeEvents: Habilita o deshabilita si el usuario puede cambiar los eventos (mediante estiramiento o arrastre).
UserCanChangeViewMode: Oculta todos los botones en la parte superior de la parte derecha. De esta forma el usuario no puede cambiar el modo de vista o bien el programador toma el control de que vista quiere mostrar.
UserCanScrollMonth: En el modo de vista mes, se puede scrollear infinitamente si necesidad de cambiar de página, esto sólo si se habilita esta opcion.
ViewMode: Cambia por código en el modo de vista (Dia, Semana, Mes, Año)

Eventos:

DateBackColor: Al dispararse este evento podemos elegir según la fecha u hora el color de fondo de la celda, así como también su HatchStyle.
DateChange: Cuando el usuario cambia de página el calendario se dispara este evento.
DragNewEvent: Cuando el usuario tiene la presionada la tecla Control y hace drag & drop el evento se duplica, o sea un nuevo evento es agregado por el usuario, con este evento somos informados y así podremos guardar en la base de datos o como se lo esté manejando.
DropDownViewMore: Evento cuando se presiona el botón de ver más, este botón se encuentra en la vista «Meses», aparece cuando hay muchos eventos en un día y no entran en la celda, al presionar este cambiará a modo de vista = «Día», esto podemos cancelarlo y mostrar una ventana personalizada con los eventos del día, los eventos del día los podemos recuperar con GetEventsFromDay.
EventChangeDate: Este evento se dispara cuando el usuario hace drag & drop o cambia el tamaño del evento con el mouse. es útil para almacenar en la base de datos las nuevas fechas.
EventMouseEnter: Cuando el mouse entra sobre un evento.
EventMouseLeave: Cuando el mouse sale por encima del evento.
EventClick: Click en un evento.
PreDateChange: Antes de que el usuario pagine hacia otra fecha, aquí podemos cancelarlo.
PreEventChangeDate: Antes que el usuario cambie los datos de un evento con del drag & drop o el mouse, este evento es muy útil para impedir arrastrar eventos en ciertas fechas u horas en los que no queremos que se agregue un evento.


Actualización 16/05/2022:

  • En el ejemplo con SQLite se corrigió los tipos de campos de la base de datos
  • se almacenaron las variables booleanas como 1 y 0 para no tener conflictos en idiomas no español.
  • En los campos fechas se convirtió a formato Unix para que el ejemplo corra bien con cualquier configuración regional.

Actualización 13/05/2024:

  • Se añadió la propiedad StartCalendar para indicar el horario de comienzo del calendarito.
  • Se añadió la propiedad EndCalendar para indicar el horario de finalización del calendarito.
  • Se añadió la propiedad CalendarInterval para indicar las divisiones del calendario, por ejemplo cada 10, 15, 20 o 30 minutos, en este punto utilizar intervalos que la suma den 60 minutos

Un usuario @SearchingDataOnly de vbForum sugirió esta versión de RC6 para SQLite si alguien le interesa puede descargarlo aquí (primer post)

Abr 182022
 

Para esta ocasión un control de texto personalizable con varias opciones y diseño, también un multifunción ya que tiene distintos tipos de entrada, intenta sobre todo un aspecto al que solemos ver en html5/Bootstrap etc.

ucText1.png

El tipo de entrada lo podemos seleccionar mediante su propiedad «InputType»

[IT_Text] = 0 '// Texto normal
[IT_Numeric] = 1 '// Solo Números
[IT_Date] = 2 '// Solo Fecha
[IT_Time] = 3 '// Solo Hora
[IT_PasswordChar] = 4 '// Entrada de tipo Contraseña
[IT_MultiLine] = 5 '// Entrada de tipo Multilínea
[IT_Desimal] = 6 '// Numero decimales
[IT_LettersOnly] = 7 '// Solo letras
[IT_DropDown] = 8 '//Para que el control sea de lectura y al presionarlo llame el evento "DropDown" y pueda desplegar una lista (simulación de un ComboBox DropList style)

Luego tenemos la propiedad «RightButtonStyle» que es para elegir como queremos que se visualice la parte derecha del control, con las siguientes opciones

[RS_None] = 0 '// Ninguna el control lizo
[RS_Resizable] = 1 '// opcion utilizada en texto multilínea para expandir su tamaño
[RS_Icon] = 2 '// muestra el icono asignado
[RS_SpinButton] = 3 '// en tipos de entrada numéricos/fecha/hora poder cambiar su valor mediantes botoncitos mas/menos
[RS_ClearText] = 4 '// Una cruz a la derecha para borrar el contenido del textbox
[RS_ShowPassword] = 5 '//un icono que al presionarlo muestra la contraseña en el tipo de entrada contraseña
[RS_DropDown] = 6 '// un icono flecha abajo que al presionarlo llama el evento "DropDown" para mostrar una lista.

ucText2.png

Una descripción rápida de sus propiedades:

BackColor: Color de fondo
BackColorOnFocus: Corlo de fondo cuando el control toma el foco
BordeColor: color del borde.
BordeColorOnFocus: color de borde cuando el control toma el foco.
BordeRadius: para ajustar las esquinas redondeadas.
BordeStyle: enumeración; sin borde, borde normal, solo una línea inferior.
BordeWidth: ancho del borde.
ButtonGradient: los botones de los laterales se mostrarán con un pequeño degradado de su color hacia el blanco.
Caption: agrega una etiqueta en la parte superior izquierda (aconsejo usar fuentes escalables).
CueBanner: agrega una descripción en gris cuando el control está vacío.
EditGradient: muestra un degradado en la parte editable o donde tipeamos.
HotBorder: cuando se pasa el control sobre el control, el borde se resalta mezclando el color de borde normal y el del foco.
ImgLeftFillColor: si ImageFillStyle es igual a FS_Solid muestra el color seleccionado.
ImgLeftFillStyle: si se quiere mostrar el color ImageLeftFillColor o dejar el mismo color del backcolor.
ImgLeftShowMouseEvents, si se quiere o no mostrar una animación de botón al pasar el mouse en la parte izquierda.
ImgLeftSize: Tamaños del cuadrado de la imagen seleccionada (la imagen se selecciona mediante click derecho – Propiedades).
ImgRightFillColor: (Lo mismo que ImgLeftFillColor pero a la derecha).
ImgRightFillStyle: (Lo mismo que ImgLeftFillStyle pero a la derecha).
ImgRightShowMouseEvents: (Lo mismo que ImgLeftShowMouseEvents pero a la derecha).
ImgRightSize: (Lo mismo que ImgLeftSize pero a la derecha).
InputType: tipo de entrada (las detalle mas arriba).
MaxValue: para establecer un valor máximo en los tipos de entrada Número/Fecha/Hora (no aplica en tipo decimal).
MinValue: para establecer un valor mínimo en lo los tipo de entrada Número/Fecha/Hora (no aplica en tipo decimal).
OnFocusBigBorder: un borde grueso que se muestra al tomar el foco (no quise usar el shadow clásico).
OnFocusSellAll: se auto selecciona el contenido al tomar foco el control.
OnKeyReturnTabulate: si se presiona Enter tabula hacia el próximo control.
ParentBackColor: es el color del fondo del contendedor, este se asigna automáticamente al agregar el control al formulario pero en caso que éste cambie hay que cambiarlo en el control, es para que en las esquinas redondeadas no se vea ese color.
RightButtonStyle: es la apariencia del botón derecho (las detallé más arriba).
ShortDateFormat: formato de fecha corto, si esta propiedad esta vacía, toma el formato del sistema (recomiendo DD/MM/YYYY).
TextConvert: convierte el texto en; Normal, Minúscula, Mayúscula



Para elegir las imágenes click derecho sobre el control y dentro del menú seleccionar «Propiedades», o bien dentro de la ventana de propiedades en la propiedad, «Personalizado», también dentro de esa página de propiedades se puede poner el texto multilínea y/o texto Unicode.


Funciones:

ShowBalloonTip: muestra un globo de texto sobre el control (requiere manifest).
HideBalloonTip: oculta del globo de texto.
ScrollToBottom: scrolea hacia la última línea de texto (en tipo de entrada multilínea).
SetMinSize: asigna un tamaño mínimo del control, puede ajustarse por el usuario cuando este es RightButtonStyle = RS_Resizable.
SetMaxSize: asigna un tamaño máximo del control, puede ajustarse por el usuario cuando este es RightButtonStyle = RS_Resizable.

Si bien el control lo testee varias veces es muy probable que tenga algunos bugs, sobre todo en la parte de formatos de fecha.

Vale aclarar que algunas funciones y propiedades fueron tomadas del control TextBox de Krool y modificadas a necesidad.

El ucText.ctl debe acompañarse con el mIOleInPlaceActivate.bas y PropertyPage1.pag (este ultimo solo si se quiere usar imágenes en modo de diseño), los demás son opcionales según su uso.

Cualquier error reportarlo aquí en los comentarios.

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.

Aquí puedes ver la Documentación del control

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

A continuación una tabla de sus propiedades.

AllowColumnDragColImagesEventsGetHotCellRowAlign
AllowColumnSortColImgAlignGetSelectionRangeRowBackColor
AllowEditColImgListAddImageGetTopRowRowChecked
AutoHeightAllRowsColImgListClearGetVisibleRowsRowDelete
AutoHeightRowColImgListHeightGetWindowsDPIRowFont
AutoWidthAllColumnsColImgListRemoveImageGradientStyleRowForeColor
AutoWidthColumnColImgListWidthGroupByColumnRowHeight
BackColorColImgMonocromeGroupColapseRowHidden
BackColorAltColInitImgListGroupExpandRowIdent
BorderColorColLabelsEventsHeaderBackColorRowIsFullRow
BorderRadiusColLeftHeaderFontRowIsGroup
BorderVisibleColMinWidthHeaderHeightRowMoveTo
CellAlignColMoveToHeaderImageAlignRowRef
CellBackColorColRefHeaderImgListAddImageRowsBackColor
CellEditionLockedColsCountHeaderImgListClearRowsBackColorAlt
CellFontColSortHeaderImgListCountRowsCount
CellForeColorColSortOrderHeaderImgListHeightRowSelectorBkColor
CellImageIndexColTagHeaderImgListRemoveImageRowSelectorWidth
CellStartEditColTextHiddeHeaderImgListWidthRowTag
CellTagColumnsAutoFitHeaderInitImgListRowWordBreak
CellValueColumnTextHeaderLinesHorizontalWidthScrollBarStyle
CellWordBreakColUserResizeLockedHeaderLinesVerticalWidthSelectionColor
CheckStyleColWidthHeaderTextAlignSelectionMode
ChrW2ColWordBreakHeaderTextWordBreakSetCurCell
ClearCurColInsertRowSetMargin
ColFontCurRowLastRowIsFooterSetSelectionRange
ColForeColorEnsureCellVisibleLinesHorizontalColorShowHotRow
ColFormatFillFromRSLinesHorizontalWidthShowHotRow
ColHeaderForeColorFixedColumnsLinesVerticalColorSort
ColHeaderImgIndexFixedRowsLinesVerticalWidthSwapCol
ColHiddenFontParentBackColorSwapRow
ColImageListCountGetCellRectRedrawUnGroup

VER DOCUMENTACION ONLINE

Gracias Yvan por el aporte

Descargar UserControl y Ejemplos (Actualizado 08/11/2022)

Descargar OCX (Actualizado 21/01/2022)


Historial de cambios

Continue reading »
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

May 052013
 

Este es un OCX  llamado ImageWebSearch.ocx que sirve para buscar imágenes en la web, es algo similar al CommonDialog pero en vez de seleccionar un archivo en disco, lo seleccionamos de la web, luego está en ustedes manipular la url de la imágen obtenida. El OCX cuenta con dos motores de búsqueda el de Google y Devianart y tiene casi la totalidad de sus filtros, es totalmente asíncrono, por lo que no cuelga la aplicación al realizar peticiones, esto es algo importante porque al bajar el scroll de la lista, automáticamente va cargando nuevas búsquedas, osea va paginando el Listview con el scroll vertical (exactamente como lo hace Google Facebook etc.)

Dentro de la carpeta de descarga está el código de fuente, opté por compilarlo en OCX porque eran varios módulos,  formularios, controles de usuario y ademas un archivo de recurso exclusivo, por lo que compilado es mas fácil de utilizar.

Un punto en contra es que para la búsqueda utiliza los AJAX de los motores antes mencionados, por lo tanto si estos llegaran a cambiar con el tiempo el ocx quedaría obsoleto. Otra cosa a tener en cuenta es que la aplicación que lo implemente debe utilizar los temas de windows, de lo contrario el borde de las imágenes no se  mostrara correctamente.

Me quedaron algunas cosas que me hubiera gustado implementar, por ejemplo modificar el filtro desde código, pero al ser tantos me dió pereza  así que dejo en manos de ustedes si lo quieren hacer.

Requerimientos Windows XP y posteriores (Aunque no lo probé en XP, después edito.)

CtrlImageWebSearch.png

CtrlImageWebSearch2.png