zoneminder
zoneminder copied to clipboard
ZoneMinder
React
Implementing React on Zoneminder would increase the performance and allow a better user experience, making the interface more intuitive, professional and easy to use. For example, the landing page, which reloads every n seconds, could have its data updated without reloading. Also, the pop-ups could be modal, and not browser windows. This library will allow more code to be reused, and it can be implemented side by side with the current web interface, in such a way that the developers can deploy the code even if it's not full React without breaking the page.
If it's accepted, I'll start working on this feature, all help will be appreciated.
Go for it. Please do it in it's own skin, so under web/skins/react instead of web/skins/classic
@connortechnology Maintain the classic skin under web/skins/classic (untouched) and create a new skin under web/skins/react?
I considered doing an angular skin but i run into few roadblocks the main issue is the lack of API for many areas of the application. This makes it very difficult to decouple the old UI and the API code that is required to get/save data.
I considered doing an angular skin but i run into few roadblocks the main issue is the lack of API for many areas of the application. This makes it very difficult to decouple the old UI and the API code that is required to get/save data.
@markoj21 I'm considering extracting code from the classic skin and turning it into an API. I just started using the current API present on ZoneMinder, so far I had no problems (I just started the console screen), but I'm grateful for you letting me know. Initially, most of the data come from SQL queries, which is easy to do in PHP. What do you think? When did you consider doing an Angular skin?
I considered doing an angular skin but i run into few roadblocks the main issue is the lack of API for many areas of the application. This makes it very difficult to decouple the old UI and the API code that is required to get/save data.
@markoj21 I'm considering extracting code from the classic skin and turning it into an API. I just started using the current API present on ZoneMinder, so far I had no problems (I just started the console screen), but I'm grateful for you letting me know. Initially, most of the data come from SQL queries, which is easy to do in PHP. What do you think? When did you consider doing an Angular skin?
This was about 3-4 weeks ago, i started using zoneminder for my home setup and considered contributing and still do. I would suggest working on the following first, language api and options api. My original design would get all the options/settings first, then get the current language thats selected. The application would route to the /console and load the component with data. I have completed all the scaffolding(menu, routes, services, logging, notification(signalR), basically a SPA. I will post my design and code shortly.
The APIs were originally created by Kyle to rework the front end into angularJS. This was in 2015. There is partially done UI code in the angular-ui branch. In general, extending the API to evolve the UI to get all the data it needs is the right approach - helps remote views as well.
I'll help you with the API, and probably stop the React project. @markoj21 please let us now when you post your code. The last commit in angular-ui branch was 5 years ago, probably it needs maintenance.
I want to make sure I don’t imply the wrong idea. I’m not suggesting you stop react at all. It’s a great framework and in my opinion it’s one of the best. Angular is fine too - but we should proceed with whatever can be evolved quicker. Both need API updates. You should consider stopping react only if you don’t have the time to work on it or are blocked. Angular should be used only if markoj21 has the willingness to continue work. So again take what works best. We need folks who can take the initiative and drive forward. Use whatever framework you are comfortable with most.
I want to make sure I don’t imply the wrong idea. I’m not suggesting you stop react at all. It’s a great framework and in my opinion it’s one of the best. Angular is fine too - but we should proceed with whatever can be evolved quicker. Both need API updates. You should consider stopping react only if you don’t have the time to work on it or are blocked. Angular should be used only if markoj21 has the willingness to continue work. So again take what works best. We need folks who can take the initiative and drive forward. Use whatever framework you are comfortable with most.
The intention is to make the Zoneminder front-end a SPA. At first, we need to make/update the API, probably it will be able to serve both Angular and React. For now, I'll focus on the API, reducing my time to React, because it's not very necessary two frameworks doing the same thing. If there's someone else willing to work with React, the development could go faster.
IMHO, the API already provides a lot of functionality to implement views like what ZM already has. The core functions are already there. zmNinja is an example of a 100% API only remote interface. If APIs are missing, you'd find they are not for primary functions. I'd just continue to be on the path you are - i.e. take react, go with a UI first approach and don't copy the ZM UI 100%. Reimagine it as needed as long as the functionality is there. Build the primary components first. For example, there is very little I see in the console.php view that can't be done with APIs today.
Go with angular only if you are comfortable with it or if you and markoj21 want to collaborate. If both of you want to work together, by all means decide on one UI framework. If not, go with what you already know. I suppose one markoj21 shares the existing angular work you could decide which path to follow.
I'm not comfortable with Angular, I would just help markoj21 with the new API, but if the current one does all these things, I will use it and continue with React.
Here is my design approach
Application Architecture
Currently what i have
I haven't done any react work, but i have done about 4 years with angular, i will be adding my code shortly. I have designed/developed few SPA's medium/enterprise applications and i am very comfortable with the technology. Once the client side scaffolding is in place the rest of the application is basically copy/paste of view/mode/api. I do have limited experience with php as i mainly work with asp.net this is my current challenge. I have created a project complete with views/routing/models/services/helpers the missing peices are common controls such as date picker, authentication mechanism as i am not sure how the current process works.
Quick update, here are some screenshots of work in progress, i forked the code and will be dropping in what i have so far probably tomorrow evening, the data is faked for the time being.
Tried to organize the console data into more usable blocks that are intuitive.
Moved the running and stopping controls.
Adding UI for multiple chart types, some ideas what i would like to see.
Grouping events based on monitor(camera)
Added UI loading adorners/spinner to indicate an operation is in progress.
Feedback is welcome, i am trying to use a basic bootstrap 4 themes with small tweaks. I will focus on writing the corresponding api to provide this data to the UI next. The components will refresh based on a set timer interval and also based on SignalR which i will try to add as well into the current php stack.
The UI looks great. We should probably have an approach discussion on Slack.
However, before all of that, this thread started as a react effort and this angular effort is somewhat parallel to it. So @pedrorambo how far are you on react relative to @markoj21 and your thoughts on working together? It's perfectly fine to proceed in parallel for a while. Like I said, the most important thing here is continuity - getting to a point that actually works and people can use.
@markoj21 the slack channel is free to join. Just go to zone minder.com and click on the slack icon at the bottom.
The UI looks great. We should probably have an approach discussion on Slack.
However, before all of that, this thread started as a react effort and this angular effort is somewhat parallel to it. So @pedrorambo how far are you on react relative to @markoj21 and your thoughts on working together? It's perfectly fine to proceed in parallel for a while. Like I said, the most important thing here is continuity - getting to a point that actually works and people can use.
I started working on the project when I opened this Issue. So far I configured Webpack for React to work as a skin (only for development) and started the console screen as a SPA already connected to the API. Soon I will send a screenshot.
looks nice - is this connected to real data as well?
Yes, it is connected to the default Zoneminder API. There aren't any events because it's a VM for development, the cameras are in monitor mode, not recording.
great I'll keep checking https://github.com/pedrorambo/zoneminder/tree/2893-react as it progresses. if you get stuck on any API let us know
Hey, I might get back around to splitting the packing into classic-web-ui, api and if this was merged, even in an unfinished state, could make react-ui and let people play with it.
Hey, what's the state on this? Did the React UI of pedrorambo ever get merged? Even in an uncompleted state, I would love to see this in ZM (maybe only for viewing the cameras).
