Text strings (names) get input into the white sectors. As you can see, the lines need to be able to be drawn at any different angles, and the text that goes into them would also have to be aligned at a large number of different angles.
I never got out of the PageMill league with HTML and I don’t know JavaScript, but be that as it may I need to create a dynamic (i.e., “the names will come from database fields so I can’t just do it in Photoshop”) display of this nature and HTML or JavaScript seem like possibilities.
Is there a way to align lines and text at arbitrary ° of rotation like that in HTML, or to create instrux in Javascript that will result in same?
Background:
Ultimate destination is a Filemaker layout. I know I can’t do this in native FileMaker (not even 11; it does some cool charts but not this kind of chart AFAIK) so the most likely tool is to use web code and display it in a “web viewer”. <—— link = QT movie with sound. (SFW otherwise.) I don’t need an exterior web source, I can set up the web viewer with the raw HTML itself (interspersed with data field values) and it can include javascript and any other code that can be embedded in a web page.
Actual example code is beyond the limits of my free time at the moment, but some modern browsers (such as Firefox) support new CSS code to enable arbitrary rotation and skewing of HTML elements. Hope this helps.
Alternatively, you can use the HTML5 Canvas element or SVG in most decent browsers to generate graphics on the fly. The biggest problem will be how to get the data out of the database, and you’ll probably need some other language or toolkit for that - and if you’re going that route there really isn’t much point in inserting JavaScript anywhere; just use whatever libraries you can find (Cairo graphics is pretty good, but there’s a lot of them) to generate SVG or PNG or JPGs directly - it’ll be usable anywhere even on old browsers and possibly also be more efficient.
The browser “engine” that FileMaker users is the one that is default on the OS on which it’s running. For me as a Mac-based person that would be Safari, and therefore WebKit.
(For poor suffering Windows FileMaker users I guess it’s IE).
My HTML chops are so poor I can’t tell if any of the replies so far constitute a “yes you can” answer or not. You need to dumb it down a bit.
No, that definitely WON’T be the biggest problem. I will define a “web viewer” as something equivalent to “http://chart.apis.google.com/chart?chs=” & Table X::Field A & “x” & Table X::Field B & " & “&chd=t:” & Table X::Field C & “,” & Table D::Field D & “&cht=p3&chl=” & Table X::Field E & “|” & Table X::Field F
where Field A = 250 and Field B contains 100 and Field C’s value is 60 and Field C contains 40 and Field E contains the string “Hello” and Field F has “World” in it, such a calculated URL becomes:
Now, as I said before, I don’t need an external system like Google charts; I can intersperse the raw HTML with field values instead of interspersing a URL with field values, and render THAT in my web viewer. And that’s what I expect to do, if I can wrap my head around what the code itself has to look like.
You can do it but it’s not going to be easy. And you might get halfway through and find that you can’t make it do exactly what you really want it to do, and it looks like shit and/or runs slowly.
To see what the code looks like, check out the source of the example from [cc]'s second link.
What you’ll need to do is figure out how many items need to go in to one arc, then do the math to figure out what degree each item needs to be displayed at. This is probably best done either in your database output, or your dynamic coding (like PHP). Something that can count for you. Then each item will need to be wrapped in a div or a span with -moz-transform and -webkit-transform styles inline, with the proper degree setting for each item.
It’s going to be a bear of a project to do. I work with HTML all day, every day. If I had a project like this presented to me, I’d probably call my Flash guy and hand it off to him.
My idiot-savant’s approach to code has taken me this far (good pattern recognition, almost complete absence of anything beyond vestigial comprehension of what most of this code is actually doing…this is the first time I’ve edited so much as a character’s worth of CSS, anywhere, ever) but as you can see from screenshot the transformation as one moves into the right half of the hemisphere is less than ideal. Or rather it’s doing exactly what it was doing in the left half but for what I assume are compellingly obvious reasons I’d like to flip each textstring as it exists on the right so that its locations stays put but as a textobject renders upside down.
And I have no clue how to do that. The transforms stolen from that isocube example page rotate the textstring (position as well as orientation) around the centerpoint of a grid of points. I’m only using the “rotate” parameter, as the “skew” parameter also seems to move the location around and it was easier to backwards engineer the desired code from the desired locations using just one parameter.
How do I flip a given textstring on its back, either in the CSS of the relevant “DIV” definition or in the HTML farther down where I specify the textstring between div tags?
Actually, scratch that. I think what you want to do, instead of rotating to higher degrees you want to start rotating to negative degrees. So you would want items on the left side of 90* to be rotated positively, and everything on the left side to be rotated negatively (like -45).
Check out this example. The 2009 in his design is rotated -90 degrees. If it were rotated -60, it would be “right side up” on the right side of your fan.
I would have thought that would modify the “where” or it and not just the orientation of it. After all, in my example (see screen shot link, post 7) I do not end up with the word “one” intersected at a 90° angle by the word “thirtytwo”; instead, “thirtytwo” is way the heck up around the outside of a curve. (A 1000 pixel curve defined by the width definition in the CSS, I think).
