Board index FlightGear Support Interfacing

WebPanel Instrument Sizing

Connecting two computers, using generic protocol, connecting with Matlab?

WebPanel Instrument Sizing

Postby dhudach » Sun Jun 23, 2019 4:31 pm

I am making some progress trying to create instruments for SenecaII webpanel. I am currently implementing the Manifold Pressure Gauge. I created the gauge and needles in the .svg file. It all looks good. In the webpanel directory, I added the instrument to Panel1.html, creating a new Position8 style setting to position it on the page:

Code: Select all
<div id="Position8" class="small instrument" data-fgpanel-instrument="MP-Gauge.json"></div>


I created the MP-Gauge.json file which essentially replicates much of RPM.json except for the property tags which are defined in my MP svg file. I even added the FG runtime properties for the gauge in Panel1-properties.json.

Code: Select all
{
    "src":    "MP-Gauge.svg",

    "animations": [
      {
        "element": "#Left",
        "type":    "transform",
        "transforms": [{
          "type": "rotate",
          "a": {
            "property": "MPLeft",
            "scale": 0.082,
            "offset": -364
          },
          "x": 106,
          "y": 106
        }]
      },{
        "element": "#Right",
        "type":    "transform",
        "transforms": [{
          "type": "rotate",
          "a": {
            "property": "MPRight",
            "scale": 0.082,
            "offset": -364
          },
          "x": 106,
          "y": 106
        }]
      }
    ]
}


And when I run FG and navigate the browser to the url, I can actually see the MP Gauge. I tweaked MP-Gauge.json to get the needles into position. However ..... no matter what I do, I cannot resize the instrument smaller to fit into the space, it's always much larger than it should be. I compared the size of my gauge with the RPM gauge and they are the same in inkscape and document properties look about the same from what I can tell. I even swapped MP with RPM positions and the RPM gauge lines up nicely in the new spot, the MP gauge is still too large. I cannot find a property or setting in the webpanel directory that will let me adjust the size of the instrument. If the dimensions of my new gauge were much larger than the RPM gauge, I could understand that I'm trying to implement a large gauge. But they are the same size.

Any ideas or suggestions are greatly appreciated.
dhudach
 
Posts: 75
Joined: Mon Apr 13, 2015 11:46 pm

Re: WebPanel Instrument Sizing

Postby dhudach » Mon Jun 24, 2019 12:26 pm

I have made a lot of progress understanding the process of developing instruments for webpanel. Though I've referenced this document a few times, repeated review definitely helps: http://wiki.flightgear.org/Howto:Create ... instrument ... it's not lengthy but the basic steps are clear.

As far as sizing the instruments for the web screen, the issue and solution were in the .svg file itself, specifically these document settings:

Code: Select all
width="100%"
height="100%"
viewBox="0 0 512 512"


I compared the values for my custom manifold pressure gauge and when I set them to the above values, the instrument fit the area correctly on the screen.

Other than that, it seems like it's just a matter of creating the moving svg images in their own individual layers and making sure that the properties, property names and svg element IDs match correctly.

The only strange behavior is in an analogue clock I'm implementing. I'm about 90% certain that I have the hour/minute/second hand interpolation files correctly set up, the second had will work fine for a few seconds, then there will be random pauses and then it will jump to the correct value. I'm not seeing that in the other instruments where needle movement is very smooth. So I'm not sure what's happening there but I'll continue to investigate. For reference, here is the interpolation file for the second hand:

Code: Select all
<PropertyList>
   <entry><ind>   0</ind><dep>      0</dep></entry>
   <entry><ind>   5</ind><dep>     30</dep></entry>
   <entry><ind>  10</ind><dep>     60</dep></entry>
   <entry><ind>  15</ind><dep>     90</dep></entry>
   <entry><ind>  20</ind><dep>    120</dep></entry>
   <entry><ind>  25</ind><dep>    150</dep></entry>
   <entry><ind>  30</ind><dep>    180</dep></entry>
   <entry><ind>  35</ind><dep>    210</dep></entry>
   <entry><ind>  40</ind><dep>    240</dep></entry>
   <entry><ind>  45</ind><dep>    270</dep></entry>
   <entry><ind>  50</ind><dep>    300</dep></entry>
   <entry><ind>  55</ind><dep>    330</dep></entry>
</PropertyList>


I suppose it could be related to the update frequency which is set at 50 (seems to be the default), but the other instruments don't seem to have that same lag. I tried other values, lower and higher, but it didn't seem to make a difference. If I discover more I'll post.
dhudach
 
Posts: 75
Joined: Mon Apr 13, 2015 11:46 pm

Re: WebPanel Instrument Sizing

Postby dhudach » Tue Jun 25, 2019 6:08 pm

I am looking for some solid information on webpanel instruments and how to exactly determine the point of rotation for the instrument needles. The documentation is very helpful with 512x512 size images. But I'm working on the smaller engine gauges (temp, oil pressure, etc). It just seems completely hit or miss on how to find the point of rotation. I even tried fitting the instrument I created inside of a 512x512 rectangle such that the needle axis was at 256x256, replicating the pattern of the larger instruments. There seem to be numerous factors and parameters that determine instrument size, placement and needle axis. And what I would like are some clear guidelines that describe how to find the axis point for the json file given the size of the svg file and its document settings.

These are some of the settings that I think are involved. In the svg file (inkscape) these seem to determine much about the size and placement of the image on the screen:

Code: Select all
   width="100%"
   height="100%"
   viewBox="0 0 512 512"
   preserveAspectRatio="xMidYMid meet"


There may be others, but these seem to make the biggest impact. What should these values be and how do they correlate to these json settings:

Code: Select all
{
    "src":    "oil-press-gauge.svg",

    "animations": [
      {
        "element": "#Needle",
        "type":    "transform",
        "transforms": [{
          "type": "rotate",
          "a": {
            "property": "leftOilPressGauge",
            "interpolation": "Oil-Press-Gauge-Interpolation.xml"
          },
          "x": 256,
          "y": 256
        }]
      }
    ]
}


It's the x and y values that should locate the needle axis of rotation. So when I created the gauge inside of a 512x512 rectangle so that the needle rotation point was at 256,256 I figured it would work. But it's not quite right. Making adjustments didn't really help.

There is also the size in the Panel1.html file. Does it need to be a square or can it be a rectangle that is wider than taller?

I know that there a numerous questions here, but if someone can provide some "simple" steps how to get these various size gauges working, I would really appreciate it.

Thanks in advance,
Dave
dhudach
 
Posts: 75
Joined: Mon Apr 13, 2015 11:46 pm

Re: WebPanel Instrument Sizing

Postby wlbragg » Tue Jun 25, 2019 6:36 pm

I created inside of a 512x512 rectangle such that the needle axis was at 256x256, replicating the pattern of the larger instruments. There seem to be numerous factors and parameters that determine instrument size, placement and needle axis

This may not help at all and I have never used the tech your dealing with. But as a suggestion only, make sure the x/y coordinate system you think you are using is correct, as in where 0,0 is and what directions increase and decrease the position. It may be your not understanding this particular coordinate reference syntax?
Kansas(2-27-15)/Ohio/Midwest scenery development.
KEQA (2-27-15), 3AU, KRCP Airport Layout
User avatar
wlbragg
 
Posts: 4906
Joined: Sat Aug 25, 2012 11:31 pm
Location: Kansas (Tornado Alley), USA
Callsign: WC2020
Version: next
OS: Win10/Debain/nVGT640

Re: WebPanel Instrument Sizing

Postby dhudach » Tue Jun 25, 2019 6:47 pm

I think the x/y coordinates are a part of the problem. But based on the documentation, the working instruments and the one that I created as 512x512, it seems to make sense. It's only when I venture into an instrument of another size that I run into difficulty. And I can get the needle to move and kind of estimate the point of rotation and make small adjustments to try to get it right, but so far I can't really seem to find a way of looking at the various sizes and setting to determine proper instrument sizing, location and needle pivot point.
dhudach
 
Posts: 75
Joined: Mon Apr 13, 2015 11:46 pm

Re: WebPanel Instrument Sizing

Postby dhudach » Wed Jun 26, 2019 3:20 pm

If you are keeping score at home or keeping track of this post, I have made some good progress. I guess I am determined (stubborn) and want to make this work or at least try to get the most out of this cool feature. I made a few instruments that are not 512x512 (oil temp, oil pressure, etc).And though given basically identical svg document settings (width, height, viewbox) I would think that placement and rotation axis of the needle elements would also be identical in terms of json x,y values. But it doesn't seem to work that way. The struggle was trying to figure out why and then to apply some 'formula' to determine the values. But having no luck with that, I essentially place the instrument on the panel, assign an educated guess for the x/y values then start the sim and make sure that the values cycle from min to max. I watch the needle behavior and adjust x/y to make things work. It's not a scientific or mathematical method, but it seems to work. A concern was if I move the instrument to other locations on the panel: that is, are the x/y values related to panel location. I wouldn't think so, and it turns out, it doesn't seem to matter where the instrument placed on the panel.
dhudach
 
Posts: 75
Joined: Mon Apr 13, 2015 11:46 pm


Return to Interfacing

Who is online

Users browsing this forum: No registered users and 1 guest