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 5: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.
Flight Instruction Elevator Control: pull back = houses get smaller, push forward = houses get bigger.
dhudach
 
Posts: 118
Joined: Tue Apr 14, 2015 12:46 am

Re: WebPanel Instrument Sizing

Postby dhudach » Mon Jun 24, 2019 1: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.
Flight Instruction Elevator Control: pull back = houses get smaller, push forward = houses get bigger.
dhudach
 
Posts: 118
Joined: Tue Apr 14, 2015 12:46 am

Re: WebPanel Instrument Sizing

Postby dhudach » Tue Jun 25, 2019 7: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
Flight Instruction Elevator Control: pull back = houses get smaller, push forward = houses get bigger.
dhudach
 
Posts: 118
Joined: Tue Apr 14, 2015 12:46 am

Re: WebPanel Instrument Sizing

Postby wlbragg » Tue Jun 25, 2019 7: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 and Ohio/Midwest scenery development.
KEQA, 3AU, KRCP Airport Layout
Intel i7/GeForce RTX 2070/Max-Q
User avatar
wlbragg
 
Posts: 7586
Joined: Sun Aug 26, 2012 12:31 am
Location: Kansas (Tornado Alley), USA
Callsign: WC2020
Version: next
OS: Win10/Linux/RTX 2070

Re: WebPanel Instrument Sizing

Postby dhudach » Tue Jun 25, 2019 7: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.
Flight Instruction Elevator Control: pull back = houses get smaller, push forward = houses get bigger.
dhudach
 
Posts: 118
Joined: Tue Apr 14, 2015 12:46 am

Re: WebPanel Instrument Sizing

Postby dhudach » Wed Jun 26, 2019 4: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.
Flight Instruction Elevator Control: pull back = houses get smaller, push forward = houses get bigger.
dhudach
 
Posts: 118
Joined: Tue Apr 14, 2015 12:46 am

Re: WebPanel Instrument Sizing

Postby rooman » Mon Apr 17, 2023 3:57 pm

dhc6
I'm modifying the standard t5 temp gauge to make a web panel version.
It is 512x512 but when shown in the browser is 2x too big, what should I check please?
Grew up with Dr Who then discovered Monty Python and Middle Earth. The world was never the same.
rooman
 
Posts: 169
Joined: Sun Apr 12, 2015 7:26 pm
Location: Lausanne, Switzerland
Callsign: HB-ROO
Version: Next + LTS
OS: Ubuntu latest stable

Re: WebPanel Instrument Sizing

Postby SurferTim » Mon Apr 17, 2023 6:27 pm

It's an old thread, but...
It's the css in the html doc. Sets the row total to 100% of the web browser window. Six gauges splits the display to 1/6 of the window width.
Fly low. Fly slow. Land on a dime. Twin Otter. https://github.com/SurferTim/dhc6p
My other aircraft is a Citation-X https://github.com/SurferTim/CitationX
PirateAir videos at https://www.youtube.com/user/SurferTim850
User avatar
SurferTim
 
Posts: 1708
Joined: Sun Dec 09, 2018 6:49 pm
Location: Miramar Beach, FL
Callsign: Pirate
Version: 2020.4.0
OS: Ubuntu 18.04

Re: WebPanel Instrument Sizing

Postby rooman » Mon Apr 17, 2023 8:56 pm

I've found mention of 100% in the bootstrap.min.css file in the folder but my problem is one gauge way too big in a panel containing a total of 8, 7 are ok.
All are 512x512 px
Grew up with Dr Who then discovered Monty Python and Middle Earth. The world was never the same.
rooman
 
Posts: 169
Joined: Sun Apr 12, 2015 7:26 pm
Location: Lausanne, Switzerland
Callsign: HB-ROO
Version: Next + LTS
OS: Ubuntu latest stable

Re: WebPanel Instrument Sizing

Postby SurferTim » Tue Apr 18, 2023 1:18 pm

You can set 12 columns across in a row rather than 6. Change the class parameter to col-xs-1, like this:
Code: Select all
<div id="ASI" class="instrument col-xs-1" data-fgpanel-instrument="ASI.json"></div>
Fly low. Fly slow. Land on a dime. Twin Otter. https://github.com/SurferTim/dhc6p
My other aircraft is a Citation-X https://github.com/SurferTim/CitationX
PirateAir videos at https://www.youtube.com/user/SurferTim850
User avatar
SurferTim
 
Posts: 1708
Joined: Sun Dec 09, 2018 6:49 pm
Location: Miramar Beach, FL
Callsign: Pirate
Version: 2020.4.0
OS: Ubuntu 18.04

Re: WebPanel Instrument Sizing

Postby rooman » Sun Apr 23, 2023 7:09 pm

I got it showing the right size by copying the background image on to a new layer of another gauge which shows correctly and it worked, then I deleted the original background.
Thanks Inkscape.
Grew up with Dr Who then discovered Monty Python and Middle Earth. The world was never the same.
rooman
 
Posts: 169
Joined: Sun Apr 12, 2015 7:26 pm
Location: Lausanne, Switzerland
Callsign: HB-ROO
Version: Next + LTS
OS: Ubuntu latest stable


Return to Interfacing

Who is online

Users browsing this forum: No registered users and 3 guests