I'm just now tapping into real GUI-heavy stuff and I'm looking to integrate a GUI for a Python 3 application/("game"?). I need this to be cross-platform, responsive, and able to communicate with other users and a server.
I've looked at desktop application creation but I think that the best thing would be a web application. Now, here are the obstacles:
I need the web app to be able to use all my Python 3 code as its black box; it needs to be able to send a function call to the running python code.
More often than not, everything on the page is changed if a single value is changed.
If another user changes a value, it would affect multiple other users instantaneously.
I can't have the page constantly refresh.
The HTML "GUI" needs to have some degree of separation from the Python code. (I can't have Python sending snippets of HTML, only data is allowed.)
I realize that this is a lot to address, so my question then is:
How would one go about making a web app that has specific (most) data values update consistently without having to refresh the entire page?
My proposed solution would have some sort of simplistic javascript constantly checking to see if anything has been posted for the users closely interacting with each other (players in the same server, if you will). Each value in the HTML would have a linked javascript function which is linked to a value or function in the backend python code.
"Player" changes value on webpage -> JavaScript function call -> Python black box on "Server" -> JavaScript checking loop sees that there has been a change via simple Python variable on "Server" -> JavaScript gets all values via calls to functions in python code -> Update HTML for all "Players"
Finally, please note, I have no idea how to carry out my proposed solution, and I very much welcome a different, better approach. Thanks in advance.
So, for anyone who is trying to do the same thing as me, the answer is something called "websockets".
I initially tried Kivy, but found that it was too cumbersome and just hard to get good styling in. Using HTML, CSS, and JavaScript, you can make pretty fancy looking stuff, and Kivy just isn't robust enough to make something attractive without having to write tons of excess code. Since what I'm trying to make is basically a styled data readout/hud, the HTML combination takes the cake.
What I'm currently using for the websockets is a module called "Tornado" which allows you to update any data on the client side without them reloading the page. I'm sending this data as a single JSON to update the whole page.
In conclusion, I decided on HTML/CSS/JavaScript for the GUI and Python/Tornado for fast server-side computation.
Related
I would like to make a simple web calculator to allow some field technicians to enter numerical data into it and calculate a result. The problem is that the page will be hosted publicly, though our calculations are something we'd like hidden from outside interests. Is there a way to hide the formula or call an outside script so we don't expose our methods to people who may want to inspect the .html file?
I have experience writing basic HTML but am far from a web developer. Please give links or detailed instructions if possible. Thanks in advance.
If the calculations will be done in the browser, then the code to do the calculations must be sent to the browser. If the browser can figure it out, so can a person.
If you are really serious about hiding your algorithm, you should probably create a service that runs on a server that you control. The web page would collect the inputs, send them to the server and respond with the outputs from the calculation.
EDIT:
Welcome to StackOverflow!
If you want your calculation algorithms executed on the client, you're out of luck. Anything you send to the browser must be considered "open". The only method of hiding anything is obfuscation, and that is usually easily undone.
If hiding your algorithms is more important you will need to have a server that performs the operations and exposes an API for the client to access. (EG: Client says "hey server, calculate X for me" the server performs the algorithm with X and sends back the answer)
There's no way to do this with Javascript inside of a html file. You can minify or obfuscate which can help a bit. This can make the Javascript harder to read or understand but it's relying on security through obscurity, in other words, if someone is determined enough they can figure out what's going on.
The best way to solve this is to set up a server that does the calculations. A client webpage can send a request to the server and return the results, while preventing people from seeing how it's done. This is how Google keeps it's search function private despite returning the results.
I have an internal .NET 4.0 web forms app with a sql server backend. I have a menu on the home screen that I need to show/hide parts of based on which groups the user is in. I am struggling with the best way to do this. In the past I have called js functions from the code behind using ScriptManager.RegisterStartupScript. However, I feel like this is bad practice and don't want to keep doing it if it is. I know I could just set my html table cells that need manipulating to runat server and add the property in the code behind when I lookup the user's security. Should I do that and forget about trying to go back and forth between the code behind and js? Or, is there a way to accomplish this that is good web programming practice?
Seems like this is a common scenario, which is why I think I'm missing something obvious. Lookup something from database, then execute js to manipulate front end.
Note: I bounce between plain js and jQuery, so feel free to answer with either.
I'm developing a Rails web app using the contentEditable feature of HTML 5, in the style of Google Docs and others. This works well for simple typing, but breaks whenever the user tries to paste text from Word or another webpage. The resulting HTML will be littered with style attributes and will look like it was literally cut and pasted from the source.
I need to filter the HTML some way. This can be done client-side, giving a smooth interface for the user where pasted material fits instantly into my app's style.
Of course, the user can override my filtering. So to protect myself fully from tag soup hell, I would need to perform the same filtering again, server-side. This is similar to the form validation problem.
I don't want to duplicate the filtering logic in both jQuery (client-side) and Ruby (server-side) but I don't know if there's any good way to avoid it. So far I have identified two possibilities:
Implement all filtering server-side, access it from the client by AJAX. This will put a heavy load on the server.
Implement filtering fully in JS, run on client and on server through Node.js. I don't know if there is enough similarity between the two platforms to implement a shared filtering routine. Libraries like Cheerio look promising though.
Has anyone solved a similar problem before? I would appreciate any guidance to keep my app as DRY as possible.
First of all, I'm not much of a programmer if at all. This question may seem silly but I would honestly like some advice from real programmers.
I'd like to make a bit of an adventure game on a webpage.
Could I make it by having a MySQL database setup to store variables while JavaScript, HTML and CSS is used for the user interface and JavaScript for the game programming and PHP to communicate with MySQL.
I don't entirely understand it but I followed a tutorial and got it working. It also showed me how you can replace text on the screen by giving that text an elementid and then just setting its value to other text.
In this tutorial script, it has it so when the JavaScript file wants to communicate with php, it will open the php file with a ?=value at the end of the hyperlink where the value part turns into some kind of MySQL search value.
Something like this:
xmlhttp.onreadystatechange=function()
xmlhttp.open("GET","index.php?q="+str,true);
and then in the PHP file:
$q=$_GET["q"];
$sql="SELECT * FROM user WHERE id = '".$q."'";
This means you will always search by specific id number. The problem with this is that the php file is always set to look at the exact same table.
Sometimes you want to look at different tables, or multiple values from multiple tables, etc. Basically, you should be able to select each value like it's a record from one of those automatic DJs that radio stations used to have. Also, sometimes you'd want to write or append the database like when variables change and need to be updated and all of that has to happen securely.
The only thing I can think of is to have a ton of php files that work the same way and call the appropriate file when you want a certain kind of response. But then if I have a file on my website that has a php file that lets me write TO the database then someone can just read the javascript code, see that, and then basically hijack the mysql database.
So how can I securely do this?
I would recommend you to look into using jQuery and Ruby on Rails.
jQuery is a JavaScript library that will make easy your interaction with a server (MySQL) and will help you to get code that works in a lot of different web browsers.
Ruby on Rails is a web framework that will encapsulate everything you need to store state (game data) to a database (MySQL) and handle secure communication, as well as a host of other needs you may eventually face.
In addition to jQuery and Ruby on Rails, there are tons of other comparable frameworks you could use.
YUI3 (http://yuilibrary.com) and Django are two more examples. Express (for Node.js) is a JavaScript back end framework (like Ruby on Rails) that you could use with your existing JavaScript knowledge.
Anyway, good luck!
Theoretically, without moving towards different frameworks, here are a few things to think about...
I think you have the right idea with this what you are trying to do. The PHP file is used as server side logic. It should not be available to the user.
What the user can see is that there is a function available to make changes to something. This he will see from your AJAX call in JavaScript ( xmlhttp.onreadystatechange=function() xmlhttp.open("GET","index.php?q="+str,true); ).
Your responsibility, in the PHP (server side logic) is to make sure you scan the parameters to this function before you allow any changes to be made on the Database.
As with any requests to a database, you need to make sure you are escaping the parameters before any call is made to prevent SQL Injections.
As with previous answer, there are some libraries that exist that have some tools already built in. Some poeple prefer certain tools/languages/libraries over others, but they can all pretty much all do the same thing. What changes is a bit of how it's done. I think you are on the right path, just need to protect those PHP pages of injections and inputs/parameters you do not want.
If you are using multiple PHP pages for different actions, it is possible to have the same PHP script accessed from all other pages. Therefore your escaping (preventing SQL Injections) can be done in the same script and don't need to include it in every single PHP page that makes a database call.
Hope this helps a bit!
More of a general question here.
At the moment a lot of the projects I work on utilize server-side views to render the user interface, and spruce it up with some JavaScript here and there. That is all fine and dandy for smaller projects, but lately it seems like the .js files are growing rather large in size, and the stacks upon stacks .live and .bind jQuery calls just don't seem to cut it anymore.
What are good ways to blend JavaScript into the view and, perhaps, the controller of a web application? For the Java-driven websites I found DWR to be quite useful, but a lot of times user initiated events require controller logic, which is starting to become overwhelming and confusing when it's part of the many lone functions included on the pages.
I considered a completely AJAX-driven template engine but that seems to be a bit extreme and will likely be a pain in the butt for anyone to use. Cloning the functionality of the existing backend classes, on the other hand, seems redundant.
What is a good "middle ground" approach used by web apps out there, those that aren't entirely AJAX free nor completely JavaScript driven?
EDIT:
Perhaps I'll provide an everyday example of a problem. Say I'd like to provide the user with a modal dialogue confirming or denying something:
"Your picture is uploaded but looks terrible. You need a new 'do." (OK | What?)
Now, in one scenario, that dialogue could pop up as a result of uploading an image with a page refresh, in which case the server-side view will render it. In another scenario, it might appear after uploading the image via AJAX, in which case it'll probably be triggered by JavaScript on the page. In both cases we need to access the dialogue creation code, and I can't so far think up a way to have, say, a Dialog class which would work the same in both cases.
I'm certainly not an expert in this realm, but in the past have worked with projects utilizing RESTful services which seemed to fit the 'AJAXY' world of web site development nicely. I can't say it'd be ideal for web apps, but worked great for content-rich presentational sites. It seems like it'd fit your need for multi-presentational formats nicely via custom templates. So, the service could call the pictureUpload service using a HTML page template, or it could call the service and request the AJAX component template.
I've been working recently with JavascriptMVC (2.0) for an internal company app. It has its warts, but the overall architecture is good and allows you to create "controller" JS classes. Each controller "owns" a subset of the DOM tree (or if you prefer, a visual part of the page) and responds to events within that zone and uses EJS templates (the "view" part) to alter areas under it. It nicely abstracts what would otherwise be a lot of $(...).bind() and $(...).live() calls into an OOP model.
In my case, our interface is almost 100% JS-driven due to the constraints around the project, but there's no reason you can't mix-n-match.
Now, in one scenario, that dialogue could pop up as a result of uploading an image with a page refresh, in which case the server-side view will render it. In another scenario, it might appear after uploading the image via AJAX, in which case it'll probably be triggered by JavaScript on the page
Here's how I'd do it in a way that works even with Javascript disabled:
Server-side outputs an HTML upload form. The plain-HTML form will submit to another PHP page.
A snippet of Javascript runs when the page finishes loading, looking for that form.
The javascript creates a HairdoUploadController instance, passing in the <form>...</form> to the constructor.
The controller "takes over" the form, using JQuery selectors to alter the styling and to trap the form submitting events.
The controller adds a new div and associates it with a (initially hidden) Jquery-UI Dialog.
When the form is submitted, the controller instead makes an AJAX call, to a slightly different URL than the plain form.
The results of the AJAX call are pushed into the Dialog's div, and the dialog is displayed.
You can throw all logic at the server, and assume a dumb client that displays whatever the server sends.
There are two scenarios:
Non-Ajax Request
Ajax Request
The only difference between them is that, in the first one you're rendering more content than just the modal dialog. There's no reason why you can't have a Dialog class on the server which spits out the HTML representation of the dialog, and is used for both types of request. Then in the AJAX call, you would simply add the server's response into the DOM.
Like you said, it can be problematic sharing UI creation logic on both client and server side, so it's better to choose one and stick with it. In the above case, all logic is pushed to the server. Read up more about AHAH.
It sounds like Google Web Toolkit might be what you're looking for.
It allows you to write client-side
applications in Java and deploy them
as JavaScript.
Presumably then you could write the code once in Java and use it in both places, although I've never used GWT myself.
In my own framework that I'm developing, I'm basically forcing developers to write the code twice. Once in the native language, and once in JavaScript. I make them fill in a function which returns the JS, and then it can be called automatically where it's needed. But all the code is contained within one class so at least you don't have the logic spread all over the place, and you can quickly compare if they are functionally equivalent. For things like regular expressions, it can normally be written just once and then passed to JS (I use it to validate once on the client-side, and then again on the server-side).
I have found myself recently using my server side code (ASP.Net MVC in my case) as a means to provide re-use of my layout components (master files), and small encapsulated bits of UI (partial views), and doing a fair amount of work in javascript. In this particular case I'm still pretty early in my UI work, but with jQuery and jQuery UI I've got a lot of functionality in a very small footprint.
I think one of the challenges to having a mixed solution is figuring out where to put the various bits of logic. After that the rest of it probably goes to figuring out how to re-use as much of your javascript and css code as possible. I still haven't figured out how to manage the various javascript artifacts I end up with (though the Google CDN relieves a lot of that by providing jQuery, jQuery UI, ans the jQuery UI CSS resources).