I would like to use the Glimpse client viewer in a web application in order to render some JSON. I am unable to use the Glimpse server implementation on the site in question. However, I can implement my own IHttpHandler to render the information using the Glimpse JSON format.
Has anyone done this and posted details on how to do it? If not, can anyone tell me the steps required to get this up and running? Alternatively, are there any other similar viewer frameworks out there?
Note: I am poking around the source and have seen the client js etc. I will continue down the source hacking route, but was hoping someone may have some shortcuts for me!
As Nik said I would be interested in what you are trying to do. But in the mean time the best place to look is http://getglimpse.com/Protocol.
If you look on this page you will see that we have built a protocol tester. This allows you to put in any JSON and see the output.
If you want to do this yourself, have a look at http://getglimpse.com/Scripts/Protocol/LayoutExample.js and you will see how we do this without using the whole of Glimpse.
You will see that we are doing something like the following:
var data = { test : 'test', hello : 'hello' };
var html = $Glimpse.glimpseProcessor.build(data, 0, false)
$('.panel').html(html);
I know this isn't as nice as it could be but it wasn't designed with this in mind.
We are currently working on refactoring the client code to make this all better.
We haven't really documented all of this yet.
Your best bet is to look at first glimpse javascript file that gets rendered to a page - it is the data file. If you can output data in that format, which is basically just one object of key value pairs, then the client will pick up the data and render it.
You might also want to look at the Glimpse.PHP implementation, since they'vve had to do the same thing you are.
Related
I want generate a development tool that I can input code (Such as HTML, CSS and JS) and it will create a preview/result window (like JSFiddle). I will be using it for tutorials in school and need a unique site to do this from (I would love to use CodePen, JS Fiddle or Codecademy... But I can't).
I am able to generate a form that can be processed and shown in an iframe (through PHP where it simply echos the information into a new html file that is shown in the iframe). But this came with problems; I only have a cheap server and won't want to put too much pressure on it so need todo this through JS/jQuery.
Firstly is this possible? And how would I go about doing it (code examples would be great!)?
Thanks in advance (I appologise if I haven't given enough detail but I'm fairly new to this and may just be asking a pointless question (I'm only 15 :/ ) )
Cheers :)
There is a rather impressive project called php.js that will let you parse and execute a subset of PHP code in the browser.
If you want to do it complete on a client/ in browser like jsfiddel do, then you need 2 or more frames.
One is for your code and one is for the output.
If you click on "run", then need to apply your code to the frame. You can do this by accessing the document object of the frame. If you got it, you´ll need to inject your code there. There many examples in the web on how to access a child document object from an frame/iframe.
I am C++ developer and I haven't really followed up on any development related to the web for a very long time. I have this project I would like to implement, really as a goal to sort of catch up on these technologies. My project is this:
display some content in a browser (for example the content of a 3D scene using a canvas and WebGL), have a button on the page. When the button is clicked, send the data to the server (the camera position for instance), render the image on the server (using some offline high-quality rendering solution), return the image back to the browswer, and finally, display it in the canvas.
I believe I can fill up the gaps with simple things such as WebGl, canvas and HTML 5. I am familiar with some of these techniques and I can learn. Where I am completely lost is the technology that is used or needed to do things such as sending the data to a server, having them processed there, and sending some result back to the client. Now I have done some research on the Web of course, but the is SO MUCH STUFF out there, that it's just REALLY hard to know in which direction going. They are tons of libraries, APIs, bits of technologies, etc.
I am suspecting I need to use some combination of JavaScript, DOM, HTML5 ... but would appreciate if people having done that before or knowing how this should work, could point me to the right direction. I am really looking for something basic, and IF possible not using some sort of 3rd party APIs. I don't want to do something complicated just simple, send data, process, send back for display. My goal is to understand the principles, not to make something professional or super powerful. I am doing this with an educational goal in mind (to learn and understand).
I read about RESTFul but I am still unsure if this is what I need. Really if someone can either simply describes me the basic technology components that I need for this project, point me to documents, tutorials, examples, give me the name for the bits and pieces of technologies I should read about, it would be greatly appreciated.
I realize the scope of this question is very large (and that I should have done my home work before instead of having years now of knowledge to catch up on). I believe though this question can be of great interest to many. And I also promise that I will post my findings and why not my working example when I have one figured out and working.
Thank you.
NOT AN ANSWER, just suggestions/ideas that include code. A structured/formatted comment.
Unsure how to use/code them in C++, but this is just an issue of rendering HTML and implementing javascript code.
The essentials are:
Have jQuery lib loaded. One way is:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Use a javascript code block for your jQuery script:
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function() {
var pic = $('image_selector').val();
$.ajax({
type: "POST",
url: "ind.php",
data: "img=" + pic
})
.done(function(recd) {
$('#txtHint').html(recd);
});
}); //END mybutton click
}); //END document.ready
</script>
I don't know how you would send a pic as a var, or how to structure that, but you get the basic gist...
On the server side, it works like this (using PHP for eg):
<?php
$image = $_POST['img'];
//Do something with the received image
Actually, now that I'm thinking about it, you are sending an image (something I haven't done before), so I don't think you can just send it like text or a JSON object... You may need to post it with the enctype='multipart/form-data attribute for file uploads, as you do when using a form for uploads? Just guessing.
Anyway, this is not intended to answer your question, just to give you some hints as to where to look further.
See these simplistic examples for the basics of AJAX:
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
I know this question might trigger some reactions of the type "View-model separation is good". So please be aware that I am aware of that :).
So, when activating a route, Durandal obtains a view by doing a very simple get request, just using something like "view.html" in the get url.
Question: is it supported to add a parameter to the url? So as to have: "view.html?id=4".
I know it's not the point but I want to do it anyway. Why? Because currently, an important part of the js code happens in the viewAttached method. I am using a js library for adding stuff to the page, that needs access to the dom. So when reaching the page, one can see modifications taking place, and it's not nice to see the page changing like that. So I'd prefer that stuff to happen on the server, using a .Net control.
Thanks,
Nicolas
I think that you can find all the information that you need in this other question: Pass data in DurandalJS to other view
I've searched around the internet for a couple of hours and could not find anything related to what I'm trying to do. I wrote a HTML document that collects data from a user and stores it in a javascript array. This array is then joined together and stored as a string in a document which is hidden. Originally, I was going to transfer this string to a program I wrote in C#, but now I am using LabVIEW.
In C#, I used two simple lines of code to do what I wanted:
System.Windows.Forms.HtmlElement hidden = webBrowser1.Document.GetElementById("hiddenfield1");
List<latlng> data = formharvest.extract(hidden.GetAttribute("value"));
But now I cannot find a way to access the data that is in this hidden document. I'm using the IWebBrowser2 block to embed my HTML code in my VI. Any help would be greatly appreciated. Thank you for your time!
A solution would be to start a Web server in your LabVIEW program, and serve your HTML form from it. I suppose it wouldn't be too hard to retrieve form data then, but I haven't done such thing myself.
Here's an interesting discussion on this with sample code.
I'm not sure I really understand what you are doing above: in the C#, it looks like you are embedding an HTML-rendering engine in a Windows form (i.e. window).
You can embed .NET in your labview code and therefore you should be able to embed the same HTML rendering engine in a LabView VI, but you might consider changing your approach, as CharlesB suggests, to something more traditional where a server serves some HTML to a web browser, which then sends some data back to the server via HTTP GET or POST.
I consistently come across this code smell where I am duplicating markup, and I'm not really sure how to fix it. Here's a typical use case scenario:
Let's say we'd like to post comments to some kind of article. Underneath the article, we see a bunch of comments. These are added with the original page request and are generated by the templating engine (Freemarker in my case, but it can be PHP or whatever).
Now, whenever a user adds a comment, we want to create a new li element and inject it in the current page's list of comments. Let's say this li contains a bunch of stuff like:
The user's avatar
Their name
A link to click to their profile or send them a private message
The text they wrote
The date they wrote the comment
Some "edit" and "delete" links/buttons if the currently logged in user has permission to do these actions.
Now, all of these things were already written in our template that originally generated the page... so now we have to duplicate it inside of Javascript!
Sure, we can use another templating language - like Jquery's Template plugin - to ease the pain generating and appending this new li block... but we still end up with duplicate html markup that is slightly different because we can't use macros or other conveniences provided to us by the templating language.
So how do we refactor out the duplication? Is it even possible, or do we just put up with it? What are the best practices being used to solve this problem?
This is a common problem and becomes more obvious as the UI complexity increases, and changes have to be done on both the server and client templates. This problem is fixable by using a the same template markup on both the client and server sides. The template processors must be written in both JavaScript and the server side language.
Two other solutions that are cleaner than the above approach, but both have their own problems:
Do everything client side
Do everything server side
If all markup generation is done on the client side, then the server acts more or less like a web service which only sends back data in whatever formats suits the application. JSON, and XML are really popular formats for most web services nowadays. The client always generates the necessary HTML and JS. If going with this approach, the boundary between the client and server must be well defined. Since the client has limited knowledge of what happens on the server, this means that proper error codes must be defined. State management will become harder since most/all server interaction will be happening asynchronously. An example of adding a comment with this approach may look like:
$('#add-comment').click(function() {
var comment = $('#comment-box').text();
$.ajax('http://example.com/add', {
success: function() {
addCommentRow(comment);
},
...
});
});
function addCommentRow(comment) {
var user = currentUser().name;
var html = "<li><b>{user}</b> says {comment}</li>";
html = html.replace("{user}", user).replace("{comment}", comment);
var item = $('<li>').html(html);
$('#comments').append(item);
}
The other approach is to do everything server side. Whenever a change happens, shoot a request to the server, and ask it for the updated view. With a fast backend, response times under a second, and proper indicators of network activity, the application should seem very responsive despite everything happening on the server. The above example would be simplified to:
$('#add-comment').click(function() {
$.ajax('http://example.com/add', {
success: function(response) {
$('#comments').html(response);
},
...
});
});
Although this seems a lot more cleaner on the client side than the previous approach, we have just moved the markup generation up to the server. However, if the application is not very AJAXy like Google Maps, then this approach may be easier to work with. Again, it's a matter of how complicated the application is, and perhaps maintaining state client side is a necessity for you, in which case you may want to go with the previous approach.