Friday 29 June 2012

First post... Why did it take me so long to log in my first post? Because I've been busy finalizing my first attempt at an App for BB10. Have little experience in programming (C, C++ and HTML), but chose HTML as it looks easier...

CONCEPTION
Dead Pixel / Stuck Pixel Tester and Fixer

REALIZATION
Pixel Force

HTML CODE
Refer to bottom of post

SCREENSHOTS
Here are some screenshots of the App running in Ripple




BUILD
Pixel Force v1.0.0.1

PLATFORM
Javascript written on Taco HTML Edit (Mac OSX)
Tested on Ripple Emulator (Chrome extension)
Packaged by Blackberry Webworks SDK

CHRONOLOGY
Framework begun on: 5th June 2012
Framework completed on: 21st June 2012
Testing and debugging completed on: 25th June 2012
Packaging and Signing completed on: 29th June 2012
Submitted to App World completed on: Waiting for RIM to respond to Vendor Application

All in all, I think it's a good first attempt at an App. Already have my idea on my next App, which will be a student reference app for Mathematics. I'm an engineer, so I excel in my maths :)

CODE

CODE
<!DOCTYPE HTML>
<html>
<head>
<title>PixelForceV2</title>

<!--Header Graphics Start-->
<canvas id="OpeningPage" width="750" height="180" style="border:1px solid #000000;">
</canvas>

<script type="text/javascript">
var c=document.getElementById("OpeningPage");
var ctx=c.getContext("2d");
ctx.fillStyle="#003366";
ctx.fillRect(0,0,750,200);

var c=document.getElementById("OpeningPage");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(580,10,160,160);

var c=document.getElementById("OpeningPage");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(590,20,70,70);

var c=document.getElementById("OpeningPage");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFCC00";
ctx.fillRect(660,20,70,70);

var c=document.getElementById("OpeningPage");
var ctx=c.getContext("2d");
ctx.fillStyle="#00FF00";
ctx.fillRect(590,90,70,70);

var c=document.getElementById("OpeningPage");
var ctx=c.getContext("2d");
ctx.fillStyle="#336699";
ctx.fillRect(660,90,70,70);
</script>

<script>
window.onload = function() {
var canvas = document.getElementById("OpeningPage");
var context = canvas.getContext("2d");

context.font = "85pt Arial";
context.fillStyle = "#FFFFFF";
context.fillText("PixelForce",10,91);

context.font = "50pt Arial";
context.fillStyle = "#FFFFFF";
context.fillText("by Otacon",15,156);

};
</script>
<!--Header Graphics End--->

<!--Accordion Body Start-->
<script type="text/javascript" src="TacoComponents/TSWAccordion.js"></script>
<script type="text/javascript" src="TacoComponents/TSWDomUtils.js"></script>
<link rel="stylesheet" type="text/css" href="TacoComponents/TSWAccordion.css" />

<!-- BEGIN COMPONENT Accordion - Taco HTML Edit -->
<style type="text/css">
#myAccordion.tswAccordion
{
width: 752px;
height: 1078px;
background-color: #FFFFFF;
}
#myAccordion .tswAccordionActiveSection, #myAccordion .tswAccordionInactiveSection
{
background-color: #FFFFFF;
width: 100%;
height: 1080px;
}
#myAccordion .tswAccordionHeader
{
text-align: center;
padding: 10px;
font-family: Arial;
font-size: 30.0px;
}
#myAccordion .tswAccordionActiveSection .tswAccordionHeader
{
background-color: #7086aa;
color: #ffffff;
border: 5px solid #003366;
}
#myAccordion .tswAccordionInactiveSection .tswAccordionHeader
{
background-color: #acccfc;
color: #000000;
border: 5px solid #003366;
}
#myAccordion .tswAccordionHeader
{
}
#myAccordion .tswAccordionBody
{
padding: 10px;
}
</style>

<!-- END COMPONENT Accordion - Taco HTML Edit -->

<script>
function WhiteImage()
{
<img src="White.jpg"/>
}
</script>

<script type="text/javascript" src="TacoComponents/TSWRotatingContent.js"></script>
<script type="text/javascript" src="TacoComponents/TSWUtils.js"></script>
<link rel="stylesheet" type="text/css" href="TacoComponents/TSWRotatingContent.css" />

<!-- BEGIN COMPONENT Rotating Content - Taco HTML Edit -->
<style type="text/css">
#StuckFlash.tswRotatingContent { width: 320px; }
#StuckFlash .tswRotatingContentHeader { width: 320px; }
#StuckFlash .tswRotatingContentTitle 
{
font-size: 1.0px;
width: 256px;
}
#StuckFlash .tswRotatingContentPageMarkers { width: 60px; }
#StuckFlash .tswRotatingContentBody
{
background-color: #ffffff;
border-color: #FFFFFF;
width: 320px;
height: 300px;
}
#StuckFlash .tswRotatingContentBody div.tswRotatingContentPanelVisible,
#StuckFlash .tswRotatingContentBody div.tswRotatingContentPanelHidden,
#StuckFlash .tswRotatingContentBody div.tswRotatingContentPanelFadingOut
{
background-color: #ffffff;
width: 312px;
height: 292px;
padding: 4px;
}
#StuckFlash .tswRotatingContentPageMarkerSelected div
{
background: url('TacoComponents/Images/TSWPageMarkerSelected_999999.png');
/* IE6 only */
*-background: none;
*-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='TacoComponents/Images/TSWPageMarkerSelected_999999.png', sizingMethod='crop');
}
#StuckFlash .tswRotatingContentPageMarkerUnselected div
{
background: url('TacoComponents/Images/TSWPageMarkerUnselected_999999.png');
/* IE6 only */
*-background: none;
*-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='TacoComponents/Images/TSWPageMarkerUnselected_999999.png', sizingMethod='crop');
}
</style>

