Floor-plan in Android and svg [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to show a simple custom floor-plan in my Android app, something similar to the image below:
The target is to colour the area where I am currently in (I get this info in my app):
It would be perfect if each of these areas are also clickable to set an onclicklistener or similar and be able to zoom in/out as with images.
The main restriction is I want everything local, that is, no connection to an internet service to import the image.
I have tried loading an html which contains an svg floor-plan, but I don't know how to change the colour of an area from Android when I move from one area to another.
How can I approach this?

You can create a simple html page within a WebView and attach the SVG and add Javascript, so when tapping on the some elements in the svg to call a javascript function. You can then sent the events to the native java code in your android app if your app is native or just handle it in the html.
I believe this article is especially for your question Interfacing with SVG

you'r floor looks a lot like a grid layout!! why are you doing so much work to achieve something very simple? what you need to do is dynamically create a grid layout then put other views in it

This is a very open-ended question. It's also not simple.
You're going to have to do a lot of low-level coding to achieve what you outlined. No matter the case, you're going to have to find a way to turn that SVG into something that can be interacted with. The limiting factor here is that you're using SVGs--that's not a data format, it's vector. Unless you parse SVG into something more usable for a UI, or can get this data in a different format (some form of parsed JSON?), you're just showing an image.
Now assuming you do find a way to get this data more accessibly, you could go down the path of a custom view and overriding the draw(). Then you could just draw out your rooms and positions where you want, add a TouchListener, add a drawing state machine, etc. Alternatively to the View.draw(), you could use an GLSurfaceView and draw with hardware language.

Related

Modify & Export a PNG [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
A while ago I had created a small system that would allow one to select various images to use in a forum signature that were all designed to fit together (see example image below). This is currently done by having a series of images that get referenced by their names, which folder they're in, and suffixes in the image names.
I would like to create a system where one could modify these all they wanted. I tried looking up a few different ways to do it, however was unsuccessful in finding any way that would be able to do what I'm aiming to do here.
The original images are made in Photoshop and separated into individual layers based on the type of banner. Ideally I'd love to make a system that would allow one to modify the colours (RGB, slider, something like that), change the icon either by a set of preset icons or uploading their own, and the ability to modify the text on the images.
After all is said and done, I'd like the image pieces to be downloadable so they're not stored server-side. In addition I'd like to do this without having to export every variation possible, since that's already a nuisance with the current way it's doing things.
TL;DR:
Is there any way a user could modify a set of parameters to change colours, icons, or text, then download the result as a PNG? Code type does not matter, I'm willing to learn, just want to know the right direction.
Here's a download of the current code for anyone interested.
https://dl.dropboxusercontent.com/u/90098446/website.zip
Example Image (ignore the white lines):
Seems like each banner has four layers: banner, icon, text, and optional tears.
Save the individual layers and assemble them via javascript on the front-end. Arranging the parts as sprite sheets may make this more convenient both for editing in Photoshop and for assembling programmatically.
When the user wants to download the results, send a description of the assembly to the back-end, have the back-end assemble the parts into an image, and offer the image for download.
Rather than manually assembling each possibility in Photoshop, you instead let the system assemble it on demand.
I have actually done something like this. You need to use a canvas in your HTML and to have a finite number of possible images or possibly some Javascript functions to draw the thing the user wants. Those images/functions should be put together in your canvas to enable the user to preview what is his picture and a control set to change things.
This SO post shows you how you can get a png from a canvas. I suggest that you should have a save button, where the user finalizes the picture and this should send the picture to the server, where it will be stored. The download feature should download that picture.
I have done this differently. I have used canvas as a preview and when the user finalized the settings, those were sent to the server as JSON where the final picture was put together.

How to implement a reversed radial tilt shift effect in canvas [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
What I'm creating
I'm creating a JavaScript image manipulation app (using Fabric.js & HTML5 canvas) to build/re-render the canvas and place/drag objects onto it. After placing the objects it could export the data url and the image is manipulated.
The feature that I would like to add
I'm trying to implement a reversed radial tilt shift effect so certain spots in the picture could be "blurred out". What's the fastest way to achieve this through Fabric.js or just plain HTML5 canvas?
This is an example of what I want to achieve
What I've tried
Adding a Circle shape and trying to add an Blur/Convolute effect to
it and then lowering the opacity => This didn't work in my case, I
could only change the opacity attribute.
Adding an image (from URL) and trying the same thing as the first
point. => This didn't work in my case, I could only add a
Blur/Convolute filter but not change the opacity.
Maybe i can finish this demo later.
As you see i put your image as background.
Then i loaded the same image in a image element that i used to create a pattern for the circle.
Now, when the circle is moving i move the patterns offset so it looks like the image is the same as the background, but you are looking at the pattern.
Now imagine to use stackblur or fabricjs filters to blur the pattern image (just once) and you should get the effect you desire.
some trick to compensate the scaling effect is required.
I will finish the demo later.
hope it gives you the help.
EDIT: i have serious cors issue here.
I do not know how to make a snippet with not local images.
here a working demo made with fabricjs:
http://www.deltalink.it/andreab/fabric/blur.html

Why is my website loading so slow? How can I fix it? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My website at http://droid.ly is loading extremely slowly!
What can I do to fix it? Any and all help is greatly appreciated.
Thanks!
Here are couple of things you can try to reduce loading time.
First of all if you are using JS and you are giving online path then try to use that file in your code and give path from you project.instead of using online paths for JS.
Remove Comments and white spaces from javascript. you can use online javascript Compression tool to remove white spaces and comments.
Enable browser caching
Avoid bad requests. check whether you have any broken link.if you do have then make it correct or remove
Try to Use Internal / external CSS .. and dont use inline styles.
Reduce the number of plugins you use on your site
Put CSS at the top and JS at the bottom
Last but not Least .. Image plays roles in site loading time. try to use optimize image..
For more Please follow the link below..
Reducing site loading time
You are using a landing page (one page site) and You have TOO MUCH images on it.
The browser needs to pre-load all the images and that takes some time.
1 - Optimize the images for web view
2 - Try to reduce the amount of your images
3 - Use a plugin that loads the images while scrolling, so the request will be reduced
Try this plugin:
'http://ressio.github.io/lazy-load-xt/demo/index.htm'
Or this one:
http://www.appelsiini.net/projects/lazyload
In this way you will reduce the page load problem.
You have some high resolution PNG images that will load quite slow depending on the connection. Using JPEG format for high resolution photos instead of PNG can reduce their size quite a bit, without significant quality loss. Apart from that consider concatenating and minifying your scripts/stylesheets and gzip everything if possible.
Open chrome, then open developer tools, open Audits tab, chose "Reload page and Audit...", push run button.
Chrome will give you the same advices, as in this answers.
From me:
Make one css file from all css you have.
Make one js file from all js you have.
Resize images on server, make them smaller.
Are you sure, that you are using all symbols from your font files ?Try to remove unused symbols from font files (you can create custom font file from svg files, i manage my fonts via https://icomoon.io/)
And you will see the difference

What to use for a simple HTML5 game playable on Mobile [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
At work, I am developing this "mystery"-type (2D) game where users go around rooms/location, tap on objects (objects/items/people) and get some form of feedback like a message, a chat (think RPG chat) or finding some item.
Technology used currently
Currently its developed using pure HTML/CSS, where everything is a div. Animations uses CSS3 Animations or jQuery ones depending on suitability. Chats implemented using simple buttons (on click, depending on reply do something). There is panning of the game stage involved - the viewable area is smaller than the actual game stage. So users will drag the stage around by tapping and drag.
The problem
Details here are not really important ... you may want to just scan through this section if you prefer
The most problematic part with this is performance. On a mobile device, its terribly jerky for a simple 2D game like this. Taps are not really responsive, sometimes requires more taps to register. We already tried to use CSS animations and transforms where possible.
The 2nd problem is debugging. Since this game is played on the client's app, which embeds own game in an in app browser/webview. Debugging is made more complicated (no Chrome usb/remote debugging, currently we use Firebug Lite - which is a pain and lacking in features ...). Performance also suffers further. There seem to be weird bugs also like jQuery animation callbacks running at the wrong time. Views scrolling unexpectedly. Sometimes the tap area of the objects are off the actual object - when the user pans the stage, the graphics move as expected, but the tap area is off the object - eg. tapping on the right of an object triggers it, but not tapping on the object (this happens on some devices of a particular brand)
Any recommendations?
For such a type of game, is a game engine suitable? Which one? Most I see are more for more complex games and maybe overkill to include.
Might using HTML5 canvas solve my graphical performance issues? Another game was developed using ImpactJS, its of a different kind, and the performance is considered ok. But with this chat and tap (to interact) based game, I wonder if such a large framework is actually required.
The problem with the taps is that phones handle clicks different than touches: for each click there is a delay (300ms, if I'm not mistaken) during which it waits to see if the user performs a double-click. That's usually where most of the sluggishness on the mobile devices comes from.
You never described which part exactly is causing the game to perform badly. If you have tons of elements on screen, each with their own CSS (and especially CSS like shadows, animations...) it will likely slow your game down.
Using canvas (and dropping jQuery to squeeze out maximum performance from the app) might be a good idea here. Without any huge frameworks/engines. Using canvas will also help you with the issues you described under debugging - while you won't be able to inspect every element on canvas, things like displaced objects/click areas won't be happening as everything (except chat - I strongly suggest you don't render text on canvas because it's very slow) is located in a single element and all the layering will happen on the canvas itself, not CSS.
But don't forget: while a well-designed canvas app might definitely outperform what you currently have, it can also perform worse if done badly.

Javascript and canvas 3D model viewer [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I'm looking for a way to make a 3D model viewer for my site using Javascript and the canvas element. Something like on this page:
http://minecraftbr.com/novaskin/
You can see the model (the Minecraft guy) is shown and you can rotate and move him. What also needs to happen is a particular skin applied to the model. For example, each minecraft skins looks something like this:
http://i.stack.imgur.com/AiBnl.png
And it is then mapped onto the minecraft guy, to look like this:
http://minecraftbr.com/novaskin/#http://imgur.com/AiBnl.png
To be honest it seems like pretty easy pixel reading and then just applying the correct colour. What I'd really need help with is the 3D aspect of this, like the polygons for the head, body, arms, legs etc.
Is there a decent Javascript library for doing this kind of stuff? Something that can make it easy to use 3D polygons and stuff in the canvas element.
Help is appreciated, cheers.
I've made something like this and it's on my website, it's made with Canvas and CSS3 mainly. It will load in the username of a minecraft player and use their skin. I added basic ability to view on iPad/iPhone etc so you can turn the device and the model will move, as if you are moving the camera. The link is
mjstk.co.uk/dev/minechar/
or for loading in a skin of a custom user (you could upload/drag n drop new skins on if you wanted to add that)
mjstk.co.uk/dev/minechar/#minecraftusername
mjstk.co.uk/dev/minechar/#hugosslade (is mine)
If you are looking to do it completely in canvas though, I'd recommend three.js; While it does have support for WebGL, it also can utilise canvas (as well as other things)
Hope that was helpful

Categories