I'm currently making a toy project that converts a string of text into a series of GitHub commits. The end result should look something like this:
The solution I am currently working on is to take a string of text and convert each character to a 7x7 array of boolean values, where true is a green dot, and false is not. Then I'll iterate over that to come up with an array of commits to send to GitHub.
For the first part, I've been searching for an npm package that takes text, like ascii characters and returns a bmp or similar image representing the text, but I haven't had any luck.
Does anybody know of a library that will do something like that? My main requirement is that I can set the 'resolution' of the output, so I can get a 7x7 image from it. Alternatively, if there is an entirely different solution, I'd be happy to hear that too.
Thanks
Since you are using node.js, you could use opencv4node.js. It has features to write text to an image, that are normally used to annotate images, but should work well for your case.
The image could be whatever grid size you prefer. Then you could iterate over the pixels and use their coordinates to determine the commits.
Related
I'm using Mapbox with Leaflet for drawing, editing and removing polygons etc. I'm also using leaflet.shapefile to upload shapefiles and add them to the map.
For a certain application, I need to convert the layer to a GeoJSON object, which I then convert to a JSON string using this code:
var fcgeojson = layer.toGeoJSON();
var fcgeojsonstring = JSON.stringify(fcgeojson);
I have a working version of this in this jsfiddle. And for most of the shapefiles, it works just fine. However, in some cases, like when I use this shapefile, the JSON string of one of the polygons is actually incomplete. You can check out those strings by clicking on the "Test" button in the jsfiddle.
I haven't been able to figure out why this is happening (my guess is maybe the shapefile has too many vertices).
The method you are using to test the json string is where the problem arises. The incomplete json string comes from either stringify or alert. For this question, the problem likely lies with the latter.
Javascript alerts truncate messages at 10 000 characters, which coincidentally is exactly the number of characters that appear for me in the alert box when testing in your jsfiddle with your shapefile loaded.
When I used console.log() rather than alert() I could see the entire json (which is nearly 14 000 characters long). Though, there is a max size for console.log that varies with browsers, so you could always set the content of a div or other element to show the full content on screen.
I using JasonDavies's Word Cloud for my project, but there is a problem that I using Persian[Farsi] Strings and my problem here that words have overlapping in Svg.
This is my project's output:
What happened to the Farsi words?
As explained on the About page for the project, the generator needs to retrieve the shape of a glyph to be able to compute where it is "safe" to put other words. The about page explains the process in much more detail, but here's what we care for:
Glyphs are rendered individually to a hidden <canvas> element.
Pixel data is retrieved
Bounding boxes are derived
The word cloud is generated.
Now, the critical insight is that in Western (and many other) scripts, glyphs don't change shape based on context often. Yes, there are such things as ligatures, but they are generally rare, and definitely not necessary for the script.
In Persian, however, the glyph shape will change based on context. For non-Persian readers, look at ی and س which, when combined, become یس. Yes, that last one is two glyphs!
The algorithm actually has no problem dealing with Persian characters, as you can see by hacking the demo on the about page, putting a breakpoint just after the d.code is generated, to be able to modify it:
Replacing it with 1740, which is the charCode for the first Persian glyph above, and letting the algorithm run, shows beautiful and perfectly correct bounding boxes around the glyph:
The issue is that when the word cloud is actually rendered, the glyph is placed in context and... changes shape. The generator doesn't know this, though, and continues to use the old bounding data to place other words, thus creating the overlapping you witnessed. In addition, there is probably also an issue around right-to-left handling of text, which certainly would not help.
I would encourage you to take this up the author of the generator directly. The project has a GitHub page: https://github.com/jasondavies/d3-cloud so opening an issue there (and maybe referring back to this answer) would help!
I'm searching for a way to cut out any shape from an image and save it somewhere on the server.
I'm looking for solutions in PHP and/or JavaScript but haven't found anything yet.
I'm not sure but as far as I know the gd-library in PHP is only capable of cutting out or copying rectangular shapes from source images.
In JavaScript this probably can be achieved somehow through the canvas-object but I haven't found any libraries that provide such a function (rafael.js or paper.js don't seem to do the job) ...
Example:
Let's say i got the following image:
Now I would like to mark a certain part of that image (by x/y-coordinates):
And finally i want to extract that part as a single image (with the rest of the background beeing filled black):
Thank you for any help
Using PHP only, imagecopy lets you easily copy a part of an image by coordinates and do with it as you wish.
Edit: Using Imagick it's possible to crop images to specific shapes among other functions.
I am very curious to hear input from others on a problem I've been contemplating for some time now.
Essentially I would like to present a user with a text document and allow him/her to make selections of text and annotate it. Specific to the annotations I aim to achieve the following:
Allow users to make a text selection, annotate it, then save the selection and annotation for reference later
(UI) Support representing overlapped annotations. For example if the string where: "This is the test sentence for my example test sentence", user1 might have an annotation on "is the test sentence for my example" and user2 might have an annotation on "for my example".
Account for a situations where the document's text changes. The annotations would to be updated, if possible.
How would you tackle this from a technical perspective?
Some ideas I've had are:
Use javascript ranges and store an annotation as a pair of integers something like: (document_start_char, document_end_char). Save this pair in the db.
Alternatively, using JS get the text selected and actually save the full text in the db. (not sure how i would then do overlapping annotations)
Represent overlapped annotations by applying a css style to highlight the text then darken the "stack" of annotations where they overlap. Smallest annotation would always have to be on the top of the "stack".
What are your thoughts or areas of improvement? How the heck could i support a document's text being updated without breaking all the annotations?
I'm researching this same question and personally I favor staying away from rolling my own, in favor of an existing open source library like Annotator.
http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html (404 response)
http://mark.koli.ch/2009/09/05/get-selected-text-javascript.html- (404 response)
Getting the selected text is really easy. Storing it (or its starting/ending points) is also a joke. But what about your point number 3? What if the text changes?
If the text changes, both the original text and the original selection coordinates you stored won't equal the current modified text. You should be aware of the annotations present in the text document, so that everytime it changes, the annotations referencing to that particular piece of changed text should be updated, or deleted (maybe after a quick comparison between the before and after text: are some words missing? or just some words have been corrected?), but this seems really a struggling task.
I think storing the entire text annotation in a db is essential, to avoid it being changed and the annotation lost. This way you will still have the complete text you annotated. Then you should also use a sort of flag to indicate the start character of the annotation, and if the text changes, you could calculate the difference in characters from the document text before the change, and the one after it, and find this way the new starting point of the original annotation (assuming the annotation part of the document text has't changed).
Dividing the text document in as many paragraphs as possible should also help, this way you could separate different pieces of the document and work on one by one.
Now I would really like to see it done! :)
I'm trying to replicate an HTML SELECT element (drop-down-list or combobox) in Flash (AS3).
In most browsers, when you have one in focus and you type something, the combobox will try to find the value within its options and show the closest one. I was wondering what kind of algorithm is used for that.
I don't think its Levenshtein or similar since it only works with the beginning of the string.
I'm thinking that it works by keeping a buffer of what has been written, and tries to find a string starting with that... if it doesn't find anything, it clears the buffer, and searches a string beginning with the last character pressed.
I already prototyped this, and it works quite ok, with one caveat... In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character. I think I could fix this, but was wondering if someone has already done it, to compare the algorithms... its turning into quite a complex code to test and debug, and I'm not sure I'm covering all the possibilities...
The reaction of form widgets to keyboard interaction is not standardised and different browsers don't agree. This is always an issue when creating ersatz form controls from script.
In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character.
This feature comes from Windows and is quite unintuitive. The exact rule isn't that exactly, is quite obscure, and gives different results in IE and Opera versus the other browsers.
IMO this behaviour is highly undesirable. Since no average user is going to be able to predict how the rule works, I personally would leave it out and simply select the first option to match the typed leftstring. This is easier for you to code and easier for the user to understand.
Just did some tests on firefox, and I noticed (this is not official information, just pure speculation):
Key pressed event:
Esc (firefox only): clear buffer
Arrow up/down: move up/down on the list, clear buffer
Page up/down: move up/down by 20 on the list, clear buffer
Home: move to the top of the list, clear buffer
End: move to the end of the list, clear buffer
Other:
Empty buffer?
Yes: add key to buffer
buffer.length == 1 AND key is same as last key pressed?
Yes: go on next item starting with key.
No: add key to buffer and search next item starting with buffer.
1.5 seconds passed event: clear buffer
This will need a timer of course.
I don't know what algorithm is used in the browsers but one that comes to mind that would do what you want is sequence alignment or a longest common subsequence algorithm. It would allow you to match any part of the string to any other part of the string (with possible gaps between the matched sub strings). It's not massively quick though.
http://en.wikipedia.org/wiki/Sequence_alignment
there's also some very good lecture videos online at MIT open course ware
http://ocw.mit.edu/OcwWeb/Electrical-Engineering-and-Computer-Science/6-046JFall-2005/VideoLectures/detail/embed15.htm
In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character. I think I could fix this, but was wondering if someone has already done it, to compare the algorithms
You might want to reset to the top of the dropdown after every key press and then search for the appended buffer.