How is everyone sizing Interface Viewer WebRIVA templates?
Sizing IV's for use with the native IV is not an issue. I am finally starting my IV designs for both my iPhone and my house IV (viewed on a Windows Surface Pro running a CQC client).
Which resolution do I use when sizing IV's that will be viewed in WebRiva?
If it's just a size issue and not an aspect ratio issue, you can set a scaling factor on the URL when you load it. That will scale the contents for you on the fly. If it's an aspect ratio issue, if they aren't the same shape, you'll have to compromise a little bit on one and have a bit of unused space, creating them in a shape that works reasonably well for both and scaling that to fit on the web clients.
Generally speaking phones have too high a pixel density (due to the small screens and high resolution) to really take things literally and pixel for pixel display them, if you designed them on a screen of the same resolution but much larger size. The bits will be too small. So generally assume you'll draw it for the Surface (both larger and probably slight lower resolution but maybe not), and just scale that to fit the phone.
I initially was headed in to a direction of building separate IV's for WebRiva for my phone (Samsung), but for me, just didn't use the app enough (maybe a couple of times a week) that I just decided to have one interface that will work for both.
My templates are 1280 x 768, and I have a Samsung S8, which provide 2,960 x 1,440 resolution. If I put in vpscale=.44, it will adjust the 1280 x 768 templates perfectly on the S8 at that resolution using Chrome to fit exactly on the screen from top to bottom with black edges on the sides. Took some trial and error, but happy with it now.
Great idea I will try that
So here is where I am getting confused. My iPhone 6s has a display with 1334x750 pixel resolution. Does this mean this is the size I should created the templates for use on my iPhone?
I tried creating a test template at the above resolution and it displays ok (does not fill browser window) when accessing WebRIVA directly. When I try to access the same template with CTC CQC, it is huge and CTC CQC seems to show it at full resolution. In order to display properly in CTC CQC, I had to shrink the template down to 568x322 at which point it looks good in CTC CQC. However, when you access this template from WebRIVA directly, it's tiny obviously because the browser resolution is higher.
The other thing I noticed on the CQC generated templates is that it is pretty complicated upon first look:
Main
Overlay_Main
Overlay_Main_Left
And associated overlays for HVAC, etc.
Main loads Overlay_Main which itself opens Overlay_Main_Left
Is all of this complexity necessary or is this simply how it's done when doing UX/UI design and coding for these things?
For a simple iPhone set of templates looks like I can just create a few pages without the need for overlays (headers, footers), etc. or things that involved swiping/flicking. I could just use basic navigation and static headers/footer that I can copy/paste to each page.
You need to adjust the viewport scaling. That's one of the options on the WebRIVA stuff. The browsers by default tend to do 2x or thereabouts scaling because the pixel density is so high (which makes things come out too small in many cases if you literally display stuff pixel by pixel. Set the viewport scaling option to 1.0 and see what happens, then adjust from there. I'm not sure what he's defaulting the scaling to.
You can do static pages that just swap out in toto. But you quickly tend to find that when it comes time to make changes that it's hard to keep them in sync. Having at least just a main overlay with a fixed main template is simple enough and can save you a lot of work over time.