convert Thomas J Bradley Signature Pad JSON to PNG using C# - javascript

I am testing the Signature Pad plugin by Thomas J Bradley and have it working and am able to convert the JSON signature to PNG using PHP but would like to be able to convert the JSON signature to PNG using C#.
There is a supplimental class for doing this called SignatureToImageDotNet which I have not been able to get to work. I should mention that I am new to ASP.NET / C#. So far I have created a website in Webmatrix and have the signature capture form up and running and can return the outputed JSON to a page but am unable to convert it to a PNG image. I've created an 'App_Code' folder and put the 'SignatureToImage.cs' file in it but I'm not sure how to call it.
I'm sure this would be very trivial for someone with ASP.NET / C# experience and I'm hoping someone has done this before or could do it and let me know exactly how to do it as the documentation is very brief.

You did the right thing in creating the App_Code folder, usually people miss that part. As far as calling the class, ASP.NET Web Pages works pretty much like PHP. You create a code block at the top of a cshtml page, which executes when the page is loaded:
http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/getting-started
Depending on what else you're doing in the request (I would need a little more info / code), my guess is you can just start to use the SignatureToImage class inside of a razor block at the top of the page:
default.cshtml
#{
if (IsPostback) {
var sigToImg = new SignatureToImage();
var signatureImage = sigToImg.SigJsonToImage(signatureJson);
// do something with the image!
}
}
<html>
....
I know the answer is a little open ended, but please feel free to ask my an questions about how Web Pages or C# works, if you have something more specific.

Related

Read Excel sheet with Javascript

