<div dir="ltr">Hi Sneha,<div><br></div><div>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.</div><div><br></div><div>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 : <a href="https://github.com/llaske/sugarizer/blob/master/activities/Paint.activity" target="_blank">https://github.com/llaske/sugarizer/blob/master/activities/Paint.activity</a></div><div><br></div><div>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 : <a href="https://github.com/llaske/sugarizer/blob/master/activities/Paint.activity/js/colorpalette.js" target="_blank">https://github.com/llaske/sugarizer/blob/master/activities/Paint.activity/js/colorpalette.js</a></div><div><br></div><div>Also you can look into Michaël's code as baseline for your project and add on features to it - <a href="https://github.com/mikklfr/Paint.activity">https://github.com/mikklfr/Paint.activity</a> and <a href="http://mikklfr.github.io/Paint.activity/">http://mikklfr.github.io/Paint.activity/</a> are some good references.</div><div><br></div><div><br></div><div><br></div><div>Regards,</div><div>Puneet </div></div><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Jul 15, 2015 at 7:54 PM, Sneha Mohanty <span dir="ltr"><<a href="mailto:sm21483@gmail.com" target="_blank">sm21483@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div><div><div><div><div><div><div><div><div><br clear="all"></div>Hi Michael, Puneet and everybody else<br><br></div>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.<br><br></div>I am facing a Major constraint -<br><br></div>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 <b>palette.js</b> present in this path - lib/sugar-web/graphics/ <br><br><div>function createPaletteElement() {</div>
<div> if (paletteElem !== undefined) {</div>
<div> return;</div>
<div> }</div>
<div> paletteElem = document.createElement(‘div’);</div>
<div> paletteElem.className = “palette”;</div>
<div> <span>paletteElem.style.visibility</span> = “hidden”;</div>
<div> <span>document.body.appendChild(paletteElem</span>);</div>
<div> if (that.invoker.classList.contains(“toolbutton”)) {</div>
<div> invokerElem = document.createElement(‘div’);</div>
<div> invokerElem.className = “palette-invoker”;</div>
<div> var style = that.invoker.currentStyle ||</div>
<div> window.getComputedStyle(that.invoker, ”);</div>
<div> <span>invokerElem.style.backgroundImage</span> = style.backgroundImage;</div>
<div> invokerElem.addEventListener(‘click’, function (e) {</div>
<div> <b> that.toggle();</b></div>
<div> });</div>
<div> paletteElem.appendChild(invokerElem);</div>
<div> }</div>
<div> wrapperElem = document.createElement(‘div’);</div>
<div> wrapperElem.className = “wrapper”;</div>
<div> paletteElem.appendChild(wrapperElem);</div>
<div> if (that.primaryText !== undefined) {</div>
<div> headerElem = document.createElement(‘div’);</div>
<div> headerElem.className = “header”;</div>
<div> headerElem.innerText = that.primaryText;</div>
<div> wrapperElem.appendChild(headerElem);</div>
<div> }</div>
<div> headerSeparatorElem = document.createElement(‘hr’);</div>
<div> headerSeparatorElem.className = “header-separator”;</div>
<div> <span>headerSeparatorElem.style.display</span> = “none”;</div>
<div> wrapperElem.appendChild(headerSeparatorElem);</div>
<div> containerElem = document.createElement(‘div’);</div>
<div> containerElem.className = “container”;</div>
<div> wrapperElem.appendChild(containerElem);</div>
<div> updatePosition();</div>
<div> }<br><br></div><div>I have included require.js as the only js file linked inside the index.html <br><br><script data-main="js/loader" src="lib/require.js"></script><br><br></div><div>Also<b>,</b> in<b> index.html, <br><br></b></div><div><b>i have called the createPallete function in the following manner</b> -<br><br><br><br>requirejs.config({<br> baseUrl: "lib"<br>});<br><br>require(["sugar-web/graphics/palette", "domReady!"],<br> function (palette, doc) {<br><br> var neighbButton = document.getElementById("zoom-neighborhood");<br> var groupsButton = document.getElementById("zoom-groups");<br> var homeButton = document.getElementById("zoom-home");<br> var textElem = document.querySelector("#canvas p");<br><br> var neighbPalette = new palette.Palette(neighbButton, "Neighborhood");<br> var groupsPalette = new palette.Palette(groupsButton, "Groups");<br> var homePalette = new palette.Palette(homeButton, "Home");<br> var textPalette = new palette.Palette(textElem);<br><br> var sampleText = document.createElement('p');<br> sampleText.innerText = "This is the content of the palette. " +<br> "This palette has a header.";<br> homePalette.setContent([sampleText]);<br><br> var sampleText = document.createElement('p');<br> sampleText.innerText = "This is the content of the palette " +<br> "This palette doesn't have a header.";<br> textPalette.setContent([sampleText]);<br><br> neighbPalette.popUp();<br>});<br><br></div>and<b> inside the style tag, in index.html,</b><br><br></div>i have done the css for these icons -<br><br>#main-toolbar #zoom-neighborhood {<br> background-image: url(lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg);<br>}<br><br>#main-toolbar #zoom-groups {<br> background-image: url(lib/sugar-web/graphics/icons/actions/zoom-groups.svg);<br>}<br><br>#main-toolbar #zoom-home {<br> background-image: url(lib/sugar-web/graphics/icons/actions/zoom-home.svg);<br>}<br><br>#canvas p {<br> background-color: white;<br> margin: 11px;<br> padding: 11px;<br>}<br><br>.palette p {<br> margin: 5.5px;<br>}<br><br><br></div>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. <br><br></div>Please help me out.<br><br></div>Regards,<br></div>Sneha Mohanty<br><div><div><div><div><div><br></div></div></div></div></div></div>
</blockquote></div><br></div>