Please add your camera code comments like a journal here
Hereâs where iâm at with the Vue2 to Vue3 migration :
What i did so far :
1- Setup vue-router 4 (the vue 3 version) in the new project. i took all the routes from the old projects router file and rebuilt them with the vue 3 syntax (createRouter() instead of newVueRouter().
2-Created placeholder files for the 19 pages referenced by the old router (PageLogin, PageMainHome, PageAssetHome,QRscan, etc) so the app can navigate between all routes without errors
3-Moved the working camera code from App.vue to its own component CameraCapture.vue to match the same route structure as the old project
4- Tested it by navigating to /home shows the placeholder page, and navigating to /capture Shows the working camera (permission,live feed, capture) the routing and the camera still work together correctly
Next step :
-Migrate the actual pages one by one
-Migrate the vuex store once all pages are correctly migrated to centralize the data
Update#2 on the Vue2 to Vue3 migration :
What i did since the last update :
1- I migrated the store (index.js and the auth module) to Vuex 4, the version for Vue3. The main logic (state/getters/actions/mutations) did not change, i only changed how the store is created (createStore() instead of new Vuex.store()) i also installed vuex-persistedstate and axios so the user doesnât get logged out when the page is refreshed.
2- the page MainHome took more time than expected, it has a side menu to switch between different sub pages and since it used OnsenUI (which does not work with Vue3) i rebuilt the side menu with HTML and CSS, now the menu opens, and clicking an item changes the page correctly. i also reconnected the logout button to the store
3- the QRscan page used the old vue-qrcode-reader v3, i updated it to the current version v5 using npm installe vue-qrcode-reader, folowing the official library changelog, i changed the events : detect instead of decode and camera-on/error instead of init. I also rebuilt the top and bottom bars in CSS instead of OnsenUI. i tested it : the camera opens, permission prompt shows, and scanning a real QR code works and redirect to the asset page.
4- the page ManualQR is a simple form page to type the asset number manually if the QR scanning fails, i found a bug here : the submit button crashed the page and showed a blank screen because the input field was empty, i fixed it by adding a check ( if (!assetnumber.value)) to make sure the field has a number before moving to the next page, i tested it with a fake asset number and it successfully redirected to the /testnumber page, and it works fine now.
where iâm at : camera capture, QR scanning, and manual entry are all migrated and working on vue3, the router and store are both ready.
Next: AssetReportQR : the page that shows results after scan and the other pages
Terrific.
Tomorrow I will give you an account login so you can actually try the cloud system with asset numbers and etc.
You have a good start 
Dara
Thank you! that sounds great, iâll prepare the related pages so that everything is in place for tomorrow
I will give you specialized ML, computer vision, image processing and so on functionality for your camera code to add to all your cameras from now on.
I try to wrap things up in a nice API for you by morning time.
Get some rest and have good thoughts
Dara
Update#3 on the Vue2 to Vue3 migration :
What i did since the last update :
1- All sub-menu pages are now migrated to Vue3 and converted to HTML/CSS, the menu logic for admin and for regular users is checked and works correctly following the logic from the old project, all pages from the sidebar were tested only for MesureMe because it calls an external paid API
2-For the router pages, only PageLogin was migrated, to test the authentification process and requests geolocation permission, now the routes are locked and a real login session is required to navigate, no longer possible to navigate from URL and skip /home
3-AssetReportQR and PageAssetHome both are working in HTML/CSS, i cleaned the old date-picker modals into a one shared component, tested with a fake asset number and the pages and date selection are working correctly.
Where iâm at : Camera capture, QR scanning, manual entry, all sidebar sub-menu pages, and PageLogin are now migrated and working on Vue 3. The router, session store are ready
Next : migration of the remaining pages (10) and global test.
Please do test the login, camera click, scan qrcode and go back to the main menu , as a unit test make sure all works before proceeding to other pages.
we need to build Android or iOS app with these several pages to make sure the camera works! The camera always works in the browsers but often fails in the app-building part to produce .apk or iOS build
Understood! On it
More details
- Make one standalone Camera project with the following UI:
- The UI is here
- You can make this project entirely in JS/HTML no Vue
We shall clone this project for any other camera apps in future
Update #4 Vue 2 to Vue 3 Migration
Hi Dara,
Router pages I migrated :
- PageAddUser (form to create new users) : Fixed a bug where the âadd userâ action was running twice per click. Also noticed new users get their password sent by email in plain text (visible in the link) thatâs how the old app did it, I kept it the same for now but wanted to flag i t.
- PageAssetInfo (the big asset form) : all the dropdown fields now use a simple native HTML feature (datalist) instead of the old libra ry.
- PageReportDefect : simplified the image slider to just one image, since both slides were showing the same picture any way.
- PageScreeningAsset and PageScreeningHis tory.
- PageUserPass Reset.
- PCAssetOverview and AssetDatabase : found a bug here: clicking an asset used to go to a page that didnât exist at all, even in the old app. Fixed it so it goes to the right pa ge now.
- AssetsRed, AssetsAmber, AssetsGreen, AssetsBlack (the 4 color pages with asset tables, checkboxes, expandab le rows.
Small components I migrated:
- All 6 asset buttons (Info, Defect, Schedule, Screen, Add Asset, Camera) before they were just circles doing nothing, now they work and go to the ri ght pages.
- QRcodeGenerator updated to the newest version of the QR library, since the old one only worked with Vue 2.
- TableAllAssets, TableOrderHistory, TableRepairHistor y, TableBIR.
- CardsFAQ, FormGetQuote, FormUserSupport are all working now, not placehol ders anymore.
Bugs I f ound and fixed:
- A few places where the old code was doing the same save/send action twice per click by mistake. Fixed t o only run once.
- Some HTML warnings from Vue (elements used in the wrong place).
Still working on: the two charts (bar chart and pie chart for stats). The chart library changed a lot between Vue 2 and Vue 3, so Iâm updating it properly instead of just patching it. W orki ng on this now.
Where Iâm at: every page is migrated to Vue 3 except the two charts. Camera, QR scan, login, and the full asset flow and the te st all work together.
Once the migration is fully done, I will transition to the general design. There are still several UI elements that are not very user-friendly, so Iâll be focusing on cleaning up the over all UX and ergonomics.
Excellent.
Please let us tonight what your plans are for this week.
The bad icons are misspellings! Check the uppercase vs. lowercase asset names and the reference variables. If you fix that all works.
Make sure all the icons from the beginning are properly rendered, thank you
understood, iâll take care right away of the icon changes, as for my planning this week, iâm available every day