@vixoniccom/aqi 0.0.5 → 0.0.6-dev.0

package/configuration/appeareanceGroup/AppeareanceInputs.ts

@@ -1,41 +1,64 @@
 import { Label, NumberInput, SelectAssetKna, SelectInput, TextFormat, TextInput } from '@vixoniccom/modules'
+import { ShowValidations } from '../utils'
+
+const { personalizado, presetActive } = ShowValidations
 
 export const appeareanceInputs = [
+  new Label({ label: 'Tema predefinido' }),
+  new SelectInput({
+    id: 'themePreset',
+    label: 'Tema',
+    description: 'Elige un tema para aplicar un estilo visual completo. Selecciona "Personalizado" para configurar cada campo de estilo de forma individual.',
+    items: [
+      { label: 'Personalizado', value: 'personalizado' },
+      { label: 'Inferior alargado', value: 'preset1' },
+      { label: 'Lateral', value: 'preset2' },
+    ],
+  }),
+  new Label({ label: 'Fuentes', show: presetActive }),
+  new TextFormat({ id: 'aqiFont', label: 'Fuente del índice de calidad del aire', show: presetActive }),
+  new TextFormat({ id: 'stationFont', label: 'Fuente de estación que realizó la medición', show: presetActive }),
+  new TextFormat({ id: 'qualityFont', label: 'Fuente del mensaje sobre la calidad del aire', show: presetActive }),
+
   new Label({ label: 'General' }),
   new SelectAssetKna({ id: 'backgroundImage', label: 'Fondo', required: false, extensions: ['jpg', 'png'] }),
-  new Label({ label: 'Posición' }),
+  new Label({ label: 'Posición', show: personalizado }),
   new SelectInput({
     id: 'positionCard',
     label: 'Tipo de posición',
+    show: personalizado,
     items: [
       { label: 'Horizontal', value: 'horizontal' },
       { label: 'Vertical', value: 'vertical' },
     ],
   }),
-  new Label({ label: 'Diseño de la tarjeta' }),
+  new Label({ label: 'Diseño de la tarjeta', show: personalizado }),
   new NumberInput({
     id: 'topSeparationCard',
     label: 'Separación desde arriba',
     description: 'Separación de la tarjeta del margen superior',
+    show: personalizado,
   }),
   new NumberInput({
     id: 'leftSeparationCard',
     label: 'Separación desde izquierda',
     description: 'Separación de la tarjeta del margen izquierdo',
+    show: personalizado,
   }),
-  new NumberInput({ id: 'cardWidth', label: 'Ancho', required: false, description: 'Ancho de la tarjeta' }),
-  new NumberInput({ id: 'cardHeight', label: 'Alto', required: false, description: 'Altura de la tarjeta' }),
+  new NumberInput({ id: 'cardWidth', label: 'Ancho', required: false, description: 'Ancho de la tarjeta', show: personalizado }),
+  new NumberInput({ id: 'cardHeight', label: 'Alto', required: false, description: 'Altura de la tarjeta', show: personalizado }),
   new NumberInput({
     id: 'cardGap',
     label: 'Separación entre elementos',
     required: false,
     description: 'Separación entre los elementos de la tarjeta',
+    show: personalizado,
   }),
 
-  new Label({ label: 'Textos de la tarjeta' }),
-  new TextFormat({ id: 'aqiFormat', label: 'Formato del índice de calidad del aire' }),
-  new TextFormat({ id: 'stationFormat', label: 'Formato de estación que realizó la medición' }),
-  new TextFormat({ id: 'qualityFormat', label: 'Formato del mensaje sobre la calidad del aire' }),
+  new Label({ label: 'Textos de la tarjeta', show: personalizado }),
+  new TextFormat({ id: 'aqiFormat', label: 'Formato del índice de calidad del aire', show: personalizado }),
+  new TextFormat({ id: 'stationFormat', label: 'Formato de estación que realizó la medición', show: personalizado }),
+  new TextFormat({ id: 'qualityFormat', label: 'Formato del mensaje sobre la calidad del aire', show: personalizado }),
 
   new Label({ label: 'Datos' }),
   new TextInput({

package/configuration/utils.ts

@@ -0,0 +1,4 @@
+export const ShowValidations = {
+  personalizado: '({{themePreset}} === "personalizado" || !{{themePreset}})',
+  presetActive: '{{themePreset}} && {{themePreset}} !== "personalizado"',
+}

package/configuration.json

@@ -5,6 +5,53 @@
       "label": "Apariencia",
       "type": "group",
       "items": [
+        {
+          "type": "label",
+          "label": "Tema predefinido"
+        },
+        {
+          "id": "themePreset",
+          "label": "Tema",
+          "type": "select-input",
+          "description": "Elige un tema para aplicar un estilo visual completo. Selecciona \"Personalizado\" para configurar cada campo de estilo de forma individual.",
+          "items": [
+            {
+              "label": "Personalizado",
+              "value": "personalizado"
+            },
+            {
+              "label": "Inferior alargado",
+              "value": "preset1"
+            },
+            {
+              "label": "Lateral",
+              "value": "preset2"
+            }
+          ]
+        },
+        {
+          "type": "label",
+          "label": "Fuentes",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\""
+        },
+        {
+          "id": "aqiFont",
+          "label": "Fuente del índice de calidad del aire",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "id": "stationFont",
+          "label": "Fuente de estación que realizó la medición",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
+        {
+          "id": "qualityFont",
+          "label": "Fuente del mensaje sobre la calidad del aire",
+          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
+          "type": "text-format"
+        },
         {
           "type": "label",
           "label": "General"
@@ -22,42 +69,48 @@
         },
         {
           "type": "label",
-          "label": "Posición"
+          "label": "Posición",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "positionCard",
           "label": "Tipo de posición",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "select-input",
           "items": [
             {
-              "value": "horizontal",
-              "label": "Horizontal"
+              "label": "Horizontal",
+              "value": "horizontal"
             },
             {
-              "value": "vertical",
-              "label": "Vertical"
+              "label": "Vertical",
+              "value": "vertical"
             }
           ]
         },
         {
           "type": "label",
-          "label": "Diseño de la tarjeta"
+          "label": "Diseño de la tarjeta",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "topSeparationCard",
           "label": "Separación desde arriba",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "description": "Separación de la tarjeta del margen superior"
         },
         {
           "id": "leftSeparationCard",
           "label": "Separación desde izquierda",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "description": "Separación de la tarjeta del margen izquierdo"
         },
         {
           "id": "cardWidth",
           "label": "Ancho",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "description": "Ancho de la tarjeta",
           "required": false
@@ -65,6 +118,7 @@
         {
           "id": "cardHeight",
           "label": "Alto",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "description": "Altura de la tarjeta",
           "required": false
@@ -72,27 +126,32 @@
         {
           "id": "cardGap",
           "label": "Separación entre elementos",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "number-input",
           "description": "Separación entre los elementos de la tarjeta",
           "required": false
         },
         {
           "type": "label",
-          "label": "Textos de la tarjeta"
+          "label": "Textos de la tarjeta",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
         },
         {
           "id": "aqiFormat",
           "label": "Formato del índice de calidad del aire",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "text-format"
         },
         {
           "id": "stationFormat",
           "label": "Formato de estación que realizó la medición",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "text-format"
         },
         {
           "id": "qualityFormat",
           "label": "Formato del mensaje sobre la calidad del aire",
+          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
           "type": "text-format"
         },
         {

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Daniel Alvayay"
   },
-  "version": "0.0.5",
+  "version": "0.0.6-dev.0",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/App.tsx

@@ -4,6 +4,10 @@ import { FontLoader } from './components/FontLoader'
 import { FormattedText } from './components/FormattedText'
 import { AqiData } from './types'
 import { getData } from './services'
+import preset1 from './presets/preset1.json'
+import preset2 from './presets/preset2.json'
+
+const PRESETS = { preset1, preset2 } as Record<string, Partial<VixonicParameters>>
 
 interface Props {
   data: VixonicData
@@ -11,7 +15,27 @@ interface Props {
 }
 
 export const App: React.FunctionComponent<Props> = ({ data, start }) => {
-  const { parameters, downloadsPath } = data
+  const { parameters: rawParameters, downloadsPath } = data
+
+  const withFont = (format: VixonicParameters['aqiFormat'], fontFormat: VixonicParameters['aqiFont']) => {
+    if (!fontFormat) return format
+    const { font, fontColor } = fontFormat
+    return { ...format, ...(font ? { font } : {}), ...(fontColor ? { fontColor } : {}) }
+  }
+
+  const activePreset = rawParameters.themePreset && rawParameters.themePreset !== 'personalizado'
+    ? PRESETS[rawParameters.themePreset]
+    : undefined
+
+  const parameters: VixonicParameters = activePreset
+    ? {
+        ...rawParameters,
+        ...activePreset,
+        aqiFormat: withFont(activePreset.aqiFormat, rawParameters.aqiFont),
+        stationFormat: withFont(activePreset.stationFormat, rawParameters.stationFont),
+        qualityFormat: withFont(activePreset.qualityFormat, rawParameters.qualityFont),
+      }
+    : rawParameters
   const backgroundImageState = parameters.backgroundImage ? `url('${downloadsPath}/${parameters.backgroundImage.filename}')` : ''
   const [formattedData, setFormattedData] = useState<AqiData>()
   const cityInput = parameters?.cityInput || "Santiago"

package/src/parameters.d.ts

@@ -1,41 +1,9 @@
 declare type VixonicData = {
   downloadsPath: string
-  services: { [key: string]: { data?: any; updatedAt?: number } }
+  services: { [key: string]: { data?: any, updatedAt?: number } }
   parameters: VixonicParameters
 }
 
 declare type VixonicParameters = Partial<{
-  backgroundImage: { id?: string; filename?: string; extension?: string }
-  positionCard: 'horizontal' | 'vertical'
-  topSeparationCard: number
-  leftSeparationCard: number
-  cardWidth: number
-  cardHeight: number
-  cardGap: number
-  aqiFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  stationFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  qualityFormat: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-  cityInput: string
-  msj0: string
-  formatMjs: {
-    fontSize?: number
-    fontColor?: string
-    alignment?: { horizontal?: 'left' | 'right' | 'center' }
-    font?: { filename: string; id: string; __isAsset: true }
-  }
-}>
+  themePreset: 'personalizado' | 'preset1' | 'preset2', aqiFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, stationFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, qualityFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, backgroundImage: {id?: string, filename?: string, extension?: string}, positionCard: 'horizontal' | 'vertical', topSeparationCard: number, leftSeparationCard: number, cardWidth: number, cardHeight: number, cardGap: number, aqiFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, stationFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, qualityFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, cityInput: string, msj0: string, formatMjs: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }
+}>

package/src/presets/preset1.json

@@ -0,0 +1,22 @@
+{
+  "positionCard": "horizontal",
+  "topSeparationCard": 20,
+  "leftSeparationCard": 400,
+  "cardWidth": 700,
+  "cardHeight": 120,
+  "aqiFormat": {
+    "fontSize": 25,
+    "fontColor": "#ffffff",
+    "alignment": { "horizontal": "center" }
+  },
+  "stationFormat": {
+    "fontSize": 16,
+    "fontColor": "#ffffff",
+    "alignment": { "horizontal": "center" }
+  },
+  "qualityFormat": {
+    "fontSize": 20,
+    "fontColor": "#ffffff",
+    "alignment": { "horizontal": "center" }
+  }
+}

package/src/presets/preset2.json

@@ -0,0 +1,23 @@
+{
+  "positionCard": "vertical",
+  "topSeparationCard": 220,
+  "leftSeparationCard": 116,
+  "cardWidth": 194,
+  "cardHeight": 316,
+  "cardGap": 1,
+  "aqiFormat": {
+    "fontSize": 15,
+    "fontColor": "#ffffff",
+    "alignment": { "horizontal": "center" }
+  },
+  "stationFormat": {
+    "fontSize": 4,
+    "fontColor": "#ffffff",
+    "alignment": { "horizontal": "center" }
+  },
+  "qualityFormat": {
+    "fontSize": 3,
+    "fontColor": "#ffffff",
+    "alignment": { "horizontal": "center" }
+  }
+}

package/tsconfig.json

@@ -7,6 +7,7 @@
     "allowJs": true,
     "checkJs": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "downlevelIteration": true,