Navigation arrows ?

Question

0.00/5 (No votes)

See more:

-q12-
I have a UserControl named Background and a simple class named NavigationArrows.

This NavigationArrows class is loading a bunch of *.png's images displaying some arrows that are lit OR unlit, depending on keypressed by user.
The UC Background, is containing the BIG Background image and is panning it through the Background_KeyPress event.
----
What I want is simple:
I want to connect the arrows to the KeyPress event.
(to show the lit arrow image when a key is pressed)
----
BUT !
I can do it very simple, all inside UC. But I dont want that.
I want the NavigationArrows Class to contain every aspect of the arrows!!!!
loading the images, the !!!Events!!!, position on canvas, size of the arrows, and the rest that I can't think of now. In a word, to contain all the properties, events, methods, that are related to the arrows class/(or object if you want).
My big problem is the connections between the 2 clases. How to connect them in a simple and elegant way, in a LOGICAL way, in a NON-Confusing way.
My way of linking these 2 clases is very confusing in code. Too many arguments here and there. (It is not confusing because of the names I gave - not that) It is confusing because of the structure i must build !!! It is extremely convoluted and wtf at every corner.
----
Right now, in this stage I am presenting the code, it is the begining.
But I will have to load and link the rest of the arrow images (i did not show that here)- it is not scripted yet. But I know from experience, it will become agglomerated very quickly.
Also, I will have to load OTHER classes/objects into canvas too. This Arrow class is just a test. If I have to load 100 clases, each of them containing it's own SET of images (let's say 50 img per class), and with their own Methods and properties, and with their own !!EVENTS!!, that they must be conected to the Background object (somehow).
Do you see what I mean by LOGICAL way and NON-Confusing ?
It must be like a on/off switch this link between object and class. Something like:
UI.NavigationArrows navArrows = new UI.NavigationArrows();
navArrows.Active();
navArrows.pozition(0,0);
navArrows.size(20,20);
And thats it. And they must perform and do their jobs!
How can I achieve this?
Thank you,
-q12-

What I have tried:

public partial class Background : UserControl
//...................

        //UI.NavigationArrows navArrows = new UI.NavigationArrows();
        Rectangle navArrowsRectangle = new Rectangle(10, 10, 100, 100);
        void Background_Paint(object sender, PaintEventArgs e)
        {
            e.Graphics.DrawImage(q1.backgroundImage, q1.rectangle);//BackgroundImage
             
            string imgName = "UI\\NavigationArrows OFF.png";
            Image BaseImg = Image.FromFile(imgName);
            e.Graphics.DrawImage(BaseImg, navArrowsRectangle);//NavigationArrows OFF
        }

        void Background_KeyPress(object sender, KeyPressEventArgs e)
        {
            int th12 = 0;
            if (e.KeyChar == 'w')
            {
                if (q1.rectangle.Y < 0) q1.rectangle.Y += q1.amount;
                else q1.rectangle.Y = 0;
            }
            if (e.KeyChar == 's')
            {
                th12 = -q1.imgy + this.Height;
                if (q1.rectangle.Y > th12) q1.rectangle.Y -= q1.amount;
                else q1.rectangle.Y = th12;
            }
            if (e.KeyChar == 'a')
            {
                if (q1.rectangle.X < 0) q1.rectangle.X += q1.amount;
                else q1.rectangle.X = 0;
            }
            if (e.KeyChar == 'd')
            {
                th12 = -q1.imgx + this.Width;
                if (q1.rectangle.X > th12) q1.rectangle.X -= q1.amount;
                else q1.rectangle.X = th12;
            }
            this.Refresh();//forPaintEvent
        }

and this is my second class that I want it remodeled to become "In Itself".
I mean that it should plug and play into Background class.

public class NavigationArrows
{

