This is another of my general questionand I am stuck at this point. I have made a W3DS GetScene query in the server and I have got the 3D scene as an output in the viewer. Now I want to trigger the onclick function on the displayed object so that when I click on the object, I can get its id as well as positional co-ordinates in terms of X,Y and Z and use it to trigger GetFeatureInfo request in the background to get the attribute table related to the clicked object. The part I am stuck is about how to trigger the onclick event or lets say how can I make the server understand that the object has been clicked. Is it necessary for the server to have the functionality predefined or is there any other way to instigate the function from the client side with appropriate coding. I have read in some papers that the X3D player BsContact which I am using for viewing the returned 3D scene its own proprietary interface to modify the scene using JavaScript but I am not being able to find a way how?Thanking you in advance.
This is quite not about X3DOM, but about X3D and the way you can route events in an X3D scene.
You will have to define a TouchSensor node inside as a sibling of your shape or transform node: <TouchSensor DEF="TCH"/>
Then you will have to add a Script node, set its child Field nodes and provide a JS file or JS content as CDATA to describe these fields'handling, as described in the instantreality well written documentation
The interaction between JS in the BS player and JS in the webpage is somehow not well documented. However BitManagement have SDK and support. As far as I know, being able to have both sides communicating with each other is the only way to send a request to you server on click since you succeed in listening to it BS Contact side.
Some years ago, I succeeded in creating such a communication with the Octaga Player:
a bidirectionnal communication between, JS Octaga side, JS web page side, and a java applet built with Lejos, receiving and sending orders to an NXT robot.
However: you may now consider X3DOM as the way to display X3D contents on the Web, and so directly avoid any issue on JS(X3D player) to JS(web page) communication.
And then, for implementing event handlers, I let you read this other post on stackoverflow about handling click on an X3DOM shape
Related
This is my sample application layout
What i am trying to achieve is plot the real time values graph in the embedded browser.In the net i got a candlestick graph using d3js which suits my purpose.It call a javascript function taking json object as argument.(This json construction i will create in my application using json c++ library based on the DB data)
Backgound:
Realtime values is published to DB by an external application.When the user select the "Source" from the combo box.and click on Draw button real time garph is ploted.
Workflow:
When the user clicks the "Draw" button ,my application queries the DB and created a json object.Till here i am able to do.Now i need to call the javascript function to display the graph in the embedded browser.This part am not getting how to achieve.I checked another cef example where there is a button in the webpage.When user clicke that button cef call the V8 execute function and displays the text in the browser.But here i dont have any such button or events happening from the browser.I really need to develop this functionality.Can some please guide me through this..If my requirement is not clear please let me il explain again
Note: am using VS2010 on windows 8
An easy way to do this would be to generate the html (probably including some JavaScript and the Json data) in your Draw-button handler, and then load that html in the embedded browser (no need to create a file each time, just load the html data contained in a string).
I'm not familiar with CEF so I can't give an exact example, but I've been doing something similar with the IE embedded browser in the past.
CefSharp seems to have a function LoadHtml() for that - not sure what function to call from C++.
There should also be a way to call that JavaScript function from within your handler, but then, where/how should it get the Json data?
On the other hand, if the chart isn't too complex, you could as well draw it yourself and avoid an integrated browser altogether.
I wrote a React image gallery or slideshow. I need to make the alt text indexable by search engines, but because my server is in PHP, React.renderToString is of limited use.
The server is in PHP + MySQL. The PHP uses Smarty, a decent PHP template engine, to render the HTML. The rest of the PHP framework is my own. The Smarty template has this single ungainly line:
<script>
var GalleryData = {$gallery};
</script>
which is rendered by the PHP's controller function as follows:
return array(
'gallery' => json_encode($gallery),
);
($gallery being the result table of a MySQL query).
And my .js:
React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0));
Not the most elegant setup, but given that my server is in PHP there doesn't seem to be much of a better way to do it (?)
I did a super quick hack to fix this at first shot - I copied the rendered HTML from Firebug, and manually inserted it into a new table in the DB. I then simply render this blob of code from PHP and we're good to go on the browser.
There was one complication which is that because React components are only inserted into the DOM as they're first rendered (as I understand it), and because the gallery only shows one image slide at a time, I had to manually click through all slides once before saving the HTML code out.
Now however the alt text is editable by CMS and so I need to automate this process, or come up with a better solution.
Rewriting the server in Node.js is out of the question.
My first guess is that I need to install Node, and write a script that creates the same React component. Because the input data (including the alt text) has to come from MySQL, I have a few choices:
connect to the MySQL DB from Note, and replicate the query
create a response URL on the PHP side that returns only the JSON (putting the SQL query into a common function)
fetch the entire page in Node but extracting GalleryData will be a mess
I then have to ensure that all components are rendered into the DOM, so I can script that by manually calling the nextSlide() method as many times as there are slides (less one).
Finally I'll save the rendered DOM into the DB again (so the Node script will require a MySQL connection after all - maybe the 1st option is the best).
This whole process seems very complicated for such a basic requirement. Am I missing something?
I'm completely new to Node and the whole idea of building a DOM outside of the browser is basically new to me. I don't mind introducing Node into my architecture but it will only be to support React being used on the front-end.
Note that the website has about 15,000 pageviews a month, so massive scalability isn't a consideration - I don't use any page caching as it simply isn't needed for this volume of traffic.
I'm likely to have a few React components that need to be rendered statically like this, but maintaining a small technical overhead (e.g. maintaing a set of parallel SQL queries in Node) won't be a big problem.
Can anyone guide me here?
I think you should try rendering React components on server-side using PHP. Here is a PHP lib to do that.
But, yes, you'll basically need to use V8js from your PHP code. However, it's kind of experimental and you may need to use other around. (And this "other way around" may be using Node/Express to render your component. Here is some thoughts on how to do it.)
How could I save changes made to "contentEditable" sections back to original HTML file. Is this even possible?
I need to create a single html file that has sections for user changes. Using their web browser, I would like the user to be able to "save" the changes so that the original HTML file would actually be updated. This file might be stored on the user's PC, it might end up hosted on a server. Wherever it is, it needs to write the changes back to the HTML file.
EDIT:
Maybe some more details will help. I am looking to create a dynamic character sheet for all the RPGs I GM. I have used doc sharing services, but the interactive and dynamic nature of HTML+javascript offer more of what I need. Designing the file is easy enough. I just want players to open it in a web browser (even if stored on their desktop), make notes and edits, and then click a "save your character" button that will write the elements they changed back to the original HTML file. If there's no conceivable way to do this, that ok, I would just like some definitive info.
The file lives on a server somewhere, and the browser retrieves the files from that server, after which you can mess with contentEditable content, so to get the changes propagated to the original files, you'll need at least two things:
an event handler on the element(s) that have the contentEditable property, so that you can hook into their content modifications.
an API on the server that lets you tell it to update file X with content Y
The basic approach would be:
load HTML from server in browser
click on element with contentEditable property and start editing
finish editing, and have the element's javascript handler kick in (see https://stackoverflow.com/a/14043919/740553 for how to do that).
take the current URL, and the route to the element you just changed, and its new content, and then POST that to the server. This requires that:
the server is running an accepting route that listens for POST data on some route like ..../changepage (without accepting input from just anyone, of course), and that:
can take a POSTed filename, element path, and content string, opens up that file, finds the element in question, replaces its content, and packs it back up into a new file with the same filename as before.
This is, to say the least, extremely fragile and prone to bugs as well as abuse. There are better ways to do this, and pretty much all of them rely on having a content server, and a page that loads in content for very specifically editable elements from your content server, so that showing, editing, and saving content all happens to "one thing" instead of to elements that need to resolved in .html files based on their element path.
Or, making things even easier, using something like React to make most of that virtually instant. Although, of course, you'll still be left with writing your server such that it can serve up content, and accept modification requests.
Unfortunately for you, what you want to do is actually extremely hard to do well, as well as securely.
I created a canvas and letting user draw many shapes (circle, rectangle etc). I'm storing information of each shape (x, y, w, h, r) in objects and storing them in an array! Now i have an array of all the shapes with all required information to redraw them. What i want is, when user clicks 'save' button, HTML code of the drawn shapes gets saved in an HTML file! I just need to create a .html file and write all the code for drawn shapes in that (hard-coded, in a canvas ofcourse). I've been looking for a method to create new files within JavaScript and write into them.. I thought it's going to be as simple as file reading writing in Java but i am unable to find any easy way to do that... as there are some permission issues and stuff like that! Kindly tell me what to do?
The first line of the page about Javascript on Wikipedia (http://en.wikipedia.org/wiki/JavaScript) is about your issue.
JavaScript is an interpreted computer programming language. As
part of web browsers, implementations allow client-side scripts to
interact with the user.
You can't create, open, remove, write or edit file with Javascript on the client-side.
Barring the use of HTML5, which isn't fully supported yet, you'll want to post the data to the server and then have the user download the file.
For example, you could convert your array to JSON, place the JSON inside a TextArea tag wrapped inside an HTML form, and then submit the form. The page on the server that receives the form posting could respond my downloading a file to the user's browser.
If you tell us a little bit more about what you want to accomplish, we might be able to provide better answers. Do you want to create HTML so that the data can be viewed in the browser? If so, then you can manipulate the existing document in JavaScript. Are you looking to have users save their data and submit it to you for review? If so, a SQL database might be more appropriate.
If you are on local and on windows, you can use FileSysemObject ActiveX, but I don't think it's you are looking for.
I'm trying to write an AJAX enabled WebControl. This is my first AJAX control and apart from the usual use of UpdatePanels and ScriptManagers, I've not got a lot of experience in the other angles and use of AJAX.
I've found a number of examples and projects that claim to be AJAX enabled control's, although they all seem to be missing the final step, i.e. How to actually start calling server side methods from the Client Side.
This is the example I'm currently working with:
http://dotnetslackers.com/articles/ajax/ASPNETAJAXControlDevelopment.aspx
Fair enough, it shows how to extend the DOM model with some extra events... However, it never actually seems to do anything server side once it's created?
How would I go about firing off some server side methods within my control class (ImageButton.cs in that example)?
Grab the source for the AjaxControlToolkit and open the AjaxControlToolkit.sln. There's 1 main project and about 40 controls for you to play with.
Some are really simple and easy to wrap your head around:
ConfirmButton
ToggleButton
CollapsiblePanel (includes animations)
The source is written consistently across controls, both the C# and JavaScript, and commented well. They have a Base Class (ExtenderBase/ExtenderControlBase.cs) that has the majority of their "state saving" code that is re-used throughout the rest of the library.
The only thing that went over my head were some of the method attributes and code to do with Design time rendering in the Visual Studio IDE. I don't get that stuff yet.
Edit:
Re server-side events, any class that implements IPostBackEventHandler (ie, RaisePostBackEvent() method) exposes custom events. For example look at the Rating control which fires a Changed event developers can subscribe to. ReorderList and
Tab Container also implement custom events.