[Feature] Improved Security Camera Computer/ Old AI camera movement for computer

[kyle2143]

The security camera computer sucks and you all know it. You have to scroll through the whole list of cameras looking for one that sounds like where you want, as soon as you click it the menu moves all the way to the bottom so your point of reference is lost, pretty useless for all but a few specific scenarios.

This patch does several things:
1. Allows you to move between security cameras in the network similar to how the old AI movement worked. Use arrow keys, wasd, or ijkl to move from your current camera to the camera nearest to you in your chosen cardinal direction (N/S/E/W).

2. Improves the actual menu screen a great deal. Instead of an unparsable list of over a hundred entries where you can only see like 10 at a time, now you can see much more!. There is also a searchbar on top of the list that will allow you to see only the cameras you want.

3. I added a "favorites list" of cameras. It removes the selected camera from the main list, and moves it to a list on the right. Only 5 favorites allowed right now.

Images (resized)
Original:


New:



Video Demo: https://streamable.com/g4hw9

Notes:
- This only effects the security/wooden/detective camera computers, not the handheld computer monitors like you'll find around.

- While I think this screen is better than before. It's still rather bad/bare bones. I'm not really one for front end/UI work, especially html/js stuff. So here is a JSFiddle page of what I was using to test the web changes for anyone who wants to try their hand and improving it. It has most of the stuff that is in the new menu, but none of the chui stuff. https://jsfiddle.net/kyle2143/whmkfjc7/6/

Technical Notes:

- If you take the time to read the actual code, you may notice that the js I wrote for this is really ugly. Sorry, but I'm too afraid to try to clean it up and trying to do so would only lead to me getting way too angry and frustrated. I don't want to risk it.

- The camera movement calls from the arrow keys are in a debounce function, to cut down on topic calls. I set it to 50ms, could probably go lower. Essentially it just makes it so that you can't hold down a key and fire off 100 topic calls in a second.

- Similarly I debounced the js function for adding/removing favorites. This is probably completely unnecessary since the actual camera selecting is not debounced. (but it was that way in the original computer so I didn't change it).

- For camera movement. Keys pressed are checked client-side and server-side to validate and prevent extraneous topic calls.

- The camera movement code is mostly repurposed from how the AI movement works. The reason that I included the ai/move.dm file in this commit is because I added a new file for moving the security camera around, and it uses the same name as the proc in move.dm. It's my understanding that that has been removed in productions so it shouldn't matter really except for testing in 2016.

Bugs:
- Due to either me being too stupid or chui hating me too much, there was a bug with closing the chui screen. If you click the chui 'X' button at the top right, it closes the menu, but it doesn't send a 'close' topic call like the regular browser does. So I can't reset the player's eye back to themself. 

- To get around said bug above, currently I added an 'X' anchor to click at the top right that will close it like normal. Unfortunately the 'can_close=0' option doesn't want to work for me. I suspect sabotage. 

- EDIT: - Oh there is one other bug I forgot to mention. When using the AI movement mode, you can use the arrow keys to move around. Pressing the down or up arrow keys will move the scrollbar up and down. I couldn't really get it to stop. JS prevent_default doesn't seem to work in a JQuery delegate function.

https://github.com/goonstation/goonstati...6/pull/102

[New525]

This is an excellent QoL improvement

[Technature]

This is a good.

You do the good.

Thank.

[Spy_Guy]

This looks pretty cool.

Question: You mention some code is copied from various sources. What licenses apply to those snippets?

[kyle2143]

This looks pretty cool.

Question: You mention some code is copied from various sources. What licenses apply to those snippets?

Yeah one was a debounce function from somewhere, I think that was ok, but I've removed it because I don't actually need it, I needed to throttle functions. So I"m using another that's a jquery debounce/throttle file under the MIT license.

https://code.google.com/archive/p/jquery-debounce/

The other is a snippet from a that W3 schools site. Technically they say all the code on their website is copyrighted, but they can't try to enforce a copyright of such a small, obvious function that is used as ubiquitously as this is.

It's only several lines long, and probably literally one of the simplest ways to do it in pure js. The notion of a copyright on that is offensive to me. Anyway, in searching for the w3schools license info I found a rather better version of literally the same function on stackoverflow (of which I'm fairly sure all snippets are considered released under MIT), just it leverages jquery.

