I am working on a custom widget for Jupyter Notebook. The widget does not automatically load when a user opens their notebook, due mainly to the widget state not being found in the kernel. The feature at hand is to display an image instead, until the notebook loads.
I have determined that a cell containing the following:
from IPython.display import Image
img = Image(filename="eggsnspam.png", width=500)
display(img)
will reload its image properly when the user loads the notebook.
The widget has code in it to generate a PNG "snapshot" image of the widget. I want to show this image such that:
When the user loads the notebook and the widget state is not available, the user sees the serialized image.
When the user runs the cell that generates the widget, the user sees the widget and not the image.
I have tried researching several ways of dynamically showing or hiding the image, but nothing has worked. I believe the most promising untried approach is to show the Image and the widget at the same location in the output cell, rendering the widget in front of the Image in the Z order. However I don't know how to lay out the two to accomplish this.
It is necessary to manage this in the widget JS and/or Python code, and not from code cells in the notebook. Additionally, the widget has no background attribute, and I have not yet learned how to create one. (Discussions prior to my involvement in this project liked the idea of setting the background to the desired image.)
The jp_doodle canvas widget has a "snapshot" feature
which stores an image of the canvas. I think you could
use it do do what you are describing.
Please see:
https://nbviewer.jupyter.org/github/AaronWatters/jp_doodle/blob/master/notebooks/Feature%20demonstrations/Snapshot.ipynb
from the jp_doodle widget implementation
https://github.com/AaronWatters/jp_doodle
which has many examples of displaying images in canvases.
Related
i want to create some kind of widget/badge that will be included on several websites. It will not be placed inside the page, it shall be shown as overlay on top of the website at a defined position (like on center rightside, bottom left).
You might know those kind of widgets from TrustedShops.
How can i ensure that this included widget always looks same? No matter which css/javascript is active on the website that includes the widget?
Somebody already have experiences which those stuff? Any pitfalls/ideas?
Can i somehow define a css sandbox (like with a iframe?) Or do i need to set all possible values also to their defaults to ensure that including page might not change it?!
One other thought of mine: It could be imported as image. Then you ensure that layout is static, but its somehow hardcoded. The external website creates a dynamic image (via PHP) and this is just shown on including website, but then no interaction is possible ... :(
BR
Marius
I need to use javascript-visualization packages in R like plotly and dygraphs and show the generated plots in my web page. The generated plot needs to be updated whenever the user interacts with other HTML elements in the webpage.
I have considered and have been disappointed in the Shiny server way to integrate the UI with plotting because it limits the developer's way of having full control over the UI using javascript, otherwise it's great.
Until now I have found that I can embed the htmlwidgets file in an IFrame to show the plot, but as discussed in this post: Embedding an R htmlwidgets into existing webpage, and in general, Iframes are considered bad practice, and thus would like to do this: Answer to the above-linked question.
But the problem is that every time I regenerate a plot using plotly or dygraph and save them using saveWidget() function of htmlwidgets package the generated plot file has a different id for the div of the plot generated. How can I embed a div present in an external HTML file(with srcs to even more html/css/js files) whose id is changing every time I generate the plot file?
I would suggest I frame to pass form and using Shiny. That would not result in recreating the wheel effort in using a ready made server.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
Design/Implement a state model diagram template solution.
This should use html/css/js to allow the ability to dynamically highlight the current workflow state for a given customer’s product.
we have used go js , it is licensed.
we have drawn rectangle and links editable save and jsn preview.
can we use this code?
We got solution like, we drawn image with some tools and highlighted with specific co-ordinates of the image with highlighted js plugin.
When you normally right-click over an image displayed on a Web page inside a Web browser, you get a context menu that has a menu item 'Save Image As'.
But if you right click on some images on some websites, the context menu doesn't display items that indicate that the image is one image. Instead, it displays 'View Background Image'.
If you view the background image, it turns out that the web application has one composite image that it has cached and then probably at client side, it slices and dices that image into separate tags.
For example, if you go to any thread on the Writers website of Stack Exchange, like this one:
https://writers.stackexchange.com/questions/3102/how-can-i-make-a-story-bigger
And right-click on the facebook icon and view the background image, you get this image:
http://cdn.sstatic.net/Skins/sketchy/img/sprites-beta.png?v=2
Similarly, if you go to a website that has the shareThis widget, like this:
http://sathyaish.net/
On the extreme top-right corner, there is this shareThis widget image. If you right-click on that image and view the background image, it looks like this:
http://w.sharethis.com/share4x/images/service-icons-sprite.png
1) I want to know what technology is used to achieve this and how may I learn to do it?
2) Secondly, how do I become good at JavaScript? How do I learn all these tricks? Which books should I start reading that will make me good at JavaScript?
See the word "sprite" in both the image urls? That's is what you are looking for.
Sadly, the technique is often used for content images — placing performance over correct HTML.
While you can get general tutorials on CSS Sprites (as Quentin pointed out), you might also want to check GWT ImageBundle Design doc which details how the idea was incorporated into Google Web Toolkit