    public void  InitializeNavigationArrows()
    {
        string imgName = "UI\\NavigationArrows OFF.png";
        BaseImg = Image.FromFile(imgName);
    }
    public Image BaseImg;

Posted 10-Mar-17 7:15am

_Q12_

Updated 13-Mar-17 20:35pm

v3

Add a Solution

Comments

Ralf Meier 10-Mar-17 13:59pm

For my understanding ... because of your text I'm a little bit confused.

What do you want to move with the Arrow-Control ? Something on the Form where the Arrow-Control is positioned on ?
Should this Arrow-Control allways work with the Keys - independent if this Control has the Focus or not ?

_Q12_ 10-Mar-17 14:29pm

... and to give you specific answers to your questions:
you"-What do you want to move with the Arrow-Control ? "
me: -nothing at the moment- I want them load on each specific keypressed.(w,a,s,d and combinations).
you"-Something on the Form where the Arrow-Control is positioned on ?"
me- on the form, on the background control, anywhere is position on.
you "Should this Arrow-Control allways work with the Keys?
- independent if this Control has the Focus or not ?"
me - Yes, work with the Keys. And Yes, independent of Focus.

_Q12_ 10-Mar-17 14:19pm

The background is the UserControl; The NavigationArrows is a class(but can be anything - a control too) - but in my example, to be easy to explain, is a class.
For the moment, the NavigationArrows Class, must respond to user Keypressed and call a coresponding image per key pressed.
If 'w' is pressed, arrowUp is made visible, When 'w' is released, the "NavigationArrows OFF.png" is shown as the default. Very easy!
I did not say anything about arrows functionality (when user press on a arrow with mouse - it should move stuff around) Not yet. But is it a very good point that it will be implemented sometime.
My question is not about the arrows per say , but the management of the code, files, and when everything is agglomerated to manage it and keep it clean enough.
When I will have all 9 images for the arrows loaded, each of them must be linked to the keypressed event and fire to a specific key pressed and combinations of keys (like "wa" or "sd").
And believe me when I say, that 9 images are making chaos in code if they are not 'properly'(i dont know how to do it yet) managed and planned.
And 9 is simple and few, but what to do when I have 50 other clases, for the characters, enemies, bullets, explosions, etc... How I will [integrate] them all in the same page of code, and [SEE] them without confusion. All I can do with my knowledge so far is a nice code soup, with a lot of head hurts and extreme intense concentration, when it should be more relaxed and ordered. But I dont know this yet - you must throw a smart fart for me. And I will catch it and I will be happy. :)))

Ralf Meier 10-Mar-17 14:48pm

OK ... I try to resume what you have said :
- normally there is nothing to be seen on the Screen
- if you press (for example) the "w" the Arrow-Up-Picture will appear at a defined position on the Screen. The same with the other Keys.

If you would say "Yes" to it you should do something like this :
- the Keys normally belong to the Control which has the Focus. The easiest way to solve that is : this functionality is part of the Form. Other Forms which should have the same functionality could derive from this form.
- the images you need for this could belong to this class (perhaps it could be a Component - that will allow you to make some settings with the UI)

I think, you try to develop a kind of game.
In the moment it is very difficult for me to be more specific because I can't imagine what is you goal for the moment and which is the final goal.

_Q12_ 10-Mar-17 15:10pm

you-"if you press (for example) the "w" the Arrow-Up-Picture will appear at a defined position on the Screen. The same with the other Keys."
me- Correct!
you: "the Keys normally belong to the Control which has the Focus. "
me- very good this point! My control that will have the focus will be the Background UserControl. On this control I already paint the big background image. Now I will paint a secondary image named NavigationArrows. But I want to paint it from outside this UC Background. I want to paint from a class. Something that will hold together all the little details about this arrows.

BillWoodruff 10-Mar-17 22:51pm

1. is this Windows Forms ? What is the "Main Form;" what are any other Forms ?

1. a where is the 'BackGround UserControl located ? on the "Main Form" ?

2. the "arrow keys" visual elements are also UserControls ? or, are they drawn on a UserControl or Form using 'Paint.

_Q12_ 10-Mar-17 23:30pm

yes, its windows forms. The BackGround UserControl is created on the form1, yes. The NavigationArrows is a simple class. It is used inside paint event from background control.
void Background_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(bg.backgroundImage, bg.rectangle); //BackgroundImage
e.Graphics.DrawImage(navArrow.Active(), navArrowsRectangle); //NavigationArrows
}

BillWoodruff 10-Mar-17 22:58pm

I think if you put some "visual indicator" in a UI, it should respond to the user clicking on it. I would have a click on your navigation arrows raise a 'Click event that can be subscribed to by wherever keyboard events for your app are being handled.

_Q12_ 10-Mar-17 23:34pm

I also submited a solution!
But is a wrong one... Well, it is correct and working as it is written there, but does not satisfy my needs.You can understand what I am doing from that solution, because its the entire Background UserControl there.

BillWoodruff 11-Mar-17 4:37am

I think there's a much simpler way to do this without using 'Paint.

But, first you need to edit and simplify the description of what you are trying to implement.

Is the "BackGround Control" a container that holds a bitmap, and you want the arrow keys to pan the image ?

_Q12_ 11-Mar-17 11:23am

I can pan the background image bitmap, that is inside the container "BackGround Control". I did it already. I did include a partial code for this aspect,here:
(you can see it in my request and in my solution)
void Background_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(bg.backgroundImage, bg.rectangle); //BackgroundImage
}

and everything that is in:
void Background_KeyDown(object sender, KeyEventArgs e)
is about this bitmap image being pan by the keys (w,a,s,d).

Though, the problem is a bit more complex than using the bitmaps,arrows or the Paint event, because these are little cogs. I am more interested in the box that is holding these cogs and the connection between boxes.

Right now,in my solution I already did a class
UI.NavigationArrows that is holding the paths to the images and some methods to connect to UControl. But this class is more like an extension. I want it "by itself".
All that I want is to "encapsulate"/or/collect all [navArrow] from the BackGround UControl, and make a single Class/or/object/or/whatever and have a clean UControl, with only 1 or 2 references to this navArrow Class.

_Q12_ 11-Mar-17 11:39am

I also updated my solution!
I put there the entire UserControl. You can see everything, the background bitmap image too. Apparently is not that easy as I thought. Thank you .

BillWoodruff 12-Mar-17 6:41am

Your code is much more readable now ! I'll try to respond soon.

cheers, Bill

_Q12_ 13-Mar-17 0:47am

Thank you very much! Please take your time. I know now, this is not easy to answer. But it will help me immensely.(and anyone interested)

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

_Q12_ · Answer 1 · 2017-03-10T14:10:00

This is what I was talking about!
And I am complaining because is very frustrating and annoying;
Look in how MANY places the navArrow is screw in.
I will highlight them for you.
Is a very ugly code - and I can not do other that this one.
It is the basic code I can normally do.

Imagine now I have to add another class(es) with images inside it.
Just imagine the WTF size when I am looking for something to find in this haystack of code!

Re-edited: I show the entire UserControl !

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace game_GameMap
{
    public partial class Background : UserControl
    {
        public struct BackgroundImage_
        {
            public int imgx, imgy;
            public int amount;
            public Image backgroundImage;
            public Rectangle rectangle;
            public Size windowSize;
        }
        public BackgroundImage_ bg = new BackgroundImage_();
        void Initialize_bg()
        {
            bg.amount = 50;
            string imgName = "assets\\map1Moon.jpg";
            bg.backgroundImage = Image.FromFile(imgName);
            bg.imgx = 736 * 3; bg.imgy = 552 * 3;
            bg.rectangle = new Rectangle(0, 0, bg.imgx, bg.imgy);
            bg.windowSize = this.Size;
        }
        public Background()
        {
            InitializeComponent();
        }
        private void Background_Load(object sender, EventArgs e)
        {
            DoubleBuffered = true;
            this.KeyDown += new KeyEventHandler(Background_KeyDown);
            this.KeyUp += new KeyEventHandler(Background_KeyUp);
            this.Paint += new PaintEventHandler(Background_Paint);
            Initialize_bg();

            navArrow.aInitializeNavigationArrows(); //navArrowPos();
        }




       
        void Background_Paint(object sender, PaintEventArgs e)
        {
            e.Graphics.DrawImage(bg.backgroundImage, bg.rectangle);//BackgroundImage
            e.Graphics.DrawImage(navArrow.Active(), navArrowsRectangle);//NavigationArrows
        }

       
        UI.NavigationArrows navArrow = new UI.NavigationArrows();
        int navarrowX = 100, navarrowY = 100;
        Rectangle navArrowsRectangle;
        void navArrowUpdatePosition()
        {
            navarrowX = this.Width / 2 - 50; navarrowY = this.Height - 100;
            navArrowsRectangle = new Rectangle(navarrowX, navarrowY, 100, 100);
        }
        void Background_KeyDown(object sender, KeyEventArgs e)
        {
            navArrowUpdatePosition();

            int th12 = 0;
            if (e.KeyCode == Keys.W)
            {
                navArrow.GetKey("w");
                if (bg.rectangle.Y < 0) bg.rectangle.Y += bg.amount;
                else bg.rectangle.Y = 0;
            }
            if (e.KeyCode == Keys.S)
            {
                navArrow.GetKey("s");
                th12 = -bg.imgy + this.Height;
                if (bg.rectangle.Y > th12) bg.rectangle.Y -= bg.amount;
                else bg.rectangle.Y = th12;
            }
            if (e.KeyCode == Keys.A)
            {
                navArrow.GetKey("a");
                if (bg.rectangle.X < 0) bg.rectangle.X += bg.amount;
                else bg.rectangle.X = 0;
            }
            if (e.KeyCode == Keys.D)
            {
                navArrow.GetKey("d");
                th12 = -bg.imgx + this.Width;
                if (bg.rectangle.X > th12) bg.rectangle.X -= bg.amount;
                else bg.rectangle.X = th12;
            }
            this.Refresh();//forPaintEvent
        }
        void Background_KeyUp(object sender, KeyEventArgs e)
        {
            navArrow.GetKey("none");
            this.Refresh();
        }
        private void Background_SizeChanged(object sender, EventArgs e)
        {
            navArrowUpdatePosition(); 
            this.Refresh();
        }

    }
}

_Q12_ · Answer 2 · 2017-03-13T20:35:00

(sorry for making multiple solutions, but is for the sake of a clear visualization and understanding.)
I simplified my problem further...
And I have 1 NavigationArrows reference in each Event!
If I can filter MORE...
I imagine that it should be something like this:
Inside NavigationArrows class, to be able to implement each event like it is here in the Background UserControl. To have a paralel implementation of an event in 2 places, but in fact to be the same event.
It is possible such maneuver ?

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using game_GameMap_v2.UI;

namespace game_GameMap_v2
{

    public partial class Background : UserControl
    {
        public static int Width_ = 0, Height_ = 0;
        public Background()
        {
            InitializeComponent();
            DoubleBuffered = true;
            this.KeyDown += new KeyEventHandler(Background_KeyDown);
            this.KeyUp += new KeyEventHandler(Background_KeyUp);
            this.Paint += new PaintEventHandler(Background_Paint);

            Map.Initialize();
            NavigationArrows.Initialize();
        }

    
        void Background_Paint(object sender, PaintEventArgs e)
        {
            e.Graphics.DrawImage(Map.Img1, Map.rectangle);//BackgroundImage

            e.Graphics.DrawImage(NavigationArrows.Active(), NavigationArrows.Rectangle_);//NavigationArrows
        }



        void Background_KeyDown(object sender, KeyEventArgs e)
        {
            Map.GetKey(e.KeyCode.ToString());
            NavigationArrows.GetKey(e.KeyCode.ToString());
            this.Refresh();
        }
        void Background_KeyUp(object sender, KeyEventArgs e)
        {
            Map.GetKey("none");
            NavigationArrows.GetKey("none");
            this.Refresh();
        }
        private void Background_SizeChanged(object sender, EventArgs e)
        {
            Width_ = this.Width; Height_ = this.Height;//update this first
            NavigationArrows.UpdatePosition();
            this.Refresh();
        }

    }
}

Navigation arrows ?

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Navigation arrows ?

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us