Pages: 1 2
Topic closed
Yeah, I was inspired by Jens. You import the libraries, provide a canvas with id "world" and an interface file that contains your interface. I have most morphs like button, view, scroll bar (still glitchy), editable text box, check box, loading bar, progress indicator, etc.
So here's the thing: I need a name for it. But the strange thing is that due to some unnamed reason, I would prefer it to begin with W and contain X. And if I Google the name, I shouldn't get any results, please. Thanks!
Offline
Workmorphix?
Offline
Jens wrote:
WuniX
WindoX
WacOSX
![]()
Where did I hear those names before...
Offline
LS97 wrote:
Jens wrote:
WuniX
WindoX
WacOSX
![]()
Where did I hear those names before...
That's obvious -.-
*facepalm*
Offline
Kode
Worldz
Offline
WindowsExplorer wrote:
LS97 wrote:
Jens wrote:
WuniX
WindoX
WacOSX
![]()
Where did I hear those names before...
That's obvious -.-
*facepalm*
Sarcasm isn't your best subject, is it?
Offline
LS97 wrote:
WindowsExplorer wrote:
LS97 wrote:
Where did I hear those names before...
That's obvious -.-
*facepalm*Sarcasm isn't your best subject, is it?
![]()
lol
Offline
LS97 wrote:
WindowsExplorer wrote:
LS97 wrote:
Where did I hear those names before...That's obvious -.-
*facepalm*Sarcasm isn't your best subject, is it?
![]()
Sarcasm isn't your best subject, is it?
Offline
Hardmath123 wrote:
Yeah, I was inspired by Jens. You import the libraries, provide a canvas with id "world" and an interface file that contains your interface. I have most morphs like button, view, scroll bar (still glitchy), editable text box, check box, loading bar, progress indicator, etc.
So here's the thing: I need a name for it. But the strange thing is that due to some unnamed reason, I would prefer it to begin with W and contain X. And if I Google the name, I shouldn't get any results, please. Thanks!
Jorphic, JSqueak, JSmalltalk


Offline
JSTalk (JSmallTalk)
Post errors
The following errors need to be corrected before the message can be posted:
At least 60 seconds have to pass between posts. Please wait a little while and try posting again.
Offline
Mcsugarface wrote:
JSTalk (JSmallTalk)
Post errors
The following errors need to be corrected before the message can be posted:
At least 60 seconds have to pass between posts. Please wait a little while and try posting again.
But that wouldn't be catchy, because who wants to be stalked?
Smallscript
Javatalk
Smavascript


