I talked to a friend of mine and he told me that it's possible to create an image in an image editor (gimp/photoshop) and then use it as a button . He said that's the way applications that have great GUIs do it.
He also said that there is a file describing which parts of the image make up the button.
Is this possible , or is he "crazy"? :)
This needs to be clarified with a language of choice, etc. In general, most languages (WinForms, Java AWT/SWT, etc) have an image or background image property that allows you to use images for buttons. There are even skinning frameworks that will let you use images for all controls in an easy-to-define manner.
If you are talking about HTML, there is a button input type that can allow an image to be used as a button for a form.
#Vhaerun
CodeProject is a good place to find lots of skinning libraries. I used this one a long time ago. Winamp is a great example of a skinned application, where users can actually create their own templates to completely change the look of the application without changing code whatsoever. Actually, most media players have some sort of skinning available.
You can do anything, especially since you have no constraints re language, environment, etc.
No he is not crazy, you can use images on almost all GUI tools instead of buttons, they are generally an image on the button, or in some cases you can put the image on the screen and have an onclick event assigned to it.
You haven't been very specific with your question so nobody is able to give you a definitive answer, but here's an attempt to do so without demeaning you:
It's quite common for graphics designers (using tools like photoshop, gimp, etc.) to participate alongside developers for both desktop and web based applications. Web based applications can easily capture information about when an image is clicked and frequently people will either design the button with the text in the image file itself, or use background pictures/borders with plain text on top. There is not standard, per se, on how this is accomplished on the web, but plenty of sites serve as an example (try using Firebug with FireFox to inspect other sites and see how they do things).
If the circumstance at hand is desktop oriented then the answer becomes much more complicated. Skinning is accomplished in many way and, depending on platforms and libraries being used, implementation specifics vary greatly. In it's most simple terms, most GUI frameworks (like GTK, QT, Windows Forms, Windows Presentation Foundation) include a basic picture control, and this control can usually process a "Click" event, which would allow it to function as a button, but if you want different states (pressed, disabled, etc.) you will have to invest more effort in such a thing; you also won't find this method suitable for replacing the rendering of all buttons in an application, but rather something you would do manually for each one, or write your own custom button control that uses your assets specifically.
In terms of a file describing different images that combine as described in the file to override the rendering of the button this would lead me to believe you are either working with an already existent application that is skinable (like Firefox or Winamp) or that he is speaking of some specific UI toolkit. I'm not aware of this functionality being generally available in most of the common system-level UI toolkits.
In the future you may wish to be more specific with your questions.
In HTML, you could do:
<input type="button" src="/path/to/image.png" />
Alternately, assigning an onclick event to an image causes that image to work similarly to a button:
<img src="/path/to/image.png" onclick="function(){doSomething();}" />
If you're talking HTML you can use <input type="image" src="myfile.png" />
Specifications here
Imagemaps I guess.
No seperate file describes the map, it is all part of the html document.
http://www.w3schools.com/TAGS/tag_map.asp
Related
I am just trying to streamline my MVC3 development approach. I use Razor in the View and was wondering what the recommendation is for easily creating more fancy UI widgets such as Menus. I would hope I could leverage some good open source components and plug them in. I do subscribe to a good 3rd party component library, but wonder whether this type of feature is best implemented via JQuery UI or old style HTML/CSS?
Many thanks.
In general, Stack Overflow isn't here to recommend tools for you. However, I will say that whether to choose a javascript tool or straight html/css depends on the needs.
It's best to work with the simplest solution that solves your problem. CSS can do menus quite well, and straight CSS menus are often the best choice. However, if you need things straight css can't do, then you need to add javascript. For instance, one problem with CSS menus is that it's very easy to "roll off" the menu and have it disappear from under your pointer. Most javascript menus add a delay that allows you to roll off for a second and get back before the menu disappears. This improves usability.
Even lots of fancy effects can be done strictly in CSS, but as with many such things.. it won't be compatible across all browsers, which is again where javascript comes into play. Sometimes the only way to be compatible across the board is with js (at least without losing functionality).
I wouldn't recreate the wheel on this one, since so many web sites already do this. If you are trying to streamline your development, I'd say use your 3rd party library or find a good jQuery plugin. You could probably easily create your own in HTML/CSS/Jquery, but it will add on to your testing later. An existing 3rd party/jQuery type of component would take significantly less time and have a lot of features you want already built in.
I'd recommend using MVC SiteMap Provider in conjecuyion with a JavaScript menu of choice e.g. SuperFish http://users.tpg.com.au/j_birch/plugins/superfish/. The menu fancy JS part part is the least important.
From the MVC point of view what I think really matters is how you manage and maintain your menu. MVC SiteMap Provider makes it really easy to build an maintain menus (can even use Attributes to make Actions appear on the menu). It can also do things like Security Trimming so if a user doesn't have permission to get to the action etc it isn't displayed on the menu.
I'd check that out.
I want to build an OS X application, in which one of the requirements is for the user to be able to generate PDF output according to a layout that they, the user, will create. Typical items on the page would be things like a corporate logo (a JPEG or PNG), an address (a block of text) and a narrative (another block of text).
I'd like the user to be able to move and resize the items using the mouse to drag handles around on-screen.
Is there an Interface Builder object that will let me do that, or some third-party library that exists for this purpose?
Try GCDrawKit if you're looking for a drop-in solution. It's still in beta (and has been for ages) but you might find it useful.
You seem to be looking for an all-encompassing, self-contained "Pages" control or some sort of reporting suite. That's asking a bit much.
There is nothing in the Cocoa frameworks that gives you this. Unfortunately, there's no Cocoa equivalent of Crystal Reports either. You'll have to roll your own.
I suggest using standard CSS / HTML templates with WebKit. The only drawback is WebKit doesn't yet support CSS pagination, so there's no concept of "8.5"x11" page 1...15" but it's the closest you'll come without writing your own Pages application (NOT an easy project by any stretch of the imagination).
I start with describing the problem itself. Rather than a problem I'm looking for a better solution. I have a asp.net page which has a bunch of images and a link underneath it, Each image is infact the latest rendering of the link underneath it.
I scheduled a bat script which runs every hour to fetch the images through IECapt a web page rendering capture utility. One thing am annoyed about this utility is it takes a lot of time for the 20 images I have and for few because of the flash content it misses to take the actual screenshot of the website.
Now I like to know can this rendering be done by traditional programming am not interested in using any utilities. I'm interested in trying this. The solution need not be necessarily a C# based am ready to try in any other language. Because it gives me a chance to learn.
Thank you.
You should probably look at moz-headless-screenshot
You should be able to embed the functionality you need.
http://blog.mozilla.com/ted/2010/07/29/moz-headless-screenshot/
he also provided a sample embedding client application called moz-headless-screenshot.
This is a simple command line tool that takes a URL, image size, and output filename
and generates a PNG screenshot of the webpage.
You should look into browser shots:
http://browsershots.org/
They do what you want to do for lots of different browsers. It is even open source.
There's no simple-simple solution for what you're asking to do. This is because rendering HTML, CSS, and Flash is actually a very sophisticated process.
If you're up for quite a bit of coding, you can use the Gecko engine (which powers firefox) or another open-source web-browser core (ie Dillo) to render the page onto a custom canvas. Then save that canvas to a file. Unless you implement support for browser plug-ins, you won't get Flash this way, though. You could try using Gnash or its like. Good luck with that.
I don't know of an open-source project that already does this. It would be neat, though :-). If you write something, please push it to the world; it would be really cool to have a "get a screencap of this URL" tool.
One way is to use IRobotSoft web scraper. You can design a robot to go to the URL every hour, and capture the whole web page as an image via a function CapturePage(imagefile).
I am not sure if it will be better than IECapt though.
We have used ACA WebThumb ActiveX Control (http://www.acasystems.com/en/web-thumb-activex/) quite successfully to capture parts or whole of a web page in the web server and then to write them to a file, just passing in the url. It performs fast enough for our need.
I am not familiar with IECapt, but this might be something you might want to have a look at.
I was looking at the Firefox Add-ons Manager UI (pictured below) and really liked the expandable list used to show settings or properties for each add-on.
Firefox Add-ons Manager http://uploads.tech-buzz.net/Firefox3Beta3ComingonMonday_859/get_addons.png
I liked it enough to want to include something similar in one of my applications. The problem is, I don't know, exactly what the control is called (it doesn't seem to be "expandable list"), nor do I know if there is an implementation available for use in my own application (so I wouldn't have to reinvent the wheel.)
This isn't the first time that I've seen some cool piece of UI and wanted to incorporate it into something I'm working on, but have had no idea if I would have to design it from scratch. So I generally end up reworking my UI to use standard UI widgets to save time.
This got me thinking, is there some place that has a catalog of a bunch of UI widgets with names and what platforms/languages they are implemented for/in?
UPDATE
Turns out this control is called a Rich List Box, and it seems to only be implemented in XUL.
To answer your question, no, there isn't a universal catalog anywhere, though MSDN is as good a place as any to find definitions of most common UI elements.
The specific widget you ask about is generally called an accordian (wikipedia)
Can anyone point me in the direction of such a script? It should also be able to work when called into another ajax window. This is the type of gallery i am going for:
http://dageniusmarketer.com/DigitalWonderland/pages/DemoGalleryExample.html
It should go on this page:
dageniusmarketer.com/DigitalWonderland/
Portfolio section.
This script should be real simple to use with minimal extra files to make it work. I also should be able to just drop images in a gallery folder and it populates the gallery automatically with thumbnails....I shouldnt have to write code for each image in my html. Should be all dynamic.
I also would like to know how I could go about a window effect where every time I open up a new section via my navigation, the window shrinks closed with the old content, then expands open with the new content. the window effect should be vertical (top to bottom shrink into center, expand from center top to bottom)
Please Let me know. Thanks
JQuery is one of my personal favorite javascript libraries (along with 99% of this site apparently!)
But it will have a learning curve, as your requirements seem pretty specific, and you will have to read some documentation to pull it off.
Try Spry from Adobe. They have a very similar demo. Also, the other common frameworks for this would be prototype/scriptaculous, dojo, mootools, jquery. In many cases they have extensions that would provide the exact thing you are looking for. For example, try
shadowbox extension which is framework agnostic. Best of luck!
Imago looks promising:
http://imago.codeboje.de/
Just discovered the very awesome-looking jQuery Tools library today. Meets your "simple and minimal" requirements and could probably pull off what you've sketched, with just the "tooltips" and "scrollable" components.
I also should be able to just drop images in a gallery folder and it populates the gallery automatically with thumbnails
My instinct is that you'd be better off writing server-side code to handle this part of your requirement.