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.

La ruota di colori

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

Le palettes rappresentate sulla ruota dei colori

Il secondo passo è stato aggiungere le nuove paletters:
Palette Random Dominant
Palette Complementary Range

Le nuove palettes

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
— Navbar

Palettes

Header
- Navbar
Main
- Palette
Footer
- Navbar

Palette 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
- Navbar

1.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. Palette

Portiamo 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
}

--

--

Global Frontend developer at AmplifonX ___ https://www.linkedin.com/in/chiara-passaro-90812b10

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store