Offline
Any thoughts about the actual project?
PS I like many of cocolover's suggestions, now I'm spoilt for choice... Thanks, everyone.
Offline
Have custom interface skins.
Offline
May I have a link to the finished product? (assuming it's close enough to being done that it doesn't require to be hacked in order to get the Hello GUI to print on the screen, lol)
Last edited by bobbybee (2011-11-18 18:27:06)
Offline
Here's the Interface.js file (you need 4 files: main.html, the two .js libraries to be named later, and Interface.js) for a print Hello GUI tool. Well, at least a super-formal one. document.write might be more efficient for obvious reasons.
function initiateAll()
{
window.label = new WXcustomDrawMorph(function()
{
world.fillStyle="rgba(0,0,0,1)";
world.font="Monaco 15pt";
world.fillText("Hello, GUI",210,135);
});
window.view = new WXview([label], "rgba(200,200,100,1)", 600, 800, 0, 0);
var l = new WXanimationLoop(function() {renderIT()}, 1);
}
function renderIT()
{
view.render();
}Offline
It looks nice for that simple one, as it is, but I might suggest making it a bit more state-based, because the function WXcustomDrawMorph's name suggests that it is done all in one function call, but you have to call the render function on the view in order for it to actually show up on the screen.
Offline
bobbybee wrote:
It looks nice for that simple one, as it is, but I might suggest making it a bit more state-based, because the function WXcustomDrawMorph's name suggests that it is done all in one function call, but you have to call the render function on the view in order for it to actually show up on the screen.
WXcustomDrawMorph comes with a render function (called by the WXview), but many features need a parent view, such as changing of the mouse cursor. Views can also be nested. The idea is you create a worldView, broken into panelViews (coarse UI, eg sprite corral in bottom right corner in Scratch), broken into frameViews (fine UI adjustment, eg each sprite well), which have morphs (image of sprite, label with name). I've got lots of morphs like text box and button.
Offline
Oh, I see. You just did it that way for simplicity, I'm guessing.
Offline
Yes. I wanted a nice, organized way to make applications.
EDIT: I'll paste the finished libraries here for you. All I have discussed so far works. It just needs a name.
Last edited by Hardmath123 (2011-11-20 09:28:21)
Offline
Okay, then.
Offline
How about Morsel?
Offline
I'm calling it WiXard. Here are the four files:
<!-- myWixardApp.html-->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="WiXard.js"></script>
<script type="text/javascript" src="WiXard-Morphs.js"></script>
<script type="text/javascript" src="Interface.js"></script>
</head>
<body style="height:100%; overflow: hidden; background-color:grey;">
<canvas id="world" height=600 width=800 style="position:absolute; top:0; left:0; cursor:auto;">Old browser.</canvas>
</body>
</html>// Interface.js
function initiateAll()
{
// Interface initialization
// Initiate all interfaces, non-atomic loops, and tasks
}// WiXard.js
/*
** SYNTAX TOOLKIT **
* TOOLS:
initiateAllLoops() : called when the window loads
WXanimationLoop(codeToEvaluate, interval) : creates a nonatomic loop
*/
window.onload=function()
{
window.world=document.getElementById("world").getContext("2d");
_resizeWorldToWindow();
initiateAll();
_resizeWorldToWindow();
}
window.onbeforeunload = function (evt)
{
var e = evt || window.event,
_msg = "...";
if (e)
{
e.returnValue = _msg;
}
return _msg;
};
function WXanimationLoop(codeToEvaluate, interval)
{
var loopedCodeToEvaluate = function()
{
codeToEvaluate();
var delay=setTimeout(loopedCodeToEvaluate, interval);
}
loopedCodeToEvaluate();
}
window.onresize=function(){_resizeWorldToWindow()}
function _resizeWorldToWindow()
{
var _windowDimensions = [document.documentElement.clientWidth, document.documentElement.clientHeight];
world.canvas.width = _windowDimensions[0];
world.canvas.height = _windowDimensions[1];
}
/*
** MOUSE TOOLKIT **
* TOOLS:
mouse.x : x position
mouse.y : y position
mouse.isInBounds(x,y,h,w) : is the mouse in the specified rectangle?
mouse.isDown : is the mouse down?
mouse.distTo(x,y) : distance to specified point
mouse.isInCircle(x,y,r) : is the mouse in the specified circle?
*/
var mouse=new mouseObj();
function mouseObj()
{
this.x=0;
this.y=0;
this.isInBounds=function(boundX, boundY, boundWidth, boundHeight)
{
return (this.x>=boundX && this.x<=boundX+boundWidth && this.y>=boundY && this.y<=boundY+boundHeight);
}
this.isInCircle=function(xpos, ypos, radius)
{
return (this.distTo(xpos, ypos)<=radius);
}
this.isDown=false;
this.distTo=function(xpos,ypos)
{
return (Math.sqrt(Math.pow(this.x-xpos,2)+Math.pow(this.y-ypos,2)))
}
}
window.onmousemove=_handleMouseMoveEvent;
function _handleMouseMoveEvent(e)
{
if (e)
{
mouse.x = e.pageX;
mouse.y = e.pageY;
}
else
{
mouse.x = window.event.pageX;
mouse.y = window.event.pageY;
}
}
window.onmousedown=function()
{
mouse.isDown=true;
}
window.onmouseup=function()
{
mouse.isDown=false;
}
/*
** KEY TOOLKIT **
* TOOLS:
keyboard.keyIsDown(keyCode) : Is the specified key pressed?
*/
var keyboard=new keyboardObj()
function keyboardObj()
{
this.keyChain=new Array();
this.isKeyDown=function(keycode)
{
if (this.keyChain[keycode]==true)
{
return true;
}
else
{
return false;
}
}
}
window.onkeydown=handleKeyDownEvent;
function handleKeyDownEvent(e)
{
var crosskeycode;
if(e)
{
crosskeycode=e.keyCode;
}
else
{
crosskeycode=window.event.keyCode;
}
keyboard.keyChain[crosskeycode]=true;
}
window.onkeyup=handleKeyUpEvent;
function handleKeyUpEvent(e)
{
var crosskeycode;
if(e)
{
crosskeycode=e.keyCode;
}
else
{
crosskeycode=window.event.keyCode;
}
keyboard.keyChain[crosskeycode]=false;
}
/*
** COOKIE TOOLKIT **
* TOOLS:
createCookie(name, value, days) : Create/set a cookie
readCookie(name) : Read a cookie
eraseCookie(name) : Erase a cookie
*/
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}// WiXard-morphs.js
/*
** CANVAS TOOLKIT **
* TOOLS:
WXbuttonMorph(xpos, ypos, width, text, onclick) : create a button
WXtextBoxMorph(xpos, ypos, hint, isNumerical) : create a text box
WXcheckBoxMorph(xpos, ypos) : creates a checkbox
WXview(objects, bgcolor, height, width, xpos, ypos) : creates a view
WXloadIndicatorMorph(xpos, ypos) : creates a load indicator
WXprogressIndicatorMorph(xpos, ypos) : creates a load indicator
WXcustomDrawMorph(instructions) : allows custom drawing
*/
function WXbuttonMorph(xpos, ypos, width, text, cap, onclick)
{
this.xpos=xpos;
this.ypos=ypos;
this.isVisible=true;
this.width=width;
this.text=text;
this.onClick=onclick;
this.isReadyToDoOnClick=false;
this.toDoAfterRenderInView=function() {};
this.cursor="default";
this.cap=cap;
this.render=function()
{
if (mouse.isInBounds(this.xpos,this.ypos,this.width,20))
{
this.cursor="pointer";
if(mouse.isDown)
{
this.isReadyToDoOnClick=true;
darkness=0.75;
}
else
{
darkness=0.5;
}
if(!mouse.isDown && this.isReadyToDoOnClick)
{
this.isReadyToDoOnClick=false;
this.toDoAfterRenderInView=this.onClick;
}
}
else
{
this.cursor="default";
var darkness=0.25;
}
var gradient = world.createLinearGradient(this.xpos,this.ypos,this.xpos,this.ypos+20);
gradient.addColorStop(0.0, "rgba(0,0,0,"+darkness+")");
gradient.addColorStop(1.0, "rgba(0,0,0,"+(darkness+0.25)+")");
world.fillStyle=gradient;
world.strokeStyle="rgba(0,0,0,1)";
world.beginPath();
world.moveTo(this.xpos, this.ypos);
if (this.cap[1])
{
world.arc(this.xpos+5,this.ypos+5,5,1*Math.PI,1.5*Math.PI,false);
}
//world.lineTo(this.xpos+this.width-5, this.ypos);
if(this.cap[2])
{
world.arc(this.xpos+this.width-5,this.ypos+5,5,1.5*Math.PI,0*Math.PI,false);
}
else
{
world.lineTo(this.xpos+this.width, this.ypos);
}
//world.lineTo(this.xpos+this.width, this.ypos+15);
if(this.cap[2])
{
world.arc(this.xpos+this.width-5,this.ypos+15,5,0*Math.PI,0.5*Math.PI,false);
}
else
{
world.lineTo(this.xpos+this.width, this.ypos+20);
}
//world.lineTo(this.xpos+5, this.ypos+20);
if(this.cap[1])
{
world.arc(this.xpos+5,this.ypos+15,5,0.5*Math.PI,1*Math.PI,false);
}
else
{
world.lineTo(this.xpos, this.ypos+20);
}
world.closePath();
world.fill();
world.stroke();
world.fillStyle="rgba(0,0,0,1)";
world.fillText(this.text,this.xpos+5,this.ypos+15);
}
}
function WXtextBoxMorph(xpos, ypos, hint, isNumerical)
{
this.xpos=xpos;
this.ypos=ypos;
this.isVisible=true;
this.text="Click to edit...";
this.isReadyToDoOnClick=false;
this.hint=hint;
this.isNumerical=isNumerical;
this.toDoAfterRenderInView=function() {};
this.cursor="default";
this.render=function()
{
if (mouse.isInBounds(this.xpos,this.ypos,100,15))
{
this.cursor="text";
world.fillStyle="rgba(0,0,0,0.25)";
if(mouse.isDown)
{
this.isReadyToDoOnClick=true;
world.fillStyle="rgba(0,0,0,0.75)";
}
else
{
world.fillStyle="rgba(0,0,0,0.5)";
}
world.fillRect(this.xpos,this.ypos,100,20);
world.fillStyle="rgba(0,0,0,1)";
world.fillText("Edit...",this.xpos+5,this.ypos+15);
if(!mouse.isDown && this.isReadyToDoOnClick)
{
this.isReadyToDoOnClick=false;
this.toDoAfterRenderInView=function()
{
if (this.isNumerical)
{
this.text=_numericPrompt(this.hint, true);
}
else
{
this.text=_numericPrompt(this.hint, false);
}
}
}
}
else
{
this.cursor="default";
world.fillStyle="rgba(255,255,255,1)";
world.fillRect(this.xpos,this.ypos,100,20);
if(this.text=="Click to edit...")
{
world.fillStyle="rgba(0,0,0,0.5)";
}
else
{
world.fillStyle="rgba(0,0,0,1)";
}
world.fillText(_appendStringToChars(this.text, 15),this.xpos+5,this.ypos+15);
this.cursor="default";
}
world.strokeStyle="rgba(0,0,0,1)";
world.lineWidth=1;
world.strokeRect(this.xpos,this.ypos,100,20);
}
}
function _appendStringToChars(string, chars)
{
if (string.length<=chars) {return string;} else {return string.substr(0,15)+"...";};
}
function _numericPrompt(hint, isNumeric)
{
if (isNumeric)
{
var promptResult = prompt("Enter a number:", hint);
}
{
var promptResult = prompt("Enter some text:", hint);
}
if (!isNumeric)
{
if (promptResult==null)
{
return _numericPrompt(hint, false);
}
else
{
return promptResult;
}
}
else
{
if (isNaN(promptResult) || promptResult==null)
{
return _numericPrompt(hint, true);
}
else
{
return promptResult;
}
}
}
function WXcheckBoxMorph(xpos, ypos)
{
this.xpos=xpos;
this.ypos=ypos;
this.isVisible=true;
this.truth=false;
this.isReadyToDoOnClick=false;
this.toDoAfterRenderInView=function() {};
this.cursor="default";
this.render=function()
{
world.fillStyle="rgba(0,0,0,0.25)";
world.beginPath()
world.arc(this.xpos, this.ypos, 7, 0, 2*Math.PI, false);
world.fill();
if(mouse.isInCircle(this.xpos, this.ypos, 7))
{
if(mouse.isDown)
{
this.isReadyToDoOnClick=true;
world.fillStyle="rgba(0,0,0,0.75)";
}
else
{
world.fillStyle="rgba(0,0,0,0.5)";
}
if(!mouse.isDown && this.isReadyToDoOnClick)
{
this.isReadyToDoOnClick=false;
this.toDoAfterRenderInView=function()
{
this.truth=!this.truth;
}
}
}
else
{
world.fillStyle="rgba(0,0,0,0.25)";
}
world.beginPath()
world.arc(this.xpos, this.ypos, 5, 0, 2*Math.PI, false);
world.fill();
if(!this.truth)
{
world.beginPath();
world.lineWidth=3;
world.lineCap="round";
world.strokeStyle = "rgba(0,0,0,0.25)";
world.moveTo(this.xpos-5, this.ypos-5);
world.lineTo(this.xpos+5, this.ypos+5);
world.moveTo(this.xpos-5, this.ypos+5);
world.lineTo(this.xpos+5, this.ypos-5);
world.stroke();
}
else
{
world.beginPath();
world.lineWidth=3;
world.lineCap="round";
world.strokeStyle = "rgba(0,0,0,0.25)";
world.moveTo(this.xpos-7, this.ypos-2);
world.lineTo(this.xpos, this.ypos+5);
world.lineTo(this.xpos+10, this.ypos-7);
world.stroke();
}
}
}
function WXloadIndicatorMorph(xpos, ypos)
{
this.xpos=xpos;
this.ypos=ypos;
this.isVisible=true;
this.toDoAfterRenderInView=function() {};
this.cursor="default";
this.stage=0;
this.isAnimated=true;
this.render=function()
{
if (this.isAnimated)
{
this.stage = (this.stage+1/12)%1;
world.strokeStyle="rgba(0,0,0,0.5)";
for(i=0; i<=15; i++)
{
world.beginPath();
world.arc(this.xpos, this.ypos, 7, 2*Math.PI*(this.stage+(i/12)), 2*Math.PI*(this.stage+(i/12))+0.1, false);
world.arc(this.xpos, this.ypos, 4, 2*Math.PI*(this.stage+(i/12)), 2*Math.PI*(this.stage+(i/12))+0.1, false);
world.stroke();
}
if (mouse.isInCircle(this.xpos, this.ypos, 7))
{
this.cursor="wait";
}
else
{
this.cursor="default";
}
}
}
}
function WXprogressIndicatorMorph(xpos, ypos, width)
{
this.xpos=xpos;
this.ypos=ypos;
this.isVisible=true;
this.width=width;
this.toDoAfterRenderInView=function() {};
this.cursor="default";
this.progress=0;
this.render=function()
{
world.strokeStyle="rgba(0,0,0,0.5)";
world.strokeRect(this.xpos, this.ypos, this.width, 20);
var gradient = world.createLinearGradient(this.xpos, this.ypos, this.width+this.xpos, this.ypos+20);
gradient.addColorStop(0, "rgba(0,0,0,0.25)");
gradient.addColorStop(1, "rgba(0,0,0,0.5)");
world.fillStyle=gradient;
world.fillRect(this.xpos, this.ypos, this.width*this.progress, 20);
}
}
function WXcustomDrawMorph(instructions)
{
this.render=instructions;
this.toDoAfterRenderInView=function(){};
this.cursor="default";
this.isVisible=true;
}
function WXview(objects, bgcol, height, width, xpos, ypos)
{
this.objects=objects;
this.height=height;
this.width=width;
this.bgcol=bgcol;
this.xpos=xpos;
this.ypos=ypos;
this.render=function()
{
world.clearRect(this.xpos,this.ypos,this.width,this.height);
world.shadowOffsetX = 5;
world.shadowOffsetY = 5;
world.shadowBlur = 4;
world.shadowColor = "rgba(0, 0, 0, 0.5)";
world.fillStyle=this.bgcol;
world.fillRect(this.xpos,this.ypos,this.width,this.height);
world.shadowOffsetX = 0;
world.shadowOffsetY = 0;
world.shadowBlur = 0;
world.save();
world.beginPath();
world.moveTo(this.xpos, this.ypos);
world.lineTo(this.xpos+this.width, this.ypos);
world.lineTo(this.xpos+this.width, this.ypos+this.height);
world.lineTo(this.xpos, this.ypos+this.height);
world.clip();
for(obj=0; obj<=this.objects.length-1; obj++)
{
if(this.objects[obj].isVisible)
{
this.objects[obj].render();
}
}
for(obj=0; obj<=this.objects.length-1; obj++)
{
this.objects[obj].toDoAfterRenderInView();
this.objects[obj].toDoAfterRenderInView=function(){};
}
world.canvas.style.cursor="default";
for(obj=0; obj<=this.objects.length-1; obj++)
{
if (this.objects[obj].cursor != "default")
{
world.canvas.style.cursor=this.objects[obj].cursor;
}
}
world.restore();
}
}Please don't host them.
Offline
Topic closed
Pages: 1 2