[www-doc] [Git][VideoLAN.org/websites][master] Replace images with proper HTML

[Jean-Baptiste Kempf (@jbk)]

Jean-Baptiste Kempf pushed to branch master at VideoLAN organization / websites


Commits:
dae20c9f by Marvin Scholz at 2025-12-02T13:46:22+01:00
Replace images with proper HTML

Instead of generating images, just use Bootstraps progress and proper
aria hints for accessibility. This removes the dependency on the PHP
GD extension.

- - - - -


2 changed files:

- www.videolan.org/developers/i18n/vlcstat.php
- www.videolan.org/style/bootstrap.scss


Changes:

=====================================
www.videolan.org/developers/i18n/vlcstat.php
=====================================
@@ -54,32 +54,37 @@
         $pc_tr = $tr * 100 / $total;
         $pc_fu = $fu * 100 / $total;
         $pc_ut = $ut * 100 / $total;
-
-        /* Create image and colors */
-        $image = @imagecreatetruecolor( 150, 18 );
-        $red = imagecolorallocate( $image, 230, 50, 50 );
-        $orange = imagecolorallocate( $image, 200, 170, 50 );
-        $green = imagecolorallocate( $image, 110, 210, 100 );
-        $black = imagecolorallocate( $image, 0, 0, 0 );
-
-        /* Fill the image */
-        imagefilledrectangle( $image, 0, 0, ceil( 1.5 * $pc_tr ), 17, $green );
-        imagefilledrectangle( $image, ceil( 1.5 * $pc_tr), 0 ,ceil( 1.5 * ($pc_fu + $pc_tr)), 17, $orange );
-        imagefilledrectangle( $image, ceil( 1.5 * ( $pc_fu + $pc_tr )), 0, 150, 17, $red );
-        imagestring( $image, 5, 65, 2 , floor($pc_tr)."%" , $black );
-
-        /* Save and destroy the image */
-        imagepng( $image, "./images/image_$pofile.png" );
-        imagedestroy( $image );
-
-        /* Display results */
-        printf( "<tr class=\"i18n_stats\"><td class=\"i18n_stats\">%s</td>
-        <td class=\"i18n_stats\">%d</td><td class=\"i18n_stats2\">%.2f</td>
-        <td class=\"i18n_stats\">%d</td><td class=\"i18n_stats2\">%.2f</td>
-        <td class=\"i18n_stats\">%d</td><td class=\"i18n_stats2\">%.2f</td>
-        <td class=\"i18n_graph\"><img src=\"images/image_$pofile.png\" alt=\"$pofile\"/></td></tr>", $names[$pofile], $tr, $pc_tr, $fu, $pc_fu, $ut, $pc_ut);
-     }
-?>
+    ?>
+        <tr class="i18n_stats"><td class="i18n_stats"><?php echo $names[$pofile]; ?></td>
+            <td class="i18n_stats"><?php echo $tr; ?></td>
+            <td class="i18n_stats2"><?php echo number_format($pc_tr, 2); ?></td>
+
+            <td class="i18n_stats"><?php echo $fu; ?></td>
+            <td class="i18n_stats2"><?php echo number_format($pc_fu, 2); ?></td>
+
+            <td class="i18n_stats"><?php echo $ut; ?></td>
+            <td class="i18n_stats2"><?php echo number_format($pc_ut, 2); ?></td>
+
+            <td>
+              <div class="progress">
+                <div
+                    class="progress-bar progress-bar-success"
+                    style="width: <?php echo number_format($pc_tr, 2, '.', ''); ?>%;"
+                    role="progressbar"
+                    aria-valuenow="<?php echo number_format($pc_tr, 0, '.', ''); ?>" aria-valuemin="0" aria-valuemax="100"></div>
+                <div
+                    class="progress-bar progress-bar-warning"
+                    style="width: <?php echo number_format($pc_fu, 2, '.', ''); ?>%;"
+                    role="progressbar"
+                    aria-valuenow="<?php echo number_format($pc_fu, 0, '.', ''); ?>" aria-valuemin="0" aria-valuemax="100"></div>
+                <div class="progress-bar progress-bar-danger"
+                    style="width: <?php echo number_format($pc_ut, 2, '.', '');?>%;"
+                    role="progressbar"
+                    aria-valuenow="<?php echo number_format($pc_ut, 0, '.', ''); ?>" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </td>
+        </tr>
+<?php } ?>
 
 </table>
 


=====================================
www.videolan.org/style/bootstrap.scss
=====================================
@@ -37,7 +37,7 @@
 //@import "bootstrap/jumbotron";
 @import "bootstrap/thumbnails";
 @import "bootstrap/alerts";
-//@import "bootstrap/progress-bars";
+ at import "bootstrap/progress-bars";
 @import "bootstrap/media";
 @import "bootstrap/list-group";
 @import "bootstrap/panels";



View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/-/commit/dae20c9f2d26bcaaa40ddc14d02a63ce169cd1a3

-- 
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/-/commit/dae20c9f2d26bcaaa40ddc14d02a63ce169cd1a3
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance