4

I am creating a mask in QGIS through the html widgwet , which, based on the value of an expression, creates or not circles. I created my css structure but I cannot integrate the question (the condition) that I generate with the expressions. Can anyone help me?

For example, I would like to generate the circle of the variable (circle_3) only if the field "125" is not null

html widget

  • This is the graphic pattern of the circle in my mask (css):
.circle{ width : 125px; height : 125px; border-radius : 50%; background: red; position : absolute; top : 50px; left : 150px; }

.medium_circle_1{ width : 60px; height : 60px; border-radius : 50%; background: green; position : absolute; top : 65px; left : 30px; } .small_circle_1{ width : 10px; height : 10px; border-radius : 50%; background: blue; position : absolute; top : 110px; left : 55px; } .small_circle_2{ width : 10px; height : 10px; border-radius : 50%; background: blue; position : absolute; top : 100px; left : 35px; } .small_circle_3{ width : 10px; height : 10px; border-radius : 50%; background: blue; position : absolute; top : 100px; left : 75px; }
  • This is my JS condition:
document.write(expression.evaluate(" \"125\" is not null"));

NB: If the field "125" in the shp is not null, then it generates the small circle (variable small_circle_3)


I am getting crazy, it all seems simple but I don't understand where I am wrong.. :

<table width="" border="1">
    <tr>
        <th>
            <script>

                function expr(field, field2, class_name) {
                    return ("COALESCE(CASE WHEN " + field + " IS NOT NULL AND '" + field2 + "' ='1' END THEN '" + class_name + "' ELSE '0' END)")
                };

                function is_circle() {

                    var circle_expr = expr('"conduit_type"','"conduit_num"', '"circle"');



                    var circle = expression.evaluate(circle_expr);



                    var html_code = "<div class=" + circle + ">" + 

                    "</div>";
                    document.write(html_code);
                };

            </script>

            <style>

            .circle{
                width : 130px;
                height : 130px;
                border-radius : 50%;
                background: red;
                position : relative;
                top : 0px;
                left : 0px;
            }

            </style>

            <script>is_circle()</script>

        </th>
    </tr>
</table>
  • Can you post the HTML and JS code in your question please ? – J. Monticolo Feb 17 at 13:51
  • I commented below – GIOVA.A88 Feb 17 at 14:04
  • I've edited your question, you can delete your answer "comment". You can directly edit your question for add precisions. – J. Monticolo Feb 17 at 14:07
7

You can create a more complex JavaScript function to create your div and call it when ever you want in your html document :

<script>
    function expr(field, class_name) {
        return "CASE WHEN \"" + field + "\" IS NOT NULL THEN '" + class_name + "' ELSE '0' END"
    };
    function is_circle() {
        var circle_expr = expr("125", "circle");
        var mc1_expr = expr("125", "medium_circle_1");
        var sc1_expr = expr("125", "small_circle_1");
        var sc2_expr = expr("125", "small_circle_2");
        var sc3_expr = expr("125", "small_circle_3");

        var circle = expression.evaluate(circle_expr);
        var mc1 = expression.evaluate(mc1_expr);
        var sc1 = expression.evaluate(sc1_expr);
        var sc2 = expression.evaluate(sc2_expr);
        var sc3 = expression.evaluate(sc3_expr);

        var html_code = "<div class=" + circle + ">" + 
        "<div class=" + mc1 + "></div>" +
        "<div class=" + sc1 + "></div>" +
        "<div class=" + sc2 + "></div>" +
        "<div class=" + sc3 + "></div>" +
        "</div>";
        document.write(html_code);
    };
</script>
<style>
.circle{
    width : 125px;
    height : 125px;
    border-radius : 50%;
    background: red;
    position : absolue;
    top : 50px;
    left : 150px;
}

.medium_circle_1{
    width : 60px;
    height : 60px;
    border-radius : 50%;
    background: green;
    position : absolute;
    top : 65px;
    left : 30px;
}

.small_circle_1{
    width : 10px;
    height : 10px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 110px;
    left : 55px;
}

.small_circle_2{
    width : 10px;
    height : 10px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 100px;
    left : 35px;
}

.small_circle_3{
    width : 10px;
    height : 10px;
    border-radius : 50%;
    background: blue;
    position : absolute;
    top : 100px;
    left : 75px;
}
</style>

<script>is_circle()</script>

You have just now to edit the lines like circle_expr = expr("125", "circle"); with expr("my_field", "my_circle_class_name");.


EDIT

With 3 fields for display red, green and blue circles (red_type, green_type, blue_type), 3 other fields to count each category (red_count, green_count, blue_count), you can use the following HTML + Javascript code :

<style>
    table {
      border-collapse: collapse;
    }

    table, th, td {
      border: 2px solid black;
    }

    th, td {
      padding: 15px;
    }

    .color_red{
        background-color: red;
    }

    .color_green{
        background-color: green;
    }

    .color_blue{
        background-color: blue;
    }

    .transparent{
        background-color: #00000000;
    }

    .circle{
        width : 124px;
        height : 124px;
        border-radius : 50%;
    }

    .medium_circle_1{
        width : 60px;
        height : 60px;
        border-radius : 50%;
        position : relative;
        top : 62px;
        left : 32px;
    }

    .small_circle_1{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : 40px;
        left : 40px;
    }

    .small_circle_2{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : 39px;
        left : 57px;
    }

    .small_circle_3{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : 20px;
        left : 73px;
    }

    .small_circle_4{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : -5px;
        left : 40px;
    }

    .small_circle_5{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : -30px;
        left : 47px;
    }

    .small_circle_6{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : -40px;
        left : 65px;
    }

    .small_circle_7{
        width : 10px;
        height : 10px;
        border-radius : 50%;
        position : relative;
        top : -35px;
        left : 73px;
    }
