Need some guidelines to make a good looking hmi design

[Jerin]

Hi all,

I am using v570 plc, and want to enhance the hmi design, I have tried using the pictures in visilogic image library and it is somewhat pixlating(edges of a curve not smooth). As well the letters are also not sharp. So I decided to design it in Adobe photoshop and download as an image. But that too not upto the standard.

Could you give any tips or tricks to do that so.

Thanks and Regards,

[R.Mozes]

Dear Jerin,

You can import you own images according the following formats:

BMP, JPG and EMF.

Also, you can easily create images by using "Adobe FreeHand/illustrator" graphics software.

For example you can import one of our images>Edit to the desire shape with the same dimensions>Export to EMF file.

You can always review the related information in VisiLogic help menu> Home > Getting Started > HMI Display Editor

Attached few example icons.

BR,

Reuven

[R.Mozes]

Dear Jerin,

You can import you own images according the following formats:

BMP, JPG and EMF.

Also, you can easily create images by using "Adobe FreeHand/illustrator" graphics software.

For example you can import one of our images>Edit to the desire shape with the same dimensions>Export to EMF file.

You can always review the related information in VisiLogic help menu> Home > Getting Started > HMI Display Editor

Attached few example icons.

BR,

Reuven

V350_V570 images.zip

[Jerin]

Thanks Reuvan,

In that u send me images with

Dear Jerin,

You can import you own images according the following formats:

BMP, JPG and EMF.

Also, you can easily create images by using "Adobe FreeHand/illustrator" graphics software.

For example you can import one of our images>Edit to the desire shape with the same dimensions>Export to EMF file.

You can always review the related information in VisiLogic help menu> Home > Getting Started > HMI Display Editor

Attached few example icons.

BR,

Reuven

Thanks Reuven,

For my account recovery . Then for the reply and the attached images .

But I think you are not answered my question may be my english is a bit low or may be i am not understanding.

See my attached image the circlic image's edges are not smooth. you also send me some squre type images only. for flat edges no problem. the problem is with curvy edges only. It may because both V570 and V350 has the same pixels 320 x 240. V570 just zoom-in the V350 HMI.

May I force V1040 OS into V570. What may be the effect.? does it cause any bad? .

Regards,

Jerin.S

[R.Mozes]

you welcome!

please send me your image which you wish to use on your PLC to support@unitronics.com

i'll advice with our graphice dep. and let you know the results.

[Jerin]

you welcome!

please send me your image which you wish to use on your PLC to support@unitronics.com

i'll advice with our graphice dep. and let you know the results.

Hi,

may i force v1040 os into v570?

[R.Mozes]

sorry but it's not possible to force v1040 os into v570.

[Simon]

The V570 has a 320x240 screen resolution and that is fixed by the manufacturing process of the screen. Even if you *could* force the V1040 OS into the V570, it would have no effect on the screen.

To get the best results, make sure you design your images allowing for the full 65k colour palette. By doing this you you can improve the appearance to some extent with shading. When you create shapes in your PC graphics program, make sure the Anti-alias property is turned on. This automatically softens the edges for you.

However at the end of the day, the 320x240 resolution will give you visible pixelation.

[Jerin]

However at the end of the day, the 320x240 resolution will give you visible pixelation.

thats true... better i would use only flat cornered shapes...

[Simon]

Looking at your images, the black outlines are the most obvious problem. You could reduce the contrast, by using a grey rather than black. Or change the style of the image so the black lines are not used at all. Also try to avoid features that are only 1 pixel wide, make them 2-3 pixels wide if possible.

[sbeekman]

Not sure if this is what you are looking for but here are some of the icons I've cleaned up and use on our 570's. I basically took them into photoshop and instead of having a cutout I used the background color to make a sort of square image. That way the icon will look sharp and you won't see any pixels in the background color. The only problem I've ran into is that you have to use whatever backgrounds visilogic has and match it to your icons so that they blend right.

[tmoulder]

1. Use an unobtrusive background, "cool" colors are best (as opposed to "warm" colors, not "out of fashion"). I prefer royal blue with some lighter blue swirls for visual interest. Avoid dark gray and black, it makes the screen look "dirty".

2. Kill the clutter. Regardless of screen size, avoid jamming everything on a single page. It makes your screen elements smaller, and makes it harder to find whatever the operator is looking for.

3. Using image buttons is a great concept, and works really well, but remember that if the operators can't figure out what the picture is, it just creates confusion.

4. For navigation, try putting it in a consistent location. I use a white bar at the bottom of the screen and black text "hyperlinks". The screen they are on is underlined. It makes it easier to get around, and easier to change and develop as needed.

5. Go for a larger screen. There is an elegance to programming on a V570, but I much prefer the V1210 for simple room to manuever and ease of viewing.

6. Group related screen items with frames. I use a blue depressed background frame, then a black frame within to provide visual contrast between the items within.

I've got several projects on my blog for download, with importable screens. Feel free to check them out.

Best of Luck,

TM

[tmoulder]

A couple more suggestions:

Read an online article about web page style design, lots of good tips there. And Tahoma font is your friend - studies show it's the most legible font on a screen, espescially at smaller sizes,

[Jerin]

A couple more suggestions:

Read an online article about web page style design, lots of good tips there. And Tahoma font is your friend - studies show it's the most legible font on a screen, espescially at smaller sizes,

I am using segoe UI for small fonts. from now "Tahoma is the new segoe UI"

Thanks,

jerin.

[Jerin]

Not sure if this is what you are looking for but here are some of the icons I've cleaned up and use on our 570's. I basically took them into photoshop and instead of having a cutout I used the background color to make a sort of square image. That way the icon will look sharp and you won't see any pixels in the background color. The only problem I've ran into is that you have to use whatever backgrounds visilogic has and match it to your icons so that they blend right.

Thanks Mr. Beekman,

But thats also not working for e. so better i prefer square type images for v570.

jerin

[HigHTech]

I think I design good HMI´s. Of course if you want great resolution then you need to use a V1040. In the V570 and V350 you need to do hard work to build good HMIs (if you want a real view type). I learned that the best way to get good images is building them as big as possible 800x600 or bigger. Making them smaller keeps a good looking, increasing the size often generates bad results. If you like my designs you can contact me.