E-50 Fighter Interactive Drawing

Show off your finished Inkscape work.
Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

E-50 Fighter Interactive Drawing

Postby Eldarado » Sat May 19, 2012 5:31 am

Hello!

It's my first complex SVG drawing. I tried to make an interactive picture so try the buttons ;)

http://norbekov.kz/files/e50/E-50-23.svg

What do you say?
Last edited by Eldarado on Sun Jun 03, 2012 4:51 pm, edited 2 times in total.

User avatar
brynn
Posts: 10205
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: E-50 Fighter Interactive Drawing

Postby brynn » Sat May 19, 2012 11:29 am

Image
Welcome to InkscapeForum!

OMG, that is awesome!! Very nice work!

We've had a few people posting messages here recently, asking how to do that kind of thing. Responses were pretty sparse, and I only understand the general concept. If you were at all motivated to write one, I'm sure a lot of people would find a tutorial very useful -- even if it's just the basic general steps. I know I would! Or if you've happened to find a tutorial somewhere, could you share the link?

Anyway, congrats on a successful project :D

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Sun May 20, 2012 2:01 am

Ok. It's quite simple. Just a bit of JS and CSS.

procastino
Posts: 34
Joined: Tue Jan 08, 2008 10:20 pm

Re: E-50 Fighter Interactive Drawing

Postby procastino » Mon May 21, 2012 4:47 am

Yes please!!
I would really appreciate some guidance in how to do images like the one you did, it would be very helpful for me and my students.
If you find the time to write down some instructions, I will be very grateful :D
And congrats for the work!

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Sun Jun 03, 2012 7:20 pm

Sorry for long pause.

Now I tell you how I made this interactive drawing.
At first, it was ordinary SVG picture of a fictional fighter:

SVG Image

I decided to add some details and explore new SVG possibilities.

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Sun Jun 03, 2012 7:54 pm

Step 1: divide drawing into several layers: Open layers panel Shift+Ctrl+L and click Create new layer button Image
Give layer a name and move there a part of image. Use Cut and Paste in Place for covinience.

For example, "p-top" layer contains only this:
Image

And "internals" layers contains only this:
Image

And complete layers list looks that way:
Image

Note that "Buttons" layers contains two sublayers "on" and "off".

User avatar
brynn
Posts: 10205
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: E-50 Fighter Interactive Drawing

Postby brynn » Sun Jun 03, 2012 9:31 pm

Thanks for that Eldarado :D

I think we probably expected that you used layers. It's more the code that you used and how you made the links work, that we were after (or at least what I was interested in). How does clicking the button object cause some layers to close and others to open. For example, I know how to make an object into a link. But I don't know how to make the object clickable or an active link. I know it's in the code, but I don't know how to write code. I guess I was hoping that you had found some ready made bits of code that you could tell us about (or show us).

Maybe for a start, did you use javascript or XML only?

Or maybe I've posted before you've finished?

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Sun Jun 03, 2012 9:54 pm

Well, yes, I split it all to several posts. :roll:

Step 2: Now I want to let the people to see what's inside the plane. I need X-Rays! :mrgreen:
As you know SVG supports DOM, CSS and JS, so I'll do this using CSS property opacity:
opacity:1.0; — means no opacity, opacity:0.5; — means 50% opacity.
And of course there will be a bit of simple JS code.

To apply CSS properties I need to group objects in "p-top" layer and identify that group. Group objects with Ctrl+G, select that group and press Shift+Ctrl+O to open Object properties window:
Image
Type object id into Id field (highlighted with blue border). I use ID "plane-t". To apply chenges click Set button (pointed by blue arrow). Note the red arrow. It point to roll-down section "Interactivity". I'll use it later.

I gave id's to all objects that involved into interactivity.

And now time for buttons! 8-)

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Mon Jun 04, 2012 12:05 am

Step 3: buttons.

In SVG any object can be a "button" but I use classic appearence: a rectangle with a text over it. Rectangle and text grouped into an object — a button: Image
Each button has a unique ID.

Actually there are two buttons for "on" and "off" states. They split into different layers and positioned so that "on-button" obscures "off-button": Image

Now add some JavaScript magic.

Select "x-ray" button on "on" layer and press Shift+Ctrl+O to open Object properties window. Set its ID to "x-ray-on" — it will be used later (don't forget to press "Set" button).
Then click "Interactivity" button (remember red arrow?) Window will stretch down and you'll see event lines:
Image

I need two of them: onclick and onmouseover.

In "onclick" field I write this code:
this.style.display='none';
document.getElementById("plane-t").style.opacity = "0.5";

It makes two things. First line hides the on-button you clicking and thus reveals corresponding off-button. Second line applies to "plane-t" object 50% opacity.
Details for code.
First line. Word "this" points to object that recieves event: a button. Word "style" points to style properties of an object. Word "display" is a property that represents same CSS property. Word 'none' is a value of property that makes object invisible.
Second line. Word "document" refers to an object of whole SVG file. "getElementById" is a function (or method) of the "document" object. That method points to a specific object inside. So 'document.getElementById("plane-t")' is an object with ID "plane-t" — I made it earlier at Step 2.

Now I need to write code for off button. It's easy. Hide "on" layer. Select off-button, open Object properties window (Shift+Ctrl+O), and click "Interactivity". In "onclick" field write this code:
document.getElementById('x-ray-on').style.display='inline';
document.getElementById("plane-t").style.opacity = "1";

Details for code.
document.getElementById('x-ray-on') refers to on-button that must be shown to hide off-button. style.display='inline'; rewrites old value 'none' and object became visible. Instead of "inline" you can write "block" the result will be the same but InkScape uses "inline".

And about "onmouseover" field. The code in it executes when you place cursor over an object. I'm using it for additional interactivity. When you point to hte button, cursor transforms to pointer — a hand.

Later, when I need to made transparent many objects, my code became too complex: this.style.display='none';document.getElementById("plane-t").style.opacity = "0.5";document.getElementById("plane-b").style.opacity = "0.5";document.getElementById("plane-f").style.opacity = "0.5";document.getElementById("plane-s").style.opacity = "0.5";document.getElementById("wing-s").style.opacity = "0.5";document.getElementById("keel-s").style.opacity = "0.5";
That's not good and I'm now investigating other ways of styling the bunch of objects.

That's all folks! All other button actions use different variations of Step 3.
Questions?

User avatar
brynn
Posts: 10205
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: E-50 Fighter Interactive Drawing

Postby brynn » Mon Jun 04, 2012 6:13 pm

Image Yay!
I'm so happy to have this now, because I've felt so helpless when folks have asked how to do it, and I just didn't know where to turn. Oh yes, questions for sure! Once I know enough about it, I hope to write a comprehensive tutorial. But I have a lot to learn yet :D

So you used some CSS and some JS? I had no idea that 2 different codes could be used in one page or document. Hhhmm....I guess some codes would be incompatible with each other? Or could you combine any kind of code, to get the result that you need?

I'm not clear where you put the CSS opacity info?

The code that you placed in the Object Properties dialog (onclick and onmouseover) (and the others that you didn't use) do you know of a resource that lists all the codes that could possibly be used there (in/with Inkscape)? Or, if someone wanted to make something like this, like an interactive webpage, would you recommend learning javascript from the beginning? And same question about CSS -- is there kind of a list of commonly used codes somewhere, or better to learn CSS from the beginning?

I have learned the basic HTML code, although I haven't used it, and have forgotten a lot. It should come back quickly though. I planned to move on to CSS, but I haven't quite gotten around to it. I was a little more motivated in the past to have a website, than I am now. But once I have all the proper skills, I'll probably get back into it.

Anyway, thanks Eldarado :D
Awesome info!

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Mon Jun 04, 2012 7:04 pm

brynn wrote:Or could you combine any kind of code, to get the result that you need?

Yes.

brynn wrote:I'm not clear where you put the CSS opacity info?

CSS properties can be set by CSS code or by JavaScript code.

CSS code looks like this:

Code: Select all

#some-id {
  opacity: 0.5;
}

or like this:

Code: Select all

<sometag style="opacity:0.5">


In JavaScript setting CSS properties looks like this:

Code: Select all

document.getElemetById("some-id").style.opacity = '0.5';


The common model of interactive SVG is: Event → JavaScript → CSS.
We get Event: clicking, hovering etc. Catch it with JS event helpers: onclick, onmouseover etc. And use JS to modify CSS properties.

brynn wrote:do you know of a resource that lists all the codes that could possibly be used there (in/with Inkscape)?


Any JS tutorial site.
Like http://www.w3schools.com/js/ or https://developer.mozilla.org/en/JavaScript

brynn wrote:Or, if someone wanted to make something like this, like an interactive webpage, would you recommend learning javascript from the beginning? And same question about CSS -- is there kind of a list of commonly used codes somewhere, or better to learn CSS from the beginning?

One don't have to be a Javascript guru or pro. Learning basics is enough. Same for CSS.

User avatar
brynn
Posts: 10205
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: E-50 Fighter Interactive Drawing

Postby brynn » Mon Jun 04, 2012 11:03 pm

Thanks :D
I'm so excited, I'll be trying this soon! Just have to think up a good project.

procastino
Posts: 34
Joined: Tue Jan 08, 2008 10:20 pm

Re: E-50 Fighter Interactive Drawing

Postby procastino » Wed Jun 06, 2012 3:28 am

Hey!!
Thanks a lot for the tutorial! I hope I will soon have time to try it on some stuff.

Awesome!!!

procastino
Posts: 34
Joined: Tue Jan 08, 2008 10:20 pm

Re: E-50 Fighter Interactive Drawing

Postby procastino » Fri Jun 15, 2012 4:42 pm

Eldarado,
Is it ok if I translate your tutorial to my language? Galician http://en.wikipedia.org/wiki/Galician_language
Of course, I will credit you.
Cheers!

Eldarado
Posts: 12
Joined: Sat May 19, 2012 5:02 am

Re: E-50 Fighter Interactive Drawing

Postby Eldarado » Fri Jun 15, 2012 5:47 pm

Ok.


Return to “Finished Inkscape Work”

Who is online

Users browsing this forum: No registered users and 2 guests