Image reference on button

Webix JS
1

Hi, i have a question about how to referente a image or icon when i use a button view.
I have a app_resources folder thar contains all my icons clasffied by device type (android, iPhone) and density (mdpi, hdpi, and so on).
I have to reference an icon depending on the device screen density and i do not know how?

Can you help me please? Which is the best practice for this case of use?

Thanks un advance!

Regards

2

And i have the same question for img tag. How can i select the correct img depending on the screen dpi?

Thanks and regars!

3

You can use css media queris

Basically you can add a custom css to the any view, and define css that will set a necessary background image for the view, based on the device size or pixel density.

4

hi, thanks forr your response.

I tried it but it does not take the background image. However it takes the background color for example, depending on device dpi…

I have this css:
@media
(-webkit-min-device-pixel-ratio: 1),
(min-resolution: 100dpi) {
/* Retina-specific stuff here */

.icono_vozciudadana
{
    background-image: url('resources/Android/drawable-ldpi/logovoz_32x32.png');
    background-repeat: no-repeat;   
}

}

@media
(-webkit-min-device-pixel-ratio: 1),
(min-resolution: 150dpi) {
/* Retina-specific stuff here */

.icono_vozciudadana
{
    
    background-image: url('resources/Android/drawable-mdpi/logovoz_32x32.png');
    background-repeat: no-repeat;   
}

}

@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 240dpi) {
/* Retina-specific stuff here */

.icono_vozciudadana
{
    background-color:Black;
    background-image: url('resources/Android/drawable-hdpi/logovoz_32x32.png');
    background-repeat: no-repeat;   
}

}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 320dpi) {
/* Retina-specific stuff here */

.icono_vozciudadana
{
    background-image: url("resources/Android/Drawable-xhdpi/logovoz_32x32.png");
    background-repeat: no-repeat;   
}

}

@media
(-webkit-min-device-pixel-ratio: 3),
(min-resolution: 490dpi) {
/* Retina-specific stuff here */

.icono_vozciudadana
{
    background-image: url("resources/Android/Drawable-xxhdpi/logovoz_32x32.png");
    background-repeat: no-repeat;   
}

}

@media
(-webkit-min-device-pixel-ratio: 4),
(min-resolution: 640dpi) {
/* Retina-specific stuff here */

.icono_vozciudadana
{
    background-image: url("resources/Android/Drawable-xxxhdpi/logovoz_32x32.png");
    background-repeat: no-repeat;   
}

}

and i have this button, for example:

{ view: “button”, type: “image”, id: “ibm”, image: “icon_blanco_24x24.png”, css: “icono_vozciudadana”, },

i do not know what to set on image attribute.

An you share to me a sample please?

Thanks in advance!

Regards!

5

Anything new about this? Thanks

Regards

6

i found my bug and the images must be inside css folder.

On the other hand, i am trying to change image url and background color on the fly. Imagine a tab that is changing its icon and background color when you select one. Just showing if it is selected or not.

i use define method from button view. See this snippet please

http://webix.com/snippet/7c5011bb

you can see that first time you click on a button, the background color changes but second time not.

What am i doing wrong?

Thanks and regards!

7

anything new about this? i need it.

Thanks and regards!