Claudio Valerio
13 years ago
parent
5f48b68e80
commit
3a401c1f6e
@ -0,0 +1,16 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<widget xmlns="http://www.w3.org/ns/widgets" |
||||||
|
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||||
|
id="http://uniboard.mnemis.com/widgets/htmleditor" |
||||||
|
version="1.1" |
||||||
|
width="542" |
||||||
|
height="350" |
||||||
|
ub:resizable="true"> |
||||||
|
|
||||||
|
<name>Html Editor</name> |
||||||
|
<author href="http://www.getuniboard.com" |
||||||
|
email="info@mnemis.com">Mnemis SA</author> |
||||||
|
<description>Simple Html editor</description> |
||||||
|
|
||||||
|
<content src="index.html"/> |
||||||
|
</widget> |
||||||
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,26 @@ |
|||||||
|
body { |
||||||
|
font: 13px "Trebuchet MS", Arial, Verdana; |
||||||
|
padding-top:0px; |
||||||
|
color: gray; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration:none; |
||||||
|
color:#3C769D; |
||||||
|
} |
||||||
|
h1 a, |
||||||
|
p em a { |
||||||
|
display:block; |
||||||
|
overflow:hidden; |
||||||
|
text-indent:-1000px; |
||||||
|
position:absolute; |
||||||
|
top:0px; left:0px; |
||||||
|
} |
||||||
|
h1 a { |
||||||
|
width:245px; height:85px; |
||||||
|
top:28px; |
||||||
|
} |
||||||
|
p em a { |
||||||
|
width:120px; height:28px; |
||||||
|
left:30px; |
||||||
|
} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
|
<head> |
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
||||||
|
<title>markItUp! Universal markup editor</title> |
||||||
|
<link rel="stylesheet" type="text/css" href="images/style.css" /> |
||||||
|
<script type="text/javascript" src="jquery.pack.js"></script> |
||||||
|
<script type="text/javascript" src="languages.js"></script> |
||||||
|
<script type="text/javascript" src="markitup/jquery.markitup.js"></script> |
||||||
|
<script type="text/javascript" src="markitup/sets/html/set.js"></script> |
||||||
|
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" /> |
||||||
|
<link rel="stylesheet" type="text/css" href="markitup/sets/html/style.css" /> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<script type="text/javascript" > |
||||||
|
var lang = ""; |
||||||
|
|
||||||
|
if(window.sankore){ |
||||||
|
try{ |
||||||
|
lang = sankore.locale().substr(0,2); |
||||||
|
sankoreLang[lang].welcome; |
||||||
|
} catch(e){ |
||||||
|
lang = "en"; |
||||||
|
} |
||||||
|
} else |
||||||
|
lang = "en"; |
||||||
|
|
||||||
|
$(document).ready(function(){ |
||||||
|
|
||||||
|
$("#reset-btn").hide(); |
||||||
|
|
||||||
|
$('#markItUp').markItUp(mySettings); |
||||||
|
$("#markItUp").width($(window).width()-100) |
||||||
|
.height($(window).height()-80); |
||||||
|
$('iframe').width($(window).width()-24) |
||||||
|
.height($(window).height()-46); |
||||||
|
if(window.sankore){ |
||||||
|
var html = window.sankore.preference("iHtml", sankoreLang[lang].welcome); |
||||||
|
$("#markItUp").val(html); |
||||||
|
}; |
||||||
|
|
||||||
|
$("#markItUp").keyup(function(){ |
||||||
|
if(window.sankore){ |
||||||
|
window.sankore.setPreference("iHtml", $("#markItUp").val()); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$("li").mouseout(function(){ |
||||||
|
if(window.sankore){ |
||||||
|
window.sankore.setPreference("iHtml", $("#markItUp").val()); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$("#reset-btn").click(function(){ |
||||||
|
$(this).data("hidden", true).hide(); |
||||||
|
$('textarea').show(); |
||||||
|
$('iframe').remove(); |
||||||
|
$("#fakebar").show(); |
||||||
|
$("#menu").show(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
$(window).resize(function(){ |
||||||
|
$("#markItUp").width($(window).width()-100) |
||||||
|
.height($(window).height()-80); |
||||||
|
$('iframe').width($(window).width()-24) |
||||||
|
.height($(window).height()-46); |
||||||
|
$('#markItUpFooter').width($(window).width()-30); |
||||||
|
|
||||||
|
$("#markitUp").html(sankoreLang[lang].welcome); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<div id='fakebar'></div> |
||||||
|
<textarea id="markItUp" cols="80" rows="20"> |
||||||
|
Welcome to HTML EDITOR |
||||||
|
</textarea> |
||||||
|
<img id="reset-btn" src="images/bts.png" style="position:absolute; top:0; left:5"/> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@ |
|||||||
|
var sankoreLang = { |
||||||
|
"en":{ |
||||||
|
"enter_title": "Enter yuor title here...", |
||||||
|
"welcome":"Welcome to HTML Editor", |
||||||
|
"source":"Source", |
||||||
|
"link":"Link", |
||||||
|
"preview":"Preview", |
||||||
|
"text_to_link":"Your text to link", |
||||||
|
"alt_text":"Alternative text" |
||||||
|
}, |
||||||
|
"ru":{ |
||||||
|
"enter_title": "Введите Ваш заголовок ...", |
||||||
|
"welcome":"Добро пожаловать в HTML-редактор", |
||||||
|
"source":"Источник", |
||||||
|
"link":"Ссылка", |
||||||
|
"preview":"Предпросмотр", |
||||||
|
"text_to_link":"Текст ссылки", |
||||||
|
"alt_text":"Альтернативный текст" |
||||||
|
}, |
||||||
|
"fr":{ |
||||||
|
"enter_title": "Entrer le titre yuor ici ...", |
||||||
|
"welcome":"Bienvenue sur HTML Editor", |
||||||
|
"source":"Source", |
||||||
|
"link":"Lien", |
||||||
|
"preview":"Aperçu", |
||||||
|
"text_to_link":"Votre texte à lier", |
||||||
|
"alt_text":"Texte alternatif" |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,583 @@ |
|||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// markItUp! Universal MarkUp Engine, JQuery plugin
|
||||||
|
// v 1.1.5
|
||||||
|
// Dual licensed under the MIT and GPL licenses.
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Copyright (C) 2007-2008 Jay Salvat
|
||||||
|
// http://markitup.jaysalvat.com/
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
// of this software and associated documentation files (the "Software"), to deal
|
||||||
|
// in the Software without restriction, including without limitation the rights
|
||||||
|
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
// copies of the Software, and to permit persons to whom the Software is
|
||||||
|
// furnished to do so, subject to the following conditions:
|
||||||
|
//
|
||||||
|
// The above copyright notice and this permission notice shall be included in
|
||||||
|
// all copies or substantial portions of the Software.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
// THE SOFTWARE.
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
(function($) { |
||||||
|
$.fn.markItUp = function(settings, extraSettings) { |
||||||
|
var options, ctrlKey, shiftKey, altKey; |
||||||
|
ctrlKey = shiftKey = altKey = false; |
||||||
|
|
||||||
|
options = { id: '', |
||||||
|
nameSpace: '', |
||||||
|
root: '', |
||||||
|
previewInWindow: '', // 'width=800, height=600, resizable=yes, scrollbars=yes'
|
||||||
|
previewAutoRefresh: true, |
||||||
|
previewPosition: 'after', |
||||||
|
previewTemplatePath: '~/templates/preview.html', |
||||||
|
previewParserPath: '', |
||||||
|
previewParserVar: 'data', |
||||||
|
resizeHandle: true, |
||||||
|
beforeInsert: '', |
||||||
|
afterInsert: '', |
||||||
|
onEnter: {}, |
||||||
|
onShiftEnter: {}, |
||||||
|
onCtrlEnter: {}, |
||||||
|
onTab: {}, |
||||||
|
markupSet: [ { /* set */ } ] |
||||||
|
}; |
||||||
|
$.extend(options, settings, extraSettings); |
||||||
|
|
||||||
|
// compute markItUp! path
|
||||||
|
if (!options.root) { |
||||||
|
$('script').each(function(a, tag) { |
||||||
|
miuScript = $(tag).get(0).src.match(/(.*)jquery\.markitup(\.pack)?\.js$/); |
||||||
|
if (miuScript !== null) { |
||||||
|
options.root = miuScript[1]; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return this.each(function() { |
||||||
|
var $$, textarea, levels, scrollPosition, caretPosition, caretOffset, |
||||||
|
clicked, hash, header, footer, previewWindow, template, iFrame, abort; |
||||||
|
$$ = $(this); |
||||||
|
textarea = this; |
||||||
|
levels = []; |
||||||
|
abort = false; |
||||||
|
scrollPosition = caretPosition = 0; |
||||||
|
caretOffset = -1; |
||||||
|
|
||||||
|
options.previewParserPath = localize(options.previewParserPath); |
||||||
|
options.previewTemplatePath = localize(options.previewTemplatePath); |
||||||
|
|
||||||
|
// apply the computed path to ~/
|
||||||
|
function localize(data, inText) { |
||||||
|
if (inText) { |
||||||
|
return data.replace(/("|')~\//g, "$1"+options.root); |
||||||
|
} |
||||||
|
return data.replace(/^~\//, options.root); |
||||||
|
} |
||||||
|
|
||||||
|
// init and build editor
|
||||||
|
function init() { |
||||||
|
id = ''; nameSpace = ''; |
||||||
|
if (options.id) { |
||||||
|
id = 'id="'+options.id+'"'; |
||||||
|
} else if ($$.attr("id")) { |
||||||
|
id = 'id="markItUp'+($$.attr("id").substr(0, 1).toUpperCase())+($$.attr("id").substr(1))+'"'; |
||||||
|
|
||||||
|
} |
||||||
|
if (options.nameSpace) { |
||||||
|
nameSpace = 'class="'+options.nameSpace+'"'; |
||||||
|
} |
||||||
|
$$.wrap('<div '+nameSpace+'></div>'); |
||||||
|
$$.wrap('<div '+id+' class="markItUp"></div>'); |
||||||
|
$$.wrap('<div class="markItUpContainer"></div>'); |
||||||
|
$$.addClass("markItUpEditor"); |
||||||
|
|
||||||
|
// add the header before the textarea
|
||||||
|
header = $('<div id="menu" class="markItUpHeader"></div>').insertBefore($$); |
||||||
|
$(dropMenus(options.markupSet)).appendTo(header); |
||||||
|
|
||||||
|
// add the footer after the textarea
|
||||||
|
footer = $('<div class="markItUpFooter"></div>').insertAfter($$); |
||||||
|
|
||||||
|
// add the resize handle after textarea
|
||||||
|
if (options.resizeHandle === true && $.browser.safari !== true) { |
||||||
|
resizeHandle = $('<div class="markItUpResizeHandle"></div>'); |
||||||
|
footer.insertAfter($$) |
||||||
|
footer.bind("mousedown", function(e) { |
||||||
|
var h = $$.height(), y = e.clientY, mouseMove, mouseUp; |
||||||
|
mouseMove = function(e) { |
||||||
|
$$.css("height", Math.max(20, e.clientY+h-y)+"px"); |
||||||
|
return false; |
||||||
|
}; |
||||||
|
mouseUp = function(e) { |
||||||
|
$("html").unbind("mousemove", mouseMove).unbind("mouseup", mouseUp); |
||||||
|
return false; |
||||||
|
}; |
||||||
|
$("html").bind("mousemove", mouseMove).bind("mouseup", mouseUp); |
||||||
|
}); |
||||||
|
footer.append(resizeHandle); |
||||||
|
} |
||||||
|
|
||||||
|
// listen key events
|
||||||
|
$$.keydown(keyPressed).keyup(keyPressed); |
||||||
|
|
||||||
|
// bind an event to catch external calls
|
||||||
|
$$.bind("insertion", function(e, settings) { |
||||||
|
if (settings.target !== false) { |
||||||
|
get(); |
||||||
|
} |
||||||
|
if (textarea === $.markItUp.focused) { |
||||||
|
markup(settings); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// remember the last focus
|
||||||
|
$$.focus(function() { |
||||||
|
$.markItUp.focused = this; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// recursively build header with dropMenus from markupset
|
||||||
|
function dropMenus(markupSet) { |
||||||
|
var ul = $('<ul></ul>'), i = 0; |
||||||
|
$('li:hover > ul', ul).css('display', 'block'); |
||||||
|
$.each(markupSet, function() { |
||||||
|
var button = this, t = '', title, li, j; |
||||||
|
title = (button.key) ? (button.name||'')+' [Ctrl+'+button.key+']' : (button.name||''); |
||||||
|
key = (button.key) ? 'accesskey="'+button.key+'"' : ''; |
||||||
|
if (button.separator) { |
||||||
|
li = $('<li class="markItUpSeparator">'+(button.separator||'')+'</li>').appendTo(ul); |
||||||
|
} else { |
||||||
|
i++; |
||||||
|
for (j = levels.length -1; j >= 0; j--) { |
||||||
|
t += levels[j]+"-"; |
||||||
|
} |
||||||
|
li = $('<li class="markItUpButton markItUpButton'+t+(i)+' '+(button.className||'')+'"><a href="" '+key+' title="'+title+'">'+(button.name||'')+'</a></li>') |
||||||
|
.bind("contextmenu", function() { // prevent contextmenu on mac and allow ctrl+click
|
||||||
|
return false; |
||||||
|
}).click(function() { |
||||||
|
return false; |
||||||
|
}).mouseup(function() { |
||||||
|
if (button.call) { |
||||||
|
eval(button.call)(); |
||||||
|
} |
||||||
|
markup(button); |
||||||
|
return false; |
||||||
|
}).hover(function() { |
||||||
|
$('> ul', this).show(); |
||||||
|
$(document).one('click', function() { // close dropmenu if click outside
|
||||||
|
$('ul ul', header).hide(); |
||||||
|
} |
||||||
|
); |
||||||
|
}, function() { |
||||||
|
$('> ul', this).hide(); |
||||||
|
} |
||||||
|
).appendTo(ul); |
||||||
|
if (button.dropMenu) { |
||||||
|
levels.push(i); |
||||||
|
$(li).addClass('markItUpDropMenu').append(dropMenus(button.dropMenu)); |
||||||
|
} |
||||||
|
} |
||||||
|
});
|
||||||
|
levels.pop(); |
||||||
|
return ul; |
||||||
|
} |
||||||
|
|
||||||
|
// markItUp! markups
|
||||||
|
function magicMarkups(string) { |
||||||
|
if (string) { |
||||||
|
string = string.toString(); |
||||||
|
string = string.replace(/\(\!\(([\s\S]*?)\)\!\)/g, |
||||||
|
function(x, a) { |
||||||
|
var b = a.split('|!|'); |
||||||
|
if (altKey === true) { |
||||||
|
return (b[1] !== undefined) ? b[1] : b[0]; |
||||||
|
} else { |
||||||
|
return (b[1] === undefined) ? "" : b[0]; |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
// [![prompt]!], [![prompt:!:value]!]
|
||||||
|
string = string.replace(/\[\!\[([\s\S]*?)\]\!\]/g, |
||||||
|
function(x, a) { |
||||||
|
var b = a.split(':!:'); |
||||||
|
if (abort === true) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
value = prompt(b[0], (b[1]) ? b[1] : ''); |
||||||
|
if (value === null) { |
||||||
|
abort = true; |
||||||
|
} |
||||||
|
return value; |
||||||
|
} |
||||||
|
); |
||||||
|
return string; |
||||||
|
} |
||||||
|
return ""; |
||||||
|
} |
||||||
|
|
||||||
|
// prepare action
|
||||||
|
function prepare(action) { |
||||||
|
if ($.isFunction(action)) { |
||||||
|
action = action(hash); |
||||||
|
} |
||||||
|
return magicMarkups(action); |
||||||
|
} |
||||||
|
|
||||||
|
// build block to insert
|
||||||
|
function build(string) { |
||||||
|
openWith = prepare(clicked.openWith); |
||||||
|
placeHolder = prepare(clicked.placeHolder); |
||||||
|
replaceWith = prepare(clicked.replaceWith); |
||||||
|
closeWith = prepare(clicked.closeWith); |
||||||
|
if (replaceWith !== "") { |
||||||
|
block = openWith + replaceWith + closeWith; |
||||||
|
} else if (selection === '' && placeHolder !== '') { |
||||||
|
block = openWith + placeHolder + closeWith; |
||||||
|
} else { |
||||||
|
block = openWith + (string||selection) + closeWith; |
||||||
|
} |
||||||
|
return { block:block,
|
||||||
|
openWith:openWith,
|
||||||
|
replaceWith:replaceWith,
|
||||||
|
placeHolder:placeHolder, |
||||||
|
closeWith:closeWith |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// define markup to insert
|
||||||
|
function markup(button) { |
||||||
|
var len, j, n, i; |
||||||
|
hash = clicked = button; |
||||||
|
get(); |
||||||
|
|
||||||
|
$.extend(hash, { line:"",
|
||||||
|
root:options.root, |
||||||
|
textarea:textarea,
|
||||||
|
selection:(selection||''),
|
||||||
|
caretPosition:caretPosition, |
||||||
|
ctrlKey:ctrlKey,
|
||||||
|
shiftKey:shiftKey,
|
||||||
|
altKey:altKey |
||||||
|
} |
||||||
|
); |
||||||
|
// callbacks before insertion
|
||||||
|
prepare(options.beforeInsert); |
||||||
|
prepare(clicked.beforeInsert); |
||||||
|
if (ctrlKey === true && shiftKey === true) { |
||||||
|
prepare(clicked.beforeMultiInsert); |
||||||
|
}
|
||||||
|
$.extend(hash, { line:1 }); |
||||||
|
|
||||||
|
if (ctrlKey === true && shiftKey === true) { |
||||||
|
lines = selection.split(/\r?\n/); |
||||||
|
for (j = 0, n = lines.length, i = 0; i < n; i++) { |
||||||
|
if ($.trim(lines[i]) !== '') { |
||||||
|
$.extend(hash, { line:++j, selection:lines[i] } ); |
||||||
|
lines[i] = build(lines[i]).block; |
||||||
|
} else { |
||||||
|
lines[i] = ""; |
||||||
|
} |
||||||
|
} |
||||||
|
string = { block:lines.join('\n')}; |
||||||
|
start = caretPosition; |
||||||
|
len = string.block.length + (($.browser.opera) ? n : 0); |
||||||
|
} else if (ctrlKey === true) { |
||||||
|
string = build(selection); |
||||||
|
start = caretPosition + string.openWith.length; |
||||||
|
len = string.block.length - string.openWith.length - string.closeWith.length; |
||||||
|
len -= fixIeBug(string.block); |
||||||
|
} else if (shiftKey === true) { |
||||||
|
string = build(selection); |
||||||
|
start = caretPosition; |
||||||
|
len = string.block.length; |
||||||
|
len -= fixIeBug(string.block); |
||||||
|
} else { |
||||||
|
string = build(selection); |
||||||
|
start = caretPosition + string.block.length ; |
||||||
|
len = 0; |
||||||
|
start -= fixIeBug(string.block); |
||||||
|
} |
||||||
|
if ((selection === '' && string.replaceWith === '')) { |
||||||
|
caretOffset += fixOperaBug(string.block); |
||||||
|
|
||||||
|
start = caretPosition + string.openWith.length; |
||||||
|
len = string.block.length - string.openWith.length - string.closeWith.length; |
||||||
|
|
||||||
|
caretOffset = $$.val().substring(caretPosition, $$.val().length).length; |
||||||
|
caretOffset -= fixOperaBug($$.val().substring(0, caretPosition)); |
||||||
|
} |
||||||
|
$.extend(hash, { caretPosition:caretPosition, scrollPosition:scrollPosition } ); |
||||||
|
|
||||||
|
if (string.block !== selection && abort === false) { |
||||||
|
insert(string.block); |
||||||
|
set(start, len); |
||||||
|
} else { |
||||||
|
caretOffset = -1; |
||||||
|
} |
||||||
|
get(); |
||||||
|
|
||||||
|
$.extend(hash, { line:'', selection:selection }); |
||||||
|
|
||||||
|
// callbacks after insertion
|
||||||
|
if (ctrlKey === true && shiftKey === true) { |
||||||
|
prepare(clicked.afterMultiInsert); |
||||||
|
} |
||||||
|
prepare(clicked.afterInsert); |
||||||
|
prepare(options.afterInsert); |
||||||
|
|
||||||
|
// refresh preview if opened
|
||||||
|
if (previewWindow && options.previewAutoRefresh) { |
||||||
|
refreshPreview();
|
||||||
|
} |
||||||
|
|
||||||
|
// reinit keyevent
|
||||||
|
shiftKey = altKey = ctrlKey = abort = false; |
||||||
|
} |
||||||
|
|
||||||
|
// Substract linefeed in Opera
|
||||||
|
function fixOperaBug(string) { |
||||||
|
if ($.browser.opera) { |
||||||
|
return string.length - string.replace(/\n*/g, '').length; |
||||||
|
} |
||||||
|
return 0; |
||||||
|
} |
||||||
|
// Substract linefeed in IE
|
||||||
|
function fixIeBug(string) { |
||||||
|
if ($.browser.msie) { |
||||||
|
return string.length - string.replace(/\r*/g, '').length; |
||||||
|
} |
||||||
|
return 0; |
||||||
|
} |
||||||
|
|
||||||
|
// add markup
|
||||||
|
function insert(block) {
|
||||||
|
if (document.selection) { |
||||||
|
var newSelection = document.selection.createRange(); |
||||||
|
newSelection.text = block; |
||||||
|
} else { |
||||||
|
$$.val($$.val().substring(0, caretPosition) + block + $$.val().substring(caretPosition + selection.length, $$.val().length)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// set a selection
|
||||||
|
function set(start, len) { |
||||||
|
if (textarea.createTextRange){ |
||||||
|
// quick fix to make it work on Opera 9.5
|
||||||
|
if ($.browser.opera && $.browser.version >= 9.5 && len == 0) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
range = textarea.createTextRange(); |
||||||
|
range.collapse(true); |
||||||
|
range.moveStart('character', start);
|
||||||
|
range.moveEnd('character', len);
|
||||||
|
range.select(); |
||||||
|
} else if (textarea.setSelectionRange ){ |
||||||
|
textarea.setSelectionRange(start, start + len); |
||||||
|
} |
||||||
|
textarea.scrollTop = scrollPosition; |
||||||
|
textarea.focus(); |
||||||
|
} |
||||||
|
|
||||||
|
// get the selection
|
||||||
|
function get() { |
||||||
|
textarea.focus(); |
||||||
|
|
||||||
|
scrollPosition = textarea.scrollTop; |
||||||
|
if (document.selection) { |
||||||
|
selection = document.selection.createRange().text; |
||||||
|
if ($.browser.msie) { // ie
|
||||||
|
var range = document.selection.createRange(), rangeCopy = range.duplicate(); |
||||||
|
rangeCopy.moveToElementText(textarea); |
||||||
|
caretPosition = -1; |
||||||
|
while(rangeCopy.inRange(range)) { // fix most of the ie bugs with linefeeds...
|
||||||
|
rangeCopy.moveStart('character'); |
||||||
|
caretPosition ++; |
||||||
|
} |
||||||
|
} else { // opera
|
||||||
|
caretPosition = textarea.selectionStart; |
||||||
|
} |
||||||
|
} else { // gecko
|
||||||
|
caretPosition = textarea.selectionStart; |
||||||
|
selection = $$.val().substring(caretPosition, textarea.selectionEnd); |
||||||
|
}
|
||||||
|
return selection; |
||||||
|
} |
||||||
|
|
||||||
|
// open preview window
|
||||||
|
function preview() { |
||||||
|
$('textarea').hide(); |
||||||
|
if (!previewWindow || previewWindow.closed) { |
||||||
|
if (options.previewInWindow) { |
||||||
|
previewWindow = window.open('', 'preview', options.previewInWindow); |
||||||
|
|
||||||
|
} else { |
||||||
|
iFrame = $('<iframe frameborder="0" class="markItUpPreviewFrame"></iframe>'); |
||||||
|
if (options.previewPosition == 'after') { |
||||||
|
iFrame.insertAfter(footer); |
||||||
|
} else { |
||||||
|
iFrame.insertBefore(header); |
||||||
|
}
|
||||||
|
previewWindow = iFrame[iFrame.length-1].contentWindow || frame[iFrame.length-1]; |
||||||
|
} |
||||||
|
} else if (altKey === true) { |
||||||
|
if (iFrame) { |
||||||
|
iFrame.remove(); |
||||||
|
} |
||||||
|
|
||||||
|
previewWindow.close(); |
||||||
|
previewWindow = iFrame = false; |
||||||
|
} |
||||||
|
if (!options.previewAutoRefresh) { |
||||||
|
refreshPreview();
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// refresh Preview window
|
||||||
|
function refreshPreview() { |
||||||
|
$('iframe').width($(window).width()-24) |
||||||
|
.height($(window).height()-49); |
||||||
|
if (previewWindow.document) {
|
||||||
|
try { |
||||||
|
sp = previewWindow.document.documentElement.scrollTop |
||||||
|
} catch(e) { |
||||||
|
sp = 0; |
||||||
|
}
|
||||||
|
previewWindow.document.open(); |
||||||
|
previewWindow.document.write(renderPreview()); |
||||||
|
previewWindow.document.close(); |
||||||
|
previewWindow.document.documentElement.scrollTop = sp; |
||||||
|
} |
||||||
|
if (options.previewInWindow) { |
||||||
|
previewWindow.focus(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function renderPreview() {
|
||||||
|
if (options.previewParserPath !== '') { |
||||||
|
$.ajax( { |
||||||
|
type: 'POST', |
||||||
|
async: false, |
||||||
|
url: options.previewParserPath, |
||||||
|
data: options.previewParserVar+'='+encodeURIComponent($$.val()), |
||||||
|
success: function(data) { |
||||||
|
phtml = localize(data, 1);
|
||||||
|
} |
||||||
|
} ); |
||||||
|
} else { |
||||||
|
if (!template) { |
||||||
|
$.ajax( { |
||||||
|
async: false, |
||||||
|
url: options.previewTemplatePath, |
||||||
|
success: function(data) { |
||||||
|
template = localize(data, 1);
|
||||||
|
} |
||||||
|
} ); |
||||||
|
} |
||||||
|
phtml = template.replace(/<!-- content -->/g, $$.val()); |
||||||
|
} |
||||||
|
if(window.uniboard){ |
||||||
|
window.uniboard.setPreference("html", $('textarea').val()); |
||||||
|
}; |
||||||
|
|
||||||
|
$("#fakebar").hide(); |
||||||
|
$("#menu").hide(); |
||||||
|
$("#reset-btn").fadeIn(500).data("hidden", false) |
||||||
|
.animate({ |
||||||
|
top:-12 |
||||||
|
},1500) |
||||||
|
.mouseover(function(){ |
||||||
|
$(this).css({ |
||||||
|
top:0 |
||||||
|
}); |
||||||
|
}) |
||||||
|
.mouseout(function(){ |
||||||
|
$(this).css({ |
||||||
|
top:-12 |
||||||
|
}); |
||||||
|
|
||||||
|
if($(this).data("hidden")){ |
||||||
|
$(this).css({top:0}) |
||||||
|
}; |
||||||
|
}); |
||||||
|
return phtml; |
||||||
|
} |
||||||
|
|
||||||
|
// set keys pressed
|
||||||
|
function keyPressed(e) {
|
||||||
|
shiftKey = e.shiftKey; |
||||||
|
altKey = e.altKey; |
||||||
|
ctrlKey = (!(e.altKey && e.ctrlKey)) ? e.ctrlKey : false; |
||||||
|
|
||||||
|
if (e.type === 'keydown') { |
||||||
|
if (ctrlKey === true) { |
||||||
|
li = $("a[accesskey="+String.fromCharCode(e.keyCode)+"]", header).parent('li'); |
||||||
|
if (li.length !== 0) { |
||||||
|
ctrlKey = false; |
||||||
|
li.triggerHandler('mouseup'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
if (e.keyCode === 13 || e.keyCode === 10) { // Enter key
|
||||||
|
if (ctrlKey === true) { // Enter + Ctrl
|
||||||
|
ctrlKey = false; |
||||||
|
markup(options.onCtrlEnter); |
||||||
|
return options.onCtrlEnter.keepDefault; |
||||||
|
} else if (shiftKey === true) { // Enter + Shift
|
||||||
|
shiftKey = false; |
||||||
|
markup(options.onShiftEnter); |
||||||
|
return options.onShiftEnter.keepDefault; |
||||||
|
} else { // only Enter
|
||||||
|
markup(options.onEnter); |
||||||
|
return options.onEnter.keepDefault; |
||||||
|
} |
||||||
|
} |
||||||
|
if (e.keyCode === 9) { // Tab key
|
||||||
|
if (shiftKey == true || ctrlKey == true || altKey == true) { // Thx Dr Floob.
|
||||||
|
return false;
|
||||||
|
} |
||||||
|
if (caretOffset !== -1) { |
||||||
|
get(); |
||||||
|
caretOffset = $$.val().length - caretOffset; |
||||||
|
set(caretOffset, 0); |
||||||
|
caretOffset = -1; |
||||||
|
return false; |
||||||
|
} else { |
||||||
|
markup(options.onTab); |
||||||
|
return options.onTab.keepDefault; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
init(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
$.fn.markItUpRemove = function() { |
||||||
|
return this.each(function() { |
||||||
|
$$ = $(this).unbind().removeClass('markItUpEditor'); |
||||||
|
$$.parent('div').parent('div.markItUp').parent('div').replaceWith($$); |
||||||
|
} |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
$.markItUp = function(settings) { |
||||||
|
var options = { target:false }; |
||||||
|
$.extend(options, settings); |
||||||
|
if (options.target) { |
||||||
|
return $(options.target).each(function() { |
||||||
|
$(this).focus(); |
||||||
|
$(this).trigger('insertion', [options]); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
$('textarea').trigger('insertion', [options]); |
||||||
|
} |
||||||
|
}; |
||||||
|
})(jQuery); |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,62 @@ |
|||||||
|
markItUp! 1.1.5 |
||||||
|
|
||||||
|
CHANGE LOG |
||||||
|
markItUp! 1.1.5 2009-05-01 |
||||||
|
- Modified: http://drupal.org/project/wysiwyg compatibility |
||||||
|
- Modified: Alt/Ctrl/Alt+Tab are now disabled |
||||||
|
|
||||||
|
markItUp! 1.1.4 2008-12-03 |
||||||
|
- Fixed: Extra quote deleted line 95 |
||||||
|
|
||||||
|
markItUp! 1.1.3 2008-09-12 |
||||||
|
- Fixed: IE7 preview problem |
||||||
|
|
||||||
|
markItUp! 1.1.2 2008-07-17 |
||||||
|
- Fixed: Quick fix for Opera 9.5 caret position problem after insertion |
||||||
|
|
||||||
|
markItUp! 1.1.1 2008-06-02 |
||||||
|
- Fixed: Key events status are passed to callbacks properly |
||||||
|
- Improved: ScrollPosition is kept in the preview when its refreshed |
||||||
|
|
||||||
|
markItUp! 1.1.0 2008-05-04 |
||||||
|
- Modified: Textarea's id is no more moved to the main container |
||||||
|
- Modified: NameSpace Span become a Div to remain strict |
||||||
|
- Added: Relative path to the script is computed |
||||||
|
- Added: Relative path to the script passed to callbacks |
||||||
|
- Added: Global instance ID property |
||||||
|
- Added: $(element).markItUpRemove() to remove markItUp! |
||||||
|
- Added: Resize handle is now optional with resizeHandle property |
||||||
|
- Added: Property previewInWindow is added and accept window parameter |
||||||
|
- Added: Property previewPosition is added |
||||||
|
- Modified: Resize handle is no more displayed in Safari to avoid repetition with the native handle |
||||||
|
- Modified: Property previewIframeRefresh become previewAutorefresh |
||||||
|
- Modified: Built-in Html Preview call a template file |
||||||
|
- Improved: Autorefreshing is now apply for preview in window too |
||||||
|
- Improved: Cancel button in prompt window cancel now the whole insertion process |
||||||
|
- Improved: Cleaner markItUp! code added to the DOM |
||||||
|
- Removed: Depreciated preview properties as previewBaseUrl, previewCharset, previewCssPath, previewBodyId, previewBodyClassName |
||||||
|
- Removed: Property previewIframe not longer exists |
||||||
|
- Fixed: "Magic markups" works with line feeds |
||||||
|
- Fixed: Key events are initialized after insertion |
||||||
|
- Fixed: Internet Explorer line feed offset bug |
||||||
|
- Fixed: Shortcut keys on Mac OS |
||||||
|
- Fixed: Ctrl+click works and doesn't open Mac context menu anymore |
||||||
|
- Fixed: Ctrl+click works and doesn't open the page in a new tab anymore |
||||||
|
- Fixed: Minor Css modifications |
||||||
|
|
||||||
|
markItUp! 1.0.3 2008-04-04 |
||||||
|
- Fixed: IE7 Preview empty baseurl problem |
||||||
|
- Fixed: IE7 external targeted insertion |
||||||
|
- Added: Property scrollPosition is passed to callbacks functions |
||||||
|
|
||||||
|
markItUp! 1.0.2 2008-03-31 |
||||||
|
- Fixed: IE7 Html preview problems |
||||||
|
- Fixed: Selection is kept if nothing is inserted |
||||||
|
- Improved: Code minified |
||||||
|
|
||||||
|
markItUp! 1.0.1 2008-03-21 |
||||||
|
- Removed: Global PlaceHolder |
||||||
|
- Modified: Property previewCharset is setted to "utf-8" by default |
||||||
|
|
||||||
|
markItUp! 1.0.0 2008-03-01 |
||||||
|
- First public release |
||||||
|
After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 667 B |
|
After Width: | Height: | Size: 516 B |
|
After Width: | Height: | Size: 223 B |
|
After Width: | Height: | Size: 343 B |
|
After Width: | Height: | Size: 606 B |
|
After Width: | Height: | Size: 537 B |
|
After Width: | Height: | Size: 269 B |
@ -0,0 +1,27 @@ |
|||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// markItUp!
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Copyright (C) 2008 Jay Salvat
|
||||||
|
// http://markitup.jaysalvat.com/
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Html tags
|
||||||
|
// http://en.wikipedia.org/wiki/html
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Basic set. Feel free to add more tags
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
mySettings = {
|
||||||
|
onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'}, |
||||||
|
onCtrlEnter: {keepDefault:false, openWith:'\n<p>', closeWith:'</p>'}, |
||||||
|
onTab: {keepDefault:false, replaceWith:' '}, |
||||||
|
markupSet: [
|
||||||
|
{name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' }, |
||||||
|
{name:'Italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)' }, |
||||||
|
{name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' }, |
||||||
|
{separator:'---------------' }, |
||||||
|
{name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' }, |
||||||
|
{name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' }, |
||||||
|
{separator:'---------------' }, |
||||||
|
{name:'Clean', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },
|
||||||
|
{name:'Preview', className:'preview', call:'preview'} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
/* ------------------------------------------------------------------- |
||||||
|
// markItUp! |
||||||
|
// By Jay Salvat - http://markitup.jaysalvat.com/ |
||||||
|
// ------------------------------------------------------------------*/ |
||||||
|
.markItUp .markItUpButton1 a { |
||||||
|
background-image:url(images/bold.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton2 a { |
||||||
|
background-image:url(images/italic.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton3 a { |
||||||
|
background-image:url(images/stroke.png); |
||||||
|
} |
||||||
|
|
||||||
|
.markItUp .markItUpButton4 a { |
||||||
|
background-image:url(images/picture.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton5 a { |
||||||
|
background-image:url(images/link.png); |
||||||
|
} |
||||||
|
|
||||||
|
.markItUp .markItUpButton6 a { |
||||||
|
background-image:url(images/clean.png); |
||||||
|
} |
||||||
|
.markItUp .preview a { |
||||||
|
background-image:url(images/preview.png); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 276 B |
|
After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 306 B |
|
After Width: | Height: | Size: 293 B |
|
After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 516 B |
|
After Width: | Height: | Size: 223 B |
|
After Width: | Height: | Size: 343 B |
|
After Width: | Height: | Size: 344 B |
|
After Width: | Height: | Size: 248 B |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 361 B |
|
After Width: | Height: | Size: 606 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 269 B |
@ -0,0 +1,11 @@ |
|||||||
|
Markup language: |
||||||
|
Html |
||||||
|
|
||||||
|
Description: |
||||||
|
A basic Html markup set with Headings, Paragraph, Bold, Italic, Stroke through, Picture, Link, List, Clean button, Preview button. |
||||||
|
|
||||||
|
Install: |
||||||
|
- Download the zip file |
||||||
|
- Unzip it in your markItUp! sets folder |
||||||
|
- Modify your JS link to point at this set.js |
||||||
|
- Modify your CSS link to point at this style.css |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// markItUp!
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Copyright (C) 2008 Jay Salvat
|
||||||
|
// http://markitup.jaysalvat.com/
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Html tags
|
||||||
|
// http://en.wikipedia.org/wiki/html
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// Basic set. Feel free to add more tags
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
var lang = ""; |
||||||
|
|
||||||
|
if(window.sankore){ |
||||||
|
try{ |
||||||
|
lang = sankore.locale().substr(0,2); |
||||||
|
sankoreLang[lang].welcome; |
||||||
|
} catch(e){ |
||||||
|
lang = "en"; |
||||||
|
} |
||||||
|
} else
|
||||||
|
lang = "en"; |
||||||
|
|
||||||
|
mySettings = { |
||||||
|
onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'}, |
||||||
|
onCtrlEnter: {keepDefault:false, openWith:'\n<p>', closeWith:'</p>\n'}, |
||||||
|
onTab: {keepDefault:false, openWith:' '}, |
||||||
|
markupSet: [ |
||||||
|
{name:'Heading 1', key:'1', openWith:'<h1(!( class="[![Class]!]")!)>', closeWith:'</h1>', placeHolder:sankoreLang[lang].enter_title}, |
||||||
|
{name:'Heading 2', key:'2', openWith:'<h2(!( class="[![Class]!]")!)>', closeWith:'</h2>', placeHolder:sankoreLang[lang].enter_title}, |
||||||
|
{name:'Heading 3', key:'3', openWith:'<h3(!( class="[![Class]!]")!)>', closeWith:'</h3>', placeHolder:sankoreLang[lang].enter_title}, |
||||||
|
{name:'Heading 4', key:'4', openWith:'<h4(!( class="[![Class]!]")!)>', closeWith:'</h4>', placeHolder:sankoreLang[lang].enter_title}, |
||||||
|
{name:'Heading 5', key:'5', openWith:'<h5(!( class="[![Class]!]")!)>', closeWith:'</h5>', placeHolder:sankoreLang[lang].enter_title}, |
||||||
|
{name:'Heading 6', key:'6', openWith:'<h6(!( class="[![Class]!]")!)>', closeWith:'</h6>', placeHolder:sankoreLang[lang].enter_title}, |
||||||
|
{name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'</p>'}, |
||||||
|
{separator:'---------------'}, |
||||||
|
{name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)'}, |
||||||
|
{name:'Italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)'}, |
||||||
|
{name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>'}, |
||||||
|
{separator:'---------------'}, |
||||||
|
{name:'Ul', openWith:'<ul>\n', closeWith:'</ul>\n'}, |
||||||
|
{name:'Ol', openWith:'<ol>\n', closeWith:'</ol>\n'}, |
||||||
|
{name:'Li', openWith:'<li>', closeWith:'</li>'}, |
||||||
|
{separator:'---------------'}, |
||||||
|
{name:'Picture', key:'P', replaceWith:'<img src="[![' + sankoreLang[lang].source + ':!:http://]!]" alt="[![' + sankoreLang[lang].alt_text + ']!]" />'}, |
||||||
|
{name:'Link', key:'L', openWith:'<a target="_blank" href="[![' + sankoreLang[lang].link + ':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:sankoreLang[lang].text_to_link}, |
||||||
|
{separator:'---------------'}, |
||||||
|
//{name:'Editor', className:'clean', replaceWith:function() { $('textarea').show(); $('iframe').remove();} },
|
||||||
|
{name:'', className:'preview', call:'preview'} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
/* ------------------------------------------------------------------- |
||||||
|
// markItUp! |
||||||
|
// By Jay Salvat - http://markitup.jaysalvat.com/ |
||||||
|
// ------------------------------------------------------------------*/ |
||||||
|
.markItUp .markItUpButton1 a { |
||||||
|
background-image:url(images/h1.png); |
||||||
|
background-repeat:no-repeat; |
||||||
|
} |
||||||
|
.markItUp .markItUpButton2 a { |
||||||
|
background-image:url(images/h2.png); |
||||||
|
background-repeat:no-repeat; |
||||||
|
} |
||||||
|
.markItUp .markItUpButton3 a { |
||||||
|
background-image:url(images/h3.png); |
||||||
|
background-repeat:no-repeat; |
||||||
|
} |
||||||
|
.markItUp .markItUpButton4 a { |
||||||
|
background-image:url(images/h4.png); |
||||||
|
background-repeat:no-repeat; |
||||||
|
} |
||||||
|
.markItUp .markItUpButton5 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/h5.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton6 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/h6.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton7 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/paragraph.png); |
||||||
|
} |
||||||
|
|
||||||
|
.markItUp .markItUpButton8 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/bold.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton9 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/italic.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton10 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/stroke.png); |
||||||
|
} |
||||||
|
|
||||||
|
.markItUp .markItUpButton11 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/list-bullet.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton12 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/list-numeric.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton13 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/list-item.png); |
||||||
|
} |
||||||
|
|
||||||
|
.markItUp .markItUpButton14 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/picture.png); |
||||||
|
} |
||||||
|
.markItUp .markItUpButton15 a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
background-image:url(images/link.png); |
||||||
|
} |
||||||
|
|
||||||
|
.markItUp .preview a { |
||||||
|
background-repeat:no-repeat; |
||||||
|
margin-top:-2px; |
||||||
|
width:46px; |
||||||
|
height:20px; |
||||||
|
background-image:url(images/preview.png); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 394 B |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 487 B |
|
After Width: | Height: | Size: 241 B |
|
After Width: | Height: | Size: 43 B |
|
After Width: | Height: | Size: 240 B |
@ -0,0 +1,7 @@ |
|||||||
|
Skin: |
||||||
|
MacOSX inspired look & feel |
||||||
|
|
||||||
|
Install: |
||||||
|
- Download the zip file |
||||||
|
- Unzip it in your markItUp! skins folder |
||||||
|
- Modify your CSS link to point at this skin |
||||||
@ -0,0 +1,139 @@ |
|||||||
|
/* ------------------------------------------------------------------- |
||||||
|
// markItUp! Universal MarkUp Engine, JQuery plugin |
||||||
|
// By Jay Salvat - http://markitup.jaysalvat.com/ |
||||||
|
// ------------------------------------------------------------------*/ |
||||||
|
body { |
||||||
|
/* background-color:#3875D7;*/ |
||||||
|
} |
||||||
|
.markItUp { |
||||||
|
background-color:#3875D7; |
||||||
|
border:1px solid #3C769D; |
||||||
|
padding:13px; |
||||||
|
} |
||||||
|
.markItUp * { |
||||||
|
margin:0px; padding:0px; |
||||||
|
outline:none; |
||||||
|
} |
||||||
|
.markItUp a:link, |
||||||
|
.markItUp a:visited { |
||||||
|
color:#000; |
||||||
|
text-decoration:none; |
||||||
|
} |
||||||
|
.markItUp { |
||||||
|
width:670px; |
||||||
|
margin:5px 0 5px 0; |
||||||
|
} |
||||||
|
.markItUpContainer { |
||||||
|
width:670px; |
||||||
|
font:11px Verdana, Arial, Helvetica, sans-serif; |
||||||
|
background-image:url(images/bg-container.png); |
||||||
|
} |
||||||
|
.markItUpEditor { |
||||||
|
font:12px 'Courier New', Courier, monospace; |
||||||
|
padding:5px; |
||||||
|
margin:0px 11px 0px 11px; |
||||||
|
width:640px; |
||||||
|
height:320px; |
||||||
|
clear:both; display:block; |
||||||
|
line-height:18px; |
||||||
|
overflow:auto; |
||||||
|
border:0px solid white; |
||||||
|
} |
||||||
|
.markItUpPreviewFrame { |
||||||
|
overflow:auto; |
||||||
|
background-color:#FFFFFF; |
||||||
|
width:99.9%; |
||||||
|
height:350px; |
||||||
|
margin:5px 0; |
||||||
|
} |
||||||
|
.markItUpHeader { |
||||||
|
width:650px; |
||||||
|
padding:15px 0px 0px 20px; |
||||||
|
height:25px; |
||||||
|
background-image:url(images/bg-header.png); |
||||||
|
} |
||||||
|
.markItUpFooter { |
||||||
|
width:670px; |
||||||
|
height:25px; |
||||||
|
background-image:url(images/bg-footer.png); |
||||||
|
padding-bottom:10px; |
||||||
|
} |
||||||
|
.markItUpResizeHandle { |
||||||
|
margin:0px 12px 5px auto; |
||||||
|
overflow:hidden; |
||||||
|
width:12px; height:12px; |
||||||
|
position:relative; |
||||||
|
background-image:url(images/handle.png); |
||||||
|
cursor:n-resize; |
||||||
|
} |
||||||
|
/***************************************************************************************/ |
||||||
|
/* first row of buttons */ |
||||||
|
.markItUpHeader ul li { |
||||||
|
list-style:none; |
||||||
|
float:left; |
||||||
|
position:relative; |
||||||
|
} |
||||||
|
.markItUpHeader ul li:hover > ul{ |
||||||
|
display:block; |
||||||
|
} |
||||||
|
.markItUpHeader ul .markItUpDropMenu { |
||||||
|
background:transparent url(images/menu.png) no-repeat 115% 50%; |
||||||
|
margin-right:5px; |
||||||
|
} |
||||||
|
.markItUpHeader ul .markItUpDropMenu li { |
||||||
|
margin-right:0px; |
||||||
|
} |
||||||
|
/* next rows of buttons */ |
||||||
|
.markItUpHeader ul ul { |
||||||
|
display:none; |
||||||
|
position:absolute; |
||||||
|
top:18px; left:0px; |
||||||
|
background:#FFF; |
||||||
|
border:1px solid #000; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul li { |
||||||
|
float:none; |
||||||
|
border-bottom:1px solid #000; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul .markItUpDropMenu { |
||||||
|
background:#FFF url(images/submenu.png) no-repeat 100% 50%; |
||||||
|
} |
||||||
|
.markItUpHeader ul .markItUpSeparator { |
||||||
|
margin:0 10px; |
||||||
|
width:1px; |
||||||
|
height:16px; |
||||||
|
overflow:hidden; |
||||||
|
background-color:#CCC; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul .markItUpSeparator { |
||||||
|
width:auto; height:1px; |
||||||
|
margin:0px; |
||||||
|
} |
||||||
|
/* next rows of buttons */ |
||||||
|
.markItUpHeader ul ul ul { |
||||||
|
position:absolute; |
||||||
|
top:-1px; left:150px; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul ul li { |
||||||
|
float:none; |
||||||
|
} |
||||||
|
.markItUpHeader ul a { |
||||||
|
display:block; |
||||||
|
width:16px; height:16px; |
||||||
|
text-indent:-10000px; |
||||||
|
background-repeat:no-repeat; |
||||||
|
padding:3px; |
||||||
|
margin:0px; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul a { |
||||||
|
display:block; |
||||||
|
padding-left:0px; |
||||||
|
text-indent:0; |
||||||
|
width:120px; |
||||||
|
padding:5px 5px 5px 25px; |
||||||
|
background-position:2px 50%; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul a:hover { |
||||||
|
color:#FFF; |
||||||
|
background-color:#3875D7; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 240 B |
@ -0,0 +1,149 @@ |
|||||||
|
/* ------------------------------------------------------------------- |
||||||
|
// markItUp! Universal MarkUp Engine, JQuery plugin |
||||||
|
// By Jay Salvat - http://markitup.jaysalvat.com/ |
||||||
|
// ------------------------------------------------------------------*/ |
||||||
|
.markItUp * { |
||||||
|
margin:0px; padding:0px; |
||||||
|
outline:none; |
||||||
|
} |
||||||
|
.markItUp a:link, |
||||||
|
.markItUp a:visited { |
||||||
|
color:#000; |
||||||
|
text-decoration:none; |
||||||
|
} |
||||||
|
iframe { |
||||||
|
border: 0px solid #ffffff; |
||||||
|
} |
||||||
|
.markItUp { |
||||||
|
width:97%; |
||||||
|
margin:5px 10px 5px 5px; |
||||||
|
border:5px solid #F5F5F5; |
||||||
|
} |
||||||
|
.markItUpContainer { |
||||||
|
border:1px solid #3C769D; |
||||||
|
background:#FFF url(images/bg-container.png) repeat-x top left; |
||||||
|
padding:5px 5px 2px 5px; |
||||||
|
font:11px Verdana, Arial, Helvetica, sans-serif; |
||||||
|
} |
||||||
|
.markItUpEditor { |
||||||
|
width: 100%; |
||||||
|
font:12px 'Courier New', Courier, monospace; |
||||||
|
padding:5px 5px 5px 15px; |
||||||
|
border:3px solid #3C769D; |
||||||
|
width:643px; |
||||||
|
height:320px; |
||||||
|
background-repeat:no-repeat; |
||||||
|
clear:both; display:block; |
||||||
|
line-height:18px; |
||||||
|
overflow:auto; |
||||||
|
} |
||||||
|
.markItUpPreviewFrame { |
||||||
|
overflow:auto; |
||||||
|
width:99.9%; |
||||||
|
height:300px; |
||||||
|
margin:0px 0; |
||||||
|
} |
||||||
|
.markItUpFooter { |
||||||
|
width:100%; |
||||||
|
cursor:n-resize; |
||||||
|
} |
||||||
|
.markItUpResizeHandle { |
||||||
|
overflow:hidden; |
||||||
|
width:22px; height:5px; |
||||||
|
margin-left:auto; |
||||||
|
margin-right:auto; |
||||||
|
background-image:url(images/handle.png); |
||||||
|
cursor:n-resize; |
||||||
|
} |
||||||
|
/***************************************************************************************/ |
||||||
|
/* first row of buttons */ |
||||||
|
.markItUpHeader ul li { |
||||||
|
list-style:none; |
||||||
|
float:left; |
||||||
|
position:relative; |
||||||
|
} |
||||||
|
.markItUpHeader ul li ul{ |
||||||
|
display:none; |
||||||
|
} |
||||||
|
.markItUpHeader ul li:hover > ul{ |
||||||
|
display:block; |
||||||
|
} |
||||||
|
.markItUpHeader ul .markItUpDropMenu { |
||||||
|
background:transparent url(images/menu.png) no-repeat 115% 50%; |
||||||
|
margin-right:5px; |
||||||
|
} |
||||||
|
.markItUpHeader ul .markItUpDropMenu li { |
||||||
|
margin-right:0px; |
||||||
|
} |
||||||
|
.markItUpHeader ul .markItUpSeparator { |
||||||
|
margin:0 10px; |
||||||
|
width:1px; |
||||||
|
height:16px; |
||||||
|
overflow:hidden; |
||||||
|
background-color:#CCC; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul .markItUpSeparator { |
||||||
|
width:auto; height:1px; |
||||||
|
margin:0px; |
||||||
|
} |
||||||
|
/* next rows of buttons */ |
||||||
|
.markItUpHeader ul ul { |
||||||
|
display:none; |
||||||
|
position:absolute; |
||||||
|
top:18px; left:0px; |
||||||
|
background:#F5F5F5; |
||||||
|
border:1px solid #3C769D; |
||||||
|
height:inherit; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul li { |
||||||
|
float:none; |
||||||
|
border-bottom:1px solid #3C769D; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul .markItUpDropMenu { |
||||||
|
background:#F5F5F5 url(images/submenu.png) no-repeat 100% 50%; |
||||||
|
} |
||||||
|
/* next rows of buttons */ |
||||||
|
.markItUpHeader ul ul ul { |
||||||
|
position:absolute; |
||||||
|
top:-1px; left:150px; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul ul li { |
||||||
|
float:none; |
||||||
|
} |
||||||
|
.markItUpHeader ul a { |
||||||
|
display:block; |
||||||
|
width:16px; height:16px; |
||||||
|
text-indent:-10000px; |
||||||
|
background-repeat:no-repeat; |
||||||
|
padding:3px; |
||||||
|
margin:0px; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul a { |
||||||
|
display:block; |
||||||
|
padding-left:0px; |
||||||
|
text-indent:0; |
||||||
|
width:120px; |
||||||
|
padding:5px 5px 5px 25px; |
||||||
|
background-position:2px 50%; |
||||||
|
} |
||||||
|
.markItUpHeader ul ul a:hover { |
||||||
|
color:#FFF; |
||||||
|
background-color:#3C769D; |
||||||
|
} |
||||||
|
/***************************************************************************************/ |
||||||
|
.html .markItUpEditor { |
||||||
|
background-image:url(images/bg-editor-html.png); |
||||||
|
} |
||||||
|
.markdown .markItUpEditor { |
||||||
|
background-image:url(images/bg-editor-markdown.png); |
||||||
|
} |
||||||
|
.textile .markItUpEditor { |
||||||
|
background-image:url(images/bg-editor-textile.png); |
||||||
|
} |
||||||
|
.bbcode .markItUpEditor { |
||||||
|
background-image:url(images/bg-editor-bbcode.png); |
||||||
|
} |
||||||
|
.wiki .markItUpEditor, |
||||||
|
.dotclear .markItUpEditor { |
||||||
|
background-image:url(images/bg-editor-wiki.png); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 240 B |
@ -0,0 +1,4 @@ |
|||||||
|
body { |
||||||
|
font:70% Verdana, Arial, Helvetica, sans-serif; |
||||||
|
color: black; |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
|
<head> |
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||
|
<title>markItUp! preview template</title> |
||||||
|
<link rel="stylesheet" type="text/css" href="~/templates/preview.css" /> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<!-- content --> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,200 @@ |
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
||||||
|
<title>GraphMe - User's guide.</title> |
||||||
|
<link rel="stylesheet" type="text/css" href="Style/Guide_Utilisateur.css"/> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<h1>GraphMe</h1> |
||||||
|
<img src="Images/GraphMe.png"/> |
||||||
|
<h1>User's guide</h1> |
||||||
|
<ol id="Sommaire"> |
||||||
|
<li><a href="#Introduction">Introduction</a></li> |
||||||
|
<li><a href="#Installation">Installation</a></li> |
||||||
|
<li><a href="#AfficherLeWidget">Review widget</a></li> |
||||||
|
<li><a href="#PresentationAffichage">View presentation</a></li> |
||||||
|
<li><a href="#DessinerFonction">Drawing the function</a></li> |
||||||
|
<li><a href="#DeplacerAffichage">Offset function</a></li> |
||||||
|
<li><a href="#MenuOptions">The options menu</a></li> |
||||||
|
<li><a href="#MenuOutils">the tools menu</a></li> |
||||||
|
<li><a href="#PlusieursFonctions">Drawing some functions</a></li> |
||||||
|
<li><a href="#MaJ">GraphMe update</a></li> |
||||||
|
<li><a href="#Contact">Contact</a></li> |
||||||
|
</ol> |
||||||
|
<h2 id="Introduction">1. Introduction</h2> |
||||||
|
<p> |
||||||
|
GraphMe is a app that is developed using html, javascript and css. It can be used for drawing graphs. This document must explain how to use GraphMe. This app have a different functions and some useful advices for users. |
||||||
|
</p> |
||||||
|
|
||||||
|
<h2 id="Installation">2. Installation</h2> |
||||||
|
<p> |
||||||
|
This widget can be downloaded from the Internet in a packed format. Before using it must be unpacked. GraphMe was developed for using in web-browsers and integration in Sankore. To add this app in Sankore you should copy folder named "GraphMe.wgt" in "../library/interactive/". For example, on "windows OS" GraphMe must be in folder with following path: "C: / Program Files / Sankore 4/library/interactive/GraphMe.wgt". If you have no Sankore then you can get it on <a href="http://getuniboard.com">http://getuniboard.com/</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<h2 id="AfficherLeWidget">3. Review widget</h2> |
||||||
|
<div class="droite"><img src="Images/Guide_Navigateur.png"/>Display GraphMe in browsers</div> |
||||||
|
<p> |
||||||
|
A) To display this app in browser just enough to open the file named "Grapheur.xhtml" (it's in root folder) with your browser. But some browsers can not display app correctly. Below is the list of browsers that are able to display app: |
||||||
|
</p> |
||||||
|
<ul> |
||||||
|
<li>Mozilla Firefox (3.5) : Everything works fine.</li> |
||||||
|
<li>Internet Explorer (8.0) : Cannot open a widget, because .xhtml format is not recognized.</li> |
||||||
|
<li>Internet Explorer (pré-version 9.0) : Widget works but just using SVG. Canvas not supported yet.</li> |
||||||
|
<li>Konqueror (4.3.4) : Widget can be opened but there is some problems with displaying. It still occur when choosed display method "canvas".</li> |
||||||
|
<li>Opera (10.51) : Widget quite useful.</li> |
||||||
|
<li>Google Chrome (4.1) : Everything works very nice! 3D-display is faster as compared with other browsers.</li> |
||||||
|
</ul> |
||||||
|
<p> |
||||||
|
B) To open widget in Sankore you should first open folder "Application" that is at the left of the screen. Then you must find this app and add it to the page. |
||||||
|
</p> |
||||||
|
<div class="gauche"><img src="Images/Guide_Uniboard.png"/>Display GraphMe in Sankore</div> |
||||||
|
<img src="Images/Guide_AjouterWidget.png"/> |
||||||
|
|
||||||
|
<h2 id="PresentationAffichage">4. View presentation</h2> |
||||||
|
<ol> |
||||||
|
<li>Place for functions display.</li> |
||||||
|
<li>Button for beginning the work.</li> |
||||||
|
<li>Button for adding new function or for getting access to functions history.</li> |
||||||
|
<li>Display.</li> |
||||||
|
<li>Parameters that define the part of graph that will be displayed.</li> |
||||||
|
<li>Buttons for zoom.</li> |
||||||
|
<li>Button for color changing.</li> |
||||||
|
<li>Buttons for access to menu.</li> |
||||||
|
<li>Tab-button that toggles 2D and 3D modes.</li> |
||||||
|
<li>Button for maximize the widget.</li> |
||||||
|
</ol> |
||||||
|
<img src="Images/Guide_Presentation.png"/> |
||||||
|
|
||||||
|
<h2 id="DessinerFonction">5. Drawing the function</h2> |
||||||
|
<p> |
||||||
|
To draw mathematical function just enter it at the top of widget and press button "Display". You can use different functions and predefined constants. |
||||||
|
</p> |
||||||
|
<h4>Basic operations:</h4> |
||||||
|
<ul> |
||||||
|
<li>Addition → +</li> |
||||||
|
<li>Subtraction → -</li> |
||||||
|
<li>Multiplication → *</li> |
||||||
|
<li>Division → /</li> |
||||||
|
<li>Mod → %</li> |
||||||
|
</ul> |
||||||
|
<h4>Trigonometric functions</h4> |
||||||
|
<ul> |
||||||
|
<li>sin(x), cos(x), tan(x), cot(x)</li> |
||||||
|
<li>asin(x), acos(x), atan(x), acot(x) ( ou arcsin(x), arccos(x), arctan(x), arccot(x) )</li> |
||||||
|
</ul> |
||||||
|
<h4>Square roots and degrees</h4> |
||||||
|
<ul> |
||||||
|
<li>sqrt(x) is square root from x</li> |
||||||
|
<li>pow(x, y). Variable x to the power y. For examle:<br/>x² → pow(x, 2)<br/>(x+3)⁵ → pow((x+3), 5)</li> |
||||||
|
<li>root(x, y). Root y of x</li> |
||||||
|
</ul> |
||||||
|
<h4>Exponential and logarithm</h4> |
||||||
|
<ul> |
||||||
|
<li>exp(x)</li> |
||||||
|
<li>ln(x) is natural logarithm.</li> |
||||||
|
<li>log(x) is decimal logarithm.</li> |
||||||
|
</ul> |
||||||
|
<h4>Rounding</h4> |
||||||
|
<ul> |
||||||
|
<li>round(x) → rounding to the nearest whole number</li> |
||||||
|
<li>ceil(x) → rounding to the nearest whole number in a big way</li> |
||||||
|
<li>floor(x) → rounding to the nearest whole number the smaller side</li> |
||||||
|
</ul> |
||||||
|
<h4>Other predefined function</h4> |
||||||
|
<ul> |
||||||
|
<li>abs(x) → Absolute number value</li> |
||||||
|
<li>random() → Return random number between 0 and 1</li> |
||||||
|
</ul> |
||||||
|
<h4>Also are available some constants:</h4> |
||||||
|
<ul> |
||||||
|
<li>pi = 4 * atan(1) ≈ 3.141592653589793</li> |
||||||
|
<li>e = exp(1) ≈ 2.718281828459045 </li> |
||||||
|
</ul> |
||||||
|
<p> |
||||||
|
Not always it's easy to understand how to record a required function. Really if anywhere you err then graph will not displayed. Also do not forget about "*" (multiply) to multiply and "." (decimal point) to write point. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
The two-dimensional function must be written as y=[...] and the three-dimensional function nust be written as z=[...]. Other examples are available to use in menu "Help" if you have some difficulties with function definition. |
||||||
|
</p> |
||||||
|
|
||||||
|
<h2 id="DeplacerAffichage">6. Offset function</h2> |
||||||
|
<p> |
||||||
|
Sometimes when you draw the function you don't see all necessary information about this function. In this case you can change position of graph. |
||||||
|
</p> |
||||||
|
<img src="Images/Guide_Deplacement.png"/> |
||||||
|
<p> |
||||||
|
To move the function graph just use a navigation arrows that are in the four edges of the display or mouse move tool (menu Service). |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
To define place to display you should enter a custom values in the left side of the widget. The left value must be less than the right value. In other case graph will not displayed. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
You can increase or decrease the scale of displaying using buttons that are in the left menu. So you'll see more information about function. Zoom can be reset in options. |
||||||
|
</p> |
||||||
|
<h2 id="MenuOptions">7. The options menu</h2> |
||||||
|
<p> |
||||||
|
To open the menu you should click a button "Options" that is in the left of the widget. If you click on this button again then menu will close. There are some buttons for navigation between options. Their short description: |
||||||
|
</p> |
||||||
|
<ul> |
||||||
|
<li>Changing a background image and color. In Sankore changing background theme used for displaying widget on black and white background.</li> |
||||||
|
<li>Display-method used for defining displaying function. There are 6 possibilities: <br/> |
||||||
|
<ol> |
||||||
|
<li>SVG is a vector format of image and it can be built in HTML-page. It's compatible in most of browsers and Sankore support it very well so is it selected default.</li> |
||||||
|
<li>There is a big difference between SVG (image) and display method SVG. If you have a compatibility problems then you should not use this method.</li> |
||||||
|
<li>"Canvas" is a new tag that used in HTML 5.0. It define a area in which you can place some images. This display-method is faster than SVG-method, but Sankore does not fully support it. It's desirable to choose this method when you use no Sankore widget.</li> |
||||||
|
<li>"Canvas" (point) also uses a canvas but draws a points instead of lines.</li> |
||||||
|
<li>XPM format is little known so it's compatible just with a minority of browsers.</li> |
||||||
|
<li>Display method "Uniboard" allows to draw directly on the page using Sankore drawing.</li> |
||||||
|
</ol> |
||||||
|
<img src="Images/Guide_Options.png"/> |
||||||
|
</li> |
||||||
|
<li>Default zoom button returns display into original state. It helps alsoto return to the origin.</li> |
||||||
|
<li>Display options allow to display or not a grid, axis and scale. They make a mapping more readable. Also you can change the thickness of function line.</li> |
||||||
|
<li>Offset of graph not used usually. But if you use it then you can move a mapping in any direction when a center isn't in the right place. It's avaliable in some browsers.</li> |
||||||
|
<li>The accuracy of calculations of the graph will increase or decrease the number of points calculated. The higher the number, the more accuracy. It is useful to set this value to "0.01" if you draw functions like 0.5 * sin (10 * x * x).</li> |
||||||
|
<li>Options in 3D, the display style to choose how the function is designed: with small points or polygons (areas). Most functions are prettier drawing surface between the points calculated. However, it is better to draw points for functions such as the hemisphere: sqrt (12 - x*x - y*y).</li> |
||||||
|
<li>In the last tab you can change such options 3D, as the accuracy of the calculations and the color of the function.</li> |
||||||
|
</ul> |
||||||
|
<h2 id="MenuOutils">8. The tools menu.</h2> |
||||||
|
<p> |
||||||
|
This menu allows you to choose first action of the mouse on the graph. There is a choice of three options: |
||||||
|
</p> |
||||||
|
<ul> |
||||||
|
<li>The selected tool is the default. By moving the mouse, a point moves on the function and the coordinates of this point are shown in the top left of the display.</li> |
||||||
|
<li>The second tool is moving. It allows you to move the chart with the mouse. Just keep clicking on the display and move the mouse. Unfortunately, this tool can be slow on some browsers.</li> |
||||||
|
<li>The third tool is the tangent. This tool draws the tangent to the function at the point where is a mouse cursor.</li> |
||||||
|
</ul> |
||||||
|
<p> |
||||||
|
Then, this menu also allows to calculate a point of the function. Simply enter the coordinate "x" from the point where we want to find the coordinate "y" and press the "Evaluate". For example, if the function is "x * x" and that defined "x = 2", then the point whose coordinate on the X axis is "2" will be to coordinate on the Y axis "4". |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
Another useful tool is the analysis of function. To analyse the function click on "start the analysis". Analyses based on this widget are not 100% reliable, but are complementary to a analysis of function that you are doing yourself. It may be that this tool will be improved in a future version of the widget. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
In this menu there are also tests the display. They can try different methods to display and see if they work on the browser used. |
||||||
|
</p> |
||||||
|
<h2 id="PlusieursFonctions">9. Drawing some functions</h2> |
||||||
|
<p> |
||||||
|
To draw multiple functions simultaneously, click the small "+" button which is located to the right of "View" (point 1). Then, a menu appears. |
||||||
|
</p> |
||||||
|
<img src="Images/Guide_Plus.png"/> |
||||||
|
<p> |
||||||
|
The tabs in this menu can go to the history or the additional features (point 2). To add a function click the button to the right of the current function (point 3). Below is a list that contains all the displayed functions (point 4). To remove a function, just click on the "-" button next to it. It is also possible to change the color of each function separately. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
History can review all the functions that have already been drawn. When you click on a function of history current function replaced by the function of history. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
"Drawing several functions simultaneously" mode is only possible with the display method "canvas" in two dimensions, but the history can be used with all methods of display. |
||||||
|
</p> |
||||||
|
<h2 id="MaJ">10. GraphMe update</h2> |
||||||
|
<p> |
||||||
|
The latest version of the widget can be downloaded from the following page: <a href="http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15">http://gyb.educanet2.ch/tm-widgets/.ws_gen/?15</a>. To update GraphMe, you can also click on "Update" in the options menu. |
||||||
|
</p> |
||||||
|
<h2 id="Contact">11. Contact</h2> |
||||||
|
<p> |
||||||
|
If you want to report a bug, have a suggestion from the widget or just want to ask a question, please contact me by e-mail at: <a href="mailto:yannick.vessaz@gmail.com">yannick.vessaz@gmail.com</a>. |
||||||
|
</p> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
[Dolphin] |
||||||
|
ShowPreview=true |
||||||
|
Timestamp=2010,9,5,0,30,37 |
||||||
|
ViewMode=0 |
||||||
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,332 @@ |
|||||||
|
var ctx |
||||||
|
var centreX, centreY |
||||||
|
var echelle3D = 50 |
||||||
|
var precisionDroite3D = 0.02 |
||||||
|
var precisionFonction3D = 0.2 |
||||||
|
var fonction3D = false |
||||||
|
var angle = Math.PI/8 |
||||||
|
var valeurZoom3D = 1 |
||||||
|
var gauche3D = -6.5 |
||||||
|
var droite3D = 6.5 |
||||||
|
var outilPrecedent = "" |
||||||
|
var rouge3D = 0 |
||||||
|
var vert3D = 1 |
||||||
|
var bleu3D = 2 |
||||||
|
var couleurGenerale = 0 |
||||||
|
|
||||||
|
function activer3D(){ |
||||||
|
if(fonction3D){ // Si activé alors on le désative
|
||||||
|
fonction3D = false |
||||||
|
choixOutil(outilPrecedent) |
||||||
|
document.getElementById('onglet3D').innerHTML = "3D" |
||||||
|
largeur = 500 |
||||||
|
document.getElementById("affichage").style.width = largeur+"px" |
||||||
|
document.getElementById("affichage").style.left = "129px" |
||||||
|
document.getElementById("flecheGauche").style.left = "137px" |
||||||
|
document.getElementById("flecheHaut").style.left = "345px" |
||||||
|
document.getElementById("flecheBas").style.left = "345px" |
||||||
|
document.getElementById("gauche").style.display = "block" |
||||||
|
document.getElementById("gauche3D").style.display = "none" |
||||||
|
var elements = document.getElementsByClassName("menu") |
||||||
|
for(var i=0; i<elements.length; i++){ |
||||||
|
elements[i].style.left = "121px" |
||||||
|
} |
||||||
|
reinitialiserZoom(5) |
||||||
|
} |
||||||
|
else{ // Sinon on l'active
|
||||||
|
fonction3D = true |
||||||
|
outilPrecedent = outil |
||||||
|
choixOutil("deplacement") |
||||||
|
document.getElementById('onglet3D').innerHTML = "2D" |
||||||
|
largeur = 570 |
||||||
|
document.getElementById("affichage").style.width = largeur+"px" |
||||||
|
document.getElementById("affichage").style.left = "59px" |
||||||
|
document.getElementById("flecheGauche").style.left = "67px" |
||||||
|
document.getElementById("flecheHaut").style.left = "290px" |
||||||
|
document.getElementById("flecheBas").style.left = "290px" |
||||||
|
document.getElementById("gauche").style.display = "none" |
||||||
|
document.getElementById("gauche3D").style.display = "block" |
||||||
|
var elements = document.getElementsByClassName("menu") |
||||||
|
for(var i=0; i<elements.length; i++){ |
||||||
|
elements[i].style.left = "61px" |
||||||
|
} |
||||||
|
initialise3D() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function initialise3D() { |
||||||
|
centreX = largeur / 2 |
||||||
|
centreY = hauteur / 2 |
||||||
|
document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>' |
||||||
|
ctx = document.getElementById('canvas').getContext('2d') |
||||||
|
ctx.clearRect(0, 0, 640, 480) |
||||||
|
ctx.fillStyle = "rgba(0, 0, 0, 0.5)" |
||||||
|
ctx.fillRect(0,0,640,480) |
||||||
|
axes() |
||||||
|
} |
||||||
|
|
||||||
|
function dessiner3D(eq){ |
||||||
|
initialise3D() |
||||||
|
if(document.getElementById("selectAffichage3D").value == "points"){ |
||||||
|
var coordX, coordY, coordZ |
||||||
|
for(var x=gauche3D; x<droite3D; x+=precisionFonction3D){ |
||||||
|
for(var y=gauche3D; y<droite3D; y+=precisionFonction3D){ |
||||||
|
coordX = x |
||||||
|
coordY = y |
||||||
|
coordZ = eval(eq) |
||||||
|
if(isNaN(coordZ)){ |
||||||
|
continue |
||||||
|
} |
||||||
|
point3D(coordX, coordY, coordZ) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
else{ |
||||||
|
var x1, y1, z1, x2, y2, z2, x3, y3, z3 |
||||||
|
var x, y |
||||||
|
for(var x1=gauche3D; x1<droite3D; x1+=precisionFonction3D){ |
||||||
|
for(var y1=gauche3D; y1<droite3D; y1+=precisionFonction3D){ |
||||||
|
x = x1 |
||||||
|
y = y1 |
||||||
|
z1 = eval(eq) |
||||||
|
x2 = x1 + precisionFonction3D |
||||||
|
y2 = y1 |
||||||
|
x = x2 |
||||||
|
//y = y2
|
||||||
|
z2 = eval(eq) |
||||||
|
x3 = x2 |
||||||
|
y3 = y2 + precisionFonction3D |
||||||
|
//x = x3
|
||||||
|
y = y3 |
||||||
|
z3 = eval(eq) |
||||||
|
x4 = x3 - precisionFonction3D |
||||||
|
y4 = y3 |
||||||
|
x = x4 |
||||||
|
//y = y4
|
||||||
|
z4 = eval(eq) |
||||||
|
if(isNaN(z1)||isNaN(z2)||isNaN(z3)||isNaN(z4)){ |
||||||
|
continue |
||||||
|
} |
||||||
|
polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Dessine un point à la position (x, y, z)
|
||||||
|
function point3D(x, y, z){
|
||||||
|
var posX = (Math.sin(angle)*x + Math.cos(angle)*y)*echelle3D |
||||||
|
var posZ = -(z - Math.cos(angle)*x/2.6 + Math.sin(angle)*y/2.6)*echelle3D |
||||||
|
|
||||||
|
var opacity = Math.round((1-((5+y*Math.sin(angle)-x*Math.cos(angle)) / 450)*echelle3D)*1000)/1000 |
||||||
|
var couleur = new Array() |
||||||
|
couleur[0] = Math.round((5+z)*echelle3D) |
||||||
|
couleur[1] = Math.round(510 - (5+z)*echelle3D) |
||||||
|
couleur[2] = couleurGenerale |
||||||
|
if(opacity > 1){ |
||||||
|
opacity = 1 |
||||||
|
} |
||||||
|
if(opacity < 0){ |
||||||
|
opacity = 0 |
||||||
|
} |
||||||
|
if(couleur[0] > 255){ |
||||||
|
couleur[0] = 255 |
||||||
|
} |
||||||
|
if(couleur[0] < 0){ |
||||||
|
couleur[0] = 0 |
||||||
|
} |
||||||
|
if(couleur[1] > 255){ |
||||||
|
couleur[1] = 255 |
||||||
|
} |
||||||
|
if(couleur[1] < 0){ |
||||||
|
couleur[1] = 0 |
||||||
|
} |
||||||
|
|
||||||
|
ctx.save() |
||||||
|
ctx.translate(centreX, centreY) |
||||||
|
ctx.scale(valeurZoom3D, valeurZoom3D) |
||||||
|
ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")" |
||||||
|
ctx.fillRect(posX-1, posZ-1, 2, 2) |
||||||
|
ctx.restore() |
||||||
|
} |
||||||
|
|
||||||
|
// Dessine un polygone qui a comme sommets : (x1, y1, z1) , (x2, y2, z2), (x3, y3, z3) et (x4, y4, z4)
|
||||||
|
function polygone3D(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4){ |
||||||
|
ctx.save() |
||||||
|
ctx.translate(centreX, centreY) |
||||||
|
ctx.scale(valeurZoom3D, valeurZoom3D) |
||||||
|
ctx.beginPath() |
||||||
|
ctx.moveTo((Math.sin(angle)*x1 + Math.cos(angle)*y1)*echelle3D , -(z1 - Math.cos(angle)*x1/2.6 + Math.sin(angle)*y1/2.6)*echelle3D) |
||||||
|
ctx.lineTo((Math.sin(angle)*x2 + Math.cos(angle)*y2)*echelle3D , -(z2 - Math.cos(angle)*x2/2.6 + Math.sin(angle)*y2/2.6)*echelle3D) |
||||||
|
ctx.lineTo((Math.sin(angle)*x3 + Math.cos(angle)*y3)*echelle3D , -(z3 - Math.cos(angle)*x3/2.6 + Math.sin(angle)*y3/2.6)*echelle3D) |
||||||
|
ctx.lineTo((Math.sin(angle)*x4 + Math.cos(angle)*y4)*echelle3D , -(z4 - Math.cos(angle)*x4/2.6 + Math.sin(angle)*y4/2.6)*echelle3D) |
||||||
|
|
||||||
|
var opacity = Math.round((1-((5+y1*Math.sin(angle)-x1*Math.cos(angle)) / 450)*echelle3D)*1000)/1000 |
||||||
|
var couleur = new Array() |
||||||
|
couleur[0] = Math.round((5+z1)*echelle3D) |
||||||
|
couleur[1] = Math.round(510 - (5+z1)*echelle3D) |
||||||
|
couleur[2] = couleurGenerale |
||||||
|
if(opacity > 1){ |
||||||
|
opacity = 1 |
||||||
|
} |
||||||
|
if(opacity < 0){ |
||||||
|
opacity = 0 |
||||||
|
} |
||||||
|
if(couleur[0] > 255){ |
||||||
|
couleur[0] = 255 |
||||||
|
} |
||||||
|
if(couleur[0] < 0){ |
||||||
|
couleur[0] = 0 |
||||||
|
} |
||||||
|
if(couleur[1] > 255){ |
||||||
|
couleur[1] = 255 |
||||||
|
} |
||||||
|
if(couleur[1] < 0){ |
||||||
|
couleur[1] = 0 |
||||||
|
} |
||||||
|
|
||||||
|
ctx.fillStyle = "rgba("+couleur[rouge3D]+","+couleur[vert3D]+", "+couleur[bleu3D]+", "+opacity+")" |
||||||
|
ctx.closePath() |
||||||
|
ctx.fill() |
||||||
|
ctx.restore() |
||||||
|
} |
||||||
|
|
||||||
|
// Dessine les axes
|
||||||
|
function axes(){ |
||||||
|
for(var i=-5; i<5; i+=precisionDroite3D){ |
||||||
|
point3D(0, 0, i) |
||||||
|
} |
||||||
|
for(var i=-5.5; i<5.5; i+=precisionDroite3D){ |
||||||
|
point3D(i, 0, 0) |
||||||
|
} |
||||||
|
for(var i=-5.5; i<5.5; i+=precisionDroite3D){ |
||||||
|
point3D(0, i, 0) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function cube(x, y, z, r){ |
||||||
|
// Face de devant
|
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+i, y, z) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+r, y+i, z) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+r-i, y+r, z) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x, y+r-i, z) |
||||||
|
} |
||||||
|
// Face de derrière
|
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+i, y, z+r) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+r, y+i, z+r) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+r-i, y+r, z+r) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x, y+r-i, z+r) |
||||||
|
} |
||||||
|
// Arrêtes
|
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x, y, z+i) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x, y+r, z+i) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+r, y, z+i) |
||||||
|
} |
||||||
|
for(var i=0; i<r; i+=precisionDroite3D){ |
||||||
|
point3D(x+r, y+r, z+i) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Change les couleurs de l'affichage 3D et affiche l'aperçu de celles-ci.
|
||||||
|
function checkCouleurs3D(){ |
||||||
|
var rouge, vert, bleu |
||||||
|
var sensRouge, sensVert, sensBleu |
||||||
|
var precisionApercu = 64 |
||||||
|
couleurGenerale = parseInt(document.getElementById("couleur3Dgenerale").value) |
||||||
|
if(!couleurGenerale){ |
||||||
|
couleurGenerale = 0 |
||||||
|
} |
||||||
|
if(couleurGenerale < 0){ |
||||||
|
couleurGenerale = 0 |
||||||
|
} |
||||||
|
if(couleurGenerale > 255){ |
||||||
|
couleurGenerale = 255 |
||||||
|
} |
||||||
|
switch(document.getElementById("selectRouge3D").value){ |
||||||
|
case "plus": |
||||||
|
rouge3D = 0 |
||||||
|
rouge = 255 |
||||||
|
sensRouge = -1 |
||||||
|
break |
||||||
|
case "moins": |
||||||
|
rouge3D = 1 |
||||||
|
rouge = 0 |
||||||
|
sensRouge = 1 |
||||||
|
break |
||||||
|
case "tout": |
||||||
|
rouge3D = 2 |
||||||
|
rouge = couleurGenerale |
||||||
|
sensRouge = 0 |
||||||
|
break |
||||||
|
} |
||||||
|
switch(document.getElementById("selectVert3D").value){ |
||||||
|
case "plus": |
||||||
|
vert3D = 0 |
||||||
|
vert = 255 |
||||||
|
sensVert = -1 |
||||||
|
break |
||||||
|
case "moins": |
||||||
|
vert3D = 1 |
||||||
|
vert = 0 |
||||||
|
sensVert = 1 |
||||||
|
break |
||||||
|
case "tout": |
||||||
|
vert3D = 2 |
||||||
|
vert = couleurGenerale |
||||||
|
sensVert = 0 |
||||||
|
break |
||||||
|
} |
||||||
|
switch(document.getElementById("selectBleu3D").value){ |
||||||
|
case "plus": |
||||||
|
bleu3D = 0 |
||||||
|
bleu = 255 |
||||||
|
sensBleu = -1 |
||||||
|
break |
||||||
|
case "moins": |
||||||
|
bleu3D = 1 |
||||||
|
bleu = 0 |
||||||
|
sensBleu = 1 |
||||||
|
break |
||||||
|
case "tout": |
||||||
|
bleu3D = 2 |
||||||
|
bleu = couleurGenerale |
||||||
|
sensBleu = 0 |
||||||
|
break |
||||||
|
} |
||||||
|
document.getElementById("apercuCouleur3D").innerHTML = "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>" |
||||||
|
for(var i=0; i<precisionApercu; i++){ |
||||||
|
rouge = rouge + sensRouge*(256/precisionApercu) |
||||||
|
vert = vert + sensVert*(256/precisionApercu) |
||||||
|
bleu = bleu + sensBleu*(256/precisionApercu) |
||||||
|
document.getElementById("apercuCouleur3D").innerHTML = document.getElementById("apercuCouleur3D").innerHTML + "<span style='background-color:rgba("+rouge+","+vert+","+bleu+",1);color:rgba(0,0,0,0);'>.</span>" |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function zoom3D(valeur){ |
||||||
|
valeurZoom3D *= valeur |
||||||
|
gauche3D /= valeur |
||||||
|
droite3D /= valeur |
||||||
|
precisionFonction3D /= valeur |
||||||
|
precisionDroite3D /= valeur |
||||||
|
//alert(valeurZoom3D+" ; "+gauche3D+" ; "+droite3D+" ; "+precisionFonction3D+" ; "+precisionDroite3D)
|
||||||
|
actualiserGraph() |
||||||
|
} |
||||||
@ -0,0 +1,432 @@ |
|||||||
|
// ------------------ SVG et canvas ------------------
|
||||||
|
|
||||||
|
// Cette fonction calcule tous les points de la fonction mathématique.
|
||||||
|
// Elle place chaque coordonnée "x" et "y" dans les tableaux "pointX" et "pointY"
|
||||||
|
// A la fin, elle choisi la méthode d'affichage entre :
|
||||||
|
// 1) une seule image SVG
|
||||||
|
// 2) plusieurs images SVG
|
||||||
|
function evaluerSVG(eq) { |
||||||
|
borneXGauche = parseFloat(document.getElementById("borneXGauche").value) |
||||||
|
borneXDroite = parseFloat(document.getElementById("borneXDroite").value) |
||||||
|
borneYGauche = parseFloat(document.getElementById("borneYGauche").value) |
||||||
|
borneYDroite = parseFloat(document.getElementById("borneYDroite").value) |
||||||
|
multiplicateurX = largeur/Math.abs(borneXDroite - borneXGauche) |
||||||
|
multiplicateurY = hauteur/Math.abs(borneYDroite - borneYGauche) |
||||||
|
lineWidth = document.getElementById("inputTaille").value |
||||||
|
var i = 0 |
||||||
|
var y1, p1 |
||||||
|
|
||||||
|
for(x=borneXGauche; x<=(borneXDroite+5*precision); x=x+precision){ |
||||||
|
y = eval(eq) |
||||||
|
if(!isNaN(y)){ |
||||||
|
i++ |
||||||
|
pointX[i] = (x - borneXGauche) * multiplicateurX |
||||||
|
pointY[i] = hauteur - ((y - borneYGauche) * multiplicateurY) |
||||||
|
pente[i] = hauteur - (((y-y1)/precision - borneYGauche)* multiplicateurY) |
||||||
|
pente2[i] = hauteur - ((((y-y1)/precision-p1)/precision - borneYGauche)* multiplicateurY) |
||||||
|
p1 = (y-y1)/precision |
||||||
|
y1 = y |
||||||
|
} |
||||||
|
} |
||||||
|
pente[1]=pente[2] |
||||||
|
pente2[2]=pente2[3] |
||||||
|
pente2[1]=pente2[2] |
||||||
|
|
||||||
|
//alert(pointX+'\n'+pointY)
|
||||||
|
if(document.getElementById("selectMethodeAffichage").value == "svg2"){ |
||||||
|
calculerGraphSVG2(i) |
||||||
|
} |
||||||
|
else{ |
||||||
|
calculerGraphSVG(i) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Même fonction mais pour dessiner à l'aide de canvas
|
||||||
|
function evaluerCanvas(eq) { |
||||||
|
borneXGauche = parseFloat(document.getElementById("borneXGauche").value) |
||||||
|
borneXDroite = parseFloat(document.getElementById("borneXDroite").value) |
||||||
|
borneYGauche = parseFloat(document.getElementById("borneYGauche").value) |
||||||
|
borneYDroite = parseFloat(document.getElementById("borneYDroite").value) |
||||||
|
multiplicateurX = largeur/Math.abs(borneXDroite - borneXGauche) |
||||||
|
multiplicateurY = hauteur/Math.abs(borneYDroite - borneYGauche) |
||||||
|
lineWidth = document.getElementById("inputTaille").value |
||||||
|
var i = 0 |
||||||
|
var y1, p1 |
||||||
|
|
||||||
|
for(x=borneXGauche; x<=(borneXDroite+5*precision); x=x+precision){ |
||||||
|
y = eval(eq) |
||||||
|
i++ |
||||||
|
if(!isNaN(y)){ |
||||||
|
pointX[i] = (x - borneXGauche) * multiplicateurX |
||||||
|
pointY[i] = hauteur - ((y - borneYGauche) * multiplicateurY) |
||||||
|
pente[i] = hauteur - (((y-y1)/precision - borneYGauche)* multiplicateurY) |
||||||
|
pente2[i] = hauteur - ((((y-y1)/precision-p1)/precision - borneYGauche)* multiplicateurY) |
||||||
|
p1 = (y-y1)/precision |
||||||
|
y1 = y |
||||||
|
} |
||||||
|
else{ |
||||||
|
pointX[i] = "undefined" |
||||||
|
pointY[i] = "undefined" |
||||||
|
pente[i] = "undefined" |
||||||
|
pente2[i] = "undefined" |
||||||
|
} |
||||||
|
} |
||||||
|
pente[1]=pente[2] |
||||||
|
pente2[2]=pente2[3] |
||||||
|
pente2[1]=pente2[2] |
||||||
|
|
||||||
|
calculerGraphCanevas(i) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// ---- SVG (une image) ----
|
||||||
|
// Génère le code HTML qui permet d'afficher le graphique et le place dans la div "affichage"
|
||||||
|
function calculerGraphSVG2(fin){ |
||||||
|
image = "" |
||||||
|
for (i=1; i<fin; i++){ |
||||||
|
image = image + '<line x1="'+pointX[i]+'" y1="'+pointY[i]+'" x2="'+pointX[i+1]+'" y2="'+pointY[i+1]+'" style="stroke:'+couleurFonction+';stroke-width:2;"/>' |
||||||
|
} |
||||||
|
graphique = '<line x1="'+(-borneXGauche*multiplicateurX)+'" y1="'+0+'" x2="'+(-borneXGauche*multiplicateurX)+'" y2="'+hauteur+'" style="stroke:rgb(0,0,0);stroke-width:2;opacity:0.3;"/>' |
||||||
|
graphique = graphique + '<line x1="'+0+'" y1="'+(hauteur-(-borneYGauche*multiplicateurY))+'" x2="'+largeur+'" y2="'+(hauteur-(-borneYGauche*multiplicateurY))+'" style="stroke:rgb(0,0,0);stroke-width:2;opacity:0.3;"/>' |
||||||
|
image = '<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">'+image+graphique+'</svg> ' |
||||||
|
document.getElementById("affichage").innerHTML = image |
||||||
|
//alert(image)
|
||||||
|
} |
||||||
|
|
||||||
|
// ---- SVG (images multiples) ----
|
||||||
|
// Créé les différents éléments pour dessiner la fonction mathématique
|
||||||
|
// et les place dans la div "affichage"
|
||||||
|
function calculerGraphSVG(fin){ |
||||||
|
document.getElementById("affichage").innerHTML = "" |
||||||
|
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg") |
||||||
|
svg.setAttribute("width", "100%") |
||||||
|
svg.setAttribute("height", "100%") |
||||||
|
for (i=1; i<fin; i++){ |
||||||
|
if ((pointY[i]<0) && (pointY[i+1]>hauteur)){ |
||||||
|
i++ |
||||||
|
} |
||||||
|
if ((pointY[i]>hauteur) && (pointY[i+1]<0)){ |
||||||
|
i++ |
||||||
|
} |
||||||
|
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line") |
||||||
|
ligne.setAttribute("x1", pointX[i]+decalageX) |
||||||
|
ligne.setAttribute("x2", pointX[i+1]+decalageX) |
||||||
|
ligne.setAttribute("y1", pointY[i]+decalageY) |
||||||
|
ligne.setAttribute("y2", pointY[i+1]+decalageY) |
||||||
|
ligne.setAttribute("stroke", couleurFonction) |
||||||
|
ligne.setAttribute("stroke-width", lineWidth) |
||||||
|
svg.appendChild(ligne) |
||||||
|
} |
||||||
|
|
||||||
|
// dérivée
|
||||||
|
if(document.getElementById("checkDerivee").checked){ |
||||||
|
for (i=1; i<fin; i++){ |
||||||
|
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line") |
||||||
|
ligne.setAttribute("x1", pointX[i]+decalageX) |
||||||
|
ligne.setAttribute("x2", pointX[i+1]+decalageX) |
||||||
|
ligne.setAttribute("y1", pente[i]+decalageY) |
||||||
|
ligne.setAttribute("y2", pente[i+1]+decalageY) |
||||||
|
ligne.setAttribute("stroke", "white") |
||||||
|
ligne.setAttribute("stroke-width", lineWidth) |
||||||
|
ligne.setAttribute("opacity", "0.8") |
||||||
|
svg.appendChild(ligne) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(document.getElementById("checkAxes").checked){ |
||||||
|
calculerAxes() |
||||||
|
} |
||||||
|
calculerGrilleEchelle() |
||||||
|
document.getElementById("affichage").appendChild(svg) |
||||||
|
} |
||||||
|
|
||||||
|
// axes
|
||||||
|
function calculerAxes(){ |
||||||
|
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line") |
||||||
|
ligne.setAttribute("x1", (-borneXGauche*multiplicateurX)+decalageX) |
||||||
|
ligne.setAttribute("y1", 0+decalageY) |
||||||
|
ligne.setAttribute("x2", (-borneXGauche*multiplicateurX)+decalageX) |
||||||
|
ligne.setAttribute("y2", hauteur+decalageY) |
||||||
|
ligne.setAttribute("stroke", "rgb(0,0,0)") |
||||||
|
ligne.setAttribute("stroke-width", "2") |
||||||
|
ligne.setAttribute("opacity", "0.3") |
||||||
|
svg.appendChild(ligne) |
||||||
|
|
||||||
|
var ligne = document.createElementNS("http://www.w3.org/2000/svg", "line") |
||||||
|
ligne.setAttribute("x1", 0+decalageX) |
||||||
|
ligne.setAttribute("y1", (hauteur-(-borneYGauche*multiplicateurY))+decalageY) |
||||||
|
ligne.setAttribute("x2", largeur+decalageX) |
||||||
|
ligne.setAttribute("y2", (hauteur-(-borneYGauche*multiplicateurY))+decalageY) |
||||||
|
ligne.setAttribute("stroke", "rgb(0,0,0)") |
||||||
|
ligne.setAttribute("stroke-width", "2") |
||||||
|
ligne.setAttribute("opacity", "0.3") |
||||||
|
svg.appendChild(ligne) |
||||||
|
} |
||||||
|
|
||||||
|
// grille et échelle
|
||||||
|
function calculerGrilleEchelle(){ |
||||||
|
var intervalX = Math.round(Math.abs(borneXGauche-borneXDroite)/10) |
||||||
|
var intervalY = Math.round(Math.abs(borneYGauche-borneYDroite)/10) |
||||||
|
var initialX = Math.round(-borneXGauche) % intervalX |
||||||
|
var initialY = Math.round(-borneYGauche) % intervalY |
||||||
|
for(var i=initialX;i<=Math.round(borneXDroite-borneXGauche);i=i+intervalX){ |
||||||
|
var position = Math.round((Math.round(borneXGauche) - borneXGauche +i) * multiplicateurX) |
||||||
|
if(document.getElementById("checkGrille").checked){ |
||||||
|
var grille = document.createElementNS("http://www.w3.org/2000/svg", "line") |
||||||
|
grille.setAttribute("x1", position) |
||||||
|
grille.setAttribute("y1", 0) |
||||||
|
grille.setAttribute("x2", position) |
||||||
|
grille.setAttribute("y2", hauteur) |
||||||
|
grille.setAttribute("stroke", "rgb(0,0,0)") |
||||||
|
grille.setAttribute("stroke-width", "2") |
||||||
|
grille.setAttribute("opacity", "0.05") |
||||||
|
svg.appendChild(grille) |
||||||
|
} |
||||||
|
|
||||||
|
if(document.getElementById("checkEchelle").checked){ |
||||||
|
var txt = document.createElementNS("http://www.w3.org/2000/svg", "text") |
||||||
|
txt.appendChild(document.createTextNode(i+borneXGauche)) |
||||||
|
txt.setAttribute("x", position-6) |
||||||
|
txt.setAttribute("y", (hauteur-(-borneYGauche*multiplicateurY))+decalageY-2) |
||||||
|
txt.setAttribute("fill-opacity", 0.6) |
||||||
|
txt.setAttribute("fill", couleurEchelle) |
||||||
|
svg.appendChild(txt) |
||||||
|
} |
||||||
|
} |
||||||
|
for(var i=initialY;i<=Math.round(borneYDroite-borneYGauche);i=i+intervalY){ |
||||||
|
var position = hauteur - Math.round((Math.round(borneYGauche) - borneYGauche +i) * multiplicateurY) |
||||||
|
if(document.getElementById("checkGrille").checked){ |
||||||
|
var grille = document.createElementNS("http://www.w3.org/2000/svg", "line") |
||||||
|
grille.setAttribute("x1", 0) |
||||||
|
grille.setAttribute("y1", position) |
||||||
|
grille.setAttribute("x2", largeur) |
||||||
|
grille.setAttribute("y2", position) |
||||||
|
grille.setAttribute("stroke", "rgb(0,0,0)") |
||||||
|
grille.setAttribute("stroke-width", "2") |
||||||
|
grille.setAttribute("opacity", "0.05") |
||||||
|
svg.appendChild(grille) |
||||||
|
} |
||||||
|
|
||||||
|
if(document.getElementById("checkEchelle").checked){ |
||||||
|
var txt = document.createElementNS("http://www.w3.org/2000/svg", "text") |
||||||
|
txt.appendChild(document.createTextNode(i+borneYGauche)) |
||||||
|
txt.setAttribute("x", (-borneXGauche*multiplicateurX)+decalageX+2) |
||||||
|
txt.setAttribute("y", position+6) |
||||||
|
txt.setAttribute("fill-opacity", 0.6) |
||||||
|
txt.setAttribute("fill", couleurEchelle) |
||||||
|
svg.appendChild(txt) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// ---- Canevas ----
|
||||||
|
// Permet de générer le code HTML nécessaire à canvas et dessine la fonction
|
||||||
|
// à l'aide de lignes dans la zone de canvas.
|
||||||
|
function calculerGraphCanevas(fin){ |
||||||
|
document.getElementById("affichage").innerHTML = '<canvas id="canvas" width="'+largeur+'" height="'+hauteur+'"></canvas>' |
||||||
|
ctx = document.getElementById('canvas').getContext('2d') |
||||||
|
var undefined = true |
||||||
|
// Autres fonctions
|
||||||
|
for(var i=0; i<listeFonctions.length; i++){ |
||||||
|
ctx.beginPath() |
||||||
|
x = borneXGauche-3*precision |
||||||
|
y = eval(listeFonctions[i]) |
||||||
|
if(isNaN(y)){ |
||||||
|
ctx.moveTo(x, 0) |
||||||
|
} |
||||||
|
else{ |
||||||
|
ctx.moveTo(x, y) |
||||||
|
} |
||||||
|
ctx.strokeStyle = listeCouleurs[i] |
||||||
|
ctx.fillStyle = listeCouleurs[i] |
||||||
|
ctx.lineWidth = lineWidth |
||||||
|
for(x=borneXGauche-2*precision; x<=(borneXDroite+2*precision); x+=precision){ |
||||||
|
y = eval(listeFonctions[i]) |
||||||
|
if(!isNaN(y)){ |
||||||
|
ctx.lineTo((x - borneXGauche) * multiplicateurX+decalageX, hauteur - ((y - borneYGauche) * multiplicateurY)+decalageY) |
||||||
|
/*pente[i] = hauteur - ((10*(y-y1) - borneYGauche) * multiplicateurY)*/ |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.stroke() |
||||||
|
} |
||||||
|
|
||||||
|
// aire sous la fonctions
|
||||||
|
if(document.getElementById("checkAire").checked){ |
||||||
|
ctx.strokeStyle = "rgba(255,255,255,0)"; |
||||||
|
ctx.fillStyle = "rgba(0,180,255,0.3)"; |
||||||
|
var a = parseInt(document.getElementById("aireG").value); |
||||||
|
var b = parseInt(document.getElementById("aireD").value); |
||||||
|
var fct = document.getElementById("inputEq").value; |
||||||
|
var f = function(x){ |
||||||
|
return eval(fct); |
||||||
|
}; |
||||||
|
var convertX = function(nbr){ |
||||||
|
return (nbr - borneXGauche) * multiplicateurX; |
||||||
|
}; |
||||||
|
var convertY = function(nbr){ |
||||||
|
return hauteur - ((nbr - borneYGauche) * multiplicateurY) |
||||||
|
}; |
||||||
|
var n = 5000/(borneXDroite-borneXGauche); |
||||||
|
var aire, largeurRect, gaucheRect, droiteRect, millieuRect, hauteurRect, aireRect; |
||||||
|
aire = 0; |
||||||
|
largeurRect = (b-a)/n; |
||||||
|
for(var i=0; i<n; i++){ |
||||||
|
gaucheRect = a + i*largeurRect; |
||||||
|
droiteRect = a + (i+1)*largeurRect; |
||||||
|
millieuRect = (gaucheRect+droiteRect) / 2; |
||||||
|
hauteurRect = f(millieuRect); |
||||||
|
//aireRect = largeurRect * hauteurRect;
|
||||||
|
//aire = aire + aireRect;
|
||||||
|
try{ |
||||||
|
ctx.fillRect(convertX(gaucheRect), convertY(hauteurRect), 2, hauteurRect*multiplicateurY); |
||||||
|
} |
||||||
|
catch(err){ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// fonction
|
||||||
|
ctx.beginPath() |
||||||
|
//ctx.moveTo(pointX[1]+decalageX, pointY[1]+decalageY)
|
||||||
|
ctx.strokeStyle = couleurFonction |
||||||
|
ctx.fillStyle = couleurFonction |
||||||
|
ctx.lineWidth = lineWidth |
||||||
|
if(document.getElementById("selectMethodeAffichage").value == "canvas"){ |
||||||
|
for (i=1; i<fin; i++){ |
||||||
|
if(isNaN(pointX[i]) || isNaN(pointY[i])){ |
||||||
|
undefined = true |
||||||
|
} |
||||||
|
else{ |
||||||
|
if(undefined){ |
||||||
|
ctx.moveTo(pointX[i]+decalageX, pointY[i]+decalageY) |
||||||
|
} |
||||||
|
undefined = false |
||||||
|
ctx.lineTo(pointX[i]+decalageX, pointY[i]+decalageY) |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.stroke() |
||||||
|
} |
||||||
|
else{ |
||||||
|
for (i=1; i<fin; i++){ |
||||||
|
if(!isNaN(pointX[i]) && !isNaN(pointY[i])){ |
||||||
|
ctx.moveTo(pointX[i]+decalageX, pointY[i]+decalageY) |
||||||
|
ctx.arc(pointX[i]+decalageX, pointY[i]+decalageY, lineWidth/2, 0, 2*Math.PI, false) |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.fill() |
||||||
|
//ctx.stroke()
|
||||||
|
} |
||||||
|
|
||||||
|
// dérivée première
|
||||||
|
if(document.getElementById("checkDerivee").checked){ |
||||||
|
undefined = true |
||||||
|
ctx.beginPath() |
||||||
|
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)" |
||||||
|
ctx.fillStyle = "rgba(255, 255, 255, 0.8)" |
||||||
|
ctx.lineWidth = lineWidth |
||||||
|
//ctx.moveTo(pointX[1]+decalageX, pente[1]+decalageY)
|
||||||
|
for (i=1; i<fin; i++){ |
||||||
|
if(isNaN(pointX[i]) || isNaN(pente[i])){ |
||||||
|
undefined = true |
||||||
|
} |
||||||
|
else{ |
||||||
|
if(undefined){ |
||||||
|
try{ |
||||||
|
ctx.moveTo(pointX[i]+decalageX, pente[i]+decalageY) |
||||||
|
} |
||||||
|
catch(err){ |
||||||
|
//alert(";"+pente[i]+" ; "+pointX[i])
|
||||||
|
} |
||||||
|
} |
||||||
|
undefined = false |
||||||
|
try{ |
||||||
|
ctx.lineTo(pointX[i]+decalageX, pente[i]+decalageY) |
||||||
|
} |
||||||
|
catch(err){ |
||||||
|
//alert(pente[i]+" ; "+pointX[i])
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.stroke() |
||||||
|
} |
||||||
|
|
||||||
|
// dérivée seconde
|
||||||
|
if(document.getElementById("checkDerivee2").checked){ |
||||||
|
undefined = true |
||||||
|
ctx.beginPath() |
||||||
|
ctx.strokeStyle = "rgba(150, 150, 150, 0.8)" |
||||||
|
ctx.fillStyle = "rgba(150, 150, 150, 0.8)" |
||||||
|
ctx.lineWidth = lineWidth |
||||||
|
//ctx.moveTo(pointX[1]+decalageX, pente2[1]+decalageY)
|
||||||
|
for (i=1; i<fin-1; i++){ |
||||||
|
if(isNaN(pointX[i]) || isNaN(pente2[i])){ |
||||||
|
undefined = true |
||||||
|
} |
||||||
|
else{ |
||||||
|
if(undefined){ |
||||||
|
try{ |
||||||
|
ctx.moveTo(pointX[i+2]+decalageX, pente2[i+2]+decalageY) |
||||||
|
} |
||||||
|
catch(err){ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
undefined = false |
||||||
|
try{ |
||||||
|
ctx.lineTo(pointX[i+2]+decalageX, pente2[i+2]+decalageY) |
||||||
|
} |
||||||
|
catch(err){ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.stroke() |
||||||
|
} |
||||||
|
|
||||||
|
// grille et échelle
|
||||||
|
var intervalX = Math.round(Math.abs(borneXGauche-borneXDroite)/10) |
||||||
|
var intervalY = Math.round(Math.abs(borneYGauche-borneYDroite)/10) |
||||||
|
var initialX = Math.round(-borneXGauche) % intervalX |
||||||
|
var initialY = Math.round(-borneYGauche) % intervalY |
||||||
|
ctx.beginPath() |
||||||
|
ctx.fillStyle = couleurEchelle |
||||||
|
ctx.lineWidth = "2" |
||||||
|
for(var i=initialX;i<=Math.round(borneXDroite-borneXGauche);i=i+intervalX){ |
||||||
|
var position = Math.round((Math.round(borneXGauche) - borneXGauche +i) * multiplicateurX) |
||||||
|
if(document.getElementById("checkGrille").checked){ |
||||||
|
ctx.moveTo(position, 0) |
||||||
|
ctx.lineTo(position, hauteur) |
||||||
|
} |
||||||
|
|
||||||
|
if(document.getElementById("checkEchelle").checked){ |
||||||
|
ctx.fillText(Math.ceil(i+borneXGauche), position-6, (hauteur-(-borneYGauche*multiplicateurY))+decalageY-2) |
||||||
|
} |
||||||
|
} |
||||||
|
for(var i=initialY;i<=Math.round(borneYDroite-borneYGauche);i=i+intervalY){ |
||||||
|
var position = hauteur - Math.round((Math.round(borneYGauche) - borneYGauche +i) * multiplicateurY) |
||||||
|
if(document.getElementById("checkGrille").checked){ |
||||||
|
ctx.moveTo(0, position) |
||||||
|
ctx.lineTo(largeur, position) |
||||||
|
} |
||||||
|
|
||||||
|
if(document.getElementById("checkEchelle").checked){ |
||||||
|
ctx.fillText(Math.ceil(i+borneYGauche), (-borneXGauche*multiplicateurX)+decalageX+2, position+6) |
||||||
|
} |
||||||
|
} |
||||||
|
ctx.strokeStyle = couleurGrille |
||||||
|
ctx.stroke() |
||||||
|
|
||||||
|
// axes
|
||||||
|
if(document.getElementById("checkAxes").checked){ |
||||||
|
ctx.beginPath() |
||||||
|
ctx.strokeStyle = couleurAxes |
||||||
|
ctx.lineWidth = "2" |
||||||
|
ctx.moveTo((-borneXGauche*multiplicateurX)+decalageX, 0+decalageY) |
||||||
|
ctx.lineTo((-borneXGauche*multiplicateurX)+decalageX, hauteur+decalageY) |
||||||
|
|
||||||
|
ctx.moveTo(0+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY) |
||||||
|
ctx.lineTo(largeur+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY) |
||||||
|
ctx.stroke() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
// -------------------- sankore --------------------
|
||||||
|
// Ces fonctions permettent de dessiner le graphique directement dans sankore.
|
||||||
|
|
||||||
|
// Calcule tous les points de la fonction mathématique et les place dans des tableaux.
|
||||||
|
function evaluerUniboard(eq) { |
||||||
|
largeur += 100 |
||||||
|
hauteur += 100 |
||||||
|
decalageX -= 250 |
||||||
|
decalageY -= 200 |
||||||
|
borneXGauche = parseFloat(document.getElementById("borneXGauche").value) |
||||||
|
borneXDroite = parseFloat(document.getElementById("borneXDroite").value) |
||||||
|
borneYGauche = parseFloat(document.getElementById("borneYGauche").value) |
||||||
|
borneYDroite = parseFloat(document.getElementById("borneYDroite").value) |
||||||
|
multiplicateurX = (largeur)/Math.abs(borneXDroite - borneXGauche) |
||||||
|
multiplicateurY = (hauteur)/Math.abs(borneYDroite - borneYGauche) |
||||||
|
lineWidth = document.getElementById("inputTaille").value |
||||||
|
var i = 0 |
||||||
|
|
||||||
|
BoucleFor: for(x=borneXGauche; x<=(borneXDroite+0); x=x+precision){ |
||||||
|
i++ |
||||||
|
y = eval(eq) |
||||||
|
pointX[i] = Math.round((x - borneXGauche) * multiplicateurX) |
||||||
|
pointY[i] = hauteur - Math.round((y - borneYGauche) * multiplicateurY) |
||||||
|
} |
||||||
|
calculerGraphUniboard(i) |
||||||
|
} |
||||||
|
|
||||||
|
// Regarde chaque coordonnées stockées dans le tableau et dessine le graphique
|
||||||
|
function calculerGraphUniboard(fin){ |
||||||
|
document.getElementById("affichage").innerHTML = "" |
||||||
|
sankore.setTool('pen') |
||||||
|
sankore.moveTo(pointX[2]+decalageX, pointY[2]+decalageY) |
||||||
|
for (i=3; i<fin; i++){ |
||||||
|
if ((pointY[i]<0) || (pointY[i]>hauteur)){ |
||||||
|
sankore.moveTo(pointX[i+1]+decalageX,pointY[i+1]+decalageY) |
||||||
|
continue |
||||||
|
} |
||||||
|
sankore.drawLineTo(pointX[i]+decalageX, pointY[i]+decalageY, lineWidth) |
||||||
|
} |
||||||
|
|
||||||
|
//dessiner le cadre
|
||||||
|
sankore.moveTo(0+decalageX,0+decalageY) |
||||||
|
sankore.drawLineTo(largeur+decalageX, 0+decalageY, lineWidth) |
||||||
|
sankore.drawLineTo(largeur+decalageX, hauteur+decalageY, lineWidth) |
||||||
|
sankore.drawLineTo(0+decalageX, hauteur+decalageY, lineWidth) |
||||||
|
sankore.drawLineTo(0+decalageX, 0+decalageY, lineWidth) |
||||||
|
|
||||||
|
//dessiner les axes
|
||||||
|
sankore.moveTo((-borneXGauche*multiplicateurX)+decalageX, 0+decalageY) |
||||||
|
sankore.drawLineTo((-borneXGauche*multiplicateurX)+decalageX, hauteur+decalageY, lineWidth) |
||||||
|
sankore.moveTo(0+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY) |
||||||
|
sankore.drawLineTo(largeur+decalageX, (hauteur-(-borneYGauche*multiplicateurY))+decalageY, lineWidth) |
||||||
|
|
||||||
|
decalageX += 250 |
||||||
|
decalageY += 200 |
||||||
|
largeur -= 100 |
||||||
|
hauteur -= 100 |
||||||
|
sankore.setTool('arrow') |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,65 @@ |
|||||||
|
// -------------------- XPM --------------------
|
||||||
|
// Diverses fonctions permettant de dessiner la fonction mathématique à
|
||||||
|
// l'aide d'une image au format XPM
|
||||||
|
|
||||||
|
// Permet de calculer tous les points de l'image et de les placer dans un tableau.
|
||||||
|
// Chaque "case" du tableau est un point de l'image.
|
||||||
|
// Plus tard, chaque pixel de l'image correspondra a une case du tableau.
|
||||||
|
// Le pixel sera blanc si la "case" vaut 0 et sera noir si la "case" vaut 1
|
||||||
|
function evaluerXPM(eq){ |
||||||
|
tableauUni(0) |
||||||
|
var y = 0 |
||||||
|
BoucleFor: for (x=0; x<largeur; x++){ |
||||||
|
y = Math.round(eval(eq)) |
||||||
|
if (y>hauteur-1){ break BoucleFor } |
||||||
|
tableau[y][x] = 1 |
||||||
|
} |
||||||
|
tableau.reverse() |
||||||
|
graphique = "" |
||||||
|
calculerGraphXPM() |
||||||
|
} |
||||||
|
|
||||||
|
// Permet de remplir le tableau avec uniquement des 1 ou des 0.
|
||||||
|
// (pour que l'image soit toute blanche ou toute noir)
|
||||||
|
function tableauUni(valeurCouleur){ |
||||||
|
for (i=0; i<hauteur; i++){ |
||||||
|
ligne = new Array() |
||||||
|
for (k=0; k<largeur; k++){ |
||||||
|
ligne.push(valeurCouleur) |
||||||
|
} |
||||||
|
tableau[i] = ligne |
||||||
|
} |
||||||
|
graphique = "" |
||||||
|
calculerGraphXPM() |
||||||
|
} |
||||||
|
|
||||||
|
// Cette fonction regarde chaque "case" du tableau.
|
||||||
|
// Elle permet de générer le texte ASCII de l'image XPM.
|
||||||
|
function calculerGraphXPM() { |
||||||
|
graphique = graphique + '"' |
||||||
|
for (i=0; i<largeur; i++){ |
||||||
|
switch (tableau[j][i]){ |
||||||
|
case 1: |
||||||
|
graphique = graphique + ' ' |
||||||
|
break |
||||||
|
default: |
||||||
|
graphique = graphique + '.' |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
j++ |
||||||
|
graphique = graphique + '",' |
||||||
|
if (j == hauteur){ |
||||||
|
afficherGraphXPM() |
||||||
|
j = 0 |
||||||
|
return true |
||||||
|
} |
||||||
|
calculerGraphXPM() |
||||||
|
} |
||||||
|
|
||||||
|
// Cette fonction génére le code HTML nécessaire à afficher l'image XPM.
|
||||||
|
// Elle place ce code dans la div "affichage" ce qui permet d'afficher le graphique.
|
||||||
|
function afficherGraphXPM(){ |
||||||
|
image = "<img src='data:image/xpm;ASCII,"+'/* XPM */static char * test_xpm[] = {"'+largeur+' '+hauteur+' 2 1"," c #000000",". c #FFFFFF",' + graphique + "};'"+" />" |
||||||
|
document.getElementById("affichage").innerHTML = image |
||||||
|
} |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
|
||||||
|
// -------------------- Color Picker --------------------
|
||||||
|
|
||||||
|
var idColor = "" |
||||||
|
|
||||||
|
// Différentes fonctions nécessaire au Color Picker (menu du choix de la couleur)
|
||||||
|
function colorSV(e){ |
||||||
|
var element = document.getElementById('colorSV') |
||||||
|
var posDivY = 0 |
||||||
|
var posDivX = 0 |
||||||
|
while(element){ |
||||||
|
posDivY = posDivY + element.offsetTop |
||||||
|
posDivX = posDivX + element.offsetLeft |
||||||
|
element = element.offsetParent |
||||||
|
} |
||||||
|
document.getElementById("info").innerHTML = posDivX+" ; "+posDivY |
||||||
|
S = 100-Math.round((e.clientY - posDivY -0)/255*100) |
||||||
|
V = Math.round((e.clientX - posDivX -0)/255*100) |
||||||
|
document.getElementById("inputValeur").value = V |
||||||
|
document.getElementById("inputSaturation").value = S |
||||||
|
document.getElementById("ligneValeur").setAttribute("x1", e.clientX-posDivX) |
||||||
|
document.getElementById("ligneValeur").setAttribute("x2", e.clientX-posDivX) |
||||||
|
document.getElementById("ligneSaturation").setAttribute("y1", e.clientY-posDivY) |
||||||
|
document.getElementById("ligneSaturation").setAttribute("y2", e.clientY-posDivY) |
||||||
|
colorRGB() |
||||||
|
} |
||||||
|
|
||||||
|
function colorT(e){ |
||||||
|
var element = document.getElementById('colorT') |
||||||
|
var posDiv = 0 |
||||||
|
while(element){ |
||||||
|
posDiv = posDiv + element.offsetTop |
||||||
|
element = element.offsetParent |
||||||
|
} |
||||||
|
T = (e.clientY - posDiv -0) / 256*360 |
||||||
|
r,g,b = 0 |
||||||
|
while (true){ |
||||||
|
if (T<60){ |
||||||
|
r = 255 |
||||||
|
g = T/60*255 |
||||||
|
b = 0 |
||||||
|
break |
||||||
|
} |
||||||
|
if (T<=120){ |
||||||
|
r = (255-(T%60/60*255))%256 |
||||||
|
g = 255 |
||||||
|
b = 0 |
||||||
|
break |
||||||
|
} |
||||||
|
if (T<180){ |
||||||
|
r = 0 |
||||||
|
g = 255 |
||||||
|
b = T%60/60*255 |
||||||
|
break |
||||||
|
} |
||||||
|
if (T<=240){ |
||||||
|
r = 0 |
||||||
|
g = (255-(T%60/60*255))%256 |
||||||
|
b = 255 |
||||||
|
break |
||||||
|
} |
||||||
|
if (T<300){ |
||||||
|
r = T%60/60*255 |
||||||
|
g = 0 |
||||||
|
b = 255 |
||||||
|
break |
||||||
|
} |
||||||
|
if (T<360){ |
||||||
|
r = 255 |
||||||
|
g = 0 |
||||||
|
b = (255-(T%60/60*255))%256 |
||||||
|
break |
||||||
|
} |
||||||
|
r = 255 |
||||||
|
g = 0 |
||||||
|
b = 0 |
||||||
|
break |
||||||
|
} |
||||||
|
T = Math.round(T) |
||||||
|
r = Math.round(r) |
||||||
|
g = Math.round(g) |
||||||
|
b = Math.round(b) |
||||||
|
document.getElementById("inputTeinte").value = T |
||||||
|
document.getElementById("colorSV").style.backgroundColor = "rgb("+r+","+g+","+b+")" |
||||||
|
document.getElementById("ligneTeinte").setAttribute("y2", e.clientY-posDiv) |
||||||
|
document.getElementById("ligneTeinte").setAttribute("y1", e.clientY-posDiv) |
||||||
|
colorRGB() |
||||||
|
} |
||||||
|
|
||||||
|
function colorRGB(){ |
||||||
|
var S = document.getElementById("inputSaturation").value |
||||||
|
var V = document.getElementById("inputValeur").value |
||||||
|
var rouge = Math.round((r + (255-r) * (-1) * (S-100) / 100 )* V / 100) |
||||||
|
var vert = Math.round((g + (255-g) * (-1) * (S-100) / 100 )* V / 100) |
||||||
|
var bleu = Math.round((b + (255-b) * (-1) * (S-100) / 100 )* V / 100) |
||||||
|
document.getElementById("inputRouge").value = rouge |
||||||
|
document.getElementById("inputVert").value = vert |
||||||
|
document.getElementById("inputBleu").value = bleu |
||||||
|
eval(document.getElementById(idColor).title+' = "rgba(" + rouge +", " + vert + ", " + bleu +", "+document.getElementById("inputOpacity").value+")"') |
||||||
|
document.getElementById(idColor).style.backgroundColor = eval(document.getElementById(idColor).title) |
||||||
|
document.getElementById("apercuCouleur").style.backgroundColor = eval(document.getElementById(idColor).title) |
||||||
|
} |
||||||
|
|
||||||
|
function colorPicker(id){ |
||||||
|
idColor = id |
||||||
|
document.getElementById("apercuCouleur").style.backgroundColor = eval(document.getElementById(idColor).title) |
||||||
|
document.getElementById("apercuCouleur2").style.backgroundColor = eval(document.getElementById(idColor).title) |
||||||
|
} |
||||||
@ -0,0 +1,356 @@ |
|||||||
|
|
||||||
|
// -------------------- Etude de fonctions --------------------
|
||||||
|
|
||||||
|
var etudeX = new Array() |
||||||
|
var etudeY = new Array() |
||||||
|
var etudeD = new Array() |
||||||
|
var limGauche = new Array() |
||||||
|
var limDroite = new Array() |
||||||
|
var listeIndefini = new Array() |
||||||
|
var listeZeros = new Array() |
||||||
|
var intervalEtudeGauche = -50 |
||||||
|
var intervalEtudeDroite = 50 |
||||||
|
var precisionEtude = 0.001 |
||||||
|
|
||||||
|
function etudier(fct){ |
||||||
|
if(check(fct)){ |
||||||
|
prepareEtude(fct) |
||||||
|
pariteFct() |
||||||
|
signeFct(fct) |
||||||
|
asymptotes() |
||||||
|
courbure() |
||||||
|
ensembleDefinition() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Préparation à l'étude de fonction
|
||||||
|
function prepareEtude(fct){ |
||||||
|
listeIndefini = new Array() |
||||||
|
var f = function(x){ |
||||||
|
return eval(fct) |
||||||
|
} |
||||||
|
// Calcul de tous les points de la fonction
|
||||||
|
var i = 0 |
||||||
|
for(var x=intervalEtudeGauche; x<=intervalEtudeDroite; x+=precisionEtude){ |
||||||
|
etudeX[i] = x |
||||||
|
etudeY[i] = Math.round(f(x)*10000)/10000 |
||||||
|
etudeD[i] = Math.round(1000000*(f(x+0.0001)-f(x-0.0001))/(2*0.0001))/1000000 |
||||||
|
i++ |
||||||
|
} |
||||||
|
// Calcul des extrémités de la fonction
|
||||||
|
var x = -100000 |
||||||
|
limGauche[0] = f(x) |
||||||
|
x = -10000 |
||||||
|
limGauche[1] = f(x) |
||||||
|
x = 100000 |
||||||
|
limDroite[0] = f(x) |
||||||
|
x = 10000 |
||||||
|
limDroite[1] = f(x) |
||||||
|
} |
||||||
|
|
||||||
|
// Recherche de l'ensemble de définition
|
||||||
|
function ensembleDefinition(){ |
||||||
|
var fctDefinie = false |
||||||
|
var dejaDefinie = false |
||||||
|
var EDF = "" |
||||||
|
if(!isNaN(limGauche[0])){ |
||||||
|
fctDefinie = true |
||||||
|
dejaDefinie = true |
||||||
|
EDF += "]-∞;" |
||||||
|
} |
||||||
|
if(!isNaN(limGauche[1]) && !fctDefinie){ |
||||||
|
fctDefinie = true |
||||||
|
dejaDefinie = true |
||||||
|
EDF += "]-∞;" |
||||||
|
} |
||||||
|
for(var i=0; i<etudeX.length; i++){ |
||||||
|
if(fctDefinie && isNaN(etudeY[i])){ |
||||||
|
fctDefinie = false |
||||||
|
EDF += (parseInt(etudeX[i]/precisionEtude)*precisionEtude)+"[" |
||||||
|
} |
||||||
|
else if(!fctDefinie && !isNaN(etudeY[i])){ |
||||||
|
fctDefinie = true |
||||||
|
if(dejaDefinie){ |
||||||
|
EDF += " u " |
||||||
|
} |
||||||
|
EDF += "["+(parseInt(etudeX[i]/precisionEtude)*precisionEtude)+";" |
||||||
|
dejaDefinie = true |
||||||
|
} |
||||||
|
} |
||||||
|
if(fctDefinie && !isNaN(limDroite[1])){ |
||||||
|
fctDefinie = false |
||||||
|
EDF += "+∞[" |
||||||
|
} |
||||||
|
if(fctDefinie && !isNaN(limDroite[0])){ |
||||||
|
fctDefinie = false |
||||||
|
EDF += "+∞[" |
||||||
|
} |
||||||
|
for(var i=0; i<listeIndefini.length; i++){ |
||||||
|
if(i==0){ |
||||||
|
EDF += " - {" |
||||||
|
} |
||||||
|
EDF += listeIndefini[i] |
||||||
|
if(i==listeIndefini.length-1){ |
||||||
|
EDF += "}" |
||||||
|
} |
||||||
|
else |
||||||
|
EDF += ";" |
||||||
|
} |
||||||
|
document.getElementById('etudeEDF').innerHTML = EDF |
||||||
|
} |
||||||
|
|
||||||
|
// Etude de la parité
|
||||||
|
function pariteFct(){ |
||||||
|
var posZero |
||||||
|
var paire = true |
||||||
|
var impaire = true |
||||||
|
var positif, negatif |
||||||
|
var precisionParite = 1000 |
||||||
|
for(var i=0;i<etudeX.length;i++){ |
||||||
|
if(Math.round(etudeX[i]*precisionParite)/precisionParite==0){ |
||||||
|
posZero = i |
||||||
|
} |
||||||
|
} |
||||||
|
for(var i=1; i<etudeX.length/2; i++){ |
||||||
|
if(etudeY[posZero+i]>0){ |
||||||
|
positif = Math.floor(etudeY[posZero+i]) |
||||||
|
} |
||||||
|
else{ |
||||||
|
positif = Math.ceil(etudeY[posZero+i]) |
||||||
|
} |
||||||
|
if(etudeY[posZero-i]>0){ |
||||||
|
negatif = Math.floor(etudeY[posZero-i]) |
||||||
|
} |
||||||
|
else{ |
||||||
|
negatif = Math.ceil(etudeY[posZero-i]) |
||||||
|
} |
||||||
|
|
||||||
|
if(positif<25000 && positif>-25000){ |
||||||
|
if(positif != negatif){ |
||||||
|
paire = false |
||||||
|
//alert(i+" ; "+posZero+" ; "+etudeX.length+" ; "+positif+" ; "+negatif)
|
||||||
|
} |
||||||
|
if(positif != (-negatif)){ |
||||||
|
impaire = false |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if(paire){ |
||||||
|
document.getElementById("etudeParite").innerHTML = sankoreLang[lang].ev; |
||||||
|
} |
||||||
|
else if(impaire){ |
||||||
|
document.getElementById("etudeParite").innerHTML = sankoreLang[lang].unev; |
||||||
|
} |
||||||
|
else{ |
||||||
|
document.getElementById("etudeParite").innerHTML = sankoreLang[lang].na; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function zeroFct(){ |
||||||
|
listeZeros = new Array() |
||||||
|
var listeZerosArr = new Array() |
||||||
|
var precZeros = 5 |
||||||
|
for(var i=0; i<etudeX.length; i++){ |
||||||
|
if(Math.round(etudeY[i]*1000)/1000==0){ |
||||||
|
var nouveauZero = Math.round(etudeX[i]*precZeros)/precZeros |
||||||
|
if(listeZerosArr[listeZerosArr.length-1]!=nouveauZero){ |
||||||
|
listeZeros.push(Math.round(etudeX[i]*10)/10) |
||||||
|
listeZerosArr.push(nouveauZero) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function signeFct(fct){ |
||||||
|
var signe = new Array() |
||||||
|
var signePlus = new Array() |
||||||
|
var signeMoins = new Array() |
||||||
|
var dernier = 0 |
||||||
|
if(limGauche[0]>0){ |
||||||
|
signe[0] = "+" |
||||||
|
signePlus[0] = limGauche[1] |
||||||
|
signeMoins[0] = limGauche[0] |
||||||
|
} |
||||||
|
else{ |
||||||
|
signe[0] = "-" |
||||||
|
signePlus[0] = limGauche[1] |
||||||
|
signeMoins[0] = limGauche[0] |
||||||
|
} |
||||||
|
for(var i=0; i<etudeY.length; i++){ |
||||||
|
if(signe[signe.length-1]=="+"){ |
||||||
|
if(etudeY[i]<0){ |
||||||
|
signe.push("-") |
||||||
|
signePlus.push(etudeX[i]) |
||||||
|
signeMoins.push(etudeX[dernier]) |
||||||
|
} |
||||||
|
else if(etudeY[i]>0){ |
||||||
|
dernier = i |
||||||
|
} |
||||||
|
} |
||||||
|
if(signe[signe.length-1]=="-"){ |
||||||
|
if(etudeY[i]>0){ |
||||||
|
signe.push("+") |
||||||
|
signePlus.push(etudeX[i]) |
||||||
|
signeMoins.push(etudeX[dernier]) |
||||||
|
//alert(signe+" ; "+signePlus+'\n'+etudeY[i+1]+" ; "+etudeY[i]+" ; "+etudeY[i-1]+" ; "+etudeY[i-2]+'\n'+etudeX[i+1]+" ; "+etudeX[i]+" ; "+etudeX[i-1]+" ; "+etudeX[i-2])
|
||||||
|
} |
||||||
|
else if(etudeY[i]<0){ |
||||||
|
dernier = i |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
var valeurPlus, valeurMoins, millieu, precisionZero |
||||||
|
listeZeros = new Array() |
||||||
|
for(var i=1; i<signePlus.length; i++){ |
||||||
|
valeurPlus = signePlus[i] |
||||||
|
valeurMoins = signeMoins[i] |
||||||
|
for(var k=0;k<10000;k++){ |
||||||
|
millieu = (valeurPlus + valeurMoins)/2 |
||||||
|
x = valeurPlus |
||||||
|
if(eval(fct)>0){ |
||||||
|
x = millieu |
||||||
|
if(eval(fct)>0){ |
||||||
|
valeurPlus=millieu |
||||||
|
} |
||||||
|
else if(eval(fct)<0){ |
||||||
|
valeurMoins=millieu |
||||||
|
} |
||||||
|
else{ |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
else if(eval(fct)<0){ |
||||||
|
x = millieu |
||||||
|
if(eval(fct)<0){ |
||||||
|
valeurPlus=millieu |
||||||
|
} |
||||||
|
else if(eval(fct)>0){ |
||||||
|
valeurMoins=millieu |
||||||
|
} |
||||||
|
else{ |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
else{ |
||||||
|
millieu = valeurPlus |
||||||
|
break |
||||||
|
} |
||||||
|
x = valeurPlus |
||||||
|
precisionZero = eval(fct) |
||||||
|
x = valeurMoins |
||||||
|
precisionZero -= eval(fct) |
||||||
|
if(precisionZero>0.0001){ |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
listeZeros.push(Math.round(millieu*100)/100) |
||||||
|
} |
||||||
|
var texteZeros = "" |
||||||
|
if(listeZeros==""){ |
||||||
|
zeroFct() |
||||||
|
texteZeros = "~ " |
||||||
|
} |
||||||
|
var texte = sankoreLang[lang].signe; |
||||||
|
var aSupprimer = new Array() |
||||||
|
for(var i=0; i<signe.length; i++){ |
||||||
|
texte += "<td>"+signe[i]+"</td>" |
||||||
|
if(listeZeros[i]!=undefined){ |
||||||
|
x = listeZeros[i] |
||||||
|
if(isFinite(eval(fct))){ |
||||||
|
texte += "<td class='border'>"+listeZeros[i]+"</td>" |
||||||
|
} |
||||||
|
else{ |
||||||
|
texte += "<td class='border infini'>"+listeZeros[i]+"</td>" |
||||||
|
listeIndefini.push(listeZeros[i]) |
||||||
|
aSupprimer.push(i) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
document.getElementById("etudeSigne").innerHTML = texte |
||||||
|
for(var i=0; i<aSupprimer.length; i++){ |
||||||
|
listeZeros.splice((aSupprimer[i]-i), 1) |
||||||
|
} |
||||||
|
if(listeZeros==""){ |
||||||
|
texteZeros = sankoreLang[lang].na; |
||||||
|
} |
||||||
|
document.getElementById("etudeZeros").innerHTML = texteZeros+listeZeros |
||||||
|
} |
||||||
|
|
||||||
|
function asymptotes(){ |
||||||
|
// Horizontales
|
||||||
|
if(Math.abs(limGauche[0])<1000){ |
||||||
|
var limRound = Math.round(limGauche[0]*100)/100 |
||||||
|
if(limGauche[0]<limRound){ |
||||||
|
document.getElementById("etudeAHG").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_higher + "</span>" |
||||||
|
} |
||||||
|
else if(limGauche[0]>limRound){ |
||||||
|
document.getElementById("etudeAHG").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_lower + "</span>" |
||||||
|
} |
||||||
|
else{ |
||||||
|
document.getElementById("etudeAHG").innerHTML = "y = "+limRound |
||||||
|
} |
||||||
|
} |
||||||
|
else{ |
||||||
|
document.getElementById("etudeAHG").innerHTML = sankoreLang[lang].na; |
||||||
|
} |
||||||
|
if(Math.abs(limDroite[0])<1000){ |
||||||
|
var limRound = Math.round(limDroite[0]*100)/100 |
||||||
|
if(limDroite[0]<limRound){ |
||||||
|
document.getElementById("etudeAHD").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_lower + "</span>" |
||||||
|
} |
||||||
|
else if(limDroite[0]>limRound){ |
||||||
|
document.getElementById("etudeAHD").innerHTML = "y = "+limRound +" <span class='texteSecondaire'>" + sankoreLang[lang].curve_higher + "</span>" |
||||||
|
} |
||||||
|
else{ |
||||||
|
document.getElementById("etudeAHD").innerHTML = "y = "+limRound |
||||||
|
} |
||||||
|
} |
||||||
|
else{ |
||||||
|
document.getElementById("etudeAHD").innerHTML = sankoreLang[lang].na; |
||||||
|
} |
||||||
|
// Verticales
|
||||||
|
var texteAV = "" |
||||||
|
for(var i=0; i<listeIndefini.length; i++){ |
||||||
|
texteAV += "x = "+listeIndefini[i] |
||||||
|
if(listeIndefini[i+1]!=undefined){ |
||||||
|
texteAV += " ; " |
||||||
|
} |
||||||
|
} |
||||||
|
if(texteAV==""){ |
||||||
|
texteAV = sankoreLang[lang].na + " <br/>" |
||||||
|
} |
||||||
|
document.getElementById("etudeAV").innerHTML = texteAV |
||||||
|
} |
||||||
|
|
||||||
|
function courbure(){ |
||||||
|
var texteMin = ""; |
||||||
|
var texteMax = ""; |
||||||
|
var texteI = ""; |
||||||
|
var nbrI = 0; |
||||||
|
var i; |
||||||
|
for(i=0; i<etudeD.length; i++){ |
||||||
|
if(etudeD[i]==0){ |
||||||
|
if(etudeD[i-1]<0 && etudeD[i+1]>0){ |
||||||
|
texteMin += "<br/>" + sankoreLang[lang].min + "("+Math.round(etudeX[i]*10000)/10000+";"+etudeY[i]+")"; |
||||||
|
} |
||||||
|
else if(etudeD[i-1]>0 && etudeD[i+1]<0){ |
||||||
|
texteMax += "<br/>" + sankoreLang[lang].max + "("+Math.round(etudeX[i]*10000)/10000+";"+etudeY[i]+")"; |
||||||
|
} |
||||||
|
else{ |
||||||
|
nbrI++; |
||||||
|
texteI += '<br/>I<span style="vertical-align:sub;font-size:50%;">'+nbrI+"</span>("+Math.round(etudeX[i]*10000)/10000+";"+etudeY[i]+")"; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if(texteMin==""){ |
||||||
|
texteMin = "<br/>" + sankoreLang[lang].no_min; |
||||||
|
} |
||||||
|
if(texteMax==""){ |
||||||
|
texteMax = "<br/>" + sankoreLang[lang].no_max; |
||||||
|
} |
||||||
|
if(texteI==""){ |
||||||
|
texteI = "<br/>Aucun I"; |
||||||
|
} |
||||||
|
document.getElementById("etudeMin").innerHTML = texteMin; |
||||||
|
document.getElementById("etudeMax").innerHTML = texteMax; |
||||||
|
} |
||||||
@ -0,0 +1,213 @@ |
|||||||
|
|
||||||
|
// -------------------- Fonctions de l'interface --------------------
|
||||||
|
|
||||||
|
var pleinEcran = false |
||||||
|
var maximise = true |
||||||
|
var tailleFenetreX = window.innerWidth
|
||||||
|
var tailleFenetreY = window.innerHeight
|
||||||
|
var AncienneMethodeAffichage = 0 |
||||||
|
|
||||||
|
// Cette fonction permet d'afficher le menu désiré.
|
||||||
|
// Il faut lui donner l'id du menu à afficher.
|
||||||
|
function afficherMenu(id){ |
||||||
|
if (menuActuel == id){ |
||||||
|
cacherMenu() |
||||||
|
} |
||||||
|
else { |
||||||
|
if (menuActuel !== ""){ |
||||||
|
cacherMenu() |
||||||
|
} |
||||||
|
menuActuel = id |
||||||
|
document.getElementById(id).style.display = "block" |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Permet de cacher le menu actuellement affiché
|
||||||
|
function cacherMenu(){ |
||||||
|
document.getElementById(menuActuel).style.display = "none" |
||||||
|
menuActuel = "" |
||||||
|
} |
||||||
|
|
||||||
|
// ---- Minimiser ou Maximiser le widget (pour sankore) ----
|
||||||
|
function miniMax(){ |
||||||
|
if (maximise){ |
||||||
|
maximise = false |
||||||
|
document.getElementById('affichage').style.display = "none" |
||||||
|
document.getElementById('gauche').style.display = "none" |
||||||
|
document.getElementById('miniMax').innerHTML = "+" |
||||||
|
window.resizeTo(400,50) |
||||||
|
AncienneMethodeAffichage = document.getElementById("selectMethodeAffichage").selectedIndex |
||||||
|
document.getElementById("selectMethodeAffichage").selectedIndex = "3" |
||||||
|
} |
||||||
|
else{ |
||||||
|
maximise = true |
||||||
|
document.getElementById('affichage').style.display = "block" |
||||||
|
document.getElementById('gauche').style.display = "block" |
||||||
|
document.getElementById('miniMax').innerHTML = "-" |
||||||
|
window.resizeTo(tailleFenetreX,tailleFenetreY) |
||||||
|
document.getElementById("selectMethodeAffichage").selectedIndex = AncienneMethodeAffichage |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Action des petits bouton + et - dans les options
|
||||||
|
function boutonPlus(id, nombre){ |
||||||
|
var element = document.getElementById(id) |
||||||
|
var valeurActuelle = Number(element.value) |
||||||
|
element.value = valeurActuelle + nombre |
||||||
|
} |
||||||
|
function boutonMoins(id, nombre){ |
||||||
|
var element = document.getElementById(id) |
||||||
|
var valeurActuelle = Number(element.value) |
||||||
|
if(valeurActuelle>=nombre*2){ |
||||||
|
element.value = valeurActuelle - nombre |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Changer de thème
|
||||||
|
function changerTheme(){ |
||||||
|
var theme = document.getElementById("selectTheme").value |
||||||
|
switch(theme){ |
||||||
|
case "noir": |
||||||
|
document.body.style.backgroundImage = "url(Images/fond2.png)" |
||||||
|
document.getElementById("gauche").style.backgroundImage = "url(Images/gauche2.png)" |
||||||
|
document.getElementById("onglet3D").style.backgroundImage = "url(Images/onglet1.png)" |
||||||
|
document.getElementById("texteFonction").style.color = "white" |
||||||
|
var couleurEchelle = "rgba(255,255,255,0.8)" |
||||||
|
var couleurGrille = "rgba(255,255,255,0.1)" |
||||||
|
var couleurAxes = "rgba(0,0,0,0.5)" |
||||||
|
break |
||||||
|
case "bleu": |
||||||
|
document.body.style.backgroundImage = "url(Images/fond4.png)" |
||||||
|
document.getElementById("gauche").style.backgroundImage = "url(Images/gauche3.png)" |
||||||
|
document.getElementById("onglet3D").style.backgroundImage = "url(Images/onglet2.png)" |
||||||
|
document.getElementById("texteFonction").style.color = "white" |
||||||
|
var couleurEchelle = "rgba(255,255,255,0.8)" |
||||||
|
var couleurGrille = "rgba(255,255,255,0.1)" |
||||||
|
var couleurAxes = "rgba(0,0,0,0.5)" |
||||||
|
break |
||||||
|
case "blanc": |
||||||
|
document.body.style.backgroundImage = "url(Images/fond5.png)" |
||||||
|
document.getElementById("gauche").style.backgroundImage = "url(Images/gauche3.png)" |
||||||
|
document.getElementById("onglet3D").style.backgroundImage = "url(Images/onglet2.png)" |
||||||
|
document.getElementById("texteFonction").style.color = "black" |
||||||
|
var couleurEchelle = "rgba(0,0,0,0.8)" |
||||||
|
var couleurGrille = "rgba(255,255,255,0.2)" |
||||||
|
var couleurAxes = "rgba(0,0,0,0.5)" |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Affiche un message d'erreur
|
||||||
|
function error(err){ |
||||||
|
alert(" Error has occurred on the page ...\n\n Description: " + err.description + "\n\n Click 'OK' to continue.\n\n") |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function agrandirAffichage(){ |
||||||
|
if (pleinEcran){ |
||||||
|
pleinEcran = false |
||||||
|
if(fonction3D){ |
||||||
|
document.getElementById('gauche3D').style.display = "block" |
||||||
|
largeur = 570 |
||||||
|
document.getElementById("affichage").style.width = largeur+"px" |
||||||
|
document.getElementById("affichage").style.left = "59px" |
||||||
|
document.getElementById("flecheGauche").style.left = "67px" |
||||||
|
document.getElementById("flecheHaut").style.left = "290px" |
||||||
|
document.getElementById("flecheBas").style.left = "290px" |
||||||
|
} |
||||||
|
else{ |
||||||
|
choixOutil(outilPrecedent) |
||||||
|
document.getElementById('gauche').style.display = "block" |
||||||
|
largeur = 500 |
||||||
|
document.getElementById("affichage").style.width = largeur+"px" |
||||||
|
document.getElementById("affichage").style.left = "129px" |
||||||
|
document.getElementById("flecheGauche").style.left = "137px" |
||||||
|
document.getElementById("flecheHaut").style.left = "345px" |
||||||
|
document.getElementById("flecheBas").style.left = "345px" |
||||||
|
} |
||||||
|
document.getElementById('haut').style.display = "block" |
||||||
|
document.getElementById('onglet3D').style.display = "block" |
||||||
|
hauteur = 400 |
||||||
|
document.getElementById("affichage").style.height = hauteur+"px" |
||||||
|
document.getElementById("affichage").style.top = "52px" |
||||||
|
} |
||||||
|
else{ |
||||||
|
pleinEcran = true |
||||||
|
if(fonction3D){ |
||||||
|
document.getElementById('gauche3D').style.display = "none" |
||||||
|
} |
||||||
|
else{ |
||||||
|
document.getElementById('gauche').style.display = "none" |
||||||
|
outilPrecedent = outil |
||||||
|
choixOutil("deplacement") |
||||||
|
} |
||||||
|
document.getElementById('haut').style.display = "none" |
||||||
|
document.getElementById('onglet3D').style.display = "none" |
||||||
|
largeur = 625 |
||||||
|
hauteur = 445 |
||||||
|
document.getElementById("affichage").style.width = largeur+"px" |
||||||
|
document.getElementById("affichage").style.left = "15px" |
||||||
|
document.getElementById("affichage").style.height = hauteur+"px" |
||||||
|
document.getElementById("affichage").style.top = "15px" |
||||||
|
document.getElementById("flecheGauche").style.left = "67px" |
||||||
|
document.getElementById("flecheHaut").style.left = "290px" |
||||||
|
document.getElementById("flecheBas").style.left = "290px" |
||||||
|
} |
||||||
|
actualiserGraph() |
||||||
|
} |
||||||
|
|
||||||
|
// Redémarre le widget
|
||||||
|
function reset(){ |
||||||
|
window.location.reload() |
||||||
|
} |
||||||
|
|
||||||
|
// Ferme le widget
|
||||||
|
function close(){ |
||||||
|
window.close() |
||||||
|
} |
||||||
|
|
||||||
|
// Actions de mise à jour du widget
|
||||||
|
function miseAjour(){ |
||||||
|
afficherMenu("mAj") |
||||||
|
choixOutil("deplacement") |
||||||
|
document.getElementById("thisVersion").innerHTML = '<object type="text/html" data="version.html"></object>' |
||||||
|
document.getElementById("newVersion").innerHTML = '<object type="text/html" data="http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/version.html"></object>' |
||||||
|
} |
||||||
|
|
||||||
|
function checkboxMaJ(){ |
||||||
|
if(document.location.href=='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.xhtml'){ |
||||||
|
afficherMenu('erreurMaJ') |
||||||
|
document.getElementById("checkMaJ").checked = false |
||||||
|
} |
||||||
|
else{ |
||||||
|
if(document.getElementById("checkMaJ").checked){ |
||||||
|
loadOptions() |
||||||
|
document.getElementById("checkMaJ").checked = true |
||||||
|
saveOptions() |
||||||
|
} |
||||||
|
else{ |
||||||
|
loadOptions() |
||||||
|
document.getElementById("checkMaJ").checked = false |
||||||
|
saveOptions() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function majAuto(){ |
||||||
|
if(document.location.href=='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.xhtml'){ |
||||||
|
document.getElementById("cacheMaJ").style.display = "block" |
||||||
|
document.getElementById("checkMaJ").checked = true |
||||||
|
} |
||||||
|
else{ |
||||||
|
if(document.getElementById("checkMaJ").checked){ |
||||||
|
afficherMenu('demandeMaJ') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Afficher une page web à la place dans la zone d'affichage
|
||||||
|
function navigateur(lien){ |
||||||
|
cacherMenu() |
||||||
|
agrandirAffichage() |
||||||
|
document.getElementById("affichage").innerHTML = '<object type="text/html" data="'+lien+'" style="width:100%;height:100%;"></object>' |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue