Why does this happen to my app?

Thread is closed for posting
9 posts, 0 answers
  1. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 08 Jan Link to this post

    Hi, 

    I am trying to use gauges but every time I want to use multiple gauges with this layout my app crashes and gives me this error(see picture for error). This is the code I use.

        

    <Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" navigatedTo="onNavigatedTo" xmlns:gauge="nativescript-pro-ui/gauges" xmlns="http://www.nativescript.org/tns.xsd">

    <StackLayout id="lmao">
    <gauge:RadRadialGauge id="gaugeView" margin="10">
    <gauge:RadRadialGauge.scales>
    <gauge:RadialScale startAngle="0" sweepAngle="360" minimum="0" maximum="100" radius="0.9">
    <gauge:RadialScale.scaleStyle>
    <gauge:ScaleStyle ticksVisible="false" labelsVisible="false" lineThickness="0" />
    </gauge:RadialScale.scaleStyle>
    <gauge:RadialScale.indicators>
    <StackLayout id="lol">
    <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.5">
    <gauge:RadialBarIndicator.indicatorStyle>
    <gauge:BarIndicatorStyle fillColor="rgba(224,151,36,0.5)" barWidth="0.2"/>
    </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>
    <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.5" isAnimated="true">
    <gauge:RadialBarIndicator.indicatorStyle>
    <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(224,151,36,1)" barWidth="0.2"/>
    </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>
    <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.75">
    <gauge:RadialBarIndicator.indicatorStyle>
    <gauge:BarIndicatorStyle fillColor="rgba(196,241,57,0.5)" barWidth="0.2"/>
    </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>
    <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.75" isAnimated="true">
    <gauge:RadialBarIndicator.indicatorStyle>
    <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(196,241,57,1)" barWidth="0.2"/>
    </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>
    <gauge:RadialBarIndicator minimum="0" maximum="100" location="1">
    <gauge:RadialBarIndicator.indicatorStyle>
    <gauge:BarIndicatorStyle fillColor="rgba(132,235,247,0.5)" barWidth="0.2"/>
    </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>
    <gauge:RadialBarIndicator minimum="0" maximum="0" location="1" isAnimated="true">
    <gauge:RadialBarIndicator.indicatorStyle>
    <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(132,235,247,1)" barWidth="0.2"/>
    </gauge:RadialBarIndicator.indicatorStyle>
    </gauge:RadialBarIndicator>
    </StackLayout>
    </gauge:RadialScale.indicators>
    </gauge:RadialScale>
    </gauge:RadRadialGauge.scales>
    </gauge:RadRadialGauge>
    </StackLayout>
    <!-- << gauges-indicators-add-bars-xml -->
    </Page>

    Already much thanks,

    Roel Voordendag

  2. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 08 Jan Link to this post

    Sorry I forgot to add the error
  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jan Link to this post

    Hi Roel,

    The provided code snippet has a minor syntax error in the RadialScale indicators declaration.
    Where the indicators should be directly part of the visual tree they are in fact wrapped in a StackLayout which is not permitted structure.
    Remove the StackLayout from the indicators array and your UI will render as expected.

    For example:
    <gauge:RadRadialGauge id="gaugeView" margin="10">
        <gauge:RadRadialGauge.scales>
            <gauge:RadialScale minimum="0" maximum="100" radius="0.9" startAngle="0" sweepAngle="360" >
                <gauge:RadialScale.scaleStyle>
                    <gauge:ScaleStyle ticksVisible="false" labelsVisible="false" lineThickness="0" />
                </gauge:RadialScale.scaleStyle>
                <gauge:RadialScale.indicators>
                    <!-- REMOVE the opening StackLayout tag HERE -->
                        <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.5">
                        <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle fillColor="rgba(224,151,36,0.5)" barWidth="0.2"/>
                        </gauge:RadialBarIndicator.indicatorStyle>
                        </gauge:RadialBarIndicator>
                        <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.5" isAnimated="true">
                        <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(224,151,36,1)" barWidth="0.2"/>
                        </gauge:RadialBarIndicator.indicatorStyle>
                        </gauge:RadialBarIndicator>
                        <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.75">
                        <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle fillColor="rgba(196,241,57,0.5)" barWidth="0.2"/>
                        </gauge:RadialBarIndicator.indicatorStyle>
                        </gauge:RadialBarIndicator>
                        <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.75" isAnimated="true">
                        <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(196,241,57,1)" barWidth="0.2"/>
                        </gauge:RadialBarIndicator.indicatorStyle>
                        </gauge:RadialBarIndicator>
                        <gauge:RadialBarIndicator minimum="0" maximum="100" location="1">
                        <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle fillColor="rgba(132,235,247,0.5)" barWidth="0.2"/>
                        </gauge:RadialBarIndicator.indicatorStyle>
                        </gauge:RadialBarIndicator>
                        <gauge:RadialBarIndicator minimum="0" maximum="0" location="1" isAnimated="true">
                        <gauge:RadialBarIndicator.indicatorStyle>
                        <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(132,235,247,1)" barWidth="0.2"/>
                        </gauge:RadialBarIndicator.indicatorStyle>
                        </gauge:RadialBarIndicator>
                    <!-- REMOVE the closing StackLayout tag HERE -->
                </gauge:RadialScale.indicators>
            </gauge:RadialScale>
        </gauge:RadRadialGauge.scales>
    </gauge:RadRadialGauge>


    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  4. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 08 Jan in reply to Nikolay Iliev Link to this post

    Hi Nikolay, 

    Thank you for your first response.

    But how do I get my gauges underneath each and text next to the gauges? Like in the picture? Is the best way the make multiple gauges or is there a better solution.

    Thank you for your service,

    Roel Voordendag

     

     

     

  5. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 08 Jan in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    Thank you for your first response.

    But I want to have my gauges underneath each other and texts next to them like in the example picture but what is the best way to do this? Do I need to make multiple instances of the gauges? Or is there a better way?

    Thank you for your service,

    Roel Voordendag

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jan Link to this post

    Hello Roel,

    Indeed the described case would require to create different instances of RadRadialGauge and apply the text for each different gauge.
    At this very moment, the only possibility for creating a description text is by applying a separate layout and introducing a custom set of layouts inside the indicators array is not supported.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 08 Jan in reply to Nikolay Iliev Link to this post

    Hi Nikolay, 

    Is the best to maybe create a Stacklayout around a gauge and then make a gauge on the left side and the text on the right side and repeat the three times is that possible?

    Regards,

    Roel Voordendag

  8. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 08 Jan in reply to Roel Link to this post

    And How do I change the indicators if I have multiple instances of radialGauges with different id's?

    Thank you for your help,

    Roel Voordendag

  9. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 09 Jan Link to this post

    Hi Roel,

    Based on the sent photo you can easily apply the business logic by providing three different indicators for "Time Slept", "Deep Sleep", and "Healthy Sleep".
    You can create a GridLayout (or another layout of your preference) with two columns and three rows and place the first gauge in the top-left cell, the second in the middle-right cell and the last one in the bottom-left cell and respectively nest the text content in the opposite cells.
    Not sure what you mean by "How do I change the indicators if I have multiple instances of radialGauges with different ?" but I am guessing that you have the same context that has to change the indicators values. If that is the case, you can easily achieve that by refusing g the same ViewModel for each of your new gauge instances.

    Demonstration of the above technique can be found in this PlayGround demo.
    Of course, using a separate gauge also allow you to use separate view model properties and update each gauge accordingly. 

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top