Editor per la creazione di oggetti SVG -- 3
Budget: $5,000 – $10,000 USD
Abbiamo bisogno di un sito/desktop on electron che realizzi un editor minimale di un file svg caricato dall'esterno.
Il disegno svg potra' essere ruotato, scomposto nelle sue parti (o ricomposto).
Alcune sue proprieta' potranno essere associate a "variabili" (tag) interne e questa associazione dovra' essere salvata su di un file json per essere utilizzata dal nostro software Kreo, un HMI software che "renderizzera" l'SVG con animazioni parametrizzate in base al TAG
L'applicazione dovra' essere realizzata con una serie di menu e dialog per il cui stile si accettano suggerimenti, ma che dovranno comunque rispettare lo schema di colori della nostra azienda.
La nostra scelta preferenziale come framework di sviluppo e' React
Non e' necessario l'upload su server. Quello che ci serve e' avere due versioni: una in local host da integrare eventualmente con il nostro sito aziendale (a carico nostro) e una stand alone in modalita' deskto con Electron
Allego pdf con specifiche eventualmente da discutere.
In generale la gestione del disegno SVG dovra' avvenire nel seguente modo:
All’interno della area di lavoro viene visualizzato l’oggetto in editazione (disegno).
Cliccando sul disegno viene evidenziato un box di selezione che ha quattro quadrati agli angoli più altri quattro al centro dei lati (SelectionBox).
Cliccando e trascinando sui quadrati si allarga e deforma il disegno di conseguenza.
Ci sono altri due quadrati: uno posto al centro di SelectionBox e uno posto sopra il lato superiore unito ad esso perpendicolarmente da un segmento.
Servono per la rotazione.
Trascinando il quadrato in alto si ruota circolarmente SelectionBox e il disegno in esso contenuto.
Cliccando e trascinando il quadrato al centro si cambia la posizione del centro di rotazione.
Cliccando una seconda volta all’interno di SelectionBox si evidenzia il primo elemento del disegno presente in primo piano sotto il cursore e sparisce la selezione precedente.
Ogni successivo click ripete il ciclo applicato all’oggetto immediatamente sottostante fino a tornare al disegno nel suo insieme.
Ad ogni selezione anche l’oggetto corrispondente in ObjectTree (l’abero con i livelli a destra visto in Fig. 1) si evidenzia.
Cliccando con il destro del mouse su SelectionBox si apre un menu contestuale.
Una voce del menu importante (le altre sono da definire) e’ “Interrompi gruppo” (BreakGroup) attiva solo quando l’oggetto selezionato e’ un oggetto G.
BreakGroup elimina l’oggetto G e rende indipendenti tutti gli oggetti in esso contenuti che avranno come contenitore il contenitore dell’oggetto G distrutto.
Selezionando piu’ oggetti (ma solo se appartenenti allo stesso G) e premendo contemporaneamente il tasto CTRL questi oggetti vengono raggruppati in un G “temporaneo” (TempGroup) e si formera’ attorno ad esso un nuovo SelectionBox con le regole viste sopra.
Per esso sara’ disponibile una nuova voce di menu: “Crea gruppo” (CreateGroup). Gli oggetti facenti parte di TempGroup saranno evidenziati in ObjectTree.
Attraverso CreateGroup il gruppo G diventa a tutti gli effetti un G del disegno. ObjectTree si aggiorna di conseguenza. Qualsiasi click esterno privo di CTRL a TempGroup e ad un oggetto non selezionato di ObjectTree cancella TempGroup. In quel caso gli oggetti in esso contenuti tornano a far parte del contenitore di TempGroup nello stato di rotazione posizione in cui si trovano in quel momento. Un TempGroup non puo’ essere unito ad altri oggetti per formarne uno nuovo.
Selezionando un oggetto dell’albero si apre un SelectionBox sull oggetto selezionato cone le regole
viste sopra. Cliccando col destro su una “foglia” dell’ albero avremo anche in questo caso un menu
contestuale e anche in questo caso se l’oggetto e’ un G avreo la possibilita di attivare BreakGroup.
Cliccando con il tasto CTRL su piu oggetti dello stesso ramo verra’ creato TempGroup (evidenziandolo in SelectionBox). Agli oggetti selezionati potra’ essere applicato CreateGroup ed essa sara’ evidenziata
Il disegno svg potra' essere ruotato, scomposto nelle sue parti (o ricomposto).
Alcune sue proprieta' potranno essere associate a "variabili" (tag) interne e questa associazione dovra' essere salvata su di un file json per essere utilizzata dal nostro software Kreo, un HMI software che "renderizzera" l'SVG con animazioni parametrizzate in base al TAG
L'applicazione dovra' essere realizzata con una serie di menu e dialog per il cui stile si accettano suggerimenti, ma che dovranno comunque rispettare lo schema di colori della nostra azienda.
La nostra scelta preferenziale come framework di sviluppo e' React
Non e' necessario l'upload su server. Quello che ci serve e' avere due versioni: una in local host da integrare eventualmente con il nostro sito aziendale (a carico nostro) e una stand alone in modalita' deskto con Electron
Allego pdf con specifiche eventualmente da discutere.
In generale la gestione del disegno SVG dovra' avvenire nel seguente modo:
All’interno della area di lavoro viene visualizzato l’oggetto in editazione (disegno).
Cliccando sul disegno viene evidenziato un box di selezione che ha quattro quadrati agli angoli più altri quattro al centro dei lati (SelectionBox).
Cliccando e trascinando sui quadrati si allarga e deforma il disegno di conseguenza.
Ci sono altri due quadrati: uno posto al centro di SelectionBox e uno posto sopra il lato superiore unito ad esso perpendicolarmente da un segmento.
Servono per la rotazione.
Trascinando il quadrato in alto si ruota circolarmente SelectionBox e il disegno in esso contenuto.
Cliccando e trascinando il quadrato al centro si cambia la posizione del centro di rotazione.
Cliccando una seconda volta all’interno di SelectionBox si evidenzia il primo elemento del disegno presente in primo piano sotto il cursore e sparisce la selezione precedente.
Ogni successivo click ripete il ciclo applicato all’oggetto immediatamente sottostante fino a tornare al disegno nel suo insieme.
Ad ogni selezione anche l’oggetto corrispondente in ObjectTree (l’abero con i livelli a destra visto in Fig. 1) si evidenzia.
Cliccando con il destro del mouse su SelectionBox si apre un menu contestuale.
Una voce del menu importante (le altre sono da definire) e’ “Interrompi gruppo” (BreakGroup) attiva solo quando l’oggetto selezionato e’ un oggetto G.
BreakGroup elimina l’oggetto G e rende indipendenti tutti gli oggetti in esso contenuti che avranno come contenitore il contenitore dell’oggetto G distrutto.
Selezionando piu’ oggetti (ma solo se appartenenti allo stesso G) e premendo contemporaneamente il tasto CTRL questi oggetti vengono raggruppati in un G “temporaneo” (TempGroup) e si formera’ attorno ad esso un nuovo SelectionBox con le regole viste sopra.
Per esso sara’ disponibile una nuova voce di menu: “Crea gruppo” (CreateGroup). Gli oggetti facenti parte di TempGroup saranno evidenziati in ObjectTree.
Attraverso CreateGroup il gruppo G diventa a tutti gli effetti un G del disegno. ObjectTree si aggiorna di conseguenza. Qualsiasi click esterno privo di CTRL a TempGroup e ad un oggetto non selezionato di ObjectTree cancella TempGroup. In quel caso gli oggetti in esso contenuti tornano a far parte del contenitore di TempGroup nello stato di rotazione posizione in cui si trovano in quel momento. Un TempGroup non puo’ essere unito ad altri oggetti per formarne uno nuovo.
Selezionando un oggetto dell’albero si apre un SelectionBox sull oggetto selezionato cone le regole
viste sopra. Cliccando col destro su una “foglia” dell’ albero avremo anche in questo caso un menu
contestuale e anche in questo caso se l’oggetto e’ un G avreo la possibilita di attivare BreakGroup.
Cliccando con il tasto CTRL su piu oggetti dello stesso ramo verra’ creato TempGroup (evidenziandolo in SelectionBox). Agli oggetti selezionati potra’ essere applicato CreateGroup ed essa sara’ evidenziata