I want to use a rectangle as a bargraph to show values. How can I change the width of an rectangle?
I tried it using a property trigger but without any success.
Maybe someone can support me…
My guess is that you would like to have the Width change when a device attribute changes. In that case, you should be using a DataTrigger. Property Triggers fire when a property on the control itself changes. I doubt that is what you are wanting.
This sounded interesting so I played with it a little bit. It is just a simple example but you could modify it for what you need to display.
Both of these work fine in Home Remote Designer but neither one displays or acts correctly when published. I tried to find out why but I didn’t figure it out.
Try these in designer and let me know if they worked for you.
Jerry
Bargraphs for Android.hrp (196.1 KB)
Bargraphs for Windows.hrp (196.1 KB)
Hi Jerry,
thank you for sharing your files. I tried them out on several devices.
It works well in the Designer, but does not work on my IPad. It seems to work on my Samsung Galaxy Tab A and on my mobile phone (samsung S10), but only in portrait mode.
When I flip the devices to landscape orientation, the moving of the rects stops…
Maybe this post can be of help to you?
https://community.thehomeremote.com/t/open-weather-map/437/17?u=rh_dreambox
I really like this idea but, its certainly not going to be easy especially to work in both screen orientations. I’ve messed around a lot with animating graphics and always found myself creating massive amounts of DataTriggers or EventTriggers to do so.
You may be better off setting your bar graph Grid to a fixed size and manipulate the inside with Margin. You’ll have to experiment with that. The reason you are having issues with the different orientions is because your bar graph grid was position by margins.
Had a min to make an example… See attached. its far from perfect and I have no time to troubleshoot.
JD_Bargraphs for Android.hrp (196.2 KB)
Maybe for now you can dumb it down into 10 steps like the example. At least for testing.
I did it by modifying margin (and color) like I mentioned
In a DataTrigger, to use a range in the Value, you have to use a regex value. Heres some info on that…
I can play with this more next week when the in-laws leave haha! Hope that helps
@Jdamore:
your bar graph example looks really nice. I like that color change based on the input value.
But is there any way to set the margin continiously without using regex? Is there any way to do this with a script, a variable or somethin simular?
And can I do some kind of calcultaion based on attributes e.g. setting the margin not absolute but relatitiv to its width?
@JerryH
I had a deeper look on your file running on my Ipad. If I change the value with the slider nothing happenend. But when I do now a page flip or switching to another page and then back, the rect is being updated.
So it seems that after setting the width of the rect a refresh is missing and there is no graphical change. May be this is an issue on IOs?
I don’t know why it would act like that. Maybe because I originally set the platform for Android? I did set some rectangles up without being inside a grid and with no outline. I set one up to change the width for a horz bar graph and one changing the height for a vert bar graph. Seemed to work ok here, at least for a windows platform. I haven’t tried it on an Android device yet. Of course this did not change the color of the rectangle like Jdamore’s example did.
I played with changing the margin instead of the width or height property but I’m not sure what the advantage would be.
Jerry
I played with this some more and made some progress. First I found out that I need to set the Width and Height properties to match my Android phone. When it’s not sized to match when I load it to my phone I had all kinds of strange item sizes and layouts. Unless I’m missing something the layout doesn’t scale to match different phone screen sizes.
I also added a plugin to handle my variables that are used for the bar graphs. Just playing, some bar graphs started at the bottom and went up or started on the left side and went right. I used Var1 which went from 0 to 300 for these.
Some bar graphs started at the top and came down or started on the right side and went left. Earlier I just rotated the Slider to give me values from 300 to 0. This time I only used one slider, it went from 0 to 300, and used the plugin to generate a Var2 value which goes from 300 to 0 as Var1 goes 0 to 300.
I made all the bar graphs 300 long so I could use the values from the slider directly. If bar graphs of different sizes are used then scaling could be done in the plugin. An input value and a scaled output value for each bar graph could be implemented.
Also the plugin could control the bar graph color so it changes as the value to the bar graph changes.
Jerry
Bargraphs for Android 360 Width x 640 Height Screen Size.hrp (196.8 KB)