ONO::FW::Edu::Apps::Modules::Colors
package ONO::FW::Edu::Apps::Modules::Colors;
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2022-2026 Jos Kirps and The Joopita Project [ASBL]
# Copyright (C) 2011-2022 Jos Kirps and Joopita Research ASBL
# Copyright (C) 2006-2011 Jos Kirps and The Joopita Project
# Copyright (C) 2001-2006 Jos Kirps and The WobbleWolf Project
#
# This file, as well as many 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 ... #
################################################################################
#: This module is a front end application module wrapper that has been
#: created for the Morzino Project (morzino.com) and that has been released
#: as Open Source software.
#:
#: Note that this is NOT a self-contained application, it is only a wrapper
#: that makes heavy use of the ONO Perl Framework application engine.
use strict;
use Encode;
use ONO::Render;
use ONO::ToolBox::Auth;
use ONO::Lib::Lang::LangKitEdu;
use ONO::Lib::DateTime::ToolBox;
use ONO::FW::Apps::Core;
use ONO::FW::Apps::Core::Graphics;
use ONO::FW::Edu::Apps::ToolBox;
use ONO::FW::User::Init;
use ONO::Lib::UI::ColorPicker;
use ONO::IO;
use ONO::DB;
use ONO::Lib::Basic;
sub play {
my (
$self,
$option,
$vars_ref,
$HTTP,
$BASE,
) = @_;
################################################################
# INIT - BEGIN
################################################################
my (
$db,
$community,
$action_url,
$form,
$format,
$canvas,
$pdfkey,
$sec,$min,$hour,
$mday,$mon,$year,
$wday,$yday,$timestamp,
$lang,
$BLK_ref,
$vars_ref,
) = ONO::FW::Apps::Core->init($vars_ref);
my %vars = %$vars_ref;
my %BLK = %$BLK_ref;
my ($HEAD,$WEB);
my (
$vpath,
$lang,$domain,$community,
$sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$timestamp,
$script_url,$action_url,$form
) = ONO::FW::User::Init->getvar(\%vars);
ONO::FW::Apps::Core->now("","chess",$vars{'app_lang'});
my $action_url = qq~$ENV{'SCRIPT_NAME'}?app_lang=$vars{'app_lang'}&~;
###################################################################
# DRAW
###################################################################
my $CSSJS = ONO::Render->cssjs($BASE);
$CSSJS .= qq~<link rel="stylesheet" href="$BASE/ono/osr/javascript/colorslider/style.css">~;
my $SELS;
for (my $r = 1; $r < 5; $r++) {
for (my $g = 1; $g < 5; $g++) {
for (my $b = 1; $b < 5; $b++) {
my $r1 = $r*3;
my $g1 = $g*3;
my $b1 = $b*3;
$r1 =~ s~12~c~;
$g1 =~ s~12~c~;
$b1 =~ s~12~c~;
my $r2 = $r*18;
my $g2 = $g*18;
my $b2 = $b*18;
$SELS .= qq~<a href="javascript:void(0);" onclick="color_sample_select('$r2','$g2','$b2')">
<div class="fl mt5 ml5 bo bg_paper p5 radius16">
<div class="bo p10 radius10" style="background-color:#$r1$r1$g1$g1$b1$b1"></div>
</div>
</a>
~;
}
}
}
my $COLORS = qq~<div class="p5">
<div class="box_fabric">
<div class="inline w100">
<div class="w50 fl">
<div class="p5">
<div class="box_paper p10">
<div class="bb mb5">
<span class="bold">CMYK</span>
</div>
<table class="wide_table">
<tr class="vtop">
<td class="w100">
<div class="sliders">
<div>
<div class="fr"><label for="cyan" style="width:20px"> </label></div>
<label style="background-color:#00ffff;color:#006666">$BLK{'Cyan'}</label>
<input type="number" id="cyanNum">
<input value="78" type="range" min="0" max="100" id="cyan">
</div>
<div>
<div class="fr"><label for="magenta" style="width:20px"> </label></div>
<label style="background-color:#ff00ff">$BLK{'Magenta'}</label>
<input type="number" id="magentaNum">
<input value="12" type="range" min="0" max="100" id="magenta">
</div>
<div>
<div class="fr"><label for="yellow" style="width:20px"> </label></div>
<label style="background-color:#ffff00;color:#666600">$BLK{'Yellow'}</label>
<input type="number" id="yellowNum">
<input value="34" type="range" min="0" max="100" id="yellow">
</div>
<div>
<div class="fr"><label for="black" style="width:20px"> </label></div>
<label style="background-color:#000000">$BLK{'Black'}</label>
<input type="number" id="blackNum">
<input value="18" type="range" min="0" max="100" id="black">
</div>
</div>
</td>
<td><div id="color_display_cmyk" class="block128 radius128 mt20 ml20" style="border:5px solid #000000"></div></td>
</tr>
</table>
</div>
</div>
</div>
<div class="w50 fl">
<div class="p5">
<div class="box_paper p10">
<div class="bb mb5">
<span class="bold">RGB</span>
</div>
<table class="wide_table">
<tr class="vtop">
<td class="w100">
<div class="sliders">
<div>
<div class="fr"><label for="red" style="width:20px"> </label></div>
<label style="background-color:#ff0000">$BLK{'Red'}</label>
<input type="number" id="redNum">
<input value="18" type="range" min="0" max="100" id="red">
</div>
<div>
<div class="fr"><label for="green" style="width:20px"> </label></div>
<label style="background-color:#00ff00;color:#009900">$BLK{'Green'}</label>
<input type="number" id="greenNum">
<input value="72" type="range" min="0" max="100" id="green">
</div>
<div>
<div class="fr"><label for="blue" style="width:20px"> </label></div>
<label style="background-color:#0000ff">$BLK{'Blue'}</label>
<input type="number" id="blueNum">
<input value="54" type="range" min="0" max="100" id="blue">
</div>
</div>
</td>
<td><div id="color_display" class="block128 radius128 mt20 ml20" style="border:5px solid #000000"></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="inline w100">$SELS</div>
</div>
<script src="$BASE/ono/osr/javascript/colorslider/colorslider_100.js"></script>
<script src="$BASE/ono/osr/javascript/colorslider/colorslider_cmyk.js"></script>
<script>
function color_sample_select(r,g,b) {
onojs_setvalue('red',r);
onojs_setvalue('green',g);
onojs_setvalue('blue',b);
displayColors();
initSliderColors();
changeRangeNumVal();
colorNumbrVals();
var cmyk = rgb_2_cmyk(r,g,b);
onojs_setvalue('cyan',cmyk[0]);
onojs_setvalue('magenta',cmyk[1]);
onojs_setvalue('yellow',cmyk[2]);
onojs_setvalue('black',cmyk[3]);
displayColorsCMYK();
initSliderColorsCMYK();
changeRangeNumValCMYK();
colorNumbrValsCMYK();
}
</script>
~;
# if (ONO::IO->devstation) {
# $COLORS = qq~<div class="bo" style="width:920px;height:480px">$COLORS</div>~;
# }
print qq~Content-Type: text/html; charset=UTF-8\n\n
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Generator" content="ONO App Engine">
$CSSJS
</head>
<body style="margin:0px;padding:0px">
$COLORS
</body>
</html>
~;
}
###################################################################
#### THAT'S IT :-D
###################################################################
1;
__END__
################################################################################
# COPYRIGHT / LICENSE #
################################################################################
#
# This file is part of the ONO Software Project.
#
# Copyright (C) 2022-2026 Jos Kirps and The Joopita Project [ASBL]
# Copyright (C) 2011-2022 Jos Kirps and Joopita Research ASBL
# Copyright (C) 2006-2011 Jos Kirps and The Joopita Project
# Copyright (C) 2001-2006 Jos Kirps and The WobbleWolf Project
#
# This file, as well as many 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 ... #
################################################################################
#: This module is a front end application module wrapper that has been
#: created for the Morzino Project (morzino.com) and that has been released
#: as Open Source software.
#:
#: Note that this is NOT a self-contained application, it is only a wrapper
#: that makes heavy use of the ONO Perl Framework application engine.
use strict;
use Encode;
use ONO::Render;
use ONO::ToolBox::Auth;
use ONO::Lib::Lang::LangKitEdu;
use ONO::Lib::DateTime::ToolBox;
use ONO::FW::Apps::Core;
use ONO::FW::Apps::Core::Graphics;
use ONO::FW::Edu::Apps::ToolBox;
use ONO::FW::User::Init;
use ONO::Lib::UI::ColorPicker;
use ONO::IO;
use ONO::DB;
use ONO::Lib::Basic;
sub play {
my (
$self,
$option,
$vars_ref,
$HTTP,
$BASE,
) = @_;
################################################################
# INIT - BEGIN
################################################################
my (
$db,
$community,
$action_url,
$form,
$format,
$canvas,
$pdfkey,
$sec,$min,$hour,
$mday,$mon,$year,
$wday,$yday,$timestamp,
$lang,
$BLK_ref,
$vars_ref,
) = ONO::FW::Apps::Core->init($vars_ref);
my %vars = %$vars_ref;
my %BLK = %$BLK_ref;
my ($HEAD,$WEB);
my (
$vpath,
$lang,$domain,$community,
$sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$timestamp,
$script_url,$action_url,$form
) = ONO::FW::User::Init->getvar(\%vars);
ONO::FW::Apps::Core->now("","chess",$vars{'app_lang'});
my $action_url = qq~$ENV{'SCRIPT_NAME'}?app_lang=$vars{'app_lang'}&~;
###################################################################
# DRAW
###################################################################
my $CSSJS = ONO::Render->cssjs($BASE);
$CSSJS .= qq~<link rel="stylesheet" href="$BASE/ono/osr/javascript/colorslider/style.css">~;
my $SELS;
for (my $r = 1; $r < 5; $r++) {
for (my $g = 1; $g < 5; $g++) {
for (my $b = 1; $b < 5; $b++) {
my $r1 = $r*3;
my $g1 = $g*3;
my $b1 = $b*3;
$r1 =~ s~12~c~;
$g1 =~ s~12~c~;
$b1 =~ s~12~c~;
my $r2 = $r*18;
my $g2 = $g*18;
my $b2 = $b*18;
$SELS .= qq~<a href="javascript:void(0);" onclick="color_sample_select('$r2','$g2','$b2')">
<div class="fl mt5 ml5 bo bg_paper p5 radius16">
<div class="bo p10 radius10" style="background-color:#$r1$r1$g1$g1$b1$b1"></div>
</div>
</a>
~;
}
}
}
my $COLORS = qq~<div class="p5">
<div class="box_fabric">
<div class="inline w100">
<div class="w50 fl">
<div class="p5">
<div class="box_paper p10">
<div class="bb mb5">
<span class="bold">CMYK</span>
</div>
<table class="wide_table">
<tr class="vtop">
<td class="w100">
<div class="sliders">
<div>
<div class="fr"><label for="cyan" style="width:20px"> </label></div>
<label style="background-color:#00ffff;color:#006666">$BLK{'Cyan'}</label>
<input type="number" id="cyanNum">
<input value="78" type="range" min="0" max="100" id="cyan">
</div>
<div>
<div class="fr"><label for="magenta" style="width:20px"> </label></div>
<label style="background-color:#ff00ff">$BLK{'Magenta'}</label>
<input type="number" id="magentaNum">
<input value="12" type="range" min="0" max="100" id="magenta">
</div>
<div>
<div class="fr"><label for="yellow" style="width:20px"> </label></div>
<label style="background-color:#ffff00;color:#666600">$BLK{'Yellow'}</label>
<input type="number" id="yellowNum">
<input value="34" type="range" min="0" max="100" id="yellow">
</div>
<div>
<div class="fr"><label for="black" style="width:20px"> </label></div>
<label style="background-color:#000000">$BLK{'Black'}</label>
<input type="number" id="blackNum">
<input value="18" type="range" min="0" max="100" id="black">
</div>
</div>
</td>
<td><div id="color_display_cmyk" class="block128 radius128 mt20 ml20" style="border:5px solid #000000"></div></td>
</tr>
</table>
</div>
</div>
</div>
<div class="w50 fl">
<div class="p5">
<div class="box_paper p10">
<div class="bb mb5">
<span class="bold">RGB</span>
</div>
<table class="wide_table">
<tr class="vtop">
<td class="w100">
<div class="sliders">
<div>
<div class="fr"><label for="red" style="width:20px"> </label></div>
<label style="background-color:#ff0000">$BLK{'Red'}</label>
<input type="number" id="redNum">
<input value="18" type="range" min="0" max="100" id="red">
</div>
<div>
<div class="fr"><label for="green" style="width:20px"> </label></div>
<label style="background-color:#00ff00;color:#009900">$BLK{'Green'}</label>
<input type="number" id="greenNum">
<input value="72" type="range" min="0" max="100" id="green">
</div>
<div>
<div class="fr"><label for="blue" style="width:20px"> </label></div>
<label style="background-color:#0000ff">$BLK{'Blue'}</label>
<input type="number" id="blueNum">
<input value="54" type="range" min="0" max="100" id="blue">
</div>
</div>
</td>
<td><div id="color_display" class="block128 radius128 mt20 ml20" style="border:5px solid #000000"></div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="inline w100">$SELS</div>
</div>
<script src="$BASE/ono/osr/javascript/colorslider/colorslider_100.js"></script>
<script src="$BASE/ono/osr/javascript/colorslider/colorslider_cmyk.js"></script>
<script>
function color_sample_select(r,g,b) {
onojs_setvalue('red',r);
onojs_setvalue('green',g);
onojs_setvalue('blue',b);
displayColors();
initSliderColors();
changeRangeNumVal();
colorNumbrVals();
var cmyk = rgb_2_cmyk(r,g,b);
onojs_setvalue('cyan',cmyk[0]);
onojs_setvalue('magenta',cmyk[1]);
onojs_setvalue('yellow',cmyk[2]);
onojs_setvalue('black',cmyk[3]);
displayColorsCMYK();
initSliderColorsCMYK();
changeRangeNumValCMYK();
colorNumbrValsCMYK();
}
</script>
~;
# if (ONO::IO->devstation) {
# $COLORS = qq~<div class="bo" style="width:920px;height:480px">$COLORS</div>~;
# }
print qq~Content-Type: text/html; charset=UTF-8\n\n
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Generator" content="ONO App Engine">
$CSSJS
</head>
<body style="margin:0px;padding:0px">
$COLORS
</body>
</html>
~;
}
###################################################################
#### THAT'S IT :-D
###################################################################
1;
__END__