Creiamo una app con Vue ed Electron 1° parte
Di cosa parleremo in questi articoli?
Parleremo del processo di realizzazione di una app in Vue ed Electron che permette di generare e visualizzare delle palette di colori, con la possibilità di esportare i codici dei colori in SASS e Json.
Sfrutteremo questo progetto per esplorare diversi aspetti della creazione di un progetto con Vue, partendo dalla realizzazione di uno schema generale e man mano raffinando il codice affinché si adatti sempre meglio alle nostre esigenze.
Durante lo sviluppo creeremo, come è normale che sia, dei bug che risolveremo con un po’ di ingegno e di studio.
La nostra app si baserà sull’utilizzo del pacchetto NPM
Color Palettes Range.
Puoi scaricare l’applicazione completa a questo indirizzo
https://chiarapassaro.dev/colorpalettesrange
Color Palettes Range:
di cosa si tratta?
Color Palettes Range è un esperimento nato dall’esigenza di creare in maniera casuale più di 5 colori che però fossero armonici tra loro.
Sono partita dal rappresentare il colore di partenza in HSL (hue, saturation, lightness) in modo da gestire il colore in base a:
tonalità - la posizione in gradi sulla ruota dei colori
saturazione - rappresentata in percentuale da 0 a 100
luminosità - anch’essa rappresentata in percentuale
Partendo quindi da questo schema, per ricavare le palette classiche mi è bastato calcolare la tonalità degli altri colori in base alla posizione in gradi rispetto al primo.
Ecco le palettes classiche:
Palette Triadica 3 colori equidistanti
Palette Quadratica 4 colori equidistanti
Palette Tetradica doppia coppia di colori complementari
Palette Monocroma stesso colore con saturazione o luminosità diverse
Palette Analoga colori adiacenti
Palette Complementare divergente i due colori immediatamente adiacenti a quello complementare
Il secondo passo è stato aggiungere le nuove paletters:
Palette Random Dominant
Palette Complementary Range
Per ottenere dei colori armonici ho aggiunto una dominante comune che li rendesse in qualche modo più simili tra loro.
Rappresentando in percentuale il tono del colore di base e dei colori casuali, ho aggiunto la percentuale di dominante calcolata per avvicinare la loro posizione sulla ruota.
Esempio:
Rosso dominante del 10%
Base Rosso 0°
Random Giallo 45°Trasformiamo in percentuale del colore Giallo
45x100/360 = 12,5%Calcoliamo la percentuale da applicare
|(0–12,5) / 100| * 10 = 1,25%Rosso < Giallo
12,5–1,25 = 11,25%Nuovo Giallo
11,25 / 100 * 360 = 40,5°
Per la palette Complementary Range partendo dalla complementare divergente ho calcolato i due colori complementari dal quale poi si crea un numero arbitrario di colori all’interno del loro arco.
Pronti partenza e via!
Passiamo quindi alla fase di analisi necessaria per la creazione della nostra applicazione.
La prima fare sarà realizzare uno schema visivo delle pagine che ci serviranno
1.1 Lo Schema delle pagine
Home
Main
— Wheel
— Button
— Form
— Button
— BaseIput
Footer
— NavbarPalettes
Header
- Navbar
Main
- Palette
Footer
- NavbarPalette Singola
Step 1 - Non sempre presente
Main
- Form
— Description
— BaseInput
— Button
Header
- Navbar
Footer
- Navbar
Step 2
Main
- Navbar
- Container
— Wheel / Colors / Code
— Tab
Header
- Navbar
Footer
- Navbar1.2 Lo scaffolding
Creiamo un nuovo progetto Vue con la VueCli e poi passiamo a modificare lo scaffolding con i componenti da realizzare e del file delle rotte.
1. Home
2. Palettes
3. PalettePortiamo gli stili in un foglio a parte, modifichiamo app.js e inseriamo per ora una barra di navigazione che ci consente di testare le rotte.
Settiamo in Palette.vuela prop ide nella rotta passiamo il parametro come props.
{
path: “/palette/:id”, //i parametri sono preceduti dai :
name: “Palette”,
props: true,
//usando props: true passiamo il parametro id come prop component: () =>
import(/\* webpackChunkName: “about” \*/ “../pages/Palette.vue”),
//importiamo il componente solo quando la rotta viene caricata
}
Per ora ci fermiamo qui, nel prossimo articolo passeremo ad impostare le pagine e i primi componenti.
🤓
