Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
There is an idea to create an online music theory quiz. I have created a drawing in Inkscape and saved it in svg format. The file is used as an external source and has been added to HTML code.
The challenges I have are as follows:
1) How to make lines below treble staff activate (selected)?
2) How to put the names of the notes (A, B, C, D, E, F, G) into the underlined spaces?
3) How to name the repeated notes with the same letter (e.g. "F" is repeated 2 times in my sample)?
<!DOCTYPE html>
<html>
<body>
<img src="image_library/grandstaff_drawing.svg" />
</body>
</html>
4) I have converted svg into png to show a quiz draft.
That actually involves quite complex javascripting :-) In your way, you'd have to do roughly the following:
Download the SVG as "text" (or rather XML), via XHR (e.g. $.get(image_library/grandstaff_drawing.svg))
Parse the downloaded data and create an <svg> element in the document (as opposed to <img>
Find all the notes and determine their position (on the y axis) and determine their name from that
Create all the programming necessary for the underlined spaces
Probably an easier approach would be to create the stave in the browser and have the graphics of the key and notes merely as components. Then if you'll want to create e.g. an "CDE" note sequence, you'll be positioning the note components manually. You'll have to determine the y axis offsets of each note (e.g. 60px from top for C, 55px for D, 50px for E - assuming a line height of 10px), but it will be easier than determining the same from an Inkscape SVG. You'll have to learn a bit more about how SVG works, but you'd need that sooner or later anyway :-) So the steps would be the following
Create an array in your browser, indicating the sequence to display (['C', 'D', 'E'])
Create an <svg> element for the stave and insert all the notes into it by iterating over the note array (you might want to use some SVG framework, like Raphael or D3)
Create the programming necessary for the underlined spaces area, again by iterating over the array
The advantage of this approach is that you'll have the sequence in a JavaScript variable and from that you'll build both the stave and the underlined spaces, making it easier to determine if the user matched the notes correctly. Reconstructing the same variable from the SVG, as in the first approach, is going to be quite messy and prone to errors (as even a small difference between two Inkscape SVG will mess up your programming and you'll have to cater for it).
I'd say this is a very broad question, it's basically how do I program this application. JavaScript doesn't have a function determineSequenceFromSvgStove or createBlankAreasWithFollowingCorrectAnswers Try one of the approaches above and if you run into a trouble with how to implement some of the steps, ask about them.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I intend to recolor a website with a new palette of colors. I plan to first extract the colors from the webpage and determine its color palette and then perform a one-to-one mapping with the palette. I) Would you recommend a better approach? Regarding this approach, I have the following questions:
II) How do I extract the colors from the web page?. My guess is scraping the stylesheets of the page. However, there might be unused styles or colors corresponding to hidden elements. III) Would it be a better idea to find the visible DOM elements and see their computed colors?
IV) How do I determine what the primary colors are in the color palette of the webpage? Counting the frequency of colors or the size of the colored elements might be an option and I was wondering what would be a robust solution.
In the case, the stylesheets do not exhaustively specify the colors of the web page, the browser might use defaults. V) How do I consider the default colors as well?
Finally, VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets?
I) Would you recommend a better approach? II) How do I extract the colors from the web page? You can use Site Palette for this. It's an amazing Chrome / Safari / FireFox extension that analyzes a site's colors and presents them in a very organized way in just a matter of seconds.
III) Would it be a better idea to find the visible DOM elements and see their computed colors? I'm pretty sure the tool only determines the visible elements' colors.
IV) How do I determine what the primary colors are in the color palette of the webpage? This is very subjective. Some people mix all colors of a rainbow in a single webpage. It's hard to tell what the primary color is, assuming it exists.
VI) What is a good way to override the webpage's colors? Can this be achieved through User Style Sheets? The best way to override the colors largely depends on the framework you're using the level of control you have. I don't see why it can't be achieved through User Style Sheets if you're able to identify the elements you're trying to override.
I would download the images and create a palette from those using a good graphics program (like PhotoShop, Fireworks, or Gimp). Another option (also using one of those programs) would be to use the "eye dropper tool" to sample any color on the webpage that you were curious about (and give you the related rgb# so you can duplicate it).
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!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am new to JS and am coding a game that will be totally client-side. I have a fundamental question about the HTML structure.
Say that the game is going to be a RPG and I want to show the user their character's statistics, like Intelligence 18, Strength 15, Charisma 20 etc.
Now since these values are not static and will change every new turn (the game is turn based) these values need to be filled in by JavaScript. Let's say we want to display them in a list.
As far as I can see there are two ways to do this, one is to keep a static HTML and use JavaScript only to fill in the values like this:
<ul>
<li>Intelligence:
<div id="IntValue"></div>
</li>
<li>Strength:
<div id="StrValue"></div>
</li>
</ul>
And then in JavaScript edit those divs like getElementById("IntValue").innerHTML = "18";
A second method might be to put only <ul id="CharStats"></ul> in the actual HTML file and then generate that entire list with all the <li> elements and such with JavaScript. For example I could create a tableHTML string and then dynamically add all the <ul>'s to it one by one, and then get CharStats and set its innerHTML to that tableHTML string.
Which is better? I know it would depend on the specific case, but can you at least guide me in the direction of some good resources about coding such things with JavaScript?
Both methods are fine, as a matter of fact there are entire frameworks built on rendering html client side to reduce server load - these frameworks need to be supplied with JSON from the server instead of an entire HTML response afterwhich the JS builds the HTML code that basically makes the page.
However in your case you might want to do things differently, look at it this way:
Method A: Update specific element
Method B: Refresh entire list every time
Method A, If you only change 1 stat per turn - this is the way to go since you'll be updating less of the DOM at a time but you'll have more ID's to keep track of.
Method B, If you're changing multiple stats per turn then you'll probably want to do this since you can just build the <li>'s and put them inside a ul every turn.
It depends on your situation, Method B does modify the DOM more than Method A but both are good to use.
NOTE
Method B removes more elements than Method A, note that if you have other event handlers bound to the elements being refreshed by Method B you're going to have to reselect these elements since the element you used before will be gone.
Performance wise I would not worry about wether Method A or Method B is best. The one least error prone is probably Method A since you're updating specific elements on the page (less DOM manipulation means less possible errors).
Hope this helps pushing you into the right direction, I linked the framework for reference since it uses a quite cool method of displaying data from the server side ;)
Good luck,
Sidney Liebrand
I spent all day attempting to write a javascript which selects all white pixels in a bitmap
I used a loop within a loop to iterate through all of the pixels one by one (the outer loop went through the vertical lines and inner loop went though the horizontal ones)
and used coloursampler to detect if the pixels RGB values were close enough to 255 or not.
anyway this code took a very very long time to complete
i literally saw the colour sample cursor move over every single pixel one at a time.
I the found out that I could record an action which selects all colours within a range from the whole image and call it from my script, and this worked instantly.
I am not surprised that my way was slow.
but that raises the question
How come Photoshop is able to scan a whole document for pixels which meet certain criteria using select>range and tools such as the magic wand and quick select yet my code runs so slow
Surely photoshop must need to scan each individual pixel so achieve such effects.
For elements of Photoshop which are not directly supported by the Javascript API (color range selection is one of them) I suggest you look into using the Adobe Scripting Listener plugin, and utilize the script listener's output for the core of your script.
I have written a tutorial on how to utilize the script listener for Color selection here. The tutorials use Python, but the overall concepts are exactly the same- the scripting listener even puts out a pure JS file for you!
This will be much faster than iterating over pixels, as it gives you access to the same fast tools and actions that are core parts of the Photoshop Application.
Hope that helps out.
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 interested in seeing a good diff algorithm, possibly in Javascript, for rendering a side-by-side diff of two HTML pages. The idea would be that the diff would show the differences of the rendered HTML.
To clarify, I want to be able to see the side-by-side diffs as rendered output. So if I delete a paragraph, the side by side view would know to space things correctly.
#Josh exactly. Though maybe it would show the deleted text in red or something. The idea is that if I use a WYSIWYG editor for my HTML content, I don't want to have to switch to HTML to do diffs. I want to do it with two WYSIWYG editors side by side maybe. Or at least display diffs side-by-side in an end-user friendly matter.
There's another nice trick you can use to significantly improve the look of a rendered HTML diff. Although this doesn't fully solve the initial problem, it will make a significant difference in the appearance of your rendered HTML diffs.
Side-by-side rendered HTML will make it very difficult for your diff to line up vertically. Vertical alignment is crucial for comparing side-by-side diffs. In order to improve the vertical alignment of a side-by-side diff, you can insert invisible HTML elements in each version of the diff at "checkpoints" where the diff should be vertically aligned. Then you can use a bit of client-side JavaScript to add vertical spacing around checkpoint until the sides line up vertically.
Explained in a little more detail:
If you want to use this technique, run your diff algorithm and insert a bunch of visibility:hidden <span>s or tiny <div>s wherever your side-by-side versions should match up, according to the diff. Then run JavaScript that finds each checkpoint (and its side-by-side neighbor) and adds vertical spacing to the checkpoint that is higher-up (shallower) on the page. Now your rendered HTML diff will be vertically aligned up to that checkpoint, and you can continue repairing vertical alignment down the rest of your side-by-side page.
Over the weekend I posted a new project on codeplex that implements an HTML diff algorithm in C#. The original algorithm was written in Ruby. I understand you were looking for a JavaScript implementation, perhaps having one available in C# with source code could assist you to port the algorithm. Here is the link if you are interested: htmldiff.codeplex.com. You can read more about it here.
UPDATE: This library has been moved to GitHub.
I ended up needing something similar awhile back. To get the HTML to line up side to side, you could use two iFrames, but you'd then have to tie their scrolling together via javascript as you scroll (if you allow scrolling).
To see the diff, however, you will more than likely want to use someone else's library. I used DaisyDiff, a Java library, for a similar project where my client was happy with seeing a single HTML rendering of the content with MS Word "track changes"-like markup.
HTH
Consider using the output of links or lynx to render a text-only version of the html, and then diff that.
What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.
So, you expect
<font face="Arial">Hi Mom</font>
and
<span style="font-family:Arial;">Hi Mom</span>
to be considered the same?
The output depends very much on the User Agent. Like Ionut Anghelcovici suggests, make an image. Do one for every browser you care about.
Use the markup mode of Pretty Diff for HTML. It is written entirely in JavaScript.
http://prettydiff.com/
If it is XHTML (which assumes a lot on my part) would the Xml Diff Patch Toolkit help? http://msdn.microsoft.com/en-us/library/aa302294.aspx
For smaller differences you might be able to do a normal text-diff, and then analyse the missing or inserted pieces to see how to resolve it, but for any larger differences you're going to have a very tough time doing this.
For instance, how would you detect, and show, that a left-aligned image (floating left of a paragraph of text) has suddenly become right-aligned?
Using a text differ will break on non-trivial documents.
Depending on what you think is intuitive, XML differs will probably generate diffs that aren't very good for text with markup.
AFAIK, DaisyDiff is the only library specialized in HTML. It works great for a subset of HTML.
If you were working with Java and XHTML, XMLUnit allows you to compare two XML documents via the org.custommonkey.xmlunit.DetailedDiff class:
Compares and describes all the
differences between two XML documents.
The document comparison does not stop
once the first unrecoverable
difference is found, unlike the Diff
class.
I believe a good way to do this is to render the HTML to an image and then use some diff tool that can compare images to spot the differences.