Giter VIP home page Giter VIP logo

frontend's Introduction

CoderBot frontend app

Build

CoderBot is a RaspberryPI-based programmable robot for educational purposes. Check the project website for more information.

For further information about development and technical documentation, see the Wiki.

This is the new CoderBot client application, in Vue.js.

It exposes settings, a Blockly development environment, persistence and the ability to customise the UI and the Activities proposed to the student.

Check the project website for more information.

Quickstart

Run the backend, following the instructions here.

Once the backend is online:

git clone https://github.com/CoderBotOrg/frontend.git
cd frontend
npm install
npm run dev

By default, the (development) build configuration assumes you have the backend available at localhost:5000. Change the CB_ENDPOINT value according to your setup (e.g. different location, production, static ip of a real RPi running the backend) in the config/dev.env.js file.

While in production environment, it assumes you are serving the vue app from the backend, thus having CB_ENDPOINT to a blank string.

# build the web application
npm run build
# move the produced folder in the backend
mv dist ../coderbot/

At this point, run the backend and Flask will serve the built Vue app at /vue.

Another build value you may want to edit it's assetsPublicPath in config/index.js, which allows to serve the application from a subfolder.

Acknowledgments

I'd like to sincere thank uki, cb109, Kael, ivansieder, Lloyd for helping me with vuejs/vuex/vuetify/javascript and providing appreciated insights and context.

frontend's People

Contributors

avivace avatar previ avatar sorre97 avatar sventropy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend's Issues

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;

Comandi non supportati

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

Scelta icone dei blocchi

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

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.

Colore da codice RGB

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

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

Esegui eliminabile

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

Upload aggiornamento

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

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).

Menù movimento

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

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.

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à.

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);

				}
			}

Modifica attività

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

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

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.

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.

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.

Wifi settings are missing

It should be possible to configure the Wifi settings:

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

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.

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.

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.

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

Mancanza cestino

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

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

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.

Menù attività: cancellazione

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

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).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.