I would like to retrieve data from specific cells in a local Excel sheet using Javascript and then output it on an HTML page. My function would be something like readData(row, col).
For example:
Cell 1A = "hello"
<h4><script>readData(1, A)</script></h4> will show as "hello" on my page.
Every solution I have seen has involved uploading the file first (example below from the read-excel-file package), but my Excel file is already a local file within my project.
<script>
var input = document.getElementById('input')
input.addEventListener('change', function() {
readXlsxFile(input.files[0]).then(function(rows) {
// `rows` is an array of rows
// each row being an array of cells.
})
})
</script>
My guess is you are referring to this project?
https://gitlab.com/catamphetamine/read-excel-file
I tried using the Node.js example. It works out of the box. The examples for a direct website integration are broken. The project seems still alive, but I would scan the code to decide if to trust the author with your data.
Here how to fix the example (I have no idea for what cases it works!):
Go into the "website" folder. The index.html is a example how to use it. Unfortunately the "read-excel-file.min.js" is missing in the repo. You can download it here (view-source:https://catamphetamine.gitlab.io/read-excel-file/read-excel-file.min.js). Put it in the folder and it works.
Maybe someone has a better code for this?
EDIT (Above answer not technically wrong but does not answer the post):
What you want is not possible to security reasons! Just imagine your javascript (client!) code:
inputfile="test.xlsx"
I could edit this in my browser to
inputfile="super_secret_files_on_server.xlsx"
Solution: You could run node.js code on your server and solve it this way, or the user has manually upload a file from his computer. Or use a server side programming languages like php.

Get value of Ace.js editor in golang

I'm here again to clear something. I got a html page running with golang with an embed Ace.js editor and what I look for is to get the editor's string content value and play with it inside golang to analize it. The question is, how I do that? I previously worked it on javascript and it was as easy to do as this:
let editor = ace.edit(0);
let value_Txt = editor.getSession().getValue();
I will appreciate your help since I recently started working on golang
I guess that Golang, in this case, is only responsible for rendering the page. From that moment onwards, Ace.js will run in the client's browser.
You won't get the content of the page until you submit it through an API (e.g. using POST) and do something with it. What you were doing in JS before still applies now.

Android: modify JS loaded by a local static html based on selection from list in previous activity

Still very much a beginner to Android and Java, so thanks in advance for your patience!
I am trying to find a means of passing a file path (which could be in the form of a simple string or integer) from an activity (in Java) to a WebView (which is rendering a static local html file that is running JS). The issue is complicated by the fact that I am using an AR SDK (Wikitude) and the port to the SDK uses their own customised WebView(which also renders a CameraSurfaceView simultaneously) - controlling their suite is then done in a JS file loaded by the html file.
Any solution is welcome, I am new to Android so don't even know where to begin on this one. In simplest terms, I want to take a chosen option from one activity and use that information to tell my JS file what asset to load/render. If this were a web app you could use some templating to load a dynamic variable into your html (e.g. Using erb in ruby or moustache in JS).
If there is no equivalent for templating Java into a JS file, my current best guess is to write a JSON object using JsonWriter in the activity and subsequently load that file in the JS, if this is indeed the best solution, I am struggling to navigate the internal / external storage of android relative to the assets folder of my app - can anyone shed some light on how I would do that?
I've tried to keep this as general as possible, code can be provided on request.
you can pass chosen option from one activity when you are starting second activity with following code.
//Code to start another activity
Intent intent = new Intent(MainActivity.this, Second_Activity.class);
pass the value with intent
intent.putExtra("choice1", "choice1");
intent.putExtra("choice1", "choice1");
startActivity(intent);
now in second activity onCreate() you can receive these value from intent using following code
String choice1 = getIntent().getStringExtra("choice1");

Load image for HTML img element from JSON property while URL not directly accessible

OK, this one is rather complicated to explain, which explains the verbose title:
In my Objective C application I generate a JSON string to hold all of my properties for the objects I need to draw in the ARchitect browser of the wikitude SDK (as far as I know the Wikitude SDK only handles JSON) via:
NSString *javaScript = [self convertPoiModelToJson:self.poiData.pois];
NSString *javaScriptToCall = [NSString stringWithFormat:#"newData('%#')", javaScript];
One particular object I am interested in is stored as a string in that JSON string, it's the URL to an image. However, this image is behind a password protected area on our webserver and the app handles the authentication.
The problems start when I am in the ARchitect Browser, which is basically a .html file with calls to specific wikitude javascript functions to build the augmented reality world and show it in a UIWebView in the app. I want to show that image when a POI in the augmented view is clicked in the footer popup which is a basic html div container. So now I have a URL to an image resource on the webserver, which I cannot directly access with
document.getElementById("thumb").src = jsonObject.thumbUrl;
because of the authentication needed and the only way I was successful to load that image was via the var poiImage = new AR.ImageResource(jsonObject[i].iconURL, {onError: errorLoadingImage}); method but then I can only display it in the augmented view but not in the footer.
I tried it with providing a static string from some other image in the web or to local resources to the img element in the footer section in the view without problems like that: document.getElementById("thumb").src="marker.png"; and it works fine, also the image is correctly loaded in the augmented view.
I have read about encoding the image (which I can access and download in the objective c part of the app) in base64 and storing that string in an additional JSON property to load it into the src property of the html img element with a <img src="data:image/png;base64,BASE&$_ENCODED_DATA"></img> but this seems like a really dirty and overly impractical workaround/hack for what I try to accomplish. Also I don't know if it's a better idea to start reading about how to implement the authentication to access that image in the protected area of the webserver or rather begin implementing the ugly base64 encoding or continue searching for alternatives.
I'm not asking for a solution but rather for suggestions what possibilities I have left to access that image. Since I ran out of ideas, any help is appreciated.
Thank you!
Short summary:
image accessible and downloaded in objective c part
image is accessible with the AR.ImageResource method of the wikitude SDK (but not needed)
image cannot be accessed directly via the url from javascript because authentication is needed
(I hope my question is comprehensible, feel free to ask If something is unclear, especially since English is not my first language and it would be even complicated to explain that in German..)
Have you tried downloading the image in Objective-C / Cocoa, store it locally on your iOS device and pass the local path of the image via JSON into your Architect World?
You can then load the local image with your AR.ImageResouce and your div container.
Ok, let's think a bit about this, as it seems like a good mess.
If I'm understanding well your problem, all is about your javascript code needing to reach a url where an image is located, being unable to do so because that place requires some sort of validation to access.
In this scenario I'd look for moving images to a place out of the restricted site. Maybe trying to save them from the objective-C part into one public place that's reachable by javascript. This may be tricky as the I/O operation could slow your code execution... Of course you'll always have the option to move those images just outside of the restricted area but I supose that's not feasible as you could suposed that solution by yourself.
Other way... if your environment configuration allows it (I fear there isn't enough info about it on the question) is to try to execute your javascript part (I wonder if it's enclosed into a webpage executed from a webserver) with a user with permissions into the restricted area. This, of course, could be totally a no-no depending on what your javascript part does and why your restricted area is protected by validation.
If you don't want to move out the files, copy them temporarily gives performance problems and errors, and user impersonation through the javascript executing user is not an option I fear your unique alternative is to efectively try to pass a binary stream of data with the image through the JSON string... dirty...
Looks like wikitude maintains 2 browser contexts: the host browser that loaded your HTML and an embedded browser-like object (or iframe or proxy server) represented by the UIWebView instance.
Only one of those (not clear which from your discussion) has the user/pass for access to your image. You will need to call something to repeat the authentication step or transfer credentials to the other context.

Rendering HTML+Javascript server-side

I need to render an HTML page server-side and "extract" the raw bytes of a canvas element so I can save it to a PNG. Problem is, the canvas element is created from javascript (I'm using jquery's Flot to generate a chart, basically). So I guess I need a way to "host" the DOM+Javascript functionality from a browser without actually using the browser. I settled on mshtml (but open to any and all suggestions) as it seems that it should be able to to exactly that. This is an ASP.NET MVC project.
I've searched far and wide and haven't seen anything conclusive.
So I have this simple HTML - example kept as simple as possible to demonstrate the problem -
<!DOCTYPE html>
<html>
<head>
<title>Wow</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="hello">
</div>
<script type="text/javascript">
function simple()
{
$("#hello").append("<p>Hello</p>");
}
</script>
</body>
</html>
which produces the expected output when run from a browser.
I want to be able to load the original HTML into memory, execute the javascript function, then manipulate the final DOM tree. I cannot use any System.Windows.WebBrowser-like class, as my code needs to run in a service environment.
So here's my code:
IHTMLDocument2 domRoot = (IHTMLDocument2)new HTMLDocument();
using (WebClient wc = new WebClient())
{
using (var stream = new StreamReader(wc.OpenRead((string)url)))
{
string html = stream.ReadToEnd();
domRoot.write(html);
domRoot.close();
}
}
while (domRoot.readyState != "complete")
Thread.Sleep(SleepTime);
string beforeScript = domRoot.body.outerHTML;
IHTMLWindow2 parentWin = domRoot.parentWindow;
parentWin.execScript("simple");
while (domRoot.readyState != "complete")
Thread.Sleep(SleepTime);
string afterScript = domRoot.body.outerHTML;
System.Runtime.InteropServices.Marshal.FinalReleaseComObject(domRoot);
domRoot = null;
The problem is, "beforeScript" and "afterScript" are exactly the same. The IHTMLDocument2 instance goes through the normal "uninitialized", "loading", "complete" cycle, no errors are thrown, nothing.
Anybody have any ideas on what I'm doing wrong? Completely lost here.
You can consider using Watin. Generate your page then use Watin api to capture the generated page.
http://fwdnug.com/blogs/ddodgen/archive/2008/06/19/watin-api-capturewebpagetofile.aspx
I found Awesomium Does exactly what I need! "Windowless web-browser framework". Brilliant.
Basically you are trying to do things, which are not intended to be done in that way.
You generate HTML + Javascript to enable the browser to draw it.
You write C# to enable any kind of server side things.
Generating HTML + Javascript on server to load it into a browser on server to be able to save PNG sounds bad.
Did you think about other approaches like generating the image using server side C# component?
Basically, why do you really need to save it on server? Maybe somebody can provide better solution?
See Generating HTML Canvas image data server-side? for a PhantomJs solution (similar to Node.js, but different, single file, no install)

Categories

Resources