Adaptive layout of examples -- Red scratches on objects

[JF89]

Hello,

I would like to display flex windows with left side bar and two others windows : a
Adaptive layout as you call it.

When I try to import a layout from example , nothing appears , in the window code editor.

Is-it normal ?

Sometimes I have red scratches on objects of dashboard designer.
What does it mean ?

Best regards

[MattFox]

Pas de problème, I imagine you clicked on the "New Page From layout" button?
if so, I assume you are using google chrome. Bring up the dev console (F12) and check the console to see if there are any errors, anything you can provide will help Jared. Can you also elaborate on the "red scratches"?

in the interim, here is the markup to get you started

<div layout="column" layout-fill flex>
    <div flex layout="row" layout-xs="column" layout-fill>
        <div layout="column" flex="33" flex-xs="33">
            <md-card flex>
                <md-card-content>
                    Card 1
                </md-card-content>
            </md-card>
        </div>
        <div layout="column" flex>
            <md-card flex>
                <md-card-content>
                    Card 2
                </md-card-content>
            </md-card>
            <md-card flex>
                <md-card-content>
                    Card 3
                </md-card-content>
            </md-card>
        </div>
    </div>
</div>

Fox

[phildunlap]

Hi JF89,

Guessing on the red scratches (a screenshot would help) but that sounds to me like the component doesn't have an active point / has a disabled point associated with it.

[JF89]

Hi MattFox and Phil,

Thanks for your answer.

I had firefox , and when pressing F12 , here is what I have.
It doesn’t seem that there is an error.

I tried with chrome as default web browser and with F12 , here is what I have.
It doesn’t seem that there is an error too.

I’m not very keen on with html and and css , so I don’t know how to use that code.

I tried the code of MattFox to display 3 window flex with a side bar , and it’s OK.
here is what I have.

But now I suppose I have to fill any of the 3 windows with html , css, javascript , and perhaps Angular.

I don’t ask you to give me an example , but I would like to know where I can learn myself ?
What is the best way to do myself a complete flex page with side bar and one or two windows ?
If I can pick up pieces of code an put it into the edit markup , it’s OK.
Even with tutorials , If I have to learn html, css , javascript and Angular , it will be too much difficult for me.
I’m just a PLC programmer , and just know a little bit html , css , and c programms.

For the red scratches , here is a screenshot of what appears on the screen when I open a custom page.

It was the same scratches that I had this morning with several pages .
And it disappeared.
As told Phil , it’s perhaps a problem of communication I had with the data of my PLC.
So , now every thing is ok , so I think it's just a short problem of communication .
the next time , i will check the datapoint values.
Perhaps Phil wil confirm , when seeing my screenshot.
Best regards

[JF89]

Here is the screenshot

[Jared Wiltshire]

@jf89 said in Adaptive layout of examples -- Red scratches on objects:

When I try to import a layout from example , nothing appears , in the window code editor.

It appears to be broken, I will fix that for the next release. In the meantime you can copy and paste the markup from here
https://github.com/infiniteautomation/ma-dashboards/tree/main/UI/web-src/ui/views/examples/layouts

@jf89 said in Adaptive layout of examples -- Red scratches on objects:

But now I suppose I have to fill any of the 3 windows with html , css, javascript , and perhaps Angular.
I don’t ask you to give me an example , but I would like to know where I can learn myself ?
What is the best way to do myself a complete flex page with side bar and one or two windows ?

There are examples galore in the examples menu and in this forum. There are also resources all over the internet for HTML, CSS, JavaScript and AngularJS. These are open technologies and as I have tried to explain to you before, you will not be wasting your time learning them.

@jf89 said in Adaptive layout of examples -- Red scratches on objects:

Even with tutorials , If I have to learn html, css , javascript and Angular , it will be too much difficult for me.
I’m just a PLC programmer , and just know a little bit html , css , and c programms.

Perhaps Mango is not for you then. We provide you with the tools, examples, help files, API docs, forum support. In the end though it is up to you to learn how to use these tools and information. We cannot do everything for you.

We provide the Dashboard Designer tool to try and make placing and positioning elements as easy as possible. If you instead want to create a custom flex layout then you will have to expend a little effort.

@jf89 said in Adaptive layout of examples -- Red scratches on objects:

It was the same scratches that I had this morning with several pages .
And it disappeared.
As told Phil , it’s perhaps a problem of communication I had with the data of my PLC.
So , now every thing is ok , so I think it's just a short problem of communication .
the next time , i will check the datapoint values.
Perhaps Phil wil confirm , when seeing my screenshot.

The red hatch pattern will show up if the data point or its data source is disabled or if the data points is "unreliable".

[Desmond]

Hi @jf89 ,

@jf89 said in Adaptive layout of examples -- Red scratches on objects:

I don’t ask you to give me an example , but I would like to know where I can learn myself ?
What is the best way to do myself a complete flex page with side bar and one or two windows ?
If I can pick up pieces of code an put it into the edit markup , it’s OK.
Even with tutorials , If I have to learn html, css , javascript and Angular , it will be too much difficult for me.

Just my five cent thought,

1.There is no best way to do a web page

2.Copy and paste pieces of code without understanding will make your learning disable.

3.The web technologies is a prerequisite, at least know the fundamentals,
3.1. HTML to define the content of web pages
3.2. CSS to specify the layout of web pages
3.3. JavaScript to program the behavior of web pages

4.The learning speed is your choice.Everything is up to you.If you are struggling, take a break, or search google for the material

5.Explore the example page provided by Mango. Examples are often easier to understand than explanations. Try it out yourself. In my opinion, this is one of the best playground for anyone who want to learn and understand Mango.

Hope it will helps in your learning journey.