Skip to main content
1-Visitor
September 19, 2019
Solved

to display two images

  • September 19, 2019
  • 1 reply
  • 2364 views

I have two buttons one is on and other is off. I have two images bulb on and bulb off. If on is clicked bulb on image should be displayed and if off button is clicked bulb off image should be displayed i.e the image should be replaced with first image. I want to do this only with buttons. Is there any way to do it?

Best answer by RolandRaytchev

Hi @dheerajkumar,

 

here is a simple example , which may be, could be helpful. It show only one possible solution (not the best- most efficient solution  but it works)

Following steps:

1.) create a thing /general thing with one boolen property e.g. IMAGE_ON:

 

2019-09-20_14-09-55.gif

2.) defined 3 services 

set_on                        - set the value of the property IMAGE_ON to true

set_off                        - set the value of the property IMAGE_ON to false

get_image_status  -returns the property value of  IMAGE_ON

 

2019-09-20_15-29-52.gif

 

3.) create a mashupe with 2 button for set_on and set_off and a  image

4.) bind the all data result of the service get_image_status to the visible property of image (here I used not the directl way where I set the state of a checkbox and later the checkbox has the binding to the visible property of the image)

5.) bind the buttons image_on/image_off  clicked event to the services set_on/set_off

6.) bind services set_on/set_off  ServiceInvokeCompleted  event to call the get_image_status. service.

Here we can see the steps in the picture below:

 2019-09-20_15-35-52.gif

 

7.)I  tested it in mashup preview mode:

 

2019-09-20_15-43-47.gif

 

1 reply

22-Sapphire I
September 19, 2019

You can bind custom css to your buttons based on a service.

So on a button click, you can fire a service that evaluates the current state of the button and based on that supplies the correct css

1-Visitor
September 19, 2019

I have one image widget and two buttons(on and off), when on is clicked respective on image should be displayed and when off is clicked respective off image should be displayed in the same image widget.

I dont want to use two image widgets. How to write service where I can identify which button i clicked.

22-Sapphire I
September 19, 2019

Image widget has bindable image URL so you just need to know what image is showing and what button is pushed and have your service evaluate that to then send the proper image url to the Image widget.