Smartvisu 2.9 - Few problems

[tfinell]

I've used the graphical user interface in the 2.8 version. Now I have started to move to version 2.9.
The first problem is that using "ovdevice.dimmer" widget. When pushing a light icon in the dimmer lights goes on and goes back off immediately and visa versa.


ovdevice.dimmer.png

The second problem is that changing the size of the browser window the devices are not following the graphics on the same position as they used to do in the version 2.8

Big browser window:

Window size 1.png

Smaller browser window:

Window size 2.png

Does someone have any idea?

[wvhn]

The dimmer has two items:
- item_switch for switching the light on and off
- item_value for setting the dimming value of the light

Since both of the items use the standard widgets internally (basic.stateswitch for switch / basic.slider for value), I don't think there is a malfunction. Please make sure the two items are assigned correctly and be aware of the changed sequence in the macro call:

old sequence

{% macro dimmer (id, txt, left, top, gad_switch, gad_value, min, max, step, type, hide) %}

new sequence

{% macro dimmer(id, txt, item_switch, item_value, min, max, step, pic_on, pic_off, color_on, color_off, value_display, min_display, max_display, left, top, type, hide, picpos) %}

In addition, the id for the widget must be unique.

in v2.8 there was a Javascript function in each widget which centered each individual icon. I didn't manage to make this work in v2.9 with jQueryMobile based display functions up to now. So the positioning of the icon is now by top left corner. If you reduce the screen size and leave the icon size unchanged the icon centers can not keep the intended position. Any proposal to make centering of the icons work again is appreciated.

Regards
Wolfram

[wvhn]

Upto now I had only been able to test the graphics design with offline data where everything worked fine. First tests with an apache2 webserver on my PC with shNG as Backend on the Raspberry show that the stateswitch and also the slider seem to fire twice on a click event when used in a popup. They behave normal if they are integrated in the main page.
I have to investigate more on this behavior.
Sorry

Wolfram

[wvhn]

OK, could you try the ovbasic.html in the attachment?
I had to remove the dynamic icon inside the stateswich. Now it works in my tests. .

Regards
Wolfram

[tfinell]

Thank you for testing. New ovdevice.dimmer works fine.

I hope somebody could help with the centering problem of the icon when changing the size of the screen.

BR,

Tomas

[wvhn]

I think I have found a solution for the centering issue, last night. I’m going to send you some files to test later during the day.

[Onkelandy]

When using dynamic icons make sure the second parameter stays empty.

[wvhn]

Yes, that's right. But in this case the dyn. icon has been part of the widget distributed with the package.

Now, I would be grateful if you could test the changed widgets and base.css in the attachment. Folder structure inside the zip file is according to smartvisu/pages.
I have added the css class "absolutepos" which should center all buttons and icons (just in case you need to tweak anything).
A short test has been conducted with all button styles (icon, micro, mini, midi).

Thanks and best regards
Wolfram

[tfinell]

I was elsewhere over the weekend. Now I had time to try the changes. When I minimize the window, the icons continue to move down. Attached images show where the icons are on the computer screen and another image on the mobile phone screen.

I have made a page in a slightly different way. I've changed ov.backroud widget's height and width values of 155% because I do not use the widgets next to the image.

I have also tried example.graphics3 the background image, and the height and width values of 100%, the icons are still moving up and down direction.

I also tried the standard values of example.graphics3. The icons also slip a little, but not so much.

Computer:

Computer.png

Minimized computer screen:

Computer minimized.png

Mobilephone:

mobile.png

Thank you,
BR,

Tomas

PS. Should I send you my pages?

[wvhn]

Hi Tomas,
when I try resizing example3.graphic on my screen and also on my smartphone I don't see icons moving any more. The window icons are a good reference to check that.

Screenshot_EG_big.png
reduced browser window:
Screenshot_EG_small.png (Both images are shrunk by 50% from their original size)

Of course, the icon sizes grow big compared to the background image because they are oriented to the screen resolution. The same appears on the smartphone dispay, but there we could save some space by reducing the size of header and footer menus. That can be done in the visu.css:

Screenshot_EG_iPhone.png

If you have put the files into the right folders: base.css in pages/base and the widgets in pages/example3/widgets and also in pages/<YOUR PAGES>/widgets (!), the reason for the moving icons must be in your described page layout. You can send me a link to your pages via PN.

Best regards
Wolfram

[wvhn]

For documentation:
in the graphics design, all elements have to be placed by absolute coordinates within the limits of the background image (floor plan). If html elements or widgets with no absolute positioning are used they will be placed below the background image. Reducing the screen size will shrink the background image but in relation to it the elements below will consume a bigger portion of the screen than before. This directly affects the positioning of the visu elements on the background image.

The issue has been solved by removing an extra element not positioned with absolute coordinates on the image.

[tfinell]

I want to come back to this subject. Graphic design still doesn't work in the same way on desktop and mobile browsers. Icons are horizontally different level on both browsers. You can even simulate it in the Chrome browser. How to fix this problem?


Desktop:
desktop.png


Mobile:
mobile.png


If you look closely at the horizontal position of the icons, you will see the difference.

I have the same difference in my own design. See the following pictures.

Desktop:
Desktop_own_design.png


Mobile:
Mobile_own_design.png


Br,

Tomas

[wvhn]

I had been implementing some fixes for the icons positioning after our discussion. Current released version on github is v2.9.2. Which one are you using?

Regards
Wolfram

[tfinell]

I checked the version. I had v.2.9.1. I upgraded to version v.2.9.2 and still, icons are horizontally in different places in desktop and mobile browsers. Icons are situated lower in the mobile browser.

BR,

Tomas