So I'll just change it to that. Fucking hell, I wonder if there's a search setting or browser app I can use to filter out all w3 Schools results. Those fuckers.

Edit: No, stackoverflow comments are creative commons

Edit 2: I changed my mind about that table filtering. I think I'll just leave it as is, it's such a simple piece of code. You can't copywright iterating through a list and displaying/hiding items. There's nothing unique about it at all. I only picked it because I hate/am bad at javascript and didn't want to have to think to solve a basic solved problem. Having considered this I'm not sure I'll keep the crediting comment. But it's up to you guys if you want to add that.

[kyle2143]

Update: Finished. (the "Favorite Cameras" header is actually green, but I'm not going to re take this picture for that")

• Slight improvement to the UI (shown above)
  

• This implements a new chui/window. But it technically doesn't really take advantage of the features to the fullest, namely sending off js function calls from sever side. But I only had one use case for it in this project (saving/unsaving cameras) and it isn't really going to cause problems without it. Sorry Somepotato.
  

• Debouncing the keyboard inputs for moving the camera around did not work. Well it did work, but it wasn't doing what I wanted to do. What I wanted to do was throttle it. Now I do. 
  

• Related to debouncing, previously I just copy pasted some code for that because I'm dumb. Now I'm importing a tiny (70 lines) js library that handle throttling and debouncing. https://code.google.com/archive/p/jquery-debounce/. 
  

• I mention it on a comment on my PR, but for maximum clarity, the file is added in commit cd3b411. Then in the subsequent commits I add that file to be imported in chui/template. 
  

[/url]

• Another note for merging, also mentioned in a comment, in my security_cameras_chui.dm file, I use a var called 'windowSize'. This var should be declared in chui/window, and is in production code, but it doesn't exist in 2016. In commit [url=https://github.com/goonstation/goonstation-2016/pull/102/commits/0f7cb88e3b9a9e19a8aeff28587779ea0993daa4]0f7cb88, I add a change I made to chui/window.dm to set the size for testing. this commit should not be merged. I only included it in case someone attempts to run this code from the 2016 branch.
  

• Also, previously camera's didn't correctly skip over broken camera's on the network. Because I was lied to! Well tricked, tricked by how that original movement code worked since it was damn near incomprehensible. There were like 3 different ways that it calculated the movement, sometimes rolling over into another. I dunno, I never really bothered with trying to understand that.
  

• Anyway, you can't skip over broken cameras in the keyboard movement mode, you get a message and the computer beeps a bit in disgust when you try it. I actually think it's good that it can't skip over broken cameras now though, because then it might be too good.
  

• Remove scroll bar in the main camera list, thanks to qwerty.
  

Issues:

• The only issue I can think of is that for you to be able to move cameras with the AI movement/keyboard controls. You need to have that long button at the top in focus. That might not be completely obvious and I 'm not sure how to make it so.
  

https://github.com/goonstation/goonstati...6/pull/102

[qwertyquerty]

Mmmm yes

[Gannets]

well this looks great

[kyle2143]

well this looks great

TY Gannets, you inspired me to finally fix that last issue. 

Here's an image of the final version. (I'm really done with this forever now.)



Here's a video of it as well. I don't think I made one with my previous update so this is the final copy.

https://streamable.com/xrx8n

https://github.com/goonstation/goonstati...6/pull/102

[The Grim Sleeper]

So it's been almost  a month since the last post on this [Feature][Vital Improvement], and I am curious as to the state of development?

• Has this already been implemented (but not relocated on the forum)?
  
• If not, what is the hold-up?
  
• Are there any features that need testing, bugs that need fixing, stuff that needs adding?
  
• What can one do to help with any of the above?
  

[qwertyquerty]

So it's been almost  a month since the last post on this [Feature][Vital Improvement], and I am curious as to the state of development?

• Has this already been implemented (but not relocated on the forum)?
  
• If not, what is the hold-up?
  
• Are there any features that need testing, bugs that need fixing, stuff that needs adding?
  
• What can one do to help with any of the above?
  

Patches are generally laid out to dry for good portions of time especially if they are large patches. Due to codebase differences the coders can't simply merge most patches, and have to do manual work rewriting parts and fully testing. I do agree patches should be paid a bit more attention to, but they are a lot of work to merge, so..