Scrolling <marquee> and web form - javascript

I have installed a large building automation system with a kiosk at the front desk that displays energy savings and current energy consumption.
I was asked if I could add a ticker along the bottom that has announcements.
I don't know how to fully go about doing this and was looking for some direction.
And was thinking of using html and <marquee> to source text from a small database, then create a web based form on a separate page that would accept user input then overwrite the previous entry in the database to update the marquee.
I am looking for a direction to go in order to do this.
I am entry level when it comes to common industry languages because all of my programming experience revolves around proprietary languages developed for building automation systems.

I don't think a database would be required. You could store the data in a JSON file and JSON works well with Js. Also, you won't have to learn SQL and a server side language like PHP if you use JSON with Js.
For reference, I would recommend using w3schools, as they have all the details that you will need.
Hope that helps and any questions just comment below.

Related

How to analyse user form input on a website automatically

I'm in the process of designing a website which will take user information and a file from a user on a website. My aim is to then take this information, run a script on it and then return the user a document with the analysed information on it by email (which they have provided). The script is written in Python but theoretically could be written in most languages. I'm a bit stuck on where to begin so I'm looking for suggestions on how to do this in terms of how to structure this project and make it as automatic as possible. I know Python and have recently learned react but my backend knowledge is poor.
Thanks in advance.
You will have to start by actually knowing how data analysis works and how to code it, you can start with this simple article that shows how you make:
histograms.
bar charts.
Boxplot.
It shows a few ways of handling data, etc in python!.
In terms of "structure", I would say it depends on what type of Data you are working with, if the user is doing a form or quiz then you can save the answers to variables which you then process before sending it back.
If else your platform has a selection of categories then you can try saving what your user upvotes/likes. You could also learn how to work with databases, start with these excercises that can give you more inspiration and solutions.
Really hopes this sets you on the right path, good luck deving!

How do I add a full site search to a website in Javascript/jQuery?

I am creating a HTML5 website and I need to create a site search box that
displays results in a results page with description and photo.
How would I go about this.
I have looked alot and only see google search and thats not what im after.
Can this be done without PHP or RAILS?
Looking for purely JS and html5 and css and jquery.
Thanks and a point i the correct direction would be great.
Example is this Wordpress sites search http://agroamerica.com/
I dont want to use WP but hand code it.
Any help is great.
Your best bet, given that you don't want to implement a third party indexing service, would be to set an indexing function on your server's back end to handle search requests. You mentioned Rails, and there are some pretty great gems for this.
One point of trouble you will have with this question is that, in my experience, full site search functionality without a back end / database to query is not a very useful solution for any applications I've seen.
However, given that you want to keep it JS, you might look into the MEAN stack (MongoDB, Express.js, Angular.js, Node.js) which does some pretty sweet things like two-way data binding. It's a pure Javascript solution (albeit not a purely-front end solution).
Honestly, it sounds like you might be taking too big of bites to start off with. Try working through a scripting language on a site like Code Academy and learning about basic web application setups like MVC (a common way to handle different parts of a web application (used by the aforementioned Rails)). Stack Overflow users can be pretty brutal when you ask questions about advanced functionality without some understanding of the functionality's underlying elements or functional requirements, and search engines from the ground up have historically been the thing of doctoral dissertations.
Good luck!

Creating a printable/downloadable PDF of a web application

I have been searching for an answer to this problem now for several weeks. I also previously tried to research this a few years ago to no avail.
Problem Summary:
My company has developed a web-based data analytics suite for a major beverage distributor. They have recently asked for a feature that allows the user to print or download a visually pleasing version of the rendered app as a PDF. I have had no luck in finding a solid, controllable, or reliable method to do this. I was hoping the stack community might be able to point me in the right direction.
Current Tech Stack:
Plack servers
Perl base on the Dancer framework
Standard web dev front-ends: HTML5, CSS3, Javascript, Jquery/UI
Client is using IE9/10 and Chrome.
Attempted Solutions Summary:
Obviously I started with the window.print() and tried to control what printed using classes and a specialized print.css but the output was still awful.
I looked in to pdfmachine and pdfbox and even contacted Adobe's acrobat development team directly to see if they had an out of the box solution our company could purchase. I was informed that such a product would be counter intuitive to their desired business model of putting an acrobat subscription on each client computer rather than a single server side application.
I have extensively searched the stack articles but did not feel that the articles I found covered what I was looking for.
At present, I am all out of ideas and am hoping somebody out there has had better luck at this than I have.
tl;dr = I need a pdf version of the rendered output of a complex reporting app.
Thanks for your time stack, I appreciate it.
A solution I have used in the past is to use PhantomJS running on a server to generate the PDF for download/email. Usually if the content is sensitive the server (that handles authentication) would provide a single use viewing token that is then passed to a PhantomJS process. It loads the URL with the viewing token then saves as a PDF.
Further info on Phantoms screen cap API can be found here on GitHub.
https://github.com/ariya/phantomjs/wiki/Screen-Capture
Is it something you can create in Perl using PDF::API2 or PDF::Create? You can load and modify and existing PDF (handy if you want standard headers and footers), and then insert the relevant content. The learning curve can be a bit steep, but simple reports should be easy enough.
See PDF::TextBlock and PDF::Table too - they are great little helpers.
Consider this service http://pdfmyurl.com/ . I try to use many perl modules, but they dont satisfy my problems.

Web App Creation Toolchain with CSS/HTML/Javascript

