Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm developing a webpage that displays output from a numerical model that I am running. I'm looking to take user input (latitude/longitude coordinates specifically), use php or something similar to call a python script which takes these coordinates as input and produces a png image, and then show the resultant png back to the user.
Is there any framework or anything to do this? I'm mainly looking for pointers on displaying the image to the user.
This is how you could display an image after a form has been submitted using javascript.
<body id="body">
<!-- Add a form to take in latitude/longitude coordinates here -->
<button onclick = "addImage()"> Click to Generate Image</button>
<script>
function addImage() {
//Call function here to generate image from form imput
var img = document.createElement('img');
//insert path to generated image below
img.src = 'https://source.unsplash.com/xJsE87_f78s';
document.getElementById('body').appendChild(img);
}
</script>
</body>
I think the google map library has every you want in it, you should check it out https://developers.google.com/maps/documentation/javascript/tutorial. gl.
I would recommend Yii2 (Yii2 Framework). It is very easy to use and fast enough to setup and understand. They have an easy introductory tutorial and with that you can create a webpage that allows users to login in and, after being logged in, to post a form with the coordinates that you can manipulate in php and python to show the image.
The thing is that you would need to learn some basic knowledge in VMC architecture (View, Model, Controller) while learning about the framework, which would take at least 1-3 weeks. But it would help you a lot for any web future project.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
Improve this question
I'm trying to create a very simple game on a website (HTML or Java whatever is easiest)
The game needs to have a moving square and the player needs to keep his cursor in the box
it will count time in the box (total and consecutive) and how many times you got out of the box
In the back end i need to be able to add latency from user action until the mouse cursor actually moves to show the impact of latency on the performance.
I also need to be able to collect and save this data with relation to the user entered info (can even be just an ID that he will type into a google form)
is there any existing code that i can use to create this?
I'm only interested in the data collection aspect not in the coding itself :)
any help would be greatly appreciated!
[Cannot comment jet so as an answer]
You could use Unity for the game programming. As far as i know it has a webbuilder. You will find a bunch of tutorials for this engine everywhere. Although nobody will build a game for you on this website ... -> Your question shouldn't be this vague but a concrete programming problem
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm currently working on website allowing users to select colors from input, that will then be affected on a specific area of an image.
Here is an image example :
Result example : If the user selected red color, the 1 zone will be colored red and so on.
Is there a way to do it directly on the image with JavaScript/CSS, or I have to use canvas component? Otherwise, if there is already an existing tool allowing to achieve this?
I found this fun tool, but they are using geoJSON standard : https://www.amcharts.com/demos/selecting-multiple-areas-map/
So, must I have to generate by myself a geoJSON format to work directly on, or it's possible to work directly on an image?
If you have any ideas, I'm interested!
You could work with the image by splitting it into the areas you need, but this is not the way I would do it.
You could use an SVG and put it above the image inside the SVG you could define areas and just hide/show them when needed.
But if you find some library that automatically does things for you that might be the better solution.
An open-source library like HTML5-Paint-Bucket-Tool can help you bucket fill color into a bit map image. The downside is that you do not know which zone is colored what since it's just an image.
For vectors or SVG, state controls are easier but to display and render a map will require a lot more effort.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm wondering if anyone came up with any tutorial / walk through for Draft-js to simply save editor state and display it as html to the user. I've been searching and trying and still unable to display html. It seems like most are just saving the editor state and reloading it into the editor instead of displaying it as html.
It seems like most go with convertFromRaw and convertToRaw, but the amount of steps included in that seems like there are quite a few steps that should be simplified, and the example here: https://draftjs.org/docs/api-reference-data-conversion.html#content seems like it's only used to place the content back in the editor later.
Maybe I'm not even looking at the right tool - I simply want an editor to save formatted text and display it. I'm not sure why the resources are so hard to find, or if I'm just looking in the wrong spots (seems like there are too many packages for Draft-js with not much documentation and examples IMO). However, I'm sure this must not be hard to accomplish.
Draftjs is concentrating on displaying rich text within an editor. However, if you want to display the corresponding HTML you have to use an external package called draftjs-export-html.
import {stateToHTML} from 'draft-js-export-html';
you can get the html using let html = stateToHTML(editorState.getCurrentContent(), options); this will do the basic formatting of styles like bold, italic etc. You can also pass your own styling preferences of your draftjs entites using the option parameter.
https://www.npmjs.com/package/draft-js-export-html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I want to save web page directly to PDF.
What I have done is-
<form>
<input type=button name=print value="Print" onClick="window.print()">
</form>
But it gives me option for print or save the page as PDF.
But what I want is when I click on the button, it directly save the page as PDF not showing any option.
Is there any solution in JavaScript?
Thanks in advance for helping.
The short answer is no, you cannot prevent users from seeing the option in their browser using just javascript.
The slightly-longer answer, is that you can do this with a bit more than javascript.
Using a service such as html2canvas, you can send a POST request to a page on your server. Use that page to convert the image to a PDF, and have it output the file as a download.
Assuming you're using PHP:
<?php
header("Content-type:application/pdf");
header("Content-Disposition:attachment;filename='screen-shot.pdf'");
// The above headers will cause the file to automatically be downloaded.
// Use a library to convert the image to a PDF here.
An example library to convert an image to a PDF is mPDF, or TCPDF. Feel free to Google others, especially if you're not using PHP.
Do note that this solution is inferior to them just making the choice themselves, as the quality definitely won't be as nice.
Must notice here that the suggested solution converts HTML into image and then the raster image is converted into PDF.
If you want to save into PDF that is searchable (so can be archived and printed with best quality) and the text is printed clearly then you should consider one of these options:
Ask user to save the page into PDF by providing instruction to do so for Google Chrome or Safari (both browsers are able to "print" page into PDF files). Maybe you may even try to show this instruction and invoke the printing dialog
Use some of client side javascript libraries to generate PDF from the data with the tool like jsPDF (free, open source) or similar
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a useful library which would help me in drawing different interactive charts, graphs etc on canvas. Basically i'm designing a web paint like application and adding the functionality of these interactive charts etc. so what i want is, when user clicks the specific chart, he can then click anywhere inside the canvas and the chart appears there with the data given by user in a file(i will handle that once i know the data format and stuff). I tried a few libraries but either they don't support drawing inside canvas or they aren't offering any interactivity... what do you guys suggest me to go for?
As #Pereira said both chartjs and google chart are good solutions. I will also recommend you take a look at:
HighchartsJS (http://www.highcharts.com/)
PolychartJS (http://www.polychartjs.com/)
I hope it helps you.
Here we have someones:
http://www.chartjs.org/
https://developers.google.com/chart/
I think both are good solutions to you.
I just finished a project where we did this using the chart.js library. Clicking bars generates a new, more specific graph based on the clicked bar. I think a big part of what made this possible for us was the use of a RESTful API to manage the data. Check it out if you're interested.