<!-- END COMPONENT Rotating Content - Taco HTML Edit -->

<!-- BEGIN COMPONENT Rotating Content - Taco HTML Edit -->
<style type="text/css">
#myRotatingContent.tswRotatingContent { width: 768px; }
#myRotatingContent .tswRotatingContentHeader { width: 768px; }
#myRotatingContent .tswRotatingContentTitle 
{
}
#myRotatingContent .tswRotatingContentBody
{
background-color: #ffffff;
border-color: #cccccc;
width: 768px;
height: 1280px;
}
#myRotatingContent .tswRotatingContentBody div.tswRotatingContentPanelVisible,
#myRotatingContent .tswRotatingContentBody div.tswRotatingContentPanelHidden,
#myRotatingContent .tswRotatingContentBody div.tswRotatingContentPanelFadingOut
{
background-color: #ffffff;
width: 768px;
height: 1280px;
padding: 0px;
}
</style>

<!-- END COMPONENT Rotating Content - Taco HTML Edit -->
<script type="text/javascript" src="TacoComponents/TSWVideoPlayer.js"></script>
</head>


<body>

<!-- BEGIN COMPONENT Accordion - Taco HTML Edit -->
<div id="myAccordion" class="tswAccordion">
<div class="tswAccordionInactiveSection">
<div class="tswAccordionHeader">PixelForce Overview</div>
<div class="tswAccordionBody">
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">Are you irritated by a black dot on your screen that won't go away? Looking at a beautiful picture but one pixel is always stuck in a different color? You are suffering from Dead Pixels / Stuck Pixels.   
</span></p>
<p><center><img style="border: 5px solid #000000;" src="images/DeadPixel.jpg" width="548" height="300" /></center></p>
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">PixelForce is designed to help you identify whether your screen have any Dead Pixels / Stuck Pixels. PixelForce also performs a procedure to try and unstuck a Stuck Pixel. To begin, select one of the tests below.
</span></p>
<p><b><span style="font-family: Arial; font-size: 30.0px; color: #FFFFFF;">WARNING:
</span></b></p>
<p><b><span style="font-family: Arial; font-size: 30.0px; color: #000000;">WARNING:
</span></b></p>
<p><span style="font-family: Arial; font-size: 20.0px; color: #000000;">PixelForce uses rapidly flashing images to force stuck pixels to become unstuck. These images might trigger epileptic symptoms in some users. Please do not stare at the screen while PixelForce is in operation to unstuck pixels.
</span></p>
<p><span style="font-family: Arial; font-size: 20.0px; color: #000000;">If you are unsure on whether rapidly flashing images have any effect on you, please refrain from using this software. Otacon is not responsible for any unfortunate incidents that might happen from the usage of this software.
</span></p>
</div>
</div>
<div class="tswAccordionInactiveSection">
<div class="tswAccordionHeader">Dead Pixel Test</div>
<div class="tswAccordionBody">
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">Dead Pixels are pixels that are defected and will never show light. These Dead Pixels will show up as black dots on the screen as can be identified by looking at a completely white screen and identifying any black dots.</span></p>
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">The image below shows a close-up of an LCD screen, showing a dead green subpixel as a black rectangle.</span></p>
<p><center><img style="border: 5px solid #000000;" src="images/DeadPixel2.jpg" width="548" height="400" /></center></p>
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">To determine whether your screen has any Dead Pixels, please press the 'Begin Test' button below. </span>
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">Swipe your screen back to return to the program.</span></p>
<button style="background:url('images/TestWhite.png');width:142px;height:80px" onclick=window.location="images/White.jpg"></button>
<button style="background:url('images/TestRed.png');width:142px;height:80px" onclick=window.location="images/Red.jpg"></button>
<button style="background:url('images/TestYellow.png');width:142px;height:80px" onclick=window.location="images/Yellow.jpg"></button>
<button style="background:url('images/TestBlue.png');width:142px;height:80px" onclick=window.location="images/Blue.jpg"></button>
<button style="background:url('images/TestGreen.png');width:142px;height:80px" onclick=window.location="images/Green.jpg"></button>

</div>
</div>
<div class="tswAccordionInactiveSection">
<div class="tswAccordionHeader">Stuck Pixel Test</div>
<div class="tswAccordionBody">
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">Stuck pixels, unlike dead pixels, have been reported by LCD screen owners to disappear, and there are several popular methods purported to fix them, one of it which is cycling the color value of the stuck pixel rapidly. </span></p>
<p><center><img style="border: 5px solid #000000;" src="images/StuckPixel.jpg" width="548" height="350" /></center></p>
<p><span style="font-family: Arial; font-size: 25.0px; color: #000000;">To attempt to fix Stuck Pixels, please press the 'Begin Test' button below. The test takes only a few minutes. Please tilt your device to landscape orientation for best effect.</span></p>

<p><b><span style="font-family: Arial; font-size: 25.0px; color: #000000;">WARNING:
</span></b></p>
<p><span style="font-family: Arial; font-size: 20.0px; color: #000000;">PixelForce uses rapidly flashing images to force stuck pixels to become unstuck. These images might trigger epileptic symptoms in some users. Please do not stare at the screen while PixelForce is in operation to unstuck pixels.
</span></p>
<p><center><button style="background:url('images/BeginTest.png');width:142px;height:80px" onclick=window.location="PixelFixer2.mp4"></button></center></p>
</div>
</div>
</div>

<script type="text/javascript">
var accordion = tswAccordionGetForId('myAccordion');
</script>

<!-- END COMPONENT Accordion - Taco HTML Edit -->

</body>
</html>

No comments:

Post a Comment