So I have been making stuff in Unity3D and decided to try an extension called Playmaker. Basically is uses a FSM (Finite State Machine) to design the flow of states and events. You can drag an event to a different state to trigger another state of events, etc. (Reference : http://www.hutonggames.com/features.html)
NOTE : The actual product I linked has nothing to do with the idea I want to try and build. Just a reference.
Well I would love to be able to do something simliar in Javascript. I think I have some of the logic down but I'm thinking more about User Experience. I want a user to be able to create an FSM with my logic in the browser using Javascript.
I'm not asking for anyone to code this for me or anything as I am experienced enough in javascript to do the bulk of it. I was thinking more about the way you can drag one event to another and it creates a visual arrow showing the user what events are connected. If you look at the first tutorial on the referenced link I provided you will understand what I mean. The arrow length and curves would be dynamic. Possibly be able to drag around states to re organize the layout of the states. This would obviously change the way the arrows pointed as well.
I hope that all made sense.
Ideas? Pointers? Maybe someone has done something like this already? I did find one Javascript State Machine but it generates once, doesn't allow users to move anything, the event dragging to another state is very important.
Related
I'm working on a software that got quite huge over many years and we've noticed there are many buttons (or clickable elements like <a> and <img>) that aren't safe from double clicks. Since the software is running on sometimes quite laggy hardware (with touch screens that might bug out and register double clicks for no apparent reason) I'd like to implement some kind of global solution for it.
My first thoughts were:
Global click listener that gets the click event, processes it and starts a cooldown on that specific element. If another click event is registered before the cooldown is over, it'll just block the event.
Changing the click() prototype method of a button or something. I'm not that good with plain JS but I've done something like that for plugins before so I know at least conceptually how that works.
Adding a directive that can be inserted into existing elements which need double click protection. This would probably be the "scalpel" method, even though people might just forget to add it. Sadly I have no idea whether my idea is actually possible with directives as I've never implemented one before.
Something like a class that can be inherited which handles all clicks. Might be possible to implement together with solutions (1) and/or (2).
Do you have a direction you can point me to to investigate further? Is some kind of global handling for this a good idea at all? Are any/all of the solutions possible at all?
This isn't platform / or language specific really, I'm just asking for some general advice on how to approach what I want to do and what would be the best technologies to utilize.
I want to implement something similar to the way Periscope displays it's likes. Check this CSS / jQuery rework if you're not sure what I mean.
The Set Up :
Basic social network site, built with PHP, where every user has a profile.
What Happens :
User Foo triggers an event on the profile page of user Bar (specific to Bar's page), let's say a "like" for example.
The Goal :
I want that event to trigger a jQuery animation, simple enough to do, and User Foo will certainly see it. But what I want to do is make that event trigger on User Bar's profile page, in real-time for whoever happens to be looking at Bar's profile at the time. So the event Foo triggered will render globally in every other users browser - but only if they are looking at User Bar's profile when it is triggered.
I know this could be achieved with a constant stream of timed Ajax requests looking for any events, but is there a better less resource intensive way of approaching this?
I've recently started playing around with Vue.js and Laravel, and it seems like the broadcast channels could possibly be used for this purpose, but is there anything similar in jQuery that could be used.
Or would you suggest that the jQuery / Ajax approach is the best way to go?
It doesn't have to be jQuery or Vue based, any suggestions welcome if you think there is a better way of doing it, as this is really what I'm asking for, but would rather build this from the ground up and not use a plug-in.
Real-time updates are discussed here: How do real time updates work?
I didn't have the heart to close as duplicate after such an eloquent and well written question :)
Is this possible?
Since my understanding of aframe and how entity-component system works is severely lacking, i simply tried to call one of the hand methods in the hand-controls component.
// I want to see a grip event
handControllerDOMElementReference.components['hand-controls'].onGripDown()
This achieved nothing. When tracing everything that happens in the 'hand-controls' component it looks like the gestures and animations are all called. But nothing happens, so i'm assuming i'm doing this completely the wrong way.
What is the right approach?
Currently, hand-controls responds to events that some component like oculus-touch-controls or vive-controls emit, see https://github.com/aframevr/aframe/blob/master/src/components/hand-controls.js#L57
It is certainly possible to have other components provide those events, such as
https://github.com/chenzlabs/gearvr-controls
or ryanbetts aframe-daydream-controller-component
Perhaps you can either manually generate those events, or better yet create a component that generates them when applied?
Beatports new interface has solved a major problem I was looking for the solution too.
Namely, it keeps a "player" interface at the moment and you can browser to different parts of the site (also changing the url) without reloading or interrupting the player.
I cannot for the life of me understand how they have done this, can any of you guys figure it out?!
Many thanks for any replies I get
Looks like they are just using AJAX to load new content but have taken care to make it work and look pretty seamless. You can get better insight into what events are attached to what elements via the Visual Events bookmarklet. Once you find the code that triggers the event, you can run the obfuscated javascript through JSBeautifier to examine it more closely.
Specifically, it looks like they're adding click handlers to all anchor tags, passing off the event if it was triggered with a middle click or modified with a keyboard key, otherwise passing it to a dynamic loader which handles state and other specific conditions like multiple clicks. The seamlessness of it comes from the way they deal with URLs making every page bookmarkable and the browser history so the back and forward buttons work as you would expect on a "normal" site.
I'm coming across a bit of an awkward problem. I have a Web page with quite a few buttons on it that need to be disabled and enabled at various points. Now if this were a Swing (or any otehr desktop UI interface for that matter), it would be quite trivial: I would simply add listeners for the model changes I was interested in and update the UI accordingly.
This is basic MVC stuff really.
Thing is, I'm at a bit of a loss as to how to handle this nicely in Javascript. I'm going down a route that will end up with some real spaghetti code where the click listeners for the buttons are updating the UI controls and that's just not going to end well.
EDIT: Let me give you a more concreate example.
Example
Imagine a screen that lists open orders. Those orders are presented in a table as each row (order) has multiple attributes against it, such as who is currently managing the order, who made the order, what it's for, when the order was made and the status of the order.
I've done it so you can select one (or more) of these orders by clicking on the rows. This adds a "selected" class, which changes the styling, much like a list.
As to the behaviour, if a user selects one order then certain actions become available, such as Open Order (to view the details), Take Owneship, Cancel and so on. The attributes of the order may also affect what actions are available eg if the order is "owned" by somebody else already, certain actions will be disabled.
Some of these options (like opening the order) aren't available if you've selected multiple orders.
Additionally via a background Ajax call the list refreshes with new orders periodically. The user can also click refresh or can filter the orders (by name, date range and so on) and then reload the orders. While the orders are reloading certain buttons get disabled.
I was going to do a second example but I think that one is sufficiently complex to illustrate the kind of problem. Now I've started this by giving various controls classes. For example, elements with the "select" class might be disabled/enabled/styled when an item is selected.
Now this works reasonably well in simple cases but I'm running into problems where the state of a control depends on multiple conditions. Also the classes are getting fractured by things like some elements want to be styled, some controls want to be disabled/enabled and in some cases both things need to happen.
In Swing I tended to handdle this kind of thing by having a sort of updateUI() method, which would be called whenever the state of a relevant control or model was changed. It would then set the state of all the controls explicitly. Now this is arguably not the most efficient way (eg if you have 30 controls and only need to update one of them it's a bit of a waste) but I found the simplicity was worth it. The alternative was that controls/models ended up with too information about what controls they depended on or those that depended on them. It go tmessy from a coupling point of view.
But I have no such (obvious) mechanism in Javascript. Inobtrusive Javascript as advocated by jQuery is great because it stops random code snippets being littered throughout your code. But I need to go a step further nad have some way of managing the complexity of this (because it is quite a complex screen and will only get more complex).
If you want to preserve your sanity, use a state machine.
You don't really give details about what your UI does, so I'll make up an example. Let's say you have a file upload page. The user should be able to select a file, click an upload button, and then be returned to the page they came from, when uploading is complete. So you could have three states, "SelectFile", "Uploading", "Finished". In the "SelectFile" state, controls should be enabled to allow the user to select a file. In the "Uploading" state, these control should be disabled, and the user should see a progress indicator. In the "Finished" state, the user should be redirected.
Of course, it sounds like your case is more complicated, but the same ideas will apply. You may need more than one state machine, if portions of user interface interact. That's fine.
When you want to change the enabled/disabled elements on the user interface, you just change the state of the state machine. The state machine itself tells the various user interface controls to update themselves based on the current state. You can use a Bharani's (good, up voted) suggestion of using classes to do this. Or whatever mechanism works for you.
The nice thing is that the controls no longer interact with each other. They only interact with the state machine. So you get rid of all the cases where states bounce around incorrectly or endlessly recurse.
Assign specific class names to the divs. That way even if they overlap in functionality you can simply keep adding class names to the div and because of the chain nature of jquery all registered event handlers will be executed.
For controlling form elements during ajax call - you can add ajaxStart and ajaxEnd or you can use ajaxComplete and handle all your code inside the callbacks.
I think i get your problem. I have worked on such screens before and i always ended up refactoring to structure the code better. But at times it will be easier if you could re-organize the functionality itself so that you don't have to handle all things in one place. I think GUI should also be treated like a function - do one thing and one thing well.
I think data modeling is important for JavaScript apps. I am working on this scheduling project for medical clinics and I have a JSON data structure that models chairs/patients in an office. Ember updates the views (UI widgets) automatically when the business logic changes in the models. So right off the bat a lot of sphagetti code is eliminated. If you are doing something graphically intense with user interaction it is almost a crime not to use an existing MVC pattern or to create your own MVC JS classes. The structured discipline is off putting at first but when you see later how it lowers your blood pressure and makes maintenance so much more enjoyable it is worth it. I wouldn't use it for simple one-off projects if they are small. It is better for medium complexity or advanced complexity. Anything that will take me more than a week I will use Ember. I have used knockout.js and Angular and I really like Ember with its Handlebars templating syntax. Easy on the eyes and efficient.