ONO::Lib::UI::Shape
package ONO::Lib::UI::Shape;
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2000-2025 Jos KIRPS [ www.kirps.com | jos_AT_kirps_DOT_com ]
# and The Joopita Project [ www.joopita.org | contact_AT_joopita_DOT_com ]
#
# This file, as well as other parts of the ONO Software Project or related
# elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
use strict;
sub test {
#: Test all shape generators.
my $TEST = "SHAPE TEST<br><br>";
my $color = "#993333";
$TEST .= &square( "",&rand_color(),100);
$TEST .= &rectange( "",&rand_color(),200,100);
$TEST .= &circle( "",&rand_color(),100);
$TEST .= &oval( "",&rand_color(),200,100);
$TEST .= &triange_up( "",&rand_color(),100,100);
$TEST .= &triange_down( "",&rand_color(),100,100);
$TEST .= &triange_left( "",&rand_color(),100,100);
$TEST .= &triange_right("",&rand_color(),100,100);
$TEST .= &triange_tl( "",&rand_color(),100,100);
$TEST .= &triange_tr( "",&rand_color(),100,100);
$TEST .= &triange_bl( "",&rand_color(),100,100);
$TEST .= &triange_br( "",&rand_color(),100,100);
$TEST .= &trapezoid( "",&rand_color(),200,100);
$TEST .= ¶llelogram("",&rand_color(),200,100,45);
return $TEST;
}
sub rand_color {
#: Generate random color.
my $color;
for (my $i = 1 ; $i < 7; $i++) {
$color .= int(rand(9));
}
return "#$color";
}
sub square {
#: HTML shape: square.
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[2]px"></div>~;
}
sub rectange {
#: HTML shape: rectangle.
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[3]px"></div>~;
}
sub circle {
#: HTML shape: circle.
my $rad = int($_[2]/2);
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[2]px;-moz-border-radius:${rad}px;-webkit-border-radius:${rad}px;border-radius:${rad}px;"></div>~;
}
sub oval {
my $rad1 = int($_[2]/2);
my $rad2 = int($_[3]/2);
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[3]px;-moz-border-radius:${rad1}px\/${rad2}px;-webkit-border-radius:${rad1}px\/${rad2}px;border-radius:${rad1}px\/${rad2}px;"></div>~;
}
sub triange_up {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-left:${half}px solid transparent;border-right:${half}px solid transparent;border-bottom:$_[2]px solid $_[1];"></div>~;
}
sub triange_down {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-left:${half}px solid transparent;border-right:${half}px solid transparent;border-top:$_[2]px solid $_[1];"></div>~;
}
sub triange_left {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-top:${half}px solid transparent;border-bottom:${half}px solid transparent;border-right:$_[2]px solid $_[1];"></div>~;
}
sub triange_right {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-top:${half}px solid transparent;border-bottom:${half}px solid transparent;border-left:$_[2]px solid $_[1];"></div>~;
}
sub triange_tl {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-top:$_[2]px solid $_[1];border-right:$_[2]px solid transparent;"></div>~;
}
sub triange_tr {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-top:$_[2]px solid $_[1];border-left:$_[2]px solid transparent;"></div>~;
}
sub triange_bl {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-bottom:$_[2]px solid $_[1];border-right:$_[2]px solid transparent;"></div>~;
}
sub triange_br {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-bottom:$_[2]px solid $_[1];border-left:$_[2]px solid transparent;"></div>~;
}
sub trapezoid {
#: HTML shape: trapezoid.
my $half1 = int($_[2]/2);
my $half2 = int($_[3]/2);
return qq~<div style="border-bottom:${half1}px solid $_[1];border-left:${half2}px solid transparent;border-right:${half2}px solid transparent;height:0;width:${half1}px;"></div>~;
}
sub parallelogram {
#: HTML shape: parallelogramm.
return qq~<div style="width:$_[2]px;height:$_[3]px;-webkit-transform:skew($_[4]deg);-moz-transform:skew($_[4]deg);-o-transform:skew($_[4]deg);background:$_[1];"></div>~;
}
###############################################################################
# end of script
###############################################################################
1;
__END__
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2000-2025 Jos KIRPS [ www.kirps.com | jos_AT_kirps_DOT_com ]
# and The Joopita Project [ www.joopita.org | contact_AT_joopita_DOT_com ]
#
# This file, as well as other parts of the ONO Software Project or related
# elements, are FREE SOFTWARE available under the ARTISTIC LICENSE 2.0.
#
# This program is distributed in the hope that it will be useful, but
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
#
# For the full license, see /ono/osr/license/LICENSE.txt, or write to
# jos_AT_kirps_DOT_com or contact_AT_joopita_DOT_com.
#
################################################################################
# END OF COPYRIGHT / LICENSE, HERE COMES THE CODE ... #
################################################################################
use strict;
sub test {
#: Test all shape generators.
my $TEST = "SHAPE TEST<br><br>";
my $color = "#993333";
$TEST .= &square( "",&rand_color(),100);
$TEST .= &rectange( "",&rand_color(),200,100);
$TEST .= &circle( "",&rand_color(),100);
$TEST .= &oval( "",&rand_color(),200,100);
$TEST .= &triange_up( "",&rand_color(),100,100);
$TEST .= &triange_down( "",&rand_color(),100,100);
$TEST .= &triange_left( "",&rand_color(),100,100);
$TEST .= &triange_right("",&rand_color(),100,100);
$TEST .= &triange_tl( "",&rand_color(),100,100);
$TEST .= &triange_tr( "",&rand_color(),100,100);
$TEST .= &triange_bl( "",&rand_color(),100,100);
$TEST .= &triange_br( "",&rand_color(),100,100);
$TEST .= &trapezoid( "",&rand_color(),200,100);
$TEST .= ¶llelogram("",&rand_color(),200,100,45);
return $TEST;
}
sub rand_color {
#: Generate random color.
my $color;
for (my $i = 1 ; $i < 7; $i++) {
$color .= int(rand(9));
}
return "#$color";
}
sub square {
#: HTML shape: square.
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[2]px"></div>~;
}
sub rectange {
#: HTML shape: rectangle.
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[3]px"></div>~;
}
sub circle {
#: HTML shape: circle.
my $rad = int($_[2]/2);
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[2]px;-moz-border-radius:${rad}px;-webkit-border-radius:${rad}px;border-radius:${rad}px;"></div>~;
}
sub oval {
my $rad1 = int($_[2]/2);
my $rad2 = int($_[3]/2);
return qq~<div style="background-color:$_[1];width:$_[2]px;height:$_[3]px;-moz-border-radius:${rad1}px\/${rad2}px;-webkit-border-radius:${rad1}px\/${rad2}px;border-radius:${rad1}px\/${rad2}px;"></div>~;
}
sub triange_up {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-left:${half}px solid transparent;border-right:${half}px solid transparent;border-bottom:$_[2]px solid $_[1];"></div>~;
}
sub triange_down {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-left:${half}px solid transparent;border-right:${half}px solid transparent;border-top:$_[2]px solid $_[1];"></div>~;
}
sub triange_left {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-top:${half}px solid transparent;border-bottom:${half}px solid transparent;border-right:$_[2]px solid $_[1];"></div>~;
}
sub triange_right {
#: HTML shape: triangle.
my $half = int($_[2]/2);
return qq~<div style="width:0;height:0;border-top:${half}px solid transparent;border-bottom:${half}px solid transparent;border-left:$_[2]px solid $_[1];"></div>~;
}
sub triange_tl {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-top:$_[2]px solid $_[1];border-right:$_[2]px solid transparent;"></div>~;
}
sub triange_tr {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-top:$_[2]px solid $_[1];border-left:$_[2]px solid transparent;"></div>~;
}
sub triange_bl {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-bottom:$_[2]px solid $_[1];border-right:$_[2]px solid transparent;"></div>~;
}
sub triange_br {
#: HTML shape: triangle.
return qq~<div style="width:0;height:0;border-bottom:$_[2]px solid $_[1];border-left:$_[2]px solid transparent;"></div>~;
}
sub trapezoid {
#: HTML shape: trapezoid.
my $half1 = int($_[2]/2);
my $half2 = int($_[3]/2);
return qq~<div style="border-bottom:${half1}px solid $_[1];border-left:${half2}px solid transparent;border-right:${half2}px solid transparent;height:0;width:${half1}px;"></div>~;
}
sub parallelogram {
#: HTML shape: parallelogramm.
return qq~<div style="width:$_[2]px;height:$_[3]px;-webkit-transform:skew($_[4]deg);-moz-transform:skew($_[4]deg);-o-transform:skew($_[4]deg);background:$_[1];"></div>~;
}
###############################################################################
# end of script
###############################################################################
1;
__END__