vsolina / micropython-web-editor

Web-based code editor (IDE) for MicroPython controllers with WiFi
MIT License
25 stars 3 forks source link

Change page title to the dhcp_hostname instead on MicroPyhton Editor #4

Open casainho opened 1 year ago

casainho commented 1 year ago

Because I am working on 2 boards, I would prefer the tab / page title to be the dhcp_hostname, like as I show, would be in my case "EBike_display".

NOTE: I set the hostname on boot.py, as: wlan.config(dhcp_hostname="EBike_display")

Branding: I also feel the need to have a better place for the name of this editor (maybe a logo image??) and with a link to github repo.

image

vsolina commented 1 year ago

Wonderful idea, display dhcp_hostname if it exists (and maybe IP address if it does not)

I'll also think about the logo + link. It seems that adding a header might be the right way to address this, and it could hold file rename/delete options too. Will think about that one for a bit.

p.s. I really appreciate all the comments, will resolve all of them ASAP

casainho commented 1 year ago

Here is the CircuitPhyton web editor in the case you want to see:

image

vsolina commented 1 year ago

This is done, if dhcp_hostname is not default 'espressif' it will show in the tab title OR IP address otherwise. Also available in development branch for now.

Should look something like this:

Screenshot 2023-01-21 at 18 01 51
casainho commented 1 year ago

That seems very good.

Just a quick note: as seen on the CircuitPyhton image, the Save + Run is probably the most used button so it should be placed at most right. And I would say the Stop, would be placed at most left and the Save in the middle of the others.

And about the console / terminal, I prefer to have it at bottom. Even because it makes easy to see on a mobile device - something this web editor is not good for a mobile.

I leave here more screenshots from CircuitPython, just because it may be a good inspiration:

Main / landing page: links to code editor, or file browser or console: image

This is the dialog on code editor, to open a file, this means is saved space on code editor as there is no need to show on left side the files: image

When I hit the Save + Run, it always jumps to this terminal where we can see any feedback - I like it. This terminal is big and also works good on mobile: image

And finally, this is the File Browser that makes easy file management, like delete a folder, a file, or upload files or upload folders!! I understand this is a web editor only, however, if it could include the file browser, I think it would be of great value.

image

On my EBike, I am locking my ESP32 board with silicone inside my EBike motor, so I need to do the full file management by wireless:

image

image

image

image

vsolina commented 1 year ago

Thank you for the suggestions and inspiration. I'll create some more feature request tickets to have them separated. I didn't consider adding a file manager at all, but now it seems quite obvious that it should be a part of the editor.

Also congrats on your project, seems quite well siliconed :) and the 3D printed part looks really cool. And btw. that's exactly the kind of use-case that fits best with web-based editor: deployed controller in a hard to access environment.