Comunidad Gambas-es
Editor de Temas y colores - Versión para impresión

+- Comunidad Gambas-es (https://gambas-es.org)
+-- Foro: Gambas (https://gambas-es.org/forum-3.html)
+--- Foro: Aplicaciones/Fragmentos de Código (https://gambas-es.org/forum-8.html)
+--- Tema: Editor de Temas y colores (/thread-1803.html)

Editor de Temas y colores - Harpo - 03-10-2024

Saludos,

Les traigo una pequeña aplicación que he desarrollado para editar temas de Gambas, por si a alguien le es de utilidad. Estaba con un editor de ficheros SVG y el editor de Gambas no tiene definido ese formato, lo más parecido es HTML. Y en Gnome en modo oscuro se visualiza muy mal. Así que me puse a investigar como cambiarlo.

Para quien el interese, el editor de Gambas (gb.form.editor) tiene dos propiedades:
  • Mode: cómo identifica el código.
  • Highlight: como formatea el código, colores, tipo de letra.
En ambos casos hay una lista predefinida: Gambas - HTML - CCS - SQL - ....

Todo lo relativo al formateo de código está en el componente gb.Highlight. Dentro tenemos 3 clases:
  • TextHighlighter: la clase padre de todos los formateadores de código, es estática. Y contiene las palabras claves (States) y su formato.
Por ejemplo el siguiente código lista todos los estados de todos los TextHighlighters:
Código:
   Dim sHighLighter, sState As String

   For Each sHighLighter In TextHighlighter.List
      For Each sState In TextHighlighter[sHighLighter].States
         Debug sHighLighter & "." & sState
      Next
   Next

' Salida HTML
' html.Attribute
' html.Comment
' html.Doctype
' html.Entity
' html.Markup
' html.Normal
' html.Value
  • TextHighlighterStyle: Es la clase que define el estilo usado para pintar los States,
  • TextHighlighterTheme: Unifica los anteriores, un tema básicamente es un conjunto de estilos:
Código:
[Gambas Highlighting Theme 1.0]
Attribute="#FFFFFF,Bold"
Comment="#33D17A"
Doctype="#929291,Bold"
Entity="#E67E22,Bold"
Markup="#99C1F1,Bold"
Normal="#FFFFFF"
Value="#F5C211"
Background="#494949"

Y aclarado lo anterior, la aplicación. Es un 3 en 1.

Editor de Temas, tiene dos áreas:
  • En la parte superior
    • Un ComboBox para seleccionar el Highlighter y un CheckBox para incluir todos los estados definidos, no solo los del Highlighter seleccionado.
    • Un ColumnView con los estilos de base, en negrita y subrayado los estilos propios del Highlighter seleccionado.
    • Un segundo ColumnView con los estilos que queremos en el nuevo tema.
    • Una columna de botones para mover estilos entre los dos ColumnView
    • Unos controles a la derecha para cambiar los estilos del nuevo tema: color y tipos de letra.
    • 3 botones: para probar el nuevo tema en el editor de abajo, para guardar el tema y para cargar un fichero con la definición de un tema.
  • En la parte inferior un editor y un FileBox para cargar ficheros en el editor.
[Imagen: p6S8QTY.png][Imagen: bHsoDT8.png]

Colores, básicamente es un selector de colores y dos utilidades: Color Merge y SetAlpha. El código de Gambas usa esas dos funciones muy habitualmente y siempre estaba probando números. Una observación, el selector de colores de este formulario se actualiza cuando seleccionamos un elemento en cualquiera de los dos ColumnView del formulario anterior. Para ello usa una clase Dictionary, un Collection con eventos y algunas cosas más.

[Imagen: APfPYCC.png]

Palette. Un generador de paletas de colores usando Color.HSV. Se selecciona el valor del Spinbox de arriba a la izquierda y pulsando el botón de debajo genera la paleta en un GridView. Abajo a la derecha es lo mismo pero pudiendo modificar tres parametros: HUE - Saturación - Valor.
[Imagen: HQ6UV0s.png]

Clase Dictionary. En ocasiones hecho de menos poder añadir información a una clase Collection, además de el par Key-Value y de ahí que haya desarrollado esta clase.
Deriva de Collection pero no usa herencia, reimplementa la clase. En vez de usar un Variant para Value usa una clase _Dictionary_Item, un Variant[2].
Las diferencias son las siguientes:

Código:
   Dim hCol As Collection
   Dim hDict As Dictionary
   Dim hItem As _Dictionary_Item
   
   Dim sKey As String
   Dim vValue, vAttrib As Variant
   
   ''Asignar valor: _put
   hCol[sKey] = vValue      'Collection
   hCol.Add(vValue, sKey)
   
   hDict[sKey] = vValue         'Dictionary
   hDict[sKey].Attrib = vAttrib
   hDict.Add(vValue, sKey, vAttrib)
   
   'Esto no funciona!!
   With hDict[sKey]
      .Value = vValue
      .Attrib = vAttrib
   End With
   
   ''Leer valor: _get
   vValue = hCol[sKey]        'Collection
   
   hItem = hDict[sKey]    'Dictionary devuelve un objeto _Dictionary_Item
   vValue = hDict[sKey].Value
   vAttrib = hDict[sKey].Attrib
   
'
   With hDict[sKey]
      vValue = .Value
      vAttrib = .Attrib
   End With

   ''Bucle lectura
   For Each vValue In hCol
      '.....
   Next    
   For Each hCol
      '.....
   Next
   
   For Each hItem In hDict
      '.....
   Next
   For Each hDict
      '.....
   Next
   For Each sKey In hDict.Keys
      '.....
   Next
Y el proyecto con el programa. Espero que les sea de utilidad.
Un saludo, Harpo.
Una última observación sobre la clase Dictionary, tiene dos eventos:
  • Event Change(Key As String, Modify As Boolean)
  • Event Remove(Key As String)
Y funciona como cualquier evento:
Código:
cThemeColors = New Dictionary As "ThemeColors"

Public Sub ThemeColors_Change(Key As String, Modify As Boolean)      ''Dictionary event

   ' Se dispara al añadir un elemento al Dictionary o modificarlo.

End
Y una última observación, la clase Dictionary también emula a una JSONCollection, admite nulos. Por otro lado importa y exporta JSON:
  • Public Sub FromString(JSONString As String)     ''Load Dictionary from JSON string
  • Public Sub JSONLoad(JSONFile As String)      ''Load Dictionary from JSON file
  • Public Function ToString(Optional Indent As Boolean) As String             ''Export Dictionary to JSON string,
  • Public Function JSONSave(JSONFile As String, Optional Indent As Boolean) As Boolean   ''Save Dictionary to JSON file.
El Indent de las funciones no tiene relevancia, siempre indenta las cadenas o ficheros.

Y agradecimientos, parte importante del código no es mio. La función para formatear JSON es autoria de Tincho sino recuerdo mal. Las funciones para convertir colores de Shordi. Gracias a los maestros.

RE: Editor de Temas y colores - tincho - 03-10-2024

(03-10-2024, 20:44)Harpo escribió: Estaba con un editor de ficheros SVG

Me interesa el tema de los SVG, hice algunas funciones para editarlos ya que como sabes son XML y gambas tiene clases para abordarlos.
Me descargue tu programa para estudiarlo, luego te cuento.

RE: Editor de Temas y colores - Harpo - 03-10-2024

(03-10-2024, 21:25)tincho escribió:
(03-10-2024, 20:44)Harpo escribió: Estaba con un editor de ficheros SVG

Me interesa el tema de los SVG, hice algunas funciones para editarlos ya que como sabes son XML y gambas tiene clases para abordarlos.
Me descargue tu programa para estudiarlo, luego te cuento.

Yo estoy intentando crearme una clase SVGResources, básicamente un fichero de texto con el contenido de SVG sencillos y en un formato uniforme, para usarlos como iconos en las aplicaciones, y gestionarlos y editarlos para cambiar colores y demás. Y una clase SVGPicture para cada fichero individual.

La idea creo que se puede ver en esta pantalla:
[Imagen: asGUXzj.png]
Vamos intercambiando ideas, un saludo.
Harpo

RE: Editor de Temas y colores - Shordi - 04-10-2024

Buen aporte, sí señor!

RE: Editor de Temas y colores - Harpo - 04-10-2024

Actualizo el programa, no me había dado cuenta que estaba usando una versión antigua de la clase Dictionary.
Saludos, Harpo.