Using web widgets in content on a #Chisimba based site
Tweet
313 days ago
Chisimba can be used to build all kinds of different sites, ranging from an academic programme registration system, through a content management system or an eLearning system (so-called learning management system), to a blog or wiki and lots more.
All the content tools and most of the blocks can take filters. For text blocks, you do not need this filter, since text blocks do not have a WYSWYG editor. The filter that I am going to describe here is just a shortcut to avoid the need for people who are not comfortable with messing around in the source code of the page in the editor. It allows you to paste a web widget directly into the WYSWYG editor, right in the content of the page.
Many sites give you code snippets, which are used as widgets to create some kind of mashup. For example, TeacherTube (http://teachertube.com/) is a good source of educational videos, many of which you will not find on YouTube. There is no specific filter for TeacherTube because the site's player does not lend itself to filter creation, but you can copy the embeddable player and paste it into your content page surrounded by WIDGET tags.
The filter is [WIDGET][/WIDGET] and is used to enclose a web widget in the WYSWYG editor. To use this to embed a TeacherTube video, simply surround the TeacherTube code by this tag. The format is: [WIDGET]<embed width="470" height="260" flashvars="file=http://www.teachertube.com/embedFLV.php?pg=video_120951&menu=false&frontcolor=ffffff&lightcolor=FF0000&logo=http://www.teachertube.com/www3/images/greylogo.swf&skin=http://www.teachertube.com/embed/overlay.swf&volume=80&controlbar=over&displayclick=link&viral.link=http://www.teachertube.com/viewVideo.php?video_id=120951&stretching=exactfit&plugins=viral-1,gapro-1&viral.callout=none&viral.onpause=false&gapro.accountid=UA-2624863-1&gapro.trackstarts=true&gapro.trackpercentage=true&gapro.tracktime=true" allowfullscreen="true" allowscriptaccess="always" bgcolor="undefined" src="http://www.teachertube.com/embed/player.swf"></embed>
This will cause the embeddable player to be shown when the page is viewed, as below:
This allows you to insert videos from sites other than YouTube, as well as other kinds of content from widget sites without having to tamper with the source HTML of the content.
I might use this to insert a web widget, for example from Widgetbox or another widget site. The same principle works. To insert a guitar tuner widget, I might use:
[WIDGET]<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('b7cf6c47-768d-4ae3-8ca5-f7b5f7044942');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/guitar-tuner">Guitar Tuner</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>!</noscript>
which is copied from the guitar tuner widget on widgetbox. I keep this on my local copy of Chisimba and use it daily to tune my guitar!
There are plenty of educational widgets, videos, sound bytes and other goodies that can easily be inserted in this way.There are plenty of educational widgets, videos, sound bytes and other goodies that can easily be inserted in this way.
chisimba filters widgets
|
Trackback URL No trackbacks were found for this post | 
|
How to create content with dashboard gages in #Chisimba content
Tweet
314 days ago
Have you ever wanted to produce a report that has dashboard gages in it? You can now do this in any Chisimba content tool that supports filters. These include the content management system (CMS), news, blog, discussion forum, course and group content, blocks, etc.
The GAGE filter implements these dashboard gages using google graph API. Use it as
[GAGE:actual=percentage,label=percentage,colors=start-finish,size=size]Your caption here[/GAGE]
For example, to produce the gage below:
Half way there
use the code:
[GAGE:actual=50,label=50,colors=red-green,size=150x100]Half way there[/GAGE]
Here is an example of useage:
| Step | Progress |
| Purchase the ingredients | Purchase |
| Place ingredients on counter top | Where are the rest |
| Heat the oven | Oven |
| Mix the ingredients | Dry ingredients |
I am sure you can think of other uses!
NOTES:
the numbers should always be percentages;
colors can only be red-green or green-red;
the x in the size must be lower case;
only a white background at present.
filters Chisimba gages
|
|
Trackback URL No trackbacks were found for this post |
|
User accounts deleted
Tweet
316 days ago
I had allowed for self-registration on this site, but as I do not really have time to maintain external users, I have deleted all existing users. I have been neglecting the site a bit lately, and some people used the opportunity to spam the comments. I have therefore deleted all comments, rather than search and remove the abusive ones.
If you have registered on this site, you will not be able to login with those credentials any more. I will shortly implement the feature that allows you to login with your Facebook account. Hopefully that will require less maintenance on my part. Apologies to those who have been deleted.
This post has not been tagged
|
|
Trackback URL No trackbacks were found for this post |
|
The Malta Moon file I used for the OpenZoom / #Chisimba tutorial
Tweet
345 days ago
These are the Malta Moon files that I used for the tutorial on building multiscale images and using them with the OpenZoom Chisimba filter.
Moon over Malta
You can download this whole set as a zip file if you want to explore it.
chisimba filters openzoom multiscale image streaming malta moon
|
|
Trackback URL No trackbacks were found for this post |
|
Creating multiscale images using them with the #Chisimba OpenZoom filter
Tweet
346 days ago
This video is a screen recording showing how to create multiscale images using some simple python tools from OpenZoom Endo. It also shows how to use them with the #Chisimba OpenZoom filter.
chisimba filters openzoom multiscale image streaming
|
|
Trackback URL No trackbacks were found for this post |
|
Installing the OpenZoom Endo python tools for making multiscale images for use in #Chisimba
Tweet
346 days ago
This video describes how to install the multiscale python tools from the OpenZoom project Endo so that you can produce multiscale images for use in Chisimba with the OPENZOOM filter.
chisimba filters openzoom multiscale image streaming
|
|
Trackback URL No trackbacks were found for this post |
|
OpenZoom filter demonstration in #Chisimba
Tweet
347 days ago
This is an underwater photo that I took in Malta in June. The source image is 1422x1387 pixels, which is not large. But it is large enough to demonstrate the features of the OpenZoom multiscale image plugin for Chisimba. I developed this filter and the plugin module that it uses based on the work of Daniel Gasienica in developing the underlying flash and jQuery plugin.
 Invertebrates in Malta. |
This is an underwater photograph from Malta that I took with a cheap rental camera when I was diving there in June. You can use the mouse wheel to zoom into and out of the image. This uses an image pyramid, that enables the image to 'stream' so the full image size is only loaded if you want it. Use the Shift key while zooming to prevent the web page from scrolling up and down. |
I will blog about how to use this filter in the next day or so.
openzoom multiscale image
|
|
Trackback URL No trackbacks were found for this post |
|
My work on OpenZoom and #Chisimba integration
Tweet
349 days ago
Having solved the problem of the OpenZoom applet being able to live in an arbitrary location, I have now moved on to working on getting a basic OpenZoom filter working in Chisimba. Feeds from this work appear below.
[RSS]http://search.twitter.com/search.atom?q=openzoom+%23chisimba[/RSS]
As soon as I have worked out how to make the image pyramid, I will blog with an example.
openzoom multiscale image
|
|
Trackback URL No trackbacks were found for this post |
|
Changing OpenZoom Nano so it can work with the flash player in an arbitrary location (e.g. as a Chisimba plugin)
Tweet
351 days ago
I have been experimenting with OpenZoom, and with writing a Chisimba wrapper for it so it can be a Chisimba plugin. The OpenZoom Project promotes and supports the use of high-resolution images and Zoomable User Interfaces (ZUIs) on the web. OpenZoom provides frameworks, tools and documentation to enable you to create great user experiences.
The OpenZoom SDK is a free & open source toolkit for delivering high-resolution images and Zoomable User Interfaces (ZUIs) to the web and desktop. It is built on top of the Adobe Flash Platform and was developed by Daniel Gasienica, a Computer Science student in Zürich, Switzerland. The kit consists of some python tools for producing the zoomable images, as well as a jQuery plugin to render a flash applet (OpenZoom Nano) in a web page. This should make it easy to build a Chisimba wrapper, and a Chisimba filter for it.
When getting started, I hit a known issue, in that the flash player has to be in the same directory as the source image and the HTML file that makes it viewable. This would be impossible for writing a Chisimba plugin, so I posed the question on the Chisimba developer's mailing list. A solution was suggested by one of the developers there, and I merely implemented his idea and it worked.
It was necessary to change the openzoom run function as follows to read an openzoom:viewerpat parameter from the image tag, specifically:
appletFile = $(this).attr("openzoom:viewerpath") + "OpenZoomViewer.swf",
Note that I put my viewer in a directory called tmp, below the directory with the source image. You also need to change the image tag attributes to add this viewerpath as follows:
<img src="me/me-500x375.jpg" width="500" height="375" openzoom:source="../me/image.xml" openzoom:viewerpath="tmp/">
Note also that the openzoom:source now points to the image via a realative path, and the path is relative to the actual location of the viewer. In this case it is one up (../) and down in the directory 'me'. This is a limitation that makes this a bit of a dirty hack. It would be better if the image path could be absolute, but that will probably require an actionscript hero to look at the source of the player. For now, this at least works, and I can start playing with a filter for Chisimba.
The full code then looks as follows, with the changed lines indicated in red.
* OpenZoom Endo 0.4
* http://openzoom.org/
*
* Copyright (c) 2007-2009, Daniel Gasienica <daniel@gasienica.ch>
* License: GNU General Public License v3
* <http://www.gnu.org/licenses/gpl.html>;
*/
(function($) {
$.openzoom = {};
$.openzoom.run = function ()
{
$("img").each(function() {
var width = $(this).attr("width"),
height = $(this).attr("height"),
source = $(this).attr("openzoom:source"),
appletFile = $(this).attr("openzoom:viewerpath") + "OpenZoomViewer.swf",
alternate = "<img src="" + $(this).attr("src") + "" width="" + width + "" height="" + height + "">",
viewerId = "viewer" + Math.floor(Math.random() * 0x424f),
defaults = {
viewer: appletFile,
background: "#111111"
}
viewer = getEmbedHTML(source, width, height, alternate, viewerId, defaults);
if (source != null && source != "")
$(this).replaceWith(viewer);
});
function getEmbedHTML(source, width, height, alternate, id, options)
{
return "<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" " +
"width=""+ width +"" height=""+ height +"" id="" + id + "" name="" + id + "">" +
"<param name="movie" value="" + options.viewer + ""/>" +
"<param name="scale" value="noscale" />" +
"<param name="bgcolor" value="" + options.background + "" />" +
"<param name="allowfullscreen" value="true"/>" +
"<param name="allowscriptaccess" value="always" />" +
"<param name="flashvars" value="source=" + source + ""/>" +
"<!--[if !IE]>-->" +
"<object type="application/x-shockwave-flash" data="" + options.viewer + "" " +
"width=""+ width +"" height=""+ height +"" name="" + id + "">" +
"<param name="scale" value="noscale" />" +
"<param name="bgcolor" value="" + options.background + "" />" +
"<param name="allowfullscreen" value="true" />" +
"<param name="allowscriptaccess" value="always" />" +
"<param name="flashvars" value="source=" + source + ""/>" +
"<!--<![endif]-->" +
alternate +
"<!--[if !IE]>--> " +
"</object>" +
"<!--<![endif]-->" +
"</object>";
}
}
})(jQuery);
jQuery.noConflict();jQuery(document).ready(function(){jquery.openzoom.run()});
You can download Daniel's simple example with the altered code.
openzoom chisimba
|
|
Trackback URL No trackbacks were found for this post |
|
Version 3.1.1 of the Chisimba Framework core available
Tweet
371 days ago
Version 3.1.1 of the Chisimba Framework is now available for download on
the AVOIR downloads page and the OSUSL mirror for those off UWC campus ( http://ftp.osuosl.org/pub/chisimba/ )
chisimba
|
|
Trackback URL No trackbacks were found for this post |
|
Windows 7 sins and the case against proprietary software
Tweet
371 days ago
As someone who has enjoyed the benefits of software freedom for a number of years, I am at times amused and others saddened to see people using proprietary software these days. The folks at the Free Software Foundation has used the launch of Windows 7 by the Redmond based license vendor, Microsoft, to raise awareness of Free Software. The campaign is based in part on the unsavoury practices of the license vendor in education. The site says
Visit the site if you are interested in education, democracy or freedom. The Redmond-based license vendor has been up to its monopolistic practices in South Africa including wineing and dining government officials, using its global power to undermine national strategies around document standards, marketing its licenses to school children, breaking South African patenting policy by attempting to gain software patents on commonly used practices, and attempting to deliberately undermine Government Open Source strategy. Of course, there are those who would argue that such immoral practices are just business. Well, so is the FSF campaign.
free software microsoft windows 7 south africa education
|
|
Trackback URL No trackbacks were found for this post |
|
