Frontend improvements: Component division and visual structure changes #58
Replies: 2 comments 1 reply
-
Looks good. You are right, the front end just shows everything all at once and can be hard to navigate. I pass stuff between the frontend and backend more than necessary to try keep the backend as stateless as possible. This is convenient as it means the backend and front end wont fall "out of sync", and since it is all running on the same computer we don't really need to optimize for bandwidth. That being said, there are probably some things which are passed too much. |
Beta Was this translation helpful? Give feedback.
-
hi @d4saher its been quite a few time since i am on it but have been stuck on the caliberating process. |
Beta Was this translation helpful? Give feedback.
-
Hi there,
As I mentioned in my other discussion here, I'm having some trouble with the floor calibration process.
To better understand how the code works, I started splitting the frontend into views or panels to make it more readable. I created a new views folder that contains each panel as components:
· Control Drone View
· Trajectory View
The chart is still in the App parent component.
In this version, Camera Settings, Control Drone View, and Trajectory View are on the same panel. I think you don't need to see them all at the same time, and it's more useful to view each one alongside the Scene View.
![Captura desde 2024-07-18 14-27-33](https://private-user-images.githubusercontent.com/113984123/350338035-87fcd6c9-58b9-44e0-90a3-bbf3c6397f3b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg4NDM0MTQsIm5iZiI6MTczODg0MzExNCwicGF0aCI6Ii8xMTM5ODQxMjMvMzUwMzM4MDM1LTg3ZmNkNmM5LTU4YjktNDRlMC05MGEzLWJiZjNjNjM5N2YzYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwNlQxMTU4MzRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YTJmMTg1ZDA3Njk2M2QxZTU4MzI2ZmJjMDgzNTJiNWVhN2YzMWQyOGRiYTE4M2FiZWUwNjhjMmZmNzNlZTUzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.tkfMpQ5ITT4slOC2ttESHWSsDFe8G6AFgny7QSgQ5RE)
![Captura desde 2024-07-19 11-16-47](https://private-user-images.githubusercontent.com/113984123/350338456-6ae718af-c141-48c6-9d0a-f7eba669a0b3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg4NDM0MTQsIm5iZiI6MTczODg0MzExNCwicGF0aCI6Ii8xMTM5ODQxMjMvMzUwMzM4NDU2LTZhZTcxOGFmLWMxNDEtNDhjNi05ZDBhLWY3ZWJhNjY5YTBiMy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwNlQxMTU4MzRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zZjdkZmU5NzU3NmFmZTlmYWVjZjk1NDRjZDhiMTBjOTVlM2VjMmI0MDc4M2VmYTJjNDNkNmIyMTBjNGEyYzYwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.FJhdMVYtGEo-Ogox3NEcohLnGrOnpTI5L0JYRgX82Wo)
Here you can see some pictures of how it looks like:
I'm not sure if the component division is good enought; it needs to be revised and tested as there are a lot of props being passed through components, and I might have missed something. Some things could be done differently to avoid that. For example, I don't think it's necessary to pass 'toWorldCoordsMatrix' or 'cameraPoses' to the backend each time you want to calculate something like origin, scale, or floor. It would be enough to store them on the backend and just update them each time they change. What do you think about this approach?
As always, the changes are on my fork repository in the dev branch.
Looking forward to your feedback!
Beta Was this translation helpful? Give feedback.
All reactions