coderbotorg/frontend

The new CoderBot web application, in Vue.js

frontend's Issues

gita bot (motion) angolo 90: comportamento instabile

Il comando "gira bot (motion) angolo 90" fa ruotare il robot di continuo con un angolo del tutto irregolare e continua per una tempo imprevedibile.

Upload aggiornamento

L'upload dell'aggiornamento si ferma al 99% anche se è stato caricato per intero.

i18n: support "English" locale

Editor: implement autosave

Editing dei valori imperfetto

Nel mio ambiente (Firefox su Mac) quando edito un dato all’interno di un programma blackly vedo il dato che sto scrivendo sovrapposto al dato che c'era già. Il risultato è che quello che si scrive risulta essere poco leggibile. Una volta confermata la modifica, il dato è ben visibile.

the "production" (dist release) files contains unnecessary resources

In the dist resources several "/examples/" resources are present.

Codice RGB pixel nelle foto della galleria

Sarebbe utile poter conoscere il codice RGB di un pixel su cui si clicca per una foto presente in galleria.

Sarebbe ancora più utile poter fare un copia e poi incolla nel programma.

Toolbox Editor

We must implement a way to define categories, blocks and everything that is currently in the XML toolbox definition with serializable and templatable objects.

Related to #42

Esegui eliminabile

Mi aspetterei che il pulsante esegui sia sempre presente durante l’attività di programmazione, ma posso eliminarlo quando definisco una attività.

Toolbox level setting should be part of the Activity definition

Currently accessible only in Settings, and it applies globally.

Ruoli insegnante e studente non supportati

Non ci sono due entry point diversi per studente e insegnate, quindi lo studente può modificare le attività e accedere alle impostazioni

Creazione attività

Dopo aver salvato una attività l’utente potrebbe credere che sia effettivamente in uso, ma non è così. Bisogna tornare sul menù delle attività e andarla ad aprirla per utilizzarla. Probabilmente varrebbe la pena chiedere all'utente subito dopo aver salvato una attività se vuole utilizzarla subito.

Firefox throws allocation size overflow when selecting large files

Firefox throws allocation size overflow when selecting large files, making it impossible to update with large packages (>100MB).

This also freezes for 4-5 seconds any other browser , since the entire file is read as js object..

This is how the file upload is currently handled, in Settings Vue component:

		onFilePicked(e) {
			const files = e.target.files
			if (files[0] !== undefined) {
				this.fileName = files[0].name
				if (this.fileName.lastIndexOf('.') <= 0) {
					return
				}
				const fr = new FileReader()
				fr.readAsDataURL(files[0])
				fr.addEventListener('load', function() {
					this.fileUrl = fr.result
					this.fileObj = files[0]
				}.bind(this))
			} else {
				this.fileName = ''
				this.fileObj = ''
				this.fileUrl = ''
			}
		},
		upload() {
			var formdata = new FormData();
			formdata.append('file_to_upload', this.fileObj)
			const config = {
				headers: { 'Content-Type': 'multipart/form-data' },
				onUploadProgress: progressEvent => {
					this.counter = Math.floor((progressEvent.loaded * 100) / progressEvent.total);

				}
			}

Not possible to add comments to blockly program

When adding a comment on a code block (right click on block, select "add comment" menu), the comment popup is shown but it does not get the focus.

Mancanza cestino

Non c’è il cestino per eliminare i blocchi nella parte di programmazione.

Each remote resource must be bundled as static

Things as web fonts are currently imported from CDNs or google endpoints, thus requiring working internet connection.

We must guarantee complete offline functionality.

v0.5 open bugs

List of current v0.5 open bugs:

• Saving a program always prompts with "program already exists, do you want to overwrite?" even when saving the program on itself
• Saving a program with a new name ("Save as") always prompts with "program already exists, do you want to overwrite?" even when the program does not exists.
• Saving wifi parameters does not work
• Toolbox editor: blocks should be pre-filled with parameters (real or placeholder)
• The title on the title bar is always cropped
• Incorrect i18n of blockly categories
• incorrect i18n of activity buttons editor

i18n

@previ mentioned the application does not support i18n

I used and previously tried vue-i18n and I think it suits our use case and it's very easy and straightforward to implement.

A set of critical points to consider follows:

• The strings in toolboxes from the legacy app were {% trans %} escaped and translated server side;
• Blockly supports i18n, we must pass the loaded locale while instancing the workspace;
• Blockly Toolboxes must be templat-able, they are actually static assets (convert them to JSON?);
• The locale will be loaded from the settings, we should move an application wide polling for those things in a resident/wrapper component (the sidebar?) and share those things in the vuex store;
• The language string files have to be separate and imported;

i18n: support "French" locale

Menù comandi logici

Il menù comandi logici non compare nella palette di blockly.

Comandi non supportati

interpreta e la parte di programmazzione ad eventi sono funzionalità non supportata in questa prima release e andrebbero rimosse dai menù

Vue3, Vuetify3

Port the code to use currently supported frameworks: Vue3 and Vuetify3

Vuetify3 is actually still in beta, but as of beta.5 can be considered stable enough to do the port.

Menù attività: cancellazione

Per cancellare una attività devo cliccare su un menù che si chiama “Apri” sotto attività, cosa controintuitiva

Wifi settings are missing

It should be possible to configure the Wifi settings:

• Mode: Access Point or Client
• SSID name
• Password

Link a social

Visto che normalmente il PC è collegato alla rete Coderbot non collegata alla rete Internet ha poco senso avere il link a facebook, twitter, etc. Normalmente l'utente cliccherà su quelle icone e otterrà in risposta un messaggio di errore generato dal browser interpretandolo come un malfunzionamento del roboto.

Arresto programma

Manca un modo per arrestare la riproduzione di un programma.

Comando semplificato per la lettura di codici AR

Sarebbe utile avere un comando semplificato che ritorna il codice del primo codice AR ripreso dalla telecamera.

Modifica attività

Per modificare una attività devo andare nel menù apri attività e poi scegliere modifica, non molto intuitivo (problema similare a cancella attività)

Menù movimento

Nel menù movimento ci sono due muovi indietro ma un in realtà uno dei due comandi fa muovere il robot in avanti

Configurazione di default senza pulsante salva

In nuova attività la configurazione di default dovrebbe includere il pulsante salva, un utente normalmente si aspetta di averlo. Al più l'icona code può non esserci di default.

Conferma cancella foto

Posso cancellare una foto dalla galleria senza che mi venga chiesta conferma.

The Navigation Drawer "mobile" animation renders over the Blockly toolbox

This is likely a problem with how Blocky is drew.

The normal animation, off setting v-content doesn't have this problem (but it doesn't trigger / triggers but breaks resizeWorkspace).

AR.js is not a proper module

AR.js and Three.js are still statically imported everywhere. We need a proper module (exposing THREE and THREEx objects) to be imported and injected in specific Vue.js components.

Implement NN on-device training UI

• Tagging images in gallery (for NN training)
• Neural network training settings

Feature parity with v1 interface (aka "old" UI)

This issue is a placeholder to list all features missing from the current frontend app, compared to the old, "v1" web app.

It is not mandatory to implement everything in v2 (aka "vue-app) as some features might just be deprecated.

• Camera settings (images size, framerare, object detection, other advanced settings)
• Toolbox settings (max blocks)
• Program settings (auto record video)
• movement (motor) parameters

Color and sorting of categories and blockls

Looking at the Blockly toolbar a couple of changes to propose came to my mind:

• Each category has assigned its own well distinguishable color.
• Categories should be listed in descending order by relevance (implying we have a definition of "relevant" in this context) form top to bottom; same thing for blocks within the categories.

If I remember correctly it's a pretty safe and easy thing to change (edit the xml files in the src/assets/ folder).

Preferences Page should inform user when a Restart is needed

Some parameters require a restart, the user should be advised and guided through the restart process.

Perdita di un programma

Se clicco su una qualsiasi voce del menù mentre sto editando un programma e poi torno sulla schermata di programmazione ho perso il programma che stavo scrivendo.

Attività: perdità della configurazione caricata

La scelta dell’attività che ho fatto in precedenza si perde se clicco in un altro menù (ad esempio impostazioni) e quindi quando torno alla schermata per la scrittura del programma mi trovo a lavorare con l’attività di default.

v0.5 bugs

• remove initial activities.json file
• wifi settings incorrectly have "coderbot" as default network SSID (should be "coderbot_<random_number>", same value set in hostapd.conf)
• password for Settings incorrectly defaults to "undefined" after first save of any config parameter
• buttons on settings page are not correctly aligned
• hardware version should be selectable in settings
• wifi: in case of wrong setting (client mode, wrong password) the wifi fails to fallback to ap mode (it stays active only for a minute, than the wifi ap is switched off
• favicon is vue default

Form validation in Settings

See CoderBotOrg/backend#41. Implementable using Vuelidate, Vee-validate or custom validate() functions. See VuetifyJS/Form Component.

Can be applied in both Settings and Activity editing.

Riconoscitore di ARcode

Manca il programma di default che riconosce gli ARcode.

Setup parametri tecnici nella UI di studente e professore

Lasciare allo studente ma anche al professore/genitore la possibilità di editare parametri come:

• Parametri motori
• Setup pulsante fisico (che credo non esista)
• Script da caricare all’avvio

Mi spaventa molto. Introdurrei un punto di ingresso per l'admin (che all'occorrenza può essere anche il professore/genitore) che può editarli e li toglierei dalle UI di studente e professore.

Caricamento nuovo programma

Al momento posso caricare un nuobo programma anche senza aver salvato il programma corrente

Scelta pulsanti

Il menù di default contiene azioni/pulsanti (come ad esempio esporta, importa, salva con nome, carica) che non posso scegliere dal menù di personalizzazione dell’attività.

Editor: python

Implement python editor

Scelta icone dei blocchi

L'icona di un comando viene scelta inserendo una stringa serve un meccanismo di scelta più efficace per l'utente.

Test sensori e motori

Introdurrei un insieme piccolo di programmi da lanciare in sequenza per testare che tutti i sensori, motori e device funzionino correttamente.

Codice AR/QR

Sarebbe carino avere una voce di menù da cui scaricare un PDF con i codici AR/QR che l'utente può stampare come sono o incorporare in altri immagini per fare esercizi di riconoscimento. Inoltre sarebbe carino far scaricare anche quelli che in genere usiamo noi (cartelli e frutta).

Colore da codice RGB

Manca il comando per creare un colore, ad esempio da riconoscere, a partire dal suo codice RGB.