</style>

<script>
function change_color(elem, expr){
  var color = expression.evaluate(expr);
  var newclass = document.getElementById(elem).className.replace("transparent", color)
  document.getElementById(elem).setAttribute("class", newclass);
};
function expressions_for(num){
  var n = num;
  change_color(n + ".1", "CASE WHEN \"red_type\" IS NOT NULL AND \"red_count\" >= " + n + " THEN 'color_red' ELSE 'transparent' END");
  change_color(n + ".2", "CASE WHEN \"green_type\" IS NOT NULL AND \"green_count\" >= " + n + " THEN 'color_green' ELSE 'transparent' END");
  var i;
  for (i = 3; i <= 9; i++) {
    var j = ((num - 1) * 7) + i - 2;
    change_color(n + "." + i, "CASE WHEN \"blue_type\" IS NOT NULL AND \"blue_count\" >= " + j + " THEN 'color_blue' ELSE 'transparent' END");
  };
};
function main(){
  expressions_for(1);
  expressions_for(2);
  expressions_for(3);
  expressions_for(4);
  expressions_for(5);
};
</script>

<table>
<tr>
<td>
    <div id="1.1" class="circle transparent">
        <div id="1.2" class="medium_circle_1 transparent"></div>
        <div id="1.3" class="small_circle_1 transparent"></div>
        <div id="1.4" class="small_circle_2 transparent"></div>
        <div id="1.5" class="small_circle_3 transparent"></div>
        <div id="1.6" class="small_circle_4 transparent"></div>
        <div id="1.7" class="small_circle_5 transparent"></div>
        <div id="1.8" class="small_circle_6 transparent"></div>
        <div id="1.9" class="small_circle_7 transparent"></div>
    </div>
</td>
<td>
    <div id="2.1" class="circle transparent">
        <div id="2.2" class="medium_circle_1 transparent"></div>
        <div id="2.3" class="small_circle_1 transparent"></div>
        <div id="2.4" class="small_circle_2 transparent"></div>
        <div id="2.5" class="small_circle_3 transparent"></div>
        <div id="2.6" class="small_circle_4 transparent"></div>
        <div id="2.7" class="small_circle_5 transparent"></div>
        <div id="2.8" class="small_circle_6 transparent"></div>
        <div id="2.9" class="small_circle_7 transparent"></div>
    </div>
</td>
<td>
    <div id="3.1" class="circle transparent">
        <div id="3.2" class="medium_circle_1 transparent"></div>
        <div id="3.3" class="small_circle_1 transparent"></div>
        <div id="3.4" class="small_circle_2 transparent"></div>
        <div id="3.5" class="small_circle_3 transparent"></div>
        <div id="3.6" class="small_circle_4 transparent"></div>
        <div id="3.7" class="small_circle_5 transparent"></div>
        <div id="3.8" class="small_circle_6 transparent"></div>
        <div id="3.9" class="small_circle_7 transparent"></div>
    </div>
</td>
<td>
    <div id="4.1" class="circle transparent">
        <div id="4.2" class="medium_circle_1 transparent"></div>
        <div id="4.3" class="small_circle_1 transparent"></div>
        <div id="4.4" class="small_circle_2 transparent"></div>
        <div id="4.5" class="small_circle_3 transparent"></div>
        <div id="4.6" class="small_circle_4 transparent"></div>
        <div id="4.7" class="small_circle_5 transparent"></div>
        <div id="4.8" class="small_circle_6 transparent"></div>
        <div id="4.9" class="small_circle_7 transparent"></div>
    </div>
</td>
<td>
    <div id="5.1" class="circle transparent">
        <div id="5.2" class="medium_circle_1 transparent"></div>
        <div id="5.3" class="small_circle_1 transparent"></div>
        <div id="5.4" class="small_circle_2 transparent"></div>
        <div id="5.5" class="small_circle_3 transparent"></div>
        <div id="5.6" class="small_circle_4 transparent"></div>
        <div id="5.7" class="small_circle_5 transparent"></div>
        <div id="5.8" class="small_circle_6 transparent"></div>
        <div id="5.9" class="small_circle_7 transparent"></div>
    </div>
</td>
</tr>
</table>
<script>main()</script>
|improve this answer|||||
  • Thank you so much !! I'm not very experienced in JS. And if I want to add more conditions (circle) – GIOVA.A88 Feb 17 at 14:38
  • @GIOVA.A88: I improved the code for all circles and create more JS for simplify the conditions coding for each circle. – J. Monticolo Feb 17 at 14:50
  • Sorry for further clarification. If in my condition "case when .." I would like to add others conditions with (Coalesce) how do I do it? thank you for your availability – GIOVA.A88 Feb 19 at 9:38
  • Code the expression in the HtmlWidget (click on the Epsilon) and add it in the HtmlWidget (green +), and look at the code inside the expression.evaluate(...) and adapt the code above. – J. Monticolo Feb 19 at 9:47
  • The problem is: This is my function ( function expr(field, class_name) { return "CASE WHEN \"" + field + "\" IS NOT NULL THEN '" + class_name + "' ELSE '0' END" }; ) With html widget the traduction is different (document.write(expression.evaluate("coalesce( CASE WHEN field1 IS NOT NULL THEN layer1_name ELSE '0' END, CASE WHEN lfield2 IS NOT NULL THEN layer2_name ELSE '0' END )")) How can I adapt it? – GIOVA.A88 Feb 19 at 10:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.