I want to create a score keeping app that allows me to enter scores into the app, save score history by user, and have a webpage that can display the score in real-time as well as pump out some stats on previous games.
I've been doing some front-end development the past few years and I would say that my CSS/HTML/Javascript skills are intermediate. I have a rough game plan on how it would work, but having very little backend experience there are some gaps in my knowledge that I need help with.
The app: I would build it with what I know: CSS/HTML/Javascript. I would it to be assessable via a webpage or native app. The plan for the latter was putting it through PhoneGap.
Database: SQL? This is were I would save the scores.
The webpage: This is where things get tricky. I need live reporting for the current game status. Web sockets?
I would use a Javascript graphing library to create charts of stats based on current and previous game history. I need that data to be automatically refreshed (AJAX) but how would I do that with a SQL/JS interaction?
Also, ideally the graphs on the webpage would allow visitors to copy and paste iframe code so they can paste the stuff into their own website. I don't even know where to get started with that.
I'm not sure if I'm even asking the right questions so any help would be greatly appreciated!
Since you're a front-end developer I think you'll really like http://nobackend.org/
There are a number of Back-end as a Service solutions which handle both data persistence and data synchronising across multiple devices.
These solutions answer your SQL and WebSockets questions. You could implement these yourself using either open source solutions or by combining a number of services. But I'd give the BaaS options a go.

Reflective Web Application (WebIDE)

Preamble
So, this question has already been answered, but as it was my first question for this project, I'm going to continue to reference it in other questions I ask for this project.
For anyone who came from another question, here is the basic idea: Create a web app that can make it much easier to create other web applications or websites. To do this, you would basically create a modular site with "widgets" and then combine them into the final display pages. Each widget would likely have its own set of functions combined in a Class if you use Prototype or .prototype.fn otherwise.
Currently
I am working on getting the basics down: editing CSS, creating user JavaScript functions and dynamically finding their names/inputs, and other critical technical aspects of the project. Soon I will create a rough timeline of the features I wish to create. Soon after I do this, I intent to create a Blog of sorts to keep everyone informed of the project's status.
Original Question
Hello all, I am currently trying to formalize an idea I have for a personal project (which may turn into a professional one later on). The concept is a reflective web application. In other words, a web application that can build other web applications and is actively used to build and improve itself. Think of it as sort of a webapp IDE for creating webapps.
So before I start explaining it further, my question to all of you is this: What do you think would be some of the hardest challenges along the way and where would be the best place to start?
Now let me try to explain some of the aspects of this concept briefly here. I want this application to be as close to a WYSIWYG as possible, in that you have a display area which shows all or part of the website as it would appear. You should be free to browse it to get to the areas you want to work on and use a JavaScript debugger/console to ask "what would happen if...?" questions.
I intend for the webapps to be built up via components. In other words, the result would be a very modular webapp so that you can tweak things on a small or large scale with a fair amount of ease (generally it should be better than hand coding everything in <insert editor of choice>).
Once the website/webapp is done, this webapp should be able to produce all the code necessary to install and run the created website/webapp (so CSS, JavaScript, PHP, and PHP installer for the database).
Here are the few major challenges I've come up with so far:
Changing CSS on the fly
Implementing reflection in JavaScript
Accurate and brief DOM tree viewer
Allowing users to choose JavaScript libraries (i.e. Prototype, jQuery, Dojo, extJS, etc.)
Any other comments and suggestions are also welcome.
Edit 1: I really like the idea of AppJet and I will check it out in detail when I get the time this weekend. However, my only concern is that this is supposed to create code that can go onto others webservers, so while AppJet might be a great way for me to develop this app more rapidly, I still think I will have to generate PHP code for my users to put on their servers.
Also, when I feel this is ready for beta testers, I will certainly release it for free for everyone on this site. But I was thinking that out of beta I should follow a scheme similar to that of git: Free for open source apps, costs money for private/proprietary apps.
Conceptually, you would be building widgets, a widget factory, and a factory making factory.
So, you would have to find all the different types of interactions that could be possible in making a widget, between widgets, within a factory, and between multiple widget making factories to get an idea.
Something to keep on top of how far would be too far to abstract?
**I think you would need to be able to abstract a few layers completely for the application space itself. Then you'd have to build some management tool for it all. **
- Presentation, Workflow and the Data tier.
Presentation: You are either receiving feedback, or putting in input. Usually as a result of clicking, or entering something. A simple example is making dynamic web forms in a database. What would you have to store in a database about where it comes/goes from? This would probably make up the presentation layer. This would probably be the best exercise to start with to get a feel for what you may need to go with.
Workflow: it would be wise to build a simple workflow engine. I built one modeled on Windows Workflow that I had up and running in 2 days. It could set the initial event that should be run, etc. From a designer perspective, I would imagine a visio type program to link these events. The events in the workflow would then drive the presentation tier.
Data: You would have to store the data about the application as much as the data in the application. So, form, event, data structures could possibly be done by storing xml docs depending on whether you need to work with any of the data in the forms or not. The data of the application could also be stored in empty xml templates that you fill in, or in actual tables. At that point you'd have to create a table creation routine that would maintain a table for an app to the spec. Google has something like this with their google DB online.
Hope that helps. Share what you end up coming up with.
Why use PHP?
Appjet does something really similar using 100% Javascript on the client and server side with rhino.
This makes it easier for programmers to use your service, and easier for you to deploy. In fact even their data storage technique uses Javascript (simple native objects), which is a really powerful idea.

Categories

Resources