Skip to content

Instantly share code, notes, and snippets.

@jonasdeherdt

jonasdeherdt/gist:788ad96df59049ae81a6

Created June 4, 2014 12:01
Show Gist options
  • Save jonasdeherdt/788ad96df59049ae81a6 to your computer and use it in GitHub Desktop.
Save jonasdeherdt/788ad96df59049ae81a6 to your computer and use it in GitHub Desktop.
Download ZIP
Kinetic js app
Raw
gistfile1.js
var sw = 1680;
var sh = 1050;
function init() {
mainContainer = document.getElementById('container');
slidesContainer = document.getElementById('slideshowcontainer');
var loader = document.getElementById('preloader');
if (loader) {
var pr = ''
+ '<p>Loading I_Site</p>'
+ '<span class="progress-animation">&emsp;</span>';
$('#preloader').html(pr);
}
var stage;
var mainLayer;
var interfaceLayer;
var dashboardLayer;
var mainFrame;
var ipadFrame;
var ipadInterface;
var ipadScreenRect;
var currentitems = new Array();
var interfaceButton;
var ipadHeader;
var ipadCaption;
var interfaceMenu;
var submenu;
var assetDir = 'assets/front/';
var videoDir = 'assets/front/video/';
var animationLayer;
var floatIngButtons;
var checkBoxButtonState;
var selectButton;
var language;
var breadcrumb;
var overlay;
var slider;
var video;
var videow = 1600;
var videoh = 880;
var ipadwidth = 790;
var ipadheight = 590;
var ipadVideoContainer;
var ipadVideow;
var ipadVideoh;
var ipadVideoy;
var dashboard;
var game;
var xoffset = 40;
var yoffset = 50;
var standby_timeout = 60;
var count;
var mainContainer;
var slidesContainer;
var listsContainer;
var environmentList;
var animationLayerBlurTween;
var interFaceImages;
var jsonContents;
var interfaceMenuExpanded;
var interfaceMenuCollapsed;
var translations;
var selectedItems = {};
var imgSources = {
Main : 'interface/main_button_bg.png',
Background : 'interface/main_dashboard_frame.png',
IpadFrame : 'interface/ipad_bg.png',
SplashScreen : 'content/floor.png',
StartBtn : 'interface/start_btn.png',
ActiveButtonCenter : 'interface/active_button_center.png',
ActiveButtonLeft : 'interface/active_button_left.png',
ActiveButtonRight : 'interface/active_button_right.png',
IdleButtonCenter : 'interface/idle_button_center.png',
IdleButtonLeft : 'interface/idle_button_left.png',
IdleButtonRight : 'interface/idle_button_right.png',
BigCircleArrows : 'interface/big_circular_arrows.png',
con_ss : 'interface/contiuum_ss.png',
bg_ss : 'interface/wheel_ss.png',
play_btn : 'interface/play_btn.png',
close_btn : 'interface/close_button.png',
CheckBoxChecker : 'interface/checkbox_checked.png',
CheckBoxUnchecked : 'interface/check_box_unchecked_bg.png',
StarIcon : 'interface/star_icn.png',
smallCheckBoxChecker : 'interface/checkbox_mini_checked.png',
smallCheckBoxUnchecked : 'interface/checkbox_mini.png',
CheckBoxBtnChecked : 'interface/menu_select_option_bg_checked.png',
CheckBoxBtnUnchecked : 'interface/menu_select_option_bg_unchecked.png',
ButtonBackground : 'interface/general_nav_btn_bg.png',
MenuHeadIcon : 'interface/menu_detail_head_icon.png',
FloatingIcon : 'interface/floating_btn_icn.png',
FloatingShine : 'interface/floating_btn_shine.png',
ListItemCircle : 'interface/list_item_circle.png',
ListBackground : 'interface/businessman.png',
CheckBoxChecked : 'interface/checkbox_checked.png',
InterfaceHeadBg : 'interface/startInterfaceHead_bg.png',
I_Site_logo : 'interface/isite_logo.png',
KeypadButton : 'interface/keypad_btn.png',
KeypadBackground : 'interface/keypad_bg.png',
GameboyBackground : 'interface/gameboy_bg_2.png',
NegativeButton : 'interface/r_btn.png',
PositiveButton : 'interface/g_btn.png',
Info_arrow : 'interface/game_info_arr.png',
Contact_alert : 'interface/contact_alert.png',
Contract_bg : 'interface/contract_pages.png',
Contract_pijl : 'interface/contract_w.png',
Hours_bg : 'interface/hours_bg.png',
Hours_bg_mask : 'interface/hours_msk.png'
};
var jsonSources = {
scenarios : assetDir + 'js/content/scenarios.json',
regions : assetDir + 'js/content/regions.json',
settings : assetDir + 'js/content/settings.json',
translations : assetDir + 'js/content/translations.json'
};
var ApplicationState = {};
var interfaceMenuExpandedState = false;
var iPadMenuExpandedState = false;
var dashboardExpandedState = false;
var subMenuExpandedState = false;
var animationLayerIsBlurry = true;
loadImages(imgSources, setImgsLoadState);
loadContent(jsonSources, setContsLoadState);
//setTimeout(loadContent, 10000, jsonSources, setContsLoadState);
var imgsLoaded = false;
var contsLoaded = false;
/*
* Load interface images, set flag when loading complete
* if all is loaded continue to load app
*
* @required sources
*/
function setImgsLoadState(images) {
interFaceImages = images;
imgsLoaded = true;
if (imgsLoaded && contsLoaded)
getLoadedState();
}
/*
* Load rescource json files , set flag when loading complete
* if all is loaded continue to load app
*
* @required sources
* @todo load one by one, or set content based index in return obj
*/
function setContsLoadState(contents) {
translations = contents.translations;
jsonContents = contents;
contsLoaded = true;
if (imgsLoaded && contsLoaded)
getLoadedState();
}
/*
* Prepare page
* If localstorage is found load previous state
*
* @todo check if canvas is suported / optionally show alternative content
*/
function getLoadedState() {
var settings = jsonContents.settings.DEFAULT;
var t = settings.standby_timeout;
if (t) {
standby_timeout = t;
count = t;
}
if (localStorage.getItem('didstart'))
ApplicationState['didstart'] = JSON.parse(localStorage.getItem('didstart'));
if (language == null) {
if (localStorage.getItem('language'))
ApplicationState['language'] = JSON.parse(localStorage.getItem('language'));
else
ApplicationState['language'] = settings.lang;
language = ApplicationState['language'];
} else
ApplicationState['language'] = language;
getStage();
if (ApplicationState['didstart']) {
for (var key in localStorage) {
ApplicationState[key] = JSON.parse(localStorage.getItem(key));
}
if (ApplicationState['selectedItems'])
selectedItems = ApplicationState['selectedItems'];
updateBreadcrumb();
switch(ApplicationState['step']) {
case 'FloatingButtons':
{
setFloatingButtons(jsonContents['regions']);
}
break;
case 'RegionSelection':
{
regionClickHandler(ApplicationState['region']);
}
break;
case 'IpadInterface':
case 'IpadDetail':
{
getIpadInterface();
updateIpadItems();
}
break;
case 'PersonalInterface':
{
ApplicationState['step'] = 'IpadInterface';
getIpadInterface();
updateIpadItems();
}
break;
case 'DashboardInterface':
{
getDashboard();
}
break;
case 'ListOverlay':
{
if (ApplicationState['resultState'])
ApplicationState['resultState'] = 'interpretation';
getListOverlay();
}
break;
case 'FinishOverlay':
{
getListOverlay();
}
break;
case 'InterpretationInterface':
{
getIpadInterface();
}
break;
case 'ContinuousAnimation':
{
getContinuousAnimation();
}
break;
}
} else {
ApplicationState['step'] = 'Welcome';
setLoadedState(ApplicationState);
}
}
/*
* Loop through states and save to localstorage
*
* @required states to save
*/
function setLoadedState(states) {
for (var key in states) {
var dr = states[key];
localStorage.setItem(key, JSON.stringify(dr));
}
updateBreadcrumb();
language = ApplicationState['language'];
}
/*
* Loop through localstorage and deletes all
* Destroy main canvas and re-initialize
*/
function resetApplication() {
// Empty stored items
ApplicationState = {};
selectedItems = {};
currentitems = [];
for (var key in localStorage) {
localStorage.removeItem(key);
}
reLoadApplication();
}
/*
* Set new language
* Destroy main canvas and re-initialize
*/
function reLoadApplication() {
iPadMenuExpandedState = false;
ipadInterface = null;
listsContainer = null;
slider = null;
video = $('#video-container' + ' > video').get(0);
if (video)
video.pause();
stage.removeChildren();
stage.destroy();
stage = null;
//window.location.reload();
getLoadedState();
}
/*
* Find translated node in current language
*
* @required node id
*/
function getTranslation(id) {
var langs = translations[id];
var tr;
if (langs) {
tr = langs[ApplicationState.language];
if (tr == undefined || tr == '')
tr = langs['en'];
if (tr)
return tr;
} else
return id;
}
/*
* Create required Kinetic layers
* Set default background / frame and buttons
* Set startbutton if app did not already start
*
*/
function getStage() {
//resetApplication();
$(mainContainer).empty();
stage = new Kinetic.Stage({
container : 'container',
width : sw,
height : sh
});
mainLayer = new Kinetic.Layer();
stage.add(mainLayer);
overlay = new Kinetic.Layer();
stage.add(overlay);
interfaceLayer = new Kinetic.Group();
mainLayer.add(interfaceLayer);
interfaceMenuCollapsed = stage.getHeight();
getAnimationLayer(40, 50, 1600, 880, interFaceImages.SplashScreen);
dashboard = new Kinetic.Group();
mainLayer.add(dashboard);
getInterFace();
getBackground(stage.getWidth(), stage.getHeight(), interFaceImages.Background);
interfaceButton.setZIndex(5);
interfaceLayer.setZIndex(3);
if ((!ApplicationState['didstart'] ) || (ApplicationState['didstart'] == 'null' )) {
getStartInterface();
} else {
animationLayerBlurTween.play();
}
mainLayer.on('mousedown touchstart tap', function() {
resetTimeOut();
});
getTimeOut();
mainLayer.draw();
}
function getTimeOut() {
if (count == 0 && ApplicationState['didstart']) {
/*glass = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, 1680, 1050, 0);
canvas.fillStroke(this);
},
fill : '#fff',
opacity : .4
});
overlay.add(glass);
var labelContainer = new Kinetic.Group({});
var box = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-20, -20, 240, 210, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, 0, 200, 160, 10);
canvas.fillStroke(this);
context.roundRect(0, 0, 200, 160, 10);
canvas.fillStroke(this);
},
fill : '#fff',
shadowColor : 'black',
shadowBlur : 30,
shadowOpacity : 0.2
});
var resetTxt = new Kinetic.Text({
x : 15,
y : 20,
align : 'center',
text : 'RESET\nAPPLICATION',
fontSize : 28,
fontFamily : font_light,
fill : '#444'
});
var continueTxt = new Kinetic.Text({
x : 31,
y : 110,
text : 'CONTINUE',
fontSize : 28,
fontFamily : font_light,
fill : '#B0001A'
});
var underline = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.rect(10, 96, 180, 1);
context.fillStyle = '#bbb';
context.fill();
context.beginPath();
context.rect(10, 95, 180, 1);
context.fillStyle = '#fff';
context.fill();
}
});
labelContainer.add(box);
labelContainer.add(underline);
labelContainer.add(resetTxt);
labelContainer.add(continueTxt);
//labelContainer.setX();
//labelContainer.setY();
labelContainer.move(740 - labelContainer.getWidth(), 445 - labelContainer.getHeight());
glass.on('mousedown touchstart tap', function() {
resetTimeOut();
});
continueTxt.on('mousedown touchstart tap', function() {
resetTimeOut();
});
resetTxt.on('mousedown touchstart tap', function() {
resetApplication();
});
overlay.add(labelContainer);
overlay.draw();
*/
getStartInterface();
} else {
count--;
setTimeout(getTimeOut, 1000);
}
}
function resetTimeOut() {
if (count == 0) {
overlay.removeChildren();
overlay.draw();
setTimeout(getTimeOut, 1000);
}
count = standby_timeout;
}
/*
* Generate main interface button
* Generate interface menu
*/
function getInterFace() {
interfaceButton = new Kinetic.Image({
x : (stage.getWidth() / 2 ) - 44,
y : stage.getHeight() - 100,
image : interFaceImages.Main,
width : 87,
height : 88,
listening : true
});
interfaceButton.on('mousedown touchstart tap', function() {
toggleInterFaceButton();
});
mainLayer.add(interfaceButton);
}
/*
* Calls hide or show on current menu
*/
function toggleInterFaceButton() {
if (subMenuExpandedState) {
toggleInterface(submenu, subMenuExpandedState);
subMenuExpandedState = !subMenuExpandedState;
}
if (interfaceMenu)
interfaceMenu.destroy();
interfaceMenu = setInterFace(jsonContents['settings'].DEFAULT.menu);
mainLayer.add(interfaceMenu);
interfaceMenu.moveToBottom();
interfaceMenu.moveUp();
toggleInterface(interfaceMenu, interfaceMenuExpandedState);
interfaceMenuExpandedState = !interfaceMenuExpandedState;
}
/*
* Alter css property on main container
* .cursor-pointer class found in main.css
*
* @required pointer flag
* @todo Set as global function -> duplicate found in main.js
* @todo make dynamic
* -> remove previously added classes
* -> add class set in params eg. 'cursor-pointer', 'cursor-crosshair'
* -> store added class
*/
function setCanvasCursorPointer(pointer) {
if (pointer)
mainContainer.className = mainContainer.className + " cursor-pointer";
else {
mainContainer.className = mainContainer.className.replace(" cursor-pointer", "");
}
}
/*
* Hide or show current menu
*
* @required target menu
* @required hide/show flag
*
* @todo set index ABOVE ipad interface
*/
function toggleInterface(target, targetWillCollapse, endposition) {
if (targetWillCollapse) {
// set layer behind evrything exept background
target.moveToBottom();
target.moveUp();
endpos = interfaceMenuCollapsed;
} else
endpos = interfaceMenuExpanded;
tween = new Kinetic.Tween({
node : target,
duration : .1,
y : endpos,
onFinish : function() {
if (!targetWillCollapse)
target.moveToTop();
}
});
tween.play();
}
/*
* NOT WORKING :)
*/
function toggleIpad(target) {
interfaceLayer.moveToBottom();
interfaceLayer.moveUp();
if (iPadMenuExpandedState)
endpos = 1020;
else
endpos = 83;
tween = new Kinetic.Tween({
node : target,
duration : 1,
y : endpos,
onFinish : function() {
if (iPadMenuExpandedState) {
interfaceLayer.moveToTop();
}
}
});
tween.play();
iPadMenuExpandedState = !iPadMenuExpandedState;
}
/*
* handle click on current menu
*
* @required action / used -> label of menu
*/
function interfaceMenuDetailClickHandler(targetMenu) {
var action = targetMenu.action;
var value = targetMenu.value;
var menuItems = targetMenu.submenu;
if (interfaceMenuExpandedState) {
toggleInterface(interfaceMenu, interfaceMenuExpandedState);
interfaceMenuExpandedState = !interfaceMenuExpandedState;
}
if (menuItems) {
submenu = setInterFace(menuItems);
mainLayer.add(submenu);
submenu.moveToBottom();
submenu.moveUp();
toggleInterface(submenu, subMenuExpandedState);
subMenuExpandedState = !subMenuExpandedState;
} else {//take action
switch(action) {
case 'slideshow':
{
setSlider(value);
}
break;
case 'reset_main':
{
resetApplication();
}
break;
case 'translation':
{
ApplicationState['language'] = value;
setLoadedState(ApplicationState);
reLoadApplication();
// call translate funcion with selected language
}
break;
}
}
}
function setSlider(images) {
var slideshow = $("#slideshow");
var slideshowClose = $("#slideshowClose");
var slideshowNext = $("#slideshowControls .slidesjs-next");
var slideshowPrev = $("#slideshowControls .slidesjs-previous");
$("#slides").remove();
$("#slideshowClose").after('<div id="slides"></div>');
var slides = $("#slides");
var c = '';
for (var key in images) {
c += '<img src="' + images[key].src + '">';
}
c += '<a href="#" class="slidesjs-previous slidesjs-navigation"></a><a href="#" class="slidesjs-next slidesjs-navigation"></a>';
slides.html(c);
slides.slidesjs({
width : 959,
height : 719,
navigation : false,
pagination : {
active : true
}
});
slideshow.show();
slideshowClose.on('mousedown touchstart tap', function() {
slides.remove();
slideshow.hide();
});
slideshowNext.on('mousedown touchstart tap', function() {
$('.slidesjs-next.slidesjs-navigation').trigger('click');
});
slideshowPrev.on('mousedown touchstart tap', function() {
$('.slidesjs-previous.slidesjs-navigation').trigger('click');
});
}
/*
* Loop generating menu items for current menu
*
* @required list of items
*/
function setInterFace(items) {
var group = new Kinetic.Group({});
var chWidth = 0;
var mheight = 0;
var ycount = 0;
for (var n = 0; n < items.length; n++) {
(function() {
var i = n;
var currItem = items[i];
if (!currItem.language || currItem.language == ApplicationState['language']) {
var minwidth = 80;
var tabheight = 40;
var tab = new Kinetic.Group({
x : 0,
y : ycount * tabheight
});
ycount++;
mheight += tabheight;
var buttontext = new Kinetic.Text({
x : 12,
y : 16,
text : getTranslation(currItem.translation),
fontSize : 18,
fontFamily : font_regular,
fill : 'black'
});
tab.add(buttontext);
tab.on('mousedown touchstart tap', function() {
interfaceMenuDetailClickHandler(currItem);
});
var txtwidth = buttontext.getWidth() + buttontext.getX();
if (minwidth > txtwidth)
txtwidth = minwidth;
if (txtwidth > chWidth)
chWidth = txtwidth;
var underline = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, tabheight + 2, chWidth + 12, 1, 0);
canvas.fillStroke(this);
},
fill : '#ddd',
});
var backgr = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 3, chWidth + 12, tabheight - 2, 0);
canvas.fill(this);
},
fill : '#fff'
});
tab.add(backgr);
backgr.moveToBottom();
tab.add(underline);
group.add(tab);
tab.move(10, 0);
}
})();
}
interfaceMenuExpanded = 900 - mheight;
var background = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-10, -10, chWidth + 60, mheight + 40, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, 0, chWidth + 40, mheight + 40, 10);
canvas.fillStroke(this);
},
fill : '#fff',
shadowColor : 'black',
shadowBlur : 8,
shadowOffsetY : -2,
shadowOpacity : 0.5
});
group.add(background);
group.move((stage.getWidth() / 2 ) - (chWidth + 20) / 2, stage.getHeight() - 108);
background.moveToBottom();
return group;
}
/*
* Set main region buttons and adds to stage
*
* @required items -> loaded from regions.js
*/
function setFloatingButtons(items) {
ApplicationState['didstart'] = true;
ApplicationState['step'] = 'FloatingButtons';
setLoadedState(ApplicationState);
floatIngButtons = new Kinetic.Group({
x : 0,
y : 0,
opacity : 0
});
for (var key in items) {
(function() {
var item = items[key];
var tab = new Kinetic.Group({
name : item.id,
x : item.button.x,
y : item.button.y
});
var padding = 35;
var buttontext = new Kinetic.Text({
x : padding,
y : 18,
text : getTranslation(item.translation).toUpperCase(),
fontSize : 28,
fontFamily : font_semibold,
fill : 'white'
});
tab.add(buttontext);
var textWidth = buttontext.getWidth() + (padding * 2 );
var fbutton = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, textWidth + 29 + padding, 60, 44);
canvas.fillStroke(this);
},
fill : '#232322',
opacity : .9,
shadowColor : '#514f4c',
shadowBlur : 2,
shadowOffsetY : 2
});
var buttonbg = new Kinetic.Image({
x : textWidth + 10,
y : 8,
image : interFaceImages.FloatingIcon,
width : 44,
height : 44
});
var buttonsh = new Kinetic.Image({
fillPatternImage : interFaceImages.FloatingShine,
width : textWidth + 29 + padding,
height : 29
});
tab.add(fbutton);
tab.add(buttonsh);
tab.add(buttonbg);
tab.add(buttontext);
tab.on('mousedown touchstart tap', function() {
tab.setListening(false);
regionClickHandler(item.id);
});
floatIngButtons.add(tab);
})();
}
mainLayer.add(floatIngButtons);
optween = new Kinetic.Tween({
node : floatIngButtons,
duration : .5,
opacity : 1,
easing : Kinetic.Easings.EaseInOut
});
optween.play();
}
/*
* Toggle buttons
* Calls generate region overview based on target button label
*
* @required region name -> button label
*/
function regionClickHandler(item_id) {
if (floatIngButtons != undefined) {
removeTween = new Kinetic.Tween({
node : floatIngButtons,
duration : .5,
opacity : 0,
easing : Kinetic.Easings.EaseInOut,
onFinish : function() {
if (floatIngButtons)
floatIngButtons.remove();
floatIngButtons = null;
}
});
removeTween.play();
}
ApplicationState['step'] = 'RegionSelection';
ApplicationState['region'] = item_id;
ApplicationState['regiondata'] = jsonContents['regions'][item_id];
setLoadedState(ApplicationState);
environmentList = setEnvironmentList(jsonContents['regions'][item_id]);
mainLayer.add(environmentList);
}
/*
* Loop through enviroment info and generate list
* Loop through enviroment items and append to list
* Generate 2 buttons GO BACK and SELECT
*
* @required items for list
* @todo add head/region info to list
*/
function setEnvironmentList(items) {
var group = new Kinetic.Group({});
var info = items.info;
var content = items.contents;
var innerWidth = 600;
var innerHeight = 50;
var paddingtop = 0;
var paddingbottom = 0;
EnviromentHead = new Kinetic.Group({});
EnviromentHeadBackground = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-10, -10, 620, 60, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, 0, 600, 60, 10);
canvas.fillStroke(this);
},
fill : '#111',
shadowColor : 'black',
shadowBlur : 6,
shadowOffsetY : -2,
shadowOpacity : .5
});
EnviromentHeadLabel = new Kinetic.Text({
x : 55,
y : 10,
text : getTranslation(items.translation).toUpperCase(),
fontSize : 28,
fontFamily : font_light,
fill : 'white'
});
headIcon = new Kinetic.Image({
x : 15,
y : 10,
image : interFaceImages.MenuHeadIcon
});
EnviromentHead.add(EnviromentHeadBackground);
EnviromentHead.add(EnviromentHeadLabel);
EnviromentHead.add(headIcon);
for (var i = 0; i < info.length; i++) {
(function() {
if (i == 0)
paddingtop = 20;
if (i == info.length - 1)
paddingbottom = 20;
//(w, h, text, fontsize, textX, textY, textColor, bgcolor, strokeColor, hasIcon, image) {
tabbutton = getTabButton(innerWidth, 30, paddingtop, paddingbottom, getTranslation(info[i]), 16, 46, 5, '#4b4b4b', 'white', 'white', false);
tabbutton.move(0, innerHeight);
listIcon = new Kinetic.Image({
x : 20,
y : 8 + paddingtop,
width : 6,
height : 6,
image : interFaceImages.ListItemCircle
});
innerHeight = innerHeight + 30 + paddingtop + paddingbottom;
paddingbottom = 0;
paddingtop = 0;
tabbutton.add(listIcon);
group.add(tabbutton);
})();
}
for (var i = 0; i < content.length; i++) {
(function() {
var item = content[i];
var labelheight = 30;
var entryheight = 55;
var tab = new Kinetic.Group({
x : 0,
y : innerHeight
});
label = getTabButton(innerWidth, labelheight, 0, 0, getTranslation(item.translation).toUpperCase(), 18, 12, 5, 'white', '#777777', '#777777', false);
innerHeight = innerHeight + labelheight;
tab.add(label);
for (var j = 0; j < item.items.length; j++) {
(function() {
var t = item.items[j];
tabbutton = getTabButton(innerWidth, entryheight, 0, 0, t.label.toUpperCase(), 18, entryheight, 18, '#444', 'white', '#bbb', true, t.thumb, t.count);
innerHeight = innerHeight + entryheight;
tabbutton.move(0, (entryheight * j) + labelheight);
tab.add(tabbutton);
})();
}
group.add(tab);
})();
}
var btnContainer = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-10, 0, innerWidth + 20, 95, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, -10, innerWidth, 95, 10);
canvas.fillStroke(this);
},
fill : 'white',
shadowColor : 'black',
shadowBlur : 20,
shadowOpacity : .1
});
var prevButton = getNextPrevButton(getTranslation("interface_back"), true);
var nextButton = getNextPrevButton(getTranslation('interface_select'));
prevButton.on('mousedown touchstart tap', function() {
setFloatingButtons(jsonContents['regions']);
environmentList.destroy();
mainLayer.draw();
});
nextButton.on('mousedown touchstart tap', function() {
ApplicationState['step'] = 'IpadInterface';
setLoadedState(ApplicationState);
getIpadInterface();
environmentList.destroy();
environmentList = null;
mainLayer.draw();
});
prevButton.move(0, innerHeight + 22);
nextButton.move(0, innerHeight + 22);
var ch = nextButton.getChildren();
var chWidth = 0;
for (var i = 0; i < ch.length; i++) {
if (ch[i].getWidth() > chWidth)
chWidth = ch[i].getWidth();
}
prevButton.move(17, 0);
nextButton.move(innerWidth - chWidth - 17, 0);
btnContainer.move(0, innerHeight - 1);
group.add(EnviromentHead);
group.add(btnContainer);
group.add(prevButton);
group.add(nextButton);
group.move((stage.getWidth() - innerWidth ) / 2, (stage.getHeight() - (innerHeight + 95 ) ) / 3);
return group;
}
/*
* Generate ipad frame, white background and button container and adds to layer
* Default animates ipad in frame when generated
* Calls to generate ipad buttons
*/
function getIpadInterface() {
ipadInterface = new Kinetic.Group({
x : 40,
y : 1050
});
ipadScreenRect = new Kinetic.Group({
x : 235,
y : 100
});
ipadVideoContainer = new Kinetic.Group({
x : 235,
y : 100,
id : 'ipadvideocontainer'
});
ipadFrame = new Kinetic.Image({
x : 0,
y : 0,
image : interFaceImages.IpadFrame,
width : 1131,
height : 847
});
var interfacebg = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(235, 100, ipadwidth, ipadheight, 0);
canvas.fillStroke(this);
},
fill : 'white'
});
ipadHeader = new Kinetic.Text({
fontSize : 28,
fontFamily : font_regular,
fill : 'black',
x : 257,
y : 114
});
ipadCaption = new Kinetic.Text({
fontSize : 14,
fontFamily : font_regular,
fill : 'black',
x : 257,
y : 176
});
HeaderUnderlineBorder = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(257, 156, 746, 13, 0);
canvas.fillStroke(this);
},
fill : '#B0001A'
});
ipadInterface.add(ipadFrame);
ipadInterface.add(interfacebg);
ipadInterface.add(ipadScreenRect);
ipadInterface.add(ipadHeader);
ipadInterface.add(ipadCaption);
ipadInterface.add(HeaderUnderlineBorder);
ipadInterface.add(ipadVideoContainer);
interfaceLayer.add(ipadInterface);
interfaceLayer.draw();
toggleIpad(ipadInterface);
getIpadButtons();
}
/*
* List items on ipad screen
* for each item generates new IpadItem -> dashboard.js
* adds content to item, adds eventlisteners
* optional detail view added and removed
*
* depending on application state overrides items shown on screen
* -> default : loop items and set if selected
* -> personal interface : only selected items
* -> interpetation interface : change label to show data
* : change buttons to click through scenario information
*
* @todo check next/start button draw call
* -> next/start button overdraw when hovering over ipad items
*/
function getIpadButtons() {
var maxitems = 3;
var count = 0;
var width = 250;
var height = 137;
var border = 4;
var posX = 21;
var posY = 105;
var overlay;
var setSelectedIcon = false;
var allowsDetailView = true;
var items = jsonContents['scenarios'].scenarios;
ipadHeader.setText(getTranslation('topics_ipad_title_general'));
ipadCaption.setText(getTranslation('interface_ipad_welcome_info'));
// update thumbnails if only selecteditems
if (ApplicationState['selectedItems']) {
setSelectedIcon = true;
if (ApplicationState['step'] == 'PersonalInterface') {
ipadHeader.setText(getTranslation('topics_ipad_title_personal'));
ipadCaption.setText('');
allowsDetailView = false;
ipadScreenRect.removeChildren();
var selected = [];
for (var i = 0; i < items.length; i++) {
if (ApplicationState['selectedItems'][items[i].id]) {
selected.push(items[i]);
}
}
items = selected;
} else if (ApplicationState['step'] == 'InterpretationInterface') {
allowsDetailView = false;
ipadScreenRect.removeChildren();
var resultState = ApplicationState['resultState'];
var results = [];
for (var i = 0; i < items.length; i++) {
if (ApplicationState['selectedItems'][items[i].id]) {
results.push(items[i]);
items[i].info.selected = true;
} else
items[i].info.selected = false;
}
items = results;
} else {
for (var i = 0; i < items.length; i++) {
if (ApplicationState['selectedItems'][items[i].id]) {
items[i].info.selected = true;
} else
items[i].info.selected = false;
}
}
} else {
for (var i = 0; i < items.length; i++) {
items[i].info.selected = false;
}
}
for (var i = 0; i < items.length; i++) {
(function() {
var content = items[i];
var info = content.info;
var results = content.results;
var translated_results = {};
var label = {};
label['title'] = getTranslation(content.translation);
info.content = getTranslation(content.info.translation);
for (var key in results) {
translated_results[key] = getTranslation(results[key]);
}
content.translated_results = translated_results;
if (ApplicationState['step'] == 'InterpretationInterface') {
var resultState = ApplicationState['resultState'];
label['result'] = content.translated_results[resultState];
label['numeric'] = content.translated_results[resultState + "_numeric"];
}
var item = new IpadItem(content.id, label, content, interFaceImages);
item.setAsSelected(info.selected);
currentitems.push(item);
var iBtn = item.getButton(width, height, border, 'white');
iBtn.move(posX, posY);
posX = posX + width;
count++;
if (count >= 3) {
posY = posY + height;
posX = 21;
count = 0;
}
ipadScreenRect.add(iBtn);
var index = iBtn.getZIndex();
var bg = iBtn.getChildren()[0];
if (allowsDetailView) {
iBtn.on('mousedown touchstart tap', function() {
ApplicationState['step'] = 'IpadDetail';
ApplicationState['detail'] = item.id;
setLoadedState(ApplicationState);
iBtn.setZIndex(index);
bg.setStrokeWidth(10);
var overlay = item.getOverlay(iBtn.getX(), iBtn.getY(), ipadwidth, ipadheight);
var thumbnails = setThumbnails(item.ipadItemGlobalParams.info, 220);
checkBtn = getCheckBoxButton(item.isSelected, item);
checkFrame = getCheckBoxFrame(getTranslation('interface_important_topic'), getTranslation('interface_important_topic_info'));
checkFrame.move(23, 420);
backButton = getNextPrevButton(getTranslation('interface_back_topics'));
checkFrame.add(checkBtn);
overlay.add(checkFrame);
overlay.add(backButton);
ipadScreenRect.add(overlay);
ipadScreenRect.add(thumbnails);
backButton.move(685 - backButton.getChildren()[3].textWidth, 465);
item.startAnimation();
ipadScreenRect.draw();
ipadHeader.setText(item.label.title);
ipadCaption.setText('');
if (info.game) {
thumbnails.move(0, 50);
game = setIpadGame(info.game.type, info.game.x, info.game.y, ipadInterface);
var game_title = info.game.title;
var game_caption = info.game.caption;
if(game_title && game_caption) {
game_title = getTranslation(info.game.title);
game_caption = getTranslation(info.game.caption);
var g_info = new Kinetic.Group({});
var arr = new Kinetic.Image({
image : interFaceImages.Info_arrow
});
g_info.add(arr);
var g_title = new Kinetic.Text({
x: 60,
width : 300,
text : game_title,
fontSize : 16,
fontFamily : font_semibold,
fill : 'black'
});
g_info.add(g_title);
var g_caption = new Kinetic.Text({
y: 25,
x: 62,
width : 265,
text : game_caption,
fontSize : 11,
lineHeight : 1.2,
fontFamily : font_semibold,
fill : 'black'
});
g_info.add(g_caption);
g_info.move(375, 20);
game.add(g_info);
}
game.moveToTop();
game.moveDown();
}
backButton.on('mousedown touchstart tap', function() {
thumbnails.destroy();
overlay.destroy();
overlay = null;
if (game != undefined)
game.destroy();
game = null;
ApplicationState['step'] = 'IpadInterface';
setLoadedState(ApplicationState);
updateIpadItems();
ipadInterface.draw();
});
});
}
})();
}
if (ApplicationState['step'] == 'InterpretationInterface') {
if (ApplicationState['resultState'] == 'initial')
ApplicationState['resultState'] = 'interpretation';
ipadHeader.setText(getTranslation('topics_ipad_title_interpretation'));
if (ApplicationState['resultState'] == 'adapted') {
ApplicationState['resultState'] = 'final';
ipadHeader.setText(getTranslation('topics_ipad_title_actionplan'));
}
ipadCaption.setText('');
selectButton = getNextPrevButton(getTranslation('interface_next'));
ipadScreenRect.add(selectButton);
var ch = selectButton.getChildren();
var chWidth = 0;
for (var i = 0; i < ch.length; i++) {
if (ch[i].getWidth() > chWidth)
chWidth = ch[i].getWidth();
}
selectButton.move(763 - chWidth, 531);
ipadScreenRect.draw();
selectButton.on('mousedown touchstart tap', function() {
ApplicationState['step'] = 'ListOverlay';
if (ApplicationState['resultState'] == 'initial')
ApplicationState['resultState'] = 'interpretation';
if (ApplicationState['resultState'] == 'adapted') {
ApplicationState['resultState'] = 'final';
}
setLoadedState(ApplicationState);
toggleIpad(ipadInterface);
getListOverlay();
});
}
}
function setIpadGame(type, x, y, target) {
game = new Kinetic.Group({
x : x,
y : y
});
target.add(game);
switch(type) {
case 'clockwork':
{
var bg = new Kinetic.Group({});
var ch = new Kinetic.Group({});
var ah = new Kinetic.Group({});
var actual_hours = new Kinetic.Image({
y: 30,
image : interFaceImages.Hours_bg
});
var actual_pointer = new Kinetic.Image({
x: 120,
y: 155,
rotation: -1.35,
offset: [14, 86],
image : interFaceImages.Contract_pijl
});
var actual_mask = new Kinetic.Image({
x: 95,
y: 155,
image : interFaceImages.Hours_bg_mask
});
var actual_label = new Kinetic.Text({
width : 240,
align : 'center',
text : getTranslation("topics_contract_actual_hours"),
fontSize : 18,
fontFamily : font_semibold,
fill : 'black'
});
var compare_sign = new Kinetic.Text({
x: 185,
y: 80,
width: 100,
height: 100,
offset:[50,50],
align : 'center',
text : getTranslation(">"),
fontSize : 100,
fontFamily : font_semibold,
fill : 'black'
});
var contract_hours = new Kinetic.Image({
image : interFaceImages.Contract_bg
});
var contract_label = new Kinetic.Text({
x : 15,
y : 25,
width : 90,
align : 'center',
text : getTranslation("topics_contract"),
fontSize : 20,
fontFamily : font_semibold,
fill : 'black'
});
var hours_numeric = new Kinetic.Text({
x : 15,
y : 45,
width : 90,
align : 'center',
text : getTranslation("results_contract_utilisation_numeric"),
fontSize : 45,
fontFamily : font_semibold,
fill : 'black'
});
var hours_label = new Kinetic.Text({
x : 15,
y : 100,
width : 90,
align : 'center',
text : getTranslation("hours"),
fontSize : 20,
fontFamily : font_semibold,
fill : 'black'
});
ch.add(contract_hours);
ch.add(contract_label);
ch.add(hours_numeric);
ch.add(hours_label);
ah.add(actual_hours);
ah.add(actual_label);
ah.add(actual_pointer);
ah.add(actual_mask);
ah.move(225, 0);
bg.add(ch);
bg.add(ah);
bg.add(compare_sign);
game.add(bg);
game.draw();
pTween = new Kinetic.Tween({
node : actual_pointer,
duration : 1.6,
rotation : -.4,
onFinish : function() {
var alert = new Kinetic.Group({
opacity: 0
});
var alert_bg = new Kinetic.Image({
image : interFaceImages.Contact_alert
});
var alert_caption = new Kinetic.Text({
x : 45,
y : 23,
width : 80,
text : getTranslation("topics_contract_alert_caption"),
fontSize : 14,
fontFamily : font_semibold,
fill : 'black'
});
var alert_label = new Kinetic.Text({
x : 45,
y : 45,
width : 100,
text : getTranslation("topics_contract_alert_label"),
fontSize : 11,
fontFamily : font_regular,
fill : 'black'
});
alert.add(alert_bg);
alert.add(alert_label);
alert.add(alert_caption);
alert.move(475, 0);
if(game) {
game.add(alert);
aTween = new Kinetic.Tween({
node : alert,
duration : .6,
opacity : 1
});
pTween = new Kinetic.Tween({
node : actual_pointer,
duration : 2.2,
rotation : 1
});
cTween = new Kinetic.Tween({
node : compare_sign,
duration : .6,
scaleX : -1
});
pTween.play();
cTween.play();
aTween.play();
}
}
});
setTimeout(function() {
pTween.play();
}, 800);
}
break;
case 'keypad':
{
var pin = '- - - - -';
var crc = '72595';
var pincount = 0;
var bg = new Kinetic.Image({
image : interFaceImages.KeypadBackground
});
var info = new Kinetic.Group({});
var arr = new Kinetic.Image({
x: -50,
y: 170,
rotation: -1,
image : interFaceImages.Info_arrow
});
var infolabel = new Kinetic.Text({
x: -25,
y: 185,
text : getTranslation("info_keypad"),
width : 300,
fontSize : 16,
fontFamily : font_semibold,
fill : 'black'
});
info.add(arr);
info.add(infolabel);
var display = new Kinetic.Group({});
var buttons = new Kinetic.Group({
x : 19,
y : 43
});
game.add(bg);
game.add(display);
game.add(buttons);
game.add(info);
var displaybg = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(15, 12, 107, 20, 5);
canvas.fillStroke(this);
},
fill: '#7BB032'
});
var displaylabel = new Kinetic.Text({
y : 16,
x : 12,
width : 100,
align : 'right',
text : pin,
fontSize : 16,
fontFamily : font_digital_bold,
fill : 'white'
});
display.add(displaybg);
display.add(displaylabel);
var buttonbg = new Kinetic.Image({
image : interFaceImages.KeypadButton
});
var btnWidth = buttonbg.getWidth() + 7;
var btnHeight = buttonbg.getHeight() + 5;
var xcount = 0;
var ycount = 0;
for (var i = 0; i < 12; i++) {
var labeltxt = i + 1;
var labelclr = '#666';
switch(i) {
case 9:
{
labeltxt = 'X';
labelclr = '#b30101';
}
break;
case 10:
{
labeltxt = '0';
labelclr = '#666';
}
break;
case 11:
{
labeltxt = 'I';
labelclr = '#4FBE37';
}
break;
}
var button = new Kinetic.Group({
id : labeltxt,
x : btnWidth * xcount,
y : btnHeight * ycount
});
var btnbg = buttonbg.clone({});
var btnlabel = new Kinetic.Text({
x : 9.5,
y : 6,
width : 10,
align : 'center',
text : labeltxt,
fontSize : 14,
fontFamily : font_bold,
fill : labelclr
});
xcount++;
if (xcount >= 3) {
xcount = 0;
ycount++;
}
button.add(btnbg);
button.add(btnlabel);
buttons.add(button);
button.on('mousedown touchstart tap', function() {
var action = this.attrs.id;
switch(action) {
case 'X':
{
pin = '';
}
break;
case 'I':
{
if (pin.length >= 5) {
pincount++;
if (pin == crc) {
var bc = buttons.getChildren();
for (var i = 0; i < bc.length; i++) {
bc[i].off('mousedown');
}
pin = getTranslation('topics_correct');
labelclr = '#588020';
} else {
pin = getTranslation('topics_wrong_code');
labelclr = '#444';
}
if (pincount == 2) {
var infoPopup = new Kinetic.Group({
x : -305,
y : 125
});
var bgw = 300;
var infoBackground = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, bgw, 110, 0);
canvas.fillStroke(this);
context.beginPath();
context.moveTo(bgw - 30, 0);
context.lineTo(bgw, -30);
context.lineTo(bgw, 0);
context.fillStyle = "0f0f0f";
context.fill();
},
fill : '#0f0f0f'
});
var infolabel = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.font = '14px ' + font_light;
context.fillStyle = 'white';
wrapText(context, getTranslation('topics_machine_access_pincode_info'), 30, 30, 250, 18);
}
});
var confirmBtn = new Kinetic.Group({});
confirmlabel = new Kinetic.Text({
text : getTranslation('interface_confirm_ok'),
fontSize : 14,
fontFamily : font_light,
fill : 'white'
});
confirmBtn.add(confirmlabel);
var pad = 3;
var w = confirmlabel.getTextWidth() + pad;
var h = confirmlabel.getTextHeight() + pad;
confirmbg = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-pad, -pad, w + pad, h + pad, 0);
canvas.fillStroke(this);
context.beginPath();
context.moveTo(-pad, -pad);
context.lineTo(w + pad - 2, -pad);
context.lineTo(w + pad - 2, h + pad - 2);
context.lineTo(-pad, h + pad - 2);
context.lineTo(-pad, -pad);
context.strokeStyle = "white";
context.lineWidth = 1;
context.stroke();
},
fill : '#0f0f0f'
});
confirmBtn.add(confirmbg);
confirmlabel.moveToTop();
infoPopup.add(infoBackground);
infoPopup.add(infolabel);
infoPopup.add(confirmBtn);
confirmBtn.move(300 - w - 10, 110 - h - 10);
confirmBtn.on('mousedown touchstart tap', function() {
rTween = new Kinetic.Tween({
node : confirmBtn,
duration : .02,
opacity : 0,
onFinish : function() {
infoPopup.destroy();
}
});
rTween.play();
});
game.add(infoPopup);
game.draw();
}
}
}
break;
default:
{
pin += this.attrs.id;
if (pin.length > 5) {
pin = String(this.attrs.id);
}
}
labelclr = 'white';
}
displaylabel.setText(pin);
displaylabel.setFill(labelclr);
display.draw();
});
}
}
break;
case 'gameboy':
{
var currentq = 1;
var qname = 'question_' + currentq;
var fillcolor = 'black';
var bg = new Kinetic.Image({
image : interFaceImages.GameboyBackground
});
var question = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.clearRect(115, 55, 140, 65);
context.font = '15px ' + font_regular;
context.fillStyle = fillcolor;
wrapText(context, getTranslation('topics_pre_operational_check_game_' + qname), 117, 70, 130, 15);
}
});
var buttons = new Kinetic.Group({
x : 282,
y : 45
});
var posButton = new Kinetic.Image({
image : interFaceImages.PositiveButton,
});
var negButton = new Kinetic.Image({
image : interFaceImages.NegativeButton,
x : 34
});
buttons.add(posButton);
buttons.add(negButton);
game.add(bg);
game.add(question);
game.add(buttons);
posButton.on('mousedown touchstart tap', function() {
currentq++;
qname = 'question_' + currentq;
if (currentq > 3) {
qname = 'access_granted';
fillcolor = 'green';
var bc = buttons.getChildren();
for (var i = 0; i < bc.length; i++) {
bc[i].off('mousedown');
}
}
question.draw();
});
negButton.on('mousedown touchstart tap', function() {
qname = 'access_denied';
fillcolor = 'red';
var bc = buttons.getChildren();
for (var i = 0; i < bc.length; i++) {
bc[i].off('mousedown');
}
question.draw();
});
}
break;
}
return game;
}
function setThumbnails(info, y) {
var group = new Kinetic.Group({});
var contents = info.contents;
for (var i = 0; i < contents.length; i++) {
(function() {
var collx = i;
var colly = 0;
if (collx >= 3) {
collx = 0;
colly = 1;
}
var content = contents[i];
var thumb = new Kinetic.Group({
x : 23 + (251 * collx ),
y : y + (180 * colly ),
});
var imageObj = new Image();
var img = new Kinetic.Image({
opacity : 0,
image : imageObj
});
imageObj.onload = function() {
var width = img.getWidth() / 242;
var height = img.getHeight() / width;
img.setWidth(242);
img.setHeight(height);
img.setOpacity(1);
img.setImage(imageObj);
img.moveToBottom();
thumb.draw();
};
thumb.add(img);
if (content.type == 'image') {
imageObj.src = assetDir + 'img/content/thumbs/' + content.src;
thumb.on('mousedown touchstart tap', function() {
zoomThumbnail(assetDir + 'img/content/' + content.src);
});
} else if (content.type == 'video') {
imageObj.src = assetDir + 'img/content/thumbs/' + content.thumb;
playbutton = getPlayButton(interFaceImages.play_btn);
startBg.on('mousedown touchstart tap', function() {
getIpadVideo(content);
});
thumb.add(playbutton);
playbutton.moveToTop();
} else if (content.type == 'trigger') {
imageObj.src = assetDir + 'img/content/thumbs/' + content.src;
thumb.on('mousedown touchstart tap', function() {
var s = slideshow_sets[1][ApplicationState['language']];
if (s) {
var slideshows = jsonContents.settings.DEFAULT.menu[1]['submenu'];
var slideshow;
for (var key in slideshows) {
if (s == slideshows[key].id)
slideshow = slideshows[key];
}
setSlider(slideshow.value);
}
});
}
group.add(thumb);
})();
};
return group;
}
function zoomThumbnail(src) {
ipadBackgroundLayer = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, ipadwidth, ipadheight, 0);
canvas.fillStroke(this);
},
fill : 'black'
});
var imageObj = new Image();
imageObj.onload = function() {
ipadImgw = this.width;
ipadImgh = this.height;
var m = ipadImgw >= ipadImgh ? ipadwidth : ipadheight;
var l = ipadImgw >= ipadImgh ? ipadImgw : ipadImgh;
var r = l / m;
var imgLayer = new Kinetic.Image({
width : this.width / r,
height : this.height / r,
image : imageObj,
y : (ipadheight - (this.height / r)) / 2
});
var closeImgbutton = getCloseButton(interFaceImages.close_btn);
closeImgbutton.on('mousedown touchstart tap', function() {
ipadVideoContainer.removeChildren();
ipadInterface.draw();
});
ipadVideoContainer.add(ipadBackgroundLayer);
ipadVideoContainer.add(imgLayer);
ipadVideoContainer.add(closeImgbutton);
ipadVideoContainer.draw();
};
imageObj.src = src;
}
function getIpadVideo(content) {
ipadVideoContainer.removeChildren();
var vidsrc = videoDir + content.src;
ipadVideow = content.width;
ipadVideoh = content.height;
var m = ipadVideow >= ipadVideoh ? ipadwidth : ipadheight;
var l = ipadVideow >= ipadVideoh ? ipadVideow : ipadVideoh;
var r = l / m;
ipadVideow = content.width / r;
ipadVideoh = content.height / r;
ipadVideoy = 150;
var v = '<video id="video_invisible" width="' + ipadVideow + '" height="' + ipadVideoh + '" preload="auto"><source src="' + vidsrc + '" type="video/ogg"></source></video>';
$('#video-container').html(v);
video = $('#video-container' + ' > video').get(0);
video.volume = 0;
video.addEventListener("ended", ipadVideoEndedHandler, false);
video.addEventListener("canplay", ipadVideoReadyHandler, false);
}
function ipadVideoReadyHandler() {
var closevidbutton = getCloseButton(interFaceImages.close_btn);
ipadBackgroundLayer = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, ipadwidth, ipadheight, 0);
canvas.fillStroke(this);
},
fill : 'black'
});
ipadVideoLayer = new Kinetic.Image({
name : 'ipadvideo',
width : ipadVideow,
height : ipadVideoh,
y : ipadVideoy / 2,
image : video
});
ipadVideoContainer.add(ipadBackgroundLayer);
ipadVideoContainer.add(ipadVideoLayer);
ipadVideoContainer.add(closevidbutton);
closevidbutton.on('mousedown touchstart tap', function() {
ipadVideoEndedHandler();
video = $('#video-container' + ' > video').get(0);
if (video)
video.pause();
});
video.play();
setVideo(video, ipadVideoLayer);
}
function ipadVideoEndedHandler() {
video.removeEventListener("ended", ipadVideoEndedHandler, false);
video.removeEventListener("canplay", ipadVideoReadyHandler, false);
ipadVideoContainer.removeChildren();
video = null;
ipadInterface.draw();
}
function getPlayButton(button) {
startBg = new Kinetic.Image({
x : 70,
y : 20,
width : 100,
height : 100,
image : button
});
return startBg;
}
function getCloseButton(button) {
closebtn = new Kinetic.Image({
x : 750,
width : 42,
height : 42,
image : button
});
return closebtn;
}
/*
* Resets ipad buttons
* optionally adds NEXT/START button
*/
function updateIpadItems() {
ipadScreenRect.removeChildren();
var count = 0;
for (var key in selectedItems) {
count++;
}
if (count) {
if ((ApplicationState['step'] == 'IpadInterface') || (ApplicationState['step'] == 'PersonalInterface')) {
selectButton = getNextPrevButton(getTranslation('interface_next'));
ipadScreenRect.add(selectButton);
var ch = selectButton.getChildren();
var chWidth = 0;
for (var i = 0; i < ch.length; i++) {
if (ch[i].getWidth() > chWidth)
chWidth = ch[i].getWidth();
}
selectButton.move(763 - chWidth, 531);
selectButton.moveToTop();
selectButton.on('mousedown touchstart tap', function() {
var content = jsonContents['scenarios'].service_data_base;
content.info.content = getTranslation(content.info.translation);
var label = {};
label['title'] = getTranslation(content.translation);
var item = new IpadItem(content.id, label, content, interFaceImages);
var overlay = item.getOverlay(21, 105, ipadwidth, ipadheight);
var thumbnails = setThumbnails(item.ipadItemGlobalParams.info, 190);
backButton = getNextPrevButton(getTranslation('interface_next'));
overlay.add(backButton);
ipadScreenRect.add(overlay);
ipadScreenRect.add(thumbnails);
var ch = backButton.getChildren();
var chWidth = 0;
for (var i = 0; i < ch.length; i++) {
if (ch[i].getWidth() > chWidth)
chWidth = ch[i].getWidth();
}
backButton.move(763 - chWidth, 531);
item.startAnimation();
ipadScreenRect.draw();
ipadHeader.setText(label['title']);
ipadCaption.setText('');
backButton.on('mousedown touchstart tap', function() {
thumbnails.destroy();
overlay.destroy();
overlay = null;
ipadScreenRect.draw();
ApplicationState['step'] = 'PersonalInterface';
setLoadedState(ApplicationState);
getIpadButtons();
interfaceLayer.draw();
ipadScreenRect.draw();
var startButton = getNextPrevButton(getTranslation('interface_start'));
ipadScreenRect.add(startButton);
var ch = startButton.getChildren();
var chWidth = 0;
for (var i = 0; i < ch.length; i++) {
if (ch[i].getWidth() > chWidth)
chWidth = ch[i].getWidth();
}
startButton.move(763 - chWidth, 531);
backButton = getNextPrevButton(getTranslation('interface_back'), true);
ipadScreenRect.add(backButton);
backButton.on('mousedown touchstart tap', function() {
ApplicationState['step'] = 'IpadInterface';
setLoadedState(ApplicationState);
getIpadButtons();
updateIpadItems();
});
backButton.move(30, 531);
ipadScreenRect.draw();
startButton.on('mousedown touchstart tap', function() {
toggleIpad(ipadInterface);
ApplicationState['resultState'] = 'initial';
setLoadedState(ApplicationState);
getDashboard();
});
});
});
}
}
getIpadButtons();
interfaceLayer.draw();
ipadScreenRect.draw();
}
/*
* Create new dashboard item showing data depending on resultstate
* states : initial, interpetation, action, adapted
* defined in scenarios.js
*
* @todo define call for different states, currently starttimelapse and hide-tween dashboard
* @optional resultstate
*/
function getDashboard(resultstate) {
resultstate = typeof resultstate !== 'undefined' ? resultstate : ApplicationState['resultState'];
ApplicationState['step'] = 'DashboardInterface';
setLoadedState(ApplicationState);
var w = 330;
var h = 220;
dashboard.removeChildren();
db = new DashBoard(selectedItems, resultstate, w, h, xoffset, (yoffset - 10 ) - h);
dashboard.add(db);
dashboardTween = new Kinetic.Tween({
node : db,
duration : .6,
y : yoffset
});
dashboardTween.play();
startTimeLapse();
}
/*
* End of application for now
*/
function getListOverlay() {
for (var key in selectedItems) {
var item = selectedItems[key];
item.translation = getTranslation(item['translation']);
for (var result in item.results) {
item.translated_results[result] = getTranslation(item.results[result]);
}
}
if (listsContainer) {
listsContainer.removeChildren();
listsContainer = null;
}
var title = getTranslation('interface_results_title');
var subtitle = getTranslation('interface_results_subtitle');
var subtitleAction = getTranslation('interface_action_subtitle');
var listState = ApplicationState['resultState'] == 'final';
if (!listState) {
var listStep = 0;
listsContainer = new ListOverlay(title, subtitle, subtitleAction, selectedItems, ApplicationState['resultState'], interFaceImages);
var nextButton = getNextPrevButton(getTranslation('interface_next'));
nextButton.move(50, 710);
list.add(nextButton);
nextButton.moveToTop();
nextButton.on('mousedown touchstart tap', function() {
if (listStep == 0) {
listStep++;
listItemGroup.destroy();
actionTween = new Kinetic.Tween({
node : listItemGroupAction,
duration : .3,
opacity : 1
});
actionTween.play();
mainLayer.draw();
} else {
ApplicationState['resultState'] = 'adapted';
setLoadedState(ApplicationState);
listsContainer.moveToBottom();
listsContainer.moveUp();
listToggleTween.reverse();
getDashboard();
}
});
mainLayer.add(listsContainer);
listsContainer.moveToBottom();
listsContainer.moveUp();
if (interfaceMenuExpandedState || subMenuExpandedState)
listsContainer.moveDown();
mainLayer.draw();
var listToggleTween = new Kinetic.Tween({
node : listsContainer,
duration : 1,
y : 130,
easing : Kinetic.Easings.EaseInOut,
onFinish : function() {
listsContainer.moveToTop();
}
});
listToggleTween.play();
} else {
ApplicationState['step'] = 'ContinuousAnimation';
setLoadedState(ApplicationState);
getContinuousAnimation();
}
}
function getContinuousAnimation() {
var finalConts = jsonContents.settings.DEFAULT.finals;
for (var result in finalConts.points) {
finalConts.points[result].translation = getTranslation(finalConts.points[result].translation);
}
finalContainer = new CircleOverlay(getTranslation(finalConts.title), getTranslation(finalConts.caption), getTranslation(finalConts.centertitle), getTranslation(finalConts.centercaption), finalConts.points, interFaceImages);
mainLayer.add(finalContainer);
finalContainer.moveToBottom();
finalContainer.moveUp();
standby_timeout = 23;
count = 23;
resetTimeOut();
var finalTween = new Kinetic.Tween({
node : finalContainer,
duration : 1,
y : 130,
easing : Kinetic.Easings.EaseInOut,
});
finalTween.play();
}
/*
* Add video to html, start playing "off screen"
* Call for video drawing on animation layer
* Replace current animation layer with empty
*/
function startTimeLapse() {
var vsrc = videoDir + 'initial_ainimated.webm';
if (ApplicationState['resultState'] == 'adapted')
vsrc = videoDir + 'adapted_ainimated.webm';
var v = '<video width="' + videow + '" height="' + videoh + '" preload="auto"><source src="' + vsrc + '" type="video/ogg"></source></video>';
$('#video-container').html(v);
video = $('#video-container' + ' > video').get(0);
video.volume = 0;
video.addEventListener("ended", videoEndedHandler, false);
video.addEventListener("canplay", videoReadyHandler, false);
}
function videoReadyHandler() {
animationLayer.destroy();
animationLayer = new Kinetic.Image({
name : 'video',
x : xoffset,
y : yoffset,
width : videow,
height : videoh,
image : video
});
mainLayer.add(animationLayer);
video.play();
setVideo(video, animationLayer, true);
}
/*
* Replace current animation layer with default
* initialize ipad if necessary and animate ipad
*/
function videoEndedHandler() {
video.removeEventListener("ended", videoEndedHandler, false);
video.removeEventListener("canplay", videoReadyHandler, false);
video = null;
animationLayer.moveToBottom();
mainLayer.draw();
dashboardTween.reverse();
ApplicationState['step'] = 'InterpretationInterface';
setLoadedState(ApplicationState);
if (!ipadInterface) {
getIpadInterface();
} else {
toggleIpad(ipadInterface);
}
updateIpadItems();
}
/*
* Add video to image list of animation layer canvas
* Draw animation layer canvas
* move to bottom of z-index, redraw stage
*
* @required video source
* @required image layer
*/
function setVideo(v, i, z) {
z = typeof z !== 'undefined' ? z : false;
if (!v.paused && !v.ended) {
i.setImage(v);
if (z)
i.moveToBottom();
else
i.moveToTop();
mainLayer.draw();
setTimeout(setVideo, 20, v, i, z);
} else {
//i.setImage(interFaceImages.SplashScreen);
}
}
/*
* Generate check box for ipad detail view
* If button gets checked, add item to selectedItems
*
* @required target -> IpadItem
* @optional default state -> inital state of button
*/
function getCheckBoxFrame(content, info) {
var frame = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.rect(0, 0, 745, 120);
context.fillStyle = '#f7f7f7';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#e0e0e0';
context.stroke();
}
});
var text = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
var maxWidth = 300;
var lineHeight = 22;
var x = 100;
var y = 50;
context.font = '18px ' + font_semibold;
context.fillStyle = '#c00f23';
wrapText(context, content.toUpperCase(), x, y, maxWidth, lineHeight);
}
});
var sub = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
var maxWidth = 290;
var lineHeight = 16;
var x = 100;
var y = 95;
context.font = '12px ' + font_regular;
context.fillStyle = 'black';
wrapText(context, info, x, y, maxWidth, lineHeight);
}
});
var group = new Kinetic.Group({});
group.add(frame);
group.add(text);
group.add(sub);
return group;
}
/*
* Generate check box for ipad detail view
* If button gets checked, add item to selectedItems
*
* @required target -> IpadItem
* @optional default state -> inital state of button
*/
function getCheckBoxButton(defaultState, target) {
defaultState = typeof defaultState !== 'undefined' ? defaultState : false;
checkBoxButtonState = defaultState;
var w = 58;
var h = 58;
var checkboxbuttonImg = interFaceImages.CheckBoxUnchecked;
if (checkBoxButtonState)
checkboxbuttonImg = interFaceImages.CheckBoxChecker;
checkboxbutton = new Kinetic.Image({
x : 25,
y : 30,
width : w,
height : h,
image : checkboxbuttonImg,
});
checkboxbutton.on('mousedown touchstart tap', function() {
checkBoxButtonState = !checkBoxButtonState;
var checkboxbuttonImg = interFaceImages.CheckBoxUnchecked;
if (checkBoxButtonState) {
selectedItems[target.id] = target.ipadItemGlobalParams;
checkboxbuttonImg = interFaceImages.CheckBoxChecker;
} else
delete selectedItems[target.id];
ApplicationState['selectedItems'] = selectedItems;
setLoadedState(ApplicationState);
checkboxbutton.setImage(checkboxbuttonImg);
checkboxbutton.draw();
});
return checkboxbutton;
}
/*
* Generate default layer for background animation
*
* @required x, y ,width, height
* @required source image
* @required animation start flag ( animation REMOVES the blur ! )
*/
function getAnimationLayer(xpos, ypos, width, height, source, playing) {
playing = typeof playing !== 'undefined' ? playing : false;
animationLayer = new Kinetic.Image({
x : xpos,
y : ypos,
image : source,
width : width,
height : height,
filter : Kinetic.Filters.Blur,
filterRadius : 5
});
mainLayer.add(animationLayer);
animationLayerBlurTween = new Kinetic.Tween({
node : animationLayer,
duration : 0.6,
filterRadius : 0,
easing : Kinetic.Easings.EaseInOut
});
if (playing)
animationLayerBlurTween.play();
}
/*
* Draw Overlay
*
*/
function getStartInterface() {
if(startInterface) startInterface.destroy();
var ctx = ApplicationState['step'];
if ((!ApplicationState['didstart'] ) || (ApplicationState['didstart'] == 'null' )) {
ctx = 'didnotstart';
}
switch(ctx) {
case 'didnotstart' :
ctx = 'didnotstart';
break;
case 'ContinuousAnimation' :
ctx = 'didfinish';
break;
case 'IpadDetail' :
ctx = 'isrunning';
break;
default:
ctx = 'isrunning';
}
ctx = typeof ctx !== 'undefined' ? ctx : '';
var bodyttl = getTranslation('interface_' + ctx + '_title');
var bodycpt = getTranslation('interface_' + ctx + '_caption');
var startInterface = new Kinetic.Group({});
var interfaceHead = new Kinetic.Group({});
var interfaceBody = new Kinetic.Group({ y: 85 });
var interfaceButtons = new Kinetic.Group({ x : 50, y : 365 });
var interfaceBackground = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-10, -10, 771, 476, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0,1, 751, 456, 20);
canvas.fillStroke(this);
},
opacity: .9,
fill : '#fff',
shadowColor : 'black',
shadowBlur : 10,
shadowOffsetY : -2,
shadowOpacity : 0.5
});
var interfaceHeadBackground = new Kinetic.Image({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, 751, 85, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, 0, 751, 85, 0);
canvas.fillStroke(this);
},
fillPatternImage : interFaceImages.InterfaceHeadBg
});
var interfaceHeadLogo = new Kinetic.Image({
x : 50.5,
y : 30,
width : 212,
height : 30,
fillPatternImage : interFaceImages.I_Site_logo
});
interfaceHead.add(interfaceBackground);
interfaceHead.add(interfaceHeadBackground);
interfaceHead.add(interfaceHeadLogo);
var body_title = new Kinetic.Text({
x : 50,
y : 30,
width: 645,
text: bodyttl,
fontSize : 28,
fontFamily : font_semibold,
fill : 'black'
});
var body_caption = new Kinetic.Text({
x : 50,
y: 85,
width: 645,
text: bodycpt,
fontSize : 22,
lineHeight: 1.4,
fontFamily : font_regular,
fill : 'black'
});
interfaceBody.add(body_title);
interfaceBody.add(body_caption);
var startButton = getNextPrevButton(getTranslation('interface_' + ctx + '_btn'), true);
interfaceButtons.add(startButton);
if(! (ctx == 'didnotstart') ) {
var altButton = getNextPrevButton(getTranslation('interface_restart_btn'), true);
interfaceButtons.add(altButton);
}
startInterface.add(interfaceHead);
startInterface.add(interfaceBody);
startInterface.add(interfaceButtons);
startButton.on('mousedown touchstart tap', function() {
resetTimeOut();
animationLayerBlurTween.play();
startInterface.remove();
switch(ctx) {
case 'didnotstart' :
setFloatingButtons(jsonContents['regions']);
break;
case 'didfinish' :
{
if(finalContainer) finalContainer.destroy();
getContinuousAnimation();
}
break;
default:
}
overlay.draw();
});
if(altButton)
{
altButton.on('mousedown touchstart tap', function() {
resetTimeOut();
startInterface.remove();
resetApplication();
overlay.draw();
});
}
startInterface.move(( stage.getWidth() - 771 ) / 2 , ( stage.getHeight() - 476 ) / 2 );
if(! (ctx == 'didnotstart') ) startButton.move(600 - startButton.getChildren()[3].textWidth, 0);
else startButton.move(220,0);
overlay.add(startInterface);
overlay.draw();
}
/*
* Draw frame
*
* @required width, height
* @required source image
*/
function getBackground(width, height, source) {
mainFrame = new Kinetic.Group({});
bg = new Kinetic.Image({
x : 0,
y : 0,
fillPatternImage : source,
width : width,
height : height,
});
mainFrame.add(bg);
breadcrumb = new Kinetic.Text({
y : 975,
x : 50,
fontSize : 30,
fontFamily : font_bold,
fill : '#B0AEAC'
});
mainFrame.add(breadcrumb);
mainLayer.add(mainFrame);
}
function updateBreadcrumb() {
// Welcome, FloatingButtons RegionSelection, IpadInterface, IpadDetail, InterpretationInterface, ListOverlay, DashboardInterface, ContinuousAnimation
var key = ApplicationState['step'];
switch(key) {
case 'FloatingButtons' :
case 'RegionSelection' :
key = 'select_environment';
break;
case 'IpadDetail' :
key = 'topics_' + ApplicationState['detail'];
break;
case 'InterpretationInterface' :
case 'ListOverlay' :
key = 'interface_results_subtitle';
break;
case 'PersonalInterface' :
key = 'topics_ipad_title_personal';
break;
case 'ContinuousAnimation' :
key = getTranslation('interface_results_title_continuation_first') + getTranslation('interface_results_title_continuation_second');
break;
}
key = typeof key !== 'undefined' ? key : '';
breadcrumb.setText(getTranslation(key));
mainLayer.draw();
}
/*
* Load images from sources, add to callback object
* Oncomplete callback with loaded images
*/
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = assetDir + 'img/' + sources[src];
}
}
/*
* Load content from json files
* Oncomplete callback with loaded json content
*/
function loadContent(sources, callback) {
/*
* Needs modifying !!!
* Async loading => push causes change in index for contents array
*/
var contents = {};
var loadedContents = 0;
var numContents = 0;
var count = 0;
for (var src in sources)
numContents++;
for (var src in sources) {
$.getJSON(sources[src], function(data) {
var data_ID = data.ID;
delete data.ID;
contents[data_ID] = data;
if (++loadedContents >= numContents) {
callback(contents);
}
count++;
});
}
}
/*
* Generate list entry for environment list
*
* @required width, height
* @required text -> label
* @required fontsize
* @required X/Y position for label
* @required color for label
* @required color for list item
* @required color for bottom 1px underline
* @required list item has icon flag
*
* @optional list item icon source
*/
function getTabButton(w, h, paddingtop, paddingbottom, text, fontsize, textX, textY, textColor, bgcolor, strokeColor, hasIcon, image, count) {
if (count == 0)
count = undefined;
count = typeof count !== 'undefined' ? count : false;
tabbutton = new Kinetic.Group({});
var btn = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, w, h + paddingtop + paddingbottom, 0);
canvas.fillStroke(this);
context.beginPath();
context.moveTo(0, h + paddingtop + paddingbottom);
context.lineTo(w, h + paddingtop + paddingbottom);
context.strokeStyle = strokeColor;
context.stroke();
},
fill : bgcolor
});
if (hasIcon) {
var imageObj = new Image();
var ico = new Kinetic.Image({
x : 12,
y : 10,
width : 34,
height : 34
});
imageObj.onload = function() {
ico.setImage(imageObj);
ico.draw();
};
imageObj.src = assetDir + 'img/' + image;
}
var buttontext = new Kinetic.Text({
x : textX,
y : textY + paddingtop,
text : text,
fontSize : fontsize,
fontFamily : font_regular,
fill : textColor
});
tabbutton.add(btn);
if (hasIcon)
tabbutton.add(ico);
tabbutton.add(buttontext);
if (count) {
var countlabel = new Kinetic.Text({
y : textY + paddingtop,
text : count,
fontSize : fontsize + 4,
fontFamily : font_regular,
fill : "#aaa"
});
tabbutton.add(countlabel);
countlabel.move(w - countlabel.getWidth() - 20, 0);
}
return tabbutton;
}
/*
* Generate button
*
* @required text label
* @required image source
*/
function getNextPrevButton(text, activestate) {
activestate = typeof activestate !== 'undefined' ? activestate : false;
var l = interFaceImages.ActiveButtonLeft;
var c = interFaceImages.ActiveButtonCenter;
var r = interFaceImages.ActiveButtonRight;
var p = 25;
if (activestate) {
l = interFaceImages.IdleButtonLeft;
c = interFaceImages.IdleButtonCenter;
r = interFaceImages.IdleButtonRight;
}
group = new Kinetic.Group({});
var buttontext = new Kinetic.Text({
x : p,
y : 10,
text : text.toUpperCase(),
fontSize : 25,
fontFamily : font_regular,
fill : "white"
});
group.add(buttontext);
left = new Kinetic.Image({
x : 0,
y : 0,
width : 2,
height : 44,
image : l
});
group.add(left);
center = new Kinetic.Image({
x : 2,
width : buttontext.getWidth() + buttontext.getX() + p,
height : 44,
image : c
});
group.add(center);
right = new Kinetic.Image({
x : 2 + buttontext.getWidth() + buttontext.getX() + p,
y : 0,
width : 3,
height : 44,
image : r
});
group.add(right);
buttontext.moveToTop();
return group;
}
/*
* Text wrap for drawing
*
* @required 2d context of target canvas
* @required text string
* @required x, y coordinates of text
* @required maxwidth of text
* @required line height
*/
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
}
/*
* Rounded rectangle drawing helper
*
* @required x, y, width, height
* @required radius
*/
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
if (w < 2 * r)
r = w / 2;
if (h < 2 * r)
r = h / 2;
this.beginPath();
this.moveTo(x + r, y);
this.arcTo(x + w, y, x + w, y + h, r);
this.arcTo(x + w, y + h, x, y + h, r);
this.arcTo(x, y + h, x, y, r);
this.arcTo(x, y, x + w, y, r);
this.closePath();
return this;
}
}( function(window) {
var ipadItemGlobalParams;
var checkBoxButtonState;
var interfacebuttons;
var detailContent;
var interfaceButton;
var isSelected = false;
var iBtn;
var label;
var id;
var personalDashBoard;
var dashboardBackground;
var personalItems;
var listItems;
var font_regular = 'OpenSansRegular';
var font_light = 'OpenSansLight';
/*
* Contstructor for ipadItem
* set required data
*
* @required id -> found in scenarios.json
* @required label
* @required params -> data from scenarios.json
* @required interfacebuttons -> global list with loaded buttons
*/
function IpadItem(id, label, params, interfacebuttons) {
this.id = id;
this.label = label;
this.ipadItemGlobalParams = params;
this.interfacebuttons = interfacebuttons;
this.isSelected = false;
}
/*
* Contstructor for DashBoard
* Generates items on grid
*
* @required personalItems -> list of selected items
* @required resultState -> current state to show
* @required width, height
* @required x, y
*/
function DashBoard(personalItems, resultState, width, height, x, y) {
this.personalItems = personalItems;
personalDashBoard = new Kinetic.Group({});
dashBoardButtons = new Kinetic.Group({});
dashboardBackground = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, width, height, 0);
canvas.fillStroke(this);
},
fill : '#fff',
shadowColor : 'black',
shadowBlur : 8,
shadowOffset : 3,
shadowOpacity : 0.5
});
var space = 10;
var w = width / 3 - (space * (3 / 2));
var h = height / 3 - (space * (3 / 2));
var xcount = 0;
var ycount = 0;
for (var key in personalItems) {
var item = personalItems[key];
var results = item.translated_results;
var label = results[resultState + "_numeric"];
var dbutton = this.setButton(w, h, item.color, label, 32);
dbutton.move((w * xcount ) + space * (xcount + 1 ), (h * ycount ) + space * (ycount + 1 ));
xcount++;
if (xcount >= 3) {
xcount = 0;
ycount++;
}
dashBoardButtons.add(dbutton);
var t = 500 + ((xcount + ycount) * 20);
setTimeout(labelAnimation, t, dbutton, t);
};
personalDashBoard.add(dashboardBackground);
personalDashBoard.add(dashBoardButtons);
personalDashBoard.move(x, y);
return personalDashBoard;
}
function labelAnimation(target, delay, count) {
count = typeof count !== 'undefined' ? count : 1;
var label = target.getChildren()[1];
var t = label.attrs.id;
var a = "";
if (t.indexOf("%") != -1) {
t = t.replace("%", "");
a = "%";
}
t = t / 10 * count;
label.setText(Math.floor(t) + a);
count++;
if (count < 11)
setTimeout(labelAnimation, delay, target, delay, count);
}
/*
* Generate list of interpetations
*
* @todo all
*/
function ListOverlay(title, subtitle, subtitleAction, listItems, resultState, images) {
this.listItems = listItems;
list = new Kinetic.Group({});
header = new Kinetic.Group({});
listItemGroup = new Kinetic.Group({});
background = new Kinetic.Group({
opacity : .8
});
listItemGroupAction = new Kinetic.Group({
opacity : 0
});
listBackground = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-10, -10, 1220, 810, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, 0, 1200, 810, 10);
canvas.fillStroke(this);
},
fill : '#fff',
shadowColor : 'black',
shadowBlur : 10,
shadowOffsetY : -2,
shadowOpacity : 0.5
});
listBackgroundFigure = new Kinetic.Image({
x : 850,
y : 165,
width : 424,
height : 636,
image : images.ListBackground
});
headbgBlack = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(2, 2, 1196, 50, 0);
canvas.stroke(this);
context.clip();
context.roundRect(2, 2, 1196, 58, 8);
canvas.fillStroke(this);
},
fill : '#111'
});
headIcon = new Kinetic.Image({
x : 30,
y : 12,
image : images.MenuHeadIcon
});
var title = new Kinetic.Text({
text : title,
fontSize : 20,
fontFamily : font_regular,
fill : '#fff',
x : 75,
y : 18
});
var caption = new Kinetic.Text({
text : subtitle,
fontSize : 22,
fontFamily : font_regular,
fill : '#444'
});
caption.move(50, 75);
var captionAction = new Kinetic.Text({
text : subtitleAction,
fontSize : 22,
fontFamily : font_semibold,
fill : '#4f972b'
});
captionAction.move(50, 75);
var yheight = 0;
var paddingh = 6;
var paddingv = 8;
for (var key in listItems) {
var item = listItems[key];
if (resultState != 'final') {
var result = item.translated_results[resultState];
var numeric = item.translated_results[resultState + '_numeric'];
var initial = item.translated_results['initial'];
var resultsAction = item.translated_results['action'];
var tab = new Kinetic.Group({});
var tabAction = new Kinetic.Group({});
result = result.replace(". ", ".\n").replace(", ", ",\n");
resultsAction = resultsAction.replace(". ", ".\n").replace(", ", ",\n");
var name = new Kinetic.Text({
text : item.translation.toUpperCase(),
fontSize : 16,
x : 10,
fontFamily : font_bold,
fill : '#000'
});
tab.add(name);
var listIcon = new Kinetic.Image({
x : name.getX() + name.getWidth() + paddingv,
y : 6,
width : 6,
height : 6,
image : images.ListItemCircle
});
tab.add(listIcon);
var number = new Kinetic.Text({
text : numeric,
fontSize : 16,
x : listIcon.getX() + listIcon.getWidth() + paddingv,
fontFamily : font_light,
fill : '#000'
});
tab.add(number);
var res = new Kinetic.Text({
text : initial,
fontSize : 16,
x : number.getX() + number.getWidth() + paddingv,
fontFamily : font_light,
fill : '#000'
});
tab.add(res);
var h = name.getHeight();
var label = new Kinetic.Text({
text : result,
fontSize : 14,
x : 10,
y : h + paddingh,
fontFamily : font_light,
fill : '#000'
});
tab.add(label);
var underline = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.rect(10, 57, 790, 1);
context.fillStyle = '#bbb';
context.fill();
context.beginPath();
context.rect(10, 56, 790, 1);
context.fillStyle = '#fff';
context.fill();
}
});
tab.add(underline);
/*
* Second page
*/
var nameAction = new Kinetic.Text({
text : item.translation.toUpperCase(),
fontSize : 16,
x : 10,
fontFamily : font_bold,
fill : '#000'
});
tabAction.add(nameAction);
var listIconAction = new Kinetic.Image({
x : nameAction.getX() + nameAction.getWidth() + paddingh,
y : 6,
width : 6,
height : 6,
image : images.ListItemCircle
});
tabAction.add(listIconAction);
var numberAction = new Kinetic.Text({
text : numeric,
fontSize : 16,
x : listIconAction.getX() + listIconAction.getWidth() + paddingh,
fontFamily : font_light,
fill : '#000'
});
tabAction.add(numberAction);
var resAction = new Kinetic.Text({
text : initial,
fontSize : 16,
x : numberAction.getX() + numberAction.getWidth() + paddingh,
fontFamily : font_light,
fill : '#000'
});
tabAction.add(resAction);
var labelAction = new Kinetic.Text({
text : resultsAction,
fontSize : 14,
x : 45,
y : h + paddingh,
fontFamily : font_light,
fill : '#000'
});
tabAction.add(labelAction);
var underlineClone = underline.clone({});
tabAction.add(underlineClone);
var checkbox = new Kinetic.Image({
x : 6,
y : 20,
width : 35,
height : 35,
image : images.smallCheckBoxUnchecked,
id : item.id + '_checkbox',
name : false
});
checkbox.on('mousedown touchstart tap', function() {
var boxState = !this.attrs.name;
var boxTargt = this.attrs.id.replace("_checkbox", "");
this.setName(boxState);
var checkboxbuttonImg = images.smallCheckBoxUnchecked;
if (boxState)
checkboxbuttonImg = images.smallCheckBoxChecker;
listItems[boxTargt].visible = boxState;
this.setImage(checkboxbuttonImg);
this.draw();
});
tabAction.add(checkbox);
tab.move(40, 120 + yheight);
listItemGroup.add(tab);
listItemGroupAction.add(tabAction);
tabAction.move(40, 120 + yheight);
yheight = yheight + name.getHeight() + h + paddingh + 25;
} else {
if (item.visible) {
var result = item.translated_results[resultState];
var numeric = item.translated_results['adapted_numeric'];
var tab = new Kinetic.Group({});
result = result.replace(". ", ".\n").replace(", ", ",\n");
var name = new Kinetic.Text({
text : item.translation.toUpperCase(),
fontSize : 16,
x : 10,
fontFamily : font_bold,
fill : '#000'
});
tab.add(name);
var listIcon = new Kinetic.Image({
x : name.getX() + name.getWidth() + paddingv,
y : 6,
width : 6,
height : 6,
image : images.ListItemCircle
});
tab.add(listIcon);
var number = new Kinetic.Text({
text : numeric,
fontSize : 16,
x : listIcon.getX() + listIcon.getWidth() + paddingv,
fontFamily : font_light,
fill : '#000'
});
tab.add(number);
var h = name.getHeight();
var label = new Kinetic.Text({
text : result,
fontSize : 14,
x : 10,
y : h + paddingh,
fontFamily : font_light,
fill : '#000'
});
tab.move(40, 120 + yheight);
listItemGroup.add(tab);
yheight = yheight + name.getHeight() + h + paddingh + 25;
}
}
}
listItemGroup.add(caption);
listItemGroupAction.add(captionAction);
header.add(headIcon);
header.add(title);
background.add(listBackground);
background.add(headbgBlack);
list.add(background);
list.add(header);
list.add(listBackgroundFigure);
list.add(listItemGroup);
list.add(listItemGroupAction);
list.move(240, 950);
return list;
}
function CircleOverlay(titletxt, caption, centerttl, centercap, listItems, images) {
this.listItems = listItems;
centerttl = centerttl.toUpperCase();
centercap = centercap.toUpperCase();
circle = new Kinetic.Group({});
background = new Kinetic.Group({
opacity : .8
});
var listBackground = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(-10, -10, 1220, 810, 0);
canvas.stroke(this);
context.clip();
context.roundRect(0, 0, 1200, 810, 10);
canvas.fillStroke(this);
},
fill : '#fff',
shadowColor : 'black',
shadowBlur : 10,
shadowOffsetY : -2,
shadowOpacity : 0.5
});
var headbgBlack = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(2, 2, 1196, 50, 0);
canvas.stroke(this);
context.clip();
context.roundRect(2, 2, 1196, 58, 8);
canvas.fillStroke(this);
},
fill : '#111'
});
var title = new Kinetic.Text({
text : titletxt,
fontSize : 20,
fontFamily : font_regular,
fill : '#fff',
x : 75,
y : 18
});
var caption = new Kinetic.Text({
text : caption,
fontSize : 20,
fontFamily : font_semibold,
fill : '#fff',
x : title.getX() + title.getWidth(),
y : 18
});
var centerCircle = new Kinetic.Image({
image : images.BigCircleArrows
});
var container = new Kinetic.Group({});
var animationStates = {
0 : [{
x : 0,
y : 0,
width : 515,
height : 515
}],
1 : [{
x : 515,
y : 0,
width : 515,
height : 515
}],
2 : [{
x : 1030,
y : 0,
width : 515,
height : 515
}],
3 : [{
x : 1545,
y : 0,
width : 515,
height : 515
}],
4 : [{
x : 2060,
y : 0,
width : 515,
height : 515
}],
5 : [{
x : 2575,
y : 0,
width : 515,
height : 515
}],
6 : [{
x : 3090,
y : 0,
width : 515,
height : 515
}]
};
var animStage = new Kinetic.Shape({});
var anim = new Kinetic.Sprite({
x : 0,
y : 0,
opacity : .3,
image : images.con_ss,
animation : '0',
animations : animationStates,
frameRate : 1,
index : 0
});
var anim_bg = new Kinetic.Sprite({
x : 0,
y : 0,
image : images.bg_ss,
animation : '0',
animations : animationStates,
frameRate : 1,
index : 0
});
var index = 0;
for (var key in listItems) {
var t = getLabel(listItems[key], index);
index++;
container.add(t);
}
var centertitle = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.font = '22px ' + font_bold;
context.textAlign = 'center';
context.fillStyle = '#c00f23';
wrapText(context, centerttl, 600, 380, 300, 24);
}
});
var centercaption = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.font = '22px ' + font_regular;
context.textAlign = 'center';
context.fillStyle = '#c00f23';
wrapText(context, centercap, 600, 450, 300, 24);
}
});
centerCircle.move((1200 - centerCircle.getWidth()) / 2, 95);
var offsetX = 75;
var offsetY = 75;
anim.setX(centerCircle.getX() + offsetX);
anim_bg.setX(centerCircle.getX() + offsetX);
anim.setY(centerCircle.getY() + offsetY);
anim_bg.setY(centerCircle.getY() + offsetY);
background.add(listBackground);
background.add(headbgBlack);
background.add(title);
background.add(caption);
circle.add(background);
circle.add(centerCircle);
circle.add(anim_bg);
circle.add(anim);
animCount = 0;
for (var key in animationStates)
animCount++;
setTimeout(setAnimation, 2000, anim, anim_bg, animCount, 0, container);
circle.add(centertitle);
circle.add(centercaption);
circle.add(container);
circle.move(240, 950);
return circle;
}
function setAnimation(target, background, maxCount, count, container) {
count = typeof count !== 'undefined' ? count : 0;
var currentlabel = container.getChildren()[count];
if (count == 0)
background.start();
background.setAnimation(count);
tween = new Kinetic.Tween({
node : target,
duration : .5,
opacity : 1,
onFinish : function() {
count++;
labeltween = new Kinetic.Tween({
node : currentlabel,
duration : 1,
opacity : 1,
onFinish : function() {
if (count < maxCount) {
if (count == 0)
target.start();
target.setOpacity(.3);
target.setAnimation(count);
setAnimation(target, background, maxCount, count, container);
} else {
background.stop();
target.stop();
}
}
});
labeltween.play();
}
});
tween.play();
}
function getLabel(content, i) {
var txt = content.translation;
var align = content.align;
var x = content.x;
var y = parseFloat(content.y);
var id = 'circle_label_' + i;
var t = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.font = '16px ' + font_regular;
context.textAlign = align;
context.fillStyle = '#000';
wrapText(context, txt, x, y, 120, 18);
},
id : id,
opacity : 0
});
return t;
}
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
}
/*
* Alter css property on main container
* .cursor-pointer class found in main.css
*
* @required pointer flag
* @todo Set as global function -> duplicate found in main.js
* @todo make dynamic
* -> remove previously added classes
* -> add class set in params eg. 'cursor-pointer', 'cursor-crosshair'
* -> store added class
*/
function setCanvasCursorPointer(pointer) {
mainContainer = document.getElementById('container');
if (pointer)
mainContainer.className = mainContainer.className + " cursor-pointer";
else {
mainContainer.className = mainContainer.className.replace(" cursor-pointer", "");
}
}
/*
* Generate item button for dashboard
*
* @required width, height
* @required color -> background color found in scenarios.js color
* @required label, font size
*/
DashBoard.prototype.setButton = function(width, height, color, label, fontsize) {
dashBoardButton = new Kinetic.Group({});
button = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, width, height, 0);
canvas.fillStroke(this);
},
fill : color,
});
var label = new Kinetic.Text({
text : 0,
id : label,
width : width - 15,
align : 'right',
fontSize : fontsize,
fontFamily : font_regular,
fill : 'white'
});
label.move((width / 2) - (label.getWidth() / 2), (height / 2) - (label.getHeight() / 2));
dashBoardButton.add(button);
dashBoardButton.add(label);
return dashBoardButton;
}
/*
* setter for isSelected
*/
IpadItem.prototype.setAsSelected = function(isSelected) {
this.isSelected = isSelected;
}
/*
* Generate item button for ipadItem
*
* @required width, height
* @required border
* @required bordercolor
*/
IpadItem.prototype.getButton = function(width, height, border, bordercolor) {
var label = this.label;
var color = this.ipadItemGlobalParams.color;
var originalIndex;
interfaceButton = new Kinetic.Group({});
button = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, width, height, 0);
canvas.fillStroke(this);
},
fill : color,
stroke : bordercolor,
strokeWidth : border
});
interfaceButton.add(button);
var labelSize = '28px';
if (label.result || label.numeric)
labelSize = '18px';
var title = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
var maxWidth = width - 10;
var lineHeight = 28;
var x = 10;
var y = 32;
context.font = labelSize + ' ' + font_regular;
context.fillStyle = 'white';
wrapText(context, label.title, x, y, maxWidth, lineHeight);
}
});
if (this.isSelected) {
var cBox = new Kinetic.Image({
x : width - 25,
y : height - 25,
image : this.interfacebuttons.StarIcon
});
var corner = new Kinetic.Shape({
x : width - 52,
y : height - 52,
opacity : .3,
drawFunc : function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(50, 0);
context.lineTo(50, 50);
context.lineTo(0, 50);
context.lineTo(50, 0);
context.closePath();
context.fillStyle = 'black';
context.fill();
}
});
interfaceButton.add(corner);
interfaceButton.add(cBox);
}
interfaceButton.add(title);
if (label.result) {
var result = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
var maxWidth = width - 100;
var lineHeight = 12;
var x = 10;
var y = 120;
context.font = '12px ' + font_regular;
context.fillStyle = 'white';
wrapText(context, label.result, x, y, maxWidth, lineHeight);
}
});
interfaceButton.add(result);
}
if (label.numeric) {
var numeric = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
var maxWidth = width;
var lineHeight = 28;
var x = 10;
var y = 105;
context.font = '70px ' + font_light;
context.fillStyle = 'white';
wrapText(context, label.numeric, x, y, maxWidth, lineHeight);
}
});
interfaceButton.add(numeric);
}
return interfaceButton;
}
/*
* Generate detail view for detail overlay
* Content only based on item info -> scenarios.json
* No buttons here
*/
IpadItem.prototype.getDetailedContent = function() {
var info = this.ipadItemGlobalParams.info;
var group = new Kinetic.Group({
opacity : 0
});
var text = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
var maxWidth = 500;
var lineHeight = 20;
var x = 23;
var y = 75;
context.font = '18px ' + font_regular;
context.fillStyle = 'black';
wrapText(context, info.content, x, y, maxWidth, lineHeight);
}
});
group.add(text);
return group;
}
/*
* Get overlay for ipad item
* Generate background
* get detail content
*
* @required x, y
* @required width, height
*/
IpadItem.prototype.getOverlay = function(x, y, width, height) {
var group = new Kinetic.Group({});
var overlay = new Kinetic.Shape({
drawFunc : function(canvas) {
var context = canvas.getContext();
context.roundRect(0, 0, width, height, 0);
canvas.fillStroke(this);
},
fill : '#fff'
});
detailContent = this.getDetailedContent();
group.add(overlay);
group.add(detailContent);
detailContent.setY(50);
//group.add(iBtn);
return group;
}
/*
* Move item to first entry
* Animation for detail view
*/
IpadItem.prototype.startAnimation = function() {
detailtween = new Kinetic.Tween({
node : detailContent,
duration : .2,
opacity : 1,
easing : Kinetic.Easings.EaseInOut
});
detailtween.play();
}
/*
* Log info
* #Helper function
*/
IpadItem.prototype.info = function() {
};
window.IpadItem = IpadItem;
window.DashBoard = DashBoard;
window.ListOverlay = ListOverlay;
window.CircleOverlay = CircleOverlay;
}(window));
// Remove scrollbars in fullscreen mode
$(window).resize(function() {
if ((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
});
$(document).ready(function() {
init();
// Call resize function on start
$(window).resize();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment