[Sugar-devel] Request for help on New Sugar Activity

[Puneet Kaur]

Hi Sneha,

Your implementation seems nice, but would be better if you show the changes
done on a committed change list on github, so that we can see the changes
at one place and contribute.

I would request you to look into the already existing Paint activity to get
an idea about the basic stuff. Please look in into the code lying here :
https://github.com/llaske/sugarizer/blob/master/activities/Paint.activity

It would give you a basic overview of how the Paint activity should be
using which you can go on adding more palettes and functionalities to your
app. Specifically for the palette part, you can have a look here :
https://github.com/llaske/sugarizer/blob/master/activities/Paint.activity/js/colorpalette.js

Also you can look into Michaël's code as baseline for your project and add
on features to it - https://github.com/mikklfr/Paint.activity and
http://mikklfr.github.io/Paint.activity/ are some good references.



Regards,
Puneet

On Wed, Jul 15, 2015 at 7:54 PM, Sneha Mohanty <sm21483 at gmail.com> wrote:

>
> Hi Michael, Puneet and everybody else
>
> I am new to SugarLabs and have some experience in JavaScript. So, i have
> coded a Sugar activity using HTML and JS, instead of python.
>
> I am facing a Major constraint -
>
> I would like to add a palette on my Sugar toolbar and add all my radio
> buttons within it , so that it toggles on click , according to this piece
> of code in *palette.js* present in  this path -   lib/sugar-web/graphics/
>
>
> function createPaletteElement() {
>             if (paletteElem !== undefined) {
>                 return;
>             }
>             paletteElem = document.createElement(‘div’);
>             paletteElem.className = “palette”;
>             paletteElem.style.visibility = “hidden”;
>             document.body.appendChild(paletteElem);
>             if (that.invoker.classList.contains(“toolbutton”)) {
>                 invokerElem = document.createElement(‘div’);
>                 invokerElem.className = “palette-invoker”;
>                 var style = that.invoker.currentStyle ||
>                     window.getComputedStyle(that.invoker, ”);
>                 invokerElem.style.backgroundImage = style.backgroundImage;
>                 invokerElem.addEventListener(‘click’, function (e) {
>                    * that.toggle();*
>                 });
>                 paletteElem.appendChild(invokerElem);
>            }
>             wrapperElem = document.createElement(‘div’);
>             wrapperElem.className = “wrapper”;
>             paletteElem.appendChild(wrapperElem);
>             if (that.primaryText !== undefined) {
>                 headerElem = document.createElement(‘div’);
>                 headerElem.className = “header”;
>                 headerElem.innerText = that.primaryText;
>                 wrapperElem.appendChild(headerElem);
>             }
>             headerSeparatorElem = document.createElement(‘hr’);
>             headerSeparatorElem.className = “header-separator”;
>             headerSeparatorElem.style.display = “none”;
>             wrapperElem.appendChild(headerSeparatorElem);
>             containerElem = document.createElement(‘div’);
>             containerElem.className = “container”;
>             wrapperElem.appendChild(containerElem);
>             updatePosition();
>         }
>
> I have included require.js as the only js file linked inside the
> index.html
>
> <script data-main="js/loader" src="lib/require.js"></script>
>
> Also*,* in
>
> *  index.html, *
> *i have called the createPallete function in the following manner* -
>
>
>
> requirejs.config({
>     baseUrl: "lib"
> });
>
> require(["sugar-web/graphics/palette", "domReady!"],
>         function (palette, doc) {
>
>     var neighbButton = document.getElementById("zoom-neighborhood");
>     var groupsButton = document.getElementById("zoom-groups");
>     var homeButton = document.getElementById("zoom-home");
>     var textElem = document.querySelector("#canvas p");
>
>     var neighbPalette = new palette.Palette(neighbButton, "Neighborhood");
>     var groupsPalette = new palette.Palette(groupsButton, "Groups");
>     var homePalette = new palette.Palette(homeButton, "Home");
>     var textPalette = new palette.Palette(textElem);
>
>     var sampleText = document.createElement('p');
>     sampleText.innerText = "This is the content of the palette. " +
>         "This palette has a header.";
>     homePalette.setContent([sampleText]);
>
>     var sampleText = document.createElement('p');
>     sampleText.innerText = "This is the content of the palette " +
>         "This palette doesn't have a header.";
>     textPalette.setContent([sampleText]);
>
>     neighbPalette.popUp();
> });
>
> and* inside the style tag, in index.html,*
>
> i have done the css for these icons -
>
> #main-toolbar #zoom-neighborhood {
>   background-image:
> url(lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg);
> }
>
> #main-toolbar #zoom-groups {
>   background-image:
> url(lib/sugar-web/graphics/icons/actions/zoom-groups.svg);
> }
>
> #main-toolbar #zoom-home {
>   background-image:
> url(lib/sugar-web/graphics/icons/actions/zoom-home.svg);
> }
>
> #canvas p {
>   background-color: white;
>   margin: 11px;
>   padding: 11px;
> }
>
> .palette p {
>   margin: 5.5px;
> }
>
>
> My problem is, i am unable to generate the required functionality of the
> pallete. , example : i am unable to toggle it and generate any other
> functionalities on it.
>
> Please help me out.
>
> Regards,
> Sneha Mohanty
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20150715/408a7b74/attachment.html>