Jump to content

User interface with background image as buttons


Recommended Posts

Hello,

First of all sorry for the bad tittle; i can't explain what i am trying to achieve in a few words.
So let me explain here;

 

This image is the planogram of the enterprise i am working with atm.
2rp5ok9.png

I put some labels so it is more clear and you have an idea how the shop looks like.
So what i want to do; my GUI will be this image, no border (plus some small buttons but this is not a problem). I want to make all those squares(fridges, tills, stairs etc...) act like buttons and lists. All our products will be registers according to the place they are(fridges, shelves, tills etc...). I will put a small input box from where will will be inserting the codes bar numbers of the products and then the programm will have to tell us where the product is. The way for the program to do this will be to highlight the fridge or the place where our product is.
My idea was to create a blank UI and then add buttons that will represent the fridges etc...


However i have studied Arts and Design so i am sure that i can make a better design with my Tools. So i would prefere to create the design of the enterprise, save it as a picture and use it as a background on my GUI. But then what would be the best solution to make it act the way i want to?

I am just here for ideas, so bring it on people!

P.S. I know it is not very clear what i am trying to achieve but if you have any question, please do ask me.

Thank you in advance

Edited by AutID
Link to comment
Share on other sites

Use the image as you have mentioned and overlay  the individual shop components as as buttons, meaning copy and past them.

So you cut image of till, and use that as a control exactly where till is.

AutoIt Absolute Beginners    Require a serial    Pause Script    Video Tutorials by Morthawt   ipify 

Monkey's are, like, natures humans.

Link to comment
Share on other sites

If you put pictures as items in your GUI you can click on them just like buttons.

If I posted any code, assume that code was written using the latest release version unless stated otherwise. Also, if it doesn't work on XP I can't help with that because I don't have access to XP, and I'm not going to.
Give a programmer the correct code and he can do his work for a day. Teach a programmer to debug and he can do his work for a lifetime - by Chirag Gude
How to ask questions the smart way!

I hereby grant any person the right to use any code I post, that I am the original author of, on the autoitscript.com forums, unless I've specifically stated otherwise in the code or the thread post. If you do use my code all I ask, as a courtesy, is to make note of where you got it from.

Back up and restore Windows user files _Array.au3 - Modified array functions that include support for 2D arrays.  -  ColorChooser - An add-on for SciTE that pops up a color dialog so you can select and paste a color code into a script.  -  Customizable Splashscreen GUI w/Progress Bar - Create a custom "splash screen" GUI with a progress bar and custom label.  -  _FileGetProperty - Retrieve the properties of a file  -  SciTE Toolbar - A toolbar demo for use with the SciTE editor  -  GUIRegisterMsg demo - Demo script to show how to use the Windows messages to interact with controls and your GUI.  -   Latin Square password generator

Link to comment
Share on other sites

Use the image as you have mentioned and overlay  the individual shop components as as buttons, meaning copy and past them.

So you cut image of till, and use that as a control exactly where till is.

That's a good idea.

If you put pictures as items in your GUI you can click on them just like buttons.

hmm the background isn't so complicated so if it is to create individual images of everything then adding buttons instead of the images would be easier.
What John suggested is similar but saves some time for the standard things that don't actually need a control.

Thank you both, i am open for more ideas.

Link to comment
Share on other sites

The best thing to do is, in my opinion, to have a standard background image and monitor the clicks. That way one image could act as multiple buttons and everything but what conserns me is the memory that it will take. It will be a lot more heavy won't it?
Is it Worth?
Plus then i will have to paint each section to highlight it everytime...

Link to comment
Share on other sites

  • Moderators

AutID,

This UDF from Malkey allows you to determine if a click was within a defined area onscreen - I have used it on large images to define clickable areas with great success.

M23

Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see my UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Link to comment
Share on other sites

AutID,

This UDF from Malkey allows you to determine if a click was within a defined area onscreen - I have used it on large images to define clickable areas with great success.

M23

Thank you. I like Milkey and he has helped me in personal some time ago. I will definitely have a look at it.

Not really, if you just have one image then determine where the cursor was when clicked, I don't see how that would use more memory.

That wouldn't. But then i would need arrays with areas to determine which area was clicked. And each area has 4 points, x, y, z, p. So in each loop of the array i will have to check all points which will take time and memory each time a click is pressed on